BRAID
Braid Logo
 

vars

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.grid

vars.touchableSize

vars.touchableSize

vars.contentWidth

vars.contentWidth.xsmall
 
vars.contentWidth.small
 
vars.contentWidth.medium
 
vars.contentWidth.large
 

vars.space

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

vars.foregroundColor.brandAccent
Aa
vars.foregroundColor.brandAccentLight
Aa
vars.foregroundColor.caution
Aa
vars.foregroundColor.cautionLight
Aa
vars.foregroundColor.critical
Aa
vars.foregroundColor.criticalLight
Aa
vars.foregroundColor.formAccent
Aa
vars.foregroundColor.formAccentLight
Aa
vars.foregroundColor.info
Aa
vars.foregroundColor.infoLight
Aa
vars.foregroundColor.link
Aa
vars.foregroundColor.linkHover
Aa
vars.foregroundColor.linkLight
Aa
vars.foregroundColor.linkVisited
Aa
vars.foregroundColor.linkLightVisited
Aa
vars.foregroundColor.neutral
Aa
vars.foregroundColor.neutralInverted
Aa
vars.foregroundColor.positive
Aa
vars.foregroundColor.positiveLight
Aa
vars.foregroundColor.promote
Aa
vars.foregroundColor.promoteLight
Aa
vars.foregroundColor.rating
Aa
vars.foregroundColor.secondary
Aa
vars.foregroundColor.secondaryInverted
Aa

vars.backgroundColor

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

vars.textWeight.regular
Aa
vars.textWeight.medium
Aa
vars.textWeight.strong
Aa

vars.borderColor

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

vars.borderWidth.standard
vars.borderWidth.large

vars.borderRadius

vars.borderRadius.small
vars.borderRadius.standard
vars.borderRadius.large
vars.borderRadius.xlarge

vars.shadow

vars.shadow.small
vars.shadow.medium
vars.shadow.large