# 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:

```ts
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:

| Token                             | Typical use                               |
| --------------------------------- | ----------------------------------------- |
| `base`                            | Default foreground                        |
| `keyword`                         | Keywords, types                           |
| `title`                           | Titles, class/function names              |
| `attr`                            | Attributes, numbers, operators, variables |
| `string`                          | Strings, regexps                          |
| `builtIn`                         | Built-ins, symbols                        |
| `comment`                         | Comments                                  |
| `name`                            | Tags, pseudo-selectors                    |
| `section`                         | Headings                                  |
| `bullet`                          | List bullets                              |
| `addition` / `additionBackground` | Diff additions                            |
| `deletion` / `deletionBackground` | Diff deletions                            |

See the [Colors](/theming/colors) reference for palette ramps and semantic color
swatches, [Shadows](/theming/shadows) for elevation tokens, and [CSS variables](/theming/css-variables) for the full custom property
catalog. Example theme presets live under `docs/src/themes/`.