@mkbabb/glass-ui 3.13.0 → 4.0.0

package/dist/styles/typography.css

@@ -20,511 +20,27 @@
  * register lives in tokens.css §0 (--font-stack-text/-display/-mono), bridged
  * to --font-text/-display/-mono in theme.css; consumers override --font-text
  * once to rebrand, no third-party CDN dependency on the LCP-critical path.
+ *
+ * BA.W-CARVE2 — the §1-§10 face/scale/semantic/utility registers grew past the
+ * no-god-module 500-line bound (W-SUFFUSE/W-HIERARCHY's display-ladder +
+ * section-rung additions). This file is now a thin @import root over cohesive
+ * typography/*.css partials (each under bound), @import-ed below in CASCADE
+ * ORDER. The ordering is load-bearing: the faces + --type-* scale tokens FIRST
+ * (the semantic classes read them), the semantic register classes SECOND, the
+ * math/mono/aux utilities LAST. The carve moves rules across files in the SAME
+ * source position → byte-isomorphic dist (the no-god-module import-order gate
+ * is the witness; the dist/glass-ui.css emit is byte-identical):
+ *   1. typography/scale.css     — the OFL fallback @font-face declarations +
+ *                                 the :root √φ --type-* scale tokens.
+ *   2. typography/semantic.css  — the body{} cascade + the DISPLAY/HEADING/
+ *                                 BODY/MICRO/ADMIN-LABEL @utility classes.
+ *   3. typography/utilities.css — the MATH/MONO/FONT-FAMILY/ORNAMENTAL @utility
+ *                                 set + the @layer components AUX hooks
+ *                                 (section-label/pane-title/kinetic).
+ *
+ * @import-ed by index.css (cascade rung after tokens.css); the carve keeps the
+ * SAME source position → byte-isomorphic dist.
  */
-
-/* ═══════════════════════════════════════════════
-   OFL FACE FILES — Plus Jakarta Sans (brand display)
-   ═══════════════════════════════════════════════ */
-
-/* The payload-bearing "Plus Jakarta Sans" faces live in `fonts.css`
-   (`@mkbabb/glass-ui/styles/fonts`), split off the critical entry path so
-   `./styles` does not carry the ~99 KB-gzipped font binary. The calibrated
-   `local()` fallback face below carries NO payload, stays on the critical
-   path, and paints during the `font-display: optional` window. Its metric
-   overrides (per system face) were derived via @capsizecss/core's
-   `createFontStack` against the bundled latin woff2 — the swap is metrically
-   neutral (no CLS). */
-@font-face {
-    font-family: "Plus Jakarta Sans Fallback";
-    src:
-        local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"),
-        local("-apple-system");
-    ascent-override: 92.3784%;
-    descent-override: 19.7572%;
-    size-adjust: 112.3639%;
-}
-@font-face {
-    font-family: "Plus Jakarta Sans Fallback";
-    src: local("Segoe UI"), local("SegoeUI");
-    ascent-override: 98.3348%;
-    descent-override: 21.0311%;
-    size-adjust: 105.5577%;
-}
-@font-face {
-    font-family: "Plus Jakarta Sans Fallback";
-    src: local("Roboto Regular"), local("Roboto-Regular");
-    ascent-override: 98.6597%;
-    descent-override: 21.1006%;
-    size-adjust: 105.2101%;
-}
-@font-face {
-    font-family: "Plus Jakarta Sans Fallback";
-    src: local("Arial"), local("ArialMT");
-    ascent-override: 98.8763%;
-    descent-override: 21.147%;
-    line-gap-override: 0%;
-    size-adjust: 104.9796%;
-}
-
-/* ═══════════════════════════════════════════════
-   OFL FACE FILES — Fira Code (canonical mono)
-   ═══════════════════════════════════════════════ */
-
-/* The payload-bearing "Fira Code" faces live in `fonts.css`
-   (`@mkbabb/glass-ui/styles/fonts`), split off the critical entry path. The
-   calibrated `local()` fallback face below carries NO payload, stays on the
-   critical path, and covers the `font-display: swap` window. Its metric
-   overrides reference Roboto Mono (the platform monos cluster within ~2%);
-   size-adjust ≈ 1.0 makes the swap geometrically transparent. */
-@font-face {
-    font-family: "Fira Code Fallback";
-    src:
-        local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"),
-        local("Courier New"), local("Roboto Mono Regular");
-    ascent-override: 99.0161%;
-    descent-override: 32.2052%;
-    size-adjust: 99.9837%;
-}
-
-:root {
-    /* Font family tokens. `--font-text` / `--font-display` / `--font-serif` /
-       `--font-mono` are NOT declared here — their source-of-truth lives in
-       tokens.css §0 (`--font-stack-*`), bridged to Tailwind via theme.css's
-       `@theme` block; declaring `:root` literals here would shadow consumer
-       `@theme` overrides (un-layered `:root` wins over `@layer theme`). The
-       self-hosted faces above expose `"Plus Jakarta Sans"` + `"Fira Code"`,
-       each pairing with a calibrated `"... Fallback"`. The brand text register
-       (Plus Jakarta Sans) engages by default for every consumer; --font-mono
-       references `"Fira Code"` first then the fallback chain. */
-
-    /* Scale tokens */
-    --type-admin-label: 0.625rem; /* 10px — fixed sub-control micro (NOT fluid) */
-    --type-micro: 0.6875rem; /* 11px — fixed sub-control micro (NOT fluid) */
-    /* BODY/CONTROL register (AY.W-SCALE1 — the desktop-fluid half of corpus #4):
-       a GENTLE clamp() viewport base so the control/body register grows ~1-2 steps
-       on a wide display (the 27" "font too small" the user flagged) WITHOUT a
-       media-query staircase. The <min> of every clamp is the rung's prior fixed rem
-       — byte-identical at narrow/mobile (no shipped-narrow reflow; the coarse 1.5×
-       --ui-scale still lifts the comfort axis ON TOP). The vw slope is the body
-       register's GENTLE slope (not the φ-display ladder's aggressive vw) — the
-       "non-contrived" bar. The vw fluid term lives HERE (the typographic base),
-       exactly ONCE; the --ui-scale comfort scalar multiplies it exactly ONCE LATER
-       (tokens.css --control-text/-sm) — NO double-vw under coarse. The φ-identity
-       rungs below (--type-subheading/-heading/-title + the --type-display-* ladder)
-       are EXCLUDED — a hero/title is a typographic identity, not a control. */
-    --type-caption: clamp(
-        0.75rem,
-        0.71rem + 0.21vw,
-        1rem
-    ); /* 12px floor — --control-text-sm source */
-    --type-small: clamp(
-        0.875rem,
-        0.8rem + 0.25vw,
-        1.25rem
-    ); /* 14px floor — --control-text source (the workhorse) */
-    --type-body: clamp(
-        1rem,
-        0.92rem + 0.27vw,
-        1.375rem
-    ); /* 16px floor — global body cascade */
-    --type-prose: clamp(
-        1.125rem,
-        1.04rem + 0.28vw,
-        1.5rem
-    ); /* 18px floor — long-form prose */
-    --type-subheading: 1.272rem; /* 20.4px — √φ */
-    --type-heading: 1.618rem; /* 25.9px — φ */
-    --type-title: 2.058rem; /* 32.9px — φ^(3/2) */
-    --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); /* φ^2 */
-    --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); /* φ^(5/2) */
-    --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); /* φ^3 */
-    --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); /* φ^(7/2) */
-    --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); /* φ^4 */
-    /* Audacious display tier (v1.0.3). Extends the φ-ladder three rungs
-       beyond display-5 for poster-type consumers (speedtest hero,
-       dashboard pane titles when the consumer wants the number to win).
-       Same vw-axis as display-1..5 — consumer-agnostic. */
-    --type-display-mega: clamp(
-        5.382rem,
-        4rem + 9vw,
-        11.089rem
-    ); /* φ^(9/2) — peak 177px */
-    --type-display-hero: clamp(
-        6.854rem,
-        4.5rem + 12vw,
-        17.942rem
-    ); /* φ^5    — peak 287px */
-    --type-display-audacious: clamp(
-        8.728rem,
-        5rem + 16vw,
-        22rem
-    ); /* φ^(11/2) — peak 352px (fast.com peg) */
-
-    /* Line heights & letter spacing live at tokens.css §0 as the canonical
-       --type-leading-* / --type-tracking-* rungs. theme.css bridges them
-       to Tailwind's `leading-*` / `tracking-*` utilities. The duplicate
-       --leading-* / --tracking-* declarations that previously sat here
-       were retired in v0.8.6 (audit U.W0.C-c §1.1 / Union 2). */
-}
-
-/* ═══════════════════════════════════════════════
-   BODY CASCADE — the brand text register inherits globally
-   ═══════════════════════════════════════════════ */
-body {
-    font-family: var(--font-text);
-    color: var(--foreground);
-    font-size: var(--type-body);
-    line-height: var(--type-leading-body);
-}
-
-/* ═══════════════════════════════════════════════
-   DISPLAY — Plus Jakarta Sans display, tracking-tight
-   ═══════════════════════════════════════════════ */
-@utility text-display-audacious {
-    font-family: var(--font-display);
-    font-size: var(--type-display-audacious);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    /* AQ.W3 §W3.3 — balance multi-line display headlines. Text-only (no box) so
-       balance is safe; degrades to unbalanced wrapping with zero break. */
-    text-wrap: balance;
-}
-
-/* `.text-hero` — the poster-type hero register. Ceiling pegs to
-   `--type-display-audacious` (φ^(11/2) — peak 352px). Three knobs tune without
-   forking: `--text-hero-size` (total clamp), `--text-hero-leading` (line-height,
-   default 0.84), `--text-hero-tracking` (letter-spacing, default -0.03em).
-   `font-weight: 300` + `font-feature-settings: ss01, tnum, lnum` lock the
-   numeric/stylistic baseline; consumer data-attribute registers compose on top. */
-@utility text-hero {
-    font-family: var(--font-display);
-    font-size: var(--text-hero-size, var(--type-display-audacious));
-    line-height: var(--text-hero-leading, 0.84);
-    letter-spacing: var(--text-hero-tracking, -0.03em);
-    font-weight: 300;
-    font-feature-settings: "ss01", "tnum", "lnum";
-    font-variant-numeric: tabular-nums lining-nums;
-    font-optical-sizing: auto;
-    display: inline-block;
-    max-inline-size: 100%;
-    /* AQ.W3 §W3.3 — `text-wrap: nowrap` (modern) sits AFTER `white-space:
-       nowrap` (legacy fallback) so supporting engines honor the modern form and
-       older ones fall through to `white-space`. Forgiving parse, no `@supports`. */
-    white-space: nowrap;
-    text-wrap: nowrap;
-}
-
-@utility text-display-hero {
-    font-family: var(--font-display);
-    font-size: var(--type-display-hero);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-mega {
-    font-family: var(--font-display);
-    font-size: var(--type-display-mega);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-5 {
-    font-family: var(--font-display);
-    font-size: var(--type-display-5);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-4 {
-    font-family: var(--font-display);
-    font-size: var(--type-display-4);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-3 {
-    font-family: var(--font-display);
-    font-size: var(--type-display-3);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display-2 {
-    font-family: var(--font-display);
-    font-size: var(--type-display-2);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-display {
-    font-family: var(--font-display);
-    font-size: var(--type-display-1);
-    line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
-    font-optical-sizing: auto;
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-/* ═══════════════════════════════════════════════
-   HEADINGS / BODY — Plus Jakarta Sans text register
-   ═══════════════════════════════════════════════ */
-@utility text-title {
-    font-family: var(--font-text);
-    font-size: var(--type-title);
-    line-height: var(--type-leading-heading);
-    letter-spacing: var(--type-tracking-tight);
-    font-weight: 700;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-heading {
-    font-family: var(--font-text);
-    font-size: var(--type-heading);
-    line-height: var(--type-leading-heading);
-    font-weight: 700;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-@utility text-subheading {
-    font-family: var(--font-text);
-    font-size: var(--type-subheading);
-    line-height: var(--type-leading-body);
-    font-weight: 600;
-    text-wrap: balance; /* AQ.W3 §W3.3 */
-}
-
-/* Canonical dock control label register — text labels INSIDE
-   `.dock-tab-button` (Start, Next, Submit, …) that want an emphatic character
-   without `.text-heading`'s `font-weight: 700` (which reads as literal bold in
-   a dock pill). Composes the `--dock-label-size` knob when set (dock.css
-   audacious mobile carve), else `--type-subheading`. Weight 400 — Plus Jakarta
-   reads heavier than its numeric weight at pill size, so regular is the
-   not-bold register. */
-@utility dock-label {
-    font-family: var(--font-text);
-    font-size: var(--dock-label-size, var(--type-subheading));
-    line-height: var(--type-leading-body);
-    font-weight: 400;
-    letter-spacing: var(--type-tracking-normal);
-}
-
-@utility text-prose {
-    font-family: var(--font-text);
-    font-size: var(--type-prose);
-    line-height: var(--type-leading-prose);
-    font-weight: 400;
-    /* AQ.W3 §W3.3 — `pretty` fixes orphans/rivers in prose. Prose registers
-       only (not every text class); degrades to default wrapping, zero break. */
-    text-wrap: pretty;
-}
-
-@utility text-body {
-    font-family: var(--font-text);
-    font-size: var(--type-body);
-    line-height: var(--type-leading-body);
-    font-weight: 400;
-    text-wrap: pretty; /* AQ.W3 §W3.3 */
-}
-
-@utility text-small {
-    font-family: var(--font-text);
-    font-size: var(--type-small);
-    line-height: var(--type-leading-small);
-    font-weight: 400;
-}
-
-@utility text-caption {
-    font-family: var(--font-text);
-    font-size: var(--type-caption);
-    line-height: var(--type-leading-caption);
-    font-style: italic;
-    font-weight: 400;
-}
-
-/* ═══════════════════════════════════════════════
-   MICRO / ADMIN LABEL — Fira Code
-   ═══════════════════════════════════════════════ */
-@utility text-micro {
-    font-size: var(--type-micro);
-    line-height: 1.25;
-}
-
-@utility text-admin-label {
-    font-family: var(--font-mono);
-    font-size: var(--type-admin-label);
-    line-height: 1;
-    text-transform: uppercase;
-    letter-spacing: var(--type-tracking-caps);
-    font-weight: 500;
-}
-
-/* ═══════════════════════════════════════════════
-   MATH — Plus Jakarta Sans italic
-   ═══════════════════════════════════════════════ */
-@utility text-math {
-    font-family: var(--font-text);
-    font-style: italic;
-}
-
-@utility text-math-body {
-    font-family: var(--font-text);
-    font-size: var(--type-prose);
-    line-height: var(--type-leading-prose);
-    font-style: italic;
-}
-
-/* ═══════════════════════════════════════════════
-   MONO variants
-   ═══════════════════════════════════════════════ */
-@utility text-mono-caption {
-    font-family: var(--font-mono);
-    font-size: var(--type-caption);
-    letter-spacing: var(--type-tracking-wider);
-    text-transform: uppercase;
-    font-weight: 500;
-}
-
-@utility text-mono-small {
-    font-family: var(--font-mono);
-    font-size: var(--type-small);
-    line-height: var(--type-leading-small);
-}
-
-@utility text-mono-prose {
-    font-family: var(--font-mono);
-    font-size: var(--type-prose);
-    line-height: var(--type-leading-prose);
-    letter-spacing: 0.02em;
-}
-
-@utility text-mono-micro {
-    font-family: var(--font-mono);
-    font-size: var(--type-micro);
-    line-height: 1.25;
-    letter-spacing: 0.025em;
-}
-
-/* ═══════════════════════════════════════════════
-   FONT FAMILY UTILITIES
-   ═══════════════════════════════════════════════ */
-/* .cm-serif — the Computer-Modern math/serif voice. A DISTINCT face from the
-   brand text register: it resolves to the consumer-supplied serif (system
-   serif by default; a math consumer maps Computer Modern / KaTeX over it). It
-   is NOT the Plus Jakarta text register — the one serif survivor of the
-   register reconciliation. */
-@utility cm-serif {
-    font-family: var(--font-serif-math, serif);
-}
-
-@utility fira-code {
-    font-family: var(--font-mono);
-    font-feature-settings: "liga", "calt";
-}
-
-/* ═══════════════════════════════════════════════
-   ORNAMENTAL — Fourier F
-   ═══════════════════════════════════════════════ */
-@utility fourier-f {
-    font-family: var(--font-display);
-    font-style: italic;
-    font-size: 1.35em;
-    line-height: 1;
-    vertical-align: -0.05em;
-    font-weight: 700;
-    display: inline-block;
-}
-
-/* ═══════════════════════════════════════════════
-   AUX — section label, pane title, kinetic hooks
-   ═══════════════════════════════════════════════ */
-@layer components {
-    /* Responsive pane title */
-    .text-pane-title {
-        font-family: var(--font-display);
-        font-size: clamp(2.4rem, 1.8rem + 2vw, 3.33rem);
-        line-height: var(--type-leading-display);
-        letter-spacing: var(--type-tracking-tight);
-        font-weight: 600;
-        font-optical-sizing: auto;
-    }
-
-    /* AV.W16 TW3 — the pane title scales off its PANE's box, not the viewport.
-       An unnamed @container query resolves to the nearest ancestor container,
-       so the title grows once its pane clears 40rem (≈ 640px) regardless of the
-       viewport. Contract: the consuming pane sets `container-type: inline-size`
-       (the dock/chassis pattern); without a container ancestor the compact base
-       holds. */
-    @container (min-width: 40rem) {
-        .text-pane-title {
-            font-size: var(--type-display-3);
-        }
-    }
-
-    /* Section label (mono, small caps) */
-    .section-label {
-        font-family: var(--font-mono);
-        font-size: var(--type-caption);
-        color: var(--muted-foreground);
-        text-transform: uppercase;
-        letter-spacing: var(--type-tracking-caps);
-    }
-
-    /* Section-accent eyebrow (AZ.W-SUFFUSE D3-7 / D1-8). ONE coherent
-       section-accent register — the colored mono eyebrow reads as an
-       intentional system, not a four-hue rainbow. The accent reads a single
-       `--section-label-accent` knob (default `--section-color-7`, the violet
-       brand anchor) so a page tints its whole eyebrow column at ONE chroma
-       from one override, NOT a different hue per section. This is the
-       one-color-event rule at PAGE scope: the eyebrow is the page's ONE
-       accent identity. The label/value/body ink below stays neutral. */
-    .section-label--tinted {
-        color: var(--section-label-accent, var(--section-color-7));
-    }
-
-    /* Font-feature helpers */
-    .tabular-nums {
-        font-variant-numeric: tabular-nums;
-    }
-
-    /* Kinetic: per-character stagger */
-    .char-stagger > .char {
-        display: inline-block;
-        animation: fade-in var(--duration-normal) var(--spring-smooth, ease) backwards;
-        animation-delay: calc(var(--char-index, 0) * 30ms);
-    }
-
-    /* Letter-pressed treatment — reads as text engraved into the panel
-       surface. Speedtest's idle hero `0` consumes this via
-       `.text-hero[data-idle="true"]`; the `text-engraved` utility is the
-       glass-ui contract that any consumer can apply for the same look.
-       Opacity dropped in P.W1.B — the audacious canon mutes by colour
-       (`--muted-foreground`), not by alpha; opacity ≤ 0.4 over a glass
-       surface read as a fade, not as engraving. */
-    .text-engraved {
-        color: var(--muted-foreground);
-        /* AW.W26 — composes the `--text-shadow-engraved` @theme identity token
-           (the two-stop emboss) instead of a hand-rolled literal (gate 4). */
-        text-shadow: var(--text-shadow-engraved);
-    }
-}
+@import "./typography/scale.css";
+@import "./typography/semantic.css";
+@import "./typography/utilities.css";

package/dist/styles/utilities/a11y-overrides.css

@@ -14,13 +14,42 @@
         transition-duration: 0.1s !important;
         transition-property: opacity, color, background-color, border-color, box-shadow !important;
     }
+
+    /* BA.W-ATLAS-RECONCILE A-3 (d6 2755ebbd re-land) — Reduced-motion OVERRIDES
+       the `data-allow-motion` theme-flip carve. That carve (the `.no-transition`
+       block below) lets a control keep its OWN authored spatial animation through
+       the flip storm — but a user who asks for reduced motion outranks any
+       per-element motion-allow. So motion-allowed elements ALSO snap their spatial
+       (transform) transition + any animation here; accessibility is absolute. (The
+       DarkModeToggle icon animates through a flip under full motion, and SNAPS
+       under PRM — both arms gated by the ported icon-morph test.) */
+    [data-allow-motion] {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
 }
 
-/* ── No-transition class (for theme switches, etc.) ── */
+/* ── No-transition class (for theme switches, etc.) ──────────────────────────
+   The theme-flip transition-suppression storm: `useGlobalDark.toggleDark()` adds
+   `.no-transition` to `<html>` for the flip's single style recalc so the page's
+   incidental transitions (colour cross-fades, glass surfaces) don't jank, then
+   rAF-removes it. The kill is BLANKET by design — every descendant snaps.
+
+   BA.W-ATLAS-RECONCILE A-3 (d6 2755ebbd re-land) — THE CARVE
+   (`*:not([data-allow-motion])`): an element may declare `data-allow-motion` to
+   keep its OWN authored transition through the flip — the suppression is for
+   INCIDENTAL motion, never a control whose whole purpose IS an animation (the
+   DarkModeToggle's half-turn icon spring). This reuses the SAME carve attribute
+   the reduced-motion block reads, generalized into a single
+   "motion-allowed-during-suppression" capability (any element may opt in; no
+   toggle-special-case, no `!important` re-enable arms race). Reduced-motion still
+   OVERRIDES this carve — see the PRM block above: `[data-allow-motion]` spatial
+   transitions snap under `prefers-reduced-motion` (accessibility is absolute). */
 html.no-transition,
-html.no-transition *,
-html.no-transition *::before,
-html.no-transition *::after {
+html.no-transition *:not([data-allow-motion]),
+html.no-transition *:not([data-allow-motion])::before,
+html.no-transition *:not([data-allow-motion])::after {
     transition-duration: 0s !important;
 }