Theme variables

Design tokens in Zazz: global tiers, semantic roles, metric scales, and override scopes.

Values in Zazz are CSS custom properties on :root. Components consume var(--token) without hardcoded values.

/* Update global brand color */
:root {
  --primary: oklch(0.6 0.2 145);
}

Token tiers

Tier	Description	Examples
Brand & literal scales	Fixed color ramps	`--primary-50` to `--primary-950`, `--neutral-`, `--shade-`, `--tint-*`
Semantic roles	Theme-aware colors	`--background`, `--foreground`, `--primary`, `--muted`, `--border`, `--destructive`
Metrics & systems	Spacing, typography, shapes	`--gap-`, `--step-`, `--font-size-`, `--radius-`, `--shadow-`, `--breakpoint-`, `--ring-*`
Component tokens	Component-specific hooks	`--ui-button-background`, `--ui-field-border`, `--ui-dialog-radius`

Roles resolve through light-dark(). Component tokens default to global semantic tokens.

Update tokens on :root to apply system-wide:

:root {
  --radius-md: 0;
  --primary: oklch(0.55 0.18 264);
}

Reassign component tokens on :root to update all instances of a component:

:root {
  --ui-button-radius: var(--radius-full);
}

Set tokens inline on a single element:

<button class="ui-button" style="--ui-button-background: var(--secondary)">Secondary</button>

Spacing: Semantic --gap-xs to --gap-xl and fluid step scale --step-0_5 to --step-96.
Typography: --font-size-*, --font-weight-*, --leading-*, and --tracking-*.
Color: Semantic roles and literal scales. See Colors.
Radius: --radius-none to --radius-full, scaled by --radius-multiplier.
Shadow: --shadow-xs to --shadow-xl.
Layout: --breakpoint-xs to --breakpoint-xl, --gutters, and reading measures --article-xs to --article-xl.
Motion: --spring-easing, --spring-duration, and --default-transition-*. Zeroed automatically when prefers-reduced-motion is active.

Global tokens are defined in src/base/_variables.css. Component tokens are declared in each component's stylesheet under @layer variables.