@multiplatform.one/theme 7.34.3 → 7.35.0

package/src/theme/scale/ScaleStyles.native.tsx

@@ -0,0 +1,19 @@
+import type { ScaleSource } from "./useActiveScale";
+
+export function scaleStyleSheet(_scales: ScaleSource["scales"]): string {
+  return "";
+}
+
+export function scaleAttributeValue(presetName?: string): string | undefined {
+  return presetName || undefined;
+}
+
+export interface ScaleStylesProps {
+  config?: ScaleSource;
+  presetName?: string;
+}
+
+/** Native has no CSS variables; a scale switch remounts the provider subtree instead. */
+export function ScaleStyles(_props: ScaleStylesProps) {
+  return null;
+}

package/src/theme/scale/ScaleStyles.tsx

@@ -0,0 +1,48 @@
+import { useInsertionEffect, useMemo } from "react";
+import { SCALE_ATTRIBUTE } from "./scaleCss";
+import { uniqueScales } from "./themeScales";
+import type { ScaleSource } from "./useActiveScale";
+
+/** Every registered scale's repaint block, default first (it has none). */
+export function scaleStyleSheet(scales: ScaleSource["scales"]): string {
+  return uniqueScales(scales)
+    .map((scale) => scale.css)
+    .filter(Boolean)
+    .join("\n");
+}
+
+/** The `data-mp-scale` value for a preset name; no name leaves the attribute off. */
+export function scaleAttributeValue(presetName?: string): string | undefined {
+  return presetName || undefined;
+}
+
+export interface ScaleStylesProps {
+  config?: ScaleSource;
+  presetName?: string;
+}
+
+/**
+ * Web scale repaint: one hoisted stylesheet with every registered scale's
+ * `:root[data-mp-scale=…]` block (server-rendered, so first paint is
+ * right), and the `<html>` attribute that selects the active one. Switching
+ * presets flips the attribute and every token-driven style repaints through
+ * its CSS variable with no re-render.
+ */
+export function ScaleStyles({ config, presetName }: ScaleStylesProps) {
+  const css = useMemo(() => scaleStyleSheet(config?.scales), [config?.scales]);
+  const attribute = scaleAttributeValue(presetName || config?.defaultPreset);
+
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    if (attribute) root.setAttribute(SCALE_ATTRIBUTE, attribute);
+    else root.removeAttribute(SCALE_ATTRIBUTE);
+  }, [attribute]);
+
+  if (!css) return null;
+  return (
+    <style precedence="default" href="mp-scales">
+      {css}
+    </style>
+  );
+}

package/src/theme/scale/activeScale.ts

@@ -0,0 +1,30 @@
+import { type ScaleTokens, generateScale } from "./generateScale";
+import { RADIUS_KEYS, defaultScaleInputs } from "./scaleInputs";
+
+const defaultTokens: ScaleTokens = generateScale(defaultScaleInputs).tokens;
+
+let activeTokens: ScaleTokens = defaultTokens;
+
+/** The token values of the installed scale (the default scale until a preset switches it). */
+export function getActiveScaleTokens(): ScaleTokens {
+  return activeTokens;
+}
+
+/** Called by `applyThemeScale`; px readers below follow it on their next render. */
+export function setActiveScaleTokens(tokens: ScaleTokens): void {
+  activeTokens = tokens;
+}
+
+/**
+ * The installed scale's radius for a px literal written against the default
+ * scale: the value
+ * at the same `$radius` key. A px that is not a default radius token passes
+ * through unchanged.
+ */
+export function scaleRadiusPx(defaultPx: number): number {
+  if (activeTokens === defaultTokens || defaultPx === 0) return defaultPx;
+  for (const key of RADIUS_KEYS) {
+    if (key !== "true" && defaultTokens.radius[key] === defaultPx) return activeTokens.radius[key];
+  }
+  return defaultPx;
+}

package/src/theme/scale/deriveRecipeInputs.ts

@@ -0,0 +1,110 @@
+import type { SizeRecipeInputs, SizeRecipeRatios, SizeRecipeTokenChannels } from "../recipeInputs";
+import type { ScaleCore } from "./generateScale";
+import {
+  CHIP_ICON_SHAPE,
+  CONTROL_ICON_SHAPE,
+  SIZE_KEYS,
+  SIZE_RECIPE_TOKENS,
+  SIZE_TOKEN_EXPONENTS,
+  type FontKey,
+  type RadiusKey,
+  type SizeKey,
+  type SizeRecipeToken,
+} from "./scaleInputs";
+
+/** iOS minimum hit target; touch heights never paint below it (LC-77). */
+const TOUCH_FLOOR_PX = 44;
+
+function stopOf(token: SizeRecipeToken): number {
+  return token === "$true" ? 4 : Number(token.slice(1));
+}
+
+function whole(token: SizeRecipeToken): Exclude<SizeRecipeToken, "$true"> {
+  return token === "$true" ? "$4" : token;
+}
+
+/** The half-step ladder `$0, $0.5, $1, …`; `$0.25`/`$0.75` sit between its rungs. */
+const HALF_STEP_KEYS = SIZE_KEYS.filter(
+  (key) => key !== "$true" && Number(key.slice(1)) % 0.5 === 0,
+) as SizeKey[];
+
+/** One half step below `token` (Tamagui `getSpace(…, { shift: -1 })` on the half-step ladder). */
+function halfStepBelow(token: SizeRecipeToken): SizeKey {
+  const target = stopOf(token) - 0.5;
+  let found: SizeKey = "$0";
+  for (const key of HALF_STEP_KEYS) {
+    if (Number(key.slice(1)) <= target) found = key;
+  }
+  return found;
+}
+
+/** `$radius` has whole keys only; a half step sits halfway between its neighbours. */
+function radiusAt(radius: Record<RadiusKey, number>, token: SizeRecipeToken): number {
+  const stop = stopOf(token);
+  const below = radius[String(Math.floor(stop)) as RadiusKey];
+  const above = radius[String(Math.ceil(stop)) as RadiusKey];
+  return Math.round((below + above) / 2);
+}
+
+function label(scale: ScaleCore, token: SizeRecipeToken, shift: number): number {
+  const key = String(Math.max(1, Math.min(16, Math.ceil(stopOf(token)) + shift))) as FontKey;
+  return scale.fonts.bodySizes[key];
+}
+
+function ratiosAt(row: SizeRecipeTokenChannels, height: number): SizeRecipeRatios {
+  return {
+    padX: row.paddingHorizontal / height,
+    font: row.fontSize / height,
+    icon: row.iconSize / height,
+    gap: row.radius / height,
+  };
+}
+
+/**
+ * Size-recipe inputs read off a generated scale: height = `$size`, button
+ * padX = `$space` at the same key, input/chip padX one half step below,
+ * radius (and so gap, LC-75) = `$radius`, label from body type and icon from
+ * the type-relative control ladder. Nothing here is a second px source.
+ */
+export function deriveRecipeInputs(scale: ScaleCore): SizeRecipeInputs {
+  const { control, type } = scale.inputs;
+  const { size, space, radius } = scale.tokens;
+  const tokenHeights: Record<string, number> = {};
+  const tokenTable = {} as Record<SizeRecipeToken, SizeRecipeTokenChannels>;
+  const chipTokenTable = {} as Record<SizeRecipeToken, SizeRecipeTokenChannels>;
+  const inputPadX: Partial<Record<SizeRecipeToken, number>> = {};
+
+  for (const token of SIZE_RECIPE_TOKENS) {
+    const r = radiusAt(radius, token);
+    const padBelow = space[halfStepBelow(token)];
+    tokenHeights[token] = size[token];
+    inputPadX[token] = padBelow;
+    tokenTable[token] = {
+      paddingHorizontal: space[token],
+      fontSize: label(scale, token, 0),
+      iconSize: Math.round(CONTROL_ICON_SHAPE[whole(token)] * type),
+      radius: r,
+    };
+    chipTokenTable[token] = {
+      paddingHorizontal: padBelow,
+      fontSize: label(scale, token, -1),
+      iconSize: Math.round(CHIP_ICON_SHAPE[whole(token)] * type),
+      radius: r,
+    };
+  }
+
+  const height = tokenHeights.$4;
+  return {
+    control,
+    type,
+    tokenSteps: { ...SIZE_TOKEN_EXPONENTS },
+    tokenHeights,
+    tokenTable,
+    chipTokenTable,
+    inputPadX,
+    ratios: ratiosAt(tokenTable.$4, height),
+    chipRatios: ratiosAt(chipTokenTable.$4, height),
+    radiusPx: radius.true,
+    touchFloor: TOUCH_FLOOR_PX,
+  };
+}

package/src/theme/scale/generateScale.spec.ts

@@ -0,0 +1,260 @@
+/**
+ * The generator reproduces Tamagui v5 at v5ScaleInputs, key by key, and
+ * keeps v5's proportions at any other inputs.
+ */
+
+import { defaultConfig } from "@tamagui/config/v5";
+import { tokens as v5Tokens } from "@tamagui/themes/v5";
+import { describe, expect, it } from "vitest";
+import { DEFAULT_SIZE_RECIPE_INPUTS } from "../recipeInputs";
+import { generateScale, sizeToSpace } from "./generateScale";
+import {
+  FONT_KEYS,
+  RADIUS_KEYS,
+  SIZE_KEYS,
+  SIZE_RECIPE_TOKENS,
+  defaultScaleInputs,
+  v5ScaleInputs,
+  resolveScaleInputs,
+} from "./scaleInputs";
+
+type Table = Record<string, number>;
+
+function numbers(raw: unknown): Table {
+  const out: Table = {};
+  for (const [key, value] of Object.entries(raw as Record<string, unknown>)) {
+    const val =
+      value && typeof value === "object" && "val" in value
+        ? (value as { val: unknown }).val
+        : value;
+    out[key.replace(/^\$/, "")] = val as number;
+  }
+  return out;
+}
+
+function expectKeyByKey(actual: Table, expected: Table, label: string) {
+  expect(Object.keys(actual).sort(), `${label} keys`).toEqual(Object.keys(expected).sort());
+  for (const [key, px] of Object.entries(expected)) {
+    expect(actual[key], `${label}.${key}`).toBe(px);
+  }
+}
+
+const scale = generateScale(v5ScaleInputs, "web");
+
+describe("generateScale(v5ScaleInputs) is Tamagui v5", () => {
+  for (const group of ["size", "space", "radius", "zIndex"] as const) {
+    it(`tokens.${group} equals @tamagui/themes/v5 on every key`, () => {
+      expectKeyByKey(scale.tokens[group], v5Tokens[group] as unknown as Table, group);
+    });
+  }
+
+  it("keeps v5's key order, so the emitted :root variables do too", () => {
+    for (const group of ["size", "space", "radius", "zIndex"] as const) {
+      expect(Object.keys(scale.tokens[group]), group).toEqual(Object.keys(v5Tokens[group]));
+    }
+    expect(Object.keys(scale.tokens)).toEqual(Object.keys(v5Tokens));
+  });
+
+  for (const face of ["body", "heading"] as const) {
+    it(`${face} size and lineHeight equal @tamagui/config/v5 fonts.${face}`, () => {
+      const font = defaultConfig.fonts[face];
+      expectKeyByKey(scale.fonts[`${face}Sizes`], numbers(font.size), `${face}.size`);
+      expectKeyByKey(
+        scale.fonts[`${face}LineHeights`],
+        numbers(font.lineHeight),
+        `${face}.lineHeight`,
+      );
+    });
+  }
+
+  it("native follows v5's iOS ladder: 17pt body, size + 5 leading, 120% headings", () => {
+    const native = generateScale(v5ScaleInputs, "native").fonts;
+    const ios: Table = {
+      1: 11,
+      2: 12,
+      3: 15,
+      4: 17,
+      true: 17,
+      5: 20,
+      6: 22,
+      7: 24,
+      8: 28,
+      9: 32,
+      10: 40,
+      11: 46,
+      12: 52,
+      13: 60,
+      14: 70,
+      15: 85,
+      16: 100,
+    };
+    expectKeyByKey(native.bodySizes, ios, "native body.size");
+    for (const key of FONT_KEYS) {
+      expect(native.bodyLineHeights[key], `native body.lineHeight.${key}`).toBe(ios[key] + 5);
+      expect(native.headingLineHeights[key], `native heading.lineHeight.${key}`).toBe(
+        Math.round(ios[key] * 1.2),
+      );
+    }
+  });
+
+  it("sizeToSpace is Tamagui's, on every v5 size", () => {
+    for (const key of SIZE_KEYS) {
+      expect(sizeToSpace(v5Tokens.size[key]), key).toBe(v5Tokens.space[key]);
+    }
+  });
+});
+
+describe("ladder shape", () => {
+  it("the house default has a 40px control and the proportional size ladder", () => {
+    const { tokens, fonts } = generateScale(defaultScaleInputs, "web");
+    expect(tokens.size).toMatchObject({
+      $1: 18,
+      "$1.5": 22,
+      $2: 26,
+      "$2.5": 30,
+      $3: 32,
+      "$3.5": 36,
+      $4: 40,
+      $true: 40,
+      "$4.5": 44,
+      $5: 48,
+      $6: 58,
+    });
+    expect(tokens.space).toMatchObject({ $2: 6, $3: 12, $4: 16, $true: 16, $5: 21 });
+    expect(tokens.radius).toMatchObject({ 1: 3, 2: 4, 3: 6, 4: 8, true: 8, 5: 9, 6: 14 });
+    expect(fonts.bodySizes.true).toBe(15);
+    expect(fonts.bodyLineHeights.true).toBe(23);
+  });
+
+  it("control text reads the platform body table, with chips one key below", () => {
+    for (const platform of ["web", "native"] as const) {
+      const { fonts, recipeInputs } = generateScale(defaultScaleInputs, platform);
+      for (const token of SIZE_RECIPE_TOKENS) {
+        const stop = token === "$true" ? 4 : Math.ceil(Number(token.slice(1)));
+        expect(recipeInputs.tokenTable[token]?.fontSize).toBe(
+          fonts.bodySizes[String(stop) as keyof typeof fonts.bodySizes],
+        );
+        expect(recipeInputs.chipTokenTable[token]?.fontSize).toBe(
+          fonts.bodySizes[String(Math.max(1, stop - 1)) as keyof typeof fonts.bodySizes],
+        );
+      }
+    }
+  });
+  it("$true is $4 in every group", () => {
+    for (const control of [36, 40, 44, 52]) {
+      const { tokens, fonts } = generateScale({ control, type: 15 });
+      expect(tokens.size.$true).toBe(tokens.size.$4);
+      expect(tokens.space.$true).toBe(tokens.space.$4);
+      expect(tokens.radius.true).toBe(tokens.radius[4]);
+      expect(fonts.bodySizes.true).toBe(fonts.bodySizes[4]);
+    }
+  });
+
+  it("size, space, radius and type never step down", () => {
+    for (const control of [36, 40, 44, 52]) {
+      const { tokens, fonts } = generateScale({ control, type: 16 });
+      const ladder = (keys: readonly string[], table: Table) => keys.map((key) => table[key]);
+      for (const [label, values] of [
+        ["size", ladder(SIZE_KEYS, tokens.size)],
+        ["space", ladder(SIZE_KEYS, tokens.space)],
+        ["radius", ladder(RADIUS_KEYS, tokens.radius)],
+        ["body", ladder(FONT_KEYS, fonts.bodySizes)],
+      ] as const) {
+        for (let i = 1; i < values.length; i++) {
+          expect(values[i], `${label}[${i}] at control ${control}`).toBeGreaterThanOrEqual(
+            values[i - 1],
+          );
+        }
+      }
+    }
+  });
+
+  it("negative space mirrors positive space", () => {
+    const { space } = generateScale({ control: 40, type: 15 }).tokens;
+    for (const key of SIZE_KEYS.slice(1)) {
+      const negative = `-${key.slice(1)}` as keyof typeof space;
+      expect(space[negative], negative).toBe(-space[key]);
+    }
+    expect(space).not.toHaveProperty("-0");
+  });
+
+  it("control 40 puts $4 at 40, $space.4 at 16 and $radius.true at 8; type stays 15", () => {
+    const { tokens, fonts } = generateScale({ control: 40, type: 15 });
+    expect(tokens.size.$4).toBe(40);
+    expect(tokens.space.$4).toBe(16);
+    expect(tokens.radius.true).toBe(8);
+    expect(fonts.bodySizes.true).toBe(15);
+  });
+
+  it("type scales the body and heading ladders and nothing else", () => {
+    const larger = generateScale({ control: 44, type: 17 });
+    expect(larger.fonts.bodySizes.true).toBe(17);
+    expect(larger.fonts.headingSizes).toEqual(larger.fonts.bodySizes);
+    expect(larger.tokens).toEqual(scale.tokens);
+  });
+
+  it("unit sets the fine-grain keys, snap rounds the rest, radius sets $radius.true", () => {
+    expect(resolveScaleInputs(defaultScaleInputs)).toEqual({
+      control: 40,
+      type: 15,
+      unit: 4,
+      snap: 2,
+      radius: 9 / 44,
+    });
+    const { size, radius } = generateScale({
+      control: 44,
+      type: 15,
+      unit: 3,
+      snap: 4,
+      radius: 0.5,
+    }).tokens;
+    expect([size["$0.25"], size["$0.5"], size["$0.75"]]).toEqual([1.5, 3, 6]);
+    for (const key of SIZE_KEYS.filter((k) => !["$0.25", "$0.5", "$0.75"].includes(k))) {
+      expect(size[key] % 4, key).toBe(0);
+    }
+    expect(radius.true).toBe(22);
+  });
+});
+
+describe("recipe inputs come off the same scale", () => {
+  it("the default scale's recipe inputs ARE the default size-recipe inputs", () => {
+    expect(generateScale(defaultScaleInputs).recipeInputs).toEqual(DEFAULT_SIZE_RECIPE_INPUTS);
+  });
+
+  it("height, padX and radius at every recipe key are the scale's own tokens", () => {
+    for (const control of [40, 44, 48]) {
+      const { tokens, recipeInputs } = generateScale({ control, type: 15 });
+      for (const token of SIZE_RECIPE_TOKENS) {
+        expect(recipeInputs.tokenHeights[token], `${control} ${token} height`).toBe(
+          tokens.size[token],
+        );
+        expect(recipeInputs.tokenTable[token]?.paddingHorizontal, `${control} ${token} padX`).toBe(
+          tokens.space[token],
+        );
+      }
+      expect(recipeInputs.tokenTable.$4?.radius).toBe(tokens.radius[4]);
+      expect(recipeInputs.radiusPx).toBe(tokens.radius.true);
+      expect(recipeInputs.control).toBe(control);
+    }
+  });
+
+  it("input padX is one half step below: $4 reads $space.3.5, $6 reads $space.5", () => {
+    const { tokens, recipeInputs } = generateScale({ control: 40, type: 15 });
+    expect(recipeInputs.inputPadX.$4).toBe(tokens.space["$3.5"]);
+    expect(recipeInputs.inputPadX.$true).toBe(tokens.space["$3.5"]);
+    expect(recipeInputs.inputPadX.$6).toBe(tokens.space.$5);
+    expect(recipeInputs.inputPadX.$1).toBe(tokens.space["$0.5"]);
+    expect(recipeInputs.chipTokenTable.$4?.paddingHorizontal).toBe(recipeInputs.inputPadX.$4);
+  });
+
+  it("$4 at v5 inputs keeps v5 geometry and uses the body font", () => {
+    expect(scale.recipeInputs.tokenHeights.$4).toBe(44);
+    expect(scale.recipeInputs.tokenTable.$4).toEqual({
+      paddingHorizontal: 18,
+      fontSize: 15,
+      iconSize: 16,
+      radius: 9,
+    });
+    expect(scale.recipeInputs.tokenTable.$true).toEqual(scale.recipeInputs.tokenTable.$4);
+  });
+});

package/src/theme/scale/generateScale.ts

@@ -0,0 +1,147 @@
+import type { SizeRecipeInputs } from "../recipeInputs";
+import { deriveRecipeInputs } from "./deriveRecipeInputs";
+import {
+  type FontKey,
+  FONT_KEYS,
+  NATIVE_TYPE_SHAPE,
+  type RadiusKey,
+  RADIUS_KEYS,
+  RADIUS_SHAPE,
+  type ResolvedScaleInputs,
+  type ScaleInputs,
+  SIZE_KEYS,
+  SIZE_SHAPE,
+  type SizeKey,
+  SPACE_SHAPE,
+  type SpaceKey,
+  SUBUNIT_SHAPE,
+  type SubunitKey,
+  TYPE_SHAPE,
+  ZINDEX,
+  type ZIndexKey,
+  defaultScaleInputs,
+  resolveScaleInputs,
+} from "./scaleInputs";
+
+/** Raw Tamagui token groups, in `@tamagui/themes/v5` key order (the order `getCSS()` emits). */
+export type ScaleTokens = {
+  radius: Record<RadiusKey, number>;
+  zIndex: Record<ZIndexKey, number>;
+  space: Record<SpaceKey, number>;
+  size: Record<SizeKey, number>;
+};
+
+export type ScaleFonts = {
+  bodySizes: Record<FontKey, number>;
+  bodyLineHeights: Record<FontKey, number>;
+  headingSizes: Record<FontKey, number>;
+  headingLineHeights: Record<FontKey, number>;
+};
+
+export type ScaleCore = {
+  inputs: ResolvedScaleInputs;
+  tokens: ScaleTokens;
+  fonts: ScaleFonts;
+};
+
+export type GeneratedScale = ScaleCore & { recipeInputs: SizeRecipeInputs };
+
+export type ScalePlatform = "web" | "native";
+
+/** `@tamagui/themes/v5` `sizeToSpace`, the function v5 derives every `$space` from. */
+export function sizeToSpace(v: number): number {
+  if (v === 0) return 0;
+  if (v === 2) return 0.5;
+  if (v === 4) return 1;
+  if (v === 8) return 1.5;
+  if (v <= 16) return Math.round(v * 0.333);
+  return Math.floor(v * 0.7 - 12);
+}
+
+/** Same test `@tamagui/config/v5` uses to pick its web or native type ladder. */
+export function scalePlatform(): ScalePlatform {
+  return process.env.TAMAGUI_TARGET === "native" ? "native" : "web";
+}
+
+function snapTo(px: number, grid: number): number {
+  return Math.round(px / grid) * grid;
+}
+
+// Half-px precision below 2px keeps v5's 0.5/1/1.5 hairline spaces.
+function snapSpace(px: number): number {
+  return px < 2 ? Math.round(px * 2) / 2 : Math.round(px);
+}
+
+function isSubunit(key: SizeKey): key is SubunitKey {
+  return Object.hasOwn(SUBUNIT_SHAPE, key);
+}
+
+export function generateScaleTokens(inputs: ResolvedScaleInputs): ScaleTokens {
+  const size = {} as Record<SizeKey, number>;
+  for (const key of SIZE_KEYS) {
+    size[key] = isSubunit(key)
+      ? SUBUNIT_SHAPE[key] * inputs.unit
+      : snapTo(SIZE_SHAPE[key] * inputs.control, inputs.snap);
+  }
+
+  const spaceTrue = sizeToSpace(size.$true);
+  const space = {} as Record<SpaceKey, number>;
+  for (const key of SIZE_KEYS) {
+    space[key] = snapSpace(SPACE_SHAPE[key] * spaceTrue);
+  }
+  for (const key of SIZE_KEYS.slice(1)) {
+    const px = space[key];
+    space[`-${key.slice(1)}` as SpaceKey] = px === 0 ? 0 : -px;
+  }
+
+  const radiusTrue = Math.round(inputs.control * inputs.radius);
+  const radius = {} as Record<RadiusKey, number>;
+  for (const key of RADIUS_KEYS) {
+    radius[key] = Math.round(RADIUS_SHAPE[key] * radiusTrue);
+  }
+
+  return { radius, zIndex: { ...ZINDEX }, space, size };
+}
+
+// v5 web leading: 150% tapering toward ~142% at display sizes; native is size + 5 (iOS HIG).
+function bodyLineHeight(size: number, platform: ScalePlatform): number {
+  if (platform === "native") return Math.round(size + 5);
+  return Math.round(size * (1.5 - Math.max(0, (size - 20) * 0.004)));
+}
+
+function headingLineHeight(size: number, platform: ScalePlatform): number {
+  return Math.round(platform === "native" ? size * 1.2 : size * 1.12 + 5);
+}
+
+export function generateScaleFonts(type: number, platform: ScalePlatform): ScaleFonts {
+  const shape = platform === "native" ? NATIVE_TYPE_SHAPE : TYPE_SHAPE;
+  const bodySizes = {} as Record<FontKey, number>;
+  const bodyLineHeights = {} as Record<FontKey, number>;
+  const headingLineHeights = {} as Record<FontKey, number>;
+  for (const key of FONT_KEYS) {
+    const size = Math.round(shape[key] * type);
+    bodySizes[key] = size;
+    bodyLineHeights[key] = bodyLineHeight(size, platform);
+    headingLineHeights[key] = headingLineHeight(size, platform);
+  }
+  return { bodySizes, bodyLineHeights, headingSizes: { ...bodySizes }, headingLineHeights };
+}
+
+/**
+ * One scale from a few inputs: the Tamagui `$size`/`$space`/`$radius`/`$zIndex`
+ * token groups, the body and heading type tables, and the size-recipe inputs
+ * Button/Input read, all from the same numbers so `$size` props and
+ * `knobProps.control` cannot disagree.
+ */
+export function generateScale(
+  inputs: Partial<ScaleInputs> = defaultScaleInputs,
+  platform: ScalePlatform = scalePlatform(),
+): GeneratedScale {
+  const resolved = resolveScaleInputs(inputs);
+  const core: ScaleCore = {
+    inputs: resolved,
+    tokens: generateScaleTokens(resolved),
+    fonts: generateScaleFonts(resolved.type, platform),
+  };
+  return { ...core, recipeInputs: deriveRecipeInputs(core) };
+}

package/src/theme/scale/index.ts

@@ -0,0 +1,54 @@
+export { deriveRecipeInputs } from "./deriveRecipeInputs";
+export {
+  generateScale,
+  generateScaleFonts,
+  generateScaleTokens,
+  scalePlatform,
+  sizeToSpace,
+} from "./generateScale";
+export type {
+  GeneratedScale,
+  ScaleCore,
+  ScaleFonts,
+  ScalePlatform,
+  ScaleTokens,
+} from "./generateScale";
+export {
+  CHIP_ICON_SHAPE,
+  CONTROL_ICON_SHAPE,
+  FONT_KEYS,
+  NATIVE_TYPE_SHAPE,
+  RADIUS_KEYS,
+  RADIUS_SHAPE,
+  SIZE_KEYS,
+  SIZE_SHAPE,
+  SPACE_SHAPE,
+  SUBUNIT_SHAPE,
+  TYPE_SHAPE,
+  ZINDEX_KEYS,
+  defaultScaleInputs,
+  v5ScaleInputs,
+  resolveScaleInputs,
+  scaleInputDefaults,
+} from "./scaleInputs";
+export type {
+  FontKey,
+  RadiusKey,
+  ResolvedScaleInputs,
+  ScaleInputs,
+  SizeKey,
+  SpaceKey,
+  SubunitKey,
+  ZIndexKey,
+} from "./scaleInputs";
+export { SCALE_ATTRIBUTE, scaleCss, scaleRootSelectors } from "./scaleCss";
+export type { ScaleCssSource } from "./scaleCss";
+export { rescaleFont, scaleFontSet } from "./scaleFonts";
+export { DEFAULT_SCALE_ID, buildThemeScales, uniqueScales } from "./themeScales";
+export type { ThemeScale, ThemeScaleBuildOptions } from "./themeScales";
+export { applyThemeScale, resolveThemeScale, useActiveScale } from "./useActiveScale";
+export type { PublishedScale, ScaleSource } from "./useActiveScale";
+export { ScaleStyles, scaleAttributeValue, scaleStyleSheet } from "./ScaleStyles";
+export type { ScaleStylesProps } from "./ScaleStyles";
+export { scaleAttributeFromCookie, scaleAttributeScript } from "./scaleAttribute";
+export { getActiveScaleTokens, scaleRadiusPx, setActiveScaleTokens } from "./activeScale";