senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/packages/design-system/tokens/semantic/dark.json
senke cb511afa6e refactor(design-system): finish Sprint 2 — light theme + 3 viz pigments canonized 
Closes Sprint 2 100%. The drift is fully eliminated.

Light theme migration :
- packages/design-system/tokens/semantic/light.json now exhaustively mirrors
  the former apps/web/src/index.css [data-theme="light"] block byte-for-byte
  (~50 tuned values: bg/surface/border/text/accent/error/sage/gold/kin/live/
  shadow/glass/scrollbar/grain-opacity).
- apps/web/src/index.css [data-theme="light"] block reduced from 70 LOC to 5
  (only --primary-foreground shadcn override remains). 1398 -> 1334 LOC total.

3 viz pigments canonized :
- packages/design-system/tokens/primitive/color.json : added viz.sakura
  (#e0a0b8), viz.terminal (#3eaa5e), viz.magenta (#c840a0). Now 8 pigments
  total (5 principaux + 3 extras for charts >5 series).
- semantic/dark.json : sumi.viz exposes the 3 new pigments as well.
- components/charts/PieChart.tsx : DEFAULT_COLORS[5..7] now use
  var(--sumi-viz-{sakura,terminal,magenta}) — all hex literals eliminated.
  ESLint hex-color rule clean on this file.

Build OK (vite 13.3s). All --sumi-* aliases now sourced from tokens.css.
The only --sumi-* defined in index.css are app-specific shadcn shims
(--background, --foreground, etc. mapping shadcn vars to --sumi-*) and
runtime state (--sumi-patina-warmth, --sumi-grain-opacity for dark base).

Sprint 2 metrics : 32 -> 0 hex literals in apps/web/src.
Single source of truth = packages/design-system/tokens/*.json.
ESLint guardrail enforces it for new code.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-27 16:57:12 +02:00

235 lines
16 KiB
JSON
Raw Blame History

{
"sumi": {
"_comment": "Semantic tokens — dark theme (default :root). Comprehensive coverage of all --sumi-* vars formerly hardcoded in apps/web/src/index.css.",
"bg": {
"void": { "$value": "{color.void.base}", "$type": "color" },
"base": { "$value": "{color.void.base}", "$type": "color" },
"raised": { "$value": "{color.void.raised}", "$type": "color" },
"overlay": { "$value": "{color.void.overlay}", "$type": "color" },
"hover": { "$value": "{color.void.hover}", "$type": "color" },
"active": { "$value": "{color.void.active}", "$type": "color" },
"wash": { "$value": "{color.void.wash}", "$type": "color" }
},
"surface": {
"inset": { "$value": "{color.void.inset}", "$type": "color" },
"subtle": { "$value": "{color.void.subtle}", "$type": "color" },
"card": { "$value": "{color.void.raised}", "$type": "color" },
"elevated": { "$value": "{color.void.overlay}", "$type": "color" }
},
"border": {
"faint": { "$value": "{color.alpha.ivory-03}", "$type": "color" },
"default": { "$value": "{color.alpha.ivory-06}", "$type": "color" },
"strong": { "$value": "{color.alpha.ivory-10}", "$type": "color" },
"focus": { "$value": "{color.mizu.focus}", "$type": "color" },
"accent": { "$value": "{color.mizu.border}", "$type": "color" }
},
"viz": {
"_comment": "Data viz uniquement (charts, waveforms, analytics) — charte §4.5. Principaux + extras.",
"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" },
"sakura": { "$value": "{color.viz.sakura}", "$type": "color" },
"terminal": { "$value": "{color.viz.terminal}", "$type": "color" },
"magenta": { "$value": "{color.viz.magenta}", "$type": "color" }
},
"ink": {
"_comment": "墨の六色 — Six tones of ink (theme-independent backward-compat aliases)",
"kuro": { "$value": "{color.ink.kuro}", "$type": "color" },
"sumi": { "$value": "{color.ink.sumi}", "$type": "color" },
"usuzumi": { "$value": "{color.ink.usuzumi}", "$type": "color" },
"hai": { "$value": "{color.ink.hai}", "$type": "color" },
"gin": { "$value": "{color.ink.gin}", "$type": "color" },
"kasumi": { "$value": "{color.ink.kasumi}", "$type": "color" }
},
"washi": {
"shiro": { "$value": "{color.washi.shiro}", "$type": "color" },
"kinari": { "$value": "{color.washi.kinari}", "$type": "color" },
"kinu": { "$value": "{color.washi.kinu}", "$type": "color" },
"torinoko": { "$value": "{color.washi.torinoko}", "$type": "color" },
"cha": { "$value": "{color.washi.cha}", "$type": "color" }
},
"text-primary": { "$value": "{color.washi.kinari}", "$type": "color" },
"text-secondary": { "$value": "{color.ink.gin}", "$type": "color" },
"text-tertiary": { "$value": "{color.ink.hai}", "$type": "color" },
"text-disabled": { "$value": "{color.ink.usuzumi}", "$type": "color" },
"text-inverse": { "$value": "{color.washi.shiro}", "$type": "color" },
"text-link": { "$value": "{color.mizu.base}", "$type": "color" },
"accent": { "$value": "{color.mizu.base}", "$type": "color" },
"accent-hover": { "$value": "{color.mizu.hover}", "$type": "color" },
"accent-active": { "$value": "{color.mizu.active}", "$type": "color" },
"accent-muted": { "$value": "{color.mizu.muted}", "$type": "color" },
"accent-subtle": { "$value": "{color.mizu.subtle}", "$type": "color" },
"accent-emphasis": { "$value": "{color.mizu.deep}", "$type": "color", "$description": "Cyan profond — pour texte normal AA" },
"mizu": { "$value": "{color.mizu.base}", "$type": "color", "$description": "Backward-compat alias — 水" },
"ai": { "$value": "{color.ai.base}", "$type": "color", "$description": "藍 — indigo deep" },
"kin": { "$value": "{color.kin.base}", "$type": "color" },
"kin-hover": { "$value": "{color.kin.hover}", "$type": "color" },
"kin-subtle": { "$value": "{color.kin.subtle}", "$type": "color" },
"vermillion": { "$value": "{color.vermillion-ink.base}", "$type": "color" },
"vermillion-hover": { "$value": "{color.vermillion-ink.hover}", "$type": "color" },
"vermillion-subtle": { "$value": "{color.vermillion-ink.subtle}", "$type": "color" },
"sage": { "$value": "{color.functional.sage-diluted}", "$type": "color" },
"sage-hover": { "$value": "{color.functional.sage-hover}", "$type": "color" },
"sage-subtle": { "$value": "{color.functional.sage-subtle}", "$type": "color" },
"gold": { "$value": "{color.functional.amber-diluted}", "$type": "color" },
"gold-hover": { "$value": "{color.functional.amber-hover}", "$type": "color" },
"gold-subtle": { "$value": "{color.functional.amber-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" },
"success": { "$value": "{color.functional.sage-diluted}", "$type": "color" },
"success-subtle": { "$value": "{color.functional.sage-subtle}", "$type": "color" },
"warning": { "$value": "{color.functional.amber-diluted}", "$type": "color" },
"warning-subtle": { "$value": "{color.functional.amber-subtle}", "$type": "color" },
"error-semantic": { "$value": "{color.functional.brick-diluted}", "$type": "color" },
"error-semantic-subtle": { "$value": "{color.functional.brick-subtle}", "$type": "color" },
"info": { "$value": "{color.mizu.base}", "$type": "color" },
"live": { "$value": "{color.functional.brick-diluted}", "$type": "color" },
"online": { "$value": "{color.functional.sage-diluted}", "$type": "color" },
"glass-bg": { "$value": "rgba(13,13,15, 0.80)", "$type": "color", "$description": "Shoji screen — dark theme" },
"glass-border": { "$value": "{color.alpha.ivory-06}", "$type": "color" },
"glass-blur": { "$value": "12px", "$type": "dimension" },
"scrollbar-track": { "$value": "transparent", "$type": "color" },
"scrollbar-thumb": { "$value": "{color.alpha.ivory-06}", "$type": "color" },
"scrollbar-hover": { "$value": "{color.alpha.ivory-10}", "$type": "color" },
"shadow-xs": { "$value": "0 0 4px rgba(26,26,30, 0.03)", "$type": "shadow" },
"shadow-sm": { "$value": "0 0 8px rgba(26,26,30, 0.05)", "$type": "shadow" },
"shadow-md": { "$value": "0 0 16px rgba(26,26,30, 0.08)", "$type": "shadow" },
"shadow-lg": { "$value": "0 0 24px rgba(26,26,30, 0.10)", "$type": "shadow" },
"shadow-xl": { "$value": "0 0 32px rgba(26,26,30, 0.15)", "$type": "shadow" },
"shadow-2xl": { "$value": "0 0 48px rgba(26,26,30, 0.20)", "$type": "shadow" },
"shadow-glow": { "$value": "0 0 0 3px rgba(0,152,181, 0.25)", "$type": "shadow" },
"shadow-glow-lg": { "$value": "0 0 20px rgba(0,152,181, 0.12)", "$type": "shadow" },
"shadow-kin": { "$value": "0 0 16px rgba(184,134,11, 0.15)", "$type": "shadow" },
"font-body": { "$value": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", "$type": "fontFamily" },
"font-heading": { "$value": "'Space Grotesk', system-ui, sans-serif", "$type": "fontFamily" },
"font-mono": { "$value": "'JetBrains Mono', 'SF Mono', 'Consolas', monospace", "$type": "fontFamily" },
"font-serif": { "$value": "'Space Grotesk', system-ui, sans-serif", "$type": "fontFamily" },
"text-4xl": { "$value": "2.25rem", "$type": "dimension" },
"text-3xl": { "$value": "1.875rem", "$type": "dimension" },
"text-2xl": { "$value": "1.5rem", "$type": "dimension" },
"text-xl": { "$value": "1.25rem", "$type": "dimension" },
"text-lg": { "$value": "1.125rem", "$type": "dimension" },
"text-md": { "$value": "1rem", "$type": "dimension" },
"text-base": { "$value": "0.875rem", "$type": "dimension" },
"text-sm": { "$value": "0.8125rem", "$type": "dimension" },
"text-xs": { "$value": "0.75rem", "$type": "dimension" },
"font-size-base": { "$value": "16px", "$type": "dimension" },
"leading-none": { "$value": "1", "$type": "number" },
"leading-tight": { "$value": "1.25", "$type": "number" },
"leading-snug": { "$value": "1.375", "$type": "number" },
"leading-normal": { "$value": "1.5", "$type": "number" },
"leading-relaxed": { "$value": "1.625", "$type": "number" },
"leading-loose": { "$value": "1.75", "$type": "number" },
"tracking-tighter": { "$value": "-0.03em", "$type": "dimension" },
"tracking-tight": { "$value": "-0.015em", "$type": "dimension" },
"tracking-normal": { "$value": "0", "$type": "dimension" },
"tracking-wide": { "$value": "0.025em", "$type": "dimension" },
"tracking-wider": { "$value": "0.05em", "$type": "dimension" },
"tracking-widest": { "$value": "0.2em", "$type": "dimension" },
"weight-extralight": { "$value": "200", "$type": "fontWeight" },
"weight-light": { "$value": "300", "$type": "fontWeight" },
"weight-regular": { "$value": "400", "$type": "fontWeight" },
"weight-medium": { "$value": "500", "$type": "fontWeight" },
"weight-semibold": { "$value": "600", "$type": "fontWeight" },
"weight-bold": { "$value": "700", "$type": "fontWeight" },
"space-0-5": { "$value": "2px", "$type": "dimension" },
"space-1": { "$value": "4px", "$type": "dimension" },
"space-1-5": { "$value": "6px", "$type": "dimension" },
"space-2": { "$value": "8px", "$type": "dimension" },
"space-2-5": { "$value": "10px", "$type": "dimension" },
"space-3": { "$value": "12px", "$type": "dimension" },
"space-4": { "$value": "16px", "$type": "dimension" },
"space-5": { "$value": "20px", "$type": "dimension" },
"space-6": { "$value": "24px", "$type": "dimension" },
"space-8": { "$value": "32px", "$type": "dimension" },
"space-10": { "$value": "40px", "$type": "dimension" },
"space-12": { "$value": "48px", "$type": "dimension" },
"space-16": { "$value": "64px", "$type": "dimension" },
"space-20": { "$value": "80px", "$type": "dimension" },
"radius-xs": { "$value": "2px", "$type": "dimension" },
"radius-sm": { "$value": "4px", "$type": "dimension" },
"radius-md": { "$value": "8px", "$type": "dimension" },
"radius-lg": { "$value": "12px", "$type": "dimension" },
"radius-xl": { "$value": "16px", "$type": "dimension" },
"radius-2xl": { "$value": "20px", "$type": "dimension" },
"radius-full": { "$value": "9999px", "$type": "dimension" },
"z-base": { "$value": "0", "$type": "number" },
"z-raised": { "$value": "10", "$type": "number" },
"z-dropdown": { "$value": "100", "$type": "number" },
"z-sticky": { "$value": "200", "$type": "number" },
"z-overlay": { "$value": "300", "$type": "number" },
"z-modal": { "$value": "400", "$type": "number" },
"z-popover": { "$value": "500", "$type": "number" },
"z-toast": { "$value": "600", "$type": "number" },
"z-tooltip": { "$value": "700", "$type": "number" },
"z-max": { "$value": "999", "$type": "number" },
"motion-goutte": { "$value": "100ms", "$type": "duration", "$description": "滴 — drop" },
"motion-trait": { "$value": "150ms", "$type": "duration", "$description": "筆 — stroke" },
"motion-lavis": { "$value": "250ms", "$type": "duration", "$description": "墨 — wash" },
"motion-vague": { "$value": "350ms", "$type": "duration", "$description": "波 — wave" },
"motion-maree": { "$value": "450ms", "$type": "duration", "$description": "潮 — tide" },
"duration-instant": { "$value": "100ms", "$type": "duration" },
"duration-fast": { "$value": "150ms", "$type": "duration" },
"duration-normal": { "$value": "250ms", "$type": "duration" },
"duration-slow": { "$value": "350ms", "$type": "duration" },
"duration-slower": { "$value": "450ms", "$type": "duration" },
"ease-goutte": { "$value": "cubic-bezier(0.25, 0.1, 0.25, 1)", "$type": "cubicBezier" },
"ease-trait": { "$value": "cubic-bezier(0.33, 1, 0.68, 1)", "$type": "cubicBezier" },
"ease-lavis": { "$value": "cubic-bezier(0.25, 0.8, 0.25, 1)", "$type": "cubicBezier" },
"ease-vague": { "$value": "cubic-bezier(0.16, 1, 0.3, 1)", "$type": "cubicBezier" },
"ease-maree": { "$value": "cubic-bezier(0.33, 1, 0.68, 1)", "$type": "cubicBezier" },
"ease-rebond": { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "$type": "cubicBezier" },
"ease-default": { "$value": "cubic-bezier(0.25, 0.1, 0.25, 1)", "$type": "cubicBezier" },
"ease-out": { "$value": "cubic-bezier(0.33, 1, 0.68, 1)", "$type": "cubicBezier" },
"ease-in": { "$value": "cubic-bezier(0.32, 0, 0.67, 0)", "$type": "cubicBezier" },
"ease-in-out": { "$value": "cubic-bezier(0.65, 0, 0.35, 1)", "$type": "cubicBezier" },
"ease-bounce": { "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "$type": "cubicBezier" },
"ease-spring": { "$value": "cubic-bezier(0.175, 0.885, 0.32, 1.1)", "$type": "cubicBezier" },
"transition-colors": { "$value": "color 150ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1)", "$type": "transition" },
"transition-opacity": { "$value": "opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1)", "$type": "transition" },
"transition-transform": { "$value": "transform 250ms cubic-bezier(0.33, 1, 0.68, 1)", "$type": "transition" },
"transition-shadow": { "$value": "box-shadow 150ms cubic-bezier(0.25, 0.1, 0.25, 1)", "$type": "transition" },
"max-width": { "$value": "1400px", "$type": "dimension" },
"max-width-content": { "$value": "1200px", "$type": "dimension" },
"max-width-narrow": { "$value": "800px", "$type": "dimension" },
"max-width-prose": { "$value": "65ch", "$type": "dimension" },
"sidebar-width": { "$value": "240px", "$type": "dimension" },
"sidebar-collapsed": { "$value": "64px", "$type": "dimension" },
"header-height": { "$value": "56px", "$type": "dimension" },
"player-height": { "$value": "80px", "$type": "dimension" },
"patina-warmth": { "$value": "0deg", "$type": "other", "$description": "Runtime state — overridden by ThemeProvider based on account age" },
"grain-opacity": { "$value": "0.04", "$type": "number" },
"circadian-warmth": { "$value": "0deg", "$type": "other", "$description": "Runtime state — overridden by ThemeProvider based on time of day" },
"circadian-brightness": { "$value": "1", "$type": "number" }
}
}
Reference in a new issue View git blame Copy permalink