Design tokens

CSS custom properties in @chroma/style tokens.css — brand colors, semantic aliases, and light/dark themes.

Design tokens in Chroma-Style are plain CSS custom properties in plugins/chroma-style/tokens.css. Utilities and presets never hard-code hex values in JavaScript; they reference semantic names like --primary and --radius-md.

Two layers: brand and semantic

Layer	Prefix	Purpose
Brand	`--cs-*`	Canonical hex palette (TargApps default)
Semantic	`--background`, `--primary`, …	What utilities and `.cs-*` shells consume

Semantic aliases point at brand variables so you can retheme without renaming classes:

:root {
  --cs-primary: #C96442;
  --primary: var(--cs-primary);
  --primary-foreground: var(--cs-primary-foreground);
}

Override either layer in your own stylesheet loaded after tokens.css:

/* src/styles/theme.css */
:root {
  --cs-primary: #2563eb;
  --primary: var(--cs-primary);
  --radius-md: 0.5rem;
}

Default brand palette (light / dark)

Token	Light	Dark
`--cs-background`	`#FAF9F5`	`#262624`
`--cs-foreground`	`#3D3929`	`#C3C0B6`
`--cs-primary`	`#C96442`	`#D97757`
`--cs-secondary`	`#E9E6DC`	`#FAF9F5`
`--cs-muted`	`#EDE9DE`	`#1B1B19`
`--cs-border`	`#DAD9D4`	`#3E3E38`
`--cs-destructive`	`#141413`	`#EF4444`

Semantic mappings (excerpt from tokens.css):

--card uses --cs-background in light mode and --cs-muted in dark mode.
--ring follows --cs-primary for focus rings (focus-ring utility).

Semantic color groups

Group	Variables
Surfaces	`--background`, `--foreground`, `--card`, `--card-foreground`
Actions	`--primary`, `--primary-foreground`, `--secondary`, `--secondary-foreground`
Muted / accent	`--muted`, `--muted-foreground`, `--accent`, `--accent-foreground`
Feedback	`--destructive`, `--destructive-foreground`
Chrome	`--border`, `--input`, `--ring`

Layout tokens

Group	Variables
Radius	`--radius-none`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, `--radius-2xl`, `--radius-full`
Shadow	`--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`
Typography	`--font-sans`, `--text-xs` … `--text-2xl`, each with `-leading`
Motion	`--animate-duration-fast`, `--animate-duration`, `--animate-duration-slow`, `--animate-ease`, `--animate-stagger`

Motion variables are for your CSS or animation libraries; utilities do not auto-animate except [data-animate] initial states in utilities.css.

Theming

Forced theme — set on the document root:

<html data-theme="dark">

document.documentElement.dataset.theme = "dark";

System preference — when data-theme is absent, tokens.css applies the dark palette inside @media (prefers-color-scheme: dark) on :root.

Persistence — store the user choice in localStorage or Chroma-Fs; remember that Portable and Desktop origins differ, so saved theme keys do not transfer between hosts.

Styling guide — Design tokens
Utilities — classes that consume these variables