@multiplatform.one/theme 7.4.1 → 7.6.0

package/src/figma/figmaTokens.spec.ts

@@ -1,5 +1,5 @@
 import * as Colors from "@tamagui/colors";
-import { tokens } from "@tamagui/themes";
+import { defaultConfig } from "@tamagui/config/v5";
 import { describe, expect, it } from "vitest";
 import { normalizeToHex } from "../theme/colorRules";
 import { defaultAccentTheme } from "../theme/defaults/accent";
@@ -89,13 +89,13 @@ describe("buildFigmaTokens", () => {
 
   describe("semantic", () => {
     it("derives the current interaction-ramp aliases (post-knobs rebuild)", () => {
-      // These pin the drift the May 2026 spec missed: borderColor moved from
-      // color7 to color5, textMuted from color10 to color11.
-      expect(result.semantic.borderColor?.alias).toBe("color5");
-      expect(result.semantic.borderColorHover?.alias).toBe("color6");
+      // MPO-19 X4: the seven pinned ramp steps were deleted from
+      // `defaultBuilderOptions.getTheme`, so these aliases are the theme
+      // BUILDER's derivation again rather than mpo's re-anchoring. That is
+      // the correction landing, and what this pins is that it landed —
+      // borderColor back off color5, the background states no longer forced.
+      expect(result.semantic.borderColor?.alias).toBe("color4");
       expect(result.semantic.textMuted?.alias).toBe("color11");
-      expect(result.semantic.backgroundPress?.alias).toBe("color5");
-      expect(result.semantic.backgroundActive?.alias).toBe("color4");
       expect(result.semantic.placeholderColor?.alias).toBe("color10");
       expect(result.semantic.surfaceMuted?.alias).toBe("color10");
       expect(result.semantic.borderStrong?.alias).toBe("color7");
@@ -135,13 +135,16 @@ describe("buildFigmaTokens", () => {
   });
 
   describe("sizing", () => {
-    it("mirrors @tamagui/themes tokens with figma-safe names", () => {
-      const sizeTrue = (tokens.size as Record<string, { val: number }>).true.val;
-      expect(result.sizing["size-true"]).toBe(sizeTrue);
-      const radius4 = (tokens.radius as Record<string, { val: number }>)["4"].val;
-      expect(result.sizing["radius-4"]).toBe(radius4);
+    it("mirrors the v5 defaultConfig tokens with figma-safe names", () => {
+      // Read against the ERA the package pins (MPO-19 X13), not against a
+      // transcribed table: v5 keys carry the `$`, values are raw numbers.
+      const size = defaultConfig.tokens.size as Record<string, number>;
+      expect(result.sizing["size-true"]).toBe(size.$true);
+      expect(result.sizing["radius-4"]).toBe(
+        (defaultConfig.tokens.radius as Record<string, number>)["4"],
+      );
       expect(result.sizing["space-1-5"]).toBe(
-        (tokens.space as Record<string, { val: number }>)["1.5"].val,
+        (defaultConfig.tokens.space as Record<string, number>)["$1.5"],
       );
     });
 
@@ -181,7 +184,7 @@ describe("buildFigmaTokens", () => {
       const { modes } = result.knobs.elevation;
       expect(modes.none).toEqual({ sizeToken: null, px: null });
       expect(modes.small.sizeToken).toBe("$1");
-      expect(modes.small.px).toBe((tokens.size as Record<string, { val: number }>)["1"].val);
+      expect(modes.small.px).toBe((defaultConfig.tokens.size as Record<string, number>).$1);
       expect(modes.medium.sizeToken).toBe("$2");
       expect(modes.large.sizeToken).toBe("$4");
     });
@@ -216,17 +219,18 @@ describe("buildFigmaTokens", () => {
 
   describe("typography (closes deferred task 10.0)", () => {
     it("exports heading/body size + lineHeight tables from the built default fonts", () => {
-      // Heading scale is 1.4x Inter base: H1 $10 = round(46 * 1.4) = 64.
-      expect(result.typography.heading.size["10"]).toBe(64);
-      expect(result.typography.body.size.true).toBe(14);
-      // lineHeight = size + 10 (defaults/fonts.ts).
-      expect(result.typography.body.lineHeight.true).toBe(24);
-      expect(result.typography.heading.lineHeight["10"]).toBe(74);
+      // MPO-19 X8/X9: heading rides the body scale now, so H1 $10 is 40 at
+      // weight 800 rather than 64 at 400, and body $true is v5's 15 with the
+      // tapering leading instead of v4's 14 with `size + 10`.
+      expect(result.typography.heading.size["10"]).toBe(40);
+      expect(result.typography.body.size.true).toBe(15);
+      expect(result.typography.body.lineHeight.true).toBe(23);
+      expect(result.typography.heading.lineHeight["10"]).toBe(50);
     });
 
     it("exports Inter dynamic tracking per size", () => {
       const body = result.typography.body;
-      expect(body.letterSpacing.true).toBe(interTrackingPx(14));
+      expect(body.letterSpacing.true).toBe(interTrackingPx(15));
       expect(Object.keys(body.letterSpacing).length).toBeGreaterThanOrEqual(16);
     });
 

package/src/figma/figmaTokens.ts

@@ -93,7 +93,7 @@ export interface FigmaRadiusMode {
   /** `Sizing` collection variable to alias (e.g. `radius-4`). */
   figmaName: string;
   px: number;
-  /** Outer/nested radius fragment (`knobProps.borderRadiusOuter`). */
+  /** Outer/nested radius fragment (`knobProps.borderRadiusNested`). */
   outerToken: string;
   outerFigmaName: string;
   outerPx: number;
@@ -344,7 +344,7 @@ function buildKnobs(): FigmaKnobsExport {
   for (const mode of RADIUS_KNOB_MODES) {
     const { knobProps } = resolveKnobs({ ...defaultKnobs, borderRadius: mode });
     const token = String(knobProps.borderRadius.borderRadius);
-    const outerToken = String(knobProps.borderRadiusOuter.borderRadius);
+    const outerToken = String(knobProps.borderRadiusNested.borderRadius);
     borderRadius[mode] = {
       token,
       figmaName: tokenToFigma(token, "radius"),

package/src/font.ts

@@ -1,33 +1,38 @@
 import type { GenericFont } from "@tamagui/web";
 import { createFont } from "@tamagui/web";
+import {
+  bodyFontLineHeights,
+  bodyFontSizes,
+  bodyLineHeightPx,
+  categoryLineHeights,
+} from "./theme/defaults/fonts";
 
 const defaults = {
-  size: {
-    1: 11,
-    2: 12,
-    3: 13,
-    4: 14,
-    5: 15,
-    6: 16,
-    7: 18,
-    8: 21,
-    9: 28,
-    10: 42,
-    11: 52,
-    12: 62,
-    13: 72,
-    14: 92,
-    15: 114,
-    16: 124,
-  } as const,
+  // 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,
 };
 
@@ -35,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" ? v * 1.2 + 6 : v]),
-    ) as typeof size,
+    lineHeight,
     letterSpacing: defaults.letterSpacing,
     weight: defaults.weight,
     ...font,

package/src/index.ts

@@ -7,5 +7,17 @@ export * from "./menuRow";
 export * from "./font";
 export * from "./fonts/index";
 
+// Contrast + matrix assertions downstream repos call (MPO-18). The full
+// audit surface including the browser-side capturer stays on ./audit.
+export { diffGeometry, evaluateNoBreakage, evaluateTextContrast } from "./audit";
+export type {
+  GeometryDiff,
+  MatrixTextSample,
+  NoBreakageInput,
+  NoBreakageResult,
+  TextContrastResult,
+  TextContrastViolation,
+} from "./audit";
+
 // Thin type re-exports so packages/apps never import @tamagui/web directly.
 export type { GenericFonts, MediaQueryKey, ThemeName } from "@tamagui/web";

package/src/keyboardFocusRing.ts

@@ -36,15 +36,21 @@ export function wasKeyboardFocus(): boolean {
   return lastInputWasKeyboard;
 }
 
-import { FOCUS_VISIBLE_RING } from "./theme/focusState";
+import { FOCUS_VISIBLE_RING_INSET } from "./theme/focusState";
 
 /**
- * Standard manual ring props — the SAME geometry as `FOCUS_VISIBLE_RING`
- * (2px solid `$outlineColor`, inset −2), spread here so manually-painted
- * rings and `focusVisibleStyle` rings can never drift apart.
+ * Standard manual ring props — the INSET ring geometry
+ * (`FOCUS_VISIBLE_RING_INSET`: 2px solid `$outlineColor`, offset −2), spread
+ * here so manually-painted rings can never drift from the theme contract.
+ * Manual painting exists for roving-focus / activedescendant composites
+ * (ToggleGroup segments inside a clipped Group, menu/listbox rows under a
+ * clipped overlay, table rows and cells) — items inside clipping ancestors,
+ * which is exactly the LC-71 §4 inset carve-out; an offset-0 band there
+ * would be severed by the clip. Standalone controls take the offset-0
+ * `FOCUS_VISIBLE_RING` via `focusVisibleStyle` / `ensureFocusVisibleRing()`.
  */
 export const keyboardFocusRingProps = {
-  ...FOCUS_VISIBLE_RING,
+  ...FOCUS_VISIBLE_RING_INSET,
 } as const;
 
 /**
@@ -85,7 +91,7 @@ export const compositeFocusRingCss = `/* LC-71: ring on the composite outer box;
 }
 .mp-chip-dismiss:focus-visible .mp-chip-dismiss-ring {
   outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
-  outline-offset: 2px;
+  outline-offset: 0;
 }`;
 
 const COMPOSITE_RING_STYLE_ID = "mp-composite-focus-ring";

package/src/theme/FontKnobStyles.tsx

@@ -27,6 +27,8 @@
  */
 import { getConfig } from "@tamagui/web";
 import { useEffect } from "react";
+import { fontCategoryMetrics, flooredLineHeight } from "./fontCategoryMetrics";
+import { fontCategoryStacks } from "./fontCategoryStacks";
 import type { FontCategory } from "./knobs";
 import { defaultKnobs } from "./knobs";
 import { usePresetContext } from "./PresetContext";
@@ -34,32 +36,12 @@ import { usePresetContext } from "./PresetContext";
 const STYLE_TAG_ID = "mp-font-knob-styles";
 
 /**
- * Per-category legibility floors, applied on top of the base (Inter-tuned)
- * lineHeight tables when the heading/body knob selects that category.
- * `heading`/`body` are minimum lineHeight:fontSize ratios; `letterSpacing:
- * "neutral"` zeroes Inter's tracking-by-size curve (wrong for fixed-pitch
- * and connected-script families). "sans-serif" is the default scope (never
- * overridden), listed for completeness.
+ * Re-exported so `@multiplatform.one/theme` consumers keep the historical
+ * import path. The table itself lives in `fontCategoryMetrics.ts` because
+ * `defaults/fonts.ts` bakes the same floors into the registered category
+ * fonts and the two must not drift (LC-11).
  */
-export const fontCategoryMetrics: Record<
-  FontCategory,
-  { heading: number; body: number; letterSpacing: "inherit" | "neutral" }
-> = {
-  "sans-serif": { heading: 1.15, body: 1.4, letterSpacing: "inherit" },
-  serif: { heading: 1.2, body: 1.4, letterSpacing: "inherit" },
-  mono: { heading: 1.25, body: 1.45, letterSpacing: "neutral" },
-  // Heading floors below are sized to each configured face's em box
-  // (ascent+descent) so display headings never clip (LC-11): Roboto Slab
-  // ≈1.32, Nunito ≈1.36, Silkscreen ≈1.3, Poppins/Futura ≈1.4.
-  slab: { heading: 1.35, body: 1.4, letterSpacing: "inherit" },
-  rounded: { heading: 1.4, body: 1.4, letterSpacing: "inherit" },
-  condensed: { heading: 1.15, body: 1.4, letterSpacing: "inherit" },
-  cursive: { heading: 1.3, body: 1.5, letterSpacing: "neutral" },
-  handwriting: { heading: 1.25, body: 1.45, letterSpacing: "neutral" },
-  pixel: { heading: 1.35, body: 1.4, letterSpacing: "neutral" },
-  blackletter: { heading: 1.3, body: 1.45, letterSpacing: "neutral" },
-  geometric: { heading: 1.45, body: 1.4, letterSpacing: "inherit" },
-};
+export { fontCategoryMetrics };
 
 // Default leading for font-scoped text that carries no explicit lineHeight
 // (e.g. `Text fontFamily="$body" fontSize=…` renders `line-height: normal`
@@ -90,7 +72,8 @@ export interface FontScopeTables {
 /**
  * Resolve the concrete font-family stack registered in the Tamagui config for
  * a font category. Returns undefined when the category font is not registered
- * (the caller then leaves the default family in place).
+ * (the caller then uses `fontCategoryStacks` so the knob still writes
+ * `--f-family` — live SHC console had the style tag and skipped the family).
  */
 export function getConfiguredFontFamily(category: FontCategory): string | undefined {
   let config: ReturnType<typeof getConfig> | undefined;
@@ -164,9 +147,9 @@ function buildScopeRule(
     for (const [key, size] of Object.entries(tables.size)) {
       const baseLineHeight = tables.lineHeight[key];
       if (typeof baseLineHeight !== "number") continue;
-      const floor = Math.round(size * minRatio);
-      if (baseLineHeight < floor) {
-        decls.push(`--f-lineHeight-${key}: ${floor}px !important`);
+      const floored = flooredLineHeight(size, baseLineHeight, minRatio);
+      if (floored > baseLineHeight) {
+        decls.push(`--f-lineHeight-${key}: ${floored}px !important`);
       }
     }
     if (metrics.letterSpacing === "neutral" && tables.letterSpacing) {
@@ -202,13 +185,13 @@ export function buildFontKnobCss(
     defaultLeadingRule("body", bodyFont),
   ];
   if (headingFont !== "sans-serif") {
-    const family = resolveFamily(headingFont);
+    const family = resolveFamily(headingFont) ?? fontCategoryStacks[headingFont];
     if (family) {
       rules.push(buildScopeRule("heading", headingFont, family, resolveTables("heading")));
     }
   }
   if (bodyFont !== "sans-serif") {
-    const family = resolveFamily(bodyFont);
+    const family = resolveFamily(bodyFont) ?? fontCategoryStacks[bodyFont];
     if (family) {
       rules.push(buildScopeRule("body", bodyFont, family, resolveTables("body")));
     }

package/src/theme/Tint.tsx

@@ -13,7 +13,8 @@ export interface TintProps extends PropsWithChildren {
 
 /**
  * Depth-based tint component. Each nesting level increments the depth
- * and selects a tint from the preset's tints array via modulo.
+ * and selects a tint from the preset's tints array via
+ * `tints[(depth - 1) % length]` so the first Tint is `tints[0]`.
  *
  * Applies a tint sub-theme based on nesting depth.
  */
@@ -21,7 +22,7 @@ export function Tint({ children, alt = 0, disable, ...props }: TintProps) {
   const parentDepth = useContext(TintDepthContext);
   const depth = parentDepth + 1 + alt;
   const tints = usePresetTints();
-  const tint = tints.length > 0 ? tints[depth % tints.length] : undefined;
+  const tint = tints.length > 0 ? tints[(depth - 1) % tints.length] : undefined;
 
   return (
     <TintDepthContext.Provider value={depth}>

package/src/theme/animations/css.ts

@@ -1,10 +1,23 @@
 import { createAnimations } from "@tamagui/animations-css";
 
+/**
+ * The CSS driver's named durations.
+ *
+ * `bouncy`, `lazy`, `slow`, `medium` and `quick` are Tamagui's own names and
+ * carry Tamagui's own values — a shared name that means something different
+ * here is worse than no name, because every consumer reading `animation="medium"`
+ * against the upstream docs gets a different answer than the one it renders.
+ * MPO-19 X10: `medium` was `ease-in-out 250ms` against stock `ease-in 300ms`,
+ * with no improvement argument written down anywhere.
+ *
+ * `tooltip`, `snappy` and `gentle` are additive — names Tamagui does not use,
+ * so they are ours to set and are not a contradiction.
+ */
 export const animationConfig = {
   bouncy: "ease-in 200ms",
   lazy: "ease-in 600ms",
   slow: "ease-in 500ms",
-  medium: "ease-in-out 250ms",
+  medium: "ease-in 300ms",
   quick: "ease-in 100ms",
   tooltip: "ease-in 400ms",
   snappy: "ease-out 80ms",