v3: design tokens — shared radius, type, elevation, motion and layer scales; single light-dark() palette for smooth

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-19 19:15:33 +00:00
parent 1adf7b04d7
commit 21fb0c6e16
5 changed files with 563 additions and 536 deletions
--- a/src/tokens.css
+++ b/src/tokens.css
@@ -0,0 +1,112 @@
+/* ══════════════════════════════════════════════════════════════════════
+   Design tokens — shared by every theme.
+   Themes (src/themes/*.css) set the palette (`--color-*`) and may override
+   any of the shape/type/depth tokens below; App.css only consumes tokens.
+   ══════════════════════════════════════════════════════════════════════ */
+
+:root {
+  /* ── Color scheme ──
+     `light-dark()` in the theme palettes resolves against this, so a single
+     palette block covers auto, forced-light and forced-dark. */
+  color-scheme: light dark;
+
+  /* ── Space (4px grid) ── */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-7: 2rem;
+  --space-8: 3rem;
+
+  /* ── Radius ── */
+  --radius-xs: 3px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-full: 999px;
+
+  /* ── Type scale ── */
+  --text-2xs: 0.7rem;
+  --text-xs: 0.78rem;
+  --text-sm: 0.85rem;
+  --text-md: 0.92rem;
+  --text-base: 1rem;
+  --text-lg: 1.15rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
+  --text-display: 3rem;
+
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.5;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  --tracking-caps: 0.06em;
+
+  /* ── Fonts ── */
+  --font-body: system-ui, sans-serif;
+  --font-display: var(--font-body);
+  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
+
+  /* ── Elevation ── */
+  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.12);
+  --shadow-2: 0 4px 16px rgb(0 0 0 / 0.2);
+  --shadow-3: 0 8px 32px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.3);
+  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
+
+  /* ── Motion ── */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-fast: 0.12s;
+  --dur-base: 0.15s;
+  --dur-slow: 0.2s;
+
+  /* ── Layers ── */
+  --z-raised: 1;
+  --z-sticky: 100;
+  --z-dropdown: 200;
+  --z-fab: 900;
+  --z-modal: 1000;
+  --z-popover: 1100;
+  --z-toast: 9999;
+
+  /* ── Derived colors ──
+     Defaults computed from each theme's base palette, so every theme gets
+     the full semantic set; a theme overrides any of these when the derived
+     value isn't right for it. */
+  --color-surface-raised: color-mix(
+    in srgb,
+    var(--color-surface) 94%,
+    var(--color-text)
+  );
+  --color-surface-sunken: color-mix(
+    in srgb,
+    var(--color-bg) 96%,
+    var(--color-text)
+  );
+  --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  --color-focus-ring: color-mix(in srgb, var(--color-accent) 45%, transparent);
+  --color-warning: #d4a017;
+  --color-on-danger: #fff;
+
+  /* Legacy names still referenced by a few rules. */
+  --color-muted: var(--color-text-muted);
+  --color-error: var(--color-danger);
+  --color-surface-alt: var(--color-surface-raised);
+}
+
+:root[data-color-scheme="light"] {
+  color-scheme: light;
+}
+
+:root[data-color-scheme="dark"] {
+  color-scheme: dark;
+}