cb511afa6e
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>
77 lines
4.3 KiB
JSON
77 lines
4.3 KiB
JSON
{
|
|
"sumi": {
|
|
"_comment": "Light theme overrides — washi paper aesthetic ([data-theme=\"light\"]). Theme-tuned hex/opacity values (preserved byte-for-byte from former apps/web/src/index.css [data-theme=\"light\"] block). The rest inherits from dark.json :root selector.",
|
|
|
|
"bg": {
|
|
"void": { "$value": "#E8E3DB", "$type": "color" },
|
|
"base": { "$value": "#F2EDE6", "$type": "color" },
|
|
"raised": { "$value": "#F2EDE6", "$type": "color" },
|
|
"overlay": { "$value": "#F2EDE6", "$type": "color" },
|
|
"hover": { "$value": "#E8E3DB", "$type": "color" },
|
|
"active": { "$value": "#DED9D1", "$type": "color" },
|
|
"wash": { "$value": "#ECE7DF", "$type": "color" }
|
|
},
|
|
"surface": {
|
|
"inset": { "$value": "#E0DBD3", "$type": "color" },
|
|
"subtle": { "$value": "#E8E3DB", "$type": "color" },
|
|
"card": { "$value": "#F2EDE6", "$type": "color" },
|
|
"elevated": { "$value": "#F7F2EB", "$type": "color" }
|
|
},
|
|
"border": {
|
|
"faint": { "$value": "rgba(26,26,30, 0.04)", "$type": "color" },
|
|
"default": { "$value": "rgba(26,26,30, 0.06)", "$type": "color" },
|
|
"strong": { "$value": "rgba(26,26,30, 0.12)", "$type": "color" },
|
|
"focus": { "$value": "rgba(0,122,148, 0.45)", "$type": "color" },
|
|
"accent": { "$value": "rgba(0,122,148, 0.20)", "$type": "color" }
|
|
},
|
|
|
|
"text-primary": { "$value": "#1A1A1E", "$type": "color" },
|
|
"text-secondary": { "$value": "#4A4A50", "$type": "color" },
|
|
"text-tertiary": { "$value": "#6B6660", "$type": "color" },
|
|
"text-disabled": { "$value": "#B5B0A8", "$type": "color" },
|
|
"text-inverse": { "$value": "#E8E3DB", "$type": "color" },
|
|
"text-link": { "$value": "#006B7F", "$type": "color" },
|
|
|
|
"accent": { "$value": "#007A94", "$type": "color" },
|
|
"accent-hover": { "$value": "#006B7F", "$type": "color" },
|
|
"accent-active": { "$value": "#008DAD", "$type": "color" },
|
|
"accent-subtle": { "$value": "rgba(0,122,148, 0.08)", "$type": "color" },
|
|
"accent-muted": { "$value": "rgba(0,122,148, 0.15)", "$type": "color" },
|
|
"accent-emphasis": { "$value": "#005A6B", "$type": "color" },
|
|
|
|
"error": { "$value": "rgba(180,80,70, 0.70)", "$type": "color" },
|
|
"error-hover": { "$value": "rgba(180,80,70, 0.80)", "$type": "color" },
|
|
"error-subtle": { "$value": "rgba(180,80,70, 0.08)", "$type": "color" },
|
|
|
|
"sage": { "$value": "rgba(60,100,70, 0.75)", "$type": "color" },
|
|
"sage-hover": { "$value": "rgba(60,100,70, 0.85)", "$type": "color" },
|
|
"sage-subtle": { "$value": "rgba(60,100,70, 0.08)", "$type": "color" },
|
|
|
|
"gold": { "$value": "rgba(160,125,40, 0.70)", "$type": "color" },
|
|
"gold-hover": { "$value": "rgba(160,125,40, 0.80)", "$type": "color" },
|
|
"gold-subtle": { "$value": "rgba(160,125,40, 0.08)", "$type": "color" },
|
|
|
|
"kin": { "$value": "#9a7208", "$type": "color" },
|
|
"kin-hover": { "$value": "#886008", "$type": "color" },
|
|
"kin-subtle": { "$value": "rgba(154,114,8, 0.06)", "$type": "color" },
|
|
|
|
"live": { "$value": "rgba(180,80,70, 0.70)", "$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.04)", "$type": "shadow" },
|
|
"shadow-md": { "$value": "0 0 16px rgba(26,26,30, 0.06)", "$type": "shadow" },
|
|
"shadow-lg": { "$value": "0 0 24px rgba(26,26,30, 0.08)", "$type": "shadow" },
|
|
"shadow-xl": { "$value": "0 0 32px rgba(26,26,30, 0.10)", "$type": "shadow" },
|
|
"shadow-2xl": { "$value": "0 0 48px rgba(26,26,30, 0.12)", "$type": "shadow" },
|
|
"shadow-glow": { "$value": "0 0 0 3px rgba(0,122,148, 0.18)", "$type": "shadow" },
|
|
"shadow-kin": { "$value": "0 0 16px rgba(154,114,8, 0.12)", "$type": "shadow" },
|
|
|
|
"glass-bg": { "$value": "rgba(242,237,230, 0.85)", "$type": "color" },
|
|
"glass-border": { "$value": "rgba(26,26,30, 0.04)", "$type": "color" },
|
|
|
|
"scrollbar-thumb": { "$value": "rgba(26,26,30, 0.08)", "$type": "color" },
|
|
"scrollbar-hover": { "$value": "rgba(26,26,30, 0.16)", "$type": "color" },
|
|
|
|
"grain-opacity": { "$value": "0.06", "$type": "number", "$description": "Grain plus prononcé sur papier washi" }
|
|
}
|
|
}
|