veza/packages/design-system/tokens/primitive/elevation.json
senke a25ad2e0b4 feat(design-system): introduce Style Dictionary (W3C tokens) — Sprint 2 foundation
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>
2026-04-27 04:52:15 +02:00

29 lines
1.9 KiB
JSON

{
"shadow": {
"_comment": "Diffusions d'encre (滲み) — JAMAIS de border 1px solid (charte §7.3)",
"xs": { "$value": "0 1px 3px rgba(13,13,11,0.20)", "$type": "shadow" },
"sm": { "$value": "0 2px 8px rgba(13,13,11,0.15), 0 1px 3px rgba(13,13,11,0.12)", "$type": "shadow" },
"md": { "$value": "0 4px 20px rgba(13,13,11,0.15), 0 2px 6px rgba(13,13,11,0.10)", "$type": "shadow" },
"lg": { "$value": "0 8px 35px rgba(13,13,11,0.18), 0 4px 12px rgba(13,13,11,0.10)", "$type": "shadow" },
"xl": { "$value": "0 16px 55px rgba(13,13,11,0.22), 0 8px 20px rgba(13,13,11,0.12)", "$type": "shadow" },
"2xl": { "$value": "0 24px 75px rgba(13,13,11,0.30)", "$type": "shadow" },
"ink": { "$value": "0 0 6px rgba(26,26,30, 0.06)", "$type": "shadow", "$description": "Diffusion d'encre — remplace border" },
"glow": { "$value": "0 0 0 3px rgba(0,152,181, 0.20)", "$type": "shadow", "$description": "Focus ring cyan" },
"kin": { "$value": "0 0 16px rgba(184,134,11, 0.15)", "$type": "shadow" }
},
"blur": {
"_comment": "Couches d'encre (charte §7.2) — backdrop-filter croissant par élévation",
"surface": { "$value": "8px", "$type": "dimension", "$description": "Surface cards" },
"overlay": { "$value": "16px", "$type": "dimension", "$description": "Dropdowns, menus" },
"modal": { "$value": "24px", "$type": "dimension", "$description": "Modales" },
"suzuri": { "$value": "32px", "$type": "dimension", "$description": "Player audio (硯 — pierre à encre)" }
},
"opacity": {
"_comment": "Opacités d'encre par élévation",
"surface": { "$value": "0.06", "$type": "number" },
"overlay": { "$value": "0.10", "$type": "number" },
"modal": { "$value": "0.16", "$type": "number" },
"suzuri": { "$value": "0.25", "$type": "number" },
"grain": { "$value": "0.04", "$type": "number", "$description": "Grain washi standard" }
}
}