theme() & Color Functions

In v3 you reached tokens in custom CSS with the theme() function. In v4, tokens are already CSS variables, so the idiomatic way is plain var().

The v4 Way: var()

Since every @theme token is a custom property, just reference it:

.panel {
  box-shadow: 0 1px 2px var(--color-gray-900);
  border-radius: var(--radius-card);
  font-family: var(--font-display);
}

No function call, no build-time substitution — the value resolves live in the browser, so scoped overrides keep working.

The Legacy theme() Function

theme() still exists for cases where you need a static value, such as inside a media query where custom properties are not allowed:

@media (min-width: theme(--breakpoint-lg)) {
  .grid { gap: theme(--spacing-8); }
}

It accepts the dotted token path and inlines the resolved value at build time. Prefer var() unless you specifically need the static behaviour.

Alpha and Color Mixing

In markup, the slash modifier sets opacity: bg-blue-500/50. In custom CSS there is no slash, so mix the color toward transparent:

.tint {
  background: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  border-color: color-mix(in oklab, var(--color-blue-500) 30%, white);
}

color-mix(in oklab, ... 50%, transparent) is the CSS equivalent of the /50 utility, and mixing toward white or black gives you tints and shades from a single token. Working in the OKLCH-derived oklab space keeps the blends perceptually even.