CSS Variables

Using token-aware CSS variables in Cerberus UI

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>

On this page

Edit this page on Github