@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/glass/defined.css

@@ -0,0 +1,88 @@
+/* glass/defined.css
+   BG.W-GLASS-DEFAULT-DEFINITION (GA-1) — the DEFINED glass tier.
+
+   Glass is the maximal default (AX.W54), but the blur is imperceptible over a FLAT page
+   — a bare <Button>/.input-pill reads as a near-gray shape (chroma 0.0138, BD GOLDEN).
+   This tier splits glass into TWO registers on the ONE existing --glass-level/edge
+   machinery (NOT a fork of the cascade, NOT a competing backdrop-filter, NOT a parallel
+   recipe):
+     · transmissive (today's maximal glass) — the DEFAULT for surfaces WITH a colorful
+       backdrop (cards over the field, overlays over content, the dock over aurora).
+       BYTE-UNTOUCHED.
+     · defined — a `.glass-defined` TOKEN-SUBSTITUTION decoration on a base rung (the
+       .glass-opaque/.glass-deep precedent) that reads as a SHAPE over ANY backdrop by
+       composing three things the material ALREADY owns: (a) a stronger warm rim
+       (--glass-border-defined), (b) a warm-cream floor-fill (--glass-floor-fill) layered
+       UNDER the transmissive plate, (c) the shipped W-BUTTON-GLASS lit register
+       (specular + --glass-btn-* depth stack, unchanged). ONE engage scalar,
+       @property --glass-definition (property-regs.css; 0 = transmissive, 1 = defined) —
+       both legs read it, so the scalar is genuinely load-bearing (dead-knob-proof) and a
+       host dials definition on any ancestor.
+
+   The DEFAULT flip (the wave's PURPOSE): the control cohort — Button glass variants
+   (.btn-glass) · .input-pill (Input/Textarea/NumberField) · .control-surface
+   (SelectTrigger) — is DEFINED by default, so a control reads as a control over a flat
+   page (the AX.W54 over-reach transposition BD §3.3 invited). A CONTENT surface composes
+   NO .glass-defined and stays transmissive (the negative arm — the flip does not bleed).
+   Menu ROWS stay transmissive inside an already-defined panel (KS-GLASS §3.2 decided
+   sub-question — a row inside a defined panel needs state fills, not its own floor).
+
+   @import-ed after deep.css in glass.css (a decoration ON a base rung, the deep.css
+   sibling); the tokens live in tokens/glass.css. */
+@layer components {
+    /* The floor layers UNDER the plate via TWO image layers: CSS image layers always
+       paint OVER background-color, so a two-image plate-over-floor is the ONLY ordering
+       that reads plate-over-floor. The base rung paints its plate via the `background:`
+       SHORTHAND (→ background-COLOR), so `background-color: transparent` is LOAD-BEARING
+       — un-zeroed the composite would be plate(image) ⊕ floor(image) ⊕ plate(color), the
+       plate counted TWICE. Zeroed, the stack is EXACTLY one plate over one floor (the
+       calibration target). Each family maps --glass-defined-plate to its OWN fill token
+       so the floor sits under the fill it actually paints; a bare `.glass-*` rung +
+       .glass-defined falls back to the ladder-rung plate (--glass-plate-tinted). */
+    .glass-defined,
+    .btn-glass,
+    .input-pill,
+    .control-surface {
+        --glass-definition: 1;
+        /* The substitution-vs-inheritance fix (the --dock-scale re-declare / --glass-bg-dock
+           pre-substituted-seam precedent — CLAUDE.md "The substitution-vs-inheritance trap").
+           --glass-floor-fill + --glass-border-defined are composed at :root, where
+           --glass-definition is 0 — and a custom property's inner var() substitutes at the
+           element that DECLARES it, so the :root copies resolve TRANSPARENT (calc(0 * N%)) and
+           inherit DOWN already-resolved. Flipping --glass-definition: 1 here would be a DEAD KNOB
+           (the floor/rim keep their :root-resolved transparent value). RE-DECLARE both on this
+           definition-1 rule so their var(--glass-definition) re-resolves against THIS element's
+           value (card@15% floor + foreground@14% rim actually paint). The :root copies stay the
+           transmissive default (definition 0 -> transparent) for a content surface. Both legs
+           still read the scalar (dead-knob-proof); --glass-floor-fill-max stays the one knob. */
+        --glass-floor-fill: color-mix(
+            in srgb,
+            var(--card) calc(var(--glass-definition) * var(--glass-floor-fill-max)),
+            transparent
+        );
+        --glass-border-defined: color-mix(
+            in srgb,
+            var(--foreground) calc(var(--glass-definition) * 14%),
+            transparent
+        );
+        background-color: transparent;
+        background-image:
+            linear-gradient(
+                var(--glass-defined-plate, var(--glass-plate-tinted)),
+                var(--glass-defined-plate, var(--glass-plate-tinted))
+            ),
+            linear-gradient(var(--glass-floor-fill), var(--glass-floor-fill));
+        border-color: var(--glass-border-defined);
+    }
+
+    /* Per-family plate mapping — the floor layers under the fill each family PAINTS
+       (btn-glass composes its own tinted --glass-fill; the form controls read the shared
+       --control-surface-bg REST register). */
+    .btn-glass {
+        --glass-defined-plate: var(--glass-fill);
+    }
+    .input-pill,
+    .control-surface {
+        --glass-defined-plate: var(--control-surface-bg);
+    }
+}

package/src/styles/glass/glass-atom.css

@@ -49,17 +49,17 @@
             var(--accent-fill-strength-in, 0%),
             var(--atom-tint-floor)
         );
-        /* The quiet register's tint application — the plate body mixes toward the
-           per-instance data hue ON TOP of the capsule's warm composite. At the
-           `@property` defaults (`--glass-fill-tint: transparent` / strength 0%)
-           this is the byte-identical no-op floor; the warm floor above keeps the
-           idle body warm even at a transparent tint. The mix is `in oklab` (the
-           perceptual glass-tint family — NOT the in-srgb brand fence). */
-        --glass-atom-tinted: color-mix(
-            in oklab,
-            var(--glass-capsule-warm) calc(var(--atom-tint-floor) + var(--glass-fill-strength)),
-            oklch(0.9 0.05 75 / 0)
-        );
+        /* The quiet register's tint application reads the SHARED per-instance PLATE
+           recipe `--glass-fill-tinted` (BG.W-GLASS-CONSUMER-BAND, tokens/glass.css) —
+           NOT a forked `color-mix` re-spell. The plate tints toward the per-instance
+           DATA hue (`--glass-fill-tint` at `--glass-fill-strength`), so a semantic
+           badge (`destructive`/`success`/`info`) reaches its hue — closing the prior
+           `.glass-atom` fork that mixed a FIXED `--glass-capsule-warm` cream regardless
+           of the data hue (the comment claimed "toward the per-instance data hue" while
+           the code ignored it). At the `@property` defaults this is the byte-identical
+           no-op (`color-mix(in oklab, X, transparent 0%)` ≡ X); the capsule's own warm
+           floor above keeps the idle body warm. ONE plate, ONE rim (`--glass-material-
+           rim`, the capsule carries it) — the shared plate/rim pair. */
         /* The motion register — the press/hover deform rides
            `--motion-weight × --ease-cartoon-punch`. The atom inherits the rest
            `--motion-weight: 0.618`; the loud register (`data-cast`, below) pushes
@@ -117,8 +117,8 @@
        `transparent` (challenge #1 R4 / #2 R4 — the WebKit desaturation fix). */
     .glass-atom[data-surface="glass"] {
         background-image: linear-gradient(
-            var(--glass-atom-tinted),
-            var(--glass-atom-tinted)
+            var(--glass-fill-tinted),
+            var(--glass-fill-tinted)
         );
     }
 
@@ -217,16 +217,19 @@
            A consumer overrides `--glass-fill-tint` per-instance for a bespoke hue. */
         --glass-fill-strength: var(--badge-glass-strength, 16%);
     }
-    /* Per-variant glass tint — the data hue the quiet body mixes toward. The
-       semantic plate token becomes the tint source (the loud fill demoted to a
-       transmissive hue). `secondary`/`outline` are the calm/neutral routes. */
+    /* Per-axis glass tint — the data hue the quiet body mixes toward. BI.W-SYNONYM-
+       RENAMES: the STYLE plate keys off `[data-variant]` (default/secondary/outline),
+       the SEMANTIC hue off `[data-tone]` (destructive/success/warning/info — a tone
+       is not a style). A set tone's rule follows the variant rule in source order, so
+       a `tone` capsule's hue wins the cascade — byte-identical to the former
+       per-`variant` tint map. `secondary`/`outline` are the calm/neutral routes. */
     .badge-atom--glass[data-variant='default'] { --glass-fill-tint: var(--primary); }
     .badge-atom--glass[data-variant='secondary'] { --glass-fill-tint: var(--glass-capsule-warm); }
     .badge-atom--glass[data-variant='outline'] { --glass-fill-tint: var(--glass-capsule-warm); }
-    .badge-atom--glass[data-variant='destructive'] { --glass-fill-tint: var(--destructive); }
-    .badge-atom--glass[data-variant='success'] { --glass-fill-tint: var(--success); }
-    .badge-atom--glass[data-variant='warning'] { --glass-fill-tint: var(--warning); }
-    .badge-atom--glass[data-variant='info'] { --glass-fill-tint: var(--info); }
+    .badge-atom--glass[data-tone='destructive'] { --glass-fill-tint: var(--destructive); }
+    .badge-atom--glass[data-tone='success'] { --glass-fill-tint: var(--success); }
+    .badge-atom--glass[data-tone='warning'] { --glass-fill-tint: var(--warning); }
+    .badge-atom--glass[data-tone='info'] { --glass-fill-tint: var(--info); }
 
     @media (prefers-reduced-motion: reduce) {
         .badge-atom {

package/src/styles/glass/glass-capsule.css

@@ -140,4 +140,36 @@
             scale: 1;
         }
     }
+
+    /* ── BI.W-DOCK-CONTROLS — the folded dock-control safe-inset (the face token) ──
+       The `--dock-control-safe-inset` 10% band-aid the user rejected FOLDS into the
+       FACE: the painted plate insets (`background-clip: content-box` over the inset
+       `padding`), while the HIT CELL stays the full `--dock-control-size` (the WCAG
+       2.5.5 ≥44px touch floor on the CELL, never the plate). Hit box ≠ paint box —
+       the clip fix (W-DOCK-SPINE's L1 `overflow: visible`) and the touch floor are
+       now DECOUPLED: A11Y-5's 17×40px defect dies because the hit box reads the full
+       cell while the painted plate insets independently.
+
+       DOCK-SCOPED (`.glass-dock` descendant) so NO other `.glass-capsule` consumer
+       (a glass Button, a Badge/IconChip/chip OUTSIDE a dock) inherits the content-box
+       clip — `--dock-control-safe-inset` resolves to 0 outside a dock anyway, but the
+       scope keeps the content-box clip off the broad capsule family. This is the ONE
+       home of the safe-inset routing (the standalone `padding`/`background-clip`
+       sites in the dock-control recipe files collapsed onto it — proof:dock-controls
+       C3). Two legs, ONE token home:
+       • the SHARED fill-inset — the painted plate clips to the content box so the
+         fill insets within the control's own padding / the safe-inset. Applies to
+         the whole dock capsule family (icon active plate + hover register).
+       • the ICON-SHAPE safe-inset padding — the ONE `--dock-control-safe-inset`
+         read. A fixed-square icon control needs `padding` to define a content box
+         SMALLER than the cell (the plate insets within the square); a text control
+         (tab/trigger) uses its OWN text padding as the inset, so the padding leg is
+         scoped to the icon shape (`.dock-icon-button`) — it never clobbers a text
+         control's or a nested strip's padding. */
+    .glass-dock :is(.glass-capsule, .glass-capsule-hover) {
+        background-clip: content-box;
+    }
+    .glass-dock .dock-icon-button {
+        padding: var(--dock-icon-padding, var(--dock-control-safe-inset, 0));
+    }
 }

package/src/styles/glass/glass-chip.css

@@ -86,21 +86,17 @@
            bolder warm-clearing stop so a selected default chip is tonal, not gray. */
         --accent-band-strength: max(18%, calc(var(--chip-tint-floor) + 10%));
 
-        /* ── The per-instance fill tint (BE.W-TINTED-CHIP CONSUME) ──
-           The translucent capsule body tints toward the consumer data hue ON TOP
-           of the W55 legibility composite. At the `@property` defaults
-           (`--glass-fill-tint: transparent` / strength 0%) this is the byte-
-           identical no-op (`color-mix(in oklab, X, transparent 0%)` ≡ X — the warm
-           floor above keeps the idle body warm even at a transparent tint). The
-           mix is `in oklab` (the perceptual glass-tint family). The 0-alpha stop is
-           warm `oklch(… / 0)`, never bare `transparent` (the WebKit black-
-           premultiply hole). */
-        --glass-chip-tinted: color-mix(
-            in oklab,
-            var(--glass-fill-tint, oklch(0.9 0.05 75 / 0))
-                var(--glass-fill-strength, 0%),
-            oklch(0.9 0.05 75 / 0)
-        );
+        /* ── The per-instance fill tint (BG.W-GLASS-CONSUMER-BAND CONSUME) ──
+           The translucent capsule body tints toward the consumer data hue via the
+           SHARED per-instance PLATE recipe `--glass-fill-tinted` (tokens/glass.css) —
+           NOT a forked `color-mix` re-spell (the chip read the SAME seam the atom
+           does, so this fold is net-neutral: both read the ONE plate). At the
+           `@property` defaults (`--glass-fill-tint: transparent` / strength 0%) it is
+           the byte-identical no-op (`color-mix(in oklab, X, transparent 0%)` ≡ X — the
+           warm floor above keeps the idle body warm even at a transparent tint). The
+           shared plate is `in oklab` over a warm `oklch(… / 0)` 0-alpha stop (never
+           bare `transparent` — the WebKit black-premultiply hole). ONE plate, ONE rim
+           (`--glass-material-rim`, the capsule carries it). */
 
         /* ── The ONE scale write (hover/press/punch, single source of truth) ──
            Folds the on-flood overshoot into ONE `scale` so it never collides with
@@ -132,8 +128,8 @@
            tinted layer is the warm 0-alpha no-op (invisible) and the capsule's warm
            body reads. */
         background-image: linear-gradient(
-            var(--glass-chip-tinted),
-            var(--glass-chip-tinted)
+            var(--glass-fill-tinted),
+            var(--glass-fill-tinted)
         );
     }
     .dark .glass-chip {

package/src/styles/glass/grain-overlay.css

@@ -0,0 +1,79 @@
+/* glass/grain-overlay.css
+   The glass-tier paper-grain `::after` overlay (BB.W-LIQUIDHOVER — the always-present
+   texture + the opacity-only engage + the PRM/reduced-motion carve + the `.dark`
+   soft-light arm).
+   Carved from glass/ladder.css at BG.W-CLOSEFIX-9SITE to hold the no-god-module 500-line
+   bound (the five-rung surface ladder + the W55 bright-bucket @container + the calm-tier
+   re-point + the contrast-color ink-flip + the opaque escape + the under-shadow modifier
+   stay in ladder.css; the rim/accent group is glass/rim.css). @import-ed by glass.css in
+   cascade order IMMEDIATELY AFTER ladder.css and BEFORE accent-tone.css — the SAME @layer
+   components; the grain `::after` is the SOLE writer of the `.glass-*::after` overlay so
+   the relocation is cascade-order-invariant (the grain block was the tail of ladder.css;
+   the dist is byte-isomorphic).
+   See docs/precepts/design-idioms.md §cohesion-aware partials. */
+@layer components {
+    /* Grain noise overlay — reuses paper texture SVG, no extra assets.
+       BB.W-LIQUIDHOVER — the disco-grain pop (T8-F6) killed at the COMPOSITION CLASS:
+       the `background-image` is ALWAYS PRESENT (decoded once at rest, NEVER toggled to
+       `none`), and any STATE-driven grain engagement cross-fades the `opacity` ONLY on
+       the thin `--glass-grain-engage-duration` (~120ms linear) clock. A `background-
+       image: none → var(--paper-clean-texture)` engage decodes-and-appears in one frame
+       (the pop); the opacity cross-fade is a compositor-cheap interpolation with the
+       image constant — the only sanctioned grain engage. The `transition` lives HERE so
+       a hover/active grain lift (wherever a glass surface raises grain on interaction)
+       reads as a smooth fade by construction, not a discrete swap. */
+    .glass-wash::after,
+    .glass-quiet::after,
+    .glass-resting::after,
+    .glass-floating::after,
+    .glass-overlay::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        /* The grain texture is the `background-image` longhand (NOT the `background`
+           shorthand) so the image stays a STABLE always-present layer the engage
+           never re-declares — the structural anti-pop: opacity is the only animated
+           channel, the image is never `none → image`. */
+        background-image: var(--paper-clean-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        opacity: var(--glass-grain-opacity);
+        /* The opacity cross-fade engage — plain ~120ms linear direct-write (no spring,
+           no overshoot — instant-but-smooth per the ask). Under the PRM / reduced-
+           transparency brackets the clock collapses to 0ms (the a11y bracket below). */
+        transition: opacity var(--glass-grain-engage-duration, 120ms) linear;
+        pointer-events: none;
+        mix-blend-mode: overlay;
+    }
+
+    /* BB.W-LIQUIDHOVER — the grain engage collapses to INSTANT under reduced motion (a
+       grain that cross-fades on hover under reduce is still motion; accessibility is
+       absolute). The reduced-transparency / forced-colors brackets already zero
+       `--glass-grain-opacity` (a11y-fallback.css), so the grain is inert there; this
+       bracket covers the reduced-MOTION case where the grain still paints but must not
+       animate. */
+    @media (prefers-reduced-motion: reduce) {
+        .glass-wash::after,
+        .glass-quiet::after,
+        .glass-resting::after,
+        .glass-floating::after,
+        .glass-overlay::after {
+            transition: none;
+        }
+    }
+
+    /* The unified rim (AW.W22) + the BB.W-GLASS-ACCENT per-INSTANCE chromatic-RIM
+       tint group (the rim-ink + --glass-material-rim ring + the per-rung
+       --glass-border-accent border, light + dark arms) lives in glass/rim.css
+       (carved at BB.W-CARVE4 — the next adjacent @layer components block, the SOLE
+       writer of --glass-material-rim/--glass-border-accent). */
+
+    .dark .glass-wash::after,
+    .dark .glass-quiet::after,
+    .dark .glass-resting::after,
+    .dark .glass-floating::after,
+    .dark .glass-overlay::after {
+        mix-blend-mode: soft-light;
+    }
+}

package/src/styles/glass/ladder-undershadow.css

@@ -0,0 +1,61 @@
+/* glass/ladder-undershadow.css
+   The ladder tail: the AX.W54 .glass-opaque level-0 escape + the AV.W15 M4 content-aware under-shadow modifier (.glass-over-text / [data-over-content]).
+   Carved from glass/ladder.css to hold the no-god-module 500-line bound (BI.W-STYLE-REDRAIN); its own @layer components block @import-ed by glass.css IMMEDIATELY AFTER ladder.css (the tail of the ladder @layer, unique selectors, source-order-after — byte-isomorphic). */
+@layer components {
+    /* ── The opaque escape (AX.W54) ───────────────────
+       The level-0 endpoint of the SAME glass machinery — a solid `--card` plate
+       (the opacity seam → 1) with `blur(0)` (the blur seam → 0), routed through
+       the ONE `--glass-level` knob. NOT a parallel solid `background:` recipe:
+       a `.glass-*` surface that ALSO carries `.glass-opaque` keeps its glass edge,
+       rim, and under-shadow (a solid plate with a glass edge, not a bare div), and
+       the @supports fallback + the a11y brackets compose coherently. This is the
+       explicit opt-out from the MAXIMAL glass default (dense data, forced-colors,
+       a consumer that wants a flat surface). */
+    .glass-opaque {
+        --glass-level: 0;
+        /* BA.W-DARK-MATERIAL scope 7 — the opaque escape suppresses the adaptive TINT axis
+           too (not just the opacity/blur level). A solid opaque plate has no translucent
+           backdrop to darken-over, so the self-engage tint is meaningless on it; zeroing the
+           strength keeps the opaque escape bucket-INVARIANT (the unset floor and the bright
+           bucket resolve the SAME solid plate — the byte-identity canary). Without this, the
+           scope-7 unconditional content-tier floor (4%) tinted even the solid plate, breaking
+           the opt-out's "flat surface" contract. */
+        --glass-tint-strength: 0%;
+    }
+
+    /* ── Content-aware under-shadow modifier (AV.W15 M4) ──────────────
+       Apple raises the under-shadow over text (so the glass reads as
+       lifting OFF the text) and drops it over solid light. The modifier
+       is ATTRIBUTE-DRIVEN, no JS: a consumer adds `.glass-over-text`
+       (or `[data-over-content="text"]`) to a text-bearing glass surface to
+       swap it ONE under-shadow rung heavier, or `[data-over-content="solid"]`
+       to lighten it one rung over a solid-light backdrop. It reuses the
+       existing `--glass-under-shadow-{quiet,default,vivid}` rungs (no new
+       shadow value — `vivid` is sufficient over text), redefining only the
+       leading under-shadow layer per tier; the lift stack is untouched.
+
+       The selectors are per-tier so the swap is rung-correct
+       (quiet→default, resting→vivid). `.glass-floating` already sits at the
+       `vivid` ceiling over text, so the heavier variant is a no-op there
+       (the rung saturates) — documented, not an error. */
+    .glass-quiet.glass-over-text,
+    .glass-quiet[data-over-content="text"] {
+        box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-quiet);
+    }
+    .glass-resting.glass-over-text,
+    .glass-resting[data-over-content="text"] {
+        box-shadow: var(--glass-under-shadow-vivid), var(--glass-shadow-resting);
+    }
+
+    /* The inverse — over a solid-light backdrop the under-shadow lightens
+       one rung (the glass need not lift as hard off a flat bright field). */
+    .glass-resting[data-over-content="solid"] {
+        box-shadow: var(--glass-under-shadow-quiet), var(--glass-shadow-resting);
+    }
+    .glass-floating[data-over-content="solid"] {
+        box-shadow:
+            var(--glass-material-rim),
+            var(--glass-under-shadow-default),
+            var(--glass-shadow-floating);
+    }
+}