@multiplatform.one/theme 7.11.0 → 7.16.0

package/src/theme/createThemes.ts

@@ -136,7 +136,7 @@ function sanitizeGetTheme(
 }
 
 // Radix hue names whose sub-themes act as decorative TINTS (Tint.tsx cycling,
-// the storybook `color` global, `theme="red"` field tinting). Under a tint,
+// the storybook `color` global). Under a tint,
 // surfaces/borders/solids keep the hue but TEXT must stay readable neutral:
 // muted/secondary text and user-authored content must never render saturated
 // accent (SB-D-14/SB-D-20). Exported so theme-identity consumers (chart
@@ -210,6 +210,41 @@ function neutralizeTintText(
   return out;
 }
 
+const semanticIntentNames = new Set(["error", "warning", "success"]);
+const entryControlNames = new Set(["Input", "TextArea"]);
+
+/**
+ * T-VALUE under a semantic intent (MPO-369). Intents are not tints: an Alert
+ * reads `$color12` and a solid Button its on-fill `$color` from the hue, so
+ * only entered text (an Input or TextArea value, and the placeholder that
+ * stands in for it) goes back to the neutral ink.
+ */
+function neutralizeSemanticEntryText(
+  themes: Record<string, Record<string, string>>,
+): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = { ...themes };
+  for (const [name, theme] of Object.entries(themes)) {
+    const [scheme, intent, component, ...rest] = name.split("_");
+    if (rest.length > 0 || (scheme !== "light" && scheme !== "dark")) continue;
+    if (!intent || !semanticIntentNames.has(intent)) continue;
+    const base = themes[scheme];
+    if (!base) continue;
+    if (component === undefined) {
+      if (base.placeholderColor != null)
+        out[name] = { ...theme, placeholderColor: base.placeholderColor };
+      continue;
+    }
+    if (!entryControlNames.has(component)) continue;
+    const neutral = { ...base, ...themes[`${scheme}_${component}`] };
+    const patched: Record<string, string> = { ...theme };
+    for (const key of tintNeutralTextKeys) {
+      if (neutral[key] != null) patched[key] = neutral[key];
+    }
+    out[name] = patched;
+  }
+  return out;
+}
+
 const defaultLightShadows: Shadows = {
   shadow1: "rgba(0,0,0,0.12)",
   shadow2: "rgba(0,0,0,0.16)",
@@ -401,11 +436,13 @@ export function createThemesBuilder(
   const initialTheme = tamaguiCreateThemes(
     createThemesProps as Parameters<typeof tamaguiCreateThemes>[0],
   );
-  const themes = neutralizeTintText({
-    ...grayTheme,
-    ...tamaguiThemes,
-    ...initialTheme,
-  });
+  const themes = neutralizeSemanticEntryText(
+    neutralizeTintText({
+      ...grayTheme,
+      ...tamaguiThemes,
+      ...initialTheme,
+    }),
+  );
   return {
     themes() {
       return themes;

package/src/theme/index.ts

@@ -30,10 +30,13 @@ export * from "./resolveKnobs";
 export * from "./shared";
 export * from "./themeValue";
 export * from "./sizeRecipes";
+export * from "./subsetThemes";
 export * from "./Surface";
 export * from "./tileSizes";
+export * from "./transitionProps";
 
 export * from "./theme";
 export * from "./Tint";
 export * from "./useResolvedKnobs";
 export * from "./useTheme";
+export * from "./useTouchSurface";

package/src/theme/intent.spec.tsx

@@ -4,7 +4,9 @@ import { renderToString } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 
 // Mock Tamagui's <Theme> so we can inspect the chosen theme name
-vi.mock("tamagui", () => ({
+vi.mock("tamagui", async (importOriginal) => ({
+  useDidFinishSSR: (await importOriginal<typeof import("tamagui")>()).useDidFinishSSR,
+  // These tests inspect intent names with a fixed light scheme.
   useThemeName: () => "light",
   Theme: ({ name, children }: { name: string; children: ReactNode }) =>
     createElement("div", { "data-tamagui-theme": name }, children),
@@ -214,8 +216,8 @@ describe("useResolvedKnobs with Intent", () => {
       ),
     );
 
-    // "error" → Button: { elevation: "small" } → resolved to "$1"
-    expect(capture.result.knobProps.elevation).toBe("$1");
+    // "error" → Button: { elevation: "small" }, and small paints no control shadow (MPO-96)
+    expect(capture.result.knobProps.elevation).toBeUndefined();
   });
 
   it("resolves component-specific intent overrides via explicit option", () => {
@@ -223,8 +225,8 @@ describe("useResolvedKnobs with Intent", () => {
 
     renderToHtml(wrapWithPreset(makePreset(), createElement(capture.Probe)));
 
-    // "error" → Button: { elevation: "small" } → resolved to "$1"
-    expect(capture.result.knobProps.elevation).toBe("$1");
+    // "error" → Button: { elevation: "small" }, and small paints no control shadow (MPO-96)
+    expect(capture.result.knobProps.elevation).toBeUndefined();
   });
 
   it("preset intent overrides take precedence over defaultIntents", () => {
@@ -287,8 +289,8 @@ describe("useResolvedKnobs with Intent", () => {
 
     renderToHtml(wrapWithPreset(makePreset(), createElement(capture.Probe)));
 
-    // Default knobs: elevation "small" → resolved to "$1"
-    expect(capture.result.knobProps.elevation).toBe("$1");
+    // Default knobs: elevation "small" paints no control shadow (MPO-96)
+    expect(capture.result.knobProps.elevation).toBeUndefined();
     expect(capture.result.knobProps.textAccent).toBe("high");
   });
 });

package/src/theme/layoutTokensHooks.spec.tsx

@@ -1,3 +1,4 @@
+import { TestProviders } from "@multiplatform.one/test-utils";
 /**
  * Layout hook specs — the live half of layoutTokens (DG-LAY-01/03): the
  * viewport-driven `useLayoutSizeClass`, the pane budget `useMultiPane`, and
@@ -148,8 +149,8 @@ describe("useMultiPane", () => {
 describe("useSemanticGaps", () => {
   it("maps within-group to knob gap and between-groups to the large gap", () => {
     setViewportWidth(1000);
-    const { result: knobs } = renderHook(() => useResolvedKnobs());
-    const { result } = renderHook(() => useSemanticGaps());
+    const { result: knobs } = renderHook(() => useResolvedKnobs(), { wrapper: TestProviders });
+    const { result } = renderHook(() => useSemanticGaps(), { wrapper: TestProviders });
     expect(result.current.withinGroup).toEqual(knobs.current.knobProps.gap);
     expect(result.current.betweenGroups).toEqual(knobs.current.knobProps.gapLg);
     // The roles must differ, or grouping hierarchy is invisible.

package/src/theme/radiusClass.ts

@@ -81,6 +81,24 @@ export function radiusClassProps(
   return { "data-radius-class": radiusClass, "data-radius-part": part };
 }
 
+export interface RadiusResolutionDeclaration {
+  "data-radius-resolution": "BINARY";
+}
+
+/**
+ * Declare that a part resolves through the BINARY row (DG-RAD-03), so the
+ * constraint audit measures it as 0 or half its own shorter edge. The token
+ * scale has no h/2 value, so an undeclared thumb or track reads off-scale at
+ * every stop. Spread it only where the painted radius IS the resolved one: a
+ * consumer radius override ejects the part from the class.
+ *
+ * @example
+ * <StyledSwitch.Thumb {...radiusResolutionProps("BINARY")} borderRadius={thumbRadius} />
+ */
+export function radiusResolutionProps(radiusClass: "BINARY"): RadiusResolutionDeclaration {
+  return { "data-radius-resolution": radiusClass };
+}
+
 // ── Radius resolution (DG-RAD-01..05) ─────────────────────────
 
 /**

package/src/theme/resolveKnobs.spec.ts

@@ -24,6 +24,7 @@ import { defaultPreset, boldPreset, heroPreset } from "./presets";
 import {
   applyDensity,
   capContainerRadius,
+  containerCapProps,
   resolveKnobs,
   resolvePageTitleScale,
 } from "./resolveKnobs";
@@ -224,8 +225,10 @@ describe("resolveKnobs", () => {
       expect(resolveKnobs(knobsWith({ elevation: "none" })).knobProps.elevation).toBeUndefined();
     });
 
-    it('maps "small" → "$1"', () => {
-      expect(resolveKnobs(knobsWith({ elevation: "small" })).knobProps.elevation).toBe("$1");
+    it('maps "small" → undefined: controls paint no resting shadow at the default (MPO-96)', () => {
+      const { knobProps } = resolveKnobs(knobsWith({ elevation: "small" }));
+      expect(knobProps.elevation).toBeUndefined();
+      expect(knobProps.elevationChrome).toEqual({});
     });
 
     it("overlay elevation at small is $2, not the control $1 token", () => {
@@ -250,7 +253,7 @@ describe("resolveKnobs", () => {
       expect(knobProps.cardSurface.backgroundColor).toBe("$background");
       expect(knobProps.inputBackground).toBe("$background");
       expect(knobProps.elevatedSurface.shadowColor).toBe("#000");
-      expect(knobProps.elevatedSurface.shadowOpacity).toBe(0.15);
+      expect(knobProps.elevatedSurface.shadowOpacity).toBe(0.12);
       expect(knobProps.elevationChrome.elevation).toBe(8);
     });
 
@@ -298,7 +301,8 @@ describe("resolveKnobs", () => {
         const small = resolveNative(
           knobsWith({ elevation: "small", hover: { elevation: "medium" } }),
         );
-        expect(small.knobProps.elevation).toBe(20);
+        expect(small.knobProps.elevation).toBeUndefined();
+        expect(small.knobProps.elevationChrome).toEqual({});
         expect(small.knobProps.overlayElevation).toBe(28);
         expect(small.knobProps.elevatedSurface.elevation).toBe(28);
         expect(small.knobProps.elevatedSurface.elevation).not.toBe(small.knobProps.elevation);
@@ -315,6 +319,52 @@ describe("resolveKnobs", () => {
     });
   });
 
+  describe("overlay elevation ladder (MPO-99)", () => {
+    const paint = (elevation: "small" | "medium" | "large", scheme: "light" | "dark") =>
+      resolveKnobs(knobsWith({ elevation }), undefined, scheme).knobProps;
+
+    it("overlay medium and large paint the reference popper and dialog shadows", () => {
+      expect(paint("medium", "light").overlayElevation).toBe("$3");
+      expect(paint("medium", "light").elevatedSurface.style?.boxShadow).toBe(
+        "0 4px 8px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08)",
+      );
+      expect(paint("large", "light").overlayElevation).toBe("$5");
+      expect(paint("large", "light").elevatedSurface.style?.boxShadow).toBe(
+        "0 12px 24px rgba(0,0,0,0.12)",
+      );
+    });
+
+    it("overlay medium and large differ from control medium and large, in both schemes", () => {
+      for (const scheme of ["light", "dark"] as const) {
+        for (const stop of ["medium", "large"] as const) {
+          const knobProps = paint(stop, scheme);
+          expect(knobProps.elevatedSurface.style?.boxShadow).toBeTruthy();
+          expect(knobProps.elevationChrome.style?.boxShadow).toBeTruthy();
+          expect(knobProps.elevatedSurface.style?.boxShadow).not.toBe(
+            knobProps.elevationChrome.style?.boxShadow,
+          );
+        }
+      }
+    });
+
+    it("dark keeps each overlay stop's geometry and inverts the hue (LC-85)", () => {
+      expect(paint("medium", "dark").elevatedSurface.style?.boxShadow).toBe(
+        "0 4px 8px rgba(255,255,255,0.10), 0 12px 32px rgba(255,255,255,0.08)",
+      );
+      expect(paint("large", "dark").elevatedSurface.style?.boxShadow).toBe(
+        "0 12px 24px rgba(255,255,255,0.12)",
+      );
+    });
+
+    it("overlays keep a shadow at the default stop while controls go flat (MPO-96)", () => {
+      const knobProps = paint("small", "light");
+      expect(knobProps.elevationChrome).toEqual({});
+      expect(knobProps.elevatedSurface.style?.boxShadow).toBe(
+        "0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10)",
+      );
+    });
+  });
+
   // ── interaction state overrides ──────────────────────────────
 
   describe("interaction state overrides", () => {
@@ -351,8 +401,8 @@ describe("resolveKnobs", () => {
     });
 
     it("focus.elevation maps to elevation.focusKnobProps.elevation", () => {
-      const { elevation } = resolveKnobs(knobsWith({ focus: { elevation: "small" } }));
-      expect(elevation.focusKnobProps?.elevation).toBe("$1");
+      const { elevation } = resolveKnobs(knobsWith({ focus: { elevation: "large" } }));
+      expect(elevation.focusKnobProps?.elevation).toBe("$4");
     });
 
     it("focusVisible.borderWidth maps to control.focusVisibleKnobProps.borderWidth", () => {
@@ -958,7 +1008,7 @@ describe("resolveKnobs", () => {
       const overridden = resolveKnobs(defaultKnobs, () => ({
         elevation: "$4",
       }));
-      expect(baseline.knobProps.elevation).toBe("$1");
+      expect(baseline.knobProps.elevation).toBeUndefined();
       expect(overridden.knobProps.elevation).toBe("$4");
     });
 
@@ -1376,3 +1426,19 @@ describe("LC-67 touch height floor via resolveKnobs", () => {
     }
   });
 });
+
+describe("containerCapProps (DG-RAD-04 provenance)", () => {
+  it("names the knob stop a borderRadiusMap token came from", () => {
+    expect(containerCapProps("PageSection", "$12", "small")).toEqual({
+      "data-constraint-container": "PageSection",
+      "data-radius-knob": "full",
+      "data-space-knob": "small",
+    });
+  });
+
+  it("makes no claim for a radius that did not come from the knob", () => {
+    expect(containerCapProps("TextArea", 13, "small")).toBeUndefined();
+    expect(containerCapProps("TextArea", "$5", "small")).toBeUndefined();
+    expect(containerCapProps("TextArea", "$12", "roomy")).toBeUndefined();
+  });
+});

package/src/theme/resolveKnobs.ts

@@ -174,6 +174,58 @@ export function capContainerRadius(
   return radiusPx > paddingPx ? paddingPx : borderRadiusMap[borderRadius];
 }
 
+/**
+ * The borderRadius knob stop a `borderRadiusMap` token came from, so a part
+ * can resolve its DG-RAD class at that stop. Undefined for any value the
+ * knob did not produce.
+ */
+export function radiusStopFromToken(token: unknown): Knobs["borderRadius"] | undefined {
+  return (Object.keys(borderRadiusMap) as Knobs["borderRadius"][]).find(
+    (stop) => borderRadiusMap[stop] === token,
+  );
+}
+
+/**
+ * Containers the constraint audit measures against the cap (DG-RAD-04).
+ * `StackedRow` is one row of a vertical stack: it also carries
+ * `data-stack-position`, and only its outer corners take the cap.
+ * `OwnInset` pads with a fixed token instead of panelPadding, so the audit
+ * caps it at its measured padding and ignores the space stop.
+ */
+export type CappedContainer = "PageSection" | "TextArea" | "StackedRow" | "OwnInset";
+
+export interface ContainerCapDeclaration {
+  "data-constraint-container": CappedContainer;
+  "data-radius-knob": Knobs["borderRadius"];
+  "data-space-knob": Knobs["space"];
+}
+
+/**
+ * Declare a container that spreads `containerRadius`, with the knob stops it
+ * resolved, so the constraint audit checks its painted corners against
+ * `capContainerRadius` for those stops. The cap is a padding px value, not a
+ * radius token, so an undeclared capped container reads off-scale at `full`.
+ * Returns nothing when `radiusToken` is not a `borderRadiusMap` token or
+ * `space` is not a space stop: a part whose radius did not come from the knob
+ * makes no claim.
+ *
+ * @example
+ * <YStack {...knobProps.containerRadius} {...containerCapProps("PageSection", knobProps.borderRadius.borderRadius, knobProps.space)} />
+ */
+export function containerCapProps(
+  container: CappedContainer,
+  radiusToken: unknown,
+  space: string,
+): ContainerCapDeclaration | undefined {
+  const radiusKnob = radiusStopFromToken(radiusToken);
+  if (!radiusKnob || !Object.hasOwn(panelPaddingPxMap, space)) return undefined;
+  return {
+    "data-constraint-container": container,
+    "data-radius-knob": radiusKnob,
+    "data-space-knob": space as Knobs["space"],
+  };
+}
+
 const gapMap = {
   small: "$2",
   medium: "$4",
@@ -252,14 +304,16 @@ const fontWeightMap = {
 // tokens.size values Tamagui resolves those tokens to ($1=20, $2=28, $4=44),
 // so Tamagui consumers render identical shadows either way.
 //
-// Control elevation ($1 at the default small stop) is the in-page Button
-// token. Overlay elevation is a DISTINCT token one step above that stop so
-// a dialog over a scrim and a Button on the page do not read as the same
+// Controls are flat at the default `small` stop (MPO-96: the reference
+// measures no resting shadow on a button or a card), so `small` paints
+// nothing on the control map and only medium / large lift a control.
+// Overlay elevation is a DISTINCT ladder one step above the control map, so
+// a dialog over a scrim and a Button on the page never read as the same
 // distance off the surface (DG-OVL-01 / E-OVERLAY). elevatedSurface binds
 // the overlay token — not the control one.
 export const elevationMap: Record<string, string | number | undefined> = isWeb
-  ? { none: undefined, small: "$1", medium: "$2", large: "$4" }
-  : { none: undefined, small: 20, medium: 28, large: 44 };
+  ? { none: undefined, small: undefined, medium: "$2", large: "$4" }
+  : { none: undefined, small: undefined, medium: 28, large: 44 };
 
 export const overlayElevationMap: Record<string, string | number | undefined> = isWeb
   ? { none: undefined, small: "$2", medium: "$3", large: "$5" }
@@ -285,43 +339,70 @@ const elevationTintInput: Record<Elevation, string> = {
   large: "$color5",
 };
 
+type ElevationKey = "$1" | "$2" | "$3" | "$4" | "$5";
+
 // Axiom 14 light source: y-offset:blur = 0.5. Metrics match the maps
-// InputParts / getElevationWrapperProps already shipped.
+// InputParts / getElevationWrapperProps already shipped. `$3` and `$5` are
+// the overlay-only stops (MPO-99): the reference §8 popper and dialog
+// shadows. Native paints one shadow, so it takes the first web layer.
 const elevationShadowMetrics: Record<
-  "$1" | "$2" | "$4",
+  ElevationKey,
   { offsetY: number; radius: number; android: number }
 > = {
   $1: { offsetY: 1, radius: 2, android: 2 },
   $2: { offsetY: 3, radius: 6, android: 4 },
+  $3: { offsetY: 4, radius: 8, android: 6 },
   $4: { offsetY: 10, radius: 20, android: 8 },
+  $5: { offsetY: 12, radius: 24, android: 12 },
 };
 
-const elevationKeyAlias: Record<string, "$1" | "$2" | "$4"> = {
+const elevationKeyAlias: Record<string, ElevationKey> = {
   $1: "$1",
   $2: "$2",
-  $3: "$2",
+  $3: "$3",
   $4: "$4",
-  $5: "$4",
+  $5: "$5",
   "20": "$1",
   "28": "$2",
-  "36": "$2",
+  "36": "$3",
   "44": "$4",
-  "52": "$4",
+  "52": "$5",
 };
 
-const webShadowLight: Record<"$1" | "$2" | "$4", string> = {
+const webShadowLight: Record<ElevationKey, string> = {
   $1: "0 1px 2px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08)",
   $2: "0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10)",
+  $3: "0 4px 8px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08)",
   $4: "0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)",
+  $5: "0 12px 24px rgba(0,0,0,0.12)",
 };
 
-const webShadowDark: Record<"$1" | "$2" | "$4", string> = {
+// LC-85: dark keeps each stop's geometry and inverts the hue.
+const webShadowDark: Record<ElevationKey, string> = {
   $1: "0 1px 2px rgba(255,255,255,0.08), 0 0 1px rgba(255,255,255,0.06)",
   $2: "0 3px 6px rgba(255,255,255,0.10), 0 2px 4px rgba(255,255,255,0.06)",
+  $3: "0 4px 8px rgba(255,255,255,0.10), 0 12px 32px rgba(255,255,255,0.08)",
   $4: "0 10px 20px rgba(255,255,255,0.12), 0 3px 6px rgba(255,255,255,0.08)",
+  $5: "0 12px 24px rgba(255,255,255,0.12)",
+};
+
+const shadowOpacityLight: Record<ElevationKey, number> = {
+  $1: 0.12,
+  $2: 0.15,
+  $3: 0.1,
+  $4: 0.15,
+  $5: 0.12,
+};
+
+const shadowOpacityDark: Record<ElevationKey, number> = {
+  $1: 0.08,
+  $2: 0.1,
+  $3: 0.1,
+  $4: 0.12,
+  $5: 0.12,
 };
 
-function elevationTokenKey(token: string | number | undefined): "$1" | "$2" | "$4" | undefined {
+function elevationTokenKey(token: string | number | undefined): ElevationKey | undefined {
   if (token == null) return undefined;
   return elevationKeyAlias[String(token)];
 }
@@ -337,15 +418,7 @@ function elevationPaint(
   const paint: ElevationPaintProps = {
     shadowColor: dark ? "$color12" : "#000",
     shadowOffset: { width: 0, height: metrics.offsetY },
-    shadowOpacity: dark
-      ? key === "$4"
-        ? 0.12
-        : key === "$2"
-          ? 0.1
-          : 0.08
-      : key === "$1"
-        ? 0.12
-        : 0.15,
+    shadowOpacity: dark ? shadowOpacityDark[key] : shadowOpacityLight[key],
     shadowRadius: metrics.radius,
   };
   if (isWeb) {
@@ -489,6 +562,7 @@ export function resolveKnobs(
   knobs: Knobs,
   override?: KnobPropsOverride,
   scheme: ColorScheme = "light",
+  environment?: { touch?: boolean },
 ): ResolvedKnobs {
   const radiusToken = borderRadiusMap[knobs.borderRadius];
   const nestedRadiusToken = nestedRadiusMap[knobs.borderRadius];
@@ -496,7 +570,7 @@ export function resolveKnobs(
   const nestedPx = nestedControlPxMap[knobs.size];
   const nestedHitSlop = pressTargetHitSlop(nestedPx);
   const sizeRecipe = sizeRecipeForToken(sizeToken, {
-    touch: isTouchable || isWebTouchable,
+    touch: environment?.touch ?? (isTouchable || isWebTouchable),
     family: knobs.density === "compact" ? "controlCompact" : "control",
   });
   const paddingToken = panelPaddingMap[knobs.space];

package/src/theme/semanticEntryText.spec.ts

@@ -0,0 +1,85 @@
+/**
+ * MPO-369: fields tint their error state with the semantic `error` theme,
+ * which the default subset keeps, instead of the decorative `red` it drops.
+ * Entered text stays neutral under it (T-VALUE); everything else keeps the hue.
+ */
+
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("tamagui", () => ({
+  createTamagui: vi.fn((config: Record<string, unknown>) => config),
+}));
+vi.mock("./animations/index", () => ({ animations: {} }));
+
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { createThemesBuilder } from "./createThemes";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+
+type Themes = Record<string, Record<string, string>>;
+
+const built = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Themes;
+
+const schemes = ["light", "dark"] as const;
+const intents = ["error", "warning", "success"] as const;
+const entryText = ["color", "colorHover", "colorPress", "colorFocus", "placeholderColor"] as const;
+
+describe("entered text under a semantic intent", () => {
+  for (const scheme of schemes) {
+    for (const intent of intents) {
+      for (const control of ["Input", "TextArea"] as const) {
+        it(`${scheme}_${intent}_${control} keeps the neutral ${control}'s value ink and its own hue chrome`, () => {
+          const themed = built[`${scheme}_${intent}_${control}`];
+          const neutral = built[`${scheme}_${control}`];
+          for (const key of entryText) {
+            if (neutral[key] != null) expect(themed[key], key).toBe(neutral[key]);
+          }
+          expect(themed.color11).toBe(built[scheme].color11);
+          expect(themed.color12).toBe(built[scheme].color12);
+          expect(themed.borderColor).not.toBe(neutral.borderColor);
+          expect(themed.background).not.toBe(neutral.background);
+        });
+      }
+
+      it(`${scheme}_${intent} keeps its hue text and takes the neutral placeholder`, () => {
+        const themed = built[`${scheme}_${intent}`];
+        expect(themed.placeholderColor).toBe(built[scheme].placeholderColor);
+        expect(themed.color).not.toBe(built[scheme].color);
+        expect(themed.color12).not.toBe(built[scheme].color12);
+      });
+
+      it(`${scheme}_${intent}_Button keeps its on-fill label`, () => {
+        expect(built[`${scheme}_${intent}_Button`].color).not.toBe(built[`${scheme}_Button`].color);
+      });
+    }
+  }
+});
+
+describe("the default subset keeps the field error tint", () => {
+  const defaultTints = ["accent", "active", "alt1", "alt2", "error", "success", "warning"];
+  const full = createDefaultThemeConfig().tamagui.themes as Record<string, unknown>;
+  const subset = createDefaultThemeConfig({
+    subset: { components: ["Button", "Input", "TextArea"], tints: defaultTints },
+  }).tamagui.themes as Record<string, unknown>;
+
+  it("builds every theme a field enters in its error state, identical to the full config", () => {
+    for (const scheme of schemes) {
+      for (const name of [
+        `${scheme}_error`,
+        `${scheme}_error_Input`,
+        `${scheme}_error_TextArea`,
+        `${scheme}_error_Button`,
+      ]) {
+        expect(subset, name).toHaveProperty(name);
+        expect(subset[name]).toEqual(full[name]);
+      }
+      expect(full).toHaveProperty(`${scheme}_red`);
+      expect(subset).not.toHaveProperty(`${scheme}_red`);
+    }
+  });
+});

package/src/theme/sizeRecipes.ts

@@ -217,14 +217,17 @@ export function sizeRecipeForToken(
 /**
  * Identity helper for the LC-65 SIZE-RECIPE ESCAPE lint
  * (`scripts/lint-conventions.mjs`). Wrap a numeric height / minHeight /
- * paddingHorizontal / fontSize that must stay a literal:
+ * paddingHorizontal / fontSize that must stay a literal, and say why:
  *
- *   height={sizeRecipeEscape(20)}
+ *   height={sizeRecipeEscape(20, "toolbar chrome match")}
  *
- * Or comment `// size-recipe-escape:` on the previous line or same
- * statement. Pilot: Button/, InputParts/, fields/Select/.
+ * Or write the same reason in a `size-recipe-escape:` line comment on the
+ * previous line or same statement. Pilot: Button/, InputParts/,
+ * fields/Select/. Either way the file and the reason must be a row in
+ * `docs/theme-propagation-spec.md` `## Size-recipe escapes` (MPO-23, `00` L8
+ * E8); an undeclared escape fails `lint-conventions`.
  */
-export function sizeRecipeEscape<T>(value: T): T {
+export function sizeRecipeEscape<T>(value: T, _reason?: string): T {
   return value;
 }