CSS Variables

Basic CSS Variable Usage

In standard CSS, variables can be set and referenced to ensure consistent styling. Here’s a basic example:

const buttonStyles = css({
  '--button-color': 'red',
  background: 'var(--button-color)',
  border: '2px solid var(--button-color)',
})

In this example, the variable --button-color is set to red and is then used in the background and border properties.

CSS Variable with Design Tokens

Panda allows you to use design tokens within variables, creating a scalable and theme-consistent approach.

To reference a design token, specify the token path using dot notation. For instance:

const buttonStyles = css({
  '--button-color': 'colors.red.400',
  background: 'var(--button-color)',
  border: '2px solid var(--button-color)',
})

Adding Opacity Modifiers in CSS Variables

Opacity modifiers can be used directly with color tokens. When defining a variable with an opacity-modified token, wrap the token path in {} to ensure proper parsing.

const bgStyle = css({
  '--background-color': '{colors.red.400/40}', // Applies 40% opacity
  bg: 'var(--background-color)',
})

Wrapping the token path in {} tells Panda to interpret colors.red.400/40 as a 40% opacity value, which is then referenced via var(--background-color).