import { atoms } from "braid-design-system/css"
The atoms function provides low-level access to Braid’s reusable atomic classes within your vanilla‑extract stylesheets.
The atoms function provides a suite of common CSS utility props. Styles that regularly differ across screen sizes can also be expressed as responsive values, e.g. atoms({ justifyContent: { mobile: 'center', tablet: 'flexStart' }})
These utilities are recommended where possible to reduce the amount of custom CSS in your application.
// styles.css.ts
import { atoms } from "braid-design-system/css"

export const className = atoms({
  display: "flex",
  justifyContent: {
    mobile: "center",
    tablet: "flexStart",
  },
  position: "absolute",
  top: 0,
  left: 0,
  width: "full",
  height: "full",
})
display (Responsive)
"block", "flex", "inline", "inlineBlock", "none"
position (Responsive)
0, 1, 2
borderRadius (Responsive)
"full", "large", "none", "standard", "xlarge"
paddingTop (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall"
paddingBottom (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall"
paddingRight (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall"
paddingLeft (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall"
marginTop (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall"
marginBottom (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall"
marginRight (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall"
marginLeft (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall"
alignItems (Responsive)
"center", "flexEnd", "flexStart"
justifyContent (Responsive)
"center", "flexEnd", "flexStart", "spaceBetween"
flexDirection (Responsive)
"column", "columnReverse", "row", "rowReverse"
flexWrap (Responsive)
"nowrap", "wrap"
flexShrink (Responsive)
0
flexGrow (Responsive)
0, 1
textAlign (Responsive)
0, 1, 2
transform (Pseudo)
"touchable"
background
"body", "brand", "brandAccent", "brandAccentActive", "brandAccentHover", "brandAccentSoft", "brandAccentSoftActive", "brandAccentSoftHover", "card", "caution", "cautionLight", "critical", "criticalActive", "criticalHover", "criticalLight", "criticalSoft", "criticalSoftActive", "criticalSoftHover", "formAccent", "formAccentActive", "formAccentDisabled", "formAccentHover", "formAccentSoft", "formAccentSoftActive", "formAccentSoftHover", "info", "infoLight", "input", "inputDisabled", "neutral", "neutralLight", "positive", "positiveLight", "promote", "promoteLight", "selection"
overflow
0, 1, 2, 3
userSelect
0
outline
0
opacity
0
zIndex
0, 1, 2, "dropdown", "dropdownBackdrop", "modal", "modalBackdrop", "notification", "sticky"
boxShadow
"borderBrandAccentLarge", "borderCaution", "borderCautionLight", "borderCritical", "borderCriticalLarge", "borderCriticalLight", "borderField", "borderFormAccent", "borderFormAccentLarge", "borderFormHover", "borderInfo", "borderInfoLight", "borderPositive", "borderPositiveLight", "borderPromote", "borderPromoteLight", "borderStandard", "borderStandardInverted", "borderStandardInvertedLarge", "large", "medium", "outlineFocus", "small"
cursor
0, 1
pointerEvents
0
top
0
bottom
0
left
0
right
0
height
"full", "touchable"
width
"full", "touchable"
minWidth
0
maxWidth
"large", "medium", "small", "xsmall"
transition
"fast", "touchable"
Padding can be applied in all directions using our space scale. Margin is also supported with the same syntax, but padding is recommended over margin in most cases to avoid issues with collapsing margins.
// styles.css.ts
import { atoms } from "braid-design-system/css"

export const className = atoms({
  paddingX: "gutter",
  paddingY: "large",
})
padding
paddingX
paddingY
paddingTop
paddingRight
paddingBottom
paddingLeft
Padding and margins can also differ across screen sizes by providing responsive values, e.g. padding={{ mobile: 'small', tablet: 'medium', desktop: 'large', wide: 'xlarge' }}
// styles.css.ts
import { atoms } from "braid-design-system/css"

export const className = atoms({
  padding: {
    mobile: "small",
    tablet: "medium",
    desktop: "large",
    wide: "xlarge",
  },
})
Responsive padding
The atoms function provides a series of boxShadow values that handle a wide variety of use cases. Note that box shadows are also used for outlines and borders so that their presence doesn’t alter the dimensions of the element.
// styles.css.ts
import { atoms } from "braid-design-system/css"

export const className = atoms({
  boxShadow: "large",
})
small
Used for small shadows.
medium
Used for medium shadows.
large
Used for large shadows.
borderStandard
Used for neutral element borders.
borderStandardInverted
Used for standard borders on dark backgrounds.
borderStandardInvertedLarge
Used for large standard borders on dark backgrounds.
borderField
Used for borders around form fields.
borderFormHover
Used for borders around form fields on hover.
outlineFocus
Used for focus states of interactive elements.
borderFormAccent
Used for borders around prominent interactive elements.
borderFormAccentLarge
Used for large borders around prominent interactive elements.
borderBrandAccentLarge
Used for large borders around branded elements.
borderPositive
Used for borders around “positive” elements.
borderPositiveLight
Used for borders around “positiveLight” elements.
borderCritical
Used for borders around “critical” elements.
borderCriticalLarge
Used for large borders around “critical” elements.
borderCriticalLight
Used for borders around “criticalLight” elements.
borderCaution
Used for borders around “caution” elements.
borderCautionLight
Used for borders around “cautionLight” elements.
borderInfo
Used for borders around “info” elements.
borderInfoLight
Used for borders around “infoLight” elements.
borderPromote
Used for borders around “promote” elements.
borderPromoteLight
Used for borders around “promoteLight” elements.
Braid uses locally-scoped classes to manage CSS resets. This is managed automatically when using Box elements, but if you’re targeting native non-Braid elements, you can manually apply a CSS reset via the reset option which accepts a native element type.
// styles.css.ts
import { atoms } from "braid-design-system/css"

export const className = atoms({
  reset: "span",
})