@mkbabb/glass-ui 6.0.0 → 7.0.0

package/src/styles/glass/liquid-enter.css

@@ -1,240 +0,0 @@
-/* glass/liquid-enter.css
-   BD.W-LIQUID-ENTRANCE-GENERAL — the UNIVERSAL LIQUID-ENTER mount recipe.
-
-   `.glass-reveal`'s four coupled channels (SPATIAL bloom + SQUISH + fade + decongest),
-   promoted from an overlay-only `data-state` TRANSITION to a mount `@keyframes` so a
-   `v-if`-born-at-open surface ANIMATES (a CSS transition needs a state-change a
-   born-at-open element lacks; an `@keyframes` does not). This is the everywhere
-   entrance EVERY mount surface opts into — cards, rows, controls, dock-modules, demo
-   sub-sections — on the `--i` 1/φ time-clock stagger. The flat fade dies.
-
-   THREE registers share ONE grammar (NOT three engines):
-     • MOUNT  — this file (`.liquid-enter`), plain @keyframes-on-mount, the Safari-15
-                floor, the DEFAULT. Zero JS. The route-enter page entrance rides the
-                sibling `.route-enter` on-mount @keyframes (transitions.css, BG.W-ROUTE-
-                TRANSITION — the bare keyed `<component>` swap), not this recipe.
-     • SCROLL — `.scroll-cascade` (scroll-choreography.css), the section cascade; this
-                file does NOT touch it. (The `.scroll-build` page-build recipe is
-                RETIRED — BG.W-ROUTE-TRANSITION — so its `gl-page-build`-clobber fence
-                is moot.)
-     • TRIGGER— `useLiquidReveal`/`useBloomUp` (the JS source-rect bloom).
-
-   THE FOUR CHANNELS (the iOS-27 read, design.md §SPATIAL/EFFECTS split):
-     1. SPATIAL bloom — `translate:` rise (the LONGHAND, composes with a centering
-        transform) on the snappy spring.
-     2. SQUISH volume — the reciprocal `scale:` LONGHAND, born wide+flat (vol-preserving
-        sx·sy ≈ 1), settles square. NEVER a `transform: scale()` shorthand (Bug A: it
-        REPLACES a base centering `transform: translate(-50%,-50%)` → a centered dialog
-        snaps to the corner; AND it composes with a `scale:` longhand → double-scale,
-        born at 78% area). The bloom-from-small GRACE is the coupled rise + blur + fade,
-        NOT an isotropic shrink (a 0.88 multiplier re-introduces the 0.776-area shrink).
-        When a JS clock is present, `--stretch` (useLiquidFlex — the ONE squish engine)
-        is written live and paired reciprocally on THIS longhand.
-     3. EFFECTS fade — `opacity 0→1` (coupled so scale+fade read as ONE coalescing layer).
-     4. EFFECTS decongest — `filter: blur(b)→blur(0)` on the surface's OWN pixels
-        (`filter`, NEVER `backdrop-filter` — the resting glass plate is untouched + the
-        WebKit per-frame-reblur hole is avoided), on the SAME spring clock.
-
-   The four channels are governed by ONE number — `--motion-weight` (rest 1/φ ≈ 0.618,
-   the shipped Band-0 token): weight 0 ⇒ no visible punch (PRM), weight 1 ⇒ the full
-   celebration slam. Co-scaled, never four unrelated tics.
-
-   @import-ed by glass.css in cascade order, in its own @layer components. */
-
-@layer components {
-    /* The channel substrate — the public start knobs, shared with `.glass-reveal`
-       (which keys the same `--lq-enter-*` names so the MOUNT recipe + the reka
-       closed→open TRANSITION speak ONE grammar, no fork). */
-    .liquid-enter {
-        --lq-enter-rise: 0.5rem; /* the SPATIAL rise (the translate: longhand leg) */
-        --lq-enter-blur: 4px; /* the decongest start radius (the filter leg) */
-        --lq-enter-origin: center; /* the bloom anchor (a popper edge overrides) */
-        /* The born squish — wide+flat, vol-preserving (product ≈ 1.002). The settle is
-           1 1. A consumer driving useLiquidFlex writes --lq-stretch-x/-y live. */
-        --lq-stretch-x: 1.06;
-        --lq-stretch-y: 0.945;
-        /* The register's OWN clock — the 1/φ overlap stagger keys off THIS so the
-           "launch beat N+1 as beat N hits 62%" holds on the cel/bouncy clock too
-           (DELTA-ASSAY §3 — not hardcoded to the snappy duration). */
-        --lq-enter-duration: var(--spring-snappy-duration);
-    }
-
-    /* ── BASE register (the graceful floor, GREEN on the bouncy/snappy spring) ──
-       A 2-stop squish-grow: the spring's `linear()` overshoot interior supplies the
-       calibrated iOS bounce. ONE `scale:` longhand (the squish), ONE `translate:`
-       longhand (the rise) — NO `transform:` shorthand (Bug A). */
-    @media (prefers-reduced-motion: no-preference) {
-        .liquid-enter {
-            animation: gl-liquid-enter var(--lq-enter-duration) var(--spring-snappy)
-                both;
-            /* The 1/φ overlap — the per-beat delay is the spring settle × 1/φ ≈ 0.618,
-               so beat N+1 launches as beat N reaches ~62% (Disney follow-through /
-               overlap; the golden proportion). Keyed off THIS register's own clock. */
-            animation-delay: calc(
-                var(
-                    --lq-enter-step,
-                    calc(var(--lq-enter-duration) * 0.618)
-                ) * var(--i, 0)
-            );
-            transform-origin: var(--lq-enter-origin);
-        }
-
-        /* DISPLAY type arrives with GRAVITY, no bounce (a heading must not overshoot —
-           the W-HIERARCHY arrival law). The fade/decongest still ride the recipe. */
-        .liquid-enter.is-display {
-            animation-timing-function: var(--ease-out);
-        }
-
-        @keyframes gl-liquid-enter {
-            0% {
-                opacity: 0;
-                /* SQUISH on the scale: LONGHAND — born wide+flat (vol-preserving), the
-                   short axis pinches, the long swells. NO transform: shorthand here. */
-                scale: var(--lq-stretch-x, 1.06) var(--lq-stretch-y, 0.945);
-                /* SPATIAL rise on the translate: LONGHAND (composes with a base
-                   centering transform — never clobbers it). */
-                translate: 0 var(--lq-enter-rise, 0.5rem);
-                /* DECONGEST — the surface's OWN pixels (filter, not backdrop-filter). */
-                filter: blur(var(--lq-enter-blur, 4px));
-            }
-            100% {
-                opacity: 1;
-                scale: 1 1;
-                translate: 0 0;
-                filter: blur(0);
-            }
-        }
-    }
-
-    /* ── CEL register (`.is-cel`, the audacious cartoon-technicolor upgrade) ──
-       LIVE-PROVEN FINDING (GOLDEN §7e): the cel-slam PUNCH cannot come from
-       ease-overshoot across the narrow `scale: 0.88→1` span (a 0.12 span × a 1.22
-       ease-peak yields only ~2% absolute punch). The punch MUST live in EXPLICIT
-       keyframe STOPS (a 3-stop arc); `--ease-cartoon-punch` (the shipped loud
-       `linear()`) adds the anticipation dip + extra overshoot ON TOP. Same
-       `scale:`/`translate:` LONGHAND discipline — NO `transform:` shorthand.
-
-       The arc: ANTICIPATION (sink + squish DOWN) → PUNCH (lift + stretch UP) →
-       FOLLOW-THROUGH settle. Every magnitude rides `--motion-weight` so PRM
-       (weight 0) flattens the whole arc to the fade in ONE assignment. */
-    @media (prefers-reduced-motion: no-preference) {
-        .liquid-enter.is-cel {
-            animation: gl-cel-slam var(--lq-enter-duration)
-                var(--ease-cartoon-punch, var(--spring-bouncy)) both;
-        }
-
-        @keyframes gl-cel-slam {
-            0% {
-                opacity: 0;
-                /* ── ANTICIPATION — sink + squish DOWN (born flat, tall; vol-preserve) ── */
-                translate: 0
-                    calc(14px * var(--motion-weight, 0.618));
-                scale: calc(1 - 0.12 * var(--motion-weight, 0.618))
-                    calc(1 + 0.06 * var(--motion-weight, 0.618));
-                filter: blur(var(--lq-enter-blur, 4px));
-            }
-            62% {
-                opacity: 1;
-                /* ── PUNCH — lift + stretch UP (sx↑, sy↓; vol-preserve) ── */
-                translate: 0
-                    calc(-3px * var(--motion-weight, 0.618));
-                scale: calc(1 + 0.1 * var(--motion-weight, 0.618))
-                    calc(1 - 0.05 * var(--motion-weight, 0.618));
-                filter: blur(0);
-            }
-            100% {
-                opacity: 1;
-                /* ── FOLLOW-THROUGH settle ── */
-                translate: 0 0;
-                scale: 1 1;
-                filter: blur(0);
-            }
-        }
-    }
-
-    /* ── The lagging cartoon CAST (`.is-cel`, opt-in) — a CHILD layer, never
-       ::after{box-shadow} ──
-       A box-shadow cannot LAG a transform (both repaint on the same element in
-       lockstep), and an animated box-shadow is a WebKit paint hole. So the cast is a
-       child caster layer carrying the STATIC layered `--shadow-cartoon-md` (the proper
-       1940s-technicolor punch, 3-layer ink — NOT the bare single-stamp whisper),
-       animated on its OWN transform clock +`6ms·--motion-weight` later: the object
-       slams in, its bold shadow catches up a beat behind (overlapping action). The
-       cast's TRANSFORM moves (compositor); the box-shadow is static-painted, never
-       animated. Capped to HERO/headline surfaces (perf — never a global .is-cel). */
-    .liquid-enter.is-cel > .cartoon-cast {
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        border-radius: inherit;
-        /* STATIC layered stamp; re-tints per mode via the --cartoon-ink-* cohort
-           (shadow.css / dark-arm.css). NEVER animated. */
-        box-shadow: var(--shadow-cartoon-md);
-        pointer-events: none;
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .liquid-enter.is-cel > .cartoon-cast {
-            animation: gl-cast-lag var(--lq-enter-duration)
-                var(--ease-cartoon-punch, var(--spring-snappy)) both;
-            /* the LATE arrival — the shadow trails the cel a beat behind */
-            animation-delay: calc(0.006s + 0.06s * var(--motion-weight, 0.618));
-        }
-        @keyframes gl-cast-lag {
-            0% {
-                opacity: 0;
-                translate: 0 calc(10px * var(--motion-weight, 0.618)) 0;
-                scale: 0.92;
-            }
-            100% {
-                opacity: 1;
-                translate: 0 0 0;
-                scale: 1;
-            }
-        }
-    }
-    /* Under prefers-contrast: more the inked edge is a LEGIBILITY asset — floor it on. */
-    @media (prefers-contrast: more) {
-        .liquid-enter.is-cel > .cartoon-cast {
-            opacity: 1;
-        }
-    }
-}
-
-/* The Safari < 17.2 `linear()` cubic-bezier floor was COLLAPSED at BG.NF.2
-   W-LEGACY-LADDER-COLLAPSE — both targets (current Chrome + current Safari)
-   parse `linear()` spring curves, so the `--spring-*` tokens are the sole
-   timing source; the bezier degrade arm served no target engine. */
-
-/* ── REDUCED-MOTION CARVE (the vestibular floor — WCAG 2.3.3 · design.md P6) ──
-   Under `prefers-reduced-motion: reduce` the entrance keeps the FADE and drops the
-   transform + squish + bounce + blur + stagger + cast in ONE arm (opacity is not a
-   vestibular trigger). One calm paint on the short clock, delay → 0. This mirrors the
-   `.glass-reveal` + `.route-enter` PRM precedent. The shipped `--ease-cartoon-punch`
-   already re-aliases to `--ease-standard` under reduce (scheme-motion.css) and
-   `--motion-weight → 0` zeroes the arc — this carve is the belt-and-suspenders floor
-   that also drops the keyframe channels outright. */
-@layer components {
-    @media (prefers-reduced-motion: reduce) {
-        .liquid-enter,
-        .liquid-enter.is-cel {
-            animation: gl-liquid-enter-reduced var(--duration-fast) var(--ease-out)
-                both;
-            animation-delay: 0s;
-        }
-        .liquid-enter.is-cel > .cartoon-cast {
-            /* the cast still appears (its ink is a legibility asset) but does not fly */
-            animation: none;
-            opacity: 1;
-            translate: 0;
-            scale: 1;
-        }
-        @keyframes gl-liquid-enter-reduced {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 1;
-            }
-        }
-    }
-}

package/src/styles/glass/liquid-fill.css

@@ -1,65 +0,0 @@
-/* ════════════════════════════════════════════════════════════════════════
-   .glass-liquid-fill — the ONE shared liquid-fill register (BG.W-LIQUID-FILL).
-
-   The warm glass-cylinder fill — a continuous rounded pill of warm tinted glass
-   over a track — factored ONCE out of the Slider's `.slider-range` composite so
-   EVERY meter/fill consumer COMPOSES it instead of re-forking the
-   backdrop-blur + rim + under-shadow recipe. Fewer-sharper-primitives: ONE
-   liquid-fill recipe, N surfaces.
-
-   ≥2 consumers by construction (the overfitting bar cleared by extraction):
-     · #1  Slider's `.slider-range` RE-READS it (the reference implementation —
-           the glass cylinder you pull; it bridges its own `--slider-range-*`
-           consumer-override tokens onto the register's knobs).
-     · #2  `<Progress variant="liquid">` — the glass meter (the speedtest fill
-           meter consumes it on the 5.0.0 bump).
-
-   PHASE-COLOUR COMPOSABLE, ZERO PER-SITE GLASS KNOWLEDGE. A surface tints the
-   fill by setting the ONE `--liquid-fill-tint` knob (a phase hue, a brand colour,
-   the warm-cream default) — it never touches `backdrop-filter`, the rim, or the
-   under-shadow. The register owns every glass mechanic; the surface owns only the
-   colour. The four knobs (all optional, warm-glass defaults):
-     · --liquid-fill-tint      — the fill hue (default the warm-cream capsule amber).
-     · --liquid-fill-strength  — the tint mix % against the warm 0-alpha leg (88%).
-     · --liquid-fill-blur      — the backdrop blur rung (the quiet ~2px-equiv radius).
-     · --liquid-fill-shadow    — the under-shadow leg (the glass-thickness floor).
-
-   @layer components, @import-ed in glass.css AFTER the glass-capsule register (so
-   the `--glass-bg-*`/`--glass-*-rim`/`--glass-under-shadow-*`/`--glass-capsule-warm`
-   tokens resolve) and BEFORE the consuming slider/progress recipes.
-
-   Compositor-only + Safari-native by construction (the §7 floor): the blur routes
-   `--glass-blur-quiet` (which SCALES by `--glass-level`, so the opaque escape /
-   prefers-reduced-transparency / forced-colors flatten it with the rest of the
-   band); no `backdrop-filter: url()`, no SVG goo, no WebGL. The 0-alpha mix leg is
-   a WARM `oklch(… / 0)`, NEVER bare `transparent` (the WebKit black-premultiply
-   hole, build-trap-(d)).
-   ════════════════════════════════════════════════════════════════════════ */
-
-@layer components {
-    .glass-liquid-fill {
-        border-radius: var(--radius-pill);
-        /* The warm tinted glass fill — the tint mixes against a warm 0-alpha leg so
-           the cylinder is a warm tinted `.glass-atom` over the field, not a flat bar.
-           `--liquid-fill-tint` is the ONE phase-colour knob (default the warm-cream
-           capsule amber — the lib identity; the brand/phase hue is the consumer's). */
-        background: color-mix(
-            in oklab,
-            var(--liquid-fill-tint, var(--glass-capsule-warm))
-                var(--liquid-fill-strength, 88%),
-            oklch(0.9 0.05 75 / 0)
-        );
-        /* The blur routes the `--glass-blur-quiet` rung (the ~2px-equivalent radius
-           that SCALES by `--glass-level`), not a literal blur off the level knob. */
-        backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet));
-        -webkit-backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet));
-        /* The unified edge rim (W52) reads the cylinder's curvature; the under-shadow
-           lays the glass-thickness floor at the leading edge. */
-        box-shadow:
-            var(--glass-material-rim),
-            var(--liquid-fill-shadow, var(--glass-under-shadow-quiet));
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-}

package/src/styles/glass/material-roles.css

@@ -1,18 +0,0 @@
-/* The public material hierarchy. Content and elevated content own their paint here;
-   functional glass and transient overlays keep their component-specific anatomy. */
-@layer components {
-    [data-material="content-field"] {
-        background: var(--background);
-        color: var(--foreground);
-    }
-
-    /* A content card is elevation, not another glass pane. Keep nested controls free
-       to remain functional glass by changing only the card root's paint. */
-    [data-material="elevated-content"][data-surface="glass"] {
-        background: var(--card);
-        border-color: var(--border-soft);
-        box-shadow: var(--card-shadow);
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
-    }
-}