@multiplatform.one/theme 7.34.3 → 7.35.0

package/src/theme/cookiesPersistence.spec.ts

@@ -57,16 +57,16 @@ describe("persistPresetOverrides / loadPresetOverrides", () => {
 
   it("chunks oversized overrides across multiple cookies and reassembles them", () => {
     const bigValue = "x".repeat(8000);
-    persistPresetOverrides({ animation: bigValue } as unknown as Partial<Knobs>);
+    persistPresetOverrides({ headingFont: bigValue } as unknown as Partial<Knobs>);
     // The serialized JSON exceeds the 3.5 KB split threshold → several chunks.
     expect(document.cookie).toContain(`${cookieOverridesPrefix}.0=`);
     expect(document.cookie).toContain(`${cookieOverridesPrefix}.1=`);
-    expect(loadPresetOverrides()).toEqual({ animation: bigValue });
+    expect(loadPresetOverrides()).toEqual({ headingFont: bigValue });
   });
 
   it("cleans up stale chunk cookies when the payload shrinks", () => {
     const bigValue = "y".repeat(8000);
-    persistPresetOverrides({ animation: bigValue } as unknown as Partial<Knobs>);
+    persistPresetOverrides({ headingFont: bigValue } as unknown as Partial<Knobs>);
     persistPresetOverrides({ borderRadius: "small" } as Partial<Knobs>);
     expect(loadPresetOverrides()).toEqual({ borderRadius: "small" });
     expect(document.cookie).not.toContain(`${cookieOverridesPrefix}.1=`);
@@ -74,9 +74,9 @@ describe("persistPresetOverrides / loadPresetOverrides", () => {
 
   it("reads from a raw cookie map (SSR) without touching the document", () => {
     const raw = {
-      [`${cookieOverridesPrefix}.0`]: JSON.stringify({ space: "large" }),
+      [`${cookieOverridesPrefix}.0`]: JSON.stringify({ elevation: "large" }),
     };
-    expect(loadPresetOverrides(raw)).toEqual({ space: "large" });
+    expect(loadPresetOverrides(raw)).toEqual({ elevation: "large" });
   });
 
   it("treats corrupted cookie JSON as no overrides", () => {

package/src/theme/createDefaultThemeConfig.spec.ts

@@ -26,10 +26,16 @@ import {
   defaultConfig as v5DefaultConfig,
   mediaQueryDefaultActive as v5MediaQueryDefaultActive,
 } from "@tamagui/config/v5";
-import { tokens as v5Tokens } from "@tamagui/themes/v5";
+import { tokens as v5Tokens, themes as stockThemes } from "@tamagui/themes/v5";
 import { contrastRatio, minContrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
 import { TAMAGUI_ERA, createDefaultThemeConfig } from "./createDefaultThemeConfig";
-import type { GetThemeProps } from "./createThemes";
+import { generateScale } from "./scale/generateScale";
+import { defaultScaleInputs, v5ScaleInputs } from "./scale/scaleInputs";
+import { DEFAULT_SCALE_ID } from "./scale/themeScales";
+import { createTamagui } from "tamagui";
+import { boldPreset, densePreset, heroPreset, roomyPreset } from "./presets";
+import { createThemesBuilder, type GetThemeProps } from "./createThemes";
+import { defaultBaseTheme, defaultAccentTheme } from "./defaults";
 import { setSizeRecipeInputs } from "./sizeRecipes";
 
 // Mirrors the shc app theme config: a consumer getTheme written against the
@@ -122,25 +128,25 @@ describe("createDefaultThemeConfig — builderOptions.getTheme composition (DF-0
     }
   });
 
-  it("recipeInputs: { baseHeight: 40 } regenerates the control family on ThemeConfig, not color themes", () => {
+  it("recipeInputs: { control: 40 } regenerates the control family on ThemeConfig, not color themes", () => {
     const config = createDefaultThemeConfig({
-      recipeInputs: { baseHeight: 40 },
+      recipeInputs: { control: 40 },
     });
     expect(config.recipeFamilies?.control.boxVariants.$4.height).toBe(40);
     expect(config.recipeFamilies?.control.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(config.recipeInputs?.baseHeight).toBe(40);
+    expect(config.recipeInputs?.control).toBe(40);
     const themes = (config.tamagui as unknown as { themes: RawThemes }).themes;
     for (const [name, theme] of Object.entries(themes)) {
-      expect(theme, name).not.toHaveProperty("baseHeight");
+      expect(theme, name).not.toHaveProperty("control");
       expect(theme, name).not.toHaveProperty("radiusPx");
       expect(theme, name).not.toHaveProperty("paddingHorizontal");
-      expect(theme, name).not.toHaveProperty("sizeFactors");
+      expect(theme, name).not.toHaveProperty("tokenHeights");
     }
   });
 
@@ -152,7 +158,7 @@ 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(44);
+    expect(config.recipeFamilies?.control.boxVariants.$4.height).toBe(40);
   });
 
   it("registers serif so headingFont can resolve a family without a per-app font map", () => {
@@ -234,25 +240,181 @@ describe("createDefaultThemeConfig — Tamagui era pin (MPO-19 X13 / W0-era-pin)
     expect(config.tamagui.settings.mediaQueryDefaultActive).toEqual(v5MediaQueryDefaultActive);
   });
 
-  it("resolves v5 token values exactly for every non-color group", () => {
+  it("the generator reproduces v5 token values exactly for every non-color group", () => {
     const groups = ["size", "space", "radius", "zIndex"] as const;
     for (const group of groups) {
-      const resolved = tokenGroupValues(config.tamagui.tokens, group);
+      const resolved = tokenGroupValues(generateScale(v5ScaleInputs).tokens, group);
       const v5 = tokenGroupValues(v5Tokens as unknown as RawTokens, group);
       expect(Object.keys(v5).length, `${group} group present in v5`).toBeGreaterThan(0);
       expect(resolved, `tokens.${group}`).toEqual(v5);
     }
   });
 
-  it("anchors radius.true at 9, the v5 base radius", () => {
+  it("installs the house default scale tokens", () => {
+    expect(config.tamagui.tokens).toEqual(generateScale(defaultScaleInputs).tokens);
+    expect(tokenGroupValues(config.tamagui.tokens, "space").true).toBe(16);
+  });
+
+  it("anchors radius.true at 8, the house base radius", () => {
     const radius = tokenGroupValues(config.tamagui.tokens, "radius");
-    expect(radius.true).toBe(9);
-    expect(radius["4"]).toBe(9);
+    expect(radius.true).toBe(8);
+    expect(radius["4"]).toBe(8);
   });
 
-  it("anchors size.true at 44, the v5 base control height", () => {
+  it("anchors size.true at 40, the house base control height", () => {
     const size = tokenGroupValues(config.tamagui.tokens, "size");
-    expect(size.true).toBe(44);
-    expect(size["4"]).toBe(44);
+    expect(size.true).toBe(40);
+    expect(size["4"]).toBe(40);
+  });
+});
+
+describe("createDefaultThemeConfig — preset scales (FZ-7158 WP-a2)", () => {
+  const presets = { hero: heroPreset, bold: boldPreset, dense: densePreset, roomy: roomyPreset };
+
+  it("keys one scale per preset name and shares entries across equal inputs", () => {
+    const config = createDefaultThemeConfig({ presets });
+    const scales = config.scales ?? {};
+    expect(Object.keys(scales).sort()).toEqual([
+      "bold",
+      DEFAULT_SCALE_ID,
+      "dense",
+      "hero",
+      "roomy",
+    ]);
+    expect(scales.hero).toBe(scales[DEFAULT_SCALE_ID]);
+    expect(scales.bold).toBe(scales[DEFAULT_SCALE_ID]);
+    expect(scales.dense?.id).toBe("dense");
+    expect(scales.roomy?.id).toBe("roomy");
+    expect(scales[DEFAULT_SCALE_ID]?.presets).toEqual([DEFAULT_SCALE_ID, "hero", "bold"]);
+  });
+
+  it("reuses the base config for the default scale and builds the others only when asked", () => {
+    const build = vi.mocked(createTamagui);
+    build.mockClear();
+    const config = createDefaultThemeConfig({ presets });
+    expect(build).toHaveBeenCalledTimes(1);
+    expect(config.scales?.[DEFAULT_SCALE_ID]?.tamagui()).toBe(config.tamagui);
+    expect(build).toHaveBeenCalledTimes(1);
+
+    const dense = config.scales?.dense?.tamagui();
+    expect(build).toHaveBeenCalledTimes(2);
+    expect(config.scales?.dense?.tamagui()).toBe(dense);
+    expect(build).toHaveBeenCalledTimes(2);
+  });
+
+  it("builds a scale config from the same props with only its tokens and fonts swapped", () => {
+    const config = createDefaultThemeConfig({ presets });
+    const base = config.tamagui as unknown as Record<string, unknown>;
+    const dense = config.scales?.dense?.tamagui() as unknown as Record<string, unknown>;
+    expect(dense.themes).toBe(base.themes);
+    expect(dense.settings).toBe(base.settings);
+    expect(dense.media).toBe(base.media);
+    expect(dense.tokens).toEqual(generateScale({ control: 36, type: 14 }).tokens);
+    const fonts = dense.fonts as Record<string, { size: Record<string, number> }>;
+    expect(fonts.body.size.true).toBe(14);
+    expect(fonts.heading.size["4"]).toBe(
+      generateScale({ control: 36, type: 14 }).fonts.headingSizes[4],
+    );
+    expect(Object.keys(fonts).sort()).toEqual(Object.keys(base.fonts as object).sort());
+  });
+
+  it("derives each scale's recipe inputs from its own tokens", () => {
+    const config = createDefaultThemeConfig({ presets });
+    expect(config.scales?.dense?.recipeInputs.tokenHeights.$4).toBe(36);
+    expect(config.scales?.roomy?.recipeInputs.tokenHeights.$4).toBe(48);
+    expect(config.scales?.[DEFAULT_SCALE_ID]?.recipeInputs).toEqual(config.recipeInputs);
+  });
+});
+
+describe("the v5 theme matrix", () => {
+  const config = createDefaultThemeConfig();
+  const themes = config.tamagui.themes as unknown as RawThemes;
+
+  it("binds the v5 shadow3 alpha in both schemes", () => {
+    for (const [scheme, alphas] of [
+      ["light", [0.04, 0.08, 0.12, 0.22, 0.33, 0.44]],
+      ["dark", [0.15, 0.23, 0.33, 0.45, 0.65, 0.8]],
+    ] as const) {
+      alphas.forEach((alpha, index) => {
+        expect(themes[scheme][`shadow${index + 1}`]).toBe(`rgba(0,0,0,${alpha})`);
+      });
+      expect(themes[scheme].shadowColor).toBe(`rgba(0,0,0,${alphas[2]})`);
+    }
+  });
+
+  it("uses v5 surface templates for pages and components", () => {
+    for (const scheme of ["light", "dark"] as const) {
+      expect(themes[scheme].background).toBe(themes[scheme].color2);
+      expect(themes[`${scheme}_Card`].background).toBe(themes[scheme].color3);
+    }
+    const button = themes.light_Button;
+    expect(relativeLuminance(normalizeToHex(button.backgroundHover)!)).toBeGreaterThan(
+      relativeLuminance(normalizeToHex(button.background)!),
+    );
+    for (const component of [
+      "SwitchThumb",
+      "SliderTrack",
+      "Tooltip",
+      "Checkbox",
+      "RadioGroupItem",
+    ]) {
+      expect(themes).not.toHaveProperty(`light_${component}`);
+    }
+  });
+
+  it("builds gray children from their own opaque palette", () => {
+    for (const scheme of ["light", "dark"] as const) {
+      expect(themes[`${scheme}_gray`].color3).toBe(stockThemes[`${scheme}_gray`].color3);
+      for (const suffix of ["active", "alt1", "alt2"]) {
+        const child = themes[`${scheme}_gray_${suffix}`];
+        expect(child).toBeDefined();
+        for (const key of ["color", "background", "borderColor"]) {
+          expect(child[key]).toMatch(/, 1\)$/);
+        }
+      }
+    }
+  });
+
+  it("uses v5 templates for additional themes and honors component overrides", () => {
+    const custom = createDefaultThemeConfig({
+      additionalThemes: { brand: defaultAccentTheme },
+      builderOptions: { componentThemes: { Custom: { template: "surface1" } } },
+    }).tamagui.themes as unknown as RawThemes;
+    for (const scheme of ["light", "dark"] as const) {
+      expect(custom[`${scheme}_brand`].background).toBe(custom[`${scheme}_brand`].color2);
+      expect(custom[`${scheme}_Custom`].background).toBe(custom[scheme].color3);
+      expect(custom).not.toHaveProperty(`${scheme}_Button`);
+    }
+  });
+
+  it("honors an explicit grandchildren map in both builder paths", () => {
+    const seen: string[] = [];
+    const builder = createThemesBuilder(defaultBaseTheme, defaultAccentTheme, {
+      grandChildrenThemes: { raised: { template: "surface1" } },
+      getTheme: ({ name }) => {
+        seen.push(name);
+        return {};
+      },
+    });
+    expect(builder.themes()).toHaveProperty("light_blue_raised");
+    expect(builder.themes()).not.toHaveProperty("light_blue_alt1");
+    seen.length = 0;
+    builder.addTheme("brand", defaultAccentTheme);
+    expect(seen).toContain("light_blue_raised");
+    expect(seen).not.toContain("light_blue_alt1");
+  });
+
+  it("allows callers to disable component themes", () => {
+    const custom = createThemesBuilder(defaultBaseTheme, defaultAccentTheme, {
+      componentThemes: false,
+    }).themes();
+    expect(Object.keys(custom).some((name) => /_[A-Z]/.test(name))).toBe(false);
+  });
+
+  it("ships 462 themes and the heading-scope category fonts in under 260 KB of CSS (the v4 matrix and stock spread shipped 913 KB)", async () => {
+    const { createTamagui: build } = await vi.importActual<typeof import("tamagui")>("tamagui");
+    const css = build(config.tamagui).getCSS();
+    expect(Object.keys(themes)).toHaveLength(462);
+    expect(Buffer.byteLength(css, "utf8")).toBeLessThan(260_000);
   });
 });

package/src/theme/createDefaultThemeConfig.ts

@@ -13,8 +13,11 @@ import { defaultAccentTheme } from "./defaults/accent";
 import { defaultBaseTheme } from "./defaults/base";
 import { defaultBuilderOptions } from "./defaults/builderOptions";
 import { defaultFonts } from "./defaults/fonts";
+import { scaleFontSet } from "./scale/scaleFonts";
 import type { Preset } from "./preset.types";
 import { type SizeRecipeInputs } from "./recipeInputs";
+import { generateScale } from "./scale/generateScale";
+import { defaultScaleInputs } from "./scale/scaleInputs";
 import { type ThemeConfig, createThemeConfig } from "./shared";
 import { assertResolvableThemeValues } from "./themeValue";
 import { getGeneratedSizeRecipes, getSizeRecipeInputs, setSizeRecipeInputs } from "./sizeRecipes";
@@ -30,9 +33,10 @@ import { type ThemeSubset, subsetThemes } from "./subsetThemes";
  * against v5, never against v4 or the legacy root exports. Asserted by the
  * era block in `createDefaultThemeConfig.spec.ts`.
  *
- * Tokens come from `defaultConfig` and from nothing else — the legacy
- * `@tamagui/themes` override is gone (measured identical for size/space/
- * radius/zIndex; its only addition was unused Radix color steps).
+ * The non-color tokens and the body/heading type tables come from one
+ * generator (`scale/generateScale.ts`), spec-pinned to the v5 values at the
+ * default inputs, so `$size`/`$space` props and the size recipes read the
+ * same numbers.
  */
 export const TAMAGUI_ERA = "v5" as const;
 /** MPO-19 proof alias — same pin as `TAMAGUI_ERA`. */
@@ -49,7 +53,7 @@ export interface CreateDefaultThemeConfigOptions {
   fonts?: Record<string, GenericFont>;
   /** Animation config (defaults to framework reanimated animations) */
   animations?: CreateTamaguiProps["animations"];
-  /** Options for the theme builder (grandChildrenThemes, getTheme) */
+  /** Options for the theme builder (componentThemes, grandChildrenThemes, getTheme) */
   builderOptions?: CreateThemesBuilderOptions;
   /** Override tamagui settings */
   settings?: Partial<NonNullable<CreateTamaguiProps["settings"]>>;
@@ -60,10 +64,11 @@ export interface CreateDefaultThemeConfigOptions {
   /** Default preset name to use when no `mp.preset` cookie is set */
   defaultPreset?: string;
   /**
-   * Size-recipe inputs (LC-70). Merged over `defaultRecipeInputs`; tables are
-   * generated, written into the live aliases Button/Input already import, and
-   * attached on ThemeConfig as `recipeInputs` / `recipeFamilies`. Not written
-   * into Tamagui `themes` (those stay color palettes from createThemes /
+   * Size-recipe inputs (LC-70). Merged over the inputs derived from the
+   * default scale (`defaultRecipeInputs`); tables are generated, written into
+   * the live aliases Button/Input already import, and attached on
+   * ThemeConfig as `recipeInputs` / `recipeFamilies`. Not written into
+   * Tamagui `themes` (those stay color palettes from createThemes /
    * theme-builder).
    */
   recipeInputs?: Partial<SizeRecipeInputs>;
@@ -76,15 +81,14 @@ export interface CreateDefaultThemeConfigOptions {
 }
 
 /**
- * Compose a consumer `getTheme` WITH the framework default instead of
- * replacing it. The default always runs first — it derives the solid ≥3:1
- * `$outlineColor` focus ring (DG-A11Y-01), the interaction ramp and the
- * component sub-theme border/outline anchors — then the consumer's result is
+ * Compose a consumer `getTheme` WITH the framework default instead of replacing
+ * it. The default always runs first — it derives the solid ≥3:1 `$outlineColor`
+ * focus ring (DG-A11Y-01) and semantic aliases — then the consumer's result is
  * merged over it per key, so a partial override keeps every derivation it
  * doesn't explicitly change. Consumer entries that resolve to nullish are
- * dropped: a getTheme written against the full base ramp (`theme.color5`
- * etc.) also runs inside narrow component sub-themes where those steps don't
- * exist, and its undefineds must not erase the defaults (DF-03).
+ * dropped: a getTheme written against the full base ramp (`theme.color5` etc.)
+ * also runs inside narrow component sub-themes where those steps don't exist,
+ * and its undefineds must not erase the defaults (DF-03).
  */
 function composeGetTheme(
   custom: CreateThemesBuilderOptions["getTheme"],
@@ -108,11 +112,9 @@ function composeGetTheme(
 }
 
 /**
- * Builds a complete Tamagui theme config with batteries included: calling it
- * with zero options yields the framework's polished defaults — the neutral
- * Radix-mauve-curve base ramps, the solid-surface brand accent ramps, Inter
- * heading/body fonts, the category fonts the bodyFont knob resolves, and the
- * interaction-ramp `getTheme` theme builder.
+ * Builds Tamagui's v5 grey ramp, inverted-base accent and colour themes,
+ * with the house accessibility floors. Fonts include Inter heading/body
+ * and the category faces selected by the bodyFont knob.
  * Every option overrides its piece independently: `base` and `accent` each
  * replace their default, `fonts` are spread OVER the defaults so a partial
  * font map keeps the default heading/body and category faces, and `builderOptions.getTheme`
@@ -123,6 +125,7 @@ export function createDefaultThemeConfig(
   options: CreateDefaultThemeConfigOptions = {},
 ): ThemeConfig {
   setSizeRecipeInputs(options.recipeInputs ?? {});
+  const scale = generateScale(defaultScaleInputs);
   const base = options.base ?? defaultBaseTheme;
   const accent = options.accent ?? defaultAccentTheme;
   const themesBuilder = createThemesBuilder(base, accent, {
@@ -144,24 +147,23 @@ export function createDefaultThemeConfig(
   // pipeline (e.g. the Frappe SPA) where runtime JS themes are required.
   // Always keep themes to ensure TamaguiProvider has valid theme data.
   const themes = options.subset ? subsetThemes(builtThemes, options.subset) : builtThemes;
+  const fonts = {
+    ...defaultConfig.fonts,
+    ...defaultFonts,
+    ...options.fonts,
+  } as Record<string, GenericFont>;
   return createThemeConfig(
     {
       ...defaultConfig,
+      tokens: scale.tokens,
       animations: options.animations ?? animations,
       disableSSR: false,
-      fonts: {
-        ...defaultConfig.fonts,
-        ...defaultFonts,
-        ...options.fonts,
-      },
+      fonts,
       shorthands,
       shouldAddPrefersColorThemes: true,
       themeClassNameOnRoot: true,
       themes,
       allowedStyleValues: undefined,
-      // Tokens come from `defaultConfig` above, and from nothing else — see
-      // the `tamaguiEra` note. There is no second token source to disagree
-      // with the era pin.
       settings: {
         ...defaultConfig.settings,
         allowedStyleValues: "somewhat-strict-web",
@@ -181,6 +183,10 @@ export function createDefaultThemeConfig(
       defaultPreset: options.defaultPreset,
       recipeInputs: getSizeRecipeInputs(),
       recipeFamilies: getGeneratedSizeRecipes().families,
+      scale: {
+        fonts: (tables) => scaleFontSet(fonts, scale.fonts, tables),
+        recipeOverrides: options.recipeInputs,
+      },
     },
   );
 }