@multiplatform.one/theme 6.7.0 → 7.1.0

package/src/theme/shared.tsx

@@ -3,6 +3,7 @@ import { type CreateTamaguiProps, createTamagui } from "tamagui";
 import type { Knobs } from "./knobs";
 import { defaultKnobs } from "./knobs";
 import type { Preset } from "./preset.types";
+import type { RecipeFamilies, RecipeInputs } from "./recipeInputs";
 
 // ── Preset registry ───────────────────────────────────────────────────────
 
@@ -83,6 +84,12 @@ export type ThemeConfig<T extends CreateTamaguiProps = CreateTamaguiProps> = {
    * time so consumers don't need to introspect the Tamagui config.
    */
   themeColors: string[];
+  /**
+   * Size-recipe inputs + generated families (LC-70). Orthogonal to Tamagui
+   * `themes` (those are color palettes from createThemes / theme-builder).
+   */
+  recipeInputs?: RecipeInputs;
+  recipeFamilies?: RecipeFamilies;
 };
 
 /**
@@ -124,6 +131,8 @@ export function createThemeConfig<T extends CreateTamaguiProps>(
   options?: {
     presets?: Record<string, Preset>;
     defaultPreset?: string;
+    recipeInputs?: RecipeInputs;
+    recipeFamilies?: RecipeFamilies;
   },
 ): ThemeConfig<T> {
   // Extract color names from the raw themes BEFORE createTamagui processes them.
@@ -151,5 +160,7 @@ export function createThemeConfig<T extends CreateTamaguiProps>(
     presets: options?.presets,
     defaultPreset: options?.defaultPreset,
     themeColors,
+    recipeInputs: options?.recipeInputs,
+    recipeFamilies: options?.recipeFamilies,
   };
 }

package/src/theme/sizeRecipes.spec.ts

@@ -0,0 +1,296 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { defaultKnobs } from "./knobs";
+import type { Knobs } from "./knobs";
+import { resolveKnobs } from "./resolveKnobs";
+import {
+  DEFAULT_SIZE_RECIPE_INPUTS,
+  SIZE_RECIPE_COMPACT_RATIOS,
+  SIZE_RECIPE_HEIGHTS,
+  SIZE_RECIPE_HEIGHTS_TOUCH,
+  SIZE_RECIPE_RATIOS,
+  applyTouchFloor,
+  defaultRecipeInputs,
+  generateSizeRecipeTables,
+  generateSizeRecipes,
+  getSizeRecipeFamily,
+  recipeFamilies,
+  setSizeRecipeInputs,
+  sizeRecipeBoxVariants,
+  sizeRecipeEscape,
+  sizeRecipeForToken,
+  sizeRecipeFromHeight,
+  sizeRecipeIconVariants,
+  sizeRecipes,
+  sizeRecipeTypeVariants,
+  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) {
+  expect(value).not.toHaveProperty("radius");
+  expect(value).not.toHaveProperty("borderRadius");
+}
+
+describe("size recipes", () => {
+  it("medium / $4 matches the 32/12/14/16/6 reference", () => {
+    const recipe = sizeRecipes.$4;
+    expect(recipe).toEqual({
+      height: 32,
+      paddingHorizontal: 12,
+      fontSize: 14,
+      iconSize: 16,
+      gap: 6,
+    });
+    expect(sizeRecipeFromHeight(32)).toEqual(recipe);
+    expect(sizeRecipeForToken("$4")).toEqual(recipe);
+    expect(SIZE_RECIPE_HEIGHTS.$4).toBe(32);
+    expect(SIZE_RECIPE_RATIOS).toEqual({
+      padX: 12 / 32,
+      font: 14 / 32,
+      icon: 16 / 32,
+      gap: 6 / 32,
+    });
+  });
+
+  it("$true equals $4", () => {
+    expect(sizeRecipes.$true).toEqual(sizeRecipes.$4);
+    expect(SIZE_RECIPE_HEIGHTS.$true).toBe(SIZE_RECIPE_HEIGHTS.$4);
+    expect(sizeRecipeForToken("$true")).toEqual(sizeRecipeForToken("$4"));
+  });
+
+  it("radius is not on the recipe or any variant object", () => {
+    expectNoRadius(sizeRecipes.$4);
+    expectNoRadius(sizeRecipeFromHeight(32));
+    expectNoRadius(sizeRecipeForToken("$4"));
+    for (const token of RECIPE_KEYS) {
+      expectNoRadius(sizeRecipes[token]);
+      expectNoRadius(sizeRecipeBoxVariants[token]);
+      expectNoRadius(sizeRecipeTypeVariants[token]);
+      expectNoRadius(sizeRecipeIconVariants[token]);
+    }
+  });
+
+  it("static variants match sizeRecipeFromHeight for every token", () => {
+    for (const token of RECIPE_KEYS) {
+      const recipe = sizeRecipeFromHeight(SIZE_RECIPE_HEIGHTS[token]);
+      expect(sizeRecipes[token]).toEqual(recipe);
+      expect(sizeRecipeBoxVariants[token]).toEqual({
+        height: recipe.height,
+        paddingHorizontal: recipe.paddingHorizontal,
+        gap: recipe.gap,
+      });
+      expect(sizeRecipeTypeVariants[token]).toEqual({ fontSize: recipe.fontSize });
+      expect(sizeRecipeIconVariants[token]).toEqual({
+        width: recipe.iconSize,
+        height: recipe.iconSize,
+      });
+    }
+  });
+
+  it("sizeRecipeForToken falls back to $4", () => {
+    expect(sizeRecipeForToken("nope")).toEqual(sizeRecipes.$4);
+    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" }));
+    const smallRecipe = sizeRecipeForToken(small.knobProps.sizeToken);
+    const largeRecipe = sizeRecipeForToken(large.knobProps.sizeToken);
+
+    expect(small.knobProps.sizeToken).toBe("$3");
+    expect(large.knobProps.sizeToken).toBe("$5");
+    expect(smallRecipe.height).not.toBe(largeRecipe.height);
+    expect(smallRecipe.paddingHorizontal).not.toBe(largeRecipe.paddingHorizontal);
+    expect(smallRecipe.fontSize).not.toBe(largeRecipe.fontSize);
+    expect(smallRecipe.iconSize).not.toBe(largeRecipe.iconSize);
+    expect(smallRecipe.gap).not.toBe(largeRecipe.gap);
+
+    expect(small.knobProps.control).toEqual({
+      height: smallRecipe.height,
+      paddingHorizontal: smallRecipe.paddingHorizontal,
+      gap: smallRecipe.gap,
+    });
+    expect(large.knobProps.control).toEqual({
+      height: largeRecipe.height,
+      paddingHorizontal: largeRecipe.paddingHorizontal,
+      gap: largeRecipe.gap,
+    });
+    expect(small.knobProps.controlType).toEqual({ fontSize: smallRecipe.fontSize });
+    expect(large.knobProps.controlType).toEqual({ fontSize: largeRecipe.fontSize });
+    expect(small.knobProps.controlIcon).toEqual({
+      width: smallRecipe.iconSize,
+      height: smallRecipe.iconSize,
+    });
+    expect(large.knobProps.controlIcon).toEqual({
+      width: largeRecipe.iconSize,
+      height: largeRecipe.iconSize,
+    });
+
+    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");
+    expect(knobProps.control.gap).toBe(sizeRecipes.$4.gap);
+  });
+  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, 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);
+    expectNoRadius(applyTouchFloor(desktop, true));
+  });
+});
+
+describe("SizeRecipe shape", () => {
+  it("has no radius field on the type-level contract", () => {
+    const recipe: SizeRecipe = sizeRecipes.$4;
+    const keys = Object.keys(recipe).sort();
+    expect(keys).toEqual(["fontSize", "gap", "height", "iconSize", "paddingHorizontal"]);
+  });
+});
+
+describe("generateSizeRecipes (LC-70)", () => {
+  afterEach(() => {
+    setSizeRecipeInputs();
+  });
+
+  it("DEFAULT $4 is 32/12/14/16/6 with no radius", () => {
+    const generated = generateSizeRecipes(DEFAULT_SIZE_RECIPE_INPUTS);
+    expect(generated.recipes.$4).toEqual({
+      height: 32,
+      paddingHorizontal: 12,
+      fontSize: 14,
+      iconSize: 16,
+      gap: 6,
+    });
+    expectNoRadius(generated.recipes.$4);
+    expectNoRadius(generated.boxVariants.$4);
+    expect(generated.inputs.radiusPx).toBe(6);
+    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,
+    });
+    expect(generated.heightsTouch).toEqual({
+      $1: 44,
+      "$1.5": 44,
+      $2: 44,
+      "$2.5": 44,
+      $3: 44,
+      "$3.5": 44,
+      $4: 48,
+      $true: 48,
+      $5: 56,
+      $6: 64,
+    });
+    expect(generateSizeRecipeTables(defaultRecipeInputs).touchHeights).toEqual(generated.heightsTouch);
+    expect(SIZE_RECIPE_HEIGHTS_TOUCH.$4).toBe(48);
+  });
+
+  it("baseHeight: 40 without tokenHeights regenerates $4 and keeps $5 distinct", () => {
+    const generated = generateSizeRecipes({ baseHeight: 40 });
+    expect(generated.inputs.tokenHeights).toBeUndefined();
+    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)),
+    });
+    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", () => {
+    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.controlCompact.recipes.$4.paddingHorizontal).toBeLessThan(
+      generated.families.control.recipes.$4.paddingHorizontal,
+    );
+  });
+
+  it("radiusPx stays on inputs, never on recipes or variants", () => {
+    const generated = generateSizeRecipes({ radiusPx: 10 });
+    expect(generated.inputs.radiusPx).toBe(10);
+    expectNoRadius(generated.recipes.$4);
+    expectNoRadius(generated.recipesTouch.$4);
+    expectNoRadius(generated.boxVariants.$4);
+    expectNoRadius(generated.families.controlCompact.recipes.$4);
+  });
+
+  it("setSizeRecipeInputs({ baseHeight }) regenerates live tables from stepRatio", () => {
+    setSizeRecipeInputs({ baseHeight: 36 });
+    expect(SIZE_RECIPE_HEIGHTS.$4).toBe(36);
+    expect(sizeRecipes.$4.height).toBe(36);
+    expect(sizeRecipeForToken("$4").height).toBe(36);
+    expect(sizeRecipeBoxVariants.$4.height).toBe(36);
+    expect(recipeFamilies.control.heightVariants.$4.height).toBe(36);
+  });
+
+  it("aliases are the generated control family", () => {
+    expect(sizeRecipeBoxVariants).toBe(recipeFamilies.control.boxVariants);
+    expect(sizeRecipes).toBe(recipeFamilies.control.recipes);
+    expect(sizeRecipeTypeVariants).toBe(recipeFamilies.control.typeVariants);
+    expect(sizeRecipeIconVariants).toBe(recipeFamilies.control.iconVariants);
+    expect(SIZE_RECIPE_HEIGHTS).toBe(recipeFamilies.control.heights);
+  });
+
+  it("sizeRecipeEscape is identity", () => {
+    expect(sizeRecipeEscape(32)).toBe(32);
+    expect(sizeRecipeEscape("keep")).toBe("keep");
+  });
+});
+
+describe("size recipe families", () => {
+  it("control family matches the sizeRecipeBoxVariants default", () => {
+    const control = generateSizeRecipes().families.control;
+    expect(getSizeRecipeFamily("control")).toEqual(control);
+    for (const token of RECIPE_KEYS) {
+      expect(control.boxVariants[token]).toEqual(sizeRecipeBoxVariants[token]);
+      expect(control.heightVariants[token]).toEqual({ height: SIZE_RECIPE_HEIGHTS[token] });
+    }
+    expect(control.boxVariants.$4).toEqual({
+      height: 32,
+      paddingHorizontal: 12,
+      gap: 6,
+    });
+  });
+
+  it("controlCompact keeps height and tightens padX", () => {
+    const compact = getSizeRecipeFamily("controlCompact");
+    const control = getSizeRecipeFamily("control");
+    expect(compact.ratios).toEqual(SIZE_RECIPE_COMPACT_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(8);
+    expect(compact.boxVariants.$4.gap).toBe(4);
+    expect(sizeRecipeForToken("$4", { family: "controlCompact" })).toEqual(compact.recipes.$4);
+  });
+});

package/src/theme/sizeRecipes.ts

@@ -0,0 +1,198 @@
+/**
+ * Coordinated control-size recipes (LC-65 SIZE-RECIPE, LC-70 RECIPE-INPUTS).
+ *
+ * A flat size ramp cannot encode relationships: padding, font, and icon
+ * must stay in ratio with height. Radius is excluded — it stays on the
+ * borderRadius knob and must never scale with size.
+ *
+ * Tables are GENERATED from `defaultRecipeInputs` at module eval (Tamagui
+ * 2.0.0-rc.41 flattens `styled(View, { variants: { size: tables } })` when
+ * the second arg is an object literal and generate ran at module eval).
+ * Do NOT pass a function as styled()'s second argument. Functional
+ * `"...size": (val) =>` stays runtime unless JSX flattens a static size —
+ * reserve it for non-enumerable values only. Do NOT put recipe tables on a
+ * `createStyledContext` primitive (`neverFlatten`).
+ *
+ * Reference md ($4 / $true): height 32, padX 12, font 14, icon 16, gap 6.
+ * `sizeToken` remains the recipe KEY (string "$4") so styled() variants
+ * can switch; it is not a height scalar.
+ *
+ * Families: `control` uses `inputs.ratios`. `controlCompact` uses
+ * `compactRatios` at the SAME heights (tighter pad/font/icon/gap).
+ *
+ * On touch (LC-67), `applyTouchFloor` / `sizeRecipeForToken(token, { touch: true })`
+ * lift painted height to ≥ 44 while pad/font/icon stay in ratio. Static
+ * `sizeRecipe*Variants` stay on the desktop table — runtime fragments
+ * carry the floor; consumers spread `knobProps.control` after `size`.
+ */
+
+export {
+  DEFAULT_SIZE_RECIPE_INPUTS,
+  SIZE_RECIPE_TOKENS,
+  SIZE_TOKEN_EXPONENTS,
+  TOUCH_HEIGHT_FLOOR,
+  cloneSizeRecipeInputs,
+  createRecipeFamilies,
+  defaultRecipeInputs,
+  defaultSizeFactors,
+  generateSizeRecipeTables,
+  generateSizeRecipes,
+  mergeRecipeInputs,
+  resolveSizeRecipeInputs,
+} from "./recipeInputs";
+export type {
+  GeneratedSizeRecipes,
+  RecipeFamilies,
+  RecipeFamilyName,
+  RecipeInputs,
+  SizeRecipe,
+  SizeRecipeBoxVariant,
+  SizeRecipeFamily,
+  SizeRecipeFamilyName,
+  SizeRecipeIconVariant,
+  SizeRecipeInputs,
+  SizeRecipeRatios,
+  SizeRecipeTables,
+  SizeRecipeToken,
+  SizeRecipeTypeVariant,
+} from "./recipeInputs";
+
+import {
+  defaultRecipeInputs,
+  generateSizeRecipes,
+  sizeRecipeFromHeight as recipeFromHeight,
+  type GeneratedSizeRecipes,
+  type RecipeFamilyName,
+  type RecipeInputs,
+  type SizeRecipe,
+  type SizeRecipeFamily,
+  type SizeRecipeToken,
+} from "./recipeInputs";
+
+function replaceRecord(target: Record<string, unknown>, source: Record<string, unknown>): void {
+  for (const key of Object.keys(target)) {
+    if (!Object.hasOwn(source, key)) delete target[key];
+  }
+  Object.assign(target, source);
+}
+
+function adoptFamily(target: SizeRecipeFamily, source: SizeRecipeFamily): void {
+  Object.assign(target.ratios, source.ratios);
+  target.inputs = { ...source.inputs, ratios: target.ratios };
+  replaceRecord(target.heights, source.heights);
+  replaceRecord(target.touchHeights, source.touchHeights);
+  replaceRecord(target.recipes, source.recipes);
+  replaceRecord(target.recipesTouch, source.recipesTouch);
+  replaceRecord(target.boxVariants, source.boxVariants);
+  replaceRecord(target.typeVariants, source.typeVariants);
+  replaceRecord(target.iconVariants, source.iconVariants);
+  replaceRecord(target.heightVariants, source.heightVariants);
+}
+
+const initial = generateSizeRecipes(defaultRecipeInputs);
+let current: GeneratedSizeRecipes = initial;
+
+/**
+ * Module-eval default families. `styled()` variants MUST spread these
+ * objects (or `sizeRecipeBoxVariants`) — not a function — so rc.41 can flatten.
+ */
+export const recipeFamilies = initial.families;
+
+/** Back-compat aliases of `recipeFamilies.control` (generated, not handwritten). */
+export const sizeRecipes = recipeFamilies.control.recipes;
+export const sizeRecipeBoxVariants = recipeFamilies.control.boxVariants;
+export const sizeRecipeTypeVariants = recipeFamilies.control.typeVariants;
+export const sizeRecipeIconVariants = recipeFamilies.control.iconVariants;
+export const SIZE_RECIPE_HEIGHTS = recipeFamilies.control.heights;
+export const SIZE_RECIPE_HEIGHTS_TOUCH = recipeFamilies.control.touchHeights;
+export const SIZE_RECIPE_RATIOS = recipeFamilies.control.ratios;
+export const SIZE_RECIPE_COMPACT_RATIOS = recipeFamilies.controlCompact.ratios;
+
+export const SIZE_RECIPE_FAMILY_NAMES = ["control", "controlCompact"] as const;
+
+function adoptGenerated(next: GeneratedSizeRecipes): GeneratedSizeRecipes {
+  adoptFamily(recipeFamilies.control, next.families.control);
+  adoptFamily(recipeFamilies.controlCompact, next.families.controlCompact);
+  current = {
+    ...next,
+    heights: SIZE_RECIPE_HEIGHTS,
+    heightsTouch: SIZE_RECIPE_HEIGHTS_TOUCH,
+    recipes: sizeRecipes,
+    recipesTouch: recipeFamilies.control.recipesTouch,
+    boxVariants: sizeRecipeBoxVariants,
+    typeVariants: sizeRecipeTypeVariants,
+    iconVariants: sizeRecipeIconVariants,
+    families: recipeFamilies,
+  };
+  return current;
+}
+
+/** Merge `partial` over defaultRecipeInputs (not the previous override) and rewrite live tables. */
+export function setSizeRecipeInputs(partial: Partial<RecipeInputs> = {}): GeneratedSizeRecipes {
+  return adoptGenerated(generateSizeRecipes(partial));
+}
+
+export function getSizeRecipeInputs(): RecipeInputs {
+  return { ...current.inputs, ratios: { ...current.inputs.ratios } };
+}
+
+export function getGeneratedSizeRecipes(): GeneratedSizeRecipes {
+  return current;
+}
+
+export function getSizeRecipeFamily(name: RecipeFamilyName = "control"): SizeRecipeFamily {
+  return recipeFamilies[name] ?? recipeFamilies.control;
+}
+
+export function sizeRecipeFromHeight(
+  height: number,
+  ratios: RecipeInputs["ratios"] = current.inputs.ratios,
+): SizeRecipe {
+  return recipeFromHeight(height, ratios);
+}
+
+function resolveFamily(family?: RecipeFamilyName | SizeRecipeFamily): SizeRecipeFamily {
+  if (family && typeof family === "object") return family;
+  return recipeFamilies[family ?? "control"] ?? recipeFamilies.control;
+}
+
+export function applyTouchFloor(
+  recipe: SizeRecipe,
+  touch: boolean,
+  family?: RecipeFamilyName | SizeRecipeFamily,
+): SizeRecipe {
+  if (!touch) return recipe;
+  const tables = resolveFamily(family);
+  const token = (Object.keys(tables.heights) as SizeRecipeToken[]).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,
+  );
+}
+
+export function sizeRecipeForToken(
+  token: string,
+  options?: { touch?: boolean; family?: RecipeFamilyName | SizeRecipeFamily },
+): SizeRecipe {
+  const tables = resolveFamily(options?.family);
+  const table = options?.touch ? tables.recipesTouch : tables.recipes;
+  if (Object.hasOwn(table, token)) return table[token as SizeRecipeToken];
+  return table.$4;
+}
+
+/**
+ * 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:
+ *
+ *   height={sizeRecipeEscape(20)}
+ *
+ * Or comment `// size-recipe-escape:` on the previous line or same
+ * statement. Pilot: Button/, InputParts/, fields/Select/.
+ */
+export function sizeRecipeEscape<T>(value: T): T {
+  return value;
+}