Design tokens

var-ui exposes semantic tokens for color, spacing, typography, motion, and elevation. Components reference tokens (e.g. t.color.tone.accent.foreground) instead of hard-coded values so themes can swap palettes without touching recipes.

Import the shared refs from core:

import { designTokens } from '@var-ui/core';

designTokens.color.text.primary; // var(--var-ui-color-text-primary)
designTokens.space[4];
designTokens.fontSize.md;

tokens is an alias for designTokens. Default registered values live in tokenValues (used as the built-in from preset base).

Theme overrides use two layers:

• tokens on createDesignTheme — mode-invariant patches; the light color face lives here by default
• colorMode — ambient { light?, dark? } color patches (compiled to light-dark() on theme tokens)

Custom namespaces from createDesignTheme({ extend }) or extendTokens appear on the theme’s .tokens object alongside built-in refs.

Syntax-highlighting colors live under color.code (designTokens.color.code). lightSyntaxValues / darkSyntaxValues are exported aliases for theme presets.

Syntax highlighting

var-ui defines semantic code colors but does not ship highlighter-specific CSS. Map color.code to your toolchain:

• highlight.js — CSS rules targeting .hljs-* classes (see this site’s docs/src/styles/codeHighlight.ts for a reference mapping)
• Shiki — build a theme object from the token values at compile time
• Prism — map token groups to Prism’s theme format

Override defaults via createDesignTheme({ tokens: { color: { code: … } } }) or colorMode.dark. Token groups:

See the Colors reference for palette ramps and semantic color swatches, Shadows for elevation tokens, and CSS variables for the full custom property catalog. Example theme presets live under docs/src/themes/.