@multiplatform.one/theme 7.34.3 → 7.35.0

package/src/theme/presets.spec.ts

@@ -38,9 +38,6 @@ const minimalPreset: Preset = {
     borderRadius: "none",
     borderWidth: "none",
     elevation: "none",
-    space: "small",
-    size: "small",
-    density: "comfortable",
     textAccent: "low",
     headingFont: "sans-serif",
     bodyFont: "sans-serif",
@@ -63,9 +60,6 @@ const boldPreset: Preset = {
     borderRadius: "full",
     borderWidth: "large",
     elevation: "medium",
-    space: "large",
-    size: "large",
-    density: "comfortable",
     textAccent: "high",
     headingFont: "sans-serif",
     bodyFont: "sans-serif",
@@ -88,9 +82,6 @@ const roundedPreset: Preset = {
     borderRadius: "large",
     borderWidth: "small",
     elevation: "small",
-    space: "medium",
-    size: "medium",
-    density: "comfortable",
     textAccent: "high",
     headingFont: "sans-serif",
     bodyFont: "sans-serif",
@@ -142,10 +133,10 @@ describe("Theme Preset System", () => {
       registerPreset("minimal", minimalPreset);
       const updated: Preset = {
         ...minimalPreset,
-        knobs: { ...minimalPreset.knobs, space: "large" },
+        knobs: { ...minimalPreset.knobs, textAccent: "high" },
       };
       registerPreset("minimal", updated);
-      expect(getPreset("minimal")?.knobs.space).toBe("large");
+      expect(getPreset("minimal")?.knobs.textAccent).toBe("high");
     });
   });
 
@@ -158,16 +149,16 @@ describe("Theme Preset System", () => {
       const resolved = resolveThemeFromPreset("minimal", {});
       expect(resolved.knobs.borderRadius).toBe("none");
       expect(resolved.knobs.elevation).toBe("none");
-      expect(resolved.knobs.space).toBe("small");
+      expect(resolved.knobs.textAccent).toBe("low");
     });
 
     it("merges overrides on top of preset config", () => {
       registerPreset("minimal", minimalPreset);
-      const overrides = { borderRadius: "full" as const, space: "large" as const };
+      const overrides = { borderRadius: "full" as const, textAccent: "high" as const };
       const resolved = resolveThemeFromPreset("minimal", overrides);
       // Overrides win
       expect(resolved.knobs.borderRadius).toBe("full");
-      expect(resolved.knobs.space).toBe("large");
+      expect(resolved.knobs.textAccent).toBe("high");
       // Preset defaults preserved for non-overridden props
       expect(resolved.knobs.elevation).toBe("none");
       expect(resolved.knobs.fillStyle).toBe("outlined");
@@ -201,7 +192,7 @@ describe("Theme Preset System", () => {
       const resolved2 = resolveThemeFromPreset("bold", {});
       expect(resolved2.knobs.elevation).toBe("medium"); // bold preset's value
       expect(resolved2.knobs.borderRadius).toBe("full"); // bold preset's value
-      expect(resolved2.knobs.space).toBe("large"); // bold preset's value
+      expect(resolved2.knobs.fontWeight).toBe("bold"); // bold preset's value
     });
   });
 
@@ -267,3 +258,19 @@ describe("Theme Preset System", () => {
     });
   });
 });
+
+describe("token-scale presets (FZ-7158 WP-a2)", () => {
+  it("dense and roomy differ from the default only in their token scale", async () => {
+    const { defaultPreset, densePreset, roomyPreset } = await import("./presets");
+    expect(JSON.stringify(densePreset.knobs)).toBe(JSON.stringify(defaultPreset.knobs));
+    expect(JSON.stringify(roomyPreset.knobs)).toBe(JSON.stringify(defaultPreset.knobs));
+    const { scale: _dense, ...denseRest } = densePreset;
+    const { scale: _roomy, ...roomyRest } = roomyPreset;
+    const { scale: _default, ...defaultRest } = defaultPreset;
+    expect(denseRest).toEqual(defaultRest);
+    expect(roomyRest).toEqual(defaultRest);
+    expect(densePreset.scale).toEqual({ control: 36, type: 14 });
+    expect(roomyPreset.scale).toEqual({ control: 48, type: 16 });
+    expect(defaultPreset.scale).toEqual({ control: 40, type: 15 });
+  });
+});

package/src/theme/presets.ts

@@ -1,6 +1,7 @@
 import type { ThemeName } from "@tamagui/web";
 import { defaultIntents } from "./intents";
 import type { Preset } from "./preset.types";
+import { defaultScaleInputs } from "./scale/scaleInputs";
 
 export const defaultPreset: Preset = {
   theme: "" as ThemeName,
@@ -10,9 +11,6 @@ export const defaultPreset: Preset = {
     cornerSmoothing: "round",
     borderWidth: "medium",
     elevation: "small",
-    space: "medium",
-    size: "medium",
-    density: "comfortable",
     textAccent: "high",
     headingFont: "sans-serif",
     bodyFont: "sans-serif",
@@ -34,6 +32,7 @@ export const defaultPreset: Preset = {
   },
   intents: defaultIntents,
   tints: ["orange", "blue", "purple", "pink"] as ThemeName[],
+  scale: defaultScaleInputs,
 };
 
 export const boldPreset: Preset = {
@@ -44,9 +43,6 @@ export const boldPreset: Preset = {
     cornerSmoothing: "round",
     borderWidth: "none",
     elevation: "none",
-    space: "small",
-    size: "medium",
-    density: "comfortable",
     textAccent: "high",
     headingFont: "sans-serif",
     bodyFont: "sans-serif",
@@ -71,10 +67,8 @@ export const boldPreset: Preset = {
 };
 
 /**
- * Marketing / hero surface preset (D-11 hero-H1 dial, owner ruling
- * 2026-08-12). Identical to `defaultPreset` except the page title returns to
- * the display step ($10 = 64px): product screens are wayfinding and take the
- * moderate step by default, so the loud scale has to be ASKED for.
+ * Marketing / hero preset: default knobs with the display title step
+ * ($12 = 52px at type 15). Product presets keep the moderate step.
  *
  * @example Whole marketing app
  * createDefaultThemeConfig({ presets: { default: defaultPreset, hero: heroPreset } })
@@ -88,3 +82,21 @@ export const heroPreset: Preset = {
   ...defaultPreset,
   knobs: { ...defaultPreset.knobs, pageTitleScale: "display" },
 };
+
+/**
+ * `defaultPreset` on a tighter token scale ($4 = 36, body 14). Knobs are
+ * identical to the default's: every px it saves comes from token values.
+ */
+export const densePreset: Preset = {
+  ...defaultPreset,
+  scale: { control: 36, type: 14 },
+};
+
+/**
+ * `defaultPreset` on a roomier token scale ($4 = 48, body 16). Knobs are
+ * identical to the default's: every px it adds comes from token values.
+ */
+export const roomyPreset: Preset = {
+  ...defaultPreset,
+  scale: { control: 48, type: 16 },
+};

package/src/theme/radiusClass.spec.ts

@@ -3,6 +3,8 @@ import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { pathToFileURL } from "node:url";
 import { afterAll, describe, expect, it } from "vitest";
+import { generateScale } from "./scale/generateScale";
+import { defaultScaleInputs } from "./scale/scaleInputs";
 import type { BorderRadius } from "./knobs";
 import { radiusOverrideFor, resolveRadiusClass, resolveRadiusForPart } from "./radiusClass";
 import {
@@ -12,7 +14,7 @@ import {
   RADIUS_RESOLUTION_STOPS,
   RADIUS_RESOLUTION_TABLE,
 } from "./radiusClassTable.generated";
-import { capContainerRadius } from "./resolveKnobs";
+import { capContainerRadius, panelPaddingPx } from "./resolveKnobs";
 
 // The generator is the doctrine's reading end — the spec imports it directly so a
 // doctrine edit and a generated-table edit are compared in the same run. Vite
@@ -25,15 +27,29 @@ const doctrine = registry.readRadiusClassDoctrine();
 
 const STOPS = ["none", "small", "medium", "large", "full"] as const;
 
-// Sample geometry: a 44px control (h/2 = 22) and the three space-stop paddings
-// the doctrine names (13/18/32 — panelPaddingPxMap).
-const H = 44;
-const PADS = { small: 13, medium: 18, large: 32 } as const;
+const scale = generateScale(defaultScaleInputs).tokens;
+const H = scale.size.$4;
+const PADS = { small: scale.space.$3, medium: scale.space.$4, large: scale.space.$6 } as const;
+const radiusStops = {
+  none: scale.radius[0],
+  small: scale.radius[2],
+  medium: scale.radius[4],
+  large: scale.radius[6],
+  full: scale.radius[12],
+};
+
+const containerStops = {
+  none: 0,
+  small: scale.radius[4],
+  medium: scale.radius[6],
+  large: scale.radius[8],
+  full: scale.radius[12],
+};
 
 describe("the doctrine table, cell by cell (DG-RAD-01..04)", () => {
   const expected: Record<string, Record<BorderRadius, number>> = {
-    DEFAULT: { none: 0, small: 5, medium: 9, large: 16, full: 50 },
-    "CIRCULAR-AT-FULL": { none: 0, small: 5, medium: 9, large: 16, full: H / 2 },
+    DEFAULT: radiusStops,
+    "CIRCULAR-AT-FULL": { ...radiusStops, full: H / 2 },
     BINARY: { none: 0, small: H / 2, medium: H / 2, large: H / 2, full: H / 2 },
   };
 
@@ -49,11 +65,12 @@ describe("the doctrine table, cell by cell (DG-RAD-01..04)", () => {
     }
   }
 
-  const containerCap: Record<keyof typeof PADS, Record<BorderRadius, number>> = {
-    small: { none: 0, small: 5, medium: 9, large: 13, full: 13 },
-    medium: { none: 0, small: 5, medium: 9, large: 16, full: 18 },
-    large: { none: 0, small: 5, medium: 9, large: 16, full: 32 },
-  };
+  const containerCap = Object.fromEntries(
+    Object.entries(PADS).map(([name, padding]) => [
+      name,
+      Object.fromEntries(STOPS.map((stop) => [stop, Math.min(containerStops[stop], padding)])),
+    ]),
+  ) as Record<keyof typeof PADS, Record<BorderRadius, number>>;
 
   for (const space of Object.keys(containerCap) as (keyof typeof PADS)[]) {
     for (const stop of STOPS) {
@@ -66,36 +83,38 @@ describe("the doctrine table, cell by cell (DG-RAD-01..04)", () => {
   }
 });
 
-describe("capContainerRadius agrees with the CONTAINER-CAP column (DG-RAD-04, unchanged)", () => {
+describe("capContainerRadius agrees with the CONTAINER-CAP column (DG-RAD-04)", () => {
   // capContainerRadius returns the TOKEN while it fits and the padding px once
   // it would exceed; mirror the token px scale to compare resolutions.
-  const tokenPx: Record<string, number> = { $0: 0, $2: 5, $4: 9, $6: 16, $12: 50 };
+  const tokenPx: Record<string, number> = {
+    $0: scale.radius[0],
+    $2: scale.radius[2],
+    $4: scale.radius[4],
+    $6: scale.radius[6],
+    $8: scale.radius[8],
+    $12: scale.radius[12],
+  };
   const asPx = (value: string | number): number =>
     typeof value === "number" ? value : tokenPx[value];
 
-  for (const space of Object.keys(PADS) as (keyof typeof PADS)[]) {
-    for (const stop of STOPS) {
-      it(`at ${stop} under space=${space}`, () => {
-        expect(asPx(capContainerRadius(stop, space))).toBe(
-          resolveRadiusClass("CONTAINER-CAP", stop, { paddingPx: PADS[space] }),
-        );
-      });
-    }
+  for (const stop of STOPS) {
+    it(`at ${stop} on the panelPadding role`, () => {
+      expect(asPx(capContainerRadius(stop))).toBe(
+        resolveRadiusClass("CONTAINER-CAP", stop, { paddingPx: panelPaddingPx() }),
+      );
+    });
   }
 
-  it("the cap is the container's own padding at full, under every space", () => {
-    expect(capContainerRadius("full", "small")).toBe(13);
-    expect(capContainerRadius("full", "medium")).toBe(18);
-    expect(capContainerRadius("full", "large")).toBe(32);
+  it("the cap is the container's own padding at full", () => {
+    expect(capContainerRadius("full")).toBe(panelPaddingPx());
+    expect(panelPaddingPx()).toBe(scale.space.$4);
   });
 
-  it("the cap bites at large under space=small (16 > 13) and nowhere else below full", () => {
-    expect(capContainerRadius("large", "small")).toBe(13);
-    expect(capContainerRadius("large", "medium")).toBe("$6");
-    expect(capContainerRadius("large", "large")).toBe("$6");
-    expect(capContainerRadius("medium", "small")).toBe("$4");
-    expect(capContainerRadius("small", "small")).toBe("$2");
-    expect(capContainerRadius("none", "small")).toBe("$0");
+  it("the cap bites at large and full on the default scale", () => {
+    expect(capContainerRadius("large")).toBe(16);
+    expect(capContainerRadius("medium")).toBe("$6");
+    expect(capContainerRadius("small")).toBe("$4");
+    expect(capContainerRadius("none")).toBe("$0");
   });
 });
 
@@ -235,20 +254,20 @@ describe("the override layer wins over the class layer (DG-RAD-05)", () => {
         heightPx: glyph,
       });
       expect(resolved.source).toBe("override");
-      expect(resolved.px).toBe(stop === "none" ? 0 : 5);
+      expect(resolved.px).toBe(stop === "none" ? 0 : scale.radius[2]);
       expect(resolved.px).not.toBe(glyph / 2);
       expect(resolved.overrideWhy).toMatch(/reads as a radio/);
     }
   });
 
-  it("Checkbox at full is the clamp (5), not the kin circle (10) and not the token (50)", () => {
+  it("Checkbox at full uses the small token clamp", () => {
     const resolved = resolveRadiusForPart({
       part: "Checkbox",
       radiusClass: "CIRCULAR-AT-FULL",
       stop: "full",
       heightPx: 20,
     });
-    expect(resolved.px).toBe(5);
+    expect(resolved.px).toBe(scale.radius[2]);
   });
 
   it("the Radio disc is round at every stop, including none (R2c — R2b inverted)", () => {
@@ -274,7 +293,7 @@ describe("the override layer wins over the class layer (DG-RAD-05)", () => {
   it("an UNDECLARED part still resolves by its class", () => {
     const resolved = resolveRadiusForPart({ part: "Button", radiusClass: "DEFAULT", stop: "full" });
     expect(resolved.source).toBe("class");
-    expect(resolved.px).toBe(50);
+    expect(resolved.px).toBe(scale.radius[12]);
     expect(resolved.overrideWhy).toBeUndefined();
     // and with no part at all, the class is the resolution
     expect(resolveRadiusForPart({ radiusClass: "BINARY", stop: "medium", heightPx: H }).px).toBe(
@@ -340,7 +359,7 @@ describe("open adjudications are REPORTED, never silently skipped (MPO-56 AC-6)"
 });
 
 describe("closed R2 leftovers (RULINGS-2026-08-28)", () => {
-  it("a single-line control at full is the DEFAULT pill token (50), not clampRadiusForControl's 16 (R2d)", () => {
+  it("a single-line control at full is the DEFAULT pill token, not clampRadiusForControl's 16 (R2d)", () => {
     const resolved = resolveRadiusForPart({
       part: "Input",
       radiusClass: "DEFAULT",
@@ -348,7 +367,7 @@ describe("closed R2 leftovers (RULINGS-2026-08-28)", () => {
       heightPx: 44,
     });
     expect(resolved.source).toBe("class");
-    expect(resolved.px).toBe(50);
+    expect(resolved.px).toBe(scale.radius[12]);
     expect(resolved.px).not.toBe(16);
   });
 
@@ -365,10 +384,10 @@ describe("closed R2 leftovers (RULINGS-2026-08-28)", () => {
     expect(atNone.px).toBe(0);
     expect(
       resolveRadiusForPart({ part: "empty icon well", radiusClass: "DEFAULT", stop: "medium" }).px,
-    ).toBe(9);
+    ).toBe(scale.radius[4]);
     expect(
       resolveRadiusForPart({ part: "empty icon well", radiusClass: "DEFAULT", stop: "full" }).px,
-    ).toBe(50);
+    ).toBe(scale.radius[12]);
   });
 
   it("BINARY at none is 0 for thumb AND track — they square together (R2f)", () => {

package/src/theme/radiusClass.ts

@@ -35,6 +35,9 @@
  */
 
 import type { BorderRadius } from "./knobs";
+import { getActiveScaleTokens } from "./scale/activeScale";
+import { generateScale } from "./scale/generateScale";
+import { RADIUS_KEYS, v5ScaleInputs } from "./scale/scaleInputs";
 import {
   RADIUS_OVERRIDE_TABLE,
   RADIUS_RESOLUTION_COMPOSITION,
@@ -48,7 +51,7 @@ import {
  * The radius classes whose parts stay round at `borderRadius:none`.
  *
  * - `R-PILL` — a pill/circle at every radius value (ornamental dots, badge
- *   indicators). Size still tracks the size knob. Icon wells are DEFAULT,
+ *   indicators). Size still tracks the size token. Icon wells are DEFAULT,
  *   not R-PILL (R2e) — unless the well IS a count badge.
  * - `R-IDENTITY` — the shape IS the part's identity (Avatar, brand marks,
  *   Radio disc). Membership is enumerated in the spec table and enforced
@@ -102,15 +105,25 @@ export function radiusResolutionProps(radiusClass: "BINARY"): RadiusResolutionDe
 // ── Radius resolution (DG-RAD-01..05) ─────────────────────────
 
 /**
+ * Doctrine px cells are v5 `$radius` values; they resolve to the installed
+ * scale's radius at the same key.
+ *
  * The geometry a doctrine cell may need. `h/2` cells need the part's own
  * painted height (shorter edge); CONTAINER-CAP cells need the container's own
- * padding at the current space stop (13/18/32 — `panelPaddingPxMap`).
+ * padding (the `panelPadding` role on the installed scale, `panelPaddingPx()`).
  */
 export interface RadiusClassGeometry {
   heightPx?: number;
   paddingPx?: number;
 }
 
+const doctrineRadius = generateScale(v5ScaleInputs).tokens.radius;
+
+function doctrineRadiusPx(px: number): number {
+  const key = RADIUS_KEYS.find((key) => key !== "true" && doctrineRadius[key] === px);
+  return key === undefined ? px : getActiveScaleTokens().radius[key];
+}
+
 function resolveCell(
   cell: RadiusResolutionCell,
   geometry: RadiusClassGeometry,
@@ -118,7 +131,7 @@ function resolveCell(
 ): number {
   switch (cell.kind) {
     case "px":
-      return cell.px;
+      return doctrineRadiusPx(cell.px);
     case "half-height": {
       if (geometry.heightPx === undefined || geometry.heightPx <= 0) {
         throw new Error(
@@ -133,7 +146,7 @@ function resolveCell(
           `resolveRadiusClass: ${where} caps at the container's own padding and needs geometry.paddingPx`,
         );
       }
-      return Math.min(cell.tokenPx, geometry.paddingPx);
+      return Math.min(doctrineRadiusPx(cell.tokenPx), geometry.paddingPx);
     }
     case "padding": {
       if (geometry.paddingPx === undefined || geometry.paddingPx < 0) {

package/src/theme/radiusClassTable.generated.ts

@@ -53,9 +53,9 @@ export const RADIUS_RESOLUTION_TABLE = {
   },
   "CONTAINER-CAP": {
     none: { kind: "px", px: 0 },
-    small: { kind: "min-token-padding", tokenPx: 5 },
-    medium: { kind: "min-token-padding", tokenPx: 9 },
-    large: { kind: "min-token-padding", tokenPx: 16 },
+    small: { kind: "min-token-padding", tokenPx: 9 },
+    medium: { kind: "min-token-padding", tokenPx: 16 },
+    large: { kind: "min-token-padding", tokenPx: 22 },
     full: { kind: "padding" },
   },
 } as const satisfies Record<string, RadiusResolutionRow>;