@mkbabb/glass-ui 0.3.0 → 2.0.0

package/dist/styles/typography.css

@@ -0,0 +1,553 @@
+/*
+ * typography.css — Computer Modern body + Fraunces display + Fira Code mono
+ *                + Plus Jakarta Sans (brand display fallback face, OFL 1.1)
+ *
+ * Golden-ratio scale (√φ ≈ 1.272). Computer Modern is primary for body,
+ * headings, prose, and math. Fraunces is reserved for ornamental display
+ * with WONK=1 / SOFT=0. Fira Code for mono.
+ *
+ * Semantic type classes expose both Tailwind-friendly utility names
+ * (`.text-display-*`, `.text-body`, `.text-admin-label`) and feature
+ * utilities (`.cm-serif`, `.fira-code`, `.fourier-f`).
+ *
+ * AC.W6b (v1.5.0) — self-host font subsystem
+ * ────────────────────────────────────────────
+ * Glass-ui ships two OFL-1.1 face families as bundled woff2 assets under
+ * `src/fonts/`:
+ *
+ *   - **Plus Jakarta Sans** (latin + latin-ext, variable wght 200..800).
+ *     Selected as the brand display sans-serif substitute via AC.W6b's
+ *     5-way visual-fidelity test against pre-substitution General Sans
+ *     baseline at 1200×766 hero size. Closest character match among the
+ *     OFL candidate menu (Plus Jakarta Sans / Onest / Manrope / Inter /
+ *     Geist). Carries `font-display: optional` so paint never blocks on
+ *     the LCP-critical hero font.
+ *
+ *   - **Fira Code** (latin + latin-ext, variable wght 300..700). The
+ *     canonical glass-ui mono. OFL — full self-host permitted. Carries
+ *     `font-display: swap` (post-LCP register; visual swap acceptable).
+ *
+ * Both ship with Capsize-calibrated `size-adjust` / `ascent-override` /
+ * `descent-override` metric overrides on the matching fallback faces so
+ * the swap (system → primary) is geometry-neutral; CLS contribution
+ * from the font-load is zero by construction.
+ *
+ * Consumers map `--font-brand-sans` / `--font-display` / `--font-mono`
+ * to reference these self-hosted families and get the full gestalt-2
+ * stack (self-host + optional + size-adjust + metric overrides) at the
+ * substrate layer without re-introducing third-party CDN dependencies
+ * on the LCP-critical path.
+ */
+
+/* ═══════════════════════════════════════════════
+   OFL FACE FILES — Plus Jakarta Sans (brand display)
+   ═══════════════════════════════════════════════ */
+
+/* The payload-bearing "Plus Jakarta Sans" faces (latin + latin-ext woff2)
+   live in `fonts.css`, reachable via the `@mkbabb/glass-ui/styles/fonts`
+   export. They are split off the critical entry path so `./styles` (first
+   paint) does not carry the ~99 KB-gzipped base64 font binary. Consumers
+   import `…/styles/fonts` once, separately. The calibrated `local()`
+   fallback face below carries NO payload and stays on the critical path —
+   it is what paints during the `font-display: optional` window. */
+
+/* Plus Jakarta Sans — calibrated fallback face.
+   Wraps the platform's system sans-serif (San Francisco / Segoe UI /
+   Roboto / Arial) and overrides its metrics to match Plus Jakarta Sans's
+   x-width + ascent + descent. While the primary face hasn't arrived
+   (font-display: optional → renders in fallback if not in cache within
+   the 100ms block window), the fallback paints at Plus Jakarta's
+   geometry — the swap is metrically neutral, no CLS contribution.
+
+   The four values (size-adjust + ascent-override + descent-override per
+   system face) were derived programmatically via @capsizecss/core's
+   `createFontStack` against the bundled latin woff2 (AC.W6b Capsize
+   calibration; receipts at docs/tranches/AC/artefacts/W6b/). */
+@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 (latin + latin-ext woff2) live in
+   `fonts.css`, reachable via the `@mkbabb/glass-ui/styles/fonts` export —
+   split off the critical entry path (see the Plus Jakarta note above). The
+   calibrated `local()` fallback face below carries NO payload and stays on
+   the critical path; it covers the `font-display: swap` window. */
+
+/* Fira Code — calibrated fallback face. Wraps the platform mono stack
+   (SF Mono / Menlo / Consolas / Courier New) with Capsize-derived
+   metric overrides referenced against Roboto Mono (the only mono entry
+   in `@capsizecss/metrics`; the platform monos cluster within ~2% of
+   Roboto Mono's metrics, so the override holds across the chain).
+   size-adjust ≈ 1.0 means Fira Code's x-width matches the system mono
+   exactly — the swap is 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-serif`, `--font-display`, and `--font-mono` are NOT declared
+       here. Their canonical source-of-truth lives in tokens.css
+       (`--font-stack-serif`, `--font-stack-display`, `--font-stack-mono`),
+       bridged to Tailwind utilities via the `@theme` block in theme.css
+       (`--font-serif: var(--font-stack-serif)` etc.). Declaring them here
+       as `:root` literals would shadow any consumer `@theme` override because
+       un-layered `:root` declarations win over `@layer theme { :root }` in
+       the Tailwind v4 cascade. The Q.W3 Lane F substrate revert (commit
+       retiring the L.W1 `6ce14e5` fossil) removes those literals so the
+       tokens.css→theme.css bridge is the single resolution path.
+
+       Per AC.W6b (v1.5.0): the self-hosted OFL face files declared above
+       expose two new family names: `"Plus Jakarta Sans"` (brand display
+       sans — Path D substitute) + `"Fira Code"` (canonical mono). Both
+       families pair with their respective `"... Fallback"` faces (which
+       wrap the system fallback via `local()` + Capsize-calibrated
+       metric overrides — the swap is no-shift on geometry).
+
+       - `--font-brand-sans` ships its neutral default
+         (`"Helvetica Neue" → Arial Nova → Arial → system-ui → sans-serif`).
+         Consumers opting into Plus Jakarta Sans via the `brand-uniform-sans`
+         preset override this token at `:root` to:
+         `"Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif`.
+
+       - `--font-mono` references `"Fira Code"` first so the self-hosted
+         face engages by default for every glass-ui consumer; the
+         calibrated `"Fira Code Fallback"` covers the swap window, then
+         fallback `"Fira Mono"` + the generic `monospace` backstop the
+         chain for browsers that reject local() lookups. */
+    /* Independent brand/system sans stack; consumers override once for uniform sans. */
+    --font-brand-sans: "Helvetica Neue", "Arial Nova", Arial, system-ui, sans-serif;
+    --font-sans: var(--font-brand-sans);
+    --font-display-variation-settings: "WONK" 1, "SOFT" 0;
+    --font-display-weight: 400;
+
+    /* Scale tokens */
+    --type-admin-label: 0.625rem;  /* 10px */
+    --type-micro:       0.6875rem; /* 11px */
+    --type-caption:     0.75rem;   /* 12px */
+    --type-small:       0.875rem;  /* 14px */
+    --type-body:        1rem;      /* 16px */
+    --type-prose:       1.125rem;  /* 18px */
+    --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. Brand-uniform-
+       sans preset still overrides via the existing :root override. */
+    --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). */
+}
+
+:root[data-typography-preset="brand-uniform-sans"] {
+    --font-serif: var(--font-brand-sans);
+    --font-display: var(--font-brand-sans);
+    --font-display-variation-settings: normal;
+    --font-display-weight: 600;
+}
+
+/* ═══════════════════════════════════════════════
+   BODY CASCADE — CM serif inherits globally
+   ═══════════════════════════════════════════════ */
+body {
+    font-family: var(--font-serif);
+    color: var(--foreground);
+    font-size: var(--type-body);
+    line-height: var(--type-leading-body);
+}
+
+/* ═══════════════════════════════════════════════
+   DISPLAY — Fraunces, WONK=1 SOFT=0, 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-variation-settings: var(--font-display-variation-settings);
+    font-weight: var(--font-display-weight);
+}
+
+/* O.W6 Lane D — `.text-hero` consumer-recipe hoist (speedtest AC.W6
+   cohort, T_GU-HERO).
+
+   The poster-type hero register. Composes the existing audacious ladder:
+   ceiling pegs to `--type-display-audacious` (φ^(11/2) — peak 352px, the
+   fast.com peg) so consumers reading this utility against the type-scale
+   get the canonical ceiling without re-declaring it.
+
+   Three knobs let consumers tune without forking the recipe:
+   - `--text-hero-size`: total clamp (default = canonical cap). Speedtest
+     overrides this to `clamp(3rem, 45cqi, var(--type-display-audacious))`
+     for its container-query metric column.
+   - `--text-hero-leading`: line-height; default 0.84 matches speedtest's
+     AB.W1.T3 tight-leading baseline.
+   - `--text-hero-tracking`: letter-spacing; default -0.03em (poster-type
+     register — tighter than `--type-tracking-tight`).
+
+   `font-weight: 300` (poster-type) and `font-feature-settings: ss01,
+   tnum, lnum` lock the numeric/stylistic-set baseline; consumers that
+   need different features re-declare locally. The utility is otherwise
+   substrate-only — consumer-side data-attribute registers (e.g.,
+   speedtest's `.text-hero[data-idle]` colour cascade) compose ON TOP of
+   this base. */
+@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;
+    font-variation-settings: var(--font-display-variation-settings);
+    display: inline-block;
+    max-inline-size: 100%;
+    white-space: 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-variation-settings: var(--font-display-variation-settings);
+    font-weight: var(--font-display-weight);
+}
+
+@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-variation-settings: var(--font-display-variation-settings);
+    font-weight: var(--font-display-weight);
+}
+
+@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-variation-settings: var(--font-display-variation-settings);
+    font-weight: var(--font-display-weight);
+}
+
+@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-variation-settings: var(--font-display-variation-settings);
+    font-weight: var(--font-display-weight);
+}
+
+@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-variation-settings: var(--font-display-variation-settings);
+    font-weight: var(--font-display-weight);
+}
+
+@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-variation-settings: var(--font-display-variation-settings);
+    font-weight: var(--font-display-weight);
+}
+
+@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-variation-settings: var(--font-display-variation-settings);
+    font-weight: var(--font-display-weight);
+}
+
+/* ═══════════════════════════════════════════════
+   HEADINGS / BODY — Computer Modern
+   ═══════════════════════════════════════════════ */
+@utility text-title {
+    font-family: var(--font-serif);
+    font-size: var(--type-title);
+    line-height: var(--type-leading-heading);
+    letter-spacing: var(--type-tracking-tight);
+    font-weight: 700;
+}
+
+@utility text-heading {
+    font-family: var(--font-serif);
+    font-size: var(--type-heading);
+    line-height: var(--type-leading-heading);
+    font-weight: 700;
+}
+
+@utility text-subheading {
+    font-family: var(--font-serif);
+    font-size: var(--type-subheading);
+    line-height: var(--type-leading-body);
+    font-weight: 600;
+}
+
+/* AB.W1.T5 — canonical dock control label register.
+   Use case: text labels INSIDE `.dock-tab-button` (Start, Next, Submit,
+   Done, New Test, survey labels). The dock-tab-button shell itself owns
+   `--type-small` as a fallback, but consumers wanting an emphatic label
+   character (slightly larger than the body small register) reach for
+   `.dock-label` rather than `.text-heading` — `.text-heading` is the
+   heading register and carries `font-weight: 700`, which reads as
+   literal bold inside a dock pill (the user mandate is "the start text
+   should not be bold", redressed to every bottom-dock label).
+
+   Composes the audacious-dock `--dock-label-size` knob when set
+   (utilities.css §audacious mobile carve declares `--dock-label-size:
+   14-15px` at narrow viewports); falls back to `--type-subheading` so
+   the register stays one rung above body-small at desktop. Weight 400
+   (regular) per the standing precept: Plus Jakarta Sans at the dock
+   pill size reads visually heavier than the numeric weight implies, so
+   the regular rung is the correct register for the not-bold posture. */
+@utility dock-label {
+    font-family: var(--font-serif);
+    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-serif);
+    font-size: var(--type-prose);
+    line-height: var(--type-leading-prose);
+    font-weight: 400;
+}
+
+@utility text-body {
+    font-family: var(--font-serif);
+    font-size: var(--type-body);
+    line-height: var(--type-leading-body);
+    font-weight: 400;
+}
+
+@utility text-small {
+    font-family: var(--font-serif);
+    font-size: var(--type-small);
+    line-height: var(--type-leading-small);
+    font-weight: 400;
+}
+
+@utility text-caption {
+    font-family: var(--font-serif);
+    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 — Computer Modern italic
+   ═══════════════════════════════════════════════ */
+@utility text-math {
+    font-family: var(--font-serif);
+    font-style: italic;
+}
+
+@utility text-math-body {
+    font-family: var(--font-serif);
+    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
+   ═══════════════════════════════════════════════ */
+@utility cm-serif {
+    font-family: var(--font-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;
+    font-variation-settings: var(--font-display-variation-settings);
+}
+
+/* ═══════════════════════════════════════════════
+   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: var(--font-display-weight);
+        font-optical-sizing: auto;
+        font-variation-settings: var(--font-display-variation-settings);
+    }
+
+    @media (min-width: 640px) {
+        .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);
+    }
+
+    /* 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);
+        text-shadow:
+            0 1px 0 color-mix(in srgb, var(--background) 30%, transparent),
+            0 -1px 0 var(--surface-tint-8);
+    }
+}