Color opacity modifier

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="green.9/60".

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

This will generate something like this:

  --mix-background: color-mix(in srgb, var(--colors-red-5) 40%, transparent);
  background: var(--mix-background, var(--colors-red-5));
  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.9/40}' }}>
  <Text>Hello World</Text>
  <Box bg="var(--bg)" boxSize="10" />
</Box>