@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/tokens/scheme-motion.css

@@ -1,422 +0,0 @@
-/* tokens/scheme-motion.css
-   §-1 color-scheme · §0 font · §1 duration · §2.W/§2.X motion-weight + cartoon-punch ·
-   §2.A ambient-motion · §2.B/§2.C · §3 z-index.
-   The §2 EASING block (spring linear() curves + per-spring duration clocks +
-   goo-flow curves + cubic-bezier cores/aliases) is carved into the adjacent
-   scheme-spring.css to hold the no-god-module 500-line bound; it @imports
-   IMMEDIATELY AFTER this file (same :root cascade slot).
-   Carved from the tokens.css cascade root; @import-ed by tokens.css in
-   cascade order. Same :root cascade context as its siblings. */
-:root {
-    /* ═══════════════════════════════════════════════
-       §-1  COLOR-SCHEME (AQ.W2 §1)
-
-       Lets native UI (scrollbars, spinbuttons, form-control chrome, the
-       default focus ring) honor the OS preference when the consumer has
-       NOT pinned a `.dark` class. glass-ui's dark mode is class-driven
-       (`.dark`, theme.css `@variant dark`), so `.dark` overrides to a hard
-       `dark` regardless of OS — but absent the class, native chrome should
-       still track `prefers-color-scheme`. `light dark` (not `only light`)
-       on `:root` delivers that; `.dark` hard-pins `dark`.
-
-       Baseline Widely Available → adopt natively, no `@supports` guard
-       (older engines ignore the property and keep default-light chrome).
-       `accent-color` (AQ.W2 §4) is the companion native-control brand;
-       both are inherited built-in <color>/keyword properties re-specified
-       inside `.dark`. The `--accent-color` token is defined in the §5
-       color block below (custom properties resolve order-independently).
-       ═══════════════════════════════════════════════ */
-    color-scheme: light dark;
-    accent-color: var(--accent-color);
-
-    /* ═══════════════════════════════════════════════
-       §0  FONT TOKEN SOURCE-OF-TRUTH
-
-       The single authoritative declaration of the library's font register.
-       theme.css bridges each --font-stack-* to its Tailwind --font-* namespace
-       var; typography.css consumes the bridged --font-* names. The public
-       runtime knobs remain --font-*, --leading-*, --tracking-*.
-
-       ONE brand register: Plus Jakarta Sans (text + display) + Fira Code (mono).
-       --font-stack-text drives the body/heading/prose/display register — the
-       library DEFAULT is the register every live surface paints (the demo +
-       speedtest render Plus Jakarta everywhere). The calibrated "Plus Jakarta
-       Sans Fallback" / "Fira Code Fallback" faces (declared in typography.css)
-       wrap the system stacks with Capsize metric overrides so the swap window
-       is geometry-neutral (zero CLS). --font-stack-display aliases the text
-       register: there is no separate display-serif voice. */
-    --font-stack-text: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
-    --font-stack-display: var(--font-stack-text);
-    --font-stack-sans: var(--font-stack-text);
-    --font-stack-mono: "Fira Code", "Fira Code Fallback", "Fira Mono", monospace;
-
-    --type-leading-micro: 1.2;
-    --type-leading-caption: 1.3;
-    --type-leading-small: 1.4;
-    --type-leading-body: 1.5;
-    --type-leading-prose: 1.618;
-    --type-leading-heading: 1.2;
-    /* BB.W-DISPLAY-TRACKING — the display leading is tightened to the Apple
-       84/80 ≈ 1.05 signature (was 1.1). The DISPLAY ladder ONLY reads this rung;
-       --type-leading-heading (1.2) carries the heading/title register. */
-    --type-leading-display: 1.05;
-
-    --type-tracking-tight: -0.025em;
-    /* BB.W-DISPLAY-TRACKING — the DISPLAY-ONLY proportional negative tracking
-       rung (the Apple −1.5%-of-size signature: 80px → −1.2px = −0.015em). It is
-       em-relative, so the single value is a constant −1.5% across the whole
-       clamp() ladder (φ² → φ^(11/2)). MINTED as its OWN rung so the display
-       calibration NEVER bleeds into the shared --type-tracking-tight (the
-       heading/title/configurator register's tracking, kept at -0.025em). */
-    --type-tracking-display: -0.015em;
-    --type-tracking-snug: -0.01em;
-    --type-tracking-normal: 0;
-    --type-tracking-wide: 0.025em;
-    --type-tracking-wider: 0.05em;
-    --type-tracking-caps: 0.1em;
-
-    /* ═══════════════════════════════════════════════
-       §1  DURATION
-       ═══════════════════════════════════════════════ */
-    --duration-instant: 0.1s;
-    /* BC.W-CONTROL-SMOOTH — the named control-press SURFACE clock (the W-GLASS-CAL
-       per-register-clock discipline). An interactive control the user actively pokes
-       (hover-in, press, toggle) wants the iOS quick ~100-120ms surface beat, NOT the
-       0.2s calm card-crossfade beat — at 0.2s the colour/border/shadow easing drags
-       VISIBLY behind the pointer (the §F "super laggy" read). 0.12s brackets the iOS
-       100-120ms quick-control register (apple-ios27.md). `transition-control` (btn.css)
-       reads THIS so the whole control family re-times from one `:root` override, and
-       the surface beat now tracks the press-squish window (the press is `tap-squish`/
-       `useSpringPress`'s coupled transform leg on the spring's own clock — P3 fade-
-       coupled-to-transform). The bezier `--ease-standard` STAYS for the surface legs
-       (a colour cross-fade on a spring wobbles, §6 binding); only the DURATION shortens.
-       The CALM card register keeps `--duration-fast`/`--duration-normal` — a `<Card>` is
-       not an interactive control. */
-    --duration-control: 0.12s;
-    --duration-fast: 0.2s;
-    --duration-normal: 0.3s;
-    --duration-slow: 0.45s;
-    --duration-panel: 0.55s;
-    --duration-xl: 1s;
-    --duration-xxl: 1.5s;
-    --duration-shimmer-fast: 3s;
-    --duration-shimmer: 5s;
-    /* BB.W-METAL-SHIMMER — the brand-metal family's OWN slow dignified one-pass
-       clock (slower than the 5s generic shimmer). The metal sweep (gold·silver·
-       bronze, text-clip + border/mask) reads as a calm slow patina catch, not a
-       fast band-pass — the §6 calm register. (`--duration-seal` was never landed;
-       this is net-new, NOT a retirement re-point.) */
-    --duration-metal: 6s;
-    /* BA.W-GLASS-CAL (H2a) — `--duration-sparkle` (600ms) DELETED with the disco
-       recipe retirement: the sparkle-sweep keyframe + its sole `btn-audacious`
-       consumer are gone. */
-
-    /* AH.W5-e (FA-8 §4d) — motion-duration + staged-reveal canon.
-
-       Duration + delay tokens promoted from raw literals at speedtest's
-       celebratory-reveal SFCs (SpeedtestResults, ThankYou, ResultStack).
-       Unified under the `--motion-*` namespace (parallel to `--motion-ease-*`)
-       so all motion tokens cluster at one canon — duration + easing arm
-       together. (BB.W-DEAD-SWEEP retired the never-shipped CompleteBadge
-       staged-reveal cluster — no consumer existed.) */
-
-    /* Staged-entrance pairing — opacity + transform Vue <Transition> arms
-       in the celebratory headline + result-row reveals. Partners with
-       `--motion-ease-staged-entrance` / `--motion-ease-overshoot`. */
-    --motion-duration-staged: 320ms;
-
-    /* One-shot celebratory shimmer — gold-headline shimmer animation
-       duration + staging delay. Shared canon so the speedtest results
-       headline and the thank-you headline stay in lockstep. */
-    --motion-duration-complete-shimmer: 2.4s;
-    --motion-delay-complete-shimmer: 220ms;
-    /* The gold-headline shimmer reads these two tokens under a one-shot
-       animation: at 2.4s + 220ms delay the bright band traverses the headline
-       glyphs cleanly. Load-bearing — zeroing either collapses the shimmer to
-       an imperceptible blow-through. */
-
-    /* Staggered-reveal increment canon — three perceptually-distinct tiers for
-       per-row/per-cell/per-bar cascades:
-         • tight (40ms) — dense row cascades, sub-perceptual gap
-         • default (80ms) — the canonical row-stagger rhythm (matches
-           `useStagger`'s built-in fallback)
-         • relaxed (120ms) — wider cascades where each reveal carries its own
-           attention budget
-       Adjacent tiers keep cross-beats quiet (80 is the LCM of 40 and 2/3 of
-       120). Consumers read these via inline-style calc() or `getComputedStyle`
-       at runtime. */
-    --motion-stagger-tight: 40ms;
-    --motion-stagger-default: 80ms;
-    --motion-stagger-relaxed: 120ms;
-
-    /* Per-GLYPH stagger increment (BG.W-SECTION-TYPEWRITER-FADEUP). The DENSER
-       cadence for a per-CHARACTER cascade (a word/heading typing itself in) —
-       tighter than the per-ROW `--motion-stagger-*` tiers because dozens of
-       glyphs ride it and a row-scale gap would drag the tail past the eye. The
-       single source the `.char-stagger` recipe (typography/utilities.css) AND
-       the demo's `.story-section__heading` per-glyph reveal (story-hero.css)
-       both read — DRY, retune the whole per-glyph rhythm from ONE `:root`
-       override. Was a hardcoded `30ms` literal at both sites. */
-    --char-stagger-step: 30ms;
-
-    /* ═══════════════════════════════════════════════
-       §2.W BD.W-MOTION-WEIGHT — the GOVERNING motion scalar (rest decl)
-
-       The universal driver-motion governor (the @property reg lives in
-       property-regs.css §18 beside --ui-scale). 0 = still, 1 = full cel. Rest
-       1/φ ≈ 0.618: present, alive, never manic (§L4/§L6). DRIVER-scoped: a surface
-       the finger/route moved INHERITS this; an OBSERVER surface (auto-carousel
-       content, list reorder under scroll) pins it to 0 LOCALLY. It co-scales squash
-       depth, overshoot share, anticipation pull-back, and cartoon-shadow travel
-       together so they read as ONE proportioned deformation.
-
-       The SQUISH CAP is derived SITE-LOCALLY at the consuming element (the JS
-       getters in useDockOrientationMorph / useTabIndicator / useTabDragMorph /
-       useLiquidPress read `--motion-weight` off their OWN element and return
-       `1 + (cap_token − 1)·(weight + (1−weight)·flexVel)/0.618`), NEVER a `:root`
-       calc token — an unregistered `:root` cap calc over var(--motion-weight) is
-       substituted at :root (0.618) and inherits the FROZEN text, so a child's
-       scoped weight→0 would never re-evaluate it (the spike's load-bearing
-       correction). The cap reads the EXISTING `--*-max-stretch` token directly with
-       a (weight/0.618) factor — zero new `--*-stretch-k` coefficient cohort. */
-    --motion-weight: 0.618;
-
-    /* ═══════════════════════════════════════════════
-       §2.X BD.W-CARTOON-PUNCH — the third pole, a RAW shaped linear()
-
-       A single damped spring is monotone-from-one-side — it CANNOT dip below origin
-       then overshoot past it. iOS-27's loudest moments want ANTICIPATION (pull back
-       before launch) AND EXAGGERATION (punch past the spring fence). So it ships as
-       a hand-shaped linear() raw token: dip ~−4% BELOW origin (anticipation — a
-       thing no damped spring can do), cross 1.0, punch to ~1.22 (deliberately past
-       the ≤12% spring overshoot fence — which is WHY it is a register, not a
-       spring), settle. Exactly ONE sign change before the peak + a monotone settle
-       after (the shape-sanity fence).
-
-       NOT generated by regen-spring-tokens.mjs (which emits only (response,ζ)
-       springs from springPresets.ts), NOT a SPRING_PRESETS row, NOT a MOTION_CURVES
-       entry (MotionCurveKind is the closed spring|bezier union; a shaped linear()
-       with a negative leg is neither). A raw --ease-* property — zero engine
-       extension, zero TS change. Drives TRANSFORM/opacity ONLY (compositor-safe,
-       both engines — Baseline 17.2+, plain linear(), no -webkit prefix). The surface
-       composing it carries `--motion-weight: 1` in the SAME recipe (the loud-register
-       coupling — so the punch is never accidentally muted to ~+13.6% by inheriting
-       the rest 0.618). PRM zeroes the weight → the amplitude collapses (the springs
-       keep their own respectReducedMotion endpoint-snap). */
-    --ease-cartoon-punch: linear(
-        0, -0.012, -0.038 12%, -0.018 18%,
-        0.18 34%, 0.62 46%, 0.98 56%,
-        1.14 64%, 1.22 70%,
-        1.16 78%, 1.06 86%, 1.012 92%, 1
-    );
-
-    /* §2.Y BG.W-VIZ-REVEAL-BLOOM — the procedural-viz entrance-bloom clock (the ONE
-       consumer-retune knob for the one-shot `@keyframes substrate-reveal-bloom` in
-       viz-reveal.css; rides `--ease-cartoon-punch` for the ~+13% brightness overshoot). */
-    --substrate-reveal-duration: 1100ms;
-
-    /* ═══════════════════════════════════════════════
-       §2.A AMBIENT MOTION — Pulse aura tokens
-
-       Breathing rhythm for `<Pulse variant="aura">`. The 6s duration is the
-       canon ambient-pulse rate; scale 1.0 ↔ 1.15 reads as a quiet halo at
-       intensity="normal" (Pulse remaps min/max from its `intensity` prop).
-       Reduced motion: Pulse.vue parks at the min stop, breath cycle disabled.
-
-       AX.W57 (P6) — the aura re-baselined from a glowing DISC to an AMBIENT
-       halo. The egregiousness was doubly-stacked: a 0.55-density currentColor
-       radial multiplied by an element opacity the `ambient-pulse` keyframe
-       drove up to 0.95 mid-breath (so a saturated viz hue read as a near-
-       opaque throbbing blob). The fix is two decoupled, single-source knobs:
-         · `--pulse-aura-strength` (0..1) — the ONE gradient-density scalar
-           both color-mix stops derive via calc() (replaces the
-           `--pulse-aura-opacity-pct` / `-pct-num` twin desync trap — the
-           percent and the raw number had to be hand-kept in sync).
-         · `--pulse-aura-breath-{min,max}` — the aura's OWN element-opacity
-           range, decoupled from the shared `--pulse-aura-opacity-*` shimmer
-           tokens (those stay 0.55/0.95 for the neutral skeleton-breath, where
-           a grey shimmer at that range is the correct soft swell).
-       The loud old read is the explicit `intensity="vivid"` opt-in. */
-    --animate-ambient-pulse-duration: 6s;
-    --animate-ambient-pulse-scale-min: 1.0;
-    --animate-ambient-pulse-scale-max: 1.15;
-    --animate-ambient-pulse-easing: var(--ease-apple);
-
-    /* Aura gradient density — ONE scalar (0..1). The center stop paints at
-       `strength`, the mid stop at `strength * 0.35` (both via calc() in
-       Pulse.vue). 0.22 reads as an ambient wash, not a glowing disc. */
-    --pulse-aura-strength: 0.22;
-
-    /* Aura element-opacity breath range (the `ambient-pulse` keyframe stops).
-       Quiet: the halo stays a wash at every phase of the 6s cycle. */
-    --pulse-aura-breath-min: 0.28;
-    --pulse-aura-breath-max: 0.42;
-
-    /* Skeleton-breath shimmer range — the SHARED neutral-shimmer stops
-       (`.skeleton-breath` reads these; a grey shimmer at 0.55↔0.95 is the
-       correct soft swell, distinct from the aura's calmer breath above). */
-    --pulse-aura-opacity-min: 0.55;
-    --pulse-aura-opacity-max: 0.95;
-
-    /* ═══════════════════════════════════════════════
-       §2.B SECTIONED PROGRESS — phase-bus rail (AB.W3.T2)
-
-       The sectioned `<Progress variant="sectioned">` exposes one
-       height knob + one track tint knob. Defaults size the rail at
-       0.875rem (14px) — the W3 spec minimum (≥ 14px mobile, ≥ 18px
-       desktop). Consumers override the height per breakpoint via the
-       same token name on the consumer-side surface.
-
-       The bar reads as a recessed glass channel: inner top
-       catch-light + lower inner shadow + small outer drop. The
-       depth lives entirely in the Progress.vue scoped block; this
-       token only parameterises the rail BACKGROUND and HEIGHT —
-       depth shadows compose from the existing --shadow-color rung.
-       ═══════════════════════════════════════════════ */
-    --progress-sectioned-height: 0.875rem;
-    --progress-sectioned-track: var(--secondary);
-
-    /* ═══════════════════════════════════════════════
-       §2.C ANIMATION EXPRESSIVENESS
-
-       Two idiom families (the audacious press-ripple RETIRED at BA.W-GLASS-CAL):
-       • Progress lifecycle — the progress bar rides an intake pulse on
-         rising-edge, a crescendo brightening at ≥85%, and a one-shot discharge
-         flash at 100% (the crescendo is the typed `@property --progress-crescendo`).
-       • Chassis phase-tint companion — `@property --phase-tint-amount` so the
-         chassis backdrop warms toward the active phase, interpolating with
-         `--phase-color` across the consumer's phase-handoff window (600ms default).
-       ═══════════════════════════════════════════════ */
-
-    /* Progress lifecycle — typed crescendo + segment-local durations */
-    --motion-duration-progress-intake: 220ms;       /* rising-edge pulse */
-    --motion-duration-progress-crescendo: 240ms;    /* leading-edge brighten */
-    --motion-duration-progress-indeterminate: 4s;   /* indeterminate sweep period */
-
-    /* Chassis depth-of-tint peak — the amount `--phase-tint-amount`
-       interpolates toward when a phase is active. Subtle by intent;
-       a 6% color-mix reads as "warmth toward the phase" without
-       overwhelming the chassis chrome's resting register. */
-    --phase-tint-peak: 6%;
-
-    /* BA.W-GLASS-CAL (H2a) — the `btn-audacious` press-ripple knobs
-       (`--ripple-radius-max` 12rem, `--motion-duration-ripple` 340ms) DELETED
-       with the disco recipe retirement: the ripple was btn-audacious-private and
-       has no surviving consumer (the calm CTA register's press is the §6
-       `--scale-press-btn` scale beat). The `@property --ripple-radius`
-       registration retires with it (property-regs.css). */
-
-    /* Skeleton breath variant — the M.3 "known-imminent" loading
-       register. 6s cycle (the canon ambient rate) so a known-imminent
-       skeleton breathes in lockstep with the dial and the Pulse aura.
-       Coexists with the 1.5s shimmer (sliding gradient) and the
-       Tailwind animate-pulse (2s, short-wait) variants — distinct
-       temporal registers per use-case. */
-    --skeleton-breath-duration: 6s;
-
-    /* ═══════════════════════════════════════════════
-       §3  Z-INDEX SCALE
-       ═══════════════════════════════════════════════ */
-    /* V.W2 T12 — Aurora background tier (sits behind --z-background).
-       Consumed by `<Aurora>` in speedtest's App.vue (`-z-10` literal today). */
-    --z-behind: -10;
-    --z-background: 0;
-    --z-content: 10;
-    --z-controls: 20;
-    --z-bar: 30;
-    --z-header: 35;
-    --z-dock: 40;
-    --z-panel: 45;
-    --z-overlay: 50;
-    --z-hovercard: 120;
-    --z-tooltip: 120;
-    --z-popover: 130;
-    --z-modal: 140;
-    --z-fullscreen: 150;
-    --z-toast: 160;
-    --z-toggle: 999;
-    --z-max: 9999;
-    --z-debug: 99999;
-
-}
-
-/* ═══════════════════════════════════════════════
-   BD.W-MOTION-WEIGHT — the driver / observer carve (design.md §L4, gate C8)
-
-   The governing weight rests at the 1/φ centroid. LOUD DRIVERS — the dock morph
-   stage, an earned celebration — pin it to 1 so even a SLOW user-driven morph
-   rides the full squish/overshoot register (iOS reserves the weighty bounce for
-   what the user drives). CALM OBSERVERS — a programmatic reorder, an auto-advancing
-   carousel — pin it to 0: auto-motion that springs reads cheap. A single
-   element-scoped assignment, the same seam the PRM carve uses, inheriting down. */
-.liquid-stage {
-    --motion-weight: 1;
-}
-:where([data-reorder], [data-autoplay]) {
-    --motion-weight: 0;
-}
-
-/* ═══════════════════════════════════════════════
-   BI.W-TEMPO — the loud-scope tempo re-pin (the deliberate-weight carve, M11).
-
-   `--motion-tempo` (property-regs.css, initial 1.0 identity) is the global motion
-   TIME knob — a consumer sets `:root { --motion-tempo: 0.85 }` (the "options for
-   longer" clause of UF-G1) and every utility-UI spring clock + JS response tightens
-   in lockstep. The loud iOS-27 surfaces — the DOCK morph, the DRAWER sheet, the DECK
-   slide (composing `.liquid-stage`) — re-pin `--motion-tempo: 1` on their OWN scope
-   so the deliberately-landed BD.W-ANIM-IOS27-TUNE weight HOLDS where it was tuned,
-   while the ambient utility chrome follows the consumer's global scale (the SAME
-   `.liquid-stage { --motion-weight: 1 }` loud-driver carve pattern, for the TIME
-   axis). `:where()` keeps the specificity at 0 so a consumer's explicit per-instance
-   override still wins. At the 1.0 identity default this is a byte-no-op; it engages
-   ONLY when a consumer scales tempo globally.
-
-   ⟂ `--motion-weight` (magnitude) ⟂ `--ui-scale` (geometry) — the three scalars stay
-   disjoint (the NAMING FENCE). */
-:where(.glass-dock, .glass-drawer, .liquid-stage) {
-    --motion-tempo: 1;
-}
-
-/* ═══════════════════════════════════════════════
-   BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the calm opt-out
-
-   The DEFAULT interactive-transition SPATIAL register is now spring-derived
-   (`--transition-liquid-spatial` = the `smooth` spring, generated in scheme-spring.css),
-   so every interactive surface inherits weight on its scale/translate/rotate legs by
-   default — weight is a property of the transition VOCABULARY, not a per-site
-   `--motion-weight` checklist. A surface that wants the flat no-weight register opts
-   OUT explicitly via `.motion-calm` (the `<Card>` calm register, a data-dense table,
-   any consumer scope). The swap is scoped to the SPATIAL token; the EFFECTS legs keep
-   their `--ease-standard` bezier either way (the motion-canon P1 split). */
-.motion-calm {
-    --transition-liquid-spatial: var(--ease-standard);
-}
-
-/* ═══════════════════════════════════════════════
-   BD.W-MOTION-WEIGHT / BD.W-CARTOON-PUNCH — the PRM carve
-
-   ONE assignment zeroes ALL of the goo that rides on top of the springs. Because
-   every squish/punch/shadow-travel reads through `--motion-weight` (the site-local
-   cap collapses to `1 + (cap−1)·0 == 1.0`, the inert-cast travel/spread collapse to
-   their rest, the §2c velocity boost is gated by the same weight), this single line
-   zeroes the squash, the overshoot share, the anticipation pull, the cartoon-shadow
-   travel, AND the velocity boost together. The springs keep their own
-   `respectReducedMotion` endpoint-snap in SpringProgress; the weight zeroes only the
-   GOO. The fade survives. `--ease-cartoon-punch` re-aliases to the non-overshooting
-   standard ease (belt-and-suspenders — the weight=0 already kills the punch
-   amplitude on a weight-scaled surface; the alias also removes the curve shape for
-   any consumer driving a non-amplitude leg). */
-@media (prefers-reduced-motion: reduce) {
-    :root {
-        --motion-weight: 0;
-        --ease-cartoon-punch: var(--ease-standard);
-        /* BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the interactive-spatial DEFAULT loses its
-           overshoot under reduce (the vestibular floor). The re-alias is homed in
-           scheme-spring.css BESIDE its base `--transition-liquid-spatial: var(--spring-*)`
-           default (NOT here): both target `:root` at equal specificity, and scheme-spring.css
-           is @import-ed LAST of the token partials, so a re-alias parked in THIS earlier-
-           imported partial LOSES the source-order cascade to scheme-spring's base default and
-           the overshoot survives under reduce (the F5.2 paint-judge FAIL). The winning home is
-           the last-imported partial, after the base default — see scheme-spring.css. */
-    }
-}