@tuuject/koi-tokens 0.0.0-stage → 0.1.0

package/dist/theme-init.js

@@ -0,0 +1,29 @@
+/* GENERATED. Inline this in <head> before any CSS so there is no flash.
+   Follows the OS unless localStorage "koi-theme" is "light" or "dark".
+   Font: the system stack, or ChillRoundF when localStorage "koi-font" is "chill" (sets <html data-font="chill">).
+   Palette: koiSetPalette("rose") picks a built-in one (<html data-palette>); koiSetPalette({ primary, accent }) with
+   11-step scales sets a custom one as inline variables. Saved in localStorage "koi-palette"; koiSetPalette() resets. */
+(function () {
+  // The current choices live here; localStorage only carries them across reloads. When storage is blocked
+  // (some private modes, sandboxed frames) the switches still work for the page.
+  var mem = {};
+  function load(k) { if (k in mem) return mem[k]; try { return localStorage.getItem(k); } catch (e) { return null; } }
+  function save(k, v) { mem[k] = v; try { v == null ? localStorage.removeItem(k) : localStorage.setItem(k, v); } catch (e) {} }
+  var el = document.documentElement, mq = window.matchMedia('(prefers-color-scheme: dark)');
+  function apply() { var s = load('koi-theme'); el.setAttribute('data-theme', s === 'light' || s === 'dark' ? s : (mq.matches ? 'dark' : 'light')); }
+  apply();
+  mq.addEventListener('change', apply);
+  window.koiSetTheme = function (t) { save('koi-theme', t || null); apply(); };
+  function applyFont() { load('koi-font') === 'chill' ? el.setAttribute('data-font', 'chill') : el.removeAttribute('data-font'); }
+  applyFont();
+  window.koiSetFont = function (f) { save('koi-font', f === 'chill' ? f : null); applyFont(); };
+  function applyPalette() { var p = null, st = el.style;
+    try { p = JSON.parse(load('koi-palette')); } catch (e) {}
+    for (var i = st.length - 1; i >= 0; i--) if (/^--(colors-)?(primary|accent)-\d+$/.test(st[i])) st.removeProperty(st[i]);
+    if (typeof p === 'string' && p !== "koi") { el.setAttribute('data-palette', p); return; }
+    el.removeAttribute('data-palette');
+    if (p && typeof p === 'object') ['primary', 'accent'].forEach(function (k) { for (var s in p[k]) {
+      st.setProperty('--' + k + '-' + s, p[k][s]); st.setProperty('--colors-' + k + '-' + s, p[k][s]); } }); }
+  applyPalette();
+  window.koiSetPalette = function (p) { save('koi-palette', p ? JSON.stringify(p) : null); applyPalette(); };
+})();

package/dist/tokens.css

@@ -0,0 +1,420 @@
+/* GENERATED from src/tokens.json. Light by default; dark with <html data-theme="dark">, or by the OS unless data-theme="light". */
+:root, [data-theme="light"] {
+  --page-bg: var(--white);
+  --surface: var(--white);
+  --surface-muted: var(--secondary-100);
+  --surface-glass: rgba(255, 255, 255, 0.8);
+  --surface-glass-tint: rgba(255, 255, 255, 0.8);
+  --backdrop: rgba(0, 0, 0, 0.4);
+  --tooltip-bg: var(--secondary-900);
+  --tooltip-text: var(--white);
+  --text: var(--black);
+  --text-muted: rgba(0, 0, 0, 0.6);
+  --text-disabled: rgba(0, 0, 0, 0.38);
+  --text-brand: var(--primary-700);
+  --border: var(--secondary-200);
+  --border-control: var(--secondary-500);
+  --border-control-hover: var(--secondary-600);
+  --divider: rgba(0, 0, 0, 0.1);
+  --focus-ring: var(--primary-600);
+  --action: var(--primary-700);
+  --action-hover: var(--primary-800);
+  --on-action: var(--white);
+  --action-subtle: var(--primary-100);
+  --action-subtle-hover: var(--primary-200);
+  --on-action-subtle: var(--primary-800);
+  --control-checked: var(--primary-700);
+  --link: var(--accent-700);
+  --link-border: var(--accent-300);
+  --link-hover-bg: var(--accent-100);
+  --link-hover-border: var(--accent-500);
+  --danger: var(--error-600);
+  --danger-hover: var(--error-700);
+  --info-surface: var(--primary-50);
+  --info-border: var(--primary-200);
+  --info-text: var(--primary-800);
+  --warning-surface: var(--warning-50);
+  --warning-border: var(--warning-300);
+  --warning-text: var(--warning-800);
+  --error-surface: var(--error-50);
+  --error-border: var(--error-300);
+  --error-text: var(--error-700);
+  --error-control: var(--error-600);
+  --highlight: var(--accent-100);
+  --on-highlight: var(--accent-800);
+  --nav-item-text: var(--secondary-700);
+  --nav-item-hover: var(--secondary-50);
+  --table-row-hover: var(--secondary-50);
+  --nav-item-active: var(--secondary-100);
+  --skeleton: var(--secondary-100);
+  --skeleton-highlight: var(--secondary-50);
+  --prose-text: var(--secondary-700);
+  --code-block-bg: var(--secondary-800);
+  --code-block-text: var(--secondary-200);
+  --primary-solid: var(--action);
+  --primary-solid-hover: var(--action-hover);
+  --on-primary-solid: var(--on-action);
+  --primary-soft: var(--action-subtle);
+  --primary-soft-hover: var(--action-subtle-hover);
+  --on-primary-soft: var(--on-action-subtle);
+  --primary-fg: var(--text-brand);
+  --primary-edge: var(--primary-600);
+  --accent-solid: var(--accent-400);
+  --accent-solid-hover: var(--accent-300);
+  --on-accent-solid: var(--accent-950);
+  --accent-soft: var(--accent-100);
+  --accent-soft-hover: var(--accent-200);
+  --on-accent-soft: var(--accent-800);
+  --accent-fg: var(--accent-700);
+  --accent-edge: var(--accent-600);
+  --secondary-solid: var(--secondary-700);
+  --secondary-solid-hover: var(--secondary-800);
+  --on-secondary-solid: var(--white);
+  --secondary-soft: var(--secondary-100);
+  --secondary-soft-hover: var(--secondary-200);
+  --on-secondary-soft: var(--secondary-800);
+  --secondary-fg: var(--secondary-700);
+  --secondary-edge: var(--secondary-500);
+  --warning-solid: var(--warning-400);
+  --warning-solid-hover: var(--warning-300);
+  --on-warning-solid: var(--warning-950);
+  --warning-soft: var(--warning-100);
+  --warning-soft-hover: var(--warning-200);
+  --on-warning-soft: var(--warning-800);
+  --warning-fg: var(--warning-700);
+  --warning-edge: var(--warning-700);
+  --error-solid: var(--danger);
+  --error-solid-hover: var(--danger-hover);
+  --on-error-solid: var(--on-action);
+  --error-soft: var(--error-100);
+  --error-soft-hover: var(--error-200);
+  --on-error-soft: var(--error-800);
+  --error-fg: var(--error-700);
+  --error-edge: var(--error-600);
+  --primary-50: oklch(97.7% 0.013 236.62);
+  --primary-100: oklch(95.1% 0.026 236.824);
+  --primary-200: oklch(90.1% 0.058 230.902);
+  --primary-300: oklch(82.8% 0.111 230.318);
+  --primary-400: oklch(74.6% 0.16 232.661);
+  --primary-500: oklch(68.5% 0.169 237.323);
+  --primary-600: oklch(58.8% 0.158 241.966);
+  --primary-700: oklch(50% 0.134 242.749);
+  --primary-800: oklch(44.3% 0.11 240.79);
+  --primary-900: oklch(39.1% 0.09 240.876);
+  --primary-950: oklch(29.3% 0.066 243.157);
+  --accent-50: oklch(98.7% 0.022 95.277);
+  --accent-100: oklch(96.2% 0.059 95.617);
+  --accent-200: oklch(92.4% 0.12 95.746);
+  --accent-300: oklch(87.9% 0.169 91.605);
+  --accent-400: oklch(82.8% 0.189 84.429);
+  --accent-500: oklch(76.9% 0.188 70.08);
+  --accent-600: oklch(66.6% 0.179 58.318);
+  --accent-700: oklch(55.5% 0.163 48.998);
+  --accent-800: oklch(47.3% 0.137 46.201);
+  --accent-900: oklch(41.4% 0.112 45.904);
+  --accent-950: oklch(27.9% 0.077 45.635);
+  --secondary-50: oklch(98.5% 0.002 247.839);
+  --secondary-100: oklch(96.7% 0.003 264.542);
+  --secondary-200: oklch(92.8% 0.006 264.531);
+  --secondary-300: oklch(87.2% 0.01 258.338);
+  --secondary-400: oklch(70.7% 0.022 261.325);
+  --secondary-500: oklch(55.1% 0.027 264.364);
+  --secondary-600: oklch(44.6% 0.03 256.802);
+  --secondary-700: oklch(37.3% 0.034 259.733);
+  --secondary-800: oklch(27.8% 0.033 256.848);
+  --secondary-900: oklch(21% 0.034 264.665);
+  --secondary-950: oklch(13% 0.028 261.692);
+  --warning-50: oklch(98.7% 0.026 102.212);
+  --warning-100: oklch(97.3% 0.071 103.193);
+  --warning-200: oklch(94.5% 0.129 101.54);
+  --warning-300: oklch(90.5% 0.182 98.111);
+  --warning-400: oklch(85.2% 0.199 91.936);
+  --warning-500: oklch(79.5% 0.184 86.047);
+  --warning-600: oklch(68.1% 0.162 75.834);
+  --warning-700: oklch(55.4% 0.135 66.442);
+  --warning-800: oklch(47.6% 0.114 61.907);
+  --warning-900: oklch(42.1% 0.095 57.708);
+  --warning-950: oklch(28.6% 0.066 53.813);
+  --error-50: oklch(97.1% 0.013 17.38);
+  --error-100: oklch(93.6% 0.032 17.717);
+  --error-200: oklch(88.5% 0.062 18.334);
+  --error-300: oklch(80.8% 0.114 19.571);
+  --error-400: oklch(70.4% 0.191 22.216);
+  --error-500: oklch(63.7% 0.237 25.331);
+  --error-600: oklch(57.7% 0.245 27.325);
+  --error-700: oklch(50.5% 0.213 27.518);
+  --error-800: oklch(44.4% 0.177 26.899);
+  --error-900: oklch(39.6% 0.141 25.723);
+  --error-950: oklch(25.8% 0.092 26.042);
+  --white: #ffffff;
+  --black: #000000;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --radius-sm: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-panel: 24px;
+  --radius-dialog: 32px;
+  --radius-bar: 36px;
+  --radius-full: 9999px;
+  --control-sm: 28px;
+  --control-md: 36px;
+  --control-lg: 44px;
+  --content-max: 56rem;
+  --icon: 16px;
+  --icon-sm: 14px;
+  --icon-xs: 12px;
+  --icon-lg: 18px;
+  --shadow-raised: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-float: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-float-soft: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+  --blur-panel: 24px;
+  --blur-float: 40px;
+  --layer-dialog: 900;
+  --layer-popup: 950;
+  --layer-toast: 1000;
+  --layer-tooltip: 1000;
+  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  --ease-spring: cubic-bezier(.47,1.64,.41,.8);
+  --duration-fast: 150ms;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --page-bg: var(--secondary-950);
+    --surface: var(--secondary-900);
+    --surface-muted: var(--secondary-800);
+    --surface-glass: color-mix(in oklch, var(--secondary-950) 70%, transparent);
+    --surface-glass-tint: color-mix(in oklch, var(--primary-950) 80%, transparent);
+    --backdrop: rgba(0, 0, 0, 0.6);
+    --tooltip-bg: var(--secondary-100);
+    --tooltip-text: var(--black);
+    --text: var(--white);
+    --text-muted: rgba(255, 255, 255, 0.6);
+    --text-disabled: rgba(255, 255, 255, 0.38);
+    --text-brand: var(--primary-300);
+    --border: var(--secondary-800);
+    --border-control: var(--secondary-500);
+    --border-control-hover: var(--secondary-400);
+    --divider: rgba(255, 255, 255, 0.1);
+    --focus-ring: var(--primary-400);
+    --action: var(--primary-700);
+    --action-hover: var(--primary-800);
+    --on-action: var(--white);
+    --action-subtle: var(--primary-950);
+    --action-subtle-hover: var(--primary-900);
+    --on-action-subtle: var(--primary-200);
+    --control-checked: var(--primary-600);
+    --link: var(--accent-400);
+    --link-border: var(--accent-800);
+    --link-hover-bg: var(--accent-950);
+    --link-hover-border: var(--accent-600);
+    --danger: var(--error-600);
+    --danger-hover: var(--error-700);
+    --info-surface: var(--primary-950);
+    --info-border: var(--primary-800);
+    --info-text: var(--primary-200);
+    --warning-surface: var(--warning-950);
+    --warning-border: var(--warning-800);
+    --warning-text: var(--warning-200);
+    --error-surface: var(--error-950);
+    --error-border: var(--error-800);
+    --error-text: var(--error-300);
+    --error-control: var(--error-400);
+    --highlight: var(--accent-950);
+    --on-highlight: var(--accent-200);
+    --nav-item-text: var(--secondary-300);
+    --nav-item-hover: var(--secondary-900);
+    --table-row-hover: color-mix(in oklch, var(--secondary-800) 50%, transparent);
+    --nav-item-active: var(--secondary-800);
+    --skeleton: var(--secondary-800);
+    --skeleton-highlight: var(--secondary-700);
+    --prose-text: var(--secondary-300);
+    --code-block-bg: var(--secondary-800);
+    --code-block-text: var(--secondary-300);
+    --primary-solid: var(--action);
+    --primary-solid-hover: var(--action-hover);
+    --on-primary-solid: var(--on-action);
+    --primary-soft: var(--action-subtle);
+    --primary-soft-hover: var(--action-subtle-hover);
+    --on-primary-soft: var(--on-action-subtle);
+    --primary-fg: var(--text-brand);
+    --primary-edge: var(--primary-400);
+    --accent-solid: var(--accent-400);
+    --accent-solid-hover: var(--accent-300);
+    --on-accent-solid: var(--accent-950);
+    --accent-soft: var(--accent-950);
+    --accent-soft-hover: var(--accent-900);
+    --on-accent-soft: var(--accent-200);
+    --accent-fg: var(--accent-400);
+    --accent-edge: var(--accent-500);
+    --secondary-solid: var(--secondary-200);
+    --secondary-solid-hover: var(--secondary-300);
+    --on-secondary-solid: var(--secondary-950);
+    --secondary-soft: var(--secondary-800);
+    --secondary-soft-hover: var(--secondary-700);
+    --on-secondary-soft: var(--secondary-100);
+    --secondary-fg: var(--secondary-300);
+    --secondary-edge: var(--secondary-500);
+    --warning-solid: var(--warning-400);
+    --warning-solid-hover: var(--warning-300);
+    --on-warning-solid: var(--warning-950);
+    --warning-soft: var(--warning-950);
+    --warning-soft-hover: var(--warning-900);
+    --on-warning-soft: var(--warning-200);
+    --warning-fg: var(--warning-400);
+    --warning-edge: var(--warning-500);
+    --error-solid: var(--danger);
+    --error-solid-hover: var(--danger-hover);
+    --on-error-solid: var(--on-action);
+    --error-soft: var(--error-950);
+    --error-soft-hover: var(--error-900);
+    --on-error-soft: var(--error-200);
+    --error-fg: var(--error-400);
+    --error-edge: var(--error-400);
+  }
+}
+
+[data-theme="dark"] {
+  --page-bg: var(--secondary-950);
+  --surface: var(--secondary-900);
+  --surface-muted: var(--secondary-800);
+  --surface-glass: color-mix(in oklch, var(--secondary-950) 70%, transparent);
+  --surface-glass-tint: color-mix(in oklch, var(--primary-950) 80%, transparent);
+  --backdrop: rgba(0, 0, 0, 0.6);
+  --tooltip-bg: var(--secondary-100);
+  --tooltip-text: var(--black);
+  --text: var(--white);
+  --text-muted: rgba(255, 255, 255, 0.6);
+  --text-disabled: rgba(255, 255, 255, 0.38);
+  --text-brand: var(--primary-300);
+  --border: var(--secondary-800);
+  --border-control: var(--secondary-500);
+  --border-control-hover: var(--secondary-400);
+  --divider: rgba(255, 255, 255, 0.1);
+  --focus-ring: var(--primary-400);
+  --action: var(--primary-700);
+  --action-hover: var(--primary-800);
+  --on-action: var(--white);
+  --action-subtle: var(--primary-950);
+  --action-subtle-hover: var(--primary-900);
+  --on-action-subtle: var(--primary-200);
+  --control-checked: var(--primary-600);
+  --link: var(--accent-400);
+  --link-border: var(--accent-800);
+  --link-hover-bg: var(--accent-950);
+  --link-hover-border: var(--accent-600);
+  --danger: var(--error-600);
+  --danger-hover: var(--error-700);
+  --info-surface: var(--primary-950);
+  --info-border: var(--primary-800);
+  --info-text: var(--primary-200);
+  --warning-surface: var(--warning-950);
+  --warning-border: var(--warning-800);
+  --warning-text: var(--warning-200);
+  --error-surface: var(--error-950);
+  --error-border: var(--error-800);
+  --error-text: var(--error-300);
+  --error-control: var(--error-400);
+  --highlight: var(--accent-950);
+  --on-highlight: var(--accent-200);
+  --nav-item-text: var(--secondary-300);
+  --nav-item-hover: var(--secondary-900);
+  --table-row-hover: color-mix(in oklch, var(--secondary-800) 50%, transparent);
+  --nav-item-active: var(--secondary-800);
+  --skeleton: var(--secondary-800);
+  --skeleton-highlight: var(--secondary-700);
+  --prose-text: var(--secondary-300);
+  --code-block-bg: var(--secondary-800);
+  --code-block-text: var(--secondary-300);
+  --primary-solid: var(--action);
+  --primary-solid-hover: var(--action-hover);
+  --on-primary-solid: var(--on-action);
+  --primary-soft: var(--action-subtle);
+  --primary-soft-hover: var(--action-subtle-hover);
+  --on-primary-soft: var(--on-action-subtle);
+  --primary-fg: var(--text-brand);
+  --primary-edge: var(--primary-400);
+  --accent-solid: var(--accent-400);
+  --accent-solid-hover: var(--accent-300);
+  --on-accent-solid: var(--accent-950);
+  --accent-soft: var(--accent-950);
+  --accent-soft-hover: var(--accent-900);
+  --on-accent-soft: var(--accent-200);
+  --accent-fg: var(--accent-400);
+  --accent-edge: var(--accent-500);
+  --secondary-solid: var(--secondary-200);
+  --secondary-solid-hover: var(--secondary-300);
+  --on-secondary-solid: var(--secondary-950);
+  --secondary-soft: var(--secondary-800);
+  --secondary-soft-hover: var(--secondary-700);
+  --on-secondary-soft: var(--secondary-100);
+  --secondary-fg: var(--secondary-300);
+  --secondary-edge: var(--secondary-500);
+  --warning-solid: var(--warning-400);
+  --warning-solid-hover: var(--warning-300);
+  --on-warning-solid: var(--warning-950);
+  --warning-soft: var(--warning-950);
+  --warning-soft-hover: var(--warning-900);
+  --on-warning-soft: var(--warning-200);
+  --warning-fg: var(--warning-400);
+  --warning-edge: var(--warning-500);
+  --error-solid: var(--danger);
+  --error-solid-hover: var(--danger-hover);
+  --on-error-solid: var(--on-action);
+  --error-soft: var(--error-950);
+  --error-soft-hover: var(--error-900);
+  --on-error-soft: var(--error-200);
+  --error-fg: var(--error-400);
+  --error-edge: var(--error-400);
+}
+
+[data-palette="rose"] {
+  --primary-50: #fff1f2;
+  --primary-100: #ffe4e6;
+  --primary-200: #fecdd3;
+  --primary-300: #fda4af;
+  --primary-400: #fb7185;
+  --primary-500: #f43f5e;
+  --primary-600: #e11d48;
+  --primary-700: #be123c;
+  --primary-800: #9f1239;
+  --primary-900: #881337;
+  --primary-950: #4c0519;
+  --accent-50: #f5f3ff;
+  --accent-100: #ede9fe;
+  --accent-200: #ddd6fe;
+  --accent-300: #c4b5fd;
+  --accent-400: #a78bfa;
+  --accent-500: #8b5cf6;
+  --accent-600: #7c3aed;
+  --accent-700: #6d28d9;
+  --accent-800: #5b21b6;
+  --accent-900: #4c1d95;
+  --accent-950: #2e1065;
+}
+
+[data-font="chill"] {
+  --font-sans: "ChillRoundF", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
+
+.koi-type-display { font-family: var(--font-sans); font-size: 30px; line-height: 38px; font-weight: 700; }
+.koi-type-heading-1 { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 700; }
+.koi-type-heading-2 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; }
+.koi-type-heading-3 { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 700; }
+.koi-type-prose { font-family: var(--font-sans); font-size: 16px; line-height: 1.75; font-weight: 400; }
+.koi-type-body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
+.koi-type-small { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
+.koi-type-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; }
+.koi-type-label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 700; }
+.koi-type-button { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
+.koi-type-button-sm { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; }