@krizaka/tokens

The Krizaka semantic design tokens. One vocabulary, --kz-*, written once in DTCG JSON and compiled to CSS (dark, light, media invariants), typed constants and React Native themes. It is the vocabulary krizaka.com already runs on (1 974 usages, zero raw palette colour), now shared by every product.

The rule

A component never reads a palette colour, only a role. bg-zinc-950/70 light:bg-white → var(--kz-surface-1); text-zinc-400 light:text-slate-500 → var(--kz-text-secondary); bg-black/60 text-white on an image → var(--kz-scrim) + var(--kz-text-on-media).

A theme is a set of values, never a set of classes. A component is written once against the roles below; dark, light and a product theme (an override of --kz-accent, --kz-font-display…) only change the values. No light: variant, no dark: variant, no zinc-* / slate-* / #hex in a component.

Install

npm install @krizaka/tokens

Brands: one colour per brand, its marks, icons and page language are in BRAND.md.

@import "@krizaka/tokens/tokens.css";

.card { background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); border-radius: var(--kz-radius-lg); }

import { tokens, values } from "@krizaka/tokens";
element.style.color = tokens.textSecondary;  // "var(--kz-text-secondary)" — follows the theme
chart.gridColor = values.dark.borderSubtle;   // "hsl(0 0% 100% / 0.06)"

import { themes, radius, type Theme } from "@krizaka/tokens/native";
const t: Theme = scheme === "light" ? themes.light : themes.dark;
<View style={{ backgroundColor: t.surface1, borderRadius: radius.lg }} />;

Themes

color-scheme follows the theme, so scrollbars and native controls match.

Roles

Values are the CSS written in dist/tokens.css; → marks an alias, which follows its target in every theme and under every product override.

Colour

Shape, depth, motion, type

The paper (Cahier, ADR-004)

The material (BRAND.md §6)

Contrast is tested, not assumed: pnpm turbo run check fails if text-primary / text-secondary drop under 4.5:1 or text-muted under 3:1 on any surface, or on-accent under 4.5:1 on the accent, in either theme (WCAG 2.x). No accent can carry white text at 4.5:1 and be read at 4.5:1 as text on surface-0: the accent favours the text set on it, and accent-text (text-fg-accent) is the accent for words — tested at 4.5:1 on every surface.

Add or change a token

1. Source — edit src/tokens/<category>.tokens.json (DTCG: $type, $value, $description).
   • $value is the dark value (the default); the light value goes in "$extensions": { "com.krizaka": { "light": … } }. No extension = the same value in both themes.
   • An alias is "{group.token}" ("{accent.$root}" for a group's own token); it compiles to var(--kz-…) and may not carry a light value — it follows its target.
   • The CSS name is the path joined with - (text.on-media → --kz-text-on-media), the JS key its camelCase (textOnMedia). Colours are hsl(); radii are px (the native output converts them to dp).
2. Build — pnpm --filter @krizaka/tokens build writes dist/ (never edit dist/), then pnpm --filter @krizaka/tokens test: update the tokens.css snapshot only when the change is intended (vitest run -u), and keep the contrast tests green.
3. Changeset — pnpm changeset: a new token is a minor, a changed value at least a minor (it changes every product), a removed or renamed token a major. @krizaka/tokens and @krizaka/ui are released together (fixed group).

License

Apache-2.0