Colors
A colour is a variable
Every token is a CSS variable, written with its own value as the fallback, so it is declared nowhere: a :root insert after the page has painted would recalculate every element on it. Declare --blue-500 yourself and it wins. That is what makes a colour cheap to repeat and possible to override — and why the values below are oklch() rather than hex: a perceptual space is what keeps a step even across the hues and a theme legible at every one of them.
/* bgColor="blue-500" — lightness, chroma, hue */
.bgColor-blue-500 {
background-color: var(--blue-500,oklch(62.3% .214 259.8));
}Twenty-six families, eleven steps
Five neutrals, four more that sit between them (mauve, mist, olive, taupe) and the seventeen hues. Hover a swatch for the value behind it.
keywords
slate
gray
zinc
neutral
stone
mauve
mist
olive
taupe
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
An opacity modifier
A slash and a number on any colour value — bgColor="blue-500/40" — is the token at 40% opacity. It works on every colour prop, and it nests wherever a colour does: inside a hover, a theme, a breakpoint, a cq.
<Flex gap={3}>
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/100" />
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/80" />
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/60" />
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/40" />
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/20" />
</Flex>The alpha lands on the colour, not on the element
opacity fades the whole element — its text, its border, its children. The modifier fades one declaration, because it compiles to a color-mix() against transparent: the token stays a var(), so a themed colour is still themed and every element asking for the same value still shares one class. The mix is done in oklab — mixing towards transparency in a polar space would drag the hue along with it.
/* bgColor="blue-500/40" */
.bgColor-blue-500\/40 {
background-color: color-mix(in oklab, var(--blue-500,oklch(62.3% .214 259.8)) 40%, transparent);
}Your own colours take it too
A variable declared through Box.extend() is a colour value on every one of those props, and the modifier applies to it unchanged — the mix reaches the variable, whatever it was declared as. A token the palette does not have (or a percentage outside 0–100) is not a colour: it produces no rule and no class name, the way every unmatched value does.
// once, before the first render
Box.extend({ brand: 'oklch(62% 0.19 264)' });
<Box bgColor="brand" b={1} borderColor="brand/30">
Brand, and its border at 30%
</Box>;