@multiplatform.one/theme 7.34.4 → 7.36.0

package/src/theme/sizeRecipes.spec.ts

@@ -1,10 +1,12 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { defaultKnobs } from "./knobs";
-import type { Knobs } from "./knobs";
 import { resolveKnobs } from "./resolveKnobs";
+import { getActiveScaleTokens, setActiveScaleTokens } from "./scale/activeScale";
+import { generateScale } from "./scale/generateScale";
 import {
   DEFAULT_SIZE_RECIPE_INPUTS,
-  SIZE_RECIPE_COMPACT_RATIOS,
+  SIZE_RECIPE_CHIP_RATIOS,
+  SIZE_RECIPE_FAMILY_NAMES,
   SIZE_RECIPE_HEIGHTS,
   SIZE_RECIPE_HEIGHTS_TOUCH,
   SIZE_RECIPE_RADII,
@@ -14,6 +16,7 @@ import {
   generateSizeRecipeTables,
   generateSizeRecipes,
   getSizeRecipeFamily,
+  recipeKeyBelow,
   recipeFamilies,
   setSizeRecipeInputs,
   sizeRecipeBoxVariants,
@@ -27,10 +30,6 @@ import {
   type SizeRecipe,
 } from "./sizeRecipes";
 
-function knobsWith(overrides: Partial<Knobs>): Knobs {
-  return { ...defaultKnobs, ...overrides };
-}
-
 const RECIPE_KEYS = ["$1", "$1.5", "$2", "$2.5", "$3", "$3.5", "$4", "$true", "$5", "$6"] as const;
 
 function expectNoRadius(value: object) {
@@ -39,23 +38,23 @@ function expectNoRadius(value: object) {
 }
 
 describe("size recipes", () => {
-  it("medium / $4 matches the measured tamagui.dev 44/18/14/16/9 reference", () => {
+  it("medium / $4 matches the default 40/16/15/16/8 scale", () => {
     const recipe = sizeRecipes.$4;
     expect(recipe).toEqual({
-      height: 44,
-      paddingHorizontal: 18,
-      fontSize: 14,
+      height: 40,
+      paddingHorizontal: 16,
+      fontSize: 15,
       iconSize: 16,
-      gap: 9,
+      gap: 8,
     });
-    expect(sizeRecipeFromHeight(44)).toEqual(recipe);
+    expect(sizeRecipeFromHeight(40)).toEqual(recipe);
     expect(sizeRecipeForToken("$4")).toEqual(recipe);
-    expect(SIZE_RECIPE_HEIGHTS.$4).toBe(44);
+    expect(SIZE_RECIPE_HEIGHTS.$4).toBe(40);
     expect(SIZE_RECIPE_RATIOS).toEqual({
-      padX: 18 / 44,
-      font: 14 / 44,
-      icon: 16 / 44,
-      gap: 9 / 44,
+      padX: 16 / 40,
+      font: 15 / 40,
+      icon: 16 / 40,
+      gap: 8 / 40,
     });
   });
 
@@ -67,7 +66,7 @@ describe("size recipes", () => {
 
   it("radius is not on the recipe or any variant object", () => {
     expectNoRadius(sizeRecipes.$4);
-    expectNoRadius(sizeRecipeFromHeight(44));
+    expectNoRadius(sizeRecipeFromHeight(40));
     expectNoRadius(sizeRecipeForToken("$4"));
     for (const token of RECIPE_KEYS) {
       expectNoRadius(sizeRecipes[token]);
@@ -91,7 +90,7 @@ describe("size recipes", () => {
         height: recipe.iconSize,
       });
     }
-    expect(sizeRecipeFromHeight(44)).toEqual(sizeRecipes.$4);
+    expect(sizeRecipeFromHeight(40)).toEqual(sizeRecipes.$4);
   });
 
   it("sizeRecipeForToken falls back to $4", () => {
@@ -99,9 +98,9 @@ describe("size recipes", () => {
     expect(sizeRecipeForToken("")).toEqual(sizeRecipes.$4);
   });
 
-  it("small vs large: height/padX/font/icon/gap all change; borderRadius stays identical", () => {
-    const small = resolveKnobs(knobsWith({ size: "small" }));
-    const large = resolveKnobs(knobsWith({ size: "large" }));
+  it("$3 vs $5: height/padX/font/icon/gap all change; borderRadius stays identical", () => {
+    const small = resolveKnobs(defaultKnobs, undefined, "light", { sizeToken: "$3" });
+    const large = resolveKnobs(defaultKnobs, undefined, "light", { sizeToken: "$5" });
     const smallRecipe = sizeRecipeForToken(small.knobProps.sizeToken);
     const largeRecipe = sizeRecipeForToken(large.knobProps.sizeToken);
 
@@ -137,26 +136,44 @@ describe("size recipes", () => {
     expect(small.knobProps.borderRadius).toEqual(large.knobProps.borderRadius);
   });
 
-  it("layout gap still follows the space knob independently of size (T2.1a)", () => {
-    const { knobProps } = resolveKnobs(knobsWith({ space: "large", size: "medium" }));
-    expect(knobProps.sizeToken).toBe("$4");
-    expect(knobProps.gap.gap).toBe("$5");
+  it("the layout gap is a spacing role, not the recipe gap (LC-79)", () => {
+    const { knobProps } = resolveKnobs(defaultKnobs);
+    expect(knobProps.sizeToken).toBe("$true");
+    expect(knobProps.gap.gap).toBe("$3");
     expect(knobProps.control.gap).toBe(sizeRecipes.$4.gap);
   });
-  it("touch heights floor at 44 and still differentiate size steps", () => {
+  it("touch floors only height at 44", () => {
     const desktop = sizeRecipeForToken("$4");
     expect(desktop).toEqual(sizeRecipes.$4);
-    expect(applyTouchFloor(desktop, false).height).toBe(44);
-    expect(applyTouchFloor(desktop, true)).toEqual(sizeRecipeFromHeight(48));
-    expect(sizeRecipeForToken("$4", { touch: true })).toEqual(sizeRecipeFromHeight(48));
+    expect(applyTouchFloor(desktop, false).height).toBe(40);
+    expect(applyTouchFloor(desktop, true)).toEqual({ ...desktop, height: 44 });
+    expect(sizeRecipeForToken("$4", { touch: true })).toEqual({ ...desktop, height: 44 });
     expect(sizeRecipeForToken("$3", { touch: true }).height).toBe(44);
-    expect(sizeRecipeForToken("$5", { touch: true }).height).toBe(56);
-    expect(sizeRecipeForToken("$6", { touch: true }).height).toBe(68);
-    expect(sizeRecipeBoxVariants.$4.height).toBe(44);
+    expect(sizeRecipeForToken("$5", { touch: true }).height).toBe(48);
+    expect(sizeRecipeForToken("$6", { touch: true }).height).toBe(58);
+    expect(sizeRecipeBoxVariants.$4.height).toBe(40);
     expectNoRadius(applyTouchFloor(desktop, true));
   });
 });
 
+describe("touch preserves every other recipe channel", () => {
+  for (const family of SIZE_RECIPE_FAMILY_NAMES) {
+    it(`${family} keeps padding, text, icon and gap at every token`, () => {
+      for (const token of RECIPE_KEYS) {
+        const desktop = sizeRecipeForToken(token, { family });
+        const expected = { ...desktop, height: Math.max(desktop.height, 44) };
+        expect(sizeRecipeForToken(token, { family, touch: true })).toEqual(expected);
+        expect(applyTouchFloor(desktop, true, family)).toEqual(expected);
+      }
+    });
+  }
+  it("preserves custom off-table channels in the fallback", () => {
+    const recipe = { height: 31, paddingHorizontal: 7, fontSize: 13, iconSize: 17, gap: 5 };
+    expect(applyTouchFloor(recipe, true)).toEqual({ ...recipe, height: 44 });
+    expect(applyTouchFloor({ ...recipe, height: 51 }, true)).toEqual({ ...recipe, height: 51 });
+  });
+});
+
 describe("SizeRecipe shape", () => {
   it("has no radius field on the type-level contract", () => {
     const recipe: SizeRecipe = sizeRecipes.$4;
@@ -170,30 +187,21 @@ describe("generateSizeRecipes (LC-70)", () => {
     setSizeRecipeInputs();
   });
 
-  it("DEFAULT $4 is the measured 44/18/14/16/9 with no radius", () => {
+  it("DEFAULT $4 is the default 40/16/15/16/8 with no radius", () => {
     const generated = generateSizeRecipes(DEFAULT_SIZE_RECIPE_INPUTS);
     expect(generated.recipes.$4).toEqual({
-      height: 44,
-      paddingHorizontal: 18,
-      fontSize: 14,
+      height: 40,
+      paddingHorizontal: 16,
+      fontSize: 15,
       iconSize: 16,
-      gap: 9,
+      gap: 8,
     });
     expectNoRadius(generated.recipes.$4);
     expectNoRadius(generated.boxVariants.$4);
-    expect(generated.inputs.radiusPx).toBe(9);
-    expect(generated.heights).toEqual({
-      $1: 20,
-      "$1.5": 24,
-      $2: 28,
-      "$2.5": 32,
-      $3: 36,
-      "$3.5": 40,
-      $4: 44,
-      $true: 44,
-      $5: 52,
-      $6: 64,
-    });
+    expect(generated.inputs.radiusPx).toBe(8);
+    expect(generated.heights).toEqual(
+      Object.fromEntries(RECIPE_KEYS.map((token) => [token, generateScale().tokens.size[token]])),
+    );
     expect(generated.heightsTouch).toEqual({
       $1: 44,
       "$1.5": 44,
@@ -201,39 +209,48 @@ describe("generateSizeRecipes (LC-70)", () => {
       "$2.5": 44,
       $3: 44,
       "$3.5": 44,
-      $4: 48,
-      $true: 48,
-      $5: 56,
-      $6: 68,
+      $4: 44,
+      $true: 44,
+      $5: 48,
+      $6: 58,
     });
     expect(generateSizeRecipeTables(defaultRecipeInputs).touchHeights).toEqual(
       generated.heightsTouch,
     );
-    expect(SIZE_RECIPE_HEIGHTS_TOUCH.$4).toBe(48);
+    expect(SIZE_RECIPE_HEIGHTS_TOUCH.$4).toBe(44);
   });
 
-  it("baseHeight: 40 without tokenHeights regenerates $4 and keeps $5 distinct", () => {
-    const generated = generateSizeRecipes({ baseHeight: 40 });
-    expect(generated.inputs.tokenHeights).toBeUndefined();
+  it("control: 40 regenerates $4 from the scale and keeps $5 distinct", () => {
+    const generated = generateSizeRecipes({ control: 40 });
+    const { size, space, radius } = generateScale({ control: 40, type: 15 }).tokens;
+    expect(generated.inputs.control).toBe(40);
     expect(generated.heights.$4).toBe(40);
+    expect(generated.recipes.$4).toEqual({
+      height: size.$4,
+      paddingHorizontal: space.$4,
+      fontSize: 15,
+      iconSize: 16,
+      gap: radius[4],
+    });
     expect(generated.recipes.$4).toEqual({
       height: 40,
-      paddingHorizontal: Math.round(40 * (18 / 44)),
-      fontSize: Math.round(40 * (14 / 44)),
-      iconSize: Math.round(40 * (16 / 44)),
-      gap: Math.round(40 * (9 / 44)),
+      paddingHorizontal: 16,
+      fontSize: 15,
+      iconSize: 16,
+      gap: 8,
     });
+    expect(generated.heights.$5).toBe(size.$5);
     expect(generated.heights.$5).not.toBe(generated.heights.$4);
     expectNoRadius(generated.recipes.$4);
   });
 
-  it("controlCompact padX is tighter than control at the same $4 height", () => {
+  it("chip padX is tighter than control at the same $4 height", () => {
     const generated = generateSizeRecipes(DEFAULT_SIZE_RECIPE_INPUTS);
-    expect(generated.families.control.recipes.$4.height).toBe(44);
-    expect(generated.families.controlCompact.recipes.$4.height).toBe(44);
-    expect(generated.families.control.recipes.$4.paddingHorizontal).toBe(18);
-    expect(generated.families.controlCompact.recipes.$4.paddingHorizontal).toBe(16);
-    expect(generated.families.controlCompact.recipes.$4.paddingHorizontal).toBeLessThan(
+    expect(generated.families.control.recipes.$4.height).toBe(40);
+    expect(generated.families.chip.recipes.$4.height).toBe(40);
+    expect(generated.families.control.recipes.$4.paddingHorizontal).toBe(16);
+    expect(generated.families.chip.recipes.$4.paddingHorizontal).toBe(14);
+    expect(generated.families.chip.recipes.$4.paddingHorizontal).toBeLessThan(
       generated.families.control.recipes.$4.paddingHorizontal,
     );
   });
@@ -244,11 +261,11 @@ describe("generateSizeRecipes (LC-70)", () => {
     expectNoRadius(generated.recipes.$4);
     expectNoRadius(generated.recipesTouch.$4);
     expectNoRadius(generated.boxVariants.$4);
-    expectNoRadius(generated.families.controlCompact.recipes.$4);
+    expectNoRadius(generated.families.chip.recipes.$4);
   });
 
-  it("setSizeRecipeInputs({ baseHeight }) regenerates live tables from stepRatio", () => {
-    setSizeRecipeInputs({ baseHeight: 36 });
+  it("setSizeRecipeInputs({ control }) regenerates live tables from the scale", () => {
+    setSizeRecipeInputs({ control: 36 });
     expect(SIZE_RECIPE_HEIGHTS.$4).toBe(36);
     expect(sizeRecipes.$4.height).toBe(36);
     expect(sizeRecipeForToken("$4").height).toBe(36);
@@ -270,15 +287,40 @@ describe("generateSizeRecipes (LC-70)", () => {
     expect(sizeRecipeEscape("keep")).toBe("keep");
   });
 
-  it("textFieldInset is min(padX, floor((height-fontSize)/2)) — $4 → 15 (LC-84)", () => {
-    expect(textFieldInset(sizeRecipes.$4)).toBe(15);
-    expect(textFieldInset({ height: 44, paddingHorizontal: 18, fontSize: 14 })).toBe(15);
+  it("textFieldInset snaps min(padX, floor((height-fontSize)/2)) down to a $space value — $4 → 12", () => {
+    expect(textFieldInset(sizeRecipes.$4)).toBe(12);
+    expect(textFieldInset({ height: 40, paddingHorizontal: 16, fontSize: 15 })).toBe(12);
     expect(textFieldInset({ height: 32, paddingHorizontal: 12, fontSize: 14 })).toBe(9);
-    expect(textFieldInset({ height: 48, paddingHorizontal: 8, fontSize: 14 })).toBe(8);
+    expect(textFieldInset({ height: 48, paddingHorizontal: 8, fontSize: 14 })).toBe(6);
     expect(textFieldInset(sizeRecipes.$4)).toBeLessThanOrEqual(
       Math.floor((sizeRecipes.$4.height - sizeRecipes.$4.fontSize) / 2),
     );
   });
+
+  it("textFieldInset is a $space value of the active scale on every preset", () => {
+    const installed = getActiveScaleTokens();
+    for (const inputs of [
+      { control: 36, type: 14 },
+      { control: 40, type: 15 },
+      { control: 48, type: 16 },
+    ]) {
+      const scale = generateScale(inputs);
+      setActiveScaleTokens(scale.tokens);
+      try {
+        const row = scale.recipeInputs.tokenTable.$4;
+        const inset = textFieldInset({
+          height: scale.tokens.size.$4,
+          paddingHorizontal: row?.paddingHorizontal ?? 0,
+          fontSize: row?.fontSize ?? 0,
+        });
+        expect(Object.values(scale.tokens.space), `${inputs.control}/${inputs.type}`).toContain(
+          inset,
+        );
+      } finally {
+        setActiveScaleTokens(installed);
+      }
+    }
+  });
 });
 
 describe("size recipe families", () => {
@@ -290,22 +332,74 @@ describe("size recipe families", () => {
       expect(control.heightVariants[token]).toEqual({ height: SIZE_RECIPE_HEIGHTS[token] });
     }
     expect(control.boxVariants.$4).toEqual({
-      height: 44,
-      paddingHorizontal: 18,
-      gap: 9,
+      height: 40,
+      paddingHorizontal: 16,
+      gap: 8,
     });
   });
 
-  it("controlCompact keeps height and tightens padX", () => {
-    const compact = getSizeRecipeFamily("controlCompact");
+  it("chip keeps height and tightens padX", () => {
+    const compact = getSizeRecipeFamily("chip");
     const control = getSizeRecipeFamily("control");
-    expect(compact.ratios).toEqual(SIZE_RECIPE_COMPACT_RATIOS);
+    expect(compact.ratios).toEqual(SIZE_RECIPE_CHIP_RATIOS);
     expect(compact.boxVariants.$4.height).toBe(control.boxVariants.$4.height);
     expect(compact.boxVariants.$4.paddingHorizontal).toBeLessThan(
       control.boxVariants.$4.paddingHorizontal,
     );
-    expect(compact.boxVariants.$4.paddingHorizontal).toBe(16);
-    expect(compact.boxVariants.$4.gap).toBe(9);
-    expect(sizeRecipeForToken("$4", { family: "controlCompact" })).toEqual(compact.recipes.$4);
+    expect(compact.boxVariants.$4.paddingHorizontal).toBe(14);
+    expect(compact.boxVariants.$4.gap).toBe(8);
+    expect(sizeRecipeForToken("$4", { family: "chip" })).toEqual(compact.recipes.$4);
+  });
+
+  it("names every generated family", () => {
+    expect(SIZE_RECIPE_FAMILY_NAMES).toEqual(["control", "chip", "menuRow", "tab"]);
+    expect(Object.keys(generateSizeRecipes().families).sort()).toEqual(
+      [...SIZE_RECIPE_FAMILY_NAMES].sort(),
+    );
+  });
+
+  it("chip reads input padX and type one key below at the control's heights", () => {
+    const chip = getSizeRecipeFamily("chip");
+    for (const token of RECIPE_KEYS) {
+      expect(chip.heights[token]).toBe(SIZE_RECIPE_HEIGHTS[token]);
+      expect(chip.recipes[token].paddingHorizontal).toBe(
+        DEFAULT_SIZE_RECIPE_INPUTS.inputPadX[token],
+      );
+    }
+  });
+
+  it("menuRow is one key below the control token, padX $3, the token's own type", () => {
+    const menuRow = getSizeRecipeFamily("menuRow");
+    expect(menuRow.recipes.$4).toMatchObject({ height: 36, paddingHorizontal: 12, fontSize: 15 });
+    expect(menuRow.recipes.$true).toEqual(menuRow.recipes.$4);
+    expect(sizeRecipeForToken("$4", { family: "menuRow", touch: true }).height).toBe(44);
+    for (const token of RECIPE_KEYS) {
+      expect(menuRow.heights[token]).toBe(SIZE_RECIPE_HEIGHTS[recipeKeyBelow(token)]);
+      expect(menuRow.recipes[token].paddingHorizontal).toBe(sizeRecipes.$3.paddingHorizontal);
+      expect(menuRow.recipes[token].fontSize).toBe(sizeRecipes[token].fontSize);
+    }
+  });
+
+  it("tab takes height and padX one key below and the token's own type", () => {
+    const tab = getSizeRecipeFamily("tab");
+    expect(tab.recipes.$4).toMatchObject({ height: 36, fontSize: 15 });
+    for (const token of RECIPE_KEYS) {
+      const below = sizeRecipes[recipeKeyBelow(token)];
+      expect(tab.heights[token]).toBe(below.height);
+      expect(tab.recipes[token].paddingHorizontal).toBe(below.paddingHorizontal);
+      expect(tab.recipes[token].fontSize).toBe(sizeRecipes[token].fontSize);
+    }
+  });
+
+  it("row families follow a regenerated scale", () => {
+    try {
+      setSizeRecipeInputs({ control: 44 });
+      expect(getSizeRecipeFamily("menuRow").heights.$4).toBe(
+        getSizeRecipeFamily("control").heights["$3.5"],
+      );
+    } finally {
+      setSizeRecipeInputs();
+    }
+    expect(getSizeRecipeFamily("menuRow").heights.$4).toBe(36);
   });
 });

package/src/theme/sizeRecipes.ts

@@ -1,11 +1,9 @@
 /**
  * Coordinated control-size recipes (LC-75 SIZE-RECIPE, LC-80 RECIPE-INPUTS).
  *
- * The default ladder is the measured Tamagui v5 table in recipeInputs
+ * The default ladder is read off the generated token scale in recipeInputs
  * (padX / font / icon / radius per size token). Default gap equals the
  * size-table radius; corner shape overrides leave that spacing intact.
- * A linear ratio is only the `{ baseHeight }` fallback — not a
- * documented divergence (MPO-46 / R6).
  *
  * Tables are GENERATED from `defaultRecipeInputs` at module eval (Tamagui
  * 2.0.0-rc.41 flattens `styled(View, { variants: { size: tables } })` when
@@ -15,13 +13,18 @@
  * reserve it for non-enumerable values only. Do NOT put recipe tables on a
  * `createStyledContext` primitive (`neverFlatten`).
  *
- * Reference md ($4 / $true): height 44, padX 18, font 14, icon 16, radius 9,
- * gap 9 (the measured tamagui.dev $4 control — MPO-13 / MPO-19 X1/X2).
+ * Reference md ($4 / $true): height 40, padX 16, font 15, icon 16, radius 8,
+ * gap 8. The v5 44px control is generated with `v5ScaleInputs`.
  * `sizeToken` remains the recipe KEY (string "$4") so styled() variants
  * can switch; it is not a height scalar.
  *
- * Families: `control` reads `inputs.tokenTable`. `controlCompact` reads
- * `compactTokenTable` at the SAME heights (Input padX, tighter type).
+ * Families (`SIZE_RECIPE_FAMILY_NAMES`), all generated from the scale:
+ * - `control` reads `inputs.tokenTable`.
+ * - `chip` reads `chipTokenTable` at the SAME heights (Input padX, type one
+ *   key below).
+ * - `menuRow` (menu / listbox / command rows): height one key below the
+ *   control token (36 at default), padX `$3`, the token's own type.
+ * - `tab`: height and padX one key below, the token's own type.
  *
  * On touch (LC-77), `applyTouchFloor` / `sizeRecipeForToken(token, { touch: true })`
  * lift painted height to ≥ 44. Static `sizeRecipe*Variants` stay on the
@@ -34,9 +37,6 @@ export {
   SIZE_RECIPE_RADIUS_STOPS,
   SIZE_RECIPE_TOKENS,
   SIZE_TOKEN_EXPONENTS,
-  TAMAGUI_COMPACT_SIZE_TABLE,
-  TAMAGUI_CONTROL_SIZE_TABLE,
-  TAMAGUI_INPUT_PADX,
   TOUCH_HEIGHT_FLOOR,
   applyRadiusStop,
   SIZE_RECIPE_RADIUS_TOKEN_TO_STOP,
@@ -44,7 +44,8 @@ export {
   resolveControlRadius,
   createRecipeFamilies,
   defaultRecipeInputs,
-  defaultSizeFactors,
+  recipeKeyAbove,
+  recipeKeyBelow,
   generateSizeRecipeTables,
   generateSizeRecipes,
   mergeRecipeInputs,
@@ -71,6 +72,7 @@ export type {
   SizeRecipeTypeVariant,
 } from "./recipeInputs";
 
+import { getActiveScaleTokens } from "./scale/activeScale";
 import {
   cloneSizeRecipeInputs,
   defaultRecipeInputs,
@@ -123,9 +125,9 @@ export const SIZE_RECIPE_HEIGHTS = recipeFamilies.control.heights;
 export const SIZE_RECIPE_HEIGHTS_TOUCH = recipeFamilies.control.touchHeights;
 export const SIZE_RECIPE_RADII = recipeFamilies.control.radii;
 export const SIZE_RECIPE_RATIOS = recipeFamilies.control.ratios;
-export const SIZE_RECIPE_COMPACT_RATIOS = recipeFamilies.controlCompact.ratios;
+export const SIZE_RECIPE_CHIP_RATIOS = recipeFamilies.chip.ratios;
 
-export const SIZE_RECIPE_FAMILY_NAMES = ["control", "controlCompact"] as const;
+export const SIZE_RECIPE_FAMILY_NAMES = ["control", "chip", "menuRow", "tab"] as const;
 
 /**
  * Live tile-size ladder (MPO-31) — generated from `inputs.tile` over the
@@ -139,8 +141,8 @@ export function getTileSizeLadder(): typeof tileSizeLadder {
 }
 
 function adoptGenerated(next: GeneratedSizeRecipes): GeneratedSizeRecipes {
-  adoptFamily(recipeFamilies.control, next.families.control);
-  adoptFamily(recipeFamilies.controlCompact, next.families.controlCompact);
+  for (const name of SIZE_RECIPE_FAMILY_NAMES)
+    adoptFamily(recipeFamilies[name], next.families[name]);
   replaceRecord(
     tileSizeLadder as unknown as Record<string, unknown>,
     next.tiles as unknown as Record<string, unknown>,
@@ -197,11 +199,22 @@ export function applyTouchFloor(
 ): SizeRecipe {
   if (!touch) return recipe;
   const tables = resolveFamily(family);
-  const token = (Object.keys(tables.heights) as SizeRecipeToken[]).find(
-    (key) => tables.heights[key] === recipe.height,
-  );
+  // Shifted families repeat a height at the floor ($1 / $1.5), so match the
+  // whole recipe first and the height only for an off-table recipe.
+  const keys = Object.keys(tables.heights) as SizeRecipeToken[];
+  const token =
+    keys.find((key) => {
+      const row = tables.recipes[key];
+      return (
+        row.height === recipe.height &&
+        row.paddingHorizontal === recipe.paddingHorizontal &&
+        row.fontSize === recipe.fontSize &&
+        row.iconSize === recipe.iconSize &&
+        row.gap === recipe.gap
+      );
+    }) ?? keys.find((key) => tables.heights[key] === recipe.height);
   if (token && tables.recipesTouch[token]) return tables.recipesTouch[token];
-  return recipeFromHeight(Math.max(recipe.height, tables.inputs.touchFloor), tables.ratios);
+  return { ...recipe, height: Math.max(recipe.height, tables.inputs.touchFloor) };
 }
 
 export function sizeRecipeForToken(
@@ -232,16 +245,26 @@ export function sizeRecipeEscape<T>(value: T, _reason?: string): T {
 }
 
 /**
- * LC-84 TEXT-INSET — optical vertical inset of a text field, never larger
- * than the recipe padX. Extra horizontal space is legal only when an icon
- * well occupies that side, not as empty-field padX.
+ * TEXT-INSET — optical vertical inset of a text field, never larger than the
+ * recipe padX, snapped down to the largest `$space` value of the active
+ * scale at or under it so the inset is a token on every preset (LC-100).
+ * Extra horizontal space is legal only when an icon well occupies that side,
+ * not as empty-field padX.
  *
- *   min(paddingHorizontal, floor((height − fontSize) / 2))
+ *   snap(min(paddingHorizontal, floor((height − fontSize) / 2)))
  *
- * `$4` (44 / 18 / 14) → 15. Button ladders keep recipe.paddingHorizontal (18).
+ * `$4` (40 / 16 / 15) → 12 (`$3`); roomy 48 / 21 / 16 → 15; dense 36 / 13 / 14 → 9.
  */
 export function textFieldInset(
   recipe: Pick<SizeRecipe, "height" | "paddingHorizontal" | "fontSize">,
 ): number {
-  return Math.min(recipe.paddingHorizontal, Math.floor((recipe.height - recipe.fontSize) / 2));
+  const optical = Math.min(
+    recipe.paddingHorizontal,
+    Math.floor((recipe.height - recipe.fontSize) / 2),
+  );
+  let inset = 0;
+  for (const [key, px] of Object.entries(getActiveScaleTokens().space)) {
+    if (!key.startsWith("-") && px <= optical && px > inset) inset = px;
+  }
+  return inset;
 }

package/src/theme/subsetThemes.spec.ts

@@ -13,7 +13,7 @@ vi.mock("tamagui", () => ({
 vi.mock("./animations/index", () => ({ animations: {} }));
 
 import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
-import { createThemesBuilder } from "./createThemes";
+import { createThemesBuilder, houseComponentThemes } from "./createThemes";
 import { defaultAccentTheme } from "./defaults/accent";
 import { defaultBaseTheme } from "./defaults/base";
 import { defaultBuilderOptions } from "./defaults/builderOptions";
@@ -79,16 +79,22 @@ describe("subsetThemes over the house matrix", () => {
       components: ["Button"],
       tints: ["accent", "active", "alt1", "alt2", "error", "success", "warning"],
     });
-    expect(Object.keys(kept).length).toBeLessThan(Object.keys(built).length / 4);
+    expect(Object.keys(built)).toHaveLength(462);
+    expect(Object.keys(kept)).toHaveLength(44);
     for (const name of ["light", "dark", "light_accent", "light_Button", "dark_error_Button"]) {
       expect(kept).toHaveProperty(name);
     }
-    for (const name of ["light_blue", "dark_red", "light_Tooltip", "light_accent_Input"]) {
+    for (const name of ["light_blue", "dark_red", "light_Slider", "light_accent_Input"]) {
       expect(built).toHaveProperty(name);
       expect(kept).not.toHaveProperty(name);
     }
   });
 
+  it("the shipped component list matches every v5 house surface", async () => {
+    const { themeSubset } = await import("../../../../packages/themes/subset");
+    expect(themeSubset.components).toEqual(Object.keys(houseComponentThemes).sort());
+  });
+
   it("is what createDefaultThemeConfig({ subset }) ships, and omitting it ships everything", () => {
     const full = createDefaultThemeConfig().tamagui.themes as Record<string, unknown>;
     const subset = createDefaultThemeConfig({ subset: narrow }).tamagui.themes as Record<

package/src/theme/switchThumb.spec.ts

@@ -0,0 +1,69 @@
+import { configWithoutAnimations } from "@tamagui/config";
+import { createTamagui } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { contrastRatio, minContrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
+import { createThemesBuilder } from "./createThemes";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+import { defaultKnobs } from "./knobs";
+import { resolveKnobs } from "./resolveKnobs";
+
+const themes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+const config = createTamagui({ ...configWithoutAnimations, themes });
+
+const tintedSchemes = Object.keys(themes).filter(
+  (name) => /^(light|dark)(_[a-z]+)?$/.test(name) && !/_(active|accent)$/.test(name),
+);
+
+function ratio(a: string, b: string) {
+  const aHex = normalizeToHex(a);
+  const bHex = normalizeToHex(b);
+  if (!aHex || !bHex) throw new Error(`Expected opaque colours: ${a}, ${b}`);
+  return contrastRatio(relativeLuminance(aHex), relativeLuminance(bHex));
+}
+
+describe("switch thumb", () => {
+  it.each(["light", "dark"])("%s keeps a white thumb through its Switch child", (scheme) => {
+    expect(themes[scheme].switchThumb).toBe("#ffffff");
+    expect(Object.hasOwn(themes[`${scheme}_Switch`], "switchThumb")).toBe(false);
+    expect(config.themes[`${scheme}_Switch`].switchThumb?.val).toBe("#ffffff");
+  });
+
+  it("resolves the web thumb shadow through the knob recipe", () => {
+    const { thumbShadow } = resolveKnobs(defaultKnobs).knobProps;
+    expect(thumbShadow.style?.boxShadow).toEqual(expect.any(String));
+    expect(thumbShadow.style?.boxShadow).not.toBe("");
+  });
+
+  it.each(tintedSchemes)(
+    "%s: the off track holds 3:1 under the thumb and stays apart from the on track",
+    (name) => {
+      const theme = config.themes[name] as Record<string, { val: string }>;
+      const scheme = name.split("_")[0] as "light" | "dark";
+      const off = theme.switchTrackOff.val;
+      expect(off).toBe(theme[scheme === "light" ? "gray10" : "gray7"].val);
+      expect(theme.switchTrackOffHover.val).toBe(theme[scheme === "light" ? "gray9" : "gray6"].val);
+      expect(theme.switchTrackOffPress.val).toBe(
+        theme[scheme === "light" ? "gray11" : "gray8"].val,
+      );
+      expect(ratio(off, theme.switchThumb.val)).toBeGreaterThanOrEqual(minContrastRatio);
+      expect(ratio(off, theme.accentBackground.val)).toBeGreaterThanOrEqual(1.5);
+      if (scheme === "light") {
+        for (const against of [theme.background.val, theme.color3.val]) {
+          expect(ratio(off, against)).toBeGreaterThanOrEqual(minContrastRatio);
+        }
+      }
+    },
+  );
+
+  it.each(["light", "dark"])("%s_Switch inherits its scheme's off track", (scheme) => {
+    expect(config.themes[`${scheme}_Switch`].switchTrackOff?.val).toBe(
+      config.themes[scheme].switchTrackOff?.val,
+    );
+  });
+});