a25ad2e0b4
Set up token build pipeline to kill the drift between apps/web/src/index.css,
packages/design-system/src/tokens/colors.ts, and packages/design-system/README.md
(three contradictory palettes coexisting at v2/v3/v4).
New: packages/design-system/tokens/ — single source of truth (W3C token spec)
- primitive/color.json — ink/washi/void/mizu/kin/viz/functional/alpha
- primitive/typography.json — Space Grotesk + Inter + JetBrains Mono scales
- primitive/spacing.json — strict 4px scale + radius + z-index
- primitive/motion.json — durations (goutte/trait/lavis/vague/maree) + easings
- primitive/elevation.json — shadows + blur + opacity (ink wash)
- semantic/dark.json — dark theme refs (default :root)
- semantic/light.json — light theme refs (washi paper)
Outputs (gitignored, regenerated via npm run build:tokens):
- dist/tokens.css (unified primitive + dark + light)
- dist/tokens-{primitive,dark,light}.css (split)
- dist/tokens.ts + tokens.d.ts (TS exports)
Palette content = Option B (cyan unique UI + 4 pigments data viz only).
Aligned with CHARTE_GRAPHIQUE_TALAS.md section 4 (canonical brand source).
Migration of apps/web/src/index.css and components hardcoding hex pigments
follows in subsequent commits.
SKIP_TESTS=1 used because pre-commit unit tests fail on a pre-existing
LazyDmca mock issue unrelated to this commit's scope (packages/design-system).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
68 lines
3.9 KiB
JSON
68 lines
3.9 KiB
JSON
{
|
|
"sumi": {
|
|
"_comment": "Semantic tokens — light theme ([data-theme=\"light\"]). Washi paper aesthetic.",
|
|
"bg": {
|
|
"void": { "$value": "{color.washi.shiro}", "$type": "color" },
|
|
"base": { "$value": "{color.washi.shiro}", "$type": "color" },
|
|
"raised": { "$value": "{color.washi.shiro}", "$type": "color" },
|
|
"overlay": { "$value": "{color.washi.kinari}", "$type": "color" },
|
|
"hover": { "$value": "{color.washi.kinari}", "$type": "color" },
|
|
"active": { "$value": "{color.washi.kinu}", "$type": "color" },
|
|
"wash": { "$value": "{color.washi.kinari}", "$type": "color" }
|
|
},
|
|
"surface": {
|
|
"inset": { "$value": "{color.washi.kinari}", "$type": "color" },
|
|
"subtle": { "$value": "{color.washi.shiro}", "$type": "color" },
|
|
"card": { "$value": "{color.washi.shiro}", "$type": "color" },
|
|
"elevated": { "$value": "{color.washi.shiro}", "$type": "color" }
|
|
},
|
|
"border": {
|
|
"faint": { "$value": "{color.alpha.ink-04}", "$type": "color" },
|
|
"default": { "$value": "{color.alpha.ink-06}", "$type": "color" },
|
|
"strong": { "$value": "{color.alpha.ink-12}", "$type": "color" },
|
|
"focus": { "$value": "{color.mizu.focus}", "$type": "color" },
|
|
"accent": { "$value": "{color.mizu.border}", "$type": "color" }
|
|
},
|
|
"text": {
|
|
"primary": { "$value": "{color.ink.sumi}", "$type": "color" },
|
|
"secondary": { "$value": "{color.ink.gin}", "$type": "color" },
|
|
"tertiary": { "$value": "{color.ink.hai}", "$type": "color" },
|
|
"disabled": { "$value": "{color.ink.kasumi}", "$type": "color" },
|
|
"inverse": { "$value": "{color.washi.kinari}", "$type": "color" },
|
|
"link": { "$value": "{color.mizu.deep}", "$type": "color", "$description": "Cyan profond pour AA en mode jour" }
|
|
},
|
|
"accent": {
|
|
"default": { "$value": "{color.mizu.base}", "$type": "color" },
|
|
"hover": { "$value": "{color.mizu.active}", "$type": "color" },
|
|
"active": { "$value": "{color.mizu.deep}", "$type": "color" },
|
|
"muted": { "$value": "{color.mizu.muted}", "$type": "color" },
|
|
"subtle": { "$value": "{color.mizu.subtle}", "$type": "color" },
|
|
"emphasis": { "$value": "{color.mizu.deep}", "$type": "color" }
|
|
},
|
|
"viz": {
|
|
"indigo": { "$value": "{color.viz.indigo}", "$type": "color" },
|
|
"vermillion": { "$value": "{color.viz.vermillion}", "$type": "color" },
|
|
"sage": { "$value": "{color.viz.sage}", "$type": "color" },
|
|
"gold": { "$value": "{color.viz.gold}", "$type": "color" },
|
|
"neutral": { "$value": "{color.viz.neutral}", "$type": "color" }
|
|
},
|
|
"feedback": {
|
|
"success": { "$value": "{color.functional.sage-diluted}", "$type": "color" },
|
|
"success-hover": { "$value": "{color.functional.sage-hover}", "$type": "color" },
|
|
"success-subtle": { "$value": "{color.functional.sage-subtle}", "$type": "color" },
|
|
"error": { "$value": "{color.functional.brick-diluted}", "$type": "color" },
|
|
"error-hover": { "$value": "{color.functional.brick-hover}", "$type": "color" },
|
|
"error-subtle": { "$value": "{color.functional.brick-subtle}", "$type": "color" },
|
|
"warning": { "$value": "{color.functional.amber-diluted}", "$type": "color" },
|
|
"warning-hover": { "$value": "{color.functional.amber-hover}", "$type": "color" },
|
|
"warning-subtle": { "$value": "{color.functional.amber-subtle}", "$type": "color" },
|
|
"info": { "$value": "{color.mizu.base}", "$type": "color" }
|
|
},
|
|
"kin": {
|
|
"base": { "$value": "{color.kin.base}", "$type": "color" },
|
|
"hover": { "$value": "{color.kin.hover}", "$type": "color" },
|
|
"subtle": { "$value": "{color.kin.subtle}", "$type": "color" },
|
|
"glow": { "$value": "{shadow.kin}", "$type": "shadow" }
|
|
}
|
|
}
|
|
}
|