@multiplatform.one/theme 7.2.2 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.2.2",
+  "version": "7.4.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -53,8 +53,8 @@
     "@tamagui/toast": "2.7.6",
     "@tamagui/web": "2.7.6",
     "react-cookie": "^8.1.2",
-    "@multiplatform.one/platform": "7.2.2",
-    "@multiplatform.one/store": "7.2.2"
+    "@multiplatform.one/platform": "7.4.0",
+    "@multiplatform.one/store": "7.4.0"
   },
   "devDependencies": {
     "@tamagui/animations-css": "2.7.6",
@@ -69,8 +69,8 @@
     "tamagui": "2.7.6",
     "typescript": "~5.9.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.2.2",
-    "@multiplatform.one/test-utils": "7.2.2"
+    "@multiplatform.one/config": "7.4.0",
+    "@multiplatform.one/test-utils": "7.4.0"
   },
   "peerDependencies": {
     "@tamagui/animations-css": "^2.0.0-rc",

package/src/theme/Surface.spec.tsx

@@ -117,7 +117,7 @@ describe("useResolvedKnobs inside Surface", () => {
     expect(result.current.knobProps.sizeToken).toBe("$3");
     expect(result.current.knobProps.density).toBe("compact");
     expect(result.current.knobProps.gap).toEqual({ gap: "$2" });
-    expect(result.current.knobProps.control.height).toBe(28);
+    expect(result.current.knobProps.control.height).toBe(36);
   });
 
   it("a large size request inside a medium Surface resolves medium", () => {

package/src/theme/createDefaultThemeConfig.spec.ts

@@ -124,10 +124,10 @@ describe("createDefaultThemeConfig — builderOptions.getTheme composition (DF-0
     expect(config.recipeFamilies?.control.boxVariants.$4.height).toBe(40);
     expect(config.recipeFamilies?.control.recipes.$4).toEqual({
       height: 40,
-      paddingHorizontal: Math.round(40 * (12 / 32)),
-      fontSize: Math.round(40 * (14 / 32)),
-      iconSize: Math.round(40 * (16 / 32)),
-      gap: Math.round(40 * (6 / 32)),
+      paddingHorizontal: Math.round(40 * (18 / 44)),
+      fontSize: Math.round(40 * (14 / 44)),
+      iconSize: Math.round(40 * (16 / 44)),
+      gap: Math.round(40 * (9 / 44)),
     });
     expect(config.recipeInputs?.baseHeight).toBe(40);
     const themes = (config.tamagui as unknown as { themes: RawThemes }).themes;
@@ -147,6 +147,6 @@ describe("createDefaultThemeConfig — builderOptions.getTheme composition (DF-0
       expect(normalizeToHex(theme.outlineColor)).toBeTruthy();
       expect(theme.textMuted).toBe(theme.color11);
     }
-    expect(config.recipeFamilies?.control.boxVariants.$4.height).toBe(32);
+    expect(config.recipeFamilies?.control.boxVariants.$4.height).toBe(44);
   });
 });

package/src/theme/index.ts

@@ -26,6 +26,7 @@ export * from "./resolveKnobs";
 export * from "./shared";
 export * from "./sizeRecipes";
 export * from "./Surface";
+export * from "./tileSizes";
 
 export * from "./theme";
 export * from "./Tint";

package/src/theme/layoutTokens.spec.ts

@@ -18,9 +18,10 @@ import {
 } from "./layoutTokens";
 
 describe("layoutBreakpoints (DG-LAY-01)", () => {
-  it("documents FloatingPanel 860 as expanded / overlay", () => {
+  it("pivots overlays at medium 640 (Tamagui $sm — MPO-13 C5); expanded 860 stays the pane class", () => {
     expect(layoutBreakpoints.expanded).toBe(860);
-    expect(OVERLAY_BREAKPOINT).toBe(860);
+    expect(OVERLAY_BREAKPOINT).toBe(640);
+    expect(OVERLAY_BREAKPOINT).toBe(layoutBreakpoints.medium);
   });
 
   it("documents DeskShell narrow as medium 640", () => {

package/src/theme/layoutTokens.ts

@@ -10,8 +10,10 @@
  * Hybrid of shipped MP1 behavior + Material window-size naming:
  * - **Names** follow Material (compact → xl).
  * - **Numbers** prefer already-shipped thresholds:
- *   - `medium` @ 640 = Tamagui `$sm` / DeskShell narrow (Fluent sm).
- *   - `expanded` @ 860 = FloatingPanel sheet↔float pivot (~Material 840).
+ *   - `medium` @ 640 = Tamagui `$sm` / DeskShell narrow (Fluent sm) — and,
+ *     since MPO-13, the overlay sheet↔float pivot (see OVERLAY_BREAKPOINT).
+ *   - `expanded` @ 860 = pane-budget class only (~Material 840). No Tamagui
+ *     counterpart; Tamagui has no pane system, so this stays additive.
  *   - `large` / `xl` = Tamagui `$lg` / `$xl`.
  *
  * Fluent (480/640/1024/1366/1920) and Material (600/840/1200/1600) stay in the
@@ -19,9 +21,9 @@
  *
  * | Class     | Min px | Max panes (default) | Tamagui media | Notes                          |
  * |-----------|--------|---------------------|---------------|--------------------------------|
- * | compact   | 0      | 1                   | < `$sm`       | phones; drawer nav             |
- * | medium    | 640    | 1                   | `$sm`         | DeskShell rail; still 1 pane   |
- * | expanded  | 860    | 2                   | — (custom)    | FloatingPanel float; 2 panes   |
+ * | compact   | 0      | 1                   | < `$sm`       | phones; drawer nav; sheets     |
+ * | medium    | 640    | 1                   | `$sm`         | DeskShell rail; overlays float |
+ * | expanded  | 860    | 2                   | — (custom)    | 2 panes                        |
  * | large     | 1024   | 2                   | `$lg`         |                                |
  * | xl        | 1280   | 2                   | `$xl`         |                                |
  *
@@ -40,9 +42,13 @@ export type LayoutSizeClass = "compact" | "medium" | "expanded" | "large" | "xl"
 
 /** Named min-widths. Prefer these over literals in layout code. */
 export const layoutBreakpoints = {
-  /** End of compact / DeskShell narrow drawer threshold (Tamagui `$sm`). */
+  /**
+   * End of compact / DeskShell narrow drawer threshold (Tamagui `$sm`).
+   * Also the overlay sheet↔float pivot and the DataTable card↔grid pivot —
+   * one idiom flip per viewport (MPO-13 C5).
+   */
   medium: 640,
-  /** Two-pane + FloatingPanel float threshold (~M3 expanded 840). */
+  /** Two-pane budget threshold (~M3 expanded 840). Not an overlay pivot. */
   expanded: 860,
   /** Tamagui `$lg`. */
   large: 1024,
@@ -53,10 +59,16 @@ export const layoutBreakpoints = {
 export type LayoutBreakpointName = keyof typeof layoutBreakpoints;
 
 /**
- * Alias kept for FloatingPanel / overlay consumers — same value as
- * `layoutBreakpoints.expanded`.
+ * Overlay sheet↔float pivot for FloatingPanel / AdaptivePopup consumers.
+ *
+ * MPO-13 C5: was `layoutBreakpoints.expanded` (860, a custom threshold with
+ * no Tamagui counterpart), which split the system in two — at 700px a
+ * DataTable rendered its desktop grid while a Select in one of its cells
+ * opened as a bottom sheet. Overlays now pivot where the table does:
+ * `layoutBreakpoints.medium` (640, Tamagui v5 `$sm` — the same `media.sm`
+ * key DataTableRoot reads), so every surface flips idiom at one width.
  */
-export const OVERLAY_BREAKPOINT = layoutBreakpoints.expanded;
+export const OVERLAY_BREAKPOINT = layoutBreakpoints.medium;
 
 /** DeskShell sidebar collapse — same value as `layoutBreakpoints.medium`. */
 export const NARROW_BREAKPOINT = layoutBreakpoints.medium;

package/src/theme/mpo13Proof.spec.ts

@@ -0,0 +1,149 @@
+/**
+ * MPO-13 PROOF — the measured corrections, asserted against the values read
+ * off the live tamagui.dev computed styles (reference doc §4, §5.1, §6.1,
+ * §6.2; 1440x900 DPR2, light and dark).
+ *
+ * This file exists so the corrections cannot silently regress: it pins the
+ * generator's OUTPUT to the reference numbers, and it pins the RELATIONSHIPS
+ * that produced them (gap tracks radius; space ≈ 40% of size; input padding
+ * one space step below button) rather than the literals alone. A design that
+ * only looks right at one hardcoded set of numbers fails the acceptance test
+ * — every value below resolves through `SizeRecipeInputs`, so re-pointing the
+ * knob re-derives all of them.
+ */
+
+import { describe, expect, it } from "vitest";
+import { layoutBreakpoints, OVERLAY_BREAKPOINT } from "./layoutTokens";
+import { DEFAULT_SIZE_RECIPE_INPUTS, generateSizeRecipes, sizeRecipeForToken } from "./sizeRecipes";
+
+/** Stock Tamagui token scales, read from the live CSS variables (§4). */
+const tamaguiSize = {
+  $1: 20,
+  "$1.5": 24,
+  $2: 28,
+  "$2.5": 32,
+  $3: 36,
+  "$3.5": 40,
+  $4: 44,
+  $true: 44,
+  $5: 52,
+  $6: 64,
+} as const;
+
+const tamaguiRadiusTrue = 9;
+const tamaguiSpaceTrue = 18;
+
+describe("MPO-13 C1/C2 — $4 means ONE height, and it is 44", () => {
+  it("every recipe height equals the raw Tamagui $size token at the same key", () => {
+    const { heights } = generateSizeRecipes(DEFAULT_SIZE_RECIPE_INPUTS);
+    for (const [token, px] of Object.entries(tamaguiSize)) {
+      expect(heights[token], `heights.${token}`).toBe(px);
+    }
+  });
+
+  it("baseHeight is $size.true, so recipe and token cannot re-diverge", () => {
+    expect(DEFAULT_SIZE_RECIPE_INPUTS.baseHeight).toBe(tamaguiSize.$true);
+    expect(sizeRecipeForToken("$4").height).toBe(tamaguiSize.$4);
+    expect(sizeRecipeForToken("$true").height).toBe(sizeRecipeForToken("$4").height);
+  });
+
+  it("the $4 control is the measured 44 / 18 / 14 / 16 / 9", () => {
+    expect(sizeRecipeForToken("$4")).toEqual({
+      height: 44,
+      paddingHorizontal: 18,
+      fontSize: 14,
+      iconSize: 16,
+      gap: 9,
+    });
+  });
+});
+
+describe("MPO-13 C3 — radius is $radius.true = 9", () => {
+  it("radiusPx is the stored input, at the measured value", () => {
+    expect(DEFAULT_SIZE_RECIPE_INPUTS.radiusPx).toBe(tamaguiRadiusTrue);
+  });
+
+  it("gap tracks radius exactly at $4 (the reference's stated rule)", () => {
+    expect(sizeRecipeForToken("$4").gap).toBe(DEFAULT_SIZE_RECIPE_INPUTS.radiusPx);
+  });
+
+  it("radius never rides the size axis — it stays on the borderRadius knob", () => {
+    for (const token of ["$2", "$3", "$4", "$5", "$6"] as const) {
+      expect(sizeRecipeForToken(token)).not.toHaveProperty("radius");
+      expect(sizeRecipeForToken(token)).not.toHaveProperty("borderRadius");
+    }
+  });
+});
+
+describe("MPO-13 — the ratios are relationships, not literals", () => {
+  it("padding at $4 is $space.true, ~40% of the size step (reference §4)", () => {
+    const recipe = sizeRecipeForToken("$4");
+    expect(recipe.paddingHorizontal).toBe(tamaguiSpaceTrue);
+    const spaceToSize = recipe.paddingHorizontal / recipe.height;
+    expect(spaceToSize).toBeGreaterThan(0.38);
+    expect(spaceToSize).toBeLessThan(0.42);
+  });
+
+  it("compact is one space step below control at the SAME height (LC-76)", () => {
+    const control = sizeRecipeForToken("$4");
+    const compact = sizeRecipeForToken("$4", { family: "controlCompact" });
+    expect(compact.height).toBe(control.height);
+    expect(compact.paddingHorizontal).toBeLessThan(control.paddingHorizontal);
+    // $space.3 = 13 vs $space.true = 18 — the measured Input↔Button offset.
+    expect(compact.paddingHorizontal).toBe(13);
+  });
+
+  it("re-pointing baseHeight re-derives every channel — no hardcoded 44", () => {
+    const scaled = generateSizeRecipes({ baseHeight: 88 });
+    const base = sizeRecipeForToken("$4");
+    expect(scaled.recipes.$4.height).toBe(base.height * 2);
+    expect(scaled.recipes.$4.paddingHorizontal).toBe(base.paddingHorizontal * 2);
+    expect(scaled.recipes.$4.fontSize).toBe(base.fontSize * 2);
+    expect(scaled.recipes.$4.gap).toBe(base.gap * 2);
+  });
+});
+
+describe("MPO-13 C4/C5 — one breakpoint system", () => {
+  it("overlays pivot on the Tamagui v5 $sm key the table already uses", () => {
+    expect(OVERLAY_BREAKPOINT).toBe(640);
+    expect(OVERLAY_BREAKPOINT).toBe(layoutBreakpoints.medium);
+  });
+
+  it("no viewport can mix a desktop grid with a sheet overlay", () => {
+    // The 700px case from the drift register: DataTable reads `media.sm`
+    // (v5 minWidth 640) and FloatingPanel reads OVERLAY_BREAKPOINT. Equal
+    // thresholds means one idiom per width, by construction.
+    const dataTableGridFrom = 640;
+    expect(OVERLAY_BREAKPOINT).toBe(dataTableGridFrom);
+    for (const width of [500, 639, 700, 800, 900]) {
+      const tableIsGrid = width >= dataTableGridFrom;
+      const overlayFloats = width > OVERLAY_BREAKPOINT;
+      // The only disagreement allowed is the single boundary pixel row
+      // (>= vs >), never a 220px band.
+      expect(tableIsGrid === overlayFloats || width === 640).toBe(true);
+    }
+  });
+
+  it("expanded 860 survives as the pane-budget class only", () => {
+    expect(layoutBreakpoints.expanded).toBe(860);
+    expect(OVERLAY_BREAKPOINT).not.toBe(layoutBreakpoints.expanded);
+  });
+});
+
+describe("MPO-13 — the touch floor stops fighting the desktop ramp", () => {
+  it("$4 meets the 44 floor natively; touch lifts it, never shrinks it", () => {
+    const desktop = sizeRecipeForToken("$4");
+    const touch = sizeRecipeForToken("$4", { touch: true });
+    expect(desktop.height).toBe(DEFAULT_SIZE_RECIPE_INPUTS.touchFloor);
+    expect(touch.height).toBeGreaterThanOrEqual(desktop.height);
+  });
+
+  it("every touch height clears the floor", () => {
+    const { heightsTouch } = generateSizeRecipes(DEFAULT_SIZE_RECIPE_INPUTS);
+    for (const [token, px] of Object.entries(heightsTouch)) {
+      expect(px, `heightsTouch.${token}`).toBeGreaterThanOrEqual(
+        DEFAULT_SIZE_RECIPE_INPUTS.touchFloor,
+      );
+    }
+  });
+});

package/src/theme/recipeInputs.ts

@@ -9,11 +9,21 @@
  * Tamagui `createThemes` / theme-builder still emits COLOR palettes only.
  * Do not stuff recipe keys into `getTheme()` / `themes`.
  *
- * DEFAULT uses `tokenHeights` so published px match today's lossless table
- * ($4=32, $3=28, $5=40, $6=48). `{ baseHeight: 40 }` (no tokenHeights /
- * sizeFactors) regenerates geometrically from `baseHeight * stepRatio ** step`.
+ * DEFAULT uses `tokenHeights` pinned to the stock Tamagui `$size` scale as
+ * measured on tamagui.dev ($4=44, $3=36, $5=52, $6=64 — MPO-13 C1/C2: the
+ * recipe key and the raw token now agree). `{ baseHeight: 40 }` (no
+ * tokenHeights / sizeFactors) regenerates geometrically from
+ * `baseHeight * stepRatio ** step`.
  */
 
+import {
+  cloneTileSizeInputs,
+  generateTileSizeLadder,
+  resolveTileSizeInputs,
+  type TileSizeInputs,
+  type TileSizeLadder,
+} from "./tileSizes";
+
 export const SIZE_RECIPE_TOKENS = [
   "$1",
   "$1.5",
@@ -55,6 +65,11 @@ export type SizeRecipeInputs = {
   compactRatios: SizeRecipeRatios;
   radiusPx: number;
   touchFloor: number;
+  /**
+   * Tile-size ladder inputs (MPO-31). Merged over `defaultTileSizeInputs`;
+   * the ladder table derives from these the way every other table does.
+   */
+  tile?: Partial<TileSizeInputs>;
 };
 
 /** @deprecated Use `SizeRecipeInputs`. */
@@ -104,6 +119,8 @@ export type GeneratedSizeRecipes = {
   typeVariants: Record<string, SizeRecipeTypeVariant>;
   iconVariants: Record<string, SizeRecipeIconVariant>;
   families: RecipeFamilies;
+  /** Tile-size ladder (MPO-31) — derived from `inputs.tile` over the measured defaults. */
+  tiles: TileSizeLadder;
 };
 
 export const SIZE_TOKEN_EXPONENTS: Record<SizeRecipeToken, number> = {
@@ -119,56 +136,73 @@ export const SIZE_TOKEN_EXPONENTS: Record<SizeRecipeToken, number> = {
   $6: 2,
 };
 
+// Stock Tamagui `$size` px as measured from the live tamagui.dev CSS vars
+// (MPO-13 fidelity pass): $1:20 $1.5:24 $2:28 $2.5:32 $3:36 $3.5:40
+// $4/$true:44 $5:52 $6:64. The recipe key "$4" and the raw Tamagui token
+// `$size.4` resolve to the SAME height — the C1 split (recipe 32 vs token
+// 44) is gone.
 const DEFAULT_TOKEN_HEIGHTS: Record<string, number> = {
   $1: 20,
   "$1.5": 24,
-  $2: 24,
-  "$2.5": 28,
-  $3: 28,
-  "$3.5": 30,
-  $4: 32,
-  $true: 32,
-  $5: 40,
-  $6: 48,
+  $2: 28,
+  "$2.5": 32,
+  $3: 36,
+  "$3.5": 40,
+  $4: 44,
+  $true: 44,
+  $5: 52,
+  $6: 64,
 };
 
-/** Lossless relative table: today's 20/24/28/32/40/48 ramp at baseHeight 32. */
+/** Lossless relative table: the stock Tamagui 20/24/28/32/36/40/44/52/64 ramp at baseHeight 44. */
 export const defaultSizeFactors: Record<SizeRecipeToken, number> = {
-  $1: 20 / 32,
-  "$1.5": 24 / 32,
-  $2: 24 / 32,
-  "$2.5": 28 / 32,
-  $3: 28 / 32,
-  "$3.5": 30 / 32,
+  $1: 20 / 44,
+  "$1.5": 24 / 44,
+  $2: 28 / 44,
+  "$2.5": 32 / 44,
+  $3: 36 / 44,
+  "$3.5": 40 / 44,
   $4: 1,
   $true: 1,
-  $5: 40 / 32,
-  $6: 48 / 32,
+  $5: 52 / 44,
+  $6: 64 / 44,
 };
 
+// Anchored at the measured $4/$true control: height 44, padX 18
+// ($space.true), font 14, icon 16, gap 9 (gap tracks $radius.true). The
+// ratio model is linear, so steps away from $4 approximate Tamagui's
+// hand-tuned ramp rather than matching it exactly.
 const DEFAULT_RATIOS: SizeRecipeRatios = {
-  padX: 12 / 32,
-  font: 14 / 32,
-  icon: 16 / 32,
-  gap: 6 / 32,
+  padX: 18 / 44,
+  font: 14 / 44,
+  icon: 16 / 44,
+  gap: 9 / 44,
 };
 
+// One space step and one type step below control at the same height:
+// $4 compact = padX 13 ($space.3), font 13 ($3 label), icon 14, gap 7
+// ($space.2).
 const DEFAULT_COMPACT_RATIOS: SizeRecipeRatios = {
-  padX: 8 / 32,
-  font: 13 / 32,
-  icon: 14 / 32,
-  gap: 4 / 32,
+  padX: 13 / 44,
+  font: 13 / 44,
+  icon: 14 / 44,
+  gap: 7 / 44,
 };
 
 export const DEFAULT_SIZE_RECIPE_INPUTS: SizeRecipeInputs = {
-  baseHeight: 32,
+  // Tamagui `$size.true` = 44 — the iOS touch minimum, measured on every
+  // tamagui.dev button and input (MPO-13 C2; was 32).
+  baseHeight: 44,
   stepRatio: 1.25,
   tokenSteps: { ...SIZE_TOKEN_EXPONENTS },
   tokenHeights: { ...DEFAULT_TOKEN_HEIGHTS },
   sizeFactors: { ...defaultSizeFactors },
   ratios: { ...DEFAULT_RATIOS },
   compactRatios: { ...DEFAULT_COMPACT_RATIOS },
-  radiusPx: 6,
+  // Tamagui `$radius.true` = 9, matching the borderRadius knob's medium
+  // stop ($4 = 9px) — the stored input no longer contradicts the knob
+  // (MPO-13 C3; was 6).
+  radiusPx: 9,
   touchFloor: 44,
 };
 
@@ -186,6 +220,7 @@ export function cloneSizeRecipeInputs(inputs: SizeRecipeInputs): SizeRecipeInput
     sizeFactors: inputs.sizeFactors ? { ...inputs.sizeFactors } : undefined,
     ratios: { ...inputs.ratios },
     compactRatios: { ...inputs.compactRatios },
+    tile: inputs.tile ? cloneTileSizeInputs(inputs.tile) : undefined,
   };
 }
 
@@ -209,6 +244,10 @@ export function resolveSizeRecipeInputs(partial: Partial<SizeRecipeInputs> = {})
     touchFloor: partial.touchFloor ?? DEFAULT_SIZE_RECIPE_INPUTS.touchFloor,
   };
 
+  if (partial.tile !== undefined) {
+    resolved.tile = partial.tile ? resolveTileSizeInputs(partial.tile) : undefined;
+  }
+
   if (hasTokenHeights) {
     resolved.tokenHeights = partial.tokenHeights ? { ...partial.tokenHeights } : undefined;
     if (hasSizeFactors) {
@@ -364,5 +403,6 @@ export function generateSizeRecipes(partial: Partial<SizeRecipeInputs> = {}): Ge
     typeVariants: control.typeVariants,
     iconVariants: control.iconVariants,
     families,
+    tiles: generateTileSizeLadder(resolveTileSizeInputs(inputs.tile ?? {})),
   };
 }

package/src/theme/resolveKnobs.spec.ts

@@ -398,9 +398,9 @@ describe("resolveKnobs", () => {
     it("fills control / controlType / controlIcon from the size recipe", () => {
       const { knobProps } = resolveKnobs(defaultKnobs);
       expect(knobProps.control).toEqual({
-        height: 32,
-        paddingHorizontal: 12,
-        gap: 6,
+        height: 44,
+        paddingHorizontal: 18,
+        gap: 9,
       });
       expect(knobProps.controlType).toEqual({ fontSize: 14 });
       expect(knobProps.controlIcon).toEqual({ width: 16, height: 16 });
@@ -412,8 +412,8 @@ describe("resolveKnobs", () => {
     it("small and large share the same borderRadius fragment", () => {
       const small = resolveKnobs(knobsWith({ size: "small" }));
       const large = resolveKnobs(knobsWith({ size: "large" }));
-      expect(small.knobProps.control.height).toBe(28);
-      expect(large.knobProps.control.height).toBe(40);
+      expect(small.knobProps.control.height).toBe(36);
+      expect(large.knobProps.control.height).toBe(52);
       expect(small.knobProps.borderRadius).toEqual(large.knobProps.borderRadius);
     });
   });

package/src/theme/sizeRecipes.spec.ts

@@ -37,23 +37,23 @@ function expectNoRadius(value: object) {
 }
 
 describe("size recipes", () => {
-  it("medium / $4 matches the 32/12/14/16/6 reference", () => {
+  it("medium / $4 matches the measured tamagui.dev 44/18/14/16/9 reference", () => {
     const recipe = sizeRecipes.$4;
     expect(recipe).toEqual({
-      height: 32,
-      paddingHorizontal: 12,
+      height: 44,
+      paddingHorizontal: 18,
       fontSize: 14,
       iconSize: 16,
-      gap: 6,
+      gap: 9,
     });
-    expect(sizeRecipeFromHeight(32)).toEqual(recipe);
+    expect(sizeRecipeFromHeight(44)).toEqual(recipe);
     expect(sizeRecipeForToken("$4")).toEqual(recipe);
-    expect(SIZE_RECIPE_HEIGHTS.$4).toBe(32);
+    expect(SIZE_RECIPE_HEIGHTS.$4).toBe(44);
     expect(SIZE_RECIPE_RATIOS).toEqual({
-      padX: 12 / 32,
-      font: 14 / 32,
-      icon: 16 / 32,
-      gap: 6 / 32,
+      padX: 18 / 44,
+      font: 14 / 44,
+      icon: 16 / 44,
+      gap: 9 / 44,
     });
   });
 
@@ -65,7 +65,7 @@ describe("size recipes", () => {
 
   it("radius is not on the recipe or any variant object", () => {
     expectNoRadius(sizeRecipes.$4);
-    expectNoRadius(sizeRecipeFromHeight(32));
+    expectNoRadius(sizeRecipeFromHeight(44));
     expectNoRadius(sizeRecipeForToken("$4"));
     for (const token of RECIPE_KEYS) {
       expectNoRadius(sizeRecipes[token]);
@@ -144,13 +144,13 @@ describe("size recipes", () => {
   it("touch heights floor at 44 and still differentiate size steps", () => {
     const desktop = sizeRecipeForToken("$4");
     expect(desktop).toEqual(sizeRecipes.$4);
-    expect(applyTouchFloor(desktop, false).height).toBe(32);
+    expect(applyTouchFloor(desktop, false).height).toBe(44);
     expect(applyTouchFloor(desktop, true)).toEqual(sizeRecipeFromHeight(48));
     expect(sizeRecipeForToken("$4", { touch: true })).toEqual(sizeRecipeFromHeight(48));
     expect(sizeRecipeForToken("$3", { touch: true }).height).toBe(44);
     expect(sizeRecipeForToken("$5", { touch: true }).height).toBe(56);
-    expect(sizeRecipeForToken("$6", { touch: true }).height).toBe(64);
-    expect(sizeRecipeBoxVariants.$4.height).toBe(32);
+    expect(sizeRecipeForToken("$6", { touch: true }).height).toBe(68);
+    expect(sizeRecipeBoxVariants.$4.height).toBe(44);
     expectNoRadius(applyTouchFloor(desktop, true));
   });
 });
@@ -168,29 +168,29 @@ describe("generateSizeRecipes (LC-70)", () => {
     setSizeRecipeInputs();
   });
 
-  it("DEFAULT $4 is 32/12/14/16/6 with no radius", () => {
+  it("DEFAULT $4 is the measured 44/18/14/16/9 with no radius", () => {
     const generated = generateSizeRecipes(DEFAULT_SIZE_RECIPE_INPUTS);
     expect(generated.recipes.$4).toEqual({
-      height: 32,
-      paddingHorizontal: 12,
+      height: 44,
+      paddingHorizontal: 18,
       fontSize: 14,
       iconSize: 16,
-      gap: 6,
+      gap: 9,
     });
     expectNoRadius(generated.recipes.$4);
     expectNoRadius(generated.boxVariants.$4);
-    expect(generated.inputs.radiusPx).toBe(6);
+    expect(generated.inputs.radiusPx).toBe(9);
     expect(generated.heights).toEqual({
       $1: 20,
       "$1.5": 24,
-      $2: 24,
-      "$2.5": 28,
-      $3: 28,
-      "$3.5": 30,
-      $4: 32,
-      $true: 32,
-      $5: 40,
-      $6: 48,
+      $2: 28,
+      "$2.5": 32,
+      $3: 36,
+      "$3.5": 40,
+      $4: 44,
+      $true: 44,
+      $5: 52,
+      $6: 64,
     });
     expect(generated.heightsTouch).toEqual({
       $1: 44,
@@ -202,9 +202,11 @@ describe("generateSizeRecipes (LC-70)", () => {
       $4: 48,
       $true: 48,
       $5: 56,
-      $6: 64,
+      $6: 68,
     });
-    expect(generateSizeRecipeTables(defaultRecipeInputs).touchHeights).toEqual(generated.heightsTouch);
+    expect(generateSizeRecipeTables(defaultRecipeInputs).touchHeights).toEqual(
+      generated.heightsTouch,
+    );
     expect(SIZE_RECIPE_HEIGHTS_TOUCH.$4).toBe(48);
   });
 
@@ -214,10 +216,10 @@ describe("generateSizeRecipes (LC-70)", () => {
     expect(generated.heights.$4).toBe(40);
     expect(generated.recipes.$4).toEqual({
       height: 40,
-      paddingHorizontal: Math.round(40 * (12 / 32)),
-      fontSize: Math.round(40 * (14 / 32)),
-      iconSize: Math.round(40 * (16 / 32)),
-      gap: Math.round(40 * (6 / 32)),
+      paddingHorizontal: Math.round(40 * (18 / 44)),
+      fontSize: Math.round(40 * (14 / 44)),
+      iconSize: Math.round(40 * (16 / 44)),
+      gap: Math.round(40 * (9 / 44)),
     });
     expect(generated.heights.$5).not.toBe(generated.heights.$4);
     expectNoRadius(generated.recipes.$4);
@@ -225,10 +227,10 @@ describe("generateSizeRecipes (LC-70)", () => {
 
   it("controlCompact 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(32);
-    expect(generated.families.controlCompact.recipes.$4.height).toBe(32);
-    expect(generated.families.control.recipes.$4.paddingHorizontal).toBe(12);
-    expect(generated.families.controlCompact.recipes.$4.paddingHorizontal).toBe(8);
+    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(13);
     expect(generated.families.controlCompact.recipes.$4.paddingHorizontal).toBeLessThan(
       generated.families.control.recipes.$4.paddingHorizontal,
     );
@@ -275,9 +277,9 @@ describe("size recipe families", () => {
       expect(control.heightVariants[token]).toEqual({ height: SIZE_RECIPE_HEIGHTS[token] });
     }
     expect(control.boxVariants.$4).toEqual({
-      height: 32,
-      paddingHorizontal: 12,
-      gap: 6,
+      height: 44,
+      paddingHorizontal: 18,
+      gap: 9,
     });
   });
 
@@ -289,8 +291,8 @@ describe("size recipe families", () => {
     expect(compact.boxVariants.$4.paddingHorizontal).toBeLessThan(
       control.boxVariants.$4.paddingHorizontal,
     );
-    expect(compact.boxVariants.$4.paddingHorizontal).toBe(8);
-    expect(compact.boxVariants.$4.gap).toBe(4);
+    expect(compact.boxVariants.$4.paddingHorizontal).toBe(13);
+    expect(compact.boxVariants.$4.gap).toBe(7);
     expect(sizeRecipeForToken("$4", { family: "controlCompact" })).toEqual(compact.recipes.$4);
   });
 });