@multiplatform.one/theme 7.34.3 → 7.35.0

package/src/audit/constraintAudit.ts

@@ -5,10 +5,14 @@
  * Tamagui token steps defined by the knob system. Off-scale values indicate
  * styles that bypassed the constraint system.
  *
- * Token values are from @tamagui/themes v5 + resolveKnobs.ts mappings.
+ * Token values are the active generated scale (`globalThis.__MPO_SCALE__`,
+ * else the default `generateScale`) + resolveKnobs.ts mappings.
  * Run this in-browser via Playwright's page.evaluate(runConstraintAudit).
  */
 
+import { type GeneratedScale, type ScaleTokens, generateScale } from "../theme/scale/generateScale";
+import { defaultScaleInputs } from "../theme/scale/scaleInputs";
+
 // ── Types ─────────────────────────────────────────────────────────────────────
 
 export interface PropertyAudit {
@@ -84,55 +88,41 @@ export interface AuditReport {
 }
 
 // ── Token scale definitions ───────────────────────────────────────────────────
-// These match @tamagui/themes v5 tokens + resolveKnobs.ts mapping tables.
-
-/** Radius token values: token key → px (from @tamagui/themes v5 radius tokens) */
-const RADIUS_TOKENS: Record<number, number> = {
-  0: 0,
-  1: 3,
-  2: 5,
-  3: 7,
-  4: 9,
-  5: 10,
-  6: 16,
-  7: 19,
-  8: 22,
-  9: 26,
-  10: 34,
-  11: 42,
-  12: 50,
-};
+// The active generated scale's tokens + resolveKnobs.ts mapping tables.
 
-/** Space token values: token key → px (from @tamagui/themes v5 space tokens) */
-const SPACE_TOKENS: Record<number, number> = {
-  0: 0,
-  0.25: 0.5,
-  0.5: 1,
-  0.75: 1.5,
-  1: 2,
-  1.5: 4,
-  2: 7,
-  2.5: 10,
-  3: 13,
-  3.5: 16,
-  4: 18,
-  4.5: 21,
-  5: 24,
-  6: 32,
-  7: 39,
-  8: 46,
-};
+function activeScaleTokens(): ScaleTokens {
+  const published = (globalThis as { __MPO_SCALE__?: GeneratedScale }).__MPO_SCALE__;
+  return published?.tokens ?? generateScale(defaultScaleInputs).tokens;
+}
+
+/** Whole and half-step keys of a token group as numbers (`$1.5` → 1.5); `true` and negatives dropped. */
+function numericTokens(group: Record<string, number>): Record<number, number> {
+  const out: Record<number, number> = {};
+  for (const [key, px] of Object.entries(group)) {
+    const stop = Number(key.replace(/^\$/, ""));
+    if (Number.isFinite(stop) && stop >= 0) out[stop] = px;
+  }
+  return out;
+}
+
+const scaleTokens = activeScaleTokens();
+
+/** Radius token values: token key → px. */
+const RADIUS_TOKENS: Record<number, number> = numericTokens(scaleTokens.radius);
+
+/** Space token values: token key → px. */
+const SPACE_TOKENS: Record<number, number> = numericTokens(scaleTokens.space);
 
 /**
  * Inner border radius knob → pixel value
  * Source: borderRadiusMap in resolveKnobs.ts
  */
 const BORDER_RADIUS_KNOB: Record<string, number> = {
-  none: RADIUS_TOKENS[0], // 0px
-  small: RADIUS_TOKENS[2], // 5px
-  medium: RADIUS_TOKENS[4], // 9px
-  large: RADIUS_TOKENS[6], // 16px
-  full: RADIUS_TOKENS[12], // 50px
+  none: RADIUS_TOKENS[0],
+  small: RADIUS_TOKENS[2],
+  medium: RADIUS_TOKENS[4],
+  large: RADIUS_TOKENS[6],
+  full: RADIUS_TOKENS[12],
 };
 
 /**
@@ -140,11 +130,11 @@ const BORDER_RADIUS_KNOB: Record<string, number> = {
  * Source: outerRadiusMap in resolveKnobs.ts
  */
 const OUTER_RADIUS_KNOB: Record<string, number> = {
-  none: RADIUS_TOKENS[0], // 0px
-  small: RADIUS_TOKENS[2], // 5px
-  medium: RADIUS_TOKENS[3], // 7px
-  large: RADIUS_TOKENS[4], // 9px
-  full: RADIUS_TOKENS[5], // 10px
+  none: RADIUS_TOKENS[0],
+  small: RADIUS_TOKENS[2],
+  medium: RADIUS_TOKENS[3],
+  large: RADIUS_TOKENS[4],
+  full: RADIUS_TOKENS[5],
 };
 
 /**
@@ -159,33 +149,29 @@ const BORDER_WIDTH_KNOB: Record<string, number> = {
 };
 
 /**
- * Gap (inner spacing) knob → pixel value
- * Source: gapMap in resolveKnobs.ts ($2, $4, $5 space tokens)
+ * Within-group gap roles → pixel value on the scale.
+ * Source: spacingRoles in resolveKnobs.ts (gapSm $2, gap $3).
  */
 export const GAP_KNOB: Record<string, number> = {
-  small: SPACE_TOKENS[2], // 7px
-  medium: SPACE_TOKENS[4], // 18px
-  large: SPACE_TOKENS[5], // 24px
+  gapSm: SPACE_TOKENS[2],
+  gap: SPACE_TOKENS[3],
 };
 
 /**
- * Gap large (gapLg) knob → pixel value
- * Source: gapLgMap in resolveKnobs.ts ($3, $5, $6 space tokens)
+ * Between-groups gap role → pixel value on the scale.
+ * Source: spacingRoles in resolveKnobs.ts (gapLg $5).
  */
 export const GAP_LG_KNOB: Record<string, number> = {
-  small: SPACE_TOKENS[3], // 13px
-  medium: SPACE_TOKENS[5], // 24px
-  large: SPACE_TOKENS[6], // 32px
+  gapLg: SPACE_TOKENS[5],
 };
 
 /**
- * Panel padding knob → pixel value
- * Source: panelPaddingMap in resolveKnobs.ts ($3, $4, $6 space tokens)
+ * Inset roles → pixel value on the scale.
+ * Source: spacingRoles in resolveKnobs.ts (panelPadding $4, featurePadding $6).
  */
 const PANEL_PADDING_KNOB: Record<string, number> = {
-  small: SPACE_TOKENS[3], // 13px
-  medium: SPACE_TOKENS[4], // 18px
-  large: SPACE_TOKENS[6], // 32px
+  panelPadding: SPACE_TOKENS[4],
+  featurePadding: SPACE_TOKENS[6],
 };
 
 /**
@@ -225,6 +211,7 @@ const VALID_FONT_WEIGHT = new Set(Object.values(FONT_WEIGHT_KNOB));
 const FONT_FAMILY_KNOB: Record<string, string> = {
   inter: "sans-serif ($body/$heading)",
   georgia: "serif",
+  "ui-monospace": "mono",
   monospace: "mono",
   "roboto slab": "slab",
   rockwell: "slab (fallback)",
@@ -335,37 +322,55 @@ function reverseMapFontFamily(computed: string): { knob: string; offScale: boole
  */
 export function runConstraintAudit(rootSelector?: string): AuditReport {
   // ── Inline token definitions (must be self-contained for page.evaluate) ──
+  // The page's published scale wins; the second argument is the default
+  // scale's value, for pages that publish none.
+
+  const _publishedScale = (
+    globalThis as {
+      __MPO_SCALE__?: {
+        controlGaps?: number[];
+        tokens?: {
+          radius?: Record<string, number>;
+          space?: Record<string, number>;
+          size?: Record<string, number>;
+        };
+      };
+    }
+  ).__MPO_SCALE__;
+  const _scale = _publishedScale?.tokens;
+  const _radius = (key: string, px: number): number => _scale?.radius?.[key] ?? px;
+  const _space = (key: string, px: number): number => _scale?.space?.[`$${key}`] ?? px;
+  const _size = (key: string, px: number): number => _scale?.size?.[`$${key}`] ?? px;
+
+  // Token-internal values components paint outside the knob maps, each named
+  // by the token it is so a preset on another scale checks its own value.
+  const _SPACE_1 = _space("1", 2);
+  const _SPACE_1_5 = _space("1.5", 4);
+  const _SPACE_2 = _space("2", 6);
+  const _SPACE_3 = _space("3", 12);
+  const _SIZE_0_5 = _size("0.5", 4);
+  const _CONTROL_GAPS = new Set<number>(_publishedScale?.controlGaps ?? [3, 4, 5, 6, 7, 8, 9, 14]);
 
-  const _RADIUS_TOKENS: Record<number, number> = {
-    0: 0,
-    2: 5,
-    3: 7,
-    4: 9,
-    5: 10,
-    6: 16,
-    12: 50,
-  };
-  const _SPACE_TOKENS: Record<number, number> = {
-    0: 0,
-    2: 7,
-    3: 13,
-    4: 18,
-    5: 24,
-    6: 32,
-  };
   const _BORDER_RADIUS_KNOB: Record<string, number> = {
-    none: 0,
-    small: 5,
-    medium: 9,
-    large: 16,
-    full: 50,
+    none: _radius("0", 0),
+    small: _radius("2", 4),
+    medium: _radius("4", 8),
+    large: _radius("6", 14),
+    full: _radius("12", 44),
+  };
+  const _CONTAINER_RADIUS_KNOB: Record<string, number> = {
+    none: _radius("0", 0),
+    small: _radius("4", 8),
+    medium: _radius("6", 14),
+    large: _radius("8", 20),
+    full: _radius("12", 44),
   };
   const _OUTER_RADIUS_KNOB: Record<string, number> = {
-    none: 0,
-    small: 5,
-    medium: 7,
-    large: 9,
-    full: 10,
+    none: _radius("0", 0),
+    small: _radius("2", 4),
+    medium: _radius("3", 6),
+    large: _radius("4", 8),
+    full: _radius("5", 9),
   };
   const _BORDER_WIDTH_KNOB: Record<string, number> = {
     none: 0,
@@ -374,19 +379,15 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
     large: 2,
   };
   const _GAP_KNOB: Record<string, number> = {
-    small: 7,
-    medium: 18,
-    large: 24,
+    gapSm: _space("2", 6),
+    gap: _space("3", 12),
   };
   const _GAP_LG_KNOB: Record<string, number> = {
-    small: 13,
-    medium: 24,
-    large: 32,
+    gapLg: _space("5", 21),
   };
   const _PANEL_PADDING_KNOB: Record<string, number> = {
-    small: 13,
-    medium: 18,
-    large: 32,
+    panelPadding: _space("4", 16),
+    featurePadding: _space("6", 28),
   };
   const _FONT_WEIGHT_KNOB: Record<string, number> = {
     light: 300, // Inter body default weight
@@ -397,24 +398,29 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
   const _VALID_RADIUS = new Set([
     ...Object.values(_BORDER_RADIUS_KNOB),
     ...Object.values(_OUTER_RADIUS_KNOB),
+    ...Object.values(_CONTAINER_RADIUS_KNOB),
+    ...Object.values(_CONTAINER_RADIUS_KNOB).map((radius) =>
+      Math.min(radius, _PANEL_PADDING_KNOB.panelPadding),
+    ),
     1000, // Tamagui pill radius (Switch, RadioGroup.Item)
     100000, // Tamagui circular button radius (Button circular variant)
   ]);
   const _VALID_BORDER_WIDTH = new Set(Object.values(_BORDER_WIDTH_KNOB));
   const _VALID_GAP = new Set([
     0,
-    2, // $space.1 Tamagui space token
+    _SPACE_1,
     3.9, // Tamagui InputContainerFrame size-proportional gap
-    4, // $size.$0.5 sub-token used by Tamagui button internals
-    5, // $size.$1
-    9, // $size.$2
+    _SPACE_1_5,
+    _SIZE_0_5, // Tamagui button internals
+    ..._CONTROL_GAPS,
     ...Object.values(_GAP_KNOB),
     ...Object.values(_GAP_LG_KNOB),
   ]);
   const _VALID_PADDING = new Set([
     0,
-    2, // $space.1 Tamagui space token
-    7, // $size.$1.5 sub-token (button padding at $size.$2)
+    _SPACE_1,
+    _SPACE_2, // button padding at $size.$2
+    _SPACE_3, // a fixed-token inset (chips, OwnInset rows)
     ...Object.values(_PANEL_PADDING_KNOB),
   ]);
   const _VALID_FONT_WEIGHT = new Set(Object.values(_FONT_WEIGHT_KNOB));
@@ -422,6 +428,7 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
   const _FONT_FAMILY_KNOB: Record<string, string> = {
     inter: "sans-serif ($body/$heading)",
     georgia: "serif",
+    "ui-monospace": "mono",
     monospace: "mono",
     "roboto slab": "slab",
     rockwell: "slab (fallback)",
@@ -470,6 +477,10 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
     for (const [k, v] of Object.entries(_OUTER_RADIUS_KNOB)) {
       if (v === px) return `${k} (outer)`;
     }
+    for (const [k, v] of Object.entries(_CONTAINER_RADIUS_KNOB)) {
+      if (v === px) return `${k} (container)`;
+      if (Math.min(v, _PANEL_PADDING_KNOB.panelPadding) === px) return `${k} (container cap)`;
+    }
     return "off-scale";
   }
 
@@ -489,9 +500,10 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
       if (v === px) return `${k} (lg)`;
     }
     // Tamagui space/size sub-tokens used internally by components
-    if (px === 2) return "space-token(2px)";
+    if (px === _SPACE_1) return `space-token(${px}px)`;
     if (px === 3.9) return "input-internal(3.9px)";
-    if (px === 4 || px === 5 || px === 9) return `size-token(${px}px)`;
+    if (px === _SPACE_1_5 || px === _SIZE_0_5 || _CONTROL_GAPS.has(px))
+      return `size-token(${px}px)`;
     return "off-scale";
   }
 
@@ -501,8 +513,8 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
       if (v === px) return k;
     }
     // Tamagui space/size sub-tokens
-    if (px === 2) return "space-token(2px)";
-    if (px === 7) return "size-token(7px)";
+    if (px === _SPACE_1) return `space-token(${px}px)`;
+    if (px === _SPACE_2 || px === _SPACE_3) return `size-token(${px}px)`;
     return "off-scale";
   }
 
@@ -778,19 +790,15 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
     }
     if (capContainer) {
       const radiusKnob = el.getAttribute("data-radius-knob") ?? "";
-      const spaceKnob = el.getAttribute("data-space-knob") ?? "";
-      const radiusStop = Object.hasOwn(_BORDER_RADIUS_KNOB, radiusKnob)
-        ? _BORDER_RADIUS_KNOB[radiusKnob]
-        : undefined;
+      const radiusMap = containerName === "TextArea" ? _BORDER_RADIUS_KNOB : _CONTAINER_RADIUS_KNOB;
+      const radiusStop = Object.hasOwn(radiusMap, radiusKnob) ? radiusMap[radiusKnob] : undefined;
       const paddingSides = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"] as const;
       const measuredInsets = paddingSides.map((prop) => parsePx(style[prop]));
       const inset = ownInset
         ? measuredInsets.some((v) => v === null)
           ? undefined
           : Math.min(...(measuredInsets as number[]))
-        : Object.hasOwn(_PANEL_PADDING_KNOB, spaceKnob)
-          ? _PANEL_PADDING_KNOB[spaceKnob]
-          : undefined;
+        : _PANEL_PADDING_KNOB.panelPadding;
       if (ownsInset) {
         for (const [index, prop] of paddingSides.entries()) {
           const value = measuredInsets[index];
@@ -798,12 +806,12 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
           entry[prop] = {
             value: value ?? 0,
             unit: "px",
-            knob: `${containerName} panelPadding:${spaceKnob}`,
+            knob: `${containerName} panelPadding`,
             offScale,
           };
           if (offScale)
             entry.violations.push(
-              `${prop}: ${style[prop]} does not match ${containerName} panelPadding:${spaceKnob} (${inset ?? "unknown"}px)`,
+              `${prop}: ${style[prop]} does not match ${containerName} panelPadding (${inset ?? "unknown"}px)`,
             );
         }
       }
@@ -830,7 +838,7 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
             ? `${containerName} ${stackPosition} inner corner 0`
             : ownInset
               ? `${containerName} min(radius:${radiusKnob}, own padding)`
-              : `${containerName} min(radius:${radiusKnob}, panelPadding:${spaceKnob})`,
+              : `${containerName} min(radius:${radiusKnob}, panelPadding)`,
           offScale,
         };
         entry[prop] = result;
@@ -947,7 +955,14 @@ export function runConstraintAudit(rootSelector?: string): AuditReport {
       // font_heading while changing its family. These are typography defaults,
       // not alternatives to an explicitly declared regular/bold recipe.
       const configuredHeading =
-        el.classList.contains("font_heading") && [600, 700, 800].includes(fw);
+        (/^H[1-6]$/.test(el.tagName) ||
+          el.getAttribute("role") === "heading" ||
+          Array.from(el.classList).some((name) =>
+            /^font_heading(?:Serif|Mono|Slab|Rounded|Condensed|Cursive|Handwriting|Pixel|Blackletter|Geometric)?$/.test(
+              name,
+            ),
+          )) &&
+        [600, 700, 800].includes(fw);
       const expected =
         weightKnob !== null && ["regular", "bold"].includes(weightKnob)
           ? _FONT_WEIGHT_KNOB[weightKnob]

package/src/audit/constraintScope.spec.ts

@@ -11,7 +11,7 @@ afterEach(() => {
 
 describe("constraint audit scope and painted visibility", () => {
   it("audits the requested surface while keeping the document-wide default", () => {
-    document.body.innerHTML = `<div id="outside" style="border-radius:14px"></div><main id="story"><button id="inside" style="border-radius:15px">Inside</button></main>`;
+    document.body.innerHTML = `<div id="outside" style="border-radius:17px"></div><main id="story"><button id="inside" style="border-radius:15px">Inside</button></main>`;
     expect(audit("#story").violations.map((entry) => entry.id)).toEqual(["inside"]);
     expect(audit().violations.map((entry) => entry.id)).toEqual(["outside", "inside"]);
   });

package/src/audit/designTokens.ts

@@ -0,0 +1,42 @@
+import { generateScale } from "../theme/scale/generateScale";
+import { defaultPreset } from "../theme/presets";
+import { defaultFonts } from "../theme/defaults/fonts";
+import { createThemesBuilder } from "../theme/createThemes";
+import { defaultBaseTheme } from "../theme/defaults/base";
+import { defaultAccentTheme } from "../theme/defaults/accent";
+import { defaultBuilderOptions } from "../theme/defaults/builderOptions";
+
+export function exportDesignTokens() {
+  const scale = generateScale(defaultPreset.scale, "web");
+  const themes = createThemesBuilder(
+    defaultBaseTheme,
+    defaultAccentTheme,
+    defaultBuilderOptions,
+  ).themes();
+  const values = (table: Record<string, unknown>) =>
+    Object.values(table).map((value) =>
+      value && typeof value === "object" && "val" in value ? value.val : value,
+    );
+  const unique = <T>(items: T[]) => [...new Set(items)];
+  const colors = (scheme: "light" | "dark") =>
+    unique(
+      Object.entries(themes)
+        .filter(([name]) => name === scheme || name.startsWith(`${scheme}_`))
+        .flatMap(([, theme]) => values(theme))
+        .filter((value): value is string => typeof value === "string"),
+    );
+  return {
+    preset: "default",
+    inputs: scale.inputs,
+    space: unique(Object.values(scale.tokens.space)),
+    radius: unique(Object.values(scale.tokens.radius)),
+    fontSize: unique([
+      ...Object.values(scale.fonts.bodySizes),
+      ...Object.values(scale.fonts.headingSizes),
+    ]),
+    fontWeight: unique(
+      Object.values(defaultFonts).flatMap((font) => values(font.weight ?? {}).map(String)),
+    ),
+    color: { light: colors("light"), dark: colors("dark") },
+  };
+}

package/src/audit/themeMatrix.spec.ts

@@ -156,7 +156,7 @@ describe("theme-axis geometry invariance (LC-80 tripwire)", () => {
     // theme colour. Geometry becomes a function of theme and the theme
     // axis is no longer paint-only.
     const inputsForTheme = (theme: string): Partial<SizeRecipeInputs> =>
-      theme === "blue" ? { baseHeight: 48 } : {};
+      theme === "blue" ? { control: 48, type: 16 } : {};
 
     const defaultCell = snapshotFromRecipeInputs(inputsForTheme(""));
     const blueCell = snapshotFromRecipeInputs(inputsForTheme("blue"));
@@ -205,7 +205,7 @@ describe("preset-axis no-breakage (two assertions, never one)", () => {
     // still passes no-breakage as long as nothing broke. Geometry equality
     // belongs exclusively to the theme axis.
     const defaultCell = snapshotFromRecipeInputs({});
-    const boldCell = snapshotFromRecipeInputs({ baseHeight: 52, radiusPx: 50 });
+    const boldCell = snapshotFromRecipeInputs({ control: 52, radiusPx: 50 });
     expect(diffGeometry(defaultCell, boldCell).identical).toBe(false);
 
     const result = evaluateNoBreakage({
@@ -296,6 +296,87 @@ describe("preset-axis no-breakage (two assertions, never one)", () => {
     ).toBe(true);
   });
 
+  it("reads a known off-scale part at a scaled px as the same finding, not a new one", () => {
+    const input = {
+      storyRendered: true,
+      offScaleViolations: 1,
+      baselineOffScaleViolations: 1,
+      baselineOffScaleSignatures: [
+        "[k1] field :: paddingRight: 15px is off-scale (no matching token)",
+      ],
+      offScaleSignatures: ["[k1] field :: paddingRight: 11px is off-scale (no matching token)"],
+      contrast: cleanContrast,
+      baselineContrastViolations: 0,
+    };
+    expect(evaluateNoBreakage(input).ok).toBe(true);
+    const moved = evaluateNoBreakage({
+      ...input,
+      offScaleViolations: 2,
+      offScaleSignatures: [
+        ...input.offScaleSignatures,
+        "[k2] field :: paddingLeft: 11px is off-scale (no matching token)",
+      ],
+    });
+    expect(moved.ok).toBe(false);
+    expect(moved.failures[0]).toContain("[k2] field :: paddingLeft: 11px");
+    expect(moved.failures[0]).not.toContain("[k1]");
+  });
+
+  it("reads a known inline colour at a re-themed value as the same finding, not a new one", () => {
+    const input = {
+      storyRendered: true,
+      offScaleViolations: 1,
+      baselineOffScaleViolations: 1,
+      baselineOffScaleSignatures: [
+        '[k1] body :: inlineColor: backgroundColor="rgb(248, 248, 248)" bypasses theme tokens',
+      ],
+      offScaleSignatures: [
+        '[k1] body :: inlineColor: backgroundColor="rgb(254, 246, 250)" bypasses theme tokens',
+      ],
+      contrast: cleanContrast,
+      baselineContrastViolations: 0,
+    };
+    expect(evaluateNoBreakage(input).ok).toBe(true);
+    const added = evaluateNoBreakage({
+      ...input,
+      offScaleViolations: 2,
+      offScaleSignatures: [
+        ...input.offScaleSignatures,
+        '[k2] chip :: inlineColor: color="#ff0000" bypasses theme tokens',
+      ],
+    });
+    expect(added.ok).toBe(false);
+    expect(added.failures[0]).toContain('[k2] chip :: inlineColor: color="#ff0000"');
+  });
+
+  it("reads a known off-scale text node in a preset's own font as the same finding, not a new one", () => {
+    const input = {
+      storyRendered: true,
+      offScaleViolations: 1,
+      baselineOffScaleViolations: 1,
+      baselineOffScaleSignatures: [
+        "[k1] span.is_BadgeText.is_Text.font_body :: fontWeight: 600 does not match a configured typography weight",
+      ],
+      offScaleSignatures: [
+        "[k1] span.is_BadgeText.is_Text.font_condensed :: fontWeight: 600 does not match a configured typography weight",
+      ],
+      contrast: cleanContrast,
+      baselineContrastViolations: 0,
+    };
+    expect(evaluateNoBreakage(input).ok).toBe(true);
+    const added = evaluateNoBreakage({
+      ...input,
+      offScaleViolations: 2,
+      offScaleSignatures: [
+        ...input.offScaleSignatures,
+        "[k2] a.is_Anchor.is_Text.font_condensed :: paddingTop: 10px is off-scale (no matching token)",
+      ],
+    });
+    expect(added.ok).toBe(false);
+    expect(added.failures[0]).toContain("[k2] a.is_Anchor.is_Text.font_condensed :: paddingTop");
+    expect(added.failures[0]).not.toContain("[k1]");
+  });
+
   it("names replacement text failures regardless of count and preserves repeated identities", () => {
     const old = {
       key: "old text",

package/src/audit/themeMatrix.ts

@@ -1548,6 +1548,38 @@ function newEntries(before: string[], after: string[]): string[] {
   return added;
 }
 
+/**
+ * An off-scale signature with its px, colour and font family blanked: the
+ * element and property that left the scale, not the value it landed on. A
+ * preset with its own token scale moves every px, one with its own colour
+ * theme moves every colour, and one with its own body or heading font swaps
+ * every text node's `font_<family>` class, so a part the default cell already
+ * reports is the same finding at a scaled, re-themed or re-typed value, not a
+ * new breakage.
+ */
+export function offScaleIdentity(signature: string): string {
+  return signature
+    .replace(/-?\d+(?:\.\d+)?px/g, "#px")
+    .replace(/(inlineColor: \w+=)"[^"]*"/g, '$1"#colour"')
+    .replace(/\.font_[\w-]+/g, ".font_#family");
+}
+
+/** `newEntries` by off-scale identity, reported as this cell's own signatures. */
+function newOffScaleEntries(before: string[], after: string[]): string[] {
+  const added = newEntries(before.map(offScaleIdentity), after.map(offScaleIdentity));
+  const pending = new Map<string, number>();
+  for (const identity of added) pending.set(identity, (pending.get(identity) ?? 0) + 1);
+  const named: string[] = [];
+  for (const signature of after) {
+    const identity = offScaleIdentity(signature);
+    const count = pending.get(identity) ?? 0;
+    if (count === 0) continue;
+    pending.set(identity, count - 1);
+    named.push(signature);
+  }
+  return named;
+}
+
 const namedList = (entries: string[], limit = 6): string => {
   if (entries.length === 0) return "";
   const shown = entries.slice(0, limit).join("; ");
@@ -1575,7 +1607,7 @@ export function evaluateNoBreakage(input: NoBreakageInput): NoBreakageResult {
   }
   const structuralAdded =
     input.offScaleSignatures && input.baselineOffScaleSignatures
-      ? newEntries(input.baselineOffScaleSignatures, input.offScaleSignatures)
+      ? newOffScaleEntries(input.baselineOffScaleSignatures, input.offScaleSignatures)
       : [];
   if (structuralAdded.length || input.offScaleViolations > input.baselineOffScaleViolations) {
     failures.push(