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(--_2malj2a)"
) 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.contentWidth.xsmall
 
vars.contentWidth.small
 
vars.contentWidth.medium
 
vars.contentWidth.large
 
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.space.xxxlarge
vars.foregroundColor.brandAccent
vars.foregroundColor.brandAccentLight
vars.foregroundColor.caution
vars.foregroundColor.cautionLight
vars.foregroundColor.critical
vars.foregroundColor.criticalLight
vars.foregroundColor.formAccent
vars.foregroundColor.formAccentLight
vars.foregroundColor.info
vars.foregroundColor.infoLight
vars.foregroundColor.link
vars.foregroundColor.linkHover
vars.foregroundColor.linkLight
vars.foregroundColor.linkVisited
vars.foregroundColor.linkLightVisited
vars.foregroundColor.neutral
vars.foregroundColor.neutralInverted
vars.foregroundColor.positive
vars.foregroundColor.positiveLight
vars.foregroundColor.promote
vars.foregroundColor.promoteLight
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.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.formAccentHover
vars.backgroundColor.formAccentSoft
vars.backgroundColor.formAccentSoftActive
vars.backgroundColor.formAccentSoftHover
vars.backgroundColor.info
vars.backgroundColor.infoLight
vars.backgroundColor.neutral
vars.backgroundColor.neutralActive
vars.backgroundColor.neutralHover
vars.backgroundColor.neutralLight
vars.backgroundColor.neutralSoft
vars.backgroundColor.neutralSoftActive
vars.backgroundColor.neutralSoftHover
vars.backgroundColor.positive
vars.backgroundColor.positiveLight
vars.backgroundColor.promote
vars.backgroundColor.promoteLight
vars.backgroundColor.surface
vars.textWeight.regular
Aa
vars.textWeight.medium
Aa
vars.textWeight.strong
Aa
vars.borderColor.brandAccent
vars.borderColor.brandAccentLight
vars.borderColor.caution
vars.borderColor.cautionLight
vars.borderColor.critical
vars.borderColor.criticalLight
vars.borderColor.field
vars.borderColor.focus
vars.borderColor.formAccent
vars.borderColor.formAccentLight
vars.borderColor.info
vars.borderColor.infoLight
vars.borderColor.neutral
vars.borderColor.neutralInverted
vars.borderColor.neutralLight
vars.borderColor.positive
vars.borderColor.positiveLight
vars.borderColor.promote
vars.borderColor.promoteLight
vars.borderWidth.standard
vars.borderWidth.large
vars.borderRadius.small
vars.borderRadius.standard
vars.borderRadius.large
vars.borderRadius.xlarge
vars.shadow.small
vars.shadow.medium
vars.shadow.large