@multiplatform.one/theme 6.6.0 → 7.0.0

package/src/theme/recipeInputs.ts

@@ -0,0 +1,368 @@
+/**
+ * Size-recipe INPUTS (LC-70 RECIPE-INPUTS).
+ *
+ * Stored numbers are the source of truth. Tables (heights, recipes,
+ * box/type/icon variants, touch heights) are DERIVED — never handwritten.
+ * Radius is stored on inputs (`radiusPx`) and MUST NOT appear on recipes
+ * or variants; it stays on the borderRadius knob.
+ *
+ * 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`.
+ */
+
+export const SIZE_RECIPE_TOKENS = [
+  "$1",
+  "$1.5",
+  "$2",
+  "$2.5",
+  "$3",
+  "$3.5",
+  "$4",
+  "$true",
+  "$5",
+  "$6",
+] as const;
+
+export type SizeRecipeToken = (typeof SIZE_RECIPE_TOKENS)[number];
+
+export type SizeRecipeFamilyName = "control" | "controlCompact";
+/** @deprecated Use `SizeRecipeFamilyName`. */
+export type RecipeFamilyName = SizeRecipeFamilyName;
+
+export type SizeRecipeRatios = {
+  padX: number;
+  font: number;
+  icon: number;
+  gap: number;
+};
+
+export type SizeRecipeInputs = {
+  baseHeight: number;
+  stepRatio: number;
+  tokenSteps: Record<string, number>;
+  /** Absolute desktop px. When omitted, heights come from baseHeight * stepRatio ** step (or sizeFactors). */
+  tokenHeights?: Record<string, number>;
+  /**
+   * Optional per-token scale relative to `baseHeight`. Used only when
+   * `tokenHeights` is omitted. Factors are `stepRatio ** exponent` otherwise.
+   */
+  sizeFactors?: Partial<Record<SizeRecipeToken, number>>;
+  ratios: SizeRecipeRatios;
+  compactRatios: SizeRecipeRatios;
+  radiusPx: number;
+  touchFloor: number;
+};
+
+/** @deprecated Use `SizeRecipeInputs`. */
+export type RecipeInputs = SizeRecipeInputs;
+
+export type SizeRecipe = {
+  height: number;
+  paddingHorizontal: number;
+  fontSize: number;
+  iconSize: number;
+  gap: number;
+};
+
+export type SizeRecipeBoxVariant = {
+  height: number;
+  paddingHorizontal: number;
+  gap: number;
+};
+
+export type SizeRecipeTypeVariant = { fontSize: number };
+export type SizeRecipeIconVariant = { width: number; height: number };
+
+export type SizeRecipeTables = {
+  inputs: SizeRecipeInputs;
+  ratios: SizeRecipeRatios;
+  heights: Record<string, number>;
+  touchHeights: Record<string, number>;
+  recipes: Record<string, SizeRecipe>;
+  recipesTouch: Record<string, SizeRecipe>;
+  boxVariants: Record<string, SizeRecipeBoxVariant>;
+  typeVariants: Record<string, SizeRecipeTypeVariant>;
+  iconVariants: Record<string, SizeRecipeIconVariant>;
+  heightVariants: Record<string, { height: number }>;
+};
+
+export type SizeRecipeFamily = SizeRecipeTables & { name: SizeRecipeFamilyName };
+
+export type RecipeFamilies = Record<SizeRecipeFamilyName, SizeRecipeFamily>;
+
+export type GeneratedSizeRecipes = {
+  inputs: SizeRecipeInputs;
+  heights: Record<string, number>;
+  heightsTouch: Record<string, number>;
+  recipes: Record<string, SizeRecipe>;
+  recipesTouch: Record<string, SizeRecipe>;
+  boxVariants: Record<string, SizeRecipeBoxVariant>;
+  typeVariants: Record<string, SizeRecipeTypeVariant>;
+  iconVariants: Record<string, SizeRecipeIconVariant>;
+  families: RecipeFamilies;
+};
+
+export const SIZE_TOKEN_EXPONENTS: Record<SizeRecipeToken, number> = {
+  $1: -3,
+  "$1.5": -2.5,
+  $2: -2,
+  "$2.5": -1.5,
+  $3: -1,
+  "$3.5": -0.5,
+  $4: 0,
+  $true: 0,
+  $5: 1,
+  $6: 2,
+};
+
+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,
+};
+
+/** Lossless relative table: today's 20/24/28/32/40/48 ramp at baseHeight 32. */
+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,
+  $4: 1,
+  $true: 1,
+  $5: 40 / 32,
+  $6: 48 / 32,
+};
+
+const DEFAULT_RATIOS: SizeRecipeRatios = {
+  padX: 12 / 32,
+  font: 14 / 32,
+  icon: 16 / 32,
+  gap: 6 / 32,
+};
+
+const DEFAULT_COMPACT_RATIOS: SizeRecipeRatios = {
+  padX: 8 / 32,
+  font: 13 / 32,
+  icon: 14 / 32,
+  gap: 4 / 32,
+};
+
+export const DEFAULT_SIZE_RECIPE_INPUTS: SizeRecipeInputs = {
+  baseHeight: 32,
+  stepRatio: 1.25,
+  tokenSteps: { ...SIZE_TOKEN_EXPONENTS },
+  tokenHeights: { ...DEFAULT_TOKEN_HEIGHTS },
+  sizeFactors: { ...defaultSizeFactors },
+  ratios: { ...DEFAULT_RATIOS },
+  compactRatios: { ...DEFAULT_COMPACT_RATIOS },
+  radiusPx: 6,
+  touchFloor: 44,
+};
+
+export const defaultRecipeInputs = DEFAULT_SIZE_RECIPE_INPUTS;
+
+export const TOUCH_HEIGHT_FLOOR = DEFAULT_SIZE_RECIPE_INPUTS.touchFloor;
+
+const MD_TOUCH_MIN = 48;
+
+export function cloneSizeRecipeInputs(inputs: SizeRecipeInputs): SizeRecipeInputs {
+  return {
+    ...inputs,
+    tokenSteps: { ...inputs.tokenSteps },
+    tokenHeights: inputs.tokenHeights ? { ...inputs.tokenHeights } : undefined,
+    sizeFactors: inputs.sizeFactors ? { ...inputs.sizeFactors } : undefined,
+    ratios: { ...inputs.ratios },
+    compactRatios: { ...inputs.compactRatios },
+  };
+}
+
+/**
+ * Fill defaults. `{ baseHeight: 36 }` drops handwritten tokenHeights/sizeFactors
+ * so every token regenerates from stepRatio.
+ */
+export function resolveSizeRecipeInputs(partial: Partial<SizeRecipeInputs> = {}): SizeRecipeInputs {
+  const scalingOverride =
+    partial.baseHeight != null || partial.stepRatio != null || partial.tokenSteps != null;
+  const hasTokenHeights = Object.prototype.hasOwnProperty.call(partial, "tokenHeights");
+  const hasSizeFactors = Object.prototype.hasOwnProperty.call(partial, "sizeFactors");
+
+  const resolved: SizeRecipeInputs = {
+    baseHeight: partial.baseHeight ?? DEFAULT_SIZE_RECIPE_INPUTS.baseHeight,
+    stepRatio: partial.stepRatio ?? DEFAULT_SIZE_RECIPE_INPUTS.stepRatio,
+    tokenSteps: { ...DEFAULT_SIZE_RECIPE_INPUTS.tokenSteps, ...partial.tokenSteps },
+    ratios: { ...DEFAULT_SIZE_RECIPE_INPUTS.ratios, ...partial.ratios },
+    compactRatios: { ...DEFAULT_SIZE_RECIPE_INPUTS.compactRatios, ...partial.compactRatios },
+    radiusPx: partial.radiusPx ?? DEFAULT_SIZE_RECIPE_INPUTS.radiusPx,
+    touchFloor: partial.touchFloor ?? DEFAULT_SIZE_RECIPE_INPUTS.touchFloor,
+  };
+
+  if (hasTokenHeights) {
+    resolved.tokenHeights = partial.tokenHeights ? { ...partial.tokenHeights } : undefined;
+    if (hasSizeFactors) {
+      resolved.sizeFactors = partial.sizeFactors ? { ...partial.sizeFactors } : undefined;
+    }
+  } else if (hasSizeFactors) {
+    resolved.sizeFactors = partial.sizeFactors ? { ...partial.sizeFactors } : undefined;
+  } else if (!scalingOverride) {
+    resolved.tokenHeights = { ...DEFAULT_SIZE_RECIPE_INPUTS.tokenHeights };
+    resolved.sizeFactors = { ...DEFAULT_SIZE_RECIPE_INPUTS.sizeFactors };
+  }
+
+  return resolved;
+}
+
+export const mergeRecipeInputs = resolveSizeRecipeInputs;
+
+function clampHeight(value: number): number {
+  return Math.max(1, Math.round(value));
+}
+
+function heightForToken(token: string, inputs: SizeRecipeInputs): number {
+  const explicitPx = inputs.tokenHeights?.[token];
+  if (explicitPx != null) return clampHeight(explicitPx);
+  const factor = inputs.sizeFactors?.[token as SizeRecipeToken];
+  if (factor != null) return clampHeight(inputs.baseHeight * factor);
+  const step = inputs.tokenSteps[token] ?? 0;
+  return clampHeight(inputs.baseHeight * inputs.stepRatio ** step);
+}
+
+export function sizeRecipeFromHeight(
+  height: number,
+  ratios: SizeRecipeRatios = DEFAULT_SIZE_RECIPE_INPUTS.ratios,
+): SizeRecipe {
+  return {
+    height,
+    paddingHorizontal: Math.round(height * ratios.padX),
+    fontSize: Math.round(height * ratios.font),
+    iconSize: Math.round(height * ratios.icon),
+    gap: Math.round(height * ratios.gap),
+  };
+}
+
+function generateTouchHeights(
+  heights: Record<string, number>,
+  inputs: SizeRecipeInputs,
+  tokens: readonly string[],
+): Record<string, number> {
+  const { touchFloor, tokenSteps } = inputs;
+  const mdDesktop = heights.$4 ?? inputs.baseHeight;
+  const floored: Record<string, number> = {};
+  for (const token of tokens) {
+    floored[token] = Math.max(heights[token], touchFloor);
+  }
+
+  let mdTouch = Math.max(floored.$4 ?? touchFloor, MD_TOUCH_MIN);
+  const below = tokens.filter((token) => (tokenSteps[token] ?? 0) < 0);
+  const maxBelow =
+    below.length > 0 ? Math.max(...below.map((token) => floored[token])) : touchFloor;
+  if (mdTouch <= maxBelow) {
+    const nextSmaller = heights.$3 ?? mdDesktop;
+    mdTouch = maxBelow + Math.max(mdDesktop - nextSmaller, 1);
+  }
+
+  const heightsTouch: Record<string, number> = {};
+  for (const token of tokens) {
+    const step = tokenSteps[token] ?? 0;
+    if (step < 0) {
+      heightsTouch[token] = floored[token];
+    } else if (step === 0) {
+      heightsTouch[token] = mdTouch;
+    } else {
+      heightsTouch[token] = Math.max(floored[token], mdTouch + (heights[token] - mdDesktop));
+    }
+  }
+  return heightsTouch;
+}
+
+export function generateSizeRecipeTables(
+  inputs: SizeRecipeInputs,
+  ratios: SizeRecipeRatios = inputs.ratios,
+): SizeRecipeTables {
+  const tokens = SIZE_RECIPE_TOKENS;
+  const heights: Record<string, number> = {};
+  for (const token of tokens) {
+    heights[token] = heightForToken(token, inputs);
+  }
+  if (inputs.tokenHeights?.$true == null) {
+    heights.$true = heights.$4;
+  }
+
+  const touchHeights = generateTouchHeights(heights, inputs, tokens);
+  const recipes: Record<string, SizeRecipe> = {};
+  const recipesTouch: Record<string, SizeRecipe> = {};
+  const boxVariants: Record<string, SizeRecipeBoxVariant> = {};
+  const typeVariants: Record<string, SizeRecipeTypeVariant> = {};
+  const iconVariants: Record<string, SizeRecipeIconVariant> = {};
+  const heightVariants: Record<string, { height: number }> = {};
+
+  for (const token of tokens) {
+    const recipe = sizeRecipeFromHeight(heights[token], ratios);
+    recipes[token] = recipe;
+    recipesTouch[token] = sizeRecipeFromHeight(touchHeights[token], ratios);
+    boxVariants[token] = {
+      height: recipe.height,
+      paddingHorizontal: recipe.paddingHorizontal,
+      gap: recipe.gap,
+    };
+    typeVariants[token] = { fontSize: recipe.fontSize };
+    iconVariants[token] = { width: recipe.iconSize, height: recipe.iconSize };
+    heightVariants[token] = { height: recipe.height };
+  }
+
+  return {
+    inputs,
+    ratios: { ...ratios },
+    heights,
+    touchHeights,
+    recipes,
+    recipesTouch,
+    boxVariants,
+    typeVariants,
+    iconVariants,
+    heightVariants,
+  };
+}
+
+export function createRecipeFamilies(
+  inputs: SizeRecipeInputs | Partial<SizeRecipeInputs> = {},
+): RecipeFamilies {
+  const resolved = cloneSizeRecipeInputs(resolveSizeRecipeInputs(inputs));
+  const control = generateSizeRecipeTables(resolved, resolved.ratios);
+  // Same heights as control; tighter pad/font/icon/gap via compactRatios
+  // (padX 8/32, font 13/32, icon 14/32, gap 4/32). Not a 28px family.
+  const controlCompact = generateSizeRecipeTables(resolved, resolved.compactRatios);
+  return {
+    control: { ...control, name: "control" },
+    controlCompact: { ...controlCompact, name: "controlCompact" },
+  };
+}
+
+export function generateSizeRecipes(partial: Partial<SizeRecipeInputs> = {}): GeneratedSizeRecipes {
+  const inputs = cloneSizeRecipeInputs(resolveSizeRecipeInputs(partial));
+  const families = createRecipeFamilies(inputs);
+  const control = families.control;
+  return {
+    inputs,
+    heights: control.heights,
+    heightsTouch: control.touchHeights,
+    recipes: control.recipes,
+    recipesTouch: control.recipesTouch,
+    boxVariants: control.boxVariants,
+    typeVariants: control.typeVariants,
+    iconVariants: control.iconVariants,
+    families,
+  };
+}

package/src/theme/recipes.ts

@@ -1,5 +1,6 @@
 import type { ColorTokens, FontSizeTokens, TransitionProp } from "tamagui";
 import type { Knobs } from "./knobs";
+import type { HitSlopInsets } from "./layoutTokens";
 
 // ── State knob prop types (by concern) ───────────────────────────────────
 
@@ -152,7 +153,40 @@ export interface KnobProps {
   panelPadding: { padding: string };
   gap: { gap: string };
   gapLg: { gap: string };
+  /**
+   * Size-recipe KEY (string "$4"), not a height scalar. styled() variants
+   * switch on this token; control internals read `control` / `controlType` /
+   * `controlIcon` (LC-65). Radius is not on the recipe.
+   */
   sizeToken: string;
+  /**
+   * Control-chrome type (labels, calendar digits, weekday headers). Paired
+   * to `size` so nested surfaces can step type with density. NEVER pass
+   * `sizeToken` as `fontSize` — that token is a control HEIGHT ($4 = 44px
+   * box), not a type step ($4 font = 14px).
+   */
+  label: { fontSize: FontSizeTokens; fontFamily: string; fontWeight: string };
+  /**
+   * Nested hit-target (calendar days, overlay chips): visual box BELOW the
+   * 44px floor, press restored with `hitSlop` (LC-54 / LC-71). Spread the
+   * box onto the painted cell; pass `hitSlop` to the press handler.
+   */
+  nestedControl: {
+    px: number;
+    width: number;
+    height: number;
+    minWidth: number;
+    maxWidth: number;
+    minHeight: number;
+    maxHeight: number;
+    hitSlop: HitSlopInsets;
+  };
+  /** Coordinated control box (height / padX / inner gap). Spread whole. */
+  control: { height: number; paddingHorizontal: number; gap: number };
+  /** Coordinated control type. Spread whole. */
+  controlType: { fontSize: number };
+  /** Coordinated control icon box. Spread whole. */
+  controlIcon: { width: number; height: number };
   heading: { fontFamily: string; fontWeight: string };
   /**
    * Page-title type step (D-11 hero-H1 dial) — the complete size fragment for

package/src/theme/resolveKnobs.spec.ts

@@ -51,6 +51,11 @@ const expectedKnobPropKeys: (keyof KnobProps)[] = [
   "gap",
   "gapLg",
   "sizeToken",
+  "label",
+  "nestedControl",
+  "control",
+  "controlType",
+  "controlIcon",
   "heading",
   "pageTitle",
   "body",
@@ -234,7 +239,11 @@ describe("resolveKnobs", () => {
   describe("elevation knob (native)", () => {
     it("emits RN-safe numbers, never token strings", async () => {
       vi.resetModules();
-      vi.doMock("@multiplatform.one/platform", () => ({ isWeb: false }));
+      vi.doMock("@multiplatform.one/platform", () => ({
+        isWeb: false,
+        isTouchable: false,
+        isWebTouchable: false,
+      }));
       const { resolveKnobs: resolveNative } = await import("./resolveKnobs");
       try {
         expect(resolveNative(knobsWith({ elevation: "none" })).knobProps.elevation).toBeUndefined();
@@ -385,6 +394,28 @@ describe("resolveKnobs", () => {
       expect(resolved.knobProps.panelPadding.padding).toBe("$4");
       expect(resolved.knobProps.gapLg.gap).toBe("$5");
     });
+
+    it("fills control / controlType / controlIcon from the size recipe", () => {
+      const { knobProps } = resolveKnobs(defaultKnobs);
+      expect(knobProps.control).toEqual({
+        height: 32,
+        paddingHorizontal: 12,
+        gap: 6,
+      });
+      expect(knobProps.controlType).toEqual({ fontSize: 14 });
+      expect(knobProps.controlIcon).toEqual({ width: 16, height: 16 });
+      expect(knobProps.control).not.toHaveProperty("borderRadius");
+      expect(knobProps.controlType).not.toHaveProperty("borderRadius");
+      expect(knobProps.controlIcon).not.toHaveProperty("borderRadius");
+    });
+
+    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.borderRadius).toEqual(large.knobProps.borderRadius);
+    });
   });
 
   // ── surface tiers ─────────────────────────────────────────
@@ -616,7 +647,11 @@ describe("resolveKnobs", () => {
     // no className may reach RN views regardless of the knob.
     it("native emits no class for either value", async () => {
       vi.resetModules();
-      vi.doMock("@multiplatform.one/platform", () => ({ isWeb: false }));
+      vi.doMock("@multiplatform.one/platform", () => ({
+        isWeb: false,
+        isTouchable: false,
+        isWebTouchable: false,
+      }));
       const { resolveKnobs: resolveNative } = await import("./resolveKnobs");
       try {
         for (const cornerSmoothing of ["round", "smooth"] as const) {
@@ -937,24 +972,24 @@ describe("applyDensity", () => {
     expect(applied.density).toBe("comfortable");
   });
 
-  it("compact density steps size and space down one level", () => {
+  it("compact density steps space down one level and leaves size unchanged", () => {
     expect(
       applyDensity(knobsWith({ size: "large", space: "large", density: "compact" })),
-    ).toMatchObject({ size: "medium", space: "medium", density: "compact" });
+    ).toMatchObject({ size: "large", space: "medium", density: "compact" });
     expect(
       applyDensity(knobsWith({ size: "medium", space: "medium", density: "compact" })),
-    ).toMatchObject({ size: "small", space: "small", density: "compact" });
+    ).toMatchObject({ size: "medium", space: "small", density: "compact" });
     expect(
       applyDensity(knobsWith({ size: "small", space: "small", density: "compact" })),
     ).toMatchObject({ size: "small", space: "small", density: "compact" });
   });
 
-  it("compact:true override wins over comfortable density knob", () => {
+  it("compact:true override wins over comfortable density knob without changing size", () => {
     const applied = applyDensity(
       knobsWith({ size: "medium", space: "medium", density: "comfortable" }),
       true,
     );
-    expect(applied).toMatchObject({ size: "small", space: "small", density: "compact" });
+    expect(applied).toMatchObject({ size: "medium", space: "small", density: "compact" });
   });
 
   it("compact:false override wins over compact density knob", () => {
@@ -970,17 +1005,42 @@ describe("applyDensity", () => {
     expect(resolveKnobs(knobsWith({ density: "compact" })).knobProps.density).toBe("compact");
   });
 
-  it("compact density produces smaller sizeToken and gap than comfortable", () => {
+  it("compact density produces the same sizeToken and a smaller gap than comfortable", () => {
     const comfortable = resolveKnobs(applyDensity(knobsWith({ size: "medium", space: "medium" })));
     const compact = resolveKnobs(
       applyDensity(knobsWith({ size: "medium", space: "medium", density: "compact" })),
     );
     expect(comfortable.knobProps.sizeToken).toBe("$4");
-    expect(compact.knobProps.sizeToken).toBe("$3");
+    expect(compact.knobProps.sizeToken).toBe("$4");
+    expect(compact.knobProps.control.height).toBe(comfortable.knobProps.control.height);
     expect(comfortable.knobProps.gap).toEqual({ gap: "$4" });
     expect(compact.knobProps.gap).toEqual({ gap: "$2" });
   });
 
+  it("pairs label type to size — never the control-height sizeToken", () => {
+    expect(resolveKnobs(knobsWith({ size: "small" })).knobProps.label.fontSize).toBe("$2");
+    expect(resolveKnobs(knobsWith({ size: "medium" })).knobProps.label.fontSize).toBe("$3");
+    expect(resolveKnobs(knobsWith({ size: "large" })).knobProps.label.fontSize).toBe("$4");
+    expect(resolveKnobs(defaultKnobs).knobProps.label.fontSize).not.toBe(
+      resolveKnobs(defaultKnobs).knobProps.sizeToken,
+    );
+  });
+
+  it("nestedControl paints below the 44px floor and restores press with hitSlop", () => {
+    const medium = resolveKnobs(knobsWith({ size: "medium" })).knobProps.nestedControl;
+    expect(medium.px).toBe(32);
+    expect(medium.width).toBe(32);
+    expect(medium.maxWidth).toBe(32);
+    expect(medium.hitSlop).toEqual({ top: 6, bottom: 6, left: 6, right: 6 });
+
+    const compact = resolveKnobs(applyDensity(knobsWith({ size: "medium", density: "compact" })))
+      .knobProps.nestedControl;
+    // Compact steps space only (LC-76) — nestedControl follows size, so
+    // medium+compact stays on the medium nested box.
+    expect(compact.px).toBe(32);
+    expect(compact.hitSlop).toEqual({ top: 6, bottom: 6, left: 6, right: 6 });
+  });
+
   it("compact density preserves house-decision knobs", () => {
     const knobs = knobsWith({
       density: "compact",
@@ -1152,3 +1212,25 @@ describe("disabledState recipe (LC-40)", () => {
     }
   });
 });
+
+describe("LC-67 touch height floor via resolveKnobs", () => {
+  it("paints control.height >= 44 when isTouchable", async () => {
+    vi.resetModules();
+    vi.doMock("@multiplatform.one/platform", () => ({
+      isWeb: true,
+      isTouchable: true,
+      isWebTouchable: true,
+    }));
+    const { resolveKnobs: resolveTouch } = await import("./resolveKnobs");
+    try {
+      const small = resolveTouch(knobsWith({ size: "small" }));
+      const medium = resolveTouch(knobsWith({ size: "medium" }));
+      expect(small.knobProps.control.height).toBeGreaterThanOrEqual(44);
+      expect(medium.knobProps.control.height).toBeGreaterThanOrEqual(44);
+      expect(medium.knobProps.control.height).toBeGreaterThan(small.knobProps.control.height);
+    } finally {
+      vi.doUnmock("@multiplatform.one/platform");
+      vi.resetModules();
+    }
+  });
+});

package/src/theme/resolveKnobs.ts

@@ -1,4 +1,4 @@
-import { isWeb } from "@multiplatform.one/platform";
+import { isTouchable, isWeb, isWebTouchable } from "@multiplatform.one/platform";
 import type { FontSizeTokens, TransitionProp } from "tamagui";
 // Importing the class constant also mounts the corner-shape stylesheet at
 // theme load (web only, idempotent) — see cornerSmoothing.ts.
@@ -10,6 +10,7 @@ import {
   withDefaultStateLayer,
 } from "./focusState";
 import type { CornerSmoothing, Knobs, PageTitleScale, StateKnobs } from "./knobs";
+import { pressTargetHitSlop } from "./layoutTokens";
 import type {
   ControlStateProps,
   DisabledRecipe,
@@ -20,10 +21,14 @@ import type {
   ResolvedKnobs,
   TextStateProps,
 } from "./recipes";
+import { sizeRecipeForToken } from "./sizeRecipes";
 
 // ── Density (compact) stepping ────────────────────────────────
 
-/** Step size down one level for compact density. */
+/**
+ * @deprecated Size is no longer coupled to density (LC-76). Compact density
+ * steps space only. Kept exported because figmaTokens historically imported it.
+ */
 export const compactSizeMap: Record<Knobs["size"], Knobs["size"]> = {
   small: "small",
   medium: "small",
@@ -40,9 +45,10 @@ export const compactSpaceMap: Record<Knobs["space"], Knobs["space"]> = {
 /**
  * Apply density mode to knobs before token resolution.
  *
- * - `density: "compact"` steps size + space down one level.
+ * - `density: "compact"` steps **space only** (`compactSpaceMap`). Size is an
+ *   independent axis (LC-76) — compact must not shrink controls.
  * - `compactOverride` wins over the density knob when provided:
- *   `true` forces compact stepping; `false` forces comfortable (no step).
+ *   `true` forces compact space stepping; `false` forces comfortable (no step).
  */
 export function applyDensity(knobs: Knobs, compactOverride?: boolean): Knobs {
   const useCompact = compactOverride !== undefined ? compactOverride : knobs.density === "compact";
@@ -52,7 +58,6 @@ export function applyDensity(knobs: Knobs, compactOverride?: boolean): Knobs {
   return {
     ...knobs,
     density: "compact",
-    size: compactSizeMap[knobs.size],
     space: compactSpaceMap[knobs.space],
   };
 }
@@ -180,6 +185,24 @@ const sizeTokenMap = {
   large: "$5",
 } as const;
 
+/** Control-chrome type — one step below the matching sizeToken height. */
+const labelFontSizeMap = {
+  small: "$2",
+  medium: "$3",
+  large: "$4",
+} as const;
+
+/**
+ * Painted size for nested hit-targets (calendar days). Always below the
+ * 44px floor; press is restored with hitSlop. Steps with `size` (compact
+ * density steps space only — LC-76 — so nested chrome follows the size axis).
+ */
+const nestedControlPxMap = {
+  small: 28,
+  medium: 32,
+  large: 36,
+} as const;
+
 const headingFontMap = {
   "sans-serif": "$heading",
   serif: "$serif",
@@ -340,6 +363,11 @@ export function resolveKnobs(knobs: Knobs, override?: KnobPropsOverride): Resolv
   const outerRadiusToken = outerRadiusMap[knobs.borderRadius];
   const borderWidthValue = borderWidthMap[knobs.borderWidth];
   const sizeToken = sizeTokenMap[knobs.size];
+  const nestedPx = nestedControlPxMap[knobs.size];
+  const nestedHitSlop = pressTargetHitSlop(nestedPx);
+  const sizeRecipe = sizeRecipeForToken(sizeToken, {
+    touch: isTouchable || isWebTouchable,
+  });
   const paddingToken = panelPaddingMap[knobs.space];
   const gapToken = gapMap[knobs.space];
   const fontWeightValue = fontWeightMap[knobs.fontWeight];
@@ -451,6 +479,28 @@ export function resolveKnobs(knobs: Knobs, override?: KnobPropsOverride): Resolv
     gap: { gap: gapToken },
     gapLg: { gap: gapLgMap[knobs.space] },
     sizeToken,
+    label: {
+      fontSize: labelFontSizeMap[knobs.size],
+      fontFamily: bodyFontValue,
+      fontWeight: fontWeightValue,
+    },
+    nestedControl: {
+      px: nestedPx,
+      width: nestedPx,
+      height: nestedPx,
+      minWidth: nestedPx,
+      maxWidth: nestedPx,
+      minHeight: nestedPx,
+      maxHeight: nestedPx,
+      hitSlop: nestedHitSlop,
+    },
+    control: {
+      height: sizeRecipe.height,
+      paddingHorizontal: sizeRecipe.paddingHorizontal,
+      gap: sizeRecipe.gap,
+    },
+    controlType: { fontSize: sizeRecipe.fontSize },
+    controlIcon: { width: sizeRecipe.iconSize, height: sizeRecipe.iconSize },
     heading: {
       fontFamily: headingFontMap[knobs.headingFont],
       fontWeight: fontWeightValue,