@deepfuture/dui-components 1.4.5 → 1.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/tokens/tokens-raw.js +1 -1
  3. package/tokens/tokens.css +0 -30
  4. package/tokens/tokens.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deepfuture/dui-components",
3
- "version": "1.4.5",
3
+ "version": "1.4.6",
4
4
  "description": "DUI styled web components — extends dui-primitives with design tokens and variant CSS",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/tokens/tokens-raw.js CHANGED
@@ -1,2 +1,2 @@
1
- const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n /* -----------------------------------------------------------\n * Type scale\n * -----------------------------------------------------------\n * Each size is paired with a line-height variable. The\n * line-height is a unitless ratio; multiplied by the size,\n * it yields the target leading (shown in comments).\n * ----------------------------------------------------------- */\n\n --text-2xs: 0.625rem; /* 10px */\n --text-2xs--line-height: calc(0.75 / 0.625); /* 12px */\n\n --text-xs: 0.75rem; /* 12px */\n --text-xs--line-height: calc(1 / 0.75); /* 16px */\n\n --text-sm: 0.875rem; /* 14px */\n --text-sm--line-height: calc(1.25 / 0.875); /* 20px */\n\n --text-base: 1rem; /* 16px */\n --text-base--line-height: calc(1.5 / 1); /* 24px */\n\n --text-lg: 1.125rem; /* 18px */\n --text-lg--line-height: calc(1.75 / 1.125); /* 28px */\n\n --text-xl: 1.25rem; /* 20px */\n --text-xl--line-height: calc(1.75 / 1.25); /* 28px */\n\n --text-2xl: 1.5rem; /* 24px */\n --text-2xl--line-height: calc(2 / 1.5); /* 32px */\n\n --text-3xl: 1.875rem; /* 30px */\n --text-3xl--line-height: calc(2.25 / 1.875); /* 36px */\n\n --text-4xl: 2.25rem; /* 36px */\n --text-4xl--line-height: calc(2.5 / 2.25); /* 40px */\n\n --text-5xl: 3rem; /* 48px */\n --text-5xl--line-height: 1;\n\n --text-6xl: 3.75rem; /* 60px */\n --text-6xl--line-height: 1;\n\n --text-7xl: 4.5rem; /* 72px */\n --text-7xl--line-height: 1;\n\n --text-8xl: 6rem; /* 96px */\n --text-8xl--line-height: 1;\n\n --text-9xl: 8rem; /* 128px */\n --text-9xl--line-height: 1;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n --letter-spacing-widest: 0.018em;\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-fastest: 75ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem; /* 20px */\n --component-height-xs: 1.5rem; /* 24px */\n --component-height-sm: 1.75rem; /* 28px */\n --component-height-md: 2rem; /* 32px */\n --component-height-lg: 2.25rem; /* 36px */\n --component-height-xl: 2.5rem; /* 40px */\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);\n --focus-ring-width: 3px;\n --focus-ring-offset: 0px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n * 1. Operations on a base — colors are relationships, not fixed values.\n * 2. Fewer primitives, more derivation — 4 primitives, everything\n * else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.15 0 0);\n --accent: oklch(0.55 0.25 260);\n --destructive: oklch(0.55 0.22 25);\n --success: oklch(0.55 0.18 145);\n --warning: oklch(0.65 0.18 70);\n --info: oklch(0.55 0.18 230);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.15 0.015 260);\n --foreground: oklch(0.93 0 0);\n --accent: oklch(0.75 0.18 260);\n --destructive: oklch(0.70 0.18 25);\n --success: oklch(0.72 0.16 145);\n --warning: oklch(0.78 0.15 70);\n --info: oklch(0.72 0.15 230);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n /* Surfaces — lightness offsets from background.\n Positive = elevated (brighter). Negative = sunken (darker). */\n --sunken-2: oklch(from var(--background) calc(l - 0.03) c h);\n --sunken-1: oklch(from var(--background) calc(l - 0.01) c h);\n --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n /* Borders — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --border: oklch(from var(--foreground) l c h / 0.15);\n --border-strong: oklch(from var(--foreground) l c h / 0.25);\n\n /* Text tiers — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --text-1: oklch(from var(--foreground) l c h / 0.90);\n --text-2: oklch(from var(--foreground) l c h / 0.63);\n --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n /* Accent surfaces — for badges, pills, tinted cards */\n --accent-subtle: oklch(from var(--accent) l c h / 0.10);\n --accent-text: oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);\n\n /* Destructive surfaces */\n --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n --destructive-text: var(--destructive);\n\n /* Success surfaces */\n --success-subtle: oklch(from var(--success) l c h / 0.10);\n --success-text: oklch(from var(--success) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Warning surfaces */\n --warning-subtle: oklch(from var(--warning) l c h / 0.10);\n --warning-text: oklch(from var(--warning) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Info surfaces */\n --info-subtle: oklch(from var(--info) l c h / 0.10);\n --info-text: oklch(from var(--info) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Utility — scrim overlay for modals/dialogs */\n --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n /* Meter / progress bar defaults */\n --meter-track: var(--surface-1);\n --meter-fill: var(--accent);\n\n /* Chart palette (theme-independent) */\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n\n /* -----------------------------------------------------------\n * Prose (rich-text / markdown content)\n * ----------------------------------------------------------- */\n --prose-body: var(--text-1);\n --prose-headings: var(--foreground);\n --prose-lead: var(--text-2);\n --prose-links: var(--accent);\n --prose-links-hover: var(--accent-text);\n --prose-bold: var(--foreground);\n --prose-code: var(--foreground);\n --prose-code-bg: var(--surface-1);\n --prose-pre-bg: var(--surface-1);\n --prose-pre-border: var(--border);\n --prose-blockquote-border: var(--accent);\n --prose-blockquote-text: var(--text-2);\n --prose-hr: var(--border);\n --prose-th-border: var(--border-strong);\n --prose-td-border: var(--border);\n --prose-caption: var(--text-3);\n --prose-kbd-bg: var(--surface-2);\n --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n color: var(--text-1);\n font-family: var(--font-sans);\n line-height: var(--line-height-normal);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* =================================================================\n * Heading defaults\n * ================================================================= */\nh1 { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); } /* 36 / 40 */\nh2 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); } /* 30 / 36 */\nh3 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); } /* 24 / 32 */\nh4 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); } /* 20 / 28 */\nh5 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); } /* 18 / 28 */\nh6 { font-size: var(--text-base); line-height: var(--text-base--line-height); } /* 16 / 24 */\n\n/* =================================================================\n * Baseline grid trim — prose elements anchor visible glyph edges,\n * not CSS line-box edges, to the 4px grid.\n * ================================================================= */\nh1, h2, h3, h4, h5, h6,\np, li, blockquote, dt, dd,\nlabel, legend, caption, figcaption, th, td {\n text-box: trim-both cap alphabetic;\n}\n";
1
+ const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n /* -----------------------------------------------------------\n * Type scale\n * -----------------------------------------------------------\n * Each size is paired with a line-height variable. The\n * line-height is a unitless ratio; multiplied by the size,\n * it yields the target leading (shown in comments).\n * ----------------------------------------------------------- */\n\n --text-2xs: 0.625rem; /* 10px */\n --text-2xs--line-height: calc(0.75 / 0.625); /* 12px */\n\n --text-xs: 0.75rem; /* 12px */\n --text-xs--line-height: calc(1 / 0.75); /* 16px */\n\n --text-sm: 0.875rem; /* 14px */\n --text-sm--line-height: calc(1.25 / 0.875); /* 20px */\n\n --text-base: 1rem; /* 16px */\n --text-base--line-height: calc(1.5 / 1); /* 24px */\n\n --text-lg: 1.125rem; /* 18px */\n --text-lg--line-height: calc(1.75 / 1.125); /* 28px */\n\n --text-xl: 1.25rem; /* 20px */\n --text-xl--line-height: calc(1.75 / 1.25); /* 28px */\n\n --text-2xl: 1.5rem; /* 24px */\n --text-2xl--line-height: calc(2 / 1.5); /* 32px */\n\n --text-3xl: 1.875rem; /* 30px */\n --text-3xl--line-height: calc(2.25 / 1.875); /* 36px */\n\n --text-4xl: 2.25rem; /* 36px */\n --text-4xl--line-height: calc(2.5 / 2.25); /* 40px */\n\n --text-5xl: 3rem; /* 48px */\n --text-5xl--line-height: 1;\n\n --text-6xl: 3.75rem; /* 60px */\n --text-6xl--line-height: 1;\n\n --text-7xl: 4.5rem; /* 72px */\n --text-7xl--line-height: 1;\n\n --text-8xl: 6rem; /* 96px */\n --text-8xl--line-height: 1;\n\n --text-9xl: 8rem; /* 128px */\n --text-9xl--line-height: 1;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n --letter-spacing-widest: 0.018em;\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-fastest: 75ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem; /* 20px */\n --component-height-xs: 1.5rem; /* 24px */\n --component-height-sm: 1.75rem; /* 28px */\n --component-height-md: 2rem; /* 32px */\n --component-height-lg: 2.25rem; /* 36px */\n --component-height-xl: 2.5rem; /* 40px */\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);\n --focus-ring-width: 3px;\n --focus-ring-offset: 0px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n * 1. Operations on a base — colors are relationships, not fixed values.\n * 2. Fewer primitives, more derivation — 4 primitives, everything\n * else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.15 0 0);\n --accent: oklch(0.55 0.25 260);\n --destructive: oklch(0.55 0.22 25);\n --success: oklch(0.55 0.18 145);\n --warning: oklch(0.65 0.18 70);\n --info: oklch(0.55 0.18 230);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.15 0.015 260);\n --foreground: oklch(0.93 0 0);\n --accent: oklch(0.75 0.18 260);\n --destructive: oklch(0.70 0.18 25);\n --success: oklch(0.72 0.16 145);\n --warning: oklch(0.78 0.15 70);\n --info: oklch(0.72 0.15 230);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n /* Surfaces — lightness offsets from background.\n Positive = elevated (brighter). Negative = sunken (darker). */\n --sunken-2: oklch(from var(--background) calc(l - 0.03) c h);\n --sunken-1: oklch(from var(--background) calc(l - 0.01) c h);\n --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n /* Borders — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --border: oklch(from var(--foreground) l c h / 0.15);\n --border-strong: oklch(from var(--foreground) l c h / 0.25);\n\n /* Text tiers — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --text-1: oklch(from var(--foreground) l c h / 0.90);\n --text-2: oklch(from var(--foreground) l c h / 0.63);\n --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n /* Accent surfaces — for badges, pills, tinted cards */\n --accent-subtle: oklch(from var(--accent) l c h / 0.10);\n --accent-text: oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);\n\n /* Destructive surfaces */\n --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n --destructive-text: var(--destructive);\n\n /* Success surfaces */\n --success-subtle: oklch(from var(--success) l c h / 0.10);\n --success-text: oklch(from var(--success) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Warning surfaces */\n --warning-subtle: oklch(from var(--warning) l c h / 0.10);\n --warning-text: oklch(from var(--warning) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Info surfaces */\n --info-subtle: oklch(from var(--info) l c h / 0.10);\n --info-text: oklch(from var(--info) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Utility — scrim overlay for modals/dialogs */\n --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n /* Meter / progress bar defaults */\n --meter-track: var(--surface-1);\n --meter-fill: var(--accent);\n\n /* Chart palette (theme-independent) */\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n\n /* -----------------------------------------------------------\n * Prose (rich-text / markdown content)\n * ----------------------------------------------------------- */\n --prose-body: var(--text-1);\n --prose-headings: var(--foreground);\n --prose-lead: var(--text-2);\n --prose-links: var(--accent);\n --prose-links-hover: var(--accent-text);\n --prose-bold: var(--foreground);\n --prose-code: var(--foreground);\n --prose-code-bg: var(--surface-1);\n --prose-pre-bg: var(--surface-1);\n --prose-pre-border: var(--border);\n --prose-blockquote-border: var(--accent);\n --prose-blockquote-text: var(--text-2);\n --prose-hr: var(--border);\n --prose-th-border: var(--border-strong);\n --prose-td-border: var(--border);\n --prose-caption: var(--text-3);\n --prose-kbd-bg: var(--surface-2);\n --prose-kbd-border: var(--border-strong);\n}\n\n";
2
2
  export { tokensCSS };
package/tokens/tokens.css CHANGED
@@ -396,33 +396,3 @@
396
396
  --prose-kbd-border: var(--border-strong);
397
397
  }
398
398
 
399
- /* =================================================================
400
- * Base document styles
401
- * ================================================================= */
402
- :root {
403
- color: var(--text-1);
404
- font-family: var(--font-sans);
405
- line-height: var(--line-height-normal);
406
- -webkit-font-smoothing: antialiased;
407
- -moz-osx-font-smoothing: grayscale;
408
- }
409
-
410
- /* =================================================================
411
- * Heading defaults
412
- * ================================================================= */
413
- h1 { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); } /* 36 / 40 */
414
- h2 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); } /* 30 / 36 */
415
- h3 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); } /* 24 / 32 */
416
- h4 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); } /* 20 / 28 */
417
- h5 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); } /* 18 / 28 */
418
- h6 { font-size: var(--text-base); line-height: var(--text-base--line-height); } /* 16 / 24 */
419
-
420
- /* =================================================================
421
- * Baseline grid trim — prose elements anchor visible glyph edges,
422
- * not CSS line-box edges, to the 4px grid.
423
- * ================================================================= */
424
- h1, h2, h3, h4, h5, h6,
425
- p, li, blockquote, dt, dd,
426
- label, legend, caption, figcaption, th, td {
427
- text-box: trim-both cap alphabetic;
428
- }
package/tokens/tokens.js CHANGED
@@ -1,4 +1,4 @@
1
- const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n /* -----------------------------------------------------------\n * Type scale\n * -----------------------------------------------------------\n * Each size is paired with a line-height variable. The\n * line-height is a unitless ratio; multiplied by the size,\n * it yields the target leading (shown in comments).\n * ----------------------------------------------------------- */\n\n --text-2xs: 0.625rem; /* 10px */\n --text-2xs--line-height: calc(0.75 / 0.625); /* 12px */\n\n --text-xs: 0.75rem; /* 12px */\n --text-xs--line-height: calc(1 / 0.75); /* 16px */\n\n --text-sm: 0.875rem; /* 14px */\n --text-sm--line-height: calc(1.25 / 0.875); /* 20px */\n\n --text-base: 1rem; /* 16px */\n --text-base--line-height: calc(1.5 / 1); /* 24px */\n\n --text-lg: 1.125rem; /* 18px */\n --text-lg--line-height: calc(1.75 / 1.125); /* 28px */\n\n --text-xl: 1.25rem; /* 20px */\n --text-xl--line-height: calc(1.75 / 1.25); /* 28px */\n\n --text-2xl: 1.5rem; /* 24px */\n --text-2xl--line-height: calc(2 / 1.5); /* 32px */\n\n --text-3xl: 1.875rem; /* 30px */\n --text-3xl--line-height: calc(2.25 / 1.875); /* 36px */\n\n --text-4xl: 2.25rem; /* 36px */\n --text-4xl--line-height: calc(2.5 / 2.25); /* 40px */\n\n --text-5xl: 3rem; /* 48px */\n --text-5xl--line-height: 1;\n\n --text-6xl: 3.75rem; /* 60px */\n --text-6xl--line-height: 1;\n\n --text-7xl: 4.5rem; /* 72px */\n --text-7xl--line-height: 1;\n\n --text-8xl: 6rem; /* 96px */\n --text-8xl--line-height: 1;\n\n --text-9xl: 8rem; /* 128px */\n --text-9xl--line-height: 1;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n --letter-spacing-widest: 0.018em;\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-fastest: 75ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem; /* 20px */\n --component-height-xs: 1.5rem; /* 24px */\n --component-height-sm: 1.75rem; /* 28px */\n --component-height-md: 2rem; /* 32px */\n --component-height-lg: 2.25rem; /* 36px */\n --component-height-xl: 2.5rem; /* 40px */\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);\n --focus-ring-width: 3px;\n --focus-ring-offset: 0px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n * 1. Operations on a base — colors are relationships, not fixed values.\n * 2. Fewer primitives, more derivation — 4 primitives, everything\n * else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.15 0 0);\n --accent: oklch(0.55 0.25 260);\n --destructive: oklch(0.55 0.22 25);\n --success: oklch(0.55 0.18 145);\n --warning: oklch(0.65 0.18 70);\n --info: oklch(0.55 0.18 230);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.15 0.015 260);\n --foreground: oklch(0.93 0 0);\n --accent: oklch(0.75 0.18 260);\n --destructive: oklch(0.70 0.18 25);\n --success: oklch(0.72 0.16 145);\n --warning: oklch(0.78 0.15 70);\n --info: oklch(0.72 0.15 230);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n /* Surfaces — lightness offsets from background.\n Positive = elevated (brighter). Negative = sunken (darker). */\n --sunken-2: oklch(from var(--background) calc(l - 0.03) c h);\n --sunken-1: oklch(from var(--background) calc(l - 0.01) c h);\n --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n /* Borders — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --border: oklch(from var(--foreground) l c h / 0.15);\n --border-strong: oklch(from var(--foreground) l c h / 0.25);\n\n /* Text tiers — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --text-1: oklch(from var(--foreground) l c h / 0.90);\n --text-2: oklch(from var(--foreground) l c h / 0.63);\n --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n /* Accent surfaces — for badges, pills, tinted cards */\n --accent-subtle: oklch(from var(--accent) l c h / 0.10);\n --accent-text: oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);\n\n /* Destructive surfaces */\n --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n --destructive-text: var(--destructive);\n\n /* Success surfaces */\n --success-subtle: oklch(from var(--success) l c h / 0.10);\n --success-text: oklch(from var(--success) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Warning surfaces */\n --warning-subtle: oklch(from var(--warning) l c h / 0.10);\n --warning-text: oklch(from var(--warning) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Info surfaces */\n --info-subtle: oklch(from var(--info) l c h / 0.10);\n --info-text: oklch(from var(--info) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Utility — scrim overlay for modals/dialogs */\n --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n /* Meter / progress bar defaults */\n --meter-track: var(--surface-1);\n --meter-fill: var(--accent);\n\n /* Chart palette (theme-independent) */\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n\n /* -----------------------------------------------------------\n * Prose (rich-text / markdown content)\n * ----------------------------------------------------------- */\n --prose-body: var(--text-1);\n --prose-headings: var(--foreground);\n --prose-lead: var(--text-2);\n --prose-links: var(--accent);\n --prose-links-hover: var(--accent-text);\n --prose-bold: var(--foreground);\n --prose-code: var(--foreground);\n --prose-code-bg: var(--surface-1);\n --prose-pre-bg: var(--surface-1);\n --prose-pre-border: var(--border);\n --prose-blockquote-border: var(--accent);\n --prose-blockquote-text: var(--text-2);\n --prose-hr: var(--border);\n --prose-th-border: var(--border-strong);\n --prose-td-border: var(--border);\n --prose-caption: var(--text-3);\n --prose-kbd-bg: var(--surface-2);\n --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n color: var(--text-1);\n font-family: var(--font-sans);\n line-height: var(--line-height-normal);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* =================================================================\n * Heading defaults\n * ================================================================= */\nh1 { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); } /* 36 / 40 */\nh2 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); } /* 30 / 36 */\nh3 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); } /* 24 / 32 */\nh4 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); } /* 20 / 28 */\nh5 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); } /* 18 / 28 */\nh6 { font-size: var(--text-base); line-height: var(--text-base--line-height); } /* 16 / 24 */\n\n/* =================================================================\n * Baseline grid trim — prose elements anchor visible glyph edges,\n * not CSS line-box edges, to the 4px grid.\n * ================================================================= */\nh1, h2, h3, h4, h5, h6,\np, li, blockquote, dt, dd,\nlabel, legend, caption, figcaption, th, td {\n text-box: trim-both cap alphabetic;\n}\n";
1
+ const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n /* -----------------------------------------------------------\n * Type scale\n * -----------------------------------------------------------\n * Each size is paired with a line-height variable. The\n * line-height is a unitless ratio; multiplied by the size,\n * it yields the target leading (shown in comments).\n * ----------------------------------------------------------- */\n\n --text-2xs: 0.625rem; /* 10px */\n --text-2xs--line-height: calc(0.75 / 0.625); /* 12px */\n\n --text-xs: 0.75rem; /* 12px */\n --text-xs--line-height: calc(1 / 0.75); /* 16px */\n\n --text-sm: 0.875rem; /* 14px */\n --text-sm--line-height: calc(1.25 / 0.875); /* 20px */\n\n --text-base: 1rem; /* 16px */\n --text-base--line-height: calc(1.5 / 1); /* 24px */\n\n --text-lg: 1.125rem; /* 18px */\n --text-lg--line-height: calc(1.75 / 1.125); /* 28px */\n\n --text-xl: 1.25rem; /* 20px */\n --text-xl--line-height: calc(1.75 / 1.25); /* 28px */\n\n --text-2xl: 1.5rem; /* 24px */\n --text-2xl--line-height: calc(2 / 1.5); /* 32px */\n\n --text-3xl: 1.875rem; /* 30px */\n --text-3xl--line-height: calc(2.25 / 1.875); /* 36px */\n\n --text-4xl: 2.25rem; /* 36px */\n --text-4xl--line-height: calc(2.5 / 2.25); /* 40px */\n\n --text-5xl: 3rem; /* 48px */\n --text-5xl--line-height: 1;\n\n --text-6xl: 3.75rem; /* 60px */\n --text-6xl--line-height: 1;\n\n --text-7xl: 4.5rem; /* 72px */\n --text-7xl--line-height: 1;\n\n --text-8xl: 6rem; /* 96px */\n --text-8xl--line-height: 1;\n\n --text-9xl: 8rem; /* 128px */\n --text-9xl--line-height: 1;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n --letter-spacing-widest: 0.018em;\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-fastest: 75ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem; /* 20px */\n --component-height-xs: 1.5rem; /* 24px */\n --component-height-sm: 1.75rem; /* 28px */\n --component-height-md: 2rem; /* 32px */\n --component-height-lg: 2.25rem; /* 36px */\n --component-height-xl: 2.5rem; /* 40px */\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);\n --focus-ring-width: 3px;\n --focus-ring-offset: 0px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n * 1. Operations on a base — colors are relationships, not fixed values.\n * 2. Fewer primitives, more derivation — 4 primitives, everything\n * else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.15 0 0);\n --accent: oklch(0.55 0.25 260);\n --destructive: oklch(0.55 0.22 25);\n --success: oklch(0.55 0.18 145);\n --warning: oklch(0.65 0.18 70);\n --info: oklch(0.55 0.18 230);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.15 0.015 260);\n --foreground: oklch(0.93 0 0);\n --accent: oklch(0.75 0.18 260);\n --destructive: oklch(0.70 0.18 25);\n --success: oklch(0.72 0.16 145);\n --warning: oklch(0.78 0.15 70);\n --info: oklch(0.72 0.15 230);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n /* Surfaces — lightness offsets from background.\n Positive = elevated (brighter). Negative = sunken (darker). */\n --sunken-2: oklch(from var(--background) calc(l - 0.03) c h);\n --sunken-1: oklch(from var(--background) calc(l - 0.01) c h);\n --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n /* Borders — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --border: oklch(from var(--foreground) l c h / 0.15);\n --border-strong: oklch(from var(--foreground) l c h / 0.25);\n\n /* Text tiers — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --text-1: oklch(from var(--foreground) l c h / 0.90);\n --text-2: oklch(from var(--foreground) l c h / 0.63);\n --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n /* Accent surfaces — for badges, pills, tinted cards */\n --accent-subtle: oklch(from var(--accent) l c h / 0.10);\n --accent-text: oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);\n\n /* Destructive surfaces */\n --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n --destructive-text: var(--destructive);\n\n /* Success surfaces */\n --success-subtle: oklch(from var(--success) l c h / 0.10);\n --success-text: oklch(from var(--success) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Warning surfaces */\n --warning-subtle: oklch(from var(--warning) l c h / 0.10);\n --warning-text: oklch(from var(--warning) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Info surfaces */\n --info-subtle: oklch(from var(--info) l c h / 0.10);\n --info-text: oklch(from var(--info) calc(l * 1.05) calc(c * 0.9) h);\n\n /* Utility — scrim overlay for modals/dialogs */\n --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n /* Meter / progress bar defaults */\n --meter-track: var(--surface-1);\n --meter-fill: var(--accent);\n\n /* Chart palette (theme-independent) */\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n\n /* -----------------------------------------------------------\n * Prose (rich-text / markdown content)\n * ----------------------------------------------------------- */\n --prose-body: var(--text-1);\n --prose-headings: var(--foreground);\n --prose-lead: var(--text-2);\n --prose-links: var(--accent);\n --prose-links-hover: var(--accent-text);\n --prose-bold: var(--foreground);\n --prose-code: var(--foreground);\n --prose-code-bg: var(--surface-1);\n --prose-pre-bg: var(--surface-1);\n --prose-pre-border: var(--border);\n --prose-blockquote-border: var(--accent);\n --prose-blockquote-text: var(--text-2);\n --prose-hr: var(--border);\n --prose-th-border: var(--border-strong);\n --prose-td-border: var(--border);\n --prose-caption: var(--text-3);\n --prose-kbd-bg: var(--surface-2);\n --prose-kbd-border: var(--border-strong);\n}\n\n";
2
2
  const propertiesCSS = "/* =================================================================\n * CSS @property Declarations\n * =================================================================\n * Typed API surface for theme-default's component-level CSS custom\n * properties. These provide:\n *\n * 1. Type safety — browser rejects invalid values, falls back to\n * initial-value rather than inheriting garbage.\n * 2. Smooth transitions — registered properties with known syntax\n * can be interpolated, enabling animated variant changes.\n * 3. Self-documenting API — @property blocks are the machine-\n * readable schema and human-readable reference.\n * 4. DevTools integration — Chrome shows registered properties\n * with syntax and initial-value in computed styles.\n *\n * Only consumer-facing properties are declared here. Internal tokens\n * (--space-*, --primary, etc.) are implementation details.\n *\n * initial-value uses resolved values (no var() allowed). These match\n * the light-theme defaults and serve as the ultimate fallback when\n * no theme is applied.\n *\n * CONSTRAINT: @property registrations are global — two themes on\n * the same page could conflict. This is acceptable for DUI's model\n * where one theme is active at a time.\n * ================================================================= */\n\n/* -----------------------------------------------------------\n * Button\n * ----------------------------------------------------------- */\n@property --button-bg {\n syntax: \"*\";\n inherits: true;\n}\n\n@property --button-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.97 0 0);\n}\n\n@property --button-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --button-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2rem;\n}\n\n@property --button-width {\n syntax: \"<length-percentage> | auto\";\n inherits: true;\n initial-value: auto;\n}\n\n@property --button-padding-y {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --button-padding-x {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.625rem;\n}\n\n@property --button-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n@property --button-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --button-font-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.875rem;\n}\n\n@property --button-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Badge\n * ----------------------------------------------------------- */\n@property --badge-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.24 0.005 265);\n}\n\n@property --badge-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.985 0 0);\n}\n\n@property --badge-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --badge-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.75rem;\n}\n\n/* -----------------------------------------------------------\n * Spinner\n * ----------------------------------------------------------- */\n@property --spinner-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.25rem;\n}\n\n@property --spinner-color {\n syntax: \"<color>\";\n inherits: true;\n initial-value: currentColor;\n}\n\n/* -----------------------------------------------------------\n * Checkbox\n * ----------------------------------------------------------- */\n@property --checkbox-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Radio\n * ----------------------------------------------------------- */\n@property --radio-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Slider\n * ----------------------------------------------------------- */\n@property --slider-track-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n@property --slider-thumb-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.125rem;\n}\n\n/* -----------------------------------------------------------\n * Switch\n * ----------------------------------------------------------- */\n@property --switch-width {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2.25rem;\n}\n\n@property --switch-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.25rem;\n}\n\n@property --switch-thumb-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --switch-thumb-offset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.125rem;\n}\n\n/* -----------------------------------------------------------\n * Toggle\n * ----------------------------------------------------------- */\n@property --toggle-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.375rem;\n}\n\n/* -----------------------------------------------------------\n * Progress\n * ----------------------------------------------------------- */\n@property --progress-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n/* -----------------------------------------------------------\n * Avatar\n * ----------------------------------------------------------- */\n@property --avatar-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.99 0 0);\n}\n\n@property --avatar-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.63);\n}\n\n/* -----------------------------------------------------------\n * Sidebar\n * ----------------------------------------------------------- */\n@property --sidebar-width {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 16rem;\n}\n\n@property --sidebar-width-mobile {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 18rem;\n}\n\n@property --sidebar-width-icon {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 3rem;\n}\n\n@property --sidebar-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.99 0 0);\n}\n\n@property --sidebar-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.90);\n}\n\n@property --sidebar-border {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.15);\n}\n\n@property --sidebar-button-bg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0 0 0 / 0);\n}\n\n@property --sidebar-button-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.90);\n}\n\n@property --sidebar-muted-fg {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.63);\n}\n\n@property --sidebar-ring {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.55 0.25 260);\n}\n\n@property --sidebar-separator {\n syntax: \"<color>\";\n inherits: true;\n initial-value: oklch(0.15 0 0 / 0.15);\n}\n\n@property --sidebar-group-padding-y {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --sidebar-group-label-inset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1.5rem;\n}\n\n@property --sidebar-button-inset {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --sidebar-header-content-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n/* -----------------------------------------------------------\n * Sidebar Menu Button\n * ----------------------------------------------------------- */\n@property --smb-height {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 2rem;\n}\n\n@property --smb-padding-x {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --smb-gap {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n\n@property --smb-icon-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 1rem;\n}\n\n@property --smb-font-size {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.875rem;\n}\n\n@property --smb-radius {\n syntax: \"<length>\";\n inherits: true;\n initial-value: 0.5rem;\n}\n";
3
3
  const tokenSheet = new CSSStyleSheet();
4
4
  tokenSheet.replaceSync(propertiesCSS + "\n" + tokensCSS);