@multiplatform.one/theme 7.34.4 → 7.36.0

package/src/theme/defaults/builderOptions.ts

@@ -1,22 +1,10 @@
 import type { CreateThemesBuilderOptions, GetThemeProps } from "../createThemes";
-import {
-  contrastRatio,
-  minContrastRatio,
-  normalizeToHex,
-  pickReadableForeground,
-  relativeLuminance,
-} from "../colorRules";
+import { contrastRatio, minContrastRatio, normalizeToHex, relativeLuminance } from "../colorRules";
 
 /**
- * DG-A11Y-01 / Axiom 12 — resolve a solid `$outlineColor` for the keyboard
- * focus-visible ring that clears the ≥3:1 contrast floor against BOTH page
- * surfaces (color1/color2) in this scheme's own ramp. The house themes never
- * set `$outlineColor`, so it fell through to Tamagui's stock 20%-alpha ink
- * (measured 1.36:1) — every keyboard user got a near-invisible ring (DF-03).
- *
- * Steps are tried strongest-visible-first; the first that clears 3:1 vs both
- * page steps wins, else the highest-contrast candidate. The ring sits offset
- * outside the control on the page, so page contrast is the governing pair.
+ * DG-A11Y-01 / DF-03. The external focus ring must clear 3:1 against both page
+ * surfaces in its own scheme. Prefer a solid palette step over a low-alpha
+ * outline.
  */
 function pickFocusRingColorFromSteps(step: (n: number) => string | undefined): string {
   const fallback = step(11) ?? step(12) ?? step(9) ?? "transparent";
@@ -49,38 +37,38 @@ function pickFocusRingColor(theme: Record<string, string>): string {
   return pickFocusRingColorFromSteps((n) => theme[`color${n}`]);
 }
 
+// DF-06 / WCAG 1.4.11: control shapes need 3:1 on page, surface1 and control wells.
+function pickBoundaryColor(theme: Record<string, string>): string {
+  const fallback = theme.color12 ?? "transparent";
+  const surfaces = [theme.background, theme.color3, theme.color5].map((raw) =>
+    normalizeToHex(raw ?? ""),
+  );
+  if (surfaces.some((hex) => !hex)) return fallback;
+  const luminances = surfaces.map((hex) => relativeLuminance(hex!));
+  let best = fallback;
+  let bestMin = 0;
+  for (const key of [8, 9, 10, 11, 12]) {
+    const raw = theme[`color${key}`];
+    const hex = raw ? normalizeToHex(raw) : null;
+    if (!raw || !hex) continue;
+    const luminance = relativeLuminance(hex);
+    const minC = Math.min(...luminances.map((surface) => contrastRatio(luminance, surface)));
+    if (minC >= minContrastRatio) return raw;
+    if (minC > bestMin) {
+      bestMin = minC;
+      best = raw;
+    }
+  }
+  return best;
+}
+
 function getBaseTheme(theme: Record<string, string>) {
   return {
-    // DG-A11Y-01: solid, scheme-aware focus ring (≥3:1 vs page surfaces).
-    // Additive — Tamagui's own ring is `rgba(ink, 0.2)`, which measured
-    // 1.36:1. This is an improvement and stays (M5).
     outlineColor: pickFocusRingColor(theme),
-    // Align placeholder/disabled text with the dedicated muted slot.
-    placeholderColor: theme.color10,
-    //
-    // MPO-19 X4 — SEVEN LINES DELETED HERE, deliberately.
-    //
-    // `backgroundPress: color5`, `backgroundFocus: color6`,
-    // `backgroundActive: color4`, `borderColor: color5`,
-    // `borderColorHover: color6`, `borderColorFocus: color7` and
-    // `borderColorPress: color7` used to sit in this object, re-anchoring
-    // Tamagui's whole interaction ramp one to three steps deeper. The only
-    // justification written down was "Normalize interaction ramp across
-    // components", and uniformity is an argument for HAVING a ramp, not for
-    // these values. The effect was that every mpo border read heavier and
-    // every focus fill landed darker than the same component in Tamagui.
-    //
-    // The theme builder's own templates already derive all seven from the
-    // background index, so deleting the pins does not leave a hole: it hands
-    // the keys back to the layer that owns them. If uniformity is wanted
-    // again, it gets re-derived from the template offsets rather than pinned
-    // as literal ramp steps.
-    //
-    // The semantic aliases below are a different thing and stay: they name
-    // slots Tamagui has no token for at all, so they contradict nothing.
-    // Project-level semantic aliases for palette slots not covered by Tamagui defaults.
-    // textMuted sits on the $color11 tier: the lowest ramp step that keeps
-    // secondary text AA-readable on color1/2 surfaces (SB-R contrast sweep).
+    boundaryColor: pickBoundaryColor(theme),
+    switchThumb: "#ffffff",
+    // The v5 makeSurface templates own the interaction ramp and borders.
+    // No ramp step is pinned here; only semantic aliases are added.
     textMuted: theme.color11,
     textSubtle: theme.color6,
     borderStrong: theme.color7,
@@ -96,25 +84,35 @@ function getBaseTheme(theme: Record<string, string>) {
 // accent — SB-E-01). The accent theme is solid by palette shape already.
 const solidIntentParents = new Set(["error", "warning", "success"]);
 
+function parseHsl(raw: string): [number, number, number] | undefined {
+  const match = raw.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/);
+  if (!match) return undefined;
+  return [Number(match[1]), Number(match[2]), Number(match[3])];
+}
+
+function lowerLightness(raw: string, points: number): string {
+  const hsl = parseHsl(raw);
+  if (!hsl) return raw;
+  const [h, s, l] = hsl;
+  return `hsl(${h}, ${s}%, ${Math.max(0, l - points)}%)`;
+}
+
 /**
- * Adjust a background's lightness until it clears WCAG AA (4.5:1) against
- * the given foreground. Steps away from the foreground's lightness 1.5% at a
- * time; bails (returns the original) on unparseable colors.
+ * Darken a background until its pale foreground clears WCAG AA (4.5:1).
+ * Unparseable colors retain their original background.
  */
 function clampBgForReadableText(bgRaw: string, fgRaw: string): string {
   const fgHex = normalizeToHex(fgRaw);
   let bgHex = normalizeToHex(bgRaw);
   if (!fgHex || !bgHex) return bgRaw;
   const fgLum = relativeLuminance(fgHex);
-  const hslMatch = bgRaw.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/);
-  if (!hslMatch) return bgRaw;
-  const h = Number(hslMatch[1]);
-  const s = Number(hslMatch[2]);
-  let l = Number(hslMatch[3]);
-  const dir = fgLum > relativeLuminance(bgHex) ? -1 : 1;
-  for (let i = 0; i < 24; i++) {
+  const hsl = parseHsl(bgRaw);
+  if (!hsl) return bgRaw;
+  const [h, s, initialLightness] = hsl;
+  let l = initialLightness;
+  for (let i = 0; i < 40; i++) {
     if (contrastRatio(fgLum, relativeLuminance(bgHex)) >= 4.5) break;
-    l = Math.min(100, Math.max(0, l + dir * 1.5));
+    l = Math.max(0, l - 1.5);
     const next = normalizeToHex(`hsl(${h}, ${s}%, ${l}%)`);
     if (!next) return bgRaw;
     bgHex = next;
@@ -124,39 +122,28 @@ function clampBgForReadableText(bgRaw: string, fgRaw: string): string {
 
 export const defaultBuilderOptions: CreateThemesBuilderOptions = {
   getTheme: ({ name, theme, palette }: GetThemeProps): Record<string, string> => {
-    // Component sub-themes (t_Card, t_ListItem, t_Button, ...) are narrow
-    // templates -- background/color steps only, NO colorN/border tokens. An
-    // element inside one that sets borderColor="$borderColor" resolves
-    // nothing and CSS falls back to currentColor: near-black borders on
-    // every bordered card/row. Anchor border tokens from the scheme
-    // palette (padded shape: [(len-12)/2 alpha anchors] + 12 colors +
-    // [anchors]; colorN = colors[N-1]).
+    // Surface templates carry their own borders and states, but no colorN ramp.
     if (!theme.color5) {
       if (!palette) return {};
       const colors0 = Math.max(0, Math.floor((palette.length - 12) / 2));
       const step = (i: number): string => palette[colors0 + i] ?? "transparent";
-      // DF-03: component sub-theme templates (t_Input, t_Button, ...) carry
-      // Tamagui's stock 20%-alpha `outlineColor`, which silently overrides the
-      // base theme's solid ring inside those scopes. Re-derive the solid,
-      // scheme-aware ring from this sub-theme's own palette steps.
+      // A sub-theme can replace the palette, so its ring must follow that palette.
       const outlineColor = pickFocusRingColorFromSteps((n) => step(n - 1));
 
-      // Solid semantic-intent Buttons (light_error_Button, dark_warning_Button,
-      // ...): surface on the hue's step 11 with a LUMINANCE-COMPUTED foreground
-      // (Axiom 15 / LC-05) — the hue's step-1 or step-12 anchor, whichever
-      // reads better on the resting fill. The sub-theme `color` carries it so
-      // labels ($color via useResolvedKnobs), icons (currentColor) and any
-      // inherited text all pair correctly. Every interaction fill is then
-      // darkened/lightened until it holds that foreground at the 4.5 AA floor.
+      // Solid semantic-intent Buttons pair Radix 9 with the hue's pale anchor
+      // at a 4.5:1 floor. Hover and press darken that fill in both schemes so
+      // inherited labels and icons keep the same readable foreground.
       const parts = name.split("_");
       if (parts[parts.length - 1] === "Button" && solidIntentParents.has(parts[parts.length - 2])) {
-        const scheme = parts[0];
-        // Luminance-computed on-fill foreground (Axiom 15): the hue's step-1
-        // (pale) or step-12 (deep) anchor, whichever reads better on the fill.
-        const fg = pickReadableForeground(step(10), step(0), step(11));
-        const bg = clampBgForReadableText(step(10), fg);
-        const hover = clampBgForReadableText(scheme === "light" ? step(9) : step(11), fg);
-        const press = clampBgForReadableText(scheme === "light" ? step(11) : step(9), fg);
+        const firstHex = normalizeToHex(step(0));
+        const lastHex = normalizeToHex(step(11));
+        const fg =
+          firstHex && lastHex && relativeLuminance(lastHex) > relativeLuminance(firstHex)
+            ? step(11)
+            : step(0);
+        const bg = clampBgForReadableText(step(8), fg);
+        const hover = lowerLightness(bg, 4);
+        const press = lowerLightness(bg, 8);
         return {
           outlineColor,
           background: bg,
@@ -176,10 +163,6 @@ export const defaultBuilderOptions: CreateThemesBuilderOptions = {
 
       return {
         outlineColor,
-        borderColor: step(4),
-        borderColorHover: step(5),
-        borderColorFocus: step(6),
-        borderColorPress: step(6),
       };
     }
     return getBaseTheme(theme);

package/src/theme/defaults/categoryFonts.ts

@@ -11,6 +11,16 @@ import { defaultFonts } from "./fonts";
  * and another there, which is the same one-source failure MPO-44 was about.
  */
 export const defaultCategoryFonts = {
+  headingSerif: defaultFonts.headingSerif,
+  headingMono: defaultFonts.headingMono,
+  headingSlab: defaultFonts.headingSlab,
+  headingRounded: defaultFonts.headingRounded,
+  headingCondensed: defaultFonts.headingCondensed,
+  headingCursive: defaultFonts.headingCursive,
+  headingHandwriting: defaultFonts.headingHandwriting,
+  headingPixel: defaultFonts.headingPixel,
+  headingBlackletter: defaultFonts.headingBlackletter,
+  headingGeometric: defaultFonts.headingGeometric,
   serif: defaultFonts.serif,
   mono: defaultFonts.mono,
   slab: defaultFonts.slab,

package/src/theme/defaults/fonts.spec.ts

@@ -1,4 +1,10 @@
+import { createRequire } from "node:module";
 import { describe, expect, it } from "vitest";
+import { createFontLoader } from "../../fonts/createFontLoader.js";
+import { generateScale } from "../scale/generateScale";
+import { defaultScaleInputs } from "../scale/scaleInputs";
+import { scaleFontSet } from "../scale/scaleFonts";
+import * as fontDefaults from "./fonts";
 import { createDefaultFont } from "../../font";
 import { flooredLineHeight, fontCategoryMetrics } from "../fontCategoryMetrics";
 import { fontCategoryStacks } from "../fontCategoryStacks";
@@ -78,9 +84,7 @@ describe("default heading/body fonts — tracking-by-size (Axiom 15 OPTICS, LC-1
   it("heading H1–H4 land on the expected optical tracking (snapshot)", () => {
     const size = table(defaultHeadingFont, "size");
     const letterSpacing = table(defaultHeadingFont, "letterSpacing");
-    // MPO-19 X8: heading rides the body scale now, so H1 $10 = 40px at
-    // weight 800 rather than 64px at 400. Tracking follows the rendered
-    // size, so every value moves with it — that IS the invariant.
+    // Tracking follows the rendered size on the shared heading/body ladder.
     expect({
       h1: { size: size["10"], tracking: letterSpacing["10"] },
       h2: { size: size["9"], tracking: letterSpacing["9"] },
@@ -113,7 +117,7 @@ describe("bodyFont category fonts — one ladder, distinct families (MPO-44)", (
   const bodyStops = ["body", "serif", "mono", "rounded"] as const;
   const firstFamily = (stack: string) => stack.split(",")[0]?.replace(/['"]/g, "").trim();
   const categories = Object.keys(defaultFonts).filter(
-    (name) => name !== "heading" && name !== "body",
+    (name) => !name.startsWith("heading") && name !== "body",
   ) as FontCategory[];
   const bodySize = table(defaultBodyFont, "size");
   const bodyLineHeight = table(defaultBodyFont, "lineHeight");
@@ -238,3 +242,79 @@ function fontFamily(font: unknown): string {
   if (family && typeof family.val === "string") return family.val;
   return "";
 }
+
+describe("heading scope categories", () => {
+  it("keeps true at the size-four weight", () => {
+    expect(strTable(defaultHeadingFont, "weight").true).toBe("600");
+  });
+
+  it("registers ten heading categories on heading tables with category leading floors", () => {
+    const keys = fontDefaults.headingCategoryFontKeys;
+    expect(Object.keys(keys ?? {})).toHaveLength(10);
+    const headingSizes = table(defaultHeadingFont, "size");
+    const headingLeading = table(defaultHeadingFont, "lineHeight");
+    for (const [category, key] of Object.entries(keys)) {
+      const font = defaultFonts[key];
+      expect(fontFamily(font)).toBe(fontCategoryStacks[category as FontCategory]);
+      expect(table(font, "size")).toEqual(headingSizes);
+      expect(strTable(font, "weight")).toEqual(strTable(defaultHeadingFont, "weight"));
+      for (const [step, size] of Object.entries(headingSizes)) {
+        expect(table(font, "lineHeight")[step]).toBe(
+          flooredLineHeight(
+            size,
+            headingLeading[step]!,
+            fontCategoryMetrics[category as FontCategory].heading,
+          ),
+        );
+        expect(table(font, "letterSpacing")[step]).toBe(0);
+      }
+    }
+  });
+
+  it("rebuilds heading categories on the target scale and preserves consumer families and weights", () => {
+    const from = generateScale(defaultScaleInputs).fonts;
+    const to = generateScale({ ...defaultScaleInputs, type: 19 }).fonts;
+    const scaled = scaleFontSet(defaultFonts, from, to);
+    expect(scaled.headingSerif).toBeDefined();
+    for (const [category, key] of Object.entries(fontDefaults.headingCategoryFontKeys)) {
+      expect(table(scaled[key], "size")).toEqual(to.headingSizes);
+      for (const [step, size] of Object.entries(to.headingSizes)) {
+        expect(table(scaled[key], "lineHeight")[step]).toBe(
+          flooredLineHeight(
+            size,
+            to.headingLineHeights[step]!,
+            fontCategoryMetrics[category as FontCategory].heading,
+          ),
+        );
+      }
+      expect(strTable(scaled[key], "weight").true).toBe("600");
+    }
+    const custom = { ...defaultFonts.heading, family: "Custom", weight: { 4: "500", true: "500" } };
+    const overridden = scaleFontSet({ headingSerif: custom }, from, to);
+    expect(fontFamily(overridden.headingSerif)).toBe("Custom");
+    expect(strTable(overridden.headingSerif, "weight").true).toBe("500");
+  });
+
+  it("loads every native face declared by the purpose fonts", () => {
+    const require = createRequire(import.meta.url);
+    const original = require.extensions[".otf"];
+    require.extensions[".otf"] = (module) => {
+      module.exports = 1;
+    };
+    try {
+      const fonts = createFontLoader({ inter: true, fonts: [] }).importFonts();
+      expect(Object.keys(fonts).sort()).toEqual(
+        ["Inter", "InterMedium", "InterSemiBold", "InterBold", "InterExtraBold"].sort(),
+      );
+      for (const font of [defaultHeadingFont, defaultBodyFont]) {
+        expect(font.face[500]?.normal).toBe("InterMedium");
+        for (const face of Object.values(font.face)) {
+          expect(fonts).toHaveProperty(face.normal!.split(",")[0]!.trim());
+        }
+      }
+    } finally {
+      if (original) require.extensions[".otf"] = original;
+      else delete require.extensions[".otf"];
+    }
+  });
+});