@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/tokens/shadow.css

@@ -1,232 +0,0 @@
-/* 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);
-
-    /* ── BG.W-CARTOON-INK-GAMUT — the cartoon register's OWN warm-brown 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`) at an IN-GAMUT warm-brown lightness+chroma:
-       `clamp(0.28, l, 0.34)` lifts the near-black `--foreground` L into the brown
-       midtone band, and `clamp(0.030, c, 0.050)` holds chroma in the range sRGB can
-       actually represent at that L. The maroon DEFECT this kills: the prior
-       `max(c, 0.11)` floor at `clamp(0.14, l, 0.18)` was OUT OF GAMUT at low L — sRGB
-       cannot hold C 0.11 at L 0.18, so the browser clamped each channel and the ink
-       collapsed to a flat maroon `rgb(49,0,0)` (B=0). Chroma-vs-darkness here is a
-       DESIGN choice, NOT a gamut law (the false "gamut-necessity"/"TECHNICOLOR-floor"
-       comment is retired). The pin resolves a warm brown (R>G>B>0) at OKLab hue ~57°
-       (light) / ~77° (dark) — both inside the [45,85]° warm register, never the maroon.
-       A cel cast is INK — the dark arm keeps ONLY its mode-correct alpha rungs + its
-       own re-derived fallback; the `:root` pin itself cascades through the dark
-       `--foreground` (the DRY-collapse, 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.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);
-    /* `@supports not (oklch from …)` floors the ink to a named warm sRGB literal
-       (a legacy engine gets a WARM — not gray, not maroon — stamp; NO dead inline
-       literal). Re-derived from the in-gamut pin's RESOLVED sRGB at the light
-       `--foreground` (the painted L floors below the old `#4a3320` nominal):
-       `oklch(0.28 0.030 56°)` → ~rgb(52,37,26). */
-    --cartoon-ink-fallback: #34251a;
-
-    /* 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);
-    }
-}
-
-/* BG.W-CARTOON-INK-GAMUT — 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). The two byte-identical arms fold into ONE comma-joined query (the
-   DRY dup pass). The deepen rides ALPHA (32→42%), NEVER chroma — the in-gamut warm-brown
-   hue is preserved across the bracket. */
-@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/src/styles/tokens/sizing-config.css

@@ -1,110 +0,0 @@
-/* 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;
-}