Tokens

Every token shadcn/ui defines is here, spelled the way shadcn spells it. A theme built for a web app — by hand, by shadcn init, or in a generator like tweakcn — names the same variables these components paint from, so moving one across is a copy rather than a translation.

bunx delacour@latest theme ./src/app/globals.css

Theming covers that command and how to override a token. This page is the reference: what each token means, and what it resolves to.

How a token becomes a class

Two layers, both in theme.css. The raw name is what a theme declares, once per theme. The @theme inline block maps it onto the --color-* namespace Tailwind mints utilities from:

@layer theme {
  :root {
    @variant light { --primary: oklch(0.205 0 0); }
    @variant dark  { --primary: oklch(0.922 0 0); }
  }
}

@theme inline {
  --color-primary: var(--primary);
}

--color-primary is what gives you bg-primary, text-primary and border-primary. The raw --primary is what a theme sets, what useThemeColor("primary") reads, and — because inline substitutes the value into each utility rather than emitting a variable — the only one of the two that exists at runtime.

The shadcn set

Identical names, identical meanings. The values below are this library's defaults, resolved from the oklch() in theme.css — a theme of your own replaces them wholesale.

X and X-foreground always pair: the base is a surface, and X-foreground is what is drawn on that surface. Keep that meaning when adding one.

What this library adds

shadcn has no name for these, and every component here paints with them. A theme you bring across will not define them, so each is derived from a token that theme does define — it follows your palette instead of staying on the defaults below.

Three notes on the derivations, because each exists to fix something specific:

• elevated cannot be card or popover. In shadcn's palette card is the same white as background in light and darker than muted in dark. A control painted on it inside a muted track would read as raised in one theme and sunken in the other. Tabs' selected capsule is what this token exists for, so it lifts toward the page in light and toward the text in dark.
• A -soft foreground inverts in dark. In light it is the state colour darkened toward the text. Over a dark tint the state colour already reads, and mixing it toward a near-white foreground would only wash it out — so in dark it is the state colour itself.
• overlay is literal black. A scrim is black in both themes; deriving it from foreground would paint a white one over a dark app. Only the alpha differs, because a pure-black scrim over a near-black theme is nearly invisible.

Everything that is not a colour

Reading a token from JavaScript

A class cannot express a literal (#EC4899) and cannot reach an SVG paint prop like a gradient's stopColor. For a prop that needs a colour value, use useThemeColor — it takes the raw name, and resolves against the active theme.

import { useThemeColor } from "@delacour/react-native-ui/hooks/use-theme-color";

const destructive = useThemeColor("destructive");
const series = useThemeColor("chart-1");

A literal passes straight through, so a caller can hand one to any prop typed as a token without special-casing it. A token no theme declares resolves to undefined rather than to a bogus value.

Adding a token

Two edits, and both are required:

1. Declare it under @variant light and @variant dark in theme.css.
2. Alias it in the @theme inline block — --color-<name>: var(--<name>);

Miss the second and the token is declared but unreachable: no bg-* exists for it, and nothing reports that. bun test fails on the gap, and so does delacour doctor.

Add one only when nothing in shadcn's set already carries the meaning, and derive it from a token that set defines — otherwise a theme brought across from the web leaves it behind.