refactor(design-system): tokenize all theme-independent --sumi-* (Sprint 2 follow-up #1)
Migrate ink tones, washi tones, mizu/ai/vermillion aliases, semantic feedback aliases, full typography (font/text/leading/tracking/weight), spacing scale, radius, motion (durations + easings + transition shorthands), z-index, layout primitives, and circadian state vars from apps/web/src/index.css to packages/design-system/tokens/semantic/dark.json. apps/web/src/index.css : - Removed ~125 lines of duplicate --sumi-* declarations (theme-independent only). - Kept theme-tuned values (bg/surface/border/text/accent/error/sage/gold/kin/ shadow/glass/scrollbar/live) — different opacities and hex per theme. - Kept --sumi-patina-warmth (runtime state) + --sumi-grain-opacity (theme-dep). - Kept --duration-fast / --duration-normal (non-prefixed Tailwind aliases). - Kept shadcn/Radix mapping + layout primitives (--header-height: 4rem etc.). packages/design-system/tokens/ : - primitive/color.json : added vermillion-ink (#a04050), ai (#2a4e68 indigo), contextual accents (graffiti/gaming/terminal/sakura), alpha.ivory-08. - semantic/dark.json : exhaustive expansion (~150 tokens) covering all the --sumi-* vars deleted from index.css, plus glass/scrollbar/shadow/transition shorthands authored as full CSS values where references aren't sufficient. - semantic/light.json : minimal overrides (theme-specific only) + grain-opacity override (0.06 vs dark 0.04). Result : - index.css : 1523 → 1398 LOC (-125, ~8% smaller). - tokens.css : 245 → 379 LOC (+134, full coverage of theme-independent vars). - vite build OK (14s). No visual regression — theme-tuned values intact. Light theme block (lines ~259-329 in index.css) intentionally left for a future commit : every override there is theme-tuned with subtle hex/opacity diffs that don't yet have 1:1 mappings in tokens. Will be migrated when light.json expands to match tuned values exactly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
senke
parent
a2fa2eb493
commit
13bbcde32a
4 changed files with 260 additions and 223 deletions
|
|
@ -106,95 +106,19 @@
|
|||
--sumi-vermillion-hover: #b05060;
|
||||
--sumi-vermillion-subtle: rgba(160,64,80, 0.10);
|
||||
|
||||
/* ═══ PATINA ═══ */
|
||||
/* PATINA — runtime state, mutated by ThemeProvider per account age.
|
||||
grain-opacity is theme-dependent (overridden in [data-theme="light"] below). */
|
||||
--sumi-patina-warmth: 0deg;
|
||||
--sumi-grain-opacity: 0.04;
|
||||
|
||||
/* ═══ 墨の六色 — Six Tones of Ink ═══ */
|
||||
--sumi-ink-kuro: #0A0A0C; /* 黒 pure black */
|
||||
--sumi-ink-sumi: #1A1A1E; /* 墨 ink */
|
||||
--sumi-ink-usuzumi: #3D3A35; /* 薄墨 light ink */
|
||||
--sumi-ink-hai: #6B6660; /* 灰 ash */
|
||||
--sumi-ink-gin: #9A958D; /* 銀 silver */
|
||||
--sumi-ink-kasumi: #B5B0A8; /* 霞 mist */
|
||||
|
||||
/* ═══ CIRCADIAN ═══ */
|
||||
--sumi-circadian-warmth: 0deg;
|
||||
--sumi-circadian-brightness: 1;
|
||||
|
||||
/* ═══ SEMANTIC ═══ */
|
||||
--sumi-success: var(--sumi-sage);
|
||||
--sumi-success-subtle: var(--sumi-sage-subtle);
|
||||
--sumi-warning: var(--sumi-gold);
|
||||
--sumi-warning-subtle: var(--sumi-gold-subtle);
|
||||
--sumi-error-semantic: var(--sumi-error);
|
||||
--sumi-error-semantic-subtle: var(--sumi-error-subtle);
|
||||
--sumi-info: var(--sumi-accent);
|
||||
--sumi-live: rgba(180,80,70, 0.55);
|
||||
--sumi-online: var(--sumi-sage);
|
||||
|
||||
/* ═══ TYPOGRAPHY ═══ */
|
||||
--sumi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--sumi-font-heading: 'Space Grotesk', system-ui, sans-serif;
|
||||
--sumi-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
|
||||
--sumi-font-serif: 'Space Grotesk', system-ui, sans-serif;
|
||||
|
||||
--sumi-text-4xl: 2.25rem;
|
||||
--sumi-text-3xl: 1.875rem;
|
||||
--sumi-text-2xl: 1.5rem;
|
||||
--sumi-text-xl: 1.25rem;
|
||||
--sumi-text-lg: 1.125rem;
|
||||
--sumi-text-md: 1rem;
|
||||
--sumi-text-base: 0.875rem;
|
||||
--sumi-text-sm: 0.8125rem;
|
||||
--sumi-text-xs: 0.75rem;
|
||||
--sumi-font-size-base: 16px;
|
||||
|
||||
--sumi-leading-none: 1;
|
||||
--sumi-leading-tight: 1.25;
|
||||
--sumi-leading-snug: 1.375;
|
||||
--sumi-leading-normal: 1.5;
|
||||
--sumi-leading-relaxed: 1.625;
|
||||
--sumi-leading-loose: 1.75;
|
||||
|
||||
--sumi-tracking-tighter: -0.03em;
|
||||
--sumi-tracking-tight: -0.015em;
|
||||
--sumi-tracking-normal: 0;
|
||||
--sumi-tracking-wide: 0.025em;
|
||||
--sumi-tracking-wider: 0.05em;
|
||||
--sumi-tracking-widest: 0.2em;
|
||||
|
||||
--sumi-weight-extralight: 200;
|
||||
--sumi-weight-light: 300;
|
||||
--sumi-weight-regular: 400;
|
||||
--sumi-weight-medium: 500;
|
||||
--sumi-weight-semibold: 600;
|
||||
--sumi-weight-bold: 700;
|
||||
|
||||
/* ═══ SPACING ═══ */
|
||||
--sumi-space-0-5: 2px;
|
||||
--sumi-space-1: 4px;
|
||||
--sumi-space-1-5: 6px;
|
||||
--sumi-space-2: 8px;
|
||||
--sumi-space-2-5: 10px;
|
||||
--sumi-space-3: 12px;
|
||||
--sumi-space-4: 16px;
|
||||
--sumi-space-5: 20px;
|
||||
--sumi-space-6: 24px;
|
||||
--sumi-space-8: 32px;
|
||||
--sumi-space-10: 40px;
|
||||
--sumi-space-12: 48px;
|
||||
--sumi-space-16: 64px;
|
||||
--sumi-space-20: 80px;
|
||||
|
||||
/* ═══ RADIUS ═══ */
|
||||
--sumi-radius-xs: 2px;
|
||||
--sumi-radius-sm: 4px;
|
||||
--sumi-radius-md: 8px;
|
||||
--sumi-radius-lg: 12px;
|
||||
--sumi-radius-xl: 16px;
|
||||
--sumi-radius-2xl: 20px;
|
||||
--sumi-radius-full: 9999px;
|
||||
/* Tokenized in @veza/design-system/tokens.css (theme-independent):
|
||||
- 墨の六色 ink tones (--sumi-ink-{kuro,sumi,usuzumi,hai,gin,kasumi})
|
||||
- 和紙 washi tones (--sumi-washi-*)
|
||||
- mizu/ai/vermillion aliases
|
||||
- circadian state (--sumi-circadian-warmth/brightness)
|
||||
- semantic aliases (--sumi-{success,warning,info,live,online,error-semantic}*)
|
||||
- typography (--sumi-font-*, --sumi-text-{xs..4xl}, --sumi-{leading,tracking,weight}-*)
|
||||
- spacing + radius (--sumi-space-*, --sumi-radius-*) */
|
||||
|
||||
/* ═══ SHADOWS — Ink diffusion (滲み) — omnidirectional ═══ */
|
||||
--sumi-shadow-xs: 0 0 4px rgba(26,26,30, 0.03);
|
||||
|
|
@ -217,66 +141,17 @@
|
|||
--sumi-scrollbar-thumb: rgba(232,227,219, 0.06);
|
||||
--sumi-scrollbar-hover: rgba(232,227,219, 0.12);
|
||||
|
||||
/* ═══ MOTION — Weight of water (水の重さ) ═══ */
|
||||
--sumi-motion-goutte: 100ms; /* 滴 drop — tooltips, badges */
|
||||
--sumi-motion-trait: 150ms; /* 筆 stroke — buttons, icons, links */
|
||||
--sumi-motion-lavis: 250ms; /* 墨 wash — cards, dropdowns */
|
||||
--sumi-motion-vague: 350ms; /* 波 wave — modals, sidebar, panels */
|
||||
--sumi-motion-maree: 450ms; /* 潮 tide — navigation, player */
|
||||
/* Tokenized in @veza/design-system/tokens.css (theme-independent):
|
||||
- motion (--sumi-motion-{goutte,trait,lavis,vague,maree})
|
||||
- duration aliases (--sumi-duration-{instant,fast,normal,slow,slower})
|
||||
- easings (--sumi-ease-{goutte,trait,lavis,vague,maree,rebond,default,out,in,in-out,bounce,spring})
|
||||
- transition shorthands (--sumi-transition-{colors,opacity,transform,shadow})
|
||||
- z-index scale (--sumi-z-*)
|
||||
- layout primitives (--sumi-{max-width,max-width-content,max-width-narrow,max-width-prose,sidebar-width,sidebar-collapsed,header-height,player-height}) */
|
||||
|
||||
/* Legacy aliases (backwards compat) */
|
||||
--sumi-duration-instant: var(--sumi-motion-goutte);
|
||||
--sumi-duration-fast: var(--sumi-motion-trait);
|
||||
--sumi-duration-normal: var(--sumi-motion-lavis);
|
||||
--sumi-duration-slow: var(--sumi-motion-vague);
|
||||
--sumi-duration-slower: var(--sumi-motion-maree);
|
||||
--duration-fast: var(--sumi-motion-trait);
|
||||
--duration-normal: var(--sumi-motion-lavis);
|
||||
|
||||
/* Easings — organic water curves, NEVER linear */
|
||||
--sumi-ease-goutte: cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
--sumi-ease-trait: cubic-bezier(0.33, 1, 0.68, 1);
|
||||
--sumi-ease-lavis: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
--sumi-ease-vague: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--sumi-ease-maree: cubic-bezier(0.33, 1, 0.68, 1);
|
||||
--sumi-ease-rebond: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
/* Legacy aliases */
|
||||
--sumi-ease-default: var(--sumi-ease-goutte);
|
||||
--sumi-ease-out: var(--sumi-ease-trait);
|
||||
--sumi-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
|
||||
--sumi-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
--sumi-ease-bounce: var(--sumi-ease-rebond);
|
||||
--sumi-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
|
||||
|
||||
--sumi-transition-colors: color var(--sumi-motion-trait) var(--sumi-ease-goutte),
|
||||
background-color var(--sumi-motion-trait) var(--sumi-ease-goutte),
|
||||
border-color var(--sumi-motion-trait) var(--sumi-ease-goutte);
|
||||
--sumi-transition-opacity: opacity var(--sumi-motion-trait) var(--sumi-ease-goutte);
|
||||
--sumi-transition-transform: transform var(--sumi-motion-lavis) var(--sumi-ease-trait);
|
||||
--sumi-transition-shadow: box-shadow var(--sumi-motion-trait) var(--sumi-ease-goutte);
|
||||
|
||||
/* ═══ Z-INDEX ═══ */
|
||||
--sumi-z-base: 0;
|
||||
--sumi-z-raised: 10;
|
||||
--sumi-z-dropdown: 100;
|
||||
--sumi-z-sticky: 200;
|
||||
--sumi-z-overlay: 300;
|
||||
--sumi-z-modal: 400;
|
||||
--sumi-z-popover: 500;
|
||||
--sumi-z-toast: 600;
|
||||
--sumi-z-tooltip: 700;
|
||||
--sumi-z-max: 999;
|
||||
|
||||
/* ═══ LAYOUT ═══ */
|
||||
--sumi-max-width: 1400px;
|
||||
--sumi-max-width-content: 1200px;
|
||||
--sumi-max-width-narrow: 800px;
|
||||
--sumi-max-width-prose: 65ch;
|
||||
--sumi-sidebar-width: 240px;
|
||||
--sumi-sidebar-collapsed: 64px;
|
||||
--sumi-header-height: 56px;
|
||||
--sumi-player-height: 80px;
|
||||
/* Non-prefixed legacy aliases (Tailwind utilities still reference these — KEEP) */
|
||||
--duration-fast: var(--sumi-motion-trait);
|
||||
--duration-normal: var(--sumi-motion-lavis);
|
||||
|
||||
/* ═══ CONTEXTUAL ACCENTS (feature-specific) ═══ */
|
||||
--graffiti-magenta: #a04050;
|
||||
|
|
@ -448,7 +323,7 @@
|
|||
--sumi-scrollbar-thumb: rgba(26,26,30, 0.08);
|
||||
--sumi-scrollbar-hover: rgba(26,26,30, 0.16);
|
||||
|
||||
--sumi-grain-opacity: 0.06;
|
||||
/* --sumi-grain-opacity overridden via tokens-light.css (see semantic/light.json) */
|
||||
|
||||
--primary-foreground: #F2EDE6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,6 +40,22 @@
|
|||
"hover": { "$value": "#c8960b", "$type": "color" },
|
||||
"subtle": { "$value": "rgba(184,134,11, 0.08)", "$type": "color" }
|
||||
},
|
||||
"vermillion-ink": {
|
||||
"_comment": "Vermillion ink (NOT viz vermillion #d4634a). Used for live indicators, hanko-like seals.",
|
||||
"base": { "$value": "#a04050", "$type": "color", "$description": "朱 — vermillion ink" },
|
||||
"hover": { "$value": "#b05060", "$type": "color" },
|
||||
"subtle": { "$value": "rgba(160,64,80, 0.10)", "$type": "color" }
|
||||
},
|
||||
"ai": {
|
||||
"base": { "$value": "#2a4e68", "$type": "color", "$description": "藍 — indigo (deep)" }
|
||||
},
|
||||
"contextual": {
|
||||
"_comment": "Feature-specific accents (NOT brand UI accent — cyan reigns supreme per charte §4.4 rule 3)",
|
||||
"graffiti-magenta": { "$value": "#a04050", "$type": "color" },
|
||||
"gaming-gold": { "$value": "#b8860b", "$type": "color" },
|
||||
"terminal-green": { "$value": "#4f6840", "$type": "color" },
|
||||
"sakura": { "$value": "#d4a0b0", "$type": "color" }
|
||||
},
|
||||
"viz": {
|
||||
"_comment": "Data viz palette ONLY (charts, waveforms, analytics). Forbidden in standard UI per CHARTE_GRAPHIQUE_TALAS §4.5",
|
||||
"indigo": { "$value": "#7c9dd6", "$type": "color", "$description": "Data viz pigment — indigo" },
|
||||
|
|
@ -68,6 +84,7 @@
|
|||
"ink-20": { "$value": "rgba(26,26,30, 0.20)", "$type": "color" },
|
||||
"ivory-03":{ "$value": "rgba(232,227,219, 0.03)", "$type": "color", "$description": "Ivory border — faint" },
|
||||
"ivory-06":{ "$value": "rgba(232,227,219, 0.06)", "$type": "color" },
|
||||
"ivory-08":{ "$value": "rgba(232,227,219, 0.08)", "$type": "color" },
|
||||
"ivory-10":{ "$value": "rgba(232,227,219, 0.10)", "$type": "color" }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"sumi": {
|
||||
"_comment": "Semantic tokens — dark theme (default :root). Tous les refs pointent vers tokens/primitive/.",
|
||||
"_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" },
|
||||
|
|
@ -23,47 +24,209 @@
|
|||
"focus": { "$value": "{color.mizu.focus}", "$type": "color" },
|
||||
"accent": { "$value": "{color.mizu.border}", "$type": "color" }
|
||||
},
|
||||
"text": {
|
||||
"primary": { "$value": "{color.washi.kinari}", "$type": "color" },
|
||||
"secondary": { "$value": "{color.ink.gin}", "$type": "color" },
|
||||
"tertiary": { "$value": "{color.ink.hai}", "$type": "color" },
|
||||
"disabled": { "$value": "{color.ink.usuzumi}", "$type": "color" },
|
||||
"inverse": { "$value": "{color.washi.shiro}", "$type": "color" },
|
||||
"link": { "$value": "{color.mizu.base}", "$type": "color" }
|
||||
},
|
||||
"accent": {
|
||||
"default": { "$value": "{color.mizu.base}", "$type": "color" },
|
||||
"hover": { "$value": "{color.mizu.hover}", "$type": "color" },
|
||||
"active": { "$value": "{color.mizu.active}", "$type": "color" },
|
||||
"muted": { "$value": "{color.mizu.muted}", "$type": "color" },
|
||||
"subtle": { "$value": "{color.mizu.subtle}", "$type": "color" },
|
||||
"emphasis": { "$value": "{color.mizu.deep}", "$type": "color", "$description": "Pour texte normal AA" }
|
||||
},
|
||||
"viz": {
|
||||
"_comment": "Data viz uniquement (charts, waveforms, analytics)",
|
||||
"_comment": "Data viz uniquement (charts, waveforms, analytics) — charte §4.5",
|
||||
"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" }
|
||||
"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" }
|
||||
},
|
||||
"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" }
|
||||
}
|
||||
"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" }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"sumi": {
|
||||
"_comment": "Semantic tokens — light theme ([data-theme=\"light\"]). Washi paper aesthetic.",
|
||||
"_comment": "Light theme overrides — washi paper aesthetic ([data-theme=\"light\"]). Only theme-DEPENDENT tokens; the rest inherits from dark.json :root selector.",
|
||||
|
||||
"bg": {
|
||||
"void": { "$value": "{color.washi.shiro}", "$type": "color" },
|
||||
"base": { "$value": "{color.washi.shiro}", "$type": "color" },
|
||||
|
|
@ -23,46 +24,27 @@
|
|||
"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" }
|
||||
}
|
||||
|
||||
"text-primary": { "$value": "{color.ink.sumi}", "$type": "color" },
|
||||
"text-secondary": { "$value": "{color.ink.gin}", "$type": "color" },
|
||||
"text-tertiary": { "$value": "{color.ink.hai}", "$type": "color" },
|
||||
"text-disabled": { "$value": "{color.ink.kasumi}", "$type": "color" },
|
||||
"text-inverse": { "$value": "{color.washi.kinari}", "$type": "color" },
|
||||
"text-link": { "$value": "{color.mizu.deep}", "$type": "color", "$description": "Cyan profond pour AA en mode jour" },
|
||||
|
||||
"accent": { "$value": "{color.mizu.base}", "$type": "color" },
|
||||
"accent-hover": { "$value": "{color.mizu.active}", "$type": "color" },
|
||||
"accent-active": { "$value": "{color.mizu.deep}", "$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" },
|
||||
|
||||
"glass-bg": { "$value": "rgba(242,237,230, 0.85)", "$type": "color", "$description": "Shoji screen — light theme washi" },
|
||||
"glass-border": { "$value": "{color.alpha.ink-04}", "$type": "color" },
|
||||
|
||||
"scrollbar-thumb": { "$value": "{color.alpha.ink-08}", "$type": "color" },
|
||||
"scrollbar-hover": { "$value": "{color.alpha.ink-12}", "$type": "color" },
|
||||
|
||||
"grain-opacity": { "$value": "0.06", "$type": "number", "$description": "Grain plus prononcé sur papier washi" }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue