BRAID
Braid Logo
 

atoms

The atoms function provides low-level access to Braid’s reusable atomic classes within your vanilla‑extract stylesheets.

CSS utilities

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", "small", "standard", "xlarge"
paddingTop (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall", "xxxlarge"
paddingBottom (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall", "xxxlarge"
paddingRight (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall", "xxxlarge"
paddingLeft (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall", "xxxlarge"
marginTop (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall", "xxxlarge"
marginBottom (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall", "xxxlarge"
marginRight (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall", "xxxlarge"
marginLeft (Responsive)
"gutter", "large", "medium", "none", "small", "xlarge", "xsmall", "xxlarge", "xxsmall", "xxxlarge"
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"
overflow
"auto", "hidden", "scroll", "visible"
userSelect
"none"
outline
"none"
opacity
0
zIndex
0, 1, 2, "dropdown", "dropdownBackdrop", "modal", "modalBackdrop", "notification", "sticky"
cursor
"default", "pointer"
pointerEvents
"none"
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 and margins

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

Responsive padding and margins

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

Shadows, borders and outlines

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.
borderNeutral
Used for neutral element borders.
borderNeutralLarge
Used for large neutral element borders.
borderNeutralInverted
Used for neutral borders on dark backgrounds.
borderNeutralInvertedLarge
Used for large neutral borders on dark backgrounds.
borderNeutralLight
Used for light neutral element borders.
borderField
Used for borders around form fields.
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.
borderFormAccentLight
Used for borders around prominent interactive elements in a dark context.
borderFormAccentLightLarge
Used for large borders around prominent interactive elements in a dark context.
borderBrandAccent
Used for borders around branded elements.
borderBrandAccentLarge
Used for large borders around branded elements.
borderBrandAccentLight
Used for borders around branded elements in a dark context.
borderBrandAccentLightLarge
Used for large borders around branded elements in a dark context.
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.
borderCriticalLightLarge
Used for large 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.

CSS reset

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",
})