Color opacity modifier

How to dynamically set the opacity of a raw color or color token

Every color related style property can use the

color-mix

shortcut to apply opacity to a color.

Syntax

The general syntax is {color}/{opacity}. For example: bg="red.300/40".

Usage

<Text bg="red.300/40" color="white">
  Hello World
</Text>

This will generate something like this:

.css-sxdf {
  --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
  background: var(--mix-background, var(--colors-red-300));
  color: var(--colors-white);
}

CSS Variables

This feature can be used in css variables as well. This is useful for creating one-off color token in a component.

The token reference syntax {} is required for this to work.

<Box css={{ "--bg": "{colors.red.400/40}" }}>
  <Text>Hello World</Text>
  <Box bg="var(--bg)" />
</Box>

Dark Mode

Conditional Styles