@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/tokens/shadow.css

@@ -1,166 +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
-       ═══════════════════════════════════════════════ */
-    --shadow-cartoon:       3px 3px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
-    --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 10%, transparent);
-    --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 color-mix(in srgb, var(--foreground) 8%, transparent),
-        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);
-
-    /* Tiered cartoon shadows */
-    --shadow-cartoon-sm: -3px 2px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
-        0 3px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
-        -3px 3px 1px color-mix(in srgb, var(--shadow-color) 6%, transparent);
-    --shadow-cartoon-md: -4px 3px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        0 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        -4px 4px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
-    --shadow-cartoon-lg: -6px 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        0 6px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
-        -6px 6px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
-    --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);
-
-}
+: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; }