@mkbabb/glass-ui 0.3.0 → 2.0.0

package/dist/styles/theme.css

@@ -0,0 +1,358 @@
+/*
+ * theme.css — Tailwind CSS v4 @theme block
+ *
+ * Maps every CSS custom property from tokens.css + typography.css to a
+ * Tailwind utility-generating token. References vars (not literals) so
+ * consumers can override at :root / .dark without rebuilding Tailwind.
+ */
+
+@theme {
+    /* ═══════════════════════════════════════════════
+       Typography — size scale → text-* utilities
+       ═══════════════════════════════════════════════ */
+    --text-admin-label: var(--type-admin-label);
+    --text-micro:       var(--type-micro);
+    --text-caption:     var(--type-caption);
+    --text-small:       var(--type-small);
+    --text-body:        var(--type-body);
+    --text-prose:       var(--type-prose);
+    --text-subheading:  var(--type-subheading);
+    --text-heading:     var(--type-heading);
+    --text-title:       var(--type-title);
+    --text-display:     var(--type-display-1);
+    --text-display-1:   var(--type-display-1);
+    --text-display-2:   var(--type-display-2);
+    --text-display-3:   var(--type-display-3);
+    --text-display-4:   var(--type-display-4);
+    --text-display-5:   var(--type-display-5);
+
+    /* Line heights → leading-* utilities */
+    --leading-micro:   var(--type-leading-micro);
+    --leading-caption: var(--type-leading-caption);
+    --leading-small:   var(--type-leading-small);
+    --leading-body:    var(--type-leading-body);
+    --leading-prose:   var(--type-leading-prose);
+    --leading-heading: var(--type-leading-heading);
+    --leading-display: var(--type-leading-display);
+
+    /* Letter spacing → tracking-* utilities */
+    --tracking-tight:  var(--type-tracking-tight);
+    --tracking-snug:   var(--type-tracking-snug);
+    --tracking-normal: var(--type-tracking-normal);
+    --tracking-wide:   var(--type-tracking-wide);
+    --tracking-wider:  var(--type-tracking-wider);
+    --tracking-caps:   var(--type-tracking-caps);
+
+    /* ═══════════════════════════════════════════════
+       Font families → font-* utilities
+       ═══════════════════════════════════════════════ */
+    --font-display: var(--font-stack-display);
+    --font-serif:   var(--font-stack-serif);
+    --font-sans:    var(--font-stack-sans);
+    --font-mono:    var(--font-stack-mono);
+
+    /* ═══════════════════════════════════════════════
+       Colors — core
+       ═══════════════════════════════════════════════ */
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    --color-shadow: var(--shadow);
+
+    /* Semantic foregrounds — bg-{success,warning,info}-foreground +
+       text-{success,warning,info}-foreground. Companions to the existing
+       --color-{success,warning,info} bridges below. R5 vocab.γ gap row 4. */
+    --color-success-foreground: var(--success-foreground);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-info-foreground:    var(--info-foreground);
+
+    /* Muted-tinted rungs — bg-muted-soft / bg-muted-medium. */
+    --color-muted-soft:   var(--muted-soft);
+    --color-muted-medium: var(--muted-medium);
+
+    /* Foreground-tint rungs — bg-surface-tint-{4,6,8,10,12,15,18,22,25}. */
+    --color-surface-tint-4:  var(--surface-tint-4);
+    --color-surface-tint-6:  var(--surface-tint-6);
+    --color-surface-tint-8:  var(--surface-tint-8);
+    --color-surface-tint-10: var(--surface-tint-10);
+    --color-surface-tint-12: var(--surface-tint-12);
+    --color-surface-tint-15: var(--surface-tint-15);
+    --color-surface-tint-18: var(--surface-tint-18);
+    --color-surface-tint-22: var(--surface-tint-22);
+    --color-surface-tint-25: var(--surface-tint-25);
+    --color-surface-tint-35: var(--surface-tint-35);
+    --color-surface-tint-40: var(--surface-tint-40);
+    --color-surface-tint-70: var(--surface-tint-70);
+
+    /* Surface-tint tier aliases (V.W3.T10) — semantic names mapped to
+       the canonical numeric scale. Lets consumers compose
+       `bg-surface-tint-quiet|floating|modal` without picking a numeric
+       rung; the alias resolves to the rung that matches the surface
+       tier's canonical opacity. Quiet ≈ 6% (light backdrop tint),
+       floating ≈ 12% (panel-tier tint), modal ≈ 18% (heavy modal tint). */
+    --color-surface-tint-quiet:    var(--surface-tint-6);
+    --color-surface-tint-floating: var(--surface-tint-12);
+    --color-surface-tint-modal:    var(--surface-tint-18);
+
+    /* Overlay scrims — bg-overlay-scrim{,-strong,-subtle}. */
+    --color-overlay-scrim:        var(--overlay-scrim);
+    --color-overlay-scrim-strong: var(--overlay-scrim-strong);
+    --color-overlay-scrim-subtle: var(--overlay-scrim-subtle);
+
+    /* ═══════════════════════════════════════════════
+       Colors — section palette (13-stop)
+       ═══════════════════════════════════════════════ */
+    --color-section-0:  var(--section-color-0);
+    --color-section-1:  var(--section-color-1);
+    --color-section-2:  var(--section-color-2);
+    --color-section-3:  var(--section-color-3);
+    --color-section-4:  var(--section-color-4);
+    --color-section-5:  var(--section-color-5);
+    --color-section-6:  var(--section-color-6);
+    --color-section-7:  var(--section-color-7);
+    --color-section-8:  var(--section-color-8);
+    --color-section-9:  var(--section-color-9);
+    --color-section-10: var(--section-color-10);
+    --color-section-11: var(--section-color-11);
+    --color-section-12: var(--section-color-12);
+
+    --color-section-heading: var(--section-heading);
+    --color-accent-pink: var(--accent-pink);
+    --color-accent-red:  var(--accent-red);
+
+    /* ═══════════════════════════════════════════════
+       Colors — viz basis
+       ═══════════════════════════════════════════════ */
+    --color-viz-fourier:   var(--viz-fourier);
+    --color-viz-chebyshev: var(--viz-chebyshev);
+    --color-viz-legendre:  var(--viz-legendre);
+    --color-viz-amber:     var(--viz-amber);
+    --color-viz-green:     var(--viz-green);
+
+    /* ═══════════════════════════════════════════════
+       Colors — semantic UI accents
+       ═══════════════════════════════════════════════ */
+    --color-tier-featured: var(--tier-featured);
+    --color-tier-saved:    var(--tier-saved);
+    --color-like:          var(--like);
+    --color-success:       var(--success);
+    --color-warning:       var(--warning);
+    --color-info:          var(--info);
+    --color-delete:        var(--delete);
+
+    /* ═══════════════════════════════════════════════
+       Colors — gold + rainbow accents (kept for consumers)
+       ═══════════════════════════════════════════════ */
+    --color-gold: var(--gold);
+    --color-gold-light: var(--gold-light);
+    --color-gold-dark: var(--gold-dark);
+
+    --color-rainbow-red:    var(--rainbow-red);
+    --color-rainbow-orange: var(--rainbow-orange);
+    --color-rainbow-yellow: var(--rainbow-yellow);
+    --color-rainbow-green:  var(--rainbow-green);
+    --color-rainbow-blue:   var(--rainbow-blue);
+    --color-rainbow-indigo: var(--rainbow-indigo);
+    --color-rainbow-violet: var(--rainbow-violet);
+
+    /* ═══════════════════════════════════════════════
+       Z-index → z-* utilities
+       ═══════════════════════════════════════════════ */
+    --z-index-behind: var(--z-behind);
+    --z-index-background: var(--z-background);
+    --z-index-content: var(--z-content);
+    --z-index-controls: var(--z-controls);
+    --z-index-bar: var(--z-bar);
+    --z-index-header: var(--z-header);
+    --z-index-dock: var(--z-dock);
+    --z-index-panel: var(--z-panel);
+    --z-index-overlay: var(--z-overlay);
+    --z-index-hovercard: var(--z-hovercard);
+    --z-index-tooltip: var(--z-tooltip);
+    --z-index-popover: var(--z-popover);
+    --z-index-modal: var(--z-modal);
+    --z-index-fullscreen: var(--z-fullscreen);
+    --z-index-toast: var(--z-toast);
+    --z-index-toggle: var(--z-toggle);
+    --z-index-max: var(--z-max);
+
+    /* ═══════════════════════════════════════════════
+       Border radius → rounded-* utilities
+       ═══════════════════════════════════════════════ */
+    --radius: 0.625rem;
+    --radius-xs: 4px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: var(--radius);
+    --radius-xl: 12px;
+    --radius-2xl: 1rem;
+    --radius-pill: 9999px;
+
+    /* Semantic radius — point at primitives from tokens.css; no self-reference */
+    --radius-card:    var(--radius-2xl);
+    --radius-panel:   var(--radius-xl);
+    --radius-dialog:  var(--radius-2xl);
+    --radius-input:   var(--radius);
+    --radius-button:  var(--radius);
+    --radius-badge:   var(--radius-pill);
+    --radius-dock:    var(--radius-pill);
+    --radius-tooltip: var(--radius-lg);
+
+    /* ═══════════════════════════════════════════════
+       Sizing → h-*, min-w-*, and spacing utilities
+       ═══════════════════════════════════════════════ */
+    --height-chart-compact: var(--chart-height-compact);
+    --height-chart-default: var(--chart-height-default);
+    --height-chart-large:   var(--chart-height-large);
+    --min-width-input-sm:   var(--input-min-width-sm);
+    --spacing-chart-margin: var(--chart-margin);
+
+    /* Golden-ratio spacing — p-phi-5 / m-phi-6 etc. via Tailwind's spacing
+       utilities. φ² and φ³ rungs for hero/chassis padding ladder. */
+    --spacing-phi-5: var(--space-phi-5);
+    --spacing-phi-6: var(--space-phi-6);
+
+    /* V.W2 T13 — Icon-size ladder bridge → `size-icon-*`/`h-icon-*`/`w-icon-*`
+       utilities. Consumers can compose via `class="size-icon-2xl"` etc.
+       directly without the `size-[var(--icon-2xl)]` arbitrary-property form. */
+    --spacing-icon-xs:  var(--icon-xs);
+    --spacing-icon-sm:  var(--icon-sm);
+    --spacing-icon-md:  var(--icon-md);
+    --spacing-icon-lg:  var(--icon-lg);
+    --spacing-icon-xl:  var(--icon-xl);
+    --spacing-icon-2xl: var(--icon-2xl);
+    --spacing-icon-3xl: var(--icon-3xl);
+    --spacing-icon-hero: var(--icon-hero);
+
+    /* ═══════════════════════════════════════════════
+       Shadows → shadow-* utilities
+       ═══════════════════════════════════════════════ */
+    --shadow-cartoon:       var(--cartoon-shadow);
+    --shadow-cartoon-hover: var(--cartoon-shadow-hover);
+    --shadow-soft:          var(--soft-shadow);
+    --shadow-elevated:      var(--elevated-shadow);
+    --shadow-modal:         var(--modal-shadow);
+
+    --shadow-card:           var(--card-shadow);
+    --shadow-dock:           var(--dock-shadow);
+    --shadow-dock-collapsed: var(--dock-shadow-collapsed);
+
+    --shadow-glass-wash:     var(--glass-shadow-wash);
+    --shadow-glass-quiet:    var(--glass-shadow-quiet);
+    --shadow-glass-resting:  var(--glass-shadow-resting);
+    --shadow-glass-floating: var(--glass-shadow-floating);
+    --shadow-glass-overlay:  var(--glass-shadow-overlay);
+
+    --shadow-cartoon-sm: var(--cartoon-shadow-sm);
+    --shadow-cartoon-md: var(--cartoon-shadow-md);
+    --shadow-cartoon-lg: var(--cartoon-shadow-lg);
+
+    /* ═══════════════════════════════════════════════
+       Blur → blur-* and backdrop-blur-* utilities
+       ═══════════════════════════════════════════════ */
+    --blur-glass-wash:     var(--glass-blur-wash-radius);
+    --blur-glass-quiet:    var(--glass-blur-quiet-radius);
+    --blur-glass-resting:  var(--glass-blur-resting-radius);
+    --blur-glass-floating: var(--glass-blur-floating-radius);
+    --blur-glass-overlay:  var(--glass-blur-overlay-radius);
+    --blur-dock:           var(--glass-blur-dock-radius);
+
+    /* ═══════════════════════════════════════════════
+       Easing → ease-* utilities
+       ═══════════════════════════════════════════════ */
+    --ease-spring-smooth: var(--spring-smooth);
+    --ease-spring-snappy: var(--spring-snappy);
+    --ease-spring-bouncy: var(--spring-bouncy);
+    --ease-spring-gentle: var(--spring-gentle);
+
+    --ease-standard: var(--motion-ease-standard);
+    --ease-out: var(--motion-ease-out);
+    --ease-in: var(--motion-ease-in);
+    --ease-out-expo: var(--motion-ease-out-expo);
+    --ease-apple: var(--motion-ease-apple);
+    --ease-apple-spring: var(--motion-ease-apple-spring);
+    --ease-spring: var(--spring-snappy);
+    --ease-decelerate: var(--motion-ease-out);
+    --ease-accelerate: var(--motion-ease-in);
+
+    /* ═══════════════════════════════════════════════
+       Duration → duration-* utilities
+       ═══════════════════════════════════════════════ */
+    --transition-duration-instant: var(--duration-instant);
+    --transition-duration-fast: var(--duration-fast);
+    --transition-duration-normal: var(--duration-normal);
+    --transition-duration-slow: var(--duration-slow);
+    --transition-duration-panel: var(--duration-panel);
+    --transition-duration-xl: var(--duration-xl);
+    --transition-duration-xxl: var(--duration-xxl);
+    --transition-duration-sparkle: var(--duration-sparkle);
+
+    /* ═══════════════════════════════════════════════
+       Animation → animate-* utilities
+       ═══════════════════════════════════════════════ */
+    --animate-floating-panel-in: floating-panel-in var(--duration-fast) var(--ease-out);
+    --animate-tooltip-in: tooltip-in var(--duration-fast) var(--ease-out);
+    --animate-fade-in: fade-in var(--duration-normal) var(--spring-smooth);
+    --animate-scale-in: scale-in var(--duration-normal) var(--spring-smooth);
+    --animate-slide-up: slide-up var(--duration-normal) var(--spring-smooth);
+    --animate-dock-in: dock-in var(--duration-panel) var(--spring-snappy) both;
+    /* ── Shimmer family: documented duration offset ──────────────────────────
+       The shimmer ladder is intentionally non-paired-by-name:
+       - `--animate-shimmer` reads `--duration-shimmer-fast` (3s) — fast loop
+         tempo for the band-pass shimmer pattern (skeleton, marketing).
+       - `--animate-shimmer-sweep` and `--animate-gold-shimmer` both read the
+         unsuffixed `--duration-shimmer` (5s) — slower one-pass sweep for
+         brand-polish moments (Complete! gold-shimmer headline, hero lifts).
+       The fast/canonical split exists because the two shimmer modes (looping
+       band-pass vs one-pass sweep) want different tempos. The pre-V audit
+       (C-c §5.3) flagged this as a "naming inversion"; it is intentional —
+       documented here so the offset is searchable. The orphan
+       `--duration-shimmer-slow` (8s) was excised in V.W2 T5. */
+    --animate-shimmer: shimmer var(--duration-shimmer-fast) linear infinite;
+    --animate-shimmer-sweep: shimmer-sweep var(--duration-shimmer) ease-in-out infinite;
+    --animate-gold-shimmer: gold-shimmer-slide var(--duration-shimmer) linear infinite;
+    --animate-shake: shake 0.5s ease-in-out;
+
+    /* ═══════════════════════════════════════════════
+       Opacity → opacity-* utilities
+
+       Bridges the canonical `--opacity-disabled` (0.5) and
+       `--opacity-icon-muted` (0.8) rungs from tokens.css §11. Tailwind
+       v4 generates `opacity-disabled` / `opacity-icon-muted` utilities
+       (and the `disabled:opacity-disabled` modifier form) from these
+       @theme declarations; the values match tokens.css line 550-551.
+
+       Consumers replace 18+ hardcoded `disabled:opacity-50` literals
+       across the primitive slice with `disabled:opacity-disabled`.
+       (Per audit U.W0.C-a §1.2 / §gap.4 — U12.)
+       ═══════════════════════════════════════════════ */
+    --opacity-disabled:   0.5;
+    --opacity-icon-muted: 0.8;
+}
+
+/* Class-based dark mode */
+@variant dark (&:where(.dark, .dark *));