gridsmith-ui 0.1.0

package/dist/roots.css

@@ -0,0 +1,599 @@
+/* ==========================================================================
+   Root Control Engine
+   Derives all design tokens from user-configurable root values.
+   L1 roots are set by ThemeContext (inline styles on :root).
+   L2 derived scales use CSS calc/oklch for reactive updates.
+   L3 semantic tokens map scale steps to component-facing names.
+   ========================================================================== */
+
+:root {
+  /* ── L1: Root Controls (defaults — overridden by ThemeContext) ───── */
+
+  --ds-hue-primary: 264;
+  --ds-hue-neutral: 260;
+  --ds-hue-destructive: 27;
+  --ds-hue-success: 153;
+  --ds-hue-warning: 75;
+  --ds-sat-primary: 1;
+  --ds-sat-neutral: 1;
+
+  --ds-radius-base: 8px;
+  --ds-border-base: 1px;
+  --ds-space-unit: 4px;
+
+  --ds-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --ds-font-display: "Inter", sans-serif;
+  --ds-text-base: 14px;
+  --ds-weight-base: 500;
+  --ds-weight-heading: 700;
+  --ds-weight-emphasis: 600;
+  --ds-weight-strong: 700;
+  --ds-weight-heavy: 800;
+
+  --ds-shadow-offset: 0px;
+  --ds-shadow-offset-x: 0px;
+  --ds-shadow-offset-y: 0px;
+  --ds-shadow-blur: 8px;
+  --ds-shadow-alpha: 0.1;
+
+  --ds-transition-speed: 200ms;
+  --ds-transition-ease: ease-in-out;
+
+  --ds-sidebar-width: 224px;
+  --ds-sidebar-compact-width: 72px;
+  --ds-sidebar-collapsed-width: 56px;
+  --ds-sidebar-item-height: 36px;
+  --ds-sidebar-item-radius: var(--ds-radius-md);
+  --ds-sidebar-item-padding-x: var(--ds-space-3);
+  --ds-sidebar-nav-padding: var(--ds-space-3) var(--ds-space-2);
+  --ds-navbar-height: 48px;
+  --ds-navbar-height-compact: 40px;
+  --ds-drawer-width: 280px;
+
+  --ds-chart-height-sm: 12rem;
+  --ds-chart-height-md: 16rem;
+  --ds-chart-height-lg: 20rem;
+
+  --ds-control-height-sm: 32px;
+  --ds-control-height-md: 40px;
+  --ds-control-height-lg: 48px;
+  --ds-dropdown-max-height: 256px;
+  --ds-tab-rail-width: 180px;
+  --ds-icon-size-sm: 14px;
+  --ds-icon-size-md: 16px;
+  --ds-gradient: none;
+
+  /* ── L1: Glass Roots (defaults = off for non-glass presets) ──── */
+
+  --ds-glass-blur: 0px;
+  --ds-glass-tint: 1;
+  --ds-glass-saturate: 100%;
+  --ds-glass-border-alpha: 0;
+
+  /* ── L2: Derived Colour Scales ──────────────────────────────────── */
+
+  /* Primary (chroma scaled by --ds-sat-primary) */
+  --ds-primary-50: oklch(0.97 calc(0.025 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-100: oklch(0.93 calc(0.050 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-200: oklch(0.87 calc(0.100 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-300: oklch(0.77 calc(0.150 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-400: oklch(0.66 calc(0.180 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-500: oklch(0.55 calc(0.200 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-600: oklch(0.47 calc(0.185 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-700: oklch(0.40 calc(0.165 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-800: oklch(0.33 calc(0.135 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-900: oklch(0.25 calc(0.100 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-primary-950: oklch(0.17 calc(0.060 * var(--ds-sat-primary)) var(--ds-hue-primary));
+
+  /* Neutral (low chroma, tinted by hue, scaled by --ds-sat-neutral) */
+  --ds-neutral-50: oklch(0.97 calc(0.007 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-100: oklch(0.94 calc(0.009 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-200: oklch(0.90 calc(0.010 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-300: oklch(0.84 calc(0.010 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-400: oklch(0.71 calc(0.009 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-500: oklch(0.55 calc(0.007 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-600: oklch(0.45 calc(0.006 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-700: oklch(0.37 calc(0.005 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-800: oklch(0.27 calc(0.004 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-900: oklch(0.20 calc(0.003 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-neutral-950: oklch(0.13 calc(0.002 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+
+  /* Destructive */
+  --ds-destructive-50: oklch(0.97 0.015 var(--ds-hue-destructive));
+  --ds-destructive-100: oklch(0.93 0.040 var(--ds-hue-destructive));
+  --ds-destructive-400: oklch(0.66 0.200 var(--ds-hue-destructive));
+  --ds-destructive-500: oklch(0.55 0.220 var(--ds-hue-destructive));
+  --ds-destructive-600: oklch(0.47 0.200 var(--ds-hue-destructive));
+  --ds-destructive-950: oklch(0.15 0.050 var(--ds-hue-destructive));
+
+  /* Success */
+  --ds-success-50: oklch(0.97 0.020 var(--ds-hue-success));
+  --ds-success-100: oklch(0.93 0.045 var(--ds-hue-success));
+  --ds-success-400: oklch(0.66 0.170 var(--ds-hue-success));
+  --ds-success-500: oklch(0.52 0.160 var(--ds-hue-success));
+  --ds-success-600: oklch(0.45 0.145 var(--ds-hue-success));
+  --ds-success-950: oklch(0.15 0.040 var(--ds-hue-success));
+
+  /* Warning (higher lightness — amber/yellow needs it for perception) */
+  --ds-warning-50: oklch(0.97 0.020 var(--ds-hue-warning));
+  --ds-warning-100: oklch(0.93 0.060 var(--ds-hue-warning));
+  --ds-warning-400: oklch(0.78 0.155 var(--ds-hue-warning));
+  --ds-warning-500: oklch(0.75 0.160 var(--ds-hue-warning));
+  --ds-warning-600: oklch(0.65 0.145 var(--ds-hue-warning));
+  --ds-warning-950: oklch(0.20 0.040 var(--ds-hue-warning));
+
+  /* Info (fixed blue hue 230 — universally recognised as informational) */
+  --ds-info-50: oklch(0.97 0.020 230);
+  --ds-info-400: oklch(0.66 0.170 230);
+  --ds-info-500: oklch(0.52 0.160 230);
+  --ds-info-950: oklch(0.15 0.040 230);
+
+  /* ── L2: Derived Shape Scales ───────────────────────────────────── */
+
+  --ds-radius-none: 0px;
+  --ds-radius-sm: calc(var(--ds-radius-base) * 0.5);
+  --ds-radius-md: var(--ds-radius-base);
+  --ds-radius-lg: calc(var(--ds-radius-base) * 1.5);
+  --ds-radius-xl: calc(var(--ds-radius-base) * 2);
+  --ds-radius-full: 9999px;
+
+  --ds-border-width: var(--ds-border-base);
+  --ds-border-width-thick: calc(var(--ds-border-base) * 2);
+  --ds-border-width-thicker: calc(var(--ds-border-base) * 2.5);
+  --ds-divider-width: var(--ds-border-width);
+
+  /* ── L2: Derived Type Scale ─────────────────────────────────────── */
+
+  --ds-font-size-2xs: calc(var(--ds-text-base) * 0.714);
+  --ds-font-size-xs: calc(var(--ds-text-base) * 0.786);
+  --ds-font-size-sm: calc(var(--ds-text-base) * 0.929);
+  --ds-font-size-body: var(--ds-text-base);
+  --ds-font-size-lg: calc(var(--ds-text-base) * 1.286);
+  --ds-font-size-xl: calc(var(--ds-text-base) * 1.571);
+  --ds-font-size-2xl: calc(var(--ds-text-base) * 2);
+  --ds-font-size-3xl: calc(var(--ds-text-base) * 2.571);
+  --ds-line-height-body: 1.5;
+  --ds-line-height-tight: 1.25;
+
+  /* ── L2: Derived Opacity Scale ───────────────────────────────────── */
+
+  --ds-opacity-disabled: 0.5;
+
+  /* ── L2: Derived Spacing Scale ──────────────────────────────────── */
+
+  --ds-space-effective: calc(var(--ds-space-unit) * var(--ds-density));
+  --ds-space-0\.5: calc(var(--ds-space-effective) * 0.5);
+  --ds-space-1: var(--ds-space-effective);
+  --ds-space-1\.5: calc(var(--ds-space-effective) * 1.5);
+  --ds-space-2: calc(var(--ds-space-effective) * 2);
+  --ds-space-2\.5: calc(var(--ds-space-effective) * 2.5);
+  --ds-space-3: calc(var(--ds-space-effective) * 3);
+  --ds-space-4: calc(var(--ds-space-effective) * 4);
+  --ds-space-5: calc(var(--ds-space-effective) * 5);
+  --ds-space-6: calc(var(--ds-space-effective) * 6);
+  --ds-space-8: calc(var(--ds-space-effective) * 8);
+  --ds-space-10: calc(var(--ds-space-effective) * 10);
+  --ds-space-12: calc(var(--ds-space-effective) * 12);
+
+  /* ── L1: Density & Breakpoints ─────────────────────────────────── */
+
+  --ds-density: 1;
+
+  --ds-bp-sm: 640px;
+  --ds-bp-md: 768px;
+  --ds-bp-lg: 1024px;
+  --ds-bp-xl: 1280px;
+  --ds-touch-target-min: 44px;
+
+  /* ── L1: Z-Index Scale ─────────────────────────────────────────── */
+
+  --ds-z-dropdown: 100;
+  --ds-z-sticky: 200;
+  --ds-z-overlay: 300;
+  --ds-z-modal: 400;
+  --ds-z-tooltip: 500;
+  --ds-z-toast: 600;
+
+  /* ── L2: Derived Shadow Scale ───────────────────────────────────── */
+
+  --ds-shadow-sm:
+    calc(var(--ds-shadow-offset-x) * 0.5) calc(var(--ds-shadow-offset-y) * 0.5) var(--ds-shadow-blur) 0 oklch(0% 0 0 / var(--ds-shadow-alpha));
+
+  --ds-shadow-md:
+    var(--ds-shadow-offset-x) var(--ds-shadow-offset-y) calc(var(--ds-shadow-blur) * 1.5) 0 oklch(0% 0 0 / var(--ds-shadow-alpha));
+
+  --ds-shadow-lg:
+    calc(var(--ds-shadow-offset-x) * 2) calc(var(--ds-shadow-offset-y) * 2) calc(var(--ds-shadow-blur) * 2.5) 0 oklch(0% 0 0 / var(--ds-shadow-alpha));
+
+  --ds-shadow-xl:
+    calc(var(--ds-shadow-offset-x) * 3) calc(var(--ds-shadow-offset-y) * 3) calc(var(--ds-shadow-blur) * 3.5) 0 oklch(0% 0 0 / var(--ds-shadow-alpha));
+
+  --ds-shadow-card:
+    calc(var(--ds-shadow-offset-x) * 1.5) calc(var(--ds-shadow-offset-y) * 1.5) calc(var(--ds-shadow-blur) * 2) 0 oklch(0% 0 0 / var(--ds-shadow-alpha));
+
+  --ds-shadow-button:
+    calc(var(--ds-shadow-offset-x) * 0.5) calc(var(--ds-shadow-offset-y) * 0.5) var(--ds-shadow-blur) 0 oklch(0% 0 0 / var(--ds-shadow-alpha));
+
+  --ds-shadow-button-pressed: var(--ds-shadow-button);
+
+  --ds-shadow-dropdown:
+    var(--ds-shadow-offset-x) var(--ds-shadow-offset-y) calc(var(--ds-shadow-blur) * 2) 0 oklch(0% 0 0 / var(--ds-shadow-alpha));
+
+  --ds-shadow-modal:
+    calc(var(--ds-shadow-offset-x) * 2) calc(var(--ds-shadow-offset-y) * 2) calc(var(--ds-shadow-blur) * 3.5) 0 oklch(0% 0 0 / var(--ds-shadow-alpha));
+
+  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
+
+  /* ── L2: Derived Glass Tokens ────────────────────────────────────
+     When glass roots are at defaults (blur:0, tint:1, saturate:100%),
+     these resolve to solid white / no-op filter / transparent border.
+     Glass presets override the L1 roots to activate the effect. ─── */
+
+  --ds-glass-bg: oklch(1 0 0 / var(--ds-glass-tint));
+  --ds-glass-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
+  --ds-glass-border: oklch(1 0 0 / var(--ds-glass-border-alpha));
+  --ds-glass-inset: inset 0 1px 0 0 oklch(1 0 0 / calc(var(--ds-glass-border-alpha) * 1.6));
+
+  /* ── L3: Semantic Tokens (Light Mode) ───────────────────────────── */
+
+  --ds-bg-canvas: var(--ds-neutral-50);
+  --ds-bg-surface: oklch(1 0 0);
+  --ds-bg-surface-elevated: oklch(1 0 0);
+  --ds-bg-muted: var(--ds-neutral-100);
+  --ds-bg-emphasis: var(--ds-neutral-200);
+
+  --ds-text-primary: var(--ds-neutral-950);
+  --ds-text-secondary: var(--ds-neutral-600);
+  --ds-text-muted: var(--ds-neutral-400);
+  --ds-text-on-primary: oklch(1 0 0);
+
+  --ds-border-default: var(--ds-neutral-300);
+  --ds-border-subtle: var(--ds-neutral-200);
+  --ds-border-strong: var(--ds-neutral-500);
+  --ds-border-focus: var(--ds-primary-500);
+
+  --ds-accent-primary: var(--ds-primary-500);
+  --ds-accent-primary-hover: var(--ds-primary-600);
+  --ds-accent-primary-active: var(--ds-primary-700);
+  --ds-accent-subtle: color-mix(in oklch, var(--ds-accent-primary) 10%, transparent);
+
+  --ds-status-success: var(--ds-success-500);
+  --ds-status-success-bg: var(--ds-success-50);
+  --ds-status-warning: var(--ds-warning-500);
+  --ds-status-warning-bg: var(--ds-warning-50);
+  --ds-status-error: var(--ds-destructive-500);
+  --ds-status-error-bg: var(--ds-destructive-50);
+  --ds-status-info: var(--ds-info-500);
+  --ds-status-info-bg: var(--ds-info-50);
+
+  --ds-sidebar-bg: var(--ds-neutral-100);
+  --ds-sidebar-border: var(--ds-neutral-200);
+  --ds-sidebar-item-hover: var(--ds-neutral-200);
+  --ds-sidebar-item-active: var(--ds-bg-surface);
+  --ds-sidebar-text: var(--ds-text-primary);
+  --ds-sidebar-text-secondary: var(--ds-text-secondary);
+  --ds-sidebar-text-muted: var(--ds-text-muted);
+  --ds-sidebar-accent: var(--ds-accent-primary);
+  --ds-sidebar-accent-subtle: color-mix(in oklch, var(--ds-sidebar-accent) 10%, transparent);
+
+  /* Tab strip — presets can override for stronger contrast (e.g. Modern Dark) */
+  --ds-tab-hover-bg: var(--ds-bg-muted);
+  --ds-tab-active-bg: var(--ds-bg-surface);
+
+  --ds-input-bg: oklch(1 0 0);
+  --ds-input-border: var(--ds-neutral-300);
+  --ds-input-focus-ring: var(--ds-primary-500);
+  --ds-input-shadow: none;
+
+  --ds-check-bg: var(--ds-accent-primary);
+  --ds-check-fg: var(--ds-text-on-primary);
+  --ds-check-border: var(--ds-accent-primary);
+}
+
+/* ── Dark Mode Semantic Overrides ─────────────────────────────────── */
+/* Layered surface hierarchy: sidebar(darkest) < canvas < surface < elevated.
+   This gives cards/panels visible lift and keeps the sidebar anchored. */
+
+[data-mode="dark"] {
+  --ds-glass-inset: inset 0 1px 0 0 oklch(1 0 0 / calc(var(--ds-glass-border-alpha) * 0.5));
+
+  /* Surfaces — canvas is NOT the darkest; sidebar sinks below it */
+  --ds-bg-canvas: var(--ds-neutral-900);
+  --ds-bg-surface: var(--ds-neutral-800);
+  --ds-bg-surface-elevated: var(--ds-neutral-700);
+  --ds-bg-muted: var(--ds-neutral-700);
+  --ds-bg-emphasis: var(--ds-neutral-600);
+
+  /* Text — muted at 400 instead of 500 for legibility on dark backgrounds */
+  --ds-text-primary: var(--ds-neutral-50);
+  --ds-text-secondary: var(--ds-neutral-300);
+  --ds-text-muted: var(--ds-neutral-400);
+  --ds-text-on-primary: oklch(1 0 0);
+
+  /* Borders — bumped one step lighter for visibility against 800/900 surfaces */
+  --ds-border-default: var(--ds-neutral-600);
+  --ds-border-subtle: var(--ds-neutral-700);
+  --ds-border-strong: var(--ds-neutral-400);
+  --ds-border-focus: var(--ds-primary-400);
+
+  /* Status — lighter foreground tones, deeper backgrounds */
+  --ds-status-success: var(--ds-success-400);
+  --ds-status-success-bg: var(--ds-success-950);
+  --ds-status-warning: var(--ds-warning-400);
+  --ds-status-warning-bg: var(--ds-warning-950);
+  --ds-status-error: var(--ds-destructive-400);
+  --ds-status-error-bg: var(--ds-destructive-950);
+  --ds-status-info: var(--ds-info-400);
+  --ds-status-info-bg: var(--ds-info-950);
+
+  /* Sidebar — sits at canvas level, border provides separation */
+  --ds-sidebar-bg: var(--ds-neutral-800);
+  --ds-sidebar-border: var(--ds-neutral-700);
+  --ds-sidebar-item-hover: var(--ds-neutral-900);
+  --ds-sidebar-item-active: var(--ds-neutral-700);
+  --ds-sidebar-text: var(--ds-text-primary);
+  --ds-sidebar-text-secondary: var(--ds-text-secondary);
+  --ds-sidebar-text-muted: var(--ds-text-muted);
+  --ds-sidebar-accent: var(--ds-accent-primary);
+
+  --ds-tab-hover-bg: var(--ds-bg-muted);
+  --ds-tab-active-bg: var(--ds-bg-surface);
+
+  /* Inputs */
+  --ds-input-bg: var(--ds-neutral-800);
+  --ds-input-border: var(--ds-neutral-600);
+  --ds-input-focus-ring: var(--ds-primary-400);
+
+  /* Shadows — amplified alpha so they're visible on dark surfaces */
+  --ds-shadow-sm:
+    calc(var(--ds-shadow-offset-x) * 0.5) calc(var(--ds-shadow-offset-y) * 0.5) var(--ds-shadow-blur) 0 oklch(0% 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * 3), 1));
+
+  --ds-shadow-md:
+    var(--ds-shadow-offset-x) var(--ds-shadow-offset-y) calc(var(--ds-shadow-blur) * 1.5) 0 oklch(0% 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * 3), 1));
+
+  --ds-shadow-lg:
+    calc(var(--ds-shadow-offset-x) * 2) calc(var(--ds-shadow-offset-y) * 2) calc(var(--ds-shadow-blur) * 2.5) 0 oklch(0% 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * 3), 1));
+
+  --ds-shadow-xl:
+    calc(var(--ds-shadow-offset-x) * 3) calc(var(--ds-shadow-offset-y) * 3) calc(var(--ds-shadow-blur) * 3.5) 0 oklch(0% 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * 3), 1));
+
+  --ds-shadow-card:
+    calc(var(--ds-shadow-offset-x) * 1.5) calc(var(--ds-shadow-offset-y) * 1.5) calc(var(--ds-shadow-blur) * 2) 0 oklch(0% 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * 3), 1));
+
+  --ds-shadow-button:
+    calc(var(--ds-shadow-offset-x) * 0.5) calc(var(--ds-shadow-offset-y) * 0.5) var(--ds-shadow-blur) 0 oklch(0% 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * 3), 1));
+
+  --ds-shadow-dropdown:
+    var(--ds-shadow-offset-x) var(--ds-shadow-offset-y) calc(var(--ds-shadow-blur) * 2) 0 oklch(0% 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * 3), 1));
+
+  --ds-shadow-modal:
+    calc(var(--ds-shadow-offset-x) * 2) calc(var(--ds-shadow-offset-y) * 2) calc(var(--ds-shadow-blur) * 3.5) 0 oklch(0% 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * 3), 1));
+
+  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-400);
+}
+
+/* ── Glass Fallback ──────────────────────────────────────────────── */
+
+@supports not (backdrop-filter: blur(1px)) {
+  :root {
+    --ds-glass-tint: 0.85;
+    --ds-glass-blur: 0px;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --ds-glass-tint: 0.90;
+    --ds-glass-blur: 2px;
+    --ds-glass-border-alpha: 0.3;
+  }
+}
+
+/* ── Reduced Motion ─────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ds-transition-speed: 0ms;
+  }
+}
+
+/* ── Shadow Mode: Neumorphic ────────────────────────────────────
+   Dual opposing shadows: dark bottom-right + bright top-left.
+   Responsive to offset/blur/alpha sliders via root variables.
+   Shadow colour is configurable via --ds-nm-dark-* properties,
+   allowing themes to use tinted greys (neumorphism), coloured
+   shadows (claymorphism), or chassis greys (industrial).
+   Presets override these via lightOverrides (inline styles). ── */
+
+[data-shadow="neumorphic"] {
+  /* Configurable shadow colour — defaults to pure black / pure white.
+     Presets override for tinted material-matching shadows. */
+  --ds-nm-dark-l: 0;
+  --ds-nm-dark-c: 0;
+  --ds-nm-dark-h: 0;
+  --ds-nm-light-mult: 0.7;
+
+  --ds-input-shadow:
+    inset calc(var(--ds-shadow-offset-x) * 0.5) calc(var(--ds-shadow-offset-y) * 0.5) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha)),
+    inset calc(var(--ds-shadow-offset-x) * -0.5) calc(var(--ds-shadow-offset-y) * -0.5) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(1 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * var(--ds-nm-light-mult)), 1));
+
+  --ds-shadow-sm:
+    calc(var(--ds-shadow-offset-x) * 0.33) calc(var(--ds-shadow-offset-y) * 0.33) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha)),
+    calc(var(--ds-shadow-offset-x) * -0.33) calc(var(--ds-shadow-offset-y) * -0.33) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(1 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * var(--ds-nm-light-mult)), 1));
+
+  --ds-shadow-md:
+    var(--ds-shadow-offset-x) var(--ds-shadow-offset-y) var(--ds-shadow-blur) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha)),
+    calc(var(--ds-shadow-offset-x) * -1) calc(var(--ds-shadow-offset-y) * -1) var(--ds-shadow-blur) 0 oklch(1 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * var(--ds-nm-light-mult)), 1));
+
+  --ds-shadow-lg:
+    calc(var(--ds-shadow-offset-x) * 1.5) calc(var(--ds-shadow-offset-y) * 1.5) calc(var(--ds-shadow-blur) * 1.5) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha)),
+    calc(var(--ds-shadow-offset-x) * -1.5) calc(var(--ds-shadow-offset-y) * -1.5) calc(var(--ds-shadow-blur) * 1.5) 0 oklch(1 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * var(--ds-nm-light-mult)), 1));
+
+  --ds-shadow-xl:
+    calc(var(--ds-shadow-offset-x) * 2) calc(var(--ds-shadow-offset-y) * 2) calc(var(--ds-shadow-blur) * 2) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha)),
+    calc(var(--ds-shadow-offset-x) * -2) calc(var(--ds-shadow-offset-y) * -2) calc(var(--ds-shadow-blur) * 2) 0 oklch(1 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * var(--ds-nm-light-mult)), 1));
+
+  --ds-shadow-card:
+    calc(var(--ds-shadow-offset-x) * 1.2) calc(var(--ds-shadow-offset-y) * 1.2) calc(var(--ds-shadow-blur) * 1.2) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha)),
+    calc(var(--ds-shadow-offset-x) * -1.2) calc(var(--ds-shadow-offset-y) * -1.2) calc(var(--ds-shadow-blur) * 1.2) 0 oklch(1 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * var(--ds-nm-light-mult)), 1));
+
+  --ds-shadow-button:
+    calc(var(--ds-shadow-offset-x) * 0.33) calc(var(--ds-shadow-offset-y) * 0.33) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha)),
+    calc(var(--ds-shadow-offset-x) * -0.33) calc(var(--ds-shadow-offset-y) * -0.33) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(1 0 0 / clamp(0, calc(var(--ds-shadow-alpha) * var(--ds-nm-light-mult)), 1));
+
+  --ds-shadow-dropdown:
+    var(--ds-shadow-offset-x) var(--ds-shadow-offset-y) calc(var(--ds-shadow-blur) * 1.5) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha));
+
+  --ds-shadow-modal:
+    calc(var(--ds-shadow-offset-x) * 2) calc(var(--ds-shadow-offset-y) * 2) calc(var(--ds-shadow-blur) * 2.5) 0 oklch(var(--ds-nm-dark-l) var(--ds-nm-dark-c) var(--ds-nm-dark-h) / var(--ds-shadow-alpha));
+}
+
+[data-shadow="neumorphic"][data-mode="dark"] {
+  --ds-input-shadow:
+    inset calc(var(--ds-shadow-offset-x) * 0.5) calc(var(--ds-shadow-offset-y) * 0.5) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2)),
+    inset calc(var(--ds-shadow-offset-x) * -0.5) calc(var(--ds-shadow-offset-y) * -0.5) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(1 0 0 / calc(var(--ds-shadow-alpha) * 0.12));
+
+  --ds-shadow-sm:
+    calc(var(--ds-shadow-offset-x) * 0.33) calc(var(--ds-shadow-offset-y) * 0.33) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2)),
+    calc(var(--ds-shadow-offset-x) * -0.33) calc(var(--ds-shadow-offset-y) * -0.33) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(1 0 0 / calc(var(--ds-shadow-alpha) * 0.12));
+
+  --ds-shadow-md:
+    var(--ds-shadow-offset-x) var(--ds-shadow-offset-y) var(--ds-shadow-blur) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2)),
+    calc(var(--ds-shadow-offset-x) * -1) calc(var(--ds-shadow-offset-y) * -1) var(--ds-shadow-blur) 0 oklch(1 0 0 / calc(var(--ds-shadow-alpha) * 0.12));
+
+  --ds-shadow-lg:
+    calc(var(--ds-shadow-offset-x) * 1.5) calc(var(--ds-shadow-offset-y) * 1.5) calc(var(--ds-shadow-blur) * 1.5) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2)),
+    calc(var(--ds-shadow-offset-x) * -1.5) calc(var(--ds-shadow-offset-y) * -1.5) calc(var(--ds-shadow-blur) * 1.5) 0 oklch(1 0 0 / calc(var(--ds-shadow-alpha) * 0.12));
+
+  --ds-shadow-xl:
+    calc(var(--ds-shadow-offset-x) * 2) calc(var(--ds-shadow-offset-y) * 2) calc(var(--ds-shadow-blur) * 2) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2)),
+    calc(var(--ds-shadow-offset-x) * -2) calc(var(--ds-shadow-offset-y) * -2) calc(var(--ds-shadow-blur) * 2) 0 oklch(1 0 0 / calc(var(--ds-shadow-alpha) * 0.12));
+
+  --ds-shadow-card:
+    calc(var(--ds-shadow-offset-x) * 1.2) calc(var(--ds-shadow-offset-y) * 1.2) calc(var(--ds-shadow-blur) * 1.2) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2)),
+    calc(var(--ds-shadow-offset-x) * -1.2) calc(var(--ds-shadow-offset-y) * -1.2) calc(var(--ds-shadow-blur) * 1.2) 0 oklch(1 0 0 / calc(var(--ds-shadow-alpha) * 0.12));
+
+  --ds-shadow-button:
+    calc(var(--ds-shadow-offset-x) * 0.33) calc(var(--ds-shadow-offset-y) * 0.33) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2)),
+    calc(var(--ds-shadow-offset-x) * -0.33) calc(var(--ds-shadow-offset-y) * -0.33) calc(var(--ds-shadow-blur) * 0.5) 0 oklch(1 0 0 / calc(var(--ds-shadow-alpha) * 0.12));
+
+  --ds-shadow-dropdown:
+    var(--ds-shadow-offset-x) var(--ds-shadow-offset-y) calc(var(--ds-shadow-blur) * 1.5) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2));
+
+  --ds-shadow-modal:
+    calc(var(--ds-shadow-offset-x) * 2) calc(var(--ds-shadow-offset-y) * 2) calc(var(--ds-shadow-blur) * 2.5) 0 oklch(0 0 0 / calc(var(--ds-shadow-alpha) * 2));
+}
+
+/* ── Shadow Mode: Glow ──────────────────────────────────────────
+   Emissive bloom using the primary hue. No directional offset.
+   Uses --ds-hue-primary to construct glow colour so it stays
+   reactive to hue slider changes. ──────────────────────────────── */
+
+[data-shadow="glow"] {
+  --ds-shadow-sm:
+    0 0 calc(var(--ds-shadow-blur) * 0.5) 0 oklch(0.6 0.15 var(--ds-hue-primary) / var(--ds-shadow-alpha));
+
+  --ds-shadow-md:
+    0 0 var(--ds-shadow-blur) 0 oklch(0.6 0.15 var(--ds-hue-primary) / var(--ds-shadow-alpha)),
+    0 0 calc(var(--ds-shadow-blur) * 2) 0 oklch(0.6 0.15 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.4));
+
+  --ds-shadow-lg:
+    0 0 calc(var(--ds-shadow-blur) * 1.5) 0 oklch(0.6 0.15 var(--ds-hue-primary) / var(--ds-shadow-alpha)),
+    0 0 calc(var(--ds-shadow-blur) * 3) 0 oklch(0.6 0.15 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.3));
+
+  --ds-shadow-xl:
+    0 0 calc(var(--ds-shadow-blur) * 2) 0 oklch(0.6 0.15 var(--ds-hue-primary) / var(--ds-shadow-alpha)),
+    0 0 calc(var(--ds-shadow-blur) * 4) 0 oklch(0.6 0.15 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.25));
+
+  --ds-shadow-card:
+    0 0 calc(var(--ds-shadow-blur) * 1.2) 0 oklch(0.6 0.15 var(--ds-hue-primary) / var(--ds-shadow-alpha)),
+    0 0 calc(var(--ds-shadow-blur) * 2.5) 0 oklch(0.6 0.15 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.35));
+
+  --ds-shadow-button:
+    0 0 calc(var(--ds-shadow-blur) * 0.5) 0 oklch(0.6 0.15 var(--ds-hue-primary) / var(--ds-shadow-alpha));
+
+  --ds-shadow-dropdown:
+    0 0 var(--ds-shadow-blur) 0 oklch(0.6 0.15 var(--ds-hue-primary) / var(--ds-shadow-alpha)),
+    0 0 calc(var(--ds-shadow-blur) * 2.5) 0 oklch(0.6 0.15 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.3));
+
+  --ds-shadow-modal:
+    0 0 calc(var(--ds-shadow-blur) * 2) 0 oklch(0.6 0.15 var(--ds-hue-primary) / var(--ds-shadow-alpha)),
+    0 0 calc(var(--ds-shadow-blur) * 4) 0 oklch(0.6 0.15 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.25));
+}
+
+[data-shadow="glow"][data-mode="dark"] {
+  --ds-shadow-sm:
+    0 0 calc(var(--ds-shadow-blur) * 0.75) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 1.5));
+
+  --ds-shadow-md:
+    0 0 calc(var(--ds-shadow-blur) * 1.2) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 1.5)),
+    0 0 calc(var(--ds-shadow-blur) * 2.5) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.6));
+
+  --ds-shadow-lg:
+    0 0 calc(var(--ds-shadow-blur) * 2) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 1.5)),
+    0 0 calc(var(--ds-shadow-blur) * 4) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.5));
+
+  --ds-shadow-xl:
+    0 0 calc(var(--ds-shadow-blur) * 2.5) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 1.5)),
+    0 0 calc(var(--ds-shadow-blur) * 5) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.4));
+
+  --ds-shadow-card:
+    0 0 calc(var(--ds-shadow-blur) * 1.5) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 1.5)),
+    0 0 calc(var(--ds-shadow-blur) * 3) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.5));
+
+  --ds-shadow-button:
+    0 0 calc(var(--ds-shadow-blur) * 0.75) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 1.5));
+
+  --ds-shadow-dropdown:
+    0 0 calc(var(--ds-shadow-blur) * 1.5) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 1.5)),
+    0 0 calc(var(--ds-shadow-blur) * 3) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.5));
+
+  --ds-shadow-modal:
+    0 0 calc(var(--ds-shadow-blur) * 2.5) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 1.5)),
+    0 0 calc(var(--ds-shadow-blur) * 5) 0 oklch(0.65 0.18 var(--ds-hue-primary) / calc(var(--ds-shadow-alpha) * 0.4));
+}
+
+/* ── Responsive Density Overrides ──────────────────────────────
+   Compact on small viewports, spacious on large.
+   Custom --ds-density from ThemeContext/CustomPanel overrides these. ── */
+
+@media (max-width: 640px) {
+  :root:not([style*="--ds-density"]) {
+    --ds-density: 0.875;
+  }
+}
+
+@media (min-width: 1280px) {
+  :root:not([style*="--ds-density"]) {
+    --ds-density: 1;
+  }
+}
+
+/* ── Sketch / Hand-Drawn Mode ───────────────────────────────────
+   Activated via data-sketch attribute on <html>.
+   Applies wobbly border-radius to surfaces. ─────────────────── */
+
+[data-sketch] {
+  --ds-sketch-wobble-lg: 255px 15px 225px 15px / 15px 225px 15px 255px;
+  --ds-sketch-wobble-md: 185px 12px 165px 12px / 12px 165px 12px 185px;
+  --ds-sketch-wobble-sm: 95px 8px 85px 8px / 8px 85px 8px 95px;
+}
+
+/* Cards, dialogs, alerts, dropdowns — large surfaces */
+[data-sketch] [class*="rounded-[var(--ds-radius-md)"] {
+  border-radius: var(--ds-sketch-wobble-lg);
+}
+
+[data-sketch] [class*="rounded-[var(--ds-radius-xl)"] {
+  border-radius: var(--ds-sketch-wobble-lg);
+}
+
+[data-sketch] [class*="rounded-[var(--ds-radius-lg)"] {
+  border-radius: var(--ds-sketch-wobble-lg);
+}
+
+/* Buttons, inputs, badges — small surfaces */
+[data-sketch] [class*="rounded-[var(--ds-radius-sm)"] {
+  border-radius: var(--ds-sketch-wobble-sm);
+}

package/dist/tailwind.css

@@ -0,0 +1,46 @@
+/* Gridsmith — Tailwind v4 theme bindings
+   Maps --ds-* design tokens to Tailwind utilities.
+   Import AFTER roots.css and your tokens file. */
+
+@theme {
+  --font-sans: var(--ds-font-sans);
+  --font-mono: var(--ds-font-mono);
+  --font-display: var(--ds-font-display);
+  --default-transition-duration: var(--ds-transition-speed);
+  --default-transition-timing-function: var(--ds-transition-ease);
+
+  --spacing-ds-0_5: var(--ds-space-0\.5);
+  --spacing-ds-1: var(--ds-space-1);
+  --spacing-ds-1_5: var(--ds-space-1\.5);
+  --spacing-ds-2: var(--ds-space-2);
+  --spacing-ds-2_5: var(--ds-space-2\.5);
+  --spacing-ds-3: var(--ds-space-3);
+  --spacing-ds-4: var(--ds-space-4);
+  --spacing-ds-5: var(--ds-space-5);
+  --spacing-ds-6: var(--ds-space-6);
+  --spacing-ds-8: var(--ds-space-8);
+  --spacing-ds-10: var(--ds-space-10);
+  --spacing-ds-12: var(--ds-space-12);
+
+  --font-size-xs: var(--ds-font-size-xs);
+  --font-size-sm: var(--ds-font-size-sm);
+  --font-size-base: var(--ds-font-size-body);
+  --font-size-lg: var(--ds-font-size-lg);
+  --font-size-xl: var(--ds-font-size-xl);
+  --font-size-2xl: var(--ds-font-size-2xl);
+  --font-size-3xl: var(--ds-font-size-3xl);
+
+  --font-weight-normal: var(--ds-weight-base);
+  --font-weight-medium: var(--ds-weight-emphasis);
+  --font-weight-semibold: var(--ds-weight-strong);
+  --font-weight-bold: var(--ds-weight-heavy);
+
+  --opacity-disabled: var(--ds-opacity-disabled);
+
+  --color-accent-subtle: var(--ds-accent-subtle);
+  --color-sidebar-accent-subtle: var(--ds-sidebar-accent-subtle);
+}
+
+@utility text-2xs {
+  font-size: var(--ds-font-size-2xs);
+}