@mkbabb/glass-ui 3.1.1 → 3.3.0

package/dist/styles/theme.css

@@ -4,9 +4,52 @@
  * 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.
+ *
+ * Three blocks (AV.W16 TW1):
+ *   - LEADING plain `@theme`: the radius primitives + the radius semantic
+ *     aliases. Plain (not inline) on purpose — the radius scale has no
+ *     tokens.css twin, so each `--radius-*` is the lone declaration + single
+ *     override point. Inline is WRONG here: it substitutes the VALUE, so two
+ *     aliases resolving to one primitive (`--radius-card`/`--radius-dialog`
+ *     both → `--radius-2xl`) collapse to an identical value and v4 drops one
+ *     `rounded-*` utility when both are scanned. Plain mints each alias's own
+ *     var, so value-identical siblings never collide.
+ *   - `@theme inline`: the tokens.css `var(--token)` BRIDGES (color/shadow/
+ *     blur/duration/ease/typography). Inline substitutes the referenced value
+ *     and mints no second var, so the tokens.css token stays the single
+ *     override point (plain would emit `--color-primary` AND `--primary`).
+ *     Guardrail: NEVER `@property`-register a color token — registration
+ *     snapshots the value and breaks light-dark() (see below).
+ *   - trailing plain `@theme`: the remaining literals (`--animate-*`, opacity).
  */
 
+/* Radius primitives — leading plain @theme (declared before the inline aliases
+   reference them; see the order note above). */
 @theme {
+    --radius: 0.625rem;
+    --radius-xs: 4px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-xl: 12px;
+    --radius-2xl: 1rem;
+    --radius-pill: 9999px;
+
+    /* Semantic radius aliases — plain @theme (not inline; see header note).
+       Value-identical siblings (e.g. --radius-card + --radius-dialog) would
+       collapse + drop a rounded-* utility under inline; plain mints each
+       alias's own var. */
+    --radius-lg:      var(--radius);
+    --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);
+}
+
+@theme inline {
     /* ═══════════════════════════════════════════════
        Typography — size scale → text-* utilities
        ═══════════════════════════════════════════════ */
@@ -71,6 +114,12 @@
 
     --color-muted: var(--muted);
     --color-muted-foreground: var(--muted-foreground);
+    /* AU.W8b.4 — the muted-foreground-strong bridge (text-muted-foreground-strong
+       utility). The base token already exists (tokens.css:362); only the
+       --color-muted-foreground bridge was present. CardDescription consumes
+       text-muted-foreground-strong through this. NOT @property-registered (a
+       design-token color; registration would break light-dark() re-resolution). */
+    --color-muted-foreground-strong: var(--muted-foreground-strong);
 
     --color-accent: var(--accent);
     --color-accent-foreground: var(--accent-foreground);
@@ -100,6 +149,15 @@
     --color-muted-soft:   var(--muted-soft);
     --color-muted-medium: var(--muted-medium);
 
+    /* AU.W8b.4 — glass-tier surface/border bridges (bg-glass-quiet /
+       border-glass-quiet). Companions to the existing --shadow-glass-quiet
+       bridge below; lets the Toggle `card` variant compose bg-glass-quiet /
+       border-glass-quiet / shadow-glass-quiet instead of bg-[var(--glass-…)]
+       arbitrary wraps. NOT @property-registered (design-token colors —
+       registration snapshots the resolved color + breaks light-dark()). */
+    --color-glass-quiet:        var(--glass-bg-quiet);
+    --color-glass-border-quiet: var(--glass-border-quiet);
+
     /* 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);
@@ -206,27 +264,10 @@
     --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);
+    /* The radius PRIMITIVES + the semantic radius aliases (→ rounded-*
+       utilities) live in the LEADING plain @theme block above — plain, not
+       inline, so value-identical aliases never collide during candidate
+       resolution. See the order/collision note there. */
 
     /* ═══════════════════════════════════════════════
        Sizing → h-*, min-w-*, and spacing utilities
@@ -236,6 +277,8 @@
     --height-chart-large:   var(--chart-height-large);
     --min-width-input-sm:   var(--input-min-width-sm);
     --spacing-chart-margin: var(--chart-margin);
+    /* AU.W8b.4 — w-popover utility (Combobox list width). Lifts `w-[200px]`. */
+    --width-popover:        var(--popover-width);
 
     /* Golden-ratio spacing — p-phi-5 / m-phi-6 etc. via Tailwind's spacing
        utilities. φ² and φ³ rungs for hero/chassis padding ladder. */
@@ -316,7 +359,16 @@
     --transition-duration-xl: var(--duration-xl);
     --transition-duration-xxl: var(--duration-xxl);
     --transition-duration-sparkle: var(--duration-sparkle);
+}
 
+/* ═══════════════════════════════════════════════════════════════════════
+   Directly-authored LITERALS — plain @theme (the override surface here is
+   the namespaced var itself, not a tokens.css bridge, so these mint their
+   global variable). Radius primitives, the --animate-* composites (literal
+   keyframe name + var() timing — no tokens.css twin to double), and the
+   opacity rungs.
+   ═══════════════════════════════════════════════════════════════════════ */
+@theme {
     /* ═══════════════════════════════════════════════
        Animation → animate-* utilities
        ═══════════════════════════════════════════════ */