Overview
CSS variables have become the defacto way to create shared values on the web. It's very useful to avoid prop interpolations, classname regeneration, and reduce runtime evaluation of token values.
Examples
Basic
Use the css prop to create css variables
<Box css={{ '--font-size': '18px' }}>
<Text as="h3" css={{ fontSize: 'calc(var(--font-size) * 2)' }}>
Hello
</Text>
<Text css={{ fontSize: 'var(--font-size)' }}>Hello</Text>
</Box>Access tokens
Use the full token path to access semantic-tokens
<Box css={{ '--color': '{colors.danger.text.initial}' }}>
<Text css={{ color: 'var(--color)' }}>Hello</Text>
</Box>Here's an example of how to access size tokens
<Box css={{ '--font': '{fonts.display}' }}>
<Text as="h1" css={{ fontFamily: 'var(--font)' }}>
Hello
</Text>
</Box>Responsive Styles
Use the responsive syntax to make css variables responsive
<Box css={{ '--font-size': { base: '18px', lg: '24px' } }}>
<Text as="h3" css={{ fontSize: 'calc(var(--font-size) * 2)' }}>
Hello
</Text>
<Text css={{ fontSize: 'var(--font-size)' }}>Hello</Text>
</Box>Color Opacity Modifier
When accessing color tokens, you can use the opacity modifier to access the
color with an opacity. The requirement is to use the {} syntax.
<Box css={{ '--color': '{colors.red.500/40}' }}>
<Text css={{ color: 'var(--color)' }}>Hello</Text>
</Box>Virtual Color
Variables can point to a virtual color via the colors.colorPalette.* value.
This is useful for creating theme components.
<Box colorPalette="success" css={{ '--color': '{colors.colorPalette.initial}' }}>
<Text css={{ color: 'var(--color)' }}>Hello</Text>
</Box>