import { vars } from "braid-design-system/css"
The vars object provides access to Braid’s CSS variables, which can be used both within vanilla-extract stylesheets and runtime code.
Note that these variables are strings containing locally-scoped CSS variable expressions (e.g.
"var(--_1qp39jx9)"
) which means that any calculations must use calc functions. To make this easier when working in TypeScript, we recommend using vanilla-extract’s calc utility.
vars.grid
vars.touchableSize
vars.space.gutter
vars.space.xxsmall
vars.space.xsmall
vars.space.small
vars.space.medium
vars.space.large
vars.space.xlarge
vars.space.xxlarge
vars.foregroundColor.brandAccent
vars.foregroundColor.caution
vars.foregroundColor.critical
vars.foregroundColor.formAccent
vars.foregroundColor.info
vars.foregroundColor.link
vars.foregroundColor.linkHover
vars.foregroundColor.linkVisited
vars.foregroundColor.neutral
vars.foregroundColor.neutralInverted
vars.foregroundColor.positive
vars.foregroundColor.promote
vars.foregroundColor.rating
vars.foregroundColor.secondary
vars.foregroundColor.secondaryInverted
vars.backgroundColor.body
vars.backgroundColor.brand
vars.backgroundColor.brandAccent
vars.backgroundColor.brandAccentActive
vars.backgroundColor.brandAccentHover
vars.backgroundColor.brandAccentSoft
vars.backgroundColor.brandAccentSoftActive
vars.backgroundColor.brandAccentSoftHover
vars.backgroundColor.card
vars.backgroundColor.caution
vars.backgroundColor.cautionLight
vars.backgroundColor.critical
vars.backgroundColor.criticalActive
vars.backgroundColor.criticalHover
vars.backgroundColor.criticalLight
vars.backgroundColor.criticalSoft
vars.backgroundColor.criticalSoftActive
vars.backgroundColor.criticalSoftHover
vars.backgroundColor.formAccent
vars.backgroundColor.formAccentActive
vars.backgroundColor.formAccentDisabled
vars.backgroundColor.formAccentHover
vars.backgroundColor.formAccentSoft
vars.backgroundColor.formAccentSoftActive
vars.backgroundColor.formAccentSoftHover
vars.backgroundColor.info
vars.backgroundColor.infoLight
vars.backgroundColor.input
vars.backgroundColor.inputDisabled
vars.backgroundColor.neutral
vars.backgroundColor.neutralLight
vars.backgroundColor.positive
vars.backgroundColor.positiveLight
vars.backgroundColor.promote
vars.backgroundColor.promoteLight
vars.backgroundColor.selection
vars.textWeight.regular
Aa
vars.textWeight.medium
Aa
vars.textWeight.strong
Aa
vars.borderColor.brandAccent
vars.borderColor.caution
vars.borderColor.cautionLight
vars.borderColor.critical
vars.borderColor.criticalLight
vars.borderColor.field
vars.borderColor.focus
vars.borderColor.formAccent
vars.borderColor.formHover
vars.borderColor.info
vars.borderColor.infoLight
vars.borderColor.positive
vars.borderColor.positiveLight
vars.borderColor.promote
vars.borderColor.promoteLight
vars.borderColor.standard
vars.borderColor.standardInverted
vars.borderWidth.standard
vars.borderWidth.large
vars.borderRadius.standard
vars.borderRadius.large
vars.borderRadius.xlarge