@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/tokens/scroll-tokens.css

@@ -1,123 +1 @@
-/* tokens/scroll-tokens.css
-   §20 PLATFORM MOTION (AQ.W5) — the native-platform motion substrate knobs.
-   Carved WHOLE from tokens/scale-paper.css at BB.W-CARVE4 to hold the no-god-module
-   bound (the paper/control/display/metal/timeline/metric/table families §11–§19 stay
-   in scale-paper.css; §20 is the file's last section, so this is a contiguous tail
-   carve at the §19/§20 seam). @import-ed by tokens.css in cascade order IMMEDIATELY
-   AFTER scale-paper.css — an adjacent same-selector :root{} block carrying the SAME
-   declarations in the SAME relative order, so the dist is byte-isomorphic.
-
-   The motion families, each read by a `@supports`-gated CSS recipe:
-   scroll-driven.css / scroll-choreography.css, animations.css (§TOP-LAYER),
-   view-transition.css — every visual knob a token so a consumer retunes without
-   editing library source. */
-:root {
-    /* SCROLL-DRIVEN (scroll-driven.css). Values mirror the JS-fallback composable
-       defaults (`useScrollProgress` / `useStaggerReveal`) so the native CSS path and
-       the fallback path read identically — no visual seam at the `@supports` boundary. */
-    --scroll-progress-scroller: root;
-    --scroll-reveal-rise: 6px;
-    --scroll-reveal-range-end: 60%;
-
-    /* BB.W-SCROLL-MOTION — the scroll-CHOREOGRAPHY register knobs (the page-build /
-       section-cascade / scroll-pinned recipes in scroll-choreography.css). These
-       EXTEND the --scroll-reveal-* substrate above; the existing three are READ-ONLY
-       (the cascade COMPOSES them, it never re-tunes them). All distances are
-       compositor (transform) channels; the clocks are the per-spring settle clocks
-       (scheme-motion.css), threaded, never re-tuned. */
-    /* .scroll-build — the route-enter page-build (the chrome -> hero -> body
-       coordinated entrance). The rise is a touch deeper than the section cascade
-       (the page ASSEMBLES — a more pronounced settle), the step is the per-beat
-       coordinated stagger between the chrome, hero, and first-section beats. */
-    --scroll-build-rise: 1.5rem;
-    --scroll-build-step: 90ms;
-    /* .scroll-cascade — the orchestrated section cascade (the per-child view()
-       timeline, the spring-clocked coupled build). The rise lifts the bare
-       --scroll-reveal-rise 6px to a perceptible SOTA build; the range-end is the
-       reveal window (a touch tighter than the bare reveal so each section lands
-       crisply rather than dragging a long fade tail). The column-stagger delay is
-       the opt-in .scroll-cascade--columns grid-variant knob. */
-    --scroll-cascade-rise: 1.25rem;
-    --scroll-cascade-range-end: 45%;
-    --scroll-cascade-column-stagger: 60ms;
-    /* .scroll-pin — the fixed-stage-advances-time scroll-pinned register. The stage
-       height is the Nvh temporal space the sticky stage advances its phases across.
-       The phase windows the stage's internal phases key off (grid-reveal 0..reveal-end,
-       expand reveal-end..expand-end, settle expand-end..100% — the Codrops phased-
-       sequence shape) live in scroll-choreography.css as the `-frac` numerators
-       (`--scroll-pin-phase-reveal-end-frac` 0.382 / `--scroll-pin-phase-expand-end-frac`
-       0.9), the form the calc()s consume. */
-    --scroll-pin-stage-height: 320vh;
-    --scroll-pin-lift: 2.5rem;
-
-    /* TOP-LAYER (animations.css §TOP-LAYER). The `@starting-style` entry/exit
-       grammar for native `<dialog>` / `[popover]` glass surfaces. The backdrop dim
-       uses the house alpha-derivative `color-mix(in srgb, var(--background) Npct,
-       transparent)` (AZ.W-ADAPTIVE-AUTO A5-1). It is NOT the `hsl(var(--background)
-       / α)` channel form: `--background` is a COMPLETE `hsl()` color
-       (`= hsl(48 12% 98%)`), so `hsl(var(--background) / α)` double-wraps to
-       `hsl(hsl(…) / α)` — invalid, never paints (the modal dim was silently dead).
-       The genuine channel form would require `--background` declared as a bare
-       `H S% L%` triple, which it never is — hence the alpha-derivative mix. */
-    --top-layer-enter-scale: 0.96;
-    --top-layer-backdrop-blur: 8px;
-    --top-layer-backdrop-dim: 0.5;
-
-    /* VIEW-TRANSITION (view-transition.css). The shared `.gl-list-item` group recipe
-       + the `--vt-*` axes the `useViewTransition` substrate consumers (dock layer
-       swap, muster J's verdict re-rank) tune their swap against. */
-    --vt-duration: var(--duration-normal);
-    /* AX.W05 — ONE iOS-spring vocabulary: every spring-flavored transition reads
-       a governed `--spring-*` register. The legacy apple-spring cubic-bezier
-       (+27.5% overshoot) was a SECOND authority beside the regen `--spring-*`
-       cohort; it is EXCISED. Its emphatic-overshoot register maps to the playful
-       `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the VT
-       default + the cards/top-layer transitions share one spring primitive
-       (CPU + GPU sample the same curve). No cubic-bezier fallback seed survives —
-       the `linear()` spring degrades to `ease` where `linear()` is unsupported. */
-    --vt-ease: var(--spring-bouncy);
-    --vt-rise: 8px;
-
-    /* AT.W6-dock-c / AU.W8 — the dock layer-swap morph timing, minted ONCE so
-       both engine paths are timing-IDENTICAL: the FLIP fallback (via
-       `--dock-motion-resize`), the native View-Transition group (its
-       `animation-timing-function`), AND the runtime SpringProgress driver
-       (AU.W8.3) consume this same source curve. Retires the AQ.W6
-       fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
-       while the FLIP ran the snappy spring. `--vt-ease` still defaults the
-       other VT recipes (`.gl-list-item`).
-
-       BD.W-DOCK-CORE — the WEIGHTY iOS-27 re-tune. `--spring-dock` is now the
-       slow inertial gooey-morph register: (0.56s, ζ=0.58), an audacious overshoot
-       ~+11% then a deliberate settle over the 0.6s analytic clock — the
-       liquid-weight law (collapse/expand + V↔H + fission all share it). The prior
-       tight (0.32, 0.7) near-critical snap (~+4.6%) is retired. The runtime
-       driver's DOCK_SPRING const DERIVES from the `dock` PRESETS row via
-       `springPreset("dock")` (the no-second-authority fence — ONE table row, the
-       CSS token + the JS-driven morph + the const all flow from it). */
-    --dock-resize-spring: var(--spring-dock);
-
-    /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY
-       spring (`scale`/`rotate`) the dock controls apply to their hover/press
-       activation so the squish reads with a touch of spring-back rather than a
-       flat ease. STRICTLY transform-scoped: it must never touch the surface-tier
-       `[data-held]` fades (background/border/box-shadow), which stay on
-       `--duration-fast var(--ease-standard)`. The duration pairs with
-       `--duration-fast`; consumers retune the whole feel via this one token.
-
-       AY.W-DOCK2 (D6) — the register is `--spring-smooth`, the §6 easing-doctrine
-       transform-press register (tokens.css §2: transform hover/press/active →
-       `--spring-smooth`/`--spring-snappy`, NEVER `--spring-bouncy`; a press must
-       settle, never overshoot into a visible bounce). The prior `--spring-bouncy`
-       ROOT default was off-doctrine, shadowed for the four named controls by a
-       per-surface re-point in dock-controls.css — the exact per-surface fork the
-       doctrine kills. The re-point is now a DEAD byte-identical redeclaration and is
-       DELETED; the ROOT token IS the doctrine register, so any other consumer of
-       `--dock-press-spring` inherits the correct smooth register.
-
-       BA.W-GLASS-CAL Unit 3 — the duration leg re-times off the generic
-       `--duration-fast` (0.2s) onto `--spring-smooth-duration` (0.36s, the
-       smooth spring's OWN 2%-band envelope settle), so the press transform plays
-       at its physical settle rather than a generic clock. */
-    --dock-press-spring: var(--spring-smooth-duration) var(--spring-smooth);
-}
+:root { --scroll-reveal-rise: 6px; --scroll-reveal-range-end: 60%; --scroll-cascade-rise: 1.25rem; --scroll-cascade-range-end: 45%; --scroll-cascade-column-stagger: 6%; --scroll-pin-stage-height: 320vh; --scroll-pin-lift: 2.5rem; --top-layer-enter-scale: var(--enter-overlay-scale); --top-layer-enter-blur: var(--enter-overlay-blur); --top-layer-backdrop-blur: 8px; --top-layer-backdrop-dim: 0.5; --vt-duration: var(--duration-normal); --vt-ease: var(--spring-bouncy); --vt-rise: 8px; --dock-resize-spring: var(--spring-dock); --dock-press-spring: var(--spring-smooth-duration) var(--spring-smooth); }

package/dist/styles/tokens/shadow.css

@@ -1,226 +1 @@
-/* tokens/shadow.css
-   §7 shadows — the cartoon offset-stamp signature + the shadow-color base.
-   Carved from the tokens.css cascade root; @import-ed by tokens.css in
-   cascade order. Same :root cascade context as its siblings. */
-:root {
-    /* ═══════════════════════════════════════════════
-       §7  SHADOWS — cartoon offset is the signature
-       ═══════════════════════════════════════════════ */
-    /* BD.W-CARTOON-CEL-INK — the `--shadow-cartoon`/`-hover` aliases + the
-       `--shadow-modal` cartoon plane re-point onto the warm `--cartoon-ink-lead`
-       (0-blur down-LEFT, the cel family coherence — no neutral `--foreground` gray
-       smudge). `--cartoon-ink-lead` is defined below in this same :root block (custom
-       properties resolve order-independently). */
-    --shadow-cartoon:       -3px 3px 0px 0px var(--cartoon-ink-lead);
-    --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead);
-    --shadow-soft:          0 4px 12px rgba(0, 0, 0, 0.1);
-    --shadow-elevated:      0 8px 24px rgba(0, 0, 0, 0.12);
-    --shadow-modal:
-        -4px 4px 0px 0px var(--cartoon-ink-lead),
-        0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent);
-
-    --cartoon-shadow:       var(--shadow-cartoon);
-    --cartoon-shadow-hover: var(--shadow-cartoon-hover);
-    --soft-shadow:          var(--shadow-soft);
-    --elevated-shadow:      var(--shadow-elevated);
-    --modal-shadow:         var(--shadow-modal);
-
-    /* Elevation scale */
-    --shadow-xs: 0 1px 3px color-mix(in srgb, var(--shadow-color) 4%, transparent),
-        0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent);
-    --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent);
-    --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent);
-    --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent);
-    --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent);
-    --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent);
-
-    /* Z.W2.T3a — uniform-cast shadow rung. Offset 0 / 0, no directional
-       Y bias. Use case: dock-hosted icons (e.g. the speedtest settings
-       gear) where the surrounding dock shadow's downward cast reads as
-       a per-icon right-edge halo on the rightmost child (A2 §B7). The
-       uniform variant carries the same color-mix recipe family as the
-       sized rungs (`--shadow-md`, `--shadow-lg`) so the perceived
-       elevation is a peer, not a sibling. Consumers compose via
-       `--shadow-dock-override: var(--shadow-uniform)` per-instance, or
-       attach to per-icon-button stacks where directional cast is wrong-
-       shape. Documented in DESIGN.md token table. */
-    --shadow-uniform: 0 0 12px color-mix(in srgb, var(--shadow-color) 8%, transparent);
-
-    /* Card = soft drop plate by default. The cartoon offset is a brand-flavoured
-       decoration (a sticker look), not the canonical card shape. Consumers
-       wanting the cartoon look pass <Card surface="cartoon">, which composes the
-       `.cartoon-surface` utility (it reads --shadow-cartoon directly). R3-spec
-       §F.1, S.W4; Q.W3 Lane H. */
-    --shadow-card:       var(--shadow-md);
-    --card-shadow:       var(--shadow-card);
-
-    /* AI.W1-α — sticky CardHeader background. Parameterises the
-       `bg-card/60` literal value.js's PaneHeader.vue carried so the
-       glass-ui canon owns the recipe. The scroll-driven `<CardHeader
-       shrink>` choreography reads this token for its sticky-header
-       backdrop tint; consumers retune per-app by overriding the
-       variable at any ancestor. Auto-dark via `--card`. */
-    --card-header-bg:    color-mix(in srgb, var(--card) 60%, transparent);
-
-    /* Dock shadows — a single omnidirectional glow in the
-       `--shadow-md`/`--shadow-lg` family (a directional drop concentrated on
-       the pill's rounded right cap as a right-edge halo; the dock's own
-       border already defines the silhouette). Per-instance directional drop
-       reinstates via `--shadow-dock-override` (consumed by every `.glass-dock`
-       state selector — see dock.css). */
-    --shadow-dock:           0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent);
-    --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent);
-    --dock-shadow:           var(--shadow-dock);
-    --dock-shadow-collapsed: var(--shadow-dock-collapsed);
-
-    /* AX.W04 F1 — the wrap/card-tier dock shadow. A wrapped multi-row dock (and
-       any finite-radius card silhouette) is a THICKER material than a flat thin
-       pill — WWDC25 §219 "material thickens as glass flexes larger". So when the
-       wrap dock expands it lifts its elevation onto the FLOATING-tier shadow
-       stack (the `--glass-shadow-floating` family — `--shadow-xl` + the
-       `--glass-material-rim` hairline + the `--glass-under-shadow-vivid` under-cast)
-       rather than carrying the flat `--shadow-dock` glow of a 40px pill. Composed
-       on `:root` as ONE consumer-overridable token (per the cartoon-shadow
-       override contract — override on the cascade, never a dead local). The dock
-       reads it via `calc()`-on-`--dock-expand-t` so the lift glides in lockstep
-       with the pill→card radius morph (ONE clock, ONE register). */
-    --glass-material-rim:    0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent);
-    --shadow-dock-wrap:      var(--shadow-xl),
-        var(--glass-material-rim),
-        var(--glass-under-shadow-vivid);
-
-    /* Cartoon shadow color primitives (kept for tiered cartoon utilities) */
-    --shadow-cartoon-color:             rgb(0 0 0 / 0.12);
-    --shadow-cartoon-color-soft:        rgb(0 0 0 / 0.06);
-
-    /* ── BD.W-CARTOON-CEL-INK — the cartoon register's OWN warm cel ink ──────────────
-       Decoupled from `--shadow-color` so a consumer retunes the cast without
-       disturbing every elevation box-shadow. Built by EXTRACTING the warm
-       `--foreground` hue (`oklch from`) and FLOORING chroma (`max(c, 0.11)` —
-       TECHNICOLOR, not merely-non-gray, the BA.W-NO-GRAY discipline applied to the
-       cast) + DEEPENING L (`clamp(0.14, l, 0.18)`) so at stamp opacity it reads as a
-       COLORED cel line, never a neutral gray. A cel cast is INK — it stays a warm DARK
-       ink (the dark arm pins its own warm dark ink, dark-arm.css). The three planes
-       step DOWN in opacity (lead 32% / mid 26% / contact 18%) — `in oklab` NOT
-       `in srgb` (srgb muddies a warm dark ink toward gray as it dilutes; oklab holds
-       the warm hue stable across the alpha ramp — the landed gray-dilution defect). */
-    --cartoon-ink: oklch(from var(--foreground) clamp(0.14, l, 0.18) max(c, 0.11) h);
-    --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 32%, transparent);
-    --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 26%, transparent);
-    --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 18%, transparent);
-    /* `@supports not (oklch from …)` floors the ink to a named warm sRGB literal
-       (a legacy engine gets a WARM — not gray — stamp; NO dead inline literal). */
-    --cartoon-ink-fallback: #4a3320;
-
-    /* BD.W-CARTOON-CEL-INK — the tiered cel-ink STAMP, re-pointed to the warm
-       `--cartoon-ink` rungs at HARD 0-BLUR (lead + mid + contact all 0px — the cel
-       edge; the landed 1–2px soft blur is the gray-smudge defect), keeping the LANDED
-       down-LEFT geometry (REFINE-not-flip — the direction is coherent with the
-       upper-right `--glass-key`; cast lands lower-LEFT). φ-cadenced offsets. */
-    --shadow-cartoon-sm:
-        -2px 2px 0 var(--cartoon-ink-lead),
-        -3px 3px 0 var(--cartoon-ink-mid),
-        -4px 4px 0 var(--cartoon-ink-contact);
-    --shadow-cartoon-md:
-        -3px 3px 0 var(--cartoon-ink-lead),
-        -5px 5px 0 var(--cartoon-ink-mid),
-        -7px 7px 0 var(--cartoon-ink-contact);
-    --shadow-cartoon-lg:
-        -4px 4px 0 var(--cartoon-ink-lead),
-        -7px 7px 0 var(--cartoon-ink-mid),
-       -11px 11px 0 var(--cartoon-ink-contact);
-    --cartoon-shadow-sm: var(--shadow-cartoon-sm);
-    --cartoon-shadow-md: var(--shadow-cartoon-md);
-    --cartoon-shadow-lg: var(--shadow-cartoon-lg);
-
-    /* AY.W-COHERE E2 — the gel-bead ambient contact shadow (the GooBlob lit dome).
-       The metaball bead is NOT a Memphis sticker — it is a lit gel dome sitting IN
-       a scene, so it casts a SOFT, NEAR-CENTERED, low-offset ambient contact
-       shadow (small downward offset, a large soft blur, ambient-tinted), in the
-       same soft-ambient-light register the constellation / fourier / aurora
-       substrates speak — NOT the hard `5px 5px` near-black offset-stamp the
-       cartoon family carries (that stamp stays the identity of
-       <Card surface="cartoon">; it is removed ONLY from the gel bead, a different
-       lighting language). The shadow color is ambient: the bead's own
-       `--blob-color` mixed toward `--shadow-color` at a LOW strength, so the dome
-       casts a faint tinted contact shade. Adaptive-by-construction: `--shadow-color`
-       is `var(--foreground)`, which flips light→dark, so the contact shadow
-       re-resolves under `.dark` with NO hardcoded `.dark` re-declaration (the house
-       cartoon-shadow contract's pattern, applied to the ambient shadow). A consumer
-       retunes the bead's lighting by overriding `--blob-shadow` (or the
-       `--blob-shadow-*` sub-axes) on the cascade. */
-    --blob-shadow-offset: 0 4px;
-    --blob-shadow-blur:   14px;
-    --blob-shadow-color:  color-mix(in srgb,
-        var(--blob-color, var(--shadow-color)) 22%, var(--shadow-color));
-    --blob-shadow-strength: 20%;
-    /* The AMBIENT cast (the soft diffuse drop) — the dome floats a little above its
-       surface. This is the first drop-shadow rung. */
-    --blob-shadow-ambient: var(--blob-shadow-offset) var(--blob-shadow-blur)
-        color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-strength), transparent);
-
-    /* AZ.W-BLOB-STUDIO D4 — the GROUNDED gel-dome read. A single soft ambient cast
-       reads as a swatch FLOATING — there is no contact, no AO, nothing that says the
-       dome SITS on a surface. The grounded read is a TWO-RUNG drop-shadow composite
-       (drop-shadow filters chain, and EACH follows the irregular metaball silhouette —
-       a box-shadow would stamp a rectangle, missing the necking satellites): the soft
-       AMBIENT cast above PLUS a TIGHT, LOW-OFFSET, DARKER CONTACT band hugging the dome
-       base. The contact rung is the gravity cue — a near-zero blur, a small downward
-       offset, and ~2× the ambient strength, so the silhouette base READS pressed against
-       the surface (the contact-darkening AO the satellites pick up where they merge into
-       the body, since the drop-shadow hugs the WHOLE necked silhouette including the
-       satellite bulges). Both rungs ride the SAME `--blob-shadow-color` (the ambient
-       `--shadow-color`/`--foreground` base), so the grounded read re-resolves under
-       `.dark` with no hardcoded dark block (the house cartoon-shadow adaptive pattern).
-       A consumer retunes grounding by overriding `--blob-shadow-contact-*` or the whole
-       `--blob-shadow` composite on the cascade. */
-    --blob-shadow-contact-offset: 0 1px;
-    --blob-shadow-contact-blur:   3px;
-    --blob-shadow-contact-strength: 38%;
-    --blob-shadow-contact: var(--blob-shadow-contact-offset) var(--blob-shadow-contact-blur)
-        color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-contact-strength), transparent);
-
-    /* The grounded composite is consumed by GooBlob.vue as TWO chained drop-shadow()
-       filters: drop-shadow(ambient) drop-shadow(contact). `--blob-shadow` keeps the
-       single-rung ambient value (back-compat: a consumer reading the old token still
-       gets the soft cast); the grounded read is the explicit two-rung pair. */
-    --blob-shadow: var(--blob-shadow-ambient);
-
-    /* The hover lift — the ambient cast deepens + softens (the dome rises) AND the
-       contact band TIGHTENS toward the lifted base (a touch of extra grounding-darken
-       as the dome presses on its surface on the rise). */
-    --blob-shadow-hover: 0 6px 20px
-        color-mix(in srgb, var(--blob-shadow-color) 26%, transparent);
-    --blob-shadow-contact-hover: 0 1px 4px
-        color-mix(in srgb, var(--blob-shadow-color) 44%, transparent);
-
-}
-
-/* BD.W-CARTOON-CEL-INK — the relative-color-syntax fallback. On a legacy engine that
-   lacks `oklch(from …)`, `--cartoon-ink` would be invalid (the whole cast drops). Floor
-   it to the named warm sRGB literal `--cartoon-ink-fallback` (NOT a dead inline literal)
-   so the cel stamp degrades to a WARM — never gray, never empty — ink. The three
-   strength rungs re-derive off the floored ink for free (they `color-mix` it). */
-@supports not (color: oklch(from white l c h)) {
-    :root {
-        --cartoon-ink: var(--cartoon-ink-fallback);
-    }
-}
-
-/* BD.W-CARTOON-CEL-INK — prefers-contrast / reduced-transparency floor the inked edge
-   UP (the cel cast is a legibility ASSET, not decoration; PRT is NOT a no-op — the cast
-   is translucent ink). */
-@media (prefers-contrast: more) {
-    :root {
-        --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 42%, transparent);
-        --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 34%, transparent);
-        --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent);
-    }
-}
-@media (prefers-reduced-transparency: reduce) {
-    :root {
-        --cartoon-ink-lead:    color-mix(in oklab, var(--cartoon-ink) 42%, transparent);
-        --cartoon-ink-mid:     color-mix(in oklab, var(--cartoon-ink) 34%, transparent);
-        --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent);
-    }
-}
+:root { --shadow-cartoon: -3px 3px 0px 0px var(--cartoon-ink-lead); --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-modal: -4px 4px 0px 0px var(--cartoon-ink-lead), 0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent); --cartoon-shadow: var(--shadow-cartoon); --cartoon-shadow-hover: var(--shadow-cartoon-hover); --soft-shadow: var(--shadow-soft); --elevated-shadow: var(--shadow-elevated); --modal-shadow: var(--shadow-modal); --shadow-xs: 0 1px 3px color-mix(in srgb, var(--shadow-color) 4%, transparent), 0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent); --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent); --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent); --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent); --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent); --shadow-uniform: 0 0 12px color-mix(in srgb, var(--shadow-color) 8%, transparent); --shadow-card: var(--shadow-md); --card-shadow: var(--shadow-card); --card-header-bg: color-mix(in srgb, var(--card) 60%, transparent); --shadow-dock: 0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent); --dock-shadow: var(--shadow-dock); --dock-shadow-collapsed: var(--shadow-dock-collapsed); --glass-material-rim: 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent); --shadow-dock-wrap: var(--shadow-xl), var(--glass-material-rim), var(--glass-under-shadow-vivid); --shadow-cartoon-color: rgb(0 0 0 / 0.12); --shadow-cartoon-color-soft: rgb(0 0 0 / 0.06); --cartoon-ink: oklch(from var(--foreground) clamp(0.28, l, 0.34) clamp(0.030, c, 0.050) h); --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 32%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 26%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 18%, transparent); --cartoon-ink-fallback: #34251a; --shadow-cartoon-sm: -2px 2px 0 var(--cartoon-ink-lead), -3px 3px 0 var(--cartoon-ink-mid), -4px 4px 0 var(--cartoon-ink-contact); --shadow-cartoon-md: -3px 3px 0 var(--cartoon-ink-lead), -5px 5px 0 var(--cartoon-ink-mid), -7px 7px 0 var(--cartoon-ink-contact); --shadow-cartoon-lg: -4px 4px 0 var(--cartoon-ink-lead), -7px 7px 0 var(--cartoon-ink-mid), -11px 11px 0 var(--cartoon-ink-contact); --cartoon-shadow-sm: var(--shadow-cartoon-sm); --cartoon-shadow-md: var(--shadow-cartoon-md); --cartoon-shadow-lg: var(--shadow-cartoon-lg); --blob-shadow-offset: 0 4px; --blob-shadow-blur: 14px; --blob-shadow-color: color-mix(in srgb, var(--blob-color, var(--shadow-color)) 22%, var(--shadow-color)); --blob-shadow-strength: 20%; --blob-shadow-ambient: var(--blob-shadow-offset) var(--blob-shadow-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-strength), transparent); --blob-shadow-contact-offset: 0 1px; --blob-shadow-contact-blur: 3px; --blob-shadow-contact-strength: 38%; --blob-shadow-contact: var(--blob-shadow-contact-offset) var(--blob-shadow-contact-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-contact-strength), transparent); --blob-shadow: var(--blob-shadow-ambient); --blob-shadow-hover: 0 6px 20px color-mix(in srgb, var(--blob-shadow-color) 26%, transparent); --blob-shadow-contact-hover: 0 1px 4px color-mix(in srgb, var(--blob-shadow-color) 44%, transparent); } @supports not (color: oklch(from white l c h)) { :root { --cartoon-ink: var(--cartoon-ink-fallback); } } @media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { :root { --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 42%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 34%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent); } }

package/dist/styles/tokens/sizing-config.css

@@ -1,110 +1 @@
-/* tokens/sizing-config.css
-   §10 sizing tail — the MetricBadge stacked geometry + the Configurator family
-   (the density ladder, the AZ.W-HIERARCHY section/label/preset vocabulary, the
-   single-column stage floor, the dark-adaptive divider register, the section
-   tonal step) + the component-font override.
-   Carved (BC.W-CARVE6) from the tail of tokens/sizing.css to hold the 500-line
-   no-god-module bound; @import-ed by tokens.css IMMEDIATELY AFTER sizing.css at
-   sizing's own cascade slot — adjacent same-selector :root blocks resolve
-   identically, so the dist is byte-isomorphic.
-   See docs/precepts/design-idioms.md §cohesion-aware partials. */
-:root {
-    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
-       (label / value+unit) wants a taller floor than the inline pill so the
-       label has breathing room above the baseline pair. T.W2.T2 +
-       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
-       min-height with 6px (0.375rem) block padding. The inline ladder
-       keeps its tight defaults via `--metric-badge-min-height` /
-       `--metric-badge-padding-block` (declared inline at the
-       `.metric-badge` selector). */
-    --metric-badge-min-height-stacked: 2.625rem;
-    --metric-badge-padding-block-stacked: 0.375rem;
-
-    /* Configurator — N.W2 Lane A density axis (4 rungs).
-       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
-       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
-       see no visual change. `mobile` halves the vertical breathing room
-       for narrow-viewport studios; `spacious` doubles it for settings-
-       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
-       selector binding. */
-    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
-    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
-    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
-    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
-
-    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
-    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
-    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
-    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
-
-    /* Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY — D6-3). The three
-       NAMED registers the studios (blob, aurora) inherit instead of a flat
-       undifferentiated stack. DISTINCT from the density ladder above (which is
-       the per-row CADENCE, not the section/label/preset register).
-
-       1. Section register — the <ConfiguratorLayer> label reads as a SECTION,
-          not a row: the √φ subheading rung at weight 600, lifting off the prior
-          flat `text-small font-semibold`. */
-    --configurator-section-size: var(--type-subheading);  /* 20.4px — √φ section rung */
-    --configurator-section-weight: 600;                   /* the heading weight */
-
-    /* AZ.W-BLOB-REDRESS — the SINGLE-COLUMN stage-row FLOOR. Below `lg` the
-       Configurator stacks stage-over-aside; a percentage stage height against
-       an INDEFINITE auto-row resolves to 0 (the GooBlob hero painted 0×0 on a
-       phone). The single-column band's `grid-template-rows` floors the stage
-       row at this DEFINITE `minmax(…)` minimum so the percentage resolves;
-       the aside row takes the remainder and scrolls internally. */
-    --configurator-stage-min: 18rem;                      /* 288px — the mobile live-specimen stage floor */
-
-    /* 2. Preset-row PRIMARY-AFFORDANCE lift. The preset picker is the primary
-          interaction (C6-10); D6-3's defect is the preset row being spatially
-          CRAMPED. This token's binding SEMANTIC is the preset row's SPATIAL
-          rhythm — its block-padding / gap, NOT a font-weight — so the preset
-          row breathes ABOVE a body ConfiguratorRow. (The `-weight` name follows
-          the vocabulary's "register weight" framing; it lands on the padding/gap
-          slot of `.configurator-presets`, the heavier spatial cadence.) */
-    --configurator-preset-row-weight: 0.625rem;           /* 10px — > a body row's 8px py-comfortable */
-    --configurator-preset-row-gap: 0.5rem;                /*  8px — generous chip gap */
-
-    /* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1 / CFG-4).
-       The section + inter-row dividers used to be inline `border-border/40` and
-       `border-border/30` Tailwind alphas; over the W-DARK-MATERIAL dark
-       `glass-floating` plate (a luminous transmissive material, --card L16) those
-       near-equal-luminance hairlines effectively VANISHED — "the sections run
-       together". This ONE token is consumed by every divider rule (the
-       <ConfiguratorLayer> section border, the dividers-prop inter-row border,
-       Configurator.vue's aside/preset/footer borders, configurator.css) so the
-       divider weight is retuned from a single override.
-
-       The dark-LIFTING arm is the load-bearing half: the divider must read on
-       BOTH plates. On LIGHT it is the resting `--border` warm-neutral at the
-       prior ~40% weight; on DARK it LIFTS off `--border` (L34 over the L16 plate
-       — too close) toward the `--foreground` warm-ink (L90) at a higher α, so a
-       visible luminance step survives the dark glass. `light-dark()` carries the
-       arm in ONE declaration (the same :root cascade context as the surface-tint
-       family; an engine without `light-dark()` falls back to the dark-arm.css
-       `.dark` floor minted in lockstep). The SECTION divider runs a touch
-       heavier than the inter-row hairline (a section reads as a section without
-       a second heading rung). */
-    --configurator-divider: light-dark(
-        color-mix(in srgb, var(--border) 55%, transparent),
-        color-mix(in srgb, var(--foreground) 22%, transparent)
-    );
-    --configurator-divider-section: light-dark(
-        color-mix(in srgb, var(--border) 70%, transparent),
-        color-mix(in srgb, var(--foreground) 30%, transparent)
-    );
-    /* The optional faint section-header tonal step — a whisper-light warm wash
-       behind a <ConfiguratorLayer> section so it reads as a grouped section
-       WITHOUT a new heading rung (within the W-HIERARCHY register). Default off
-       (transparent) on light where the hairline carries it; a faint
-       foreground-over-transparent lift on dark where the divider alone is
-       subtle. */
-    --configurator-section-tint: light-dark(
-        transparent,
-        color-mix(in srgb, var(--foreground) 3%, transparent)
-    );
-
-    /* Component font override (consumers override locally) */
-    --select-font: inherit;
-}
+:root { --metric-badge-min-height-stacked: 2.625rem; --metric-badge-padding-block-stacked: 0.375rem; --configurator-row-gap-mobile: 0.25rem; --configurator-row-gap-compact: 0.3125rem; --configurator-row-gap-comfortable: 0.375rem; --configurator-row-gap-spacious: 0.75rem; --configurator-row-py-mobile: 0.25rem; --configurator-row-py-compact: 0.375rem; --configurator-row-py-comfortable: 0.5rem; --configurator-row-py-spacious: 0.875rem; --configurator-section-size: var(--type-subheading); --configurator-section-weight: 600; --configurator-stage-min: 18rem; --configurator-preset-row-weight: 0.625rem; --configurator-preset-row-gap: 0.5rem; --configurator-divider: light-dark( color-mix(in srgb, var(--border) 55%, transparent), color-mix(in srgb, var(--foreground) 22%, transparent) ); --configurator-divider-section: light-dark( color-mix(in srgb, var(--border) 70%, transparent), color-mix(in srgb, var(--foreground) 30%, transparent) ); --configurator-section-tint: light-dark( transparent, color-mix(in srgb, var(--foreground) 3%, transparent) ); --select-font: inherit; }