@multiplatform.one/theme 7.5.0 → 7.6.0

package/src/audit/themeMatrix.ts

@@ -0,0 +1,630 @@
+/**
+ * Theme-matrix invariance + no-breakage assertions (MPO-18).
+ *
+ * The theme matrix sweeps every story cell across the globals axes
+ * (scheme × theme colour × preset) and holds TWO separate assertions,
+ * never one:
+ *
+ *  1. GEOMETRY INVARIANCE across the THEME axis — switching the theme
+ *     colour may repaint ink, never move a box. Colour is the one axis
+ *     whose whole contract is "paint only" (LC-80 RECIPE-INPUTS: size
+ *     recipes are generated from inputs at config time; Tamagui colour
+ *     themes stay the colour path). Any geometry delta across colours
+ *     means a recipe consumed a theme option.
+ *
+ *  2. NO-BREAKAGE across the PRESET axis — presets are EXPECTED to move
+ *     pixels (boldPreset flips radius/border/weight/space; heroPreset
+ *     moves the page title scale), so geometry equality is deliberately
+ *     NOT asserted there. What must hold in every preset cell: the story
+ *     renders, structural values stay on the knob scales
+ *     (runConstraintAudit off-scale count vs the default cell), and text
+ *     ink keeps the WCAG floor (evaluateTextContrast).
+ *
+ * MEASURING RULE: every text assertion here measures TEXT NODES — the
+ * computed style of the element that DIRECTLY contains the text, and the
+ * Range-measured rect of the text itself — never the story frame. The
+ * frame's font-family is always Inter and its colour is not the ink
+ * (that trap shipped three wrong tickets: MPO-40/44/48).
+ *
+ * `captureMatrixSnapshot` is completely self-contained (no imports, no
+ * closures) so it can be passed straight to Playwright's
+ * `page.evaluate(captureMatrixSnapshot)`, exactly like
+ * `runConstraintAudit`. The comparators are pure Node-side functions so
+ * vitest can hold them to the tripwire tests without a browser.
+ */
+
+import { aaTextContrastRatio, measureContrast, minContrastRatio } from "../theme/colorRules";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface MatrixRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface MatrixElementGeometry {
+  /** Stable structural path from the story root (tag:index-among-same-tag). */
+  key: string;
+  tag: string;
+  rect: MatrixRect;
+  /**
+   * Geometry-bearing computed properties. The theme axis must never move
+   * any of these; colour properties are deliberately absent.
+   */
+  props: Record<string, string>;
+  /** Range-measured rect of the element's DIRECT text nodes, when any. */
+  textRect?: MatrixRect;
+}
+
+export interface MatrixTextSample {
+  /** Structural key of the element that DIRECTLY contains the text node. */
+  key: string;
+  /** First characters of the text node (identification only). */
+  text: string;
+  /** Composited ink colour as #rrggbb (alpha already blended over background). */
+  color: string;
+  /** Composited effective background as #rrggbb. */
+  background: string;
+  /** False when no opaque backdrop could be resolved (gradient/image/alpha chain). */
+  backgroundResolved: boolean;
+  /** True when a background-image/gradient sits between text and backdrop. */
+  overImage: boolean;
+  fontSizePx: number;
+  fontWeightNum: number;
+  rect: MatrixRect;
+}
+
+export interface MatrixSnapshot {
+  /** False when the story root is missing or empty — always a failure. */
+  storyRendered: boolean;
+  geometry: MatrixElementGeometry[];
+  textSamples: MatrixTextSample[];
+}
+
+export interface GeometryMove {
+  key: string;
+  property: string;
+  before: string;
+  after: string;
+}
+
+export interface GeometryDiff {
+  identical: boolean;
+  /** Elements present in `before` but missing in `after`. */
+  removedKeys: string[];
+  /** Elements present in `after` but missing in `before`. */
+  addedKeys: string[];
+  moves: GeometryMove[];
+}
+
+export interface TextContrastViolation {
+  key: string;
+  text: string;
+  color: string;
+  background: string;
+  ratio: number;
+  required: number;
+}
+
+export interface TextContrastResult {
+  measured: number;
+  unmeasurable: number;
+  violations: TextContrastViolation[];
+}
+
+// ── Browser-side capture (self-contained for page.evaluate) ──────────────────
+
+/**
+ * Captures the geometry + text-ink snapshot of the rendered story.
+ *
+ * Self-contained by construction — pass directly to
+ * `page.evaluate(captureMatrixSnapshot)`.
+ */
+export function captureMatrixSnapshot(): MatrixSnapshot {
+  const SKIP_TAGS = new Set([
+    "script",
+    "style",
+    "link",
+    "meta",
+    "head",
+    "title",
+    "noscript",
+    "br",
+    "wbr",
+    "template",
+  ]);
+
+  const round = (n: number) => Math.round(n * 4) / 4;
+
+  const toRect = (r: DOMRect) => ({
+    x: round(r.x),
+    y: round(r.y),
+    w: round(r.width),
+    h: round(r.height),
+  });
+
+  // rgb()/rgba() → [r,g,b,a]; anything else → null (gradients, keywords).
+  function parseCssColor(raw: string): [number, number, number, number] | null {
+    const s = raw.trim().toLowerCase();
+    if (s === "transparent") return [0, 0, 0, 0];
+    const m = s.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.%]+))?\s*\)$/);
+    if (!m) return null;
+    let a = 1;
+    if (m[4] !== undefined) {
+      a = m[4].endsWith("%") ? Number.parseFloat(m[4]) / 100 : Number.parseFloat(m[4]);
+    }
+    return [Number.parseFloat(m[1]), Number.parseFloat(m[2]), Number.parseFloat(m[3]), a];
+  }
+
+  function toHex(rgb: [number, number, number]): string {
+    const h = (v: number) =>
+      Math.max(0, Math.min(255, Math.round(v)))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${h(rgb[0])}${h(rgb[1])}${h(rgb[2])}`;
+  }
+
+  // Composite `top` (with alpha) over opaque `bottom`.
+  function blend(
+    top: [number, number, number, number],
+    bottom: [number, number, number],
+  ): [number, number, number] {
+    const a = top[3];
+    return [
+      top[0] * a + bottom[0] * (1 - a),
+      top[1] * a + bottom[1] * (1 - a),
+      top[2] * a + bottom[2] * (1 - a),
+    ];
+  }
+
+  /**
+   * Effective backdrop behind an element: walk ancestors collecting
+   * backgroundColor layers until one is opaque, then composite downward.
+   * Reports whether the chain actually resolved and whether a
+   * background-image sits in it.
+   */
+  function effectiveBackground(el: Element): {
+    hex: string;
+    resolved: boolean;
+    overImage: boolean;
+  } {
+    const layers: Array<[number, number, number, number]> = [];
+    let overImage = false;
+    let node: Element | null = el;
+    let opaqueBase: [number, number, number] | null = null;
+    while (node) {
+      const cs = getComputedStyle(node);
+      if (cs.backgroundImage && cs.backgroundImage !== "none") overImage = true;
+      const parsed = parseCssColor(cs.backgroundColor);
+      if (parsed && parsed[3] > 0) {
+        if (parsed[3] >= 0.999) {
+          opaqueBase = [parsed[0], parsed[1], parsed[2]];
+          break;
+        }
+        layers.push(parsed);
+      }
+      node = node.parentElement;
+    }
+    if (!opaqueBase) {
+      // No opaque layer up the chain — an honest measurement is impossible.
+      return { hex: "#ffffff", resolved: false, overImage };
+    }
+    let acc = opaqueBase;
+    for (let i = layers.length - 1; i >= 0; i--) {
+      acc = blend(layers[i], acc);
+    }
+    return { hex: toHex(acc), resolved: !overImage, overImage };
+  }
+
+  // Multiplied opacity from the element up to the root.
+  function effectiveOpacity(el: Element): number {
+    let o = 1;
+    let node: Element | null = el;
+    while (node) {
+      const v = Number.parseFloat(getComputedStyle(node).opacity);
+      if (!Number.isNaN(v)) o *= v;
+      node = node.parentElement;
+    }
+    return o;
+  }
+
+  const GEOMETRY_PROPS = [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "rowGap",
+    "columnGap",
+    "fontSize",
+    "fontWeight",
+    "fontFamily",
+    "lineHeight",
+    "letterSpacing",
+  ] as const;
+
+  // Prefer the preview's stable inner root. `#storybook-root` also contains
+  // the Tamagui `<Theme>` host, which is present only when a colour global
+  // is set — capturing there reports a remount as geometry drift.
+  const root =
+    document.querySelector("#mpo-matrix-root") ??
+    document.querySelector("[data-mpo-matrix-root]") ??
+    document.querySelector("#storybook-root") ??
+    document.querySelector("#root") ??
+    document.body;
+  const storyRendered = !!root && root.children.length > 0;
+
+  const geometry: MatrixElementGeometry[] = [];
+  const textSamples: MatrixTextSample[] = [];
+
+  /**
+   * The element's own painted text, if any: the Range-measured rect of its
+   * DIRECT text nodes plus the composited ink/backdrop sample. Returns the
+   * rect so a boxed element can carry it as `textRect`.
+   *
+   * Split out of `visit` so a boxless (`display: contents`) wrapper that
+   * happens to hold text still contributes its sample — dropping a text
+   * measurement would read as a pass.
+   */
+  function collectText(el: Element, key: string, cs: CSSStyleDeclaration): MatrixRect | undefined {
+    const directText: Text[] = [];
+    for (const child of Array.from(el.childNodes)) {
+      if (child.nodeType === 3 && (child.textContent ?? "").trim().length > 0) {
+        directText.push(child as Text);
+      }
+    }
+    if (directText.length === 0) return undefined;
+    const range = document.createRange();
+    range.setStartBefore(directText[0]);
+    range.setEndAfter(directText[directText.length - 1]);
+    const textRect = range.getBoundingClientRect();
+    if (!(textRect.width > 0 && textRect.height > 0)) return undefined;
+    const opacity = effectiveOpacity(el);
+    if (opacity > 0.05 && cs.visibility !== "hidden") {
+      const ink = parseCssColor(cs.color);
+      const backdrop = effectiveBackground(el);
+      if (ink) {
+        const baseParsed = parseCssColor(backdrop.hex) ?? [255, 255, 255, 1];
+        const inkOpaque = toHex(
+          ink[3] >= 0.999
+            ? [ink[0], ink[1], ink[2]]
+            : blend(ink, [baseParsed[0], baseParsed[1], baseParsed[2]]),
+        );
+        textSamples.push({
+          key,
+          text: (directText[0].textContent ?? "").trim().slice(0, 60),
+          color: inkOpaque,
+          background: backdrop.hex,
+          backgroundResolved: backdrop.resolved,
+          overImage: backdrop.overImage,
+          fontSizePx: Number.parseFloat(cs.fontSize) || 0,
+          fontWeightNum: Number.parseFloat(cs.fontWeight) || 400,
+          rect: toRect(textRect),
+        });
+      }
+    }
+    return toRect(textRect);
+  }
+
+  /**
+   * The children that actually generate a BOX, hoisting straight through
+   * `display: contents`.
+   *
+   * This is what makes the structural key survive the colour axis. Tamagui's
+   * `<Theme>` emits a boxless passthrough span when the requested theme is
+   * already the active one and a real theme host when it differs, so the
+   * number of wrapper spans is a function of the colour global itself.
+   * Counting them made every coloured cell report `+N/-M elements` with ZERO
+   * moves — a keying artefact wearing the costume of a geometry failure.
+   * Measured on dogfood--settings at scheme:light: 158 nodes at the default
+   * colour, 151 with `color:blue`, 142 with `color:gray`; hoisting through
+   * the boxless wrappers gives 130 in every cell, light and dark, default and
+   * bold. Nothing an invariance gate can assert is lost, because an element
+   * with no box has no geometry to move.
+   */
+  function boxedChildren(el: Element, path: string): Element[] {
+    const out: Element[] = [];
+    const counts: Record<string, number> = {};
+    for (const child of Array.from(el.children)) {
+      const tag = child.tagName.toLowerCase();
+      if (SKIP_TAGS.has(tag)) continue;
+      // SVG internals: the <svg> box is geometry enough; paths repaint per theme.
+      if (child.namespaceURI === "http://www.w3.org/2000/svg" && tag !== "svg") continue;
+      const cs = getComputedStyle(child);
+      if (cs.display === "none") continue;
+      if (cs.display === "contents") {
+        const index = counts[tag] ?? 0;
+        counts[tag] = index + 1;
+        collectText(child, `${path}/${tag}:${index}~contents`, cs);
+        for (const grandchild of boxedChildren(child, path)) out.push(grandchild);
+        continue;
+      }
+      out.push(child);
+    }
+    return out;
+  }
+
+  function visit(el: Element, path: string): void {
+    const tag = el.tagName.toLowerCase();
+    const cs = getComputedStyle(el);
+
+    const rect = el.getBoundingClientRect();
+    const props: Record<string, string> = {};
+    for (const prop of GEOMETRY_PROPS) {
+      props[prop] = cs[prop as keyof CSSStyleDeclaration] as string;
+    }
+
+    const entry: MatrixElementGeometry = {
+      key: path,
+      tag,
+      rect: toRect(rect),
+      props,
+    };
+
+    // Direct text nodes — the painted text, measured via Range (never the frame).
+    const textRect = collectText(el, path, cs);
+    if (textRect) entry.textRect = textRect;
+
+    geometry.push(entry);
+
+    // Children keyed by tag-scoped sibling index so the path is stable when
+    // only class names change between theme cells.
+    const counts: Record<string, number> = {};
+    for (const child of boxedChildren(el, path)) {
+      const childTag = child.tagName.toLowerCase();
+      const index = counts[childTag] ?? 0;
+      counts[childTag] = index + 1;
+      visit(child, `${path}/${childTag}:${index}`);
+    }
+  }
+
+  if (root) {
+    const counts: Record<string, number> = {};
+    for (const child of boxedChildren(root, "")) {
+      const childTag = child.tagName.toLowerCase();
+      const index = counts[childTag] ?? 0;
+      counts[childTag] = index + 1;
+      visit(child, `${childTag}:${index}`);
+    }
+  }
+
+  return { storyRendered, geometry, textSamples };
+}
+
+// ── Node-side comparators (pure, vitest-covered) ─────────────────────────────
+
+/**
+ * Geometry invariance diff for the THEME axis: every element must keep its
+ * rect, its text rect, and every geometry-bearing computed property.
+ * `epsilonPx` absorbs sub-pixel raster jitter in rect measurements only —
+ * computed properties compare exactly.
+ */
+export function diffGeometry(
+  before: MatrixSnapshot,
+  after: MatrixSnapshot,
+  options: { epsilonPx?: number } = {},
+): GeometryDiff {
+  const epsilon = options.epsilonPx ?? 0;
+  const byKey = new Map(before.geometry.map((g) => [g.key, g]));
+  const seen = new Set<string>();
+  const moves: GeometryMove[] = [];
+  const addedKeys: string[] = [];
+
+  const rectDiffers = (a: MatrixRect, b: MatrixRect) =>
+    Math.abs(a.x - b.x) > epsilon ||
+    Math.abs(a.y - b.y) > epsilon ||
+    Math.abs(a.w - b.w) > epsilon ||
+    Math.abs(a.h - b.h) > epsilon;
+
+  const formatRect = (r: MatrixRect) => `${r.x},${r.y} ${r.w}x${r.h}`;
+
+  for (const curr of after.geometry) {
+    const prev = byKey.get(curr.key);
+    if (!prev) {
+      addedKeys.push(curr.key);
+      continue;
+    }
+    seen.add(curr.key);
+    if (rectDiffers(prev.rect, curr.rect)) {
+      moves.push({
+        key: curr.key,
+        property: "rect",
+        before: formatRect(prev.rect),
+        after: formatRect(curr.rect),
+      });
+    }
+    if (prev.textRect && curr.textRect && rectDiffers(prev.textRect, curr.textRect)) {
+      moves.push({
+        key: curr.key,
+        property: "textRect",
+        before: formatRect(prev.textRect),
+        after: formatRect(curr.textRect),
+      });
+    } else if (!!prev.textRect !== !!curr.textRect) {
+      moves.push({
+        key: curr.key,
+        property: "textRect",
+        before: prev.textRect ? formatRect(prev.textRect) : "(none)",
+        after: curr.textRect ? formatRect(curr.textRect) : "(none)",
+      });
+    }
+    for (const prop of Object.keys(prev.props)) {
+      if (prev.props[prop] !== curr.props[prop]) {
+        moves.push({
+          key: curr.key,
+          property: prop,
+          before: prev.props[prop],
+          after: curr.props[prop] ?? "(missing)",
+        });
+      }
+    }
+  }
+
+  const removedKeys = before.geometry.filter((g) => !seen.has(g.key)).map((g) => g.key);
+
+  return {
+    identical: moves.length === 0 && addedKeys.length === 0 && removedKeys.length === 0,
+    removedKeys,
+    addedKeys,
+    moves,
+  };
+}
+
+/**
+ * The contrast assertion for the matrix (and for downstream repos — call
+ * this instead of keeping a local contrast spec): WCAG AA floors from
+ * `colorRules`, large text (≥24px, or ≥18.66px at ≥700) takes the 3:1
+ * floor, everything else 4.5:1. Samples whose backdrop could not be
+ * resolved (gradient/image/never-opaque chain) are counted, never
+ * silently dropped.
+ */
+export function evaluateTextContrast(samples: MatrixTextSample[]): TextContrastResult {
+  let measured = 0;
+  let unmeasurable = 0;
+  const violations: TextContrastViolation[] = [];
+  for (const sample of samples) {
+    if (!sample.backgroundResolved) {
+      unmeasurable++;
+      continue;
+    }
+    const large =
+      sample.fontSizePx >= 24 || (sample.fontSizePx >= 18.66 && sample.fontWeightNum >= 700);
+    const required = large ? minContrastRatio : aaTextContrastRatio;
+    // Same arithmetic as MPO-40's assertContrast — one floor, one report.
+    try {
+      const report = measureContrast({
+        foreground: sample.color,
+        background: sample.background,
+        floor: required,
+        label: sample.key,
+      });
+      measured++;
+      if (!report.pass) {
+        violations.push({
+          key: sample.key,
+          text: sample.text,
+          color: report.foreground,
+          background: report.background,
+          ratio: report.ratio,
+          required: report.floor,
+        });
+      }
+    } catch {
+      unmeasurable++;
+    }
+  }
+  return { measured, unmeasurable, violations };
+}
+
+/** One matrix cell's no-breakage inputs (preset axis). */
+export interface NoBreakageInput {
+  storyRendered: boolean;
+  /** Off-scale violation count from `runConstraintAudit` in this cell. */
+  offScaleViolations: number;
+  /** Off-scale count in the same story+scheme at the DEFAULT preset. */
+  baselineOffScaleViolations: number;
+  /**
+   * Per-violation signatures in this cell — see {@link auditSignatures}. A
+   * gate that reports "32 violations where the default cell had 31" names
+   * nothing a person can go and fix; with these it names the elements.
+   */
+  offScaleSignatures?: string[];
+  /** The same signatures in the DEFAULT-preset cell. */
+  baselineOffScaleSignatures?: string[];
+  /** Contrast result of this cell. */
+  contrast: TextContrastResult;
+  /** Contrast violation count in the same story+scheme at the DEFAULT preset. */
+  baselineContrastViolations: number;
+  /** The DEFAULT-preset cell's contrast result, for naming the new misses. */
+  baselineContrast?: TextContrastResult;
+}
+
+/**
+ * Flattens a `runConstraintAudit` report into one signature per violation,
+ * `"<element label> :: <violation>"`, so two cells can be compared by what
+ * broke rather than by how many things broke.
+ */
+export function auditSignatures(
+  violations: Array<{ label: string; violations: string[] }>,
+): string[] {
+  const out: string[] = [];
+  for (const element of violations) {
+    for (const violation of element.violations) out.push(`${element.label} :: ${violation}`);
+  }
+  return out;
+}
+
+/** Multiset difference: entries in `after` beyond what `before` already had. */
+function newEntries(before: string[], after: string[]): string[] {
+  const remaining = new Map<string, number>();
+  for (const entry of before) remaining.set(entry, (remaining.get(entry) ?? 0) + 1);
+  const added: string[] = [];
+  for (const entry of after) {
+    const count = remaining.get(entry) ?? 0;
+    if (count > 0) remaining.set(entry, count - 1);
+    else added.push(entry);
+  }
+  return added;
+}
+
+const namedList = (entries: string[], limit = 6): string => {
+  if (entries.length === 0) return "";
+  const shown = entries.slice(0, limit).join("; ");
+  return entries.length > limit
+    ? ` — new: ${shown}; … ${entries.length - limit} more`
+    : ` — new: ${shown}`;
+};
+
+export interface NoBreakageResult {
+  ok: boolean;
+  failures: string[];
+}
+
+/**
+ * NO-BREAKAGE evaluation for the preset axis. Geometry equality is
+ * deliberately NOT part of this: presets are expected to move pixels.
+ * Breakage means: the story failed to render, structural values fell off
+ * the knob scales beyond the default cell's standing debt, or text ink
+ * lost contrast the default cell still had.
+ */
+export function evaluateNoBreakage(input: NoBreakageInput): NoBreakageResult {
+  const failures: string[] = [];
+  if (!input.storyRendered) {
+    failures.push("story did not render (empty story root)");
+  }
+  if (input.offScaleViolations > input.baselineOffScaleViolations) {
+    const added =
+      input.offScaleSignatures && input.baselineOffScaleSignatures
+        ? newEntries(input.baselineOffScaleSignatures, input.offScaleSignatures)
+        : [];
+    failures.push(
+      `constraint audit: ${input.offScaleViolations} off-scale violations ` +
+        `(default cell has ${input.baselineOffScaleViolations})${namedList(added)}`,
+    );
+  }
+  if (input.contrast.violations.length > input.baselineContrastViolations) {
+    const signature = (violation: TextContrastViolation) =>
+      `${violation.key} "${violation.text}" ${violation.color} on ${violation.background} = ` +
+      `${violation.ratio}:1 (floor ${violation.required})`;
+    const added = input.baselineContrast
+      ? newEntries(
+          input.baselineContrast.violations.map(signature),
+          input.contrast.violations.map(signature),
+        )
+      : [];
+    failures.push(
+      `text contrast: ${input.contrast.violations.length} below-floor text nodes ` +
+        `(default cell has ${input.baselineContrastViolations})${namedList(added)}`,
+    );
+  }
+  return { ok: failures.length === 0, failures };
+}

package/src/font.ts

@@ -1,20 +1,38 @@
 import type { GenericFont } from "@tamagui/web";
 import { createFont } from "@tamagui/web";
-import { bodyFontSizes, bodyLineHeightPx } from "./theme/defaults/fonts";
+import {
+  bodyFontLineHeights,
+  bodyFontSizes,
+  bodyLineHeightPx,
+  categoryLineHeights,
+} from "./theme/defaults/fonts";
 
 const defaults = {
-  // Same size table as Inter body, including `true: 14`. A missing `true`
-  // key is what collapsed `$serif`/`$mono`/`$rounded` to -apple-system
-  // 14px/normal on the label text node (MPO-44).
+  // The era's `$body` ladder, including `true`. A missing `true` key is what
+  // collapsed `$serif`/`$mono`/`$rounded` to -apple-system 14px/normal on the
+  // label text node (MPO-44); a DIFFERENT ladder is the follow-on defect —
+  // a family knob that also resizes the label is still moving type off the
+  // ramp. A consumer font registered through this helper lands exactly where
+  // the built-in category fonts do.
   size: bodyFontSizes,
+  // Floored at the generic body ratio (LC-11). `createDefaultFont` does not
+  // know which category it is building, so it takes the sans-serif floor;
+  // `defaults/fonts.ts` applies the per-category ones.
+  lineHeight: categoryLineHeights("sans-serif"),
   // Neutral by default (LC-11): tracking is a per-family function of size,
   // so a shared constant table is always wrong for someone — the previous
   // Inter-ish table leaked +3px tracking into mono/script faces at $5/$6
-  // (see p-results/fixes-polish2-codeblock-density.md). Families that want
-  // optical tracking pass their own `letterSpacing` table.
-  letterSpacing: {} as Record<string | number, number>,
+  // (see p-results/fixes-polish2-codeblock-density.md). Explicit zeros, not
+  // an empty table: an empty table emits no `--f-letterSpacing-*` and the
+  // value falls through to the `:root` Inter curve.
+  letterSpacing: Object.fromEntries(Object.keys(bodyFontSizes).map((k) => [k, 0])) as Record<
+    string | number,
+    number
+  >,
+  // The era's body weight. Was 300, which is off the reference's 400 label
+  // weight in the light direction and made a bodyFont flip change weight.
   weight: {
-    4: "300",
+    4: "400",
   } as const,
 };
 
@@ -22,10 +40,17 @@ export function createDefaultFont<A extends GenericFont>(
   font: Partial<A> & { family: A["family"] },
 ): A {
   const size = font.size || defaults.size;
+  const lineHeight =
+    size === defaults.size
+      ? defaults.lineHeight
+      : (Object.fromEntries(
+          Object.entries(size).map(([k, v]) => [
+            k,
+            typeof v === "number" ? (bodyFontLineHeights[k] ?? bodyLineHeightPx(v)) : v,
+          ]),
+        ) as typeof size);
   return createFont({
-    lineHeight: Object.fromEntries(
-      Object.entries(size).map(([k, v]) => [k, typeof v === "number" ? bodyLineHeightPx(v) : v]),
-    ) as typeof size,
+    lineHeight,
     letterSpacing: defaults.letterSpacing,
     weight: defaults.weight,
     ...font,