@teamblind-chorus/tokens
v1.0.1
Published
Chorus design tokens — three-tier source (reference / system / component), dereferenced `resolved.*.json` bundles, and a ready-to-import `tokens.css` that emits every token as a CSS custom property. Regenerate with `npm run build:tokens`.
Downloads
299
Readme
@teamblind-chorus/tokens
Design tokens for Chorus. Ships three-tier source JSON (reference → system → component), dereferenced resolved.*.json bundles for non-CSS consumers, and tokens.css emitting every token as a CSS custom property.
Token meaning lives in schema/DESIGN.md. This package ships values only.
License: MIT. See
LICENSE.
Install
For full setup (stylesheet imports, dark mode, native pilots, upgrading), see @teamblind-chorus/ui's README — this token package is normally installed transitively via @teamblind-chorus/ui.
npm install @teamblind-chorus/tokensCSS bundle (most common)
import '@teamblind-chorus/tokens/tokens.css';Emits:
:root { … }— every token as--ref-*/--sys-*/--comp-*(light theme).[data-theme="light"] { … }— same set, so a subtree can flip back to light.[data-theme="dark"] { … }— dark-mode overrides only (diff vs. light).@media (min-width: 800px) { … }— web-breakpoint overrides (typo sizes, layout spacing).
Toggle dark mode: data-theme="dark" on <html> or any ancestor.
.button {
background: var(--sys-color-primary);
color: var(--sys-color-onPrimary);
padding: var(--sys-layout-container-md);
border-radius: var(--sys-radius-md);
}JSON bundles (AI agents, design tools, native renderers)
import light from '@teamblind-chorus/tokens/resolved.light.json';
import dark from '@teamblind-chorus/tokens/resolved.dark.json';Each entry: { "<dotted.path>": { "$value": …, "$type": … } }, fully dereferenced. Web-breakpoint overrides in sparse resolved.web.json / resolved.web.dark.json.
Three-tier source (advanced)
import reference from '@teamblind-chorus/tokens/reference.json';
import system from '@teamblind-chorus/tokens/system.json';
import component from '@teamblind-chorus/tokens/component.json';Values may be DTCG-style references ("{ref.palette.blue.500}"); resolve yourself. Use only if you need source structure (e.g. retheme by swapping the reference tier).
Rebuilding
From repo root:
npm run build:tokensRegenerates every resolved.*.json and tokens.css. Source of truth: the three .json files in this directory.
