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>