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: bgColor="page.surface.100/40".

Usage

<Text bgColor="danger.bg.initial/40" color="danger.text.initial">
  Hello World
</Text>

This will generate something like this:

.css-sxdf {
  --mix-background: color-mix(in srgb, var(--colors-danger-bg-initial) 40%, transparent);
  background-color: var(--mix-background, var(--colors-danger-bg-initial));
  color: var(--colors-danger-text-initial);
}

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.danger.bg.initial/40}" }}>
  <Text>Hello World</Text>
  <Box bg="var(--bg)" />
</Box>

On this page

Edit this page on Github