@multiplatform.one/theme 7.34.4 → 7.36.0

package/src/theme/motion.spec.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest";
+import { animationConfig, animationDurations, motionStops } from "./animations/css";
+import {
+  motionFor,
+  motionDurationMs,
+  motionSeconds,
+  motionSettleMs,
+  motionHideDelayMs,
+  motionRoleProperties,
+} from "./motion";
+
+describe("motion roles", () => {
+  it("assigns quick's control, overlay, scrim, reveal and slide stops", () => {
+    expect(
+      Object.fromEntries(
+        Object.entries(motionFor("quick")).map(([role, value]) => [role, value.transition]),
+      ),
+    ).toEqual({
+      control: "quick",
+      overlay: "quicker",
+      scrim: "slow",
+      reveal: "medium",
+      slide: "medium",
+    });
+  });
+  it("silences every role at none while retaining property scopes", () => {
+    for (const [name, role] of Object.entries(motionFor("none"))) {
+      expect(role.transition).toBeUndefined();
+      expect(role.animateOnly).toEqual(
+        motionRoleProperties[name as keyof typeof motionRoleProperties],
+      );
+    }
+  });
+  it("selects registered non-bouncy role stops by nearest duration, ties faster", () => {
+    const candidates = motionStops.filter((stop) => stop !== "bouncy" && stop !== "superBouncy");
+    for (const stop of motionStops) {
+      const roles = motionFor(stop);
+      expect(roles.control.transition).toBe(stop);
+      for (const [name, factor] of [
+        ["overlay", 0.8],
+        ["scrim", 3],
+        ["reveal", 2],
+        ["slide", 2],
+      ] as const) {
+        const closest = [...candidates].sort(
+          (a, b) =>
+            Math.abs(animationDurations[a] - animationDurations[stop] * factor) -
+              Math.abs(animationDurations[b] - animationDurations[stop] * factor) ||
+            animationDurations[a] - animationDurations[b],
+        )[0];
+        expect(roles[name].transition).toBe(closest);
+        expect(roles[name].transition).toBeOneOf(Object.keys(animationConfig));
+      }
+    }
+    expect(motionFor("quickestLessBouncy").reveal.transition).toBe("quicker");
+  });
+  it("limits properties to each role's anatomy", () => {
+    expect(motionRoleProperties).toEqual({
+      control: ["backgroundColor", "borderColor", "color", "opacity", "transform"],
+      overlay: ["opacity", "transform"],
+      scrim: ["opacity"],
+      reveal: ["height", "opacity", "transform"],
+      slide: ["opacity", "transform"],
+    });
+  });
+});
+
+describe("motion durations", () => {
+  it("derives duration, seconds, settle and hide delays from every table entry", () => {
+    for (const token of Object.keys(animationConfig) as (keyof typeof animationConfig)[]) {
+      expect(motionDurationMs(token)).toBe(animationDurations[token]);
+      expect(motionSeconds(token)).toBe(animationDurations[token] / 1000);
+      expect(motionSettleMs(token)).toBe(Math.max(300, 3 * animationDurations[token]) + 80);
+      expect(motionHideDelayMs(token)).toBe(animationDurations[token] + 50);
+    }
+  });
+  it("uses zero at none and 300ms for structured transitions", () => {
+    expect(motionDurationMs(undefined)).toBe(0);
+    expect(motionSeconds(undefined)).toBe(0);
+    expect(motionSettleMs(undefined)).toBe(0);
+    expect(motionDurationMs(["quick", { opacity: "slow" }])).toBe(300);
+    expect(motionSettleMs(["quick", { opacity: "slow" }])).toBe(980);
+  });
+});

package/src/theme/motion.ts

@@ -0,0 +1,53 @@
+import type { TransitionProp } from "tamagui";
+import type { Animation } from "./knobs";
+import { motionStops, type MotionStop } from "./motionStops";
+import { animationDurations, motionDurationMs } from "./motionTiming";
+
+export { motionDurationMs, motionHideDelayMs, motionSeconds, motionSettleMs } from "./motionTiming";
+
+export type MotionRoleName = "control" | "overlay" | "scrim" | "reveal" | "slide";
+
+export interface MotionRole {
+  transition: TransitionProp | undefined;
+  animateOnly: readonly string[];
+}
+
+export const motionRoleProperties = {
+  control: ["backgroundColor", "borderColor", "color", "opacity", "transform"],
+  overlay: ["opacity", "transform"],
+  scrim: ["opacity"],
+  reveal: ["height", "opacity", "transform"],
+  slide: ["opacity", "transform"],
+} as const satisfies Record<MotionRoleName, readonly string[]>;
+
+const nonBouncyStops = motionStops.filter((stop) => stop !== "superBouncy" && stop !== "bouncy");
+
+function nearestStop(duration: number): MotionStop {
+  return nonBouncyStops.reduce((nearest, candidate) =>
+    Math.abs(animationDurations[candidate] - duration) <
+    Math.abs(animationDurations[nearest] - duration)
+      ? candidate
+      : nearest,
+  );
+}
+
+export function motionFor(stop: Animation): Record<MotionRoleName, MotionRole> {
+  const transition = stop === "none" ? undefined : stop;
+  const duration = motionDurationMs(transition);
+  const role = (name: MotionRoleName, factor: number): MotionRole => ({
+    transition:
+      transition === undefined
+        ? undefined
+        : name === "control"
+          ? transition
+          : nearestStop(duration * factor),
+    animateOnly: motionRoleProperties[name],
+  });
+  return {
+    control: role("control", 1),
+    overlay: role("overlay", 0.8),
+    scrim: role("scrim", 3),
+    reveal: role("reveal", 2),
+    slide: role("slide", 2),
+  };
+}

package/src/theme/motionStops.ts

@@ -0,0 +1,17 @@
+export const motionStops = [
+  "quickestLessBouncy",
+  "quickest",
+  "quickerLessBouncy",
+  "quicker",
+  "quick",
+  "quickLessBouncy",
+  "medium",
+  "superBouncy",
+  "bouncy",
+  "slow",
+  "lazy",
+  "superLazy",
+  "slowest",
+] as const;
+
+export type MotionStop = (typeof motionStops)[number];

package/src/theme/motionTiming.ts

@@ -0,0 +1,59 @@
+import type { TransitionProp } from "tamagui";
+
+export const animationConfig = {
+  "0ms": "0ms linear",
+  "50ms": "50ms linear",
+  "75ms": "75ms linear",
+  "100ms": "100ms ease-out",
+  "200ms": "200ms ease-out",
+  "250ms": "250ms ease-out",
+  "300ms": "300ms ease-out",
+  "400ms": "400ms ease-out",
+  "500ms": "500ms ease-out",
+  superBouncy: "300ms cubic-bezier(0.175, 0.885, 0.32, 1.5)",
+  bouncy: "350ms cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  superLazy: "600ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  lazy: "500ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  medium: "300ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  slowest: "800ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  slow: "450ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  quick: "150ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  quickLessBouncy: "180ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  quicker: "120ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  quickerLessBouncy: "100ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  quickest: "80ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  quickestLessBouncy: "60ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  tooltip: "450ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  snappy: "80ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  gentle: "450ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+} as const;
+export type AnimationName = keyof typeof animationConfig;
+export const animationNames = Object.keys(animationConfig) as AnimationName[];
+
+function parseDurationMs(timing: string): number {
+  const match = timing.match(/(\d+)\s*ms/);
+  return match ? Number.parseInt(match[1], 10) : 200;
+}
+
+export const animationDurations: Record<AnimationName, number> = Object.fromEntries(
+  Object.entries(animationConfig).map(([k, v]) => [k, parseDurationMs(v)]),
+) as Record<AnimationName, number>;
+
+export function motionDurationMs(transition: TransitionProp | undefined): number {
+  if (transition === undefined) return 0;
+  return typeof transition === "string" && Object.hasOwn(animationDurations, transition)
+    ? animationDurations[transition as AnimationName]
+    : 300;
+}
+
+export function motionSeconds(transition: TransitionProp | undefined): number {
+  return motionDurationMs(transition) / 1000;
+}
+
+export function motionSettleMs(transition: TransitionProp | undefined): number {
+  return transition === undefined ? 0 : Math.max(300, 3 * motionDurationMs(transition)) + 80;
+}
+
+export function motionHideDelayMs(transition: TransitionProp | undefined): number {
+  return motionDurationMs(transition) + 50;
+}

package/src/theme/mpo13Proof.spec.ts

@@ -14,53 +14,48 @@
 
 import { describe, expect, it } from "vitest";
 import { layoutBreakpoints, OVERLAY_BREAKPOINT } from "./layoutTokens";
+import { defaultScaleInputs, v5ScaleInputs } from "./scale/scaleInputs";
+import { generateScale } from "./scale/generateScale";
 import { DEFAULT_SIZE_RECIPE_INPUTS, generateSizeRecipes, sizeRecipeForToken } from "./sizeRecipes";
 
-/** Stock Tamagui token scales, read from the live CSS variables (§4). */
-const tamaguiSize = {
-  $1: 20,
-  "$1.5": 24,
-  $2: 28,
-  "$2.5": 32,
-  $3: 36,
-  "$3.5": 40,
-  $4: 44,
-  $true: 44,
-  $5: 52,
-  $6: 64,
-} as const;
-
-const tamaguiRadiusTrue = 9;
-const tamaguiSpaceTrue = 18;
-
-describe("MPO-13 C1/C2 — $4 means ONE height, and it is 44", () => {
-  it("every recipe height equals the raw Tamagui $size token at the same key", () => {
+const houseScale = generateScale(defaultScaleInputs);
+
+describe("MPO-13 C1/C2 — $4 means ONE height, and it is 40", () => {
+  it("every recipe height equals the generated $size token at the same key", () => {
     const { heights } = generateSizeRecipes(DEFAULT_SIZE_RECIPE_INPUTS);
-    for (const [token, px] of Object.entries(tamaguiSize)) {
+    for (const token of Object.keys(heights)) {
+      const px = houseScale.tokens.size[token as keyof typeof houseScale.tokens.size];
       expect(heights[token], `heights.${token}`).toBe(px);
     }
   });
 
-  it("baseHeight is $size.true, so recipe and token cannot re-diverge", () => {
-    expect(DEFAULT_SIZE_RECIPE_INPUTS.baseHeight).toBe(tamaguiSize.$true);
-    expect(sizeRecipeForToken("$4").height).toBe(tamaguiSize.$4);
+  it("control is $size.true, so recipe and token cannot re-diverge", () => {
+    expect(DEFAULT_SIZE_RECIPE_INPUTS.control).toBe(houseScale.tokens.size.$true);
+    expect(sizeRecipeForToken("$4").height).toBe(houseScale.tokens.size.$4);
     expect(sizeRecipeForToken("$true").height).toBe(sizeRecipeForToken("$4").height);
   });
 
-  it("the $4 control is the measured 44 / 18 / 14 / 16 / 9", () => {
+  it("the $4 control is 40 / 16 / 15 / 16 / 8", () => {
     expect(sizeRecipeForToken("$4")).toEqual({
-      height: 44,
-      paddingHorizontal: 18,
-      fontSize: 14,
+      height: 40,
+      paddingHorizontal: 16,
+      fontSize: 15,
       iconSize: 16,
-      gap: 9,
+      gap: 8,
     });
   });
 });
 
-describe("MPO-13 C3 — radius is $radius.true = 9", () => {
+it("v5 inputs retain the original size, space and radius anchors", () => {
+  const { tokens } = generateScale(v5ScaleInputs);
+  expect(tokens.size.$4).toBe(44);
+  expect(tokens.space.$4).toBe(18);
+  expect(tokens.radius.true).toBe(9);
+});
+
+describe("MPO-13 C3 — radius is $radius.true = 8", () => {
   it("radiusPx is the stored input, at the measured value", () => {
-    expect(DEFAULT_SIZE_RECIPE_INPUTS.radiusPx).toBe(tamaguiRadiusTrue);
+    expect(DEFAULT_SIZE_RECIPE_INPUTS.radiusPx).toBe(houseScale.tokens.radius.true);
   });
 
   it("gap tracks radius exactly at $4 (the reference's stated rule)", () => {
@@ -78,28 +73,30 @@ describe("MPO-13 C3 — radius is $radius.true = 9", () => {
 describe("MPO-13 — the ratios are relationships, not literals", () => {
   it("padding at $4 is $space.true, ~40% of the size step (reference §4)", () => {
     const recipe = sizeRecipeForToken("$4");
-    expect(recipe.paddingHorizontal).toBe(tamaguiSpaceTrue);
+    expect(recipe.paddingHorizontal).toBe(houseScale.tokens.space.$true);
     const spaceToSize = recipe.paddingHorizontal / recipe.height;
     expect(spaceToSize).toBeGreaterThan(0.38);
     expect(spaceToSize).toBeLessThan(0.42);
   });
 
-  it("compact is one space step below control at the SAME height (LC-76)", () => {
+  it("the chip family is one space step below control at the SAME height (LC-79)", () => {
     const control = sizeRecipeForToken("$4");
-    const compact = sizeRecipeForToken("$4", { family: "controlCompact" });
-    expect(compact.height).toBe(control.height);
-    expect(compact.paddingHorizontal).toBeLessThan(control.paddingHorizontal);
-    // $space.3.5 = 16 vs $space.true = 18 — Input is one space half-step below Button.
-    expect(compact.paddingHorizontal).toBe(16);
+    const chip = sizeRecipeForToken("$4", { family: "chip" });
+    expect(chip.height).toBe(control.height);
+    expect(chip.paddingHorizontal).toBeLessThan(control.paddingHorizontal);
+    expect(chip.paddingHorizontal).toBe(houseScale.tokens.space["$3.5"]);
   });
 
-  it("re-pointing baseHeight re-derives every channel — no hardcoded 44", () => {
-    const scaled = generateSizeRecipes({ baseHeight: 88 });
+  it("re-pointing control re-derives every channel from the scale — no hardcoded 44", () => {
+    const scale = generateScale({ control: 80, type: 30 });
+    const scaled = generateSizeRecipes({ control: 80, type: 30 });
     const base = sizeRecipeForToken("$4");
     expect(scaled.recipes.$4.height).toBe(base.height * 2);
-    expect(scaled.recipes.$4.paddingHorizontal).toBe(base.paddingHorizontal * 2);
+    expect(scaled.recipes.$4.height).toBe(scale.tokens.size.$4);
+    // $space follows Tamagui's own sizeToSpace, which is not linear in size.
+    expect(scaled.recipes.$4.paddingHorizontal).toBe(scale.tokens.space.$4);
     expect(scaled.recipes.$4.fontSize).toBe(base.fontSize * 2);
-    expect(scaled.recipes.$4.gap).toBe(base.gap * 2);
+    expect(scaled.recipes.$4.gap).toBe(scale.tokens.radius[4]);
   });
 });
 
@@ -131,18 +128,18 @@ describe("MPO-13 C4/C5 — one breakpoint system", () => {
 });
 
 describe("MPO-13 — the touch floor stops fighting the desktop ramp", () => {
-  it("$4 meets the 44 floor natively; touch lifts it, never shrinks it", () => {
+  it("$4 is below the touch floor; touch lifts it, never shrinks it", () => {
     const desktop = sizeRecipeForToken("$4");
     const touch = sizeRecipeForToken("$4", { touch: true });
-    expect(desktop.height).toBe(DEFAULT_SIZE_RECIPE_INPUTS.touchFloor);
-    expect(touch.height).toBeGreaterThanOrEqual(desktop.height);
+    expect(desktop.height).toBeLessThan(DEFAULT_SIZE_RECIPE_INPUTS.touchFloor);
+    expect(touch).toEqual({ ...desktop, height: Math.max(desktop.height, 44) });
   });
 
   it("every touch height clears the floor", () => {
     const { heightsTouch } = generateSizeRecipes(DEFAULT_SIZE_RECIPE_INPUTS);
     for (const [token, px] of Object.entries(heightsTouch)) {
-      expect(px, `heightsTouch.${token}`).toBeGreaterThanOrEqual(
-        DEFAULT_SIZE_RECIPE_INPUTS.touchFloor,
+      expect(px, `heightsTouch.${token}`).toBe(
+        Math.max(sizeRecipeForToken(token).height, DEFAULT_SIZE_RECIPE_INPUTS.touchFloor),
       );
     }
   });

package/src/theme/mpo19Proof.spec.ts

@@ -21,6 +21,7 @@
  * implement until that is settled.
  */
 
+import { animationsCSS } from "@tamagui/config/v5-css";
 import { defaultConfig } from "@tamagui/config/v5";
 import { describe, expect, it } from "vitest";
 import { animationConfig } from "./animations/css";
@@ -71,7 +72,7 @@ describe("MPO-19 X13 — one Tamagui era, and it is load-bearing", () => {
 });
 
 describe("MPO-19 X8/X9 — the type scale IS the era's, not a copy of it", () => {
-  it("body and heading tables are read from defaultConfig, not transcribed", () => {
+  it("body and heading tables follow v5 with heading true matched to size four", () => {
     // The relationship, not the literals: re-point the era and the whole
     // scale follows. A transcribed table would pass a literal snapshot and
     // fail this.
@@ -81,7 +82,10 @@ describe("MPO-19 X8/X9 — the type scale IS the era's, not a copy of it", () =>
     ] as const) {
       expect(table(ours.size), `${name}.size`).toEqual(table(theirs.size));
       expect(table(ours.lineHeight), `${name}.lineHeight`).toEqual(table(theirs.lineHeight));
-      expect(table(ours.weight), `${name}.weight`).toEqual(table(theirs.weight));
+      const weight = table(theirs.weight);
+      expect(table(ours.weight), `${name}.weight`).toEqual(
+        name === "heading" ? { ...weight, true: weight["4"] } : weight,
+      );
     }
   });
 
@@ -110,7 +114,7 @@ describe("MPO-19 X8/X9 — the type scale IS the era's, not a copy of it", () =>
     expect(weight["1"]).toBe("600");
     expect(weight["6"]).toBe("700");
     expect(weight["9"]).toBe("800");
-    // H1 is $10: compact and heavy, where mpo used to draw 64px at 400.
+    // H1 is $10 at 40px/800 on the default scale.
     expect(table(defaultHeadingFont.size)["10"]).toBe(40);
     expect(weight["10"]).toBe("800");
   });
@@ -172,7 +176,7 @@ describe("MPO-19 X4 — the interaction ramp is the template's again", () => {
     // M5's focus ring is an improvement (stock is rgba(ink, 0.2), measured
     // 1.36:1), and the semantic aliases contradict nothing.
     expect(derived).toHaveProperty("outlineColor");
-    expect(derived).toHaveProperty("placeholderColor");
+    expect(derived).not.toHaveProperty("placeholderColor");
     for (const alias of ["textMuted", "textSubtle", "borderStrong", "surfaceStrong"]) {
       expect(derived, `alias ${alias}`).toHaveProperty(alias);
     }
@@ -191,9 +195,6 @@ describe("MPO-19 X5/X6 — surfaces address semantic tokens, so sub-themes work"
   });
 
   it("a raw ramp step is inert inside surface1/surface2, which is the whole point", () => {
-    // Structural, not chromatic: `$background` resolves to `$color1` under the
-    // default template so the rendered colour did not change. What changed is
-    // that `<Theme name="surface1">` can now move it.
     const painted = Object.values(knobProps())
       .filter((v): v is Record<string, unknown> => !!v && typeof v === "object")
       .map((fragment) => fragment.backgroundColor)
@@ -225,15 +226,13 @@ describe("MPO-19 X7 — the focus ring is inset only where a clip demands it", (
 });
 
 describe("MPO-19 X10 — a shared animation name means the shared thing", () => {
-  it("medium is the stock ease and duration", () => {
-    expect(animationConfig.medium).toBe("ease-in 300ms");
+  it("medium is the v5 ease and duration", () => {
+    expect(animationConfig.medium).toBe(animationsCSS.animations.medium);
   });
 
-  it("every other shared name already matched, and still does", () => {
-    expect(animationConfig.bouncy).toBe("ease-in 200ms");
-    expect(animationConfig.lazy).toBe("ease-in 600ms");
-    expect(animationConfig.slow).toBe("ease-in 500ms");
-    expect(animationConfig.quick).toBe("ease-in 100ms");
+  it("every other shared name matches v5", () => {
+    for (const stop of ["bouncy", "lazy", "slow", "quick"] as const)
+      expect(animationConfig[stop]).toBe(animationsCSS.animations[stop]);
   });
 });
 

package/src/theme/namedInkFloor.spec.ts

@@ -0,0 +1,60 @@
+import { defaultChildrenThemes } from "@tamagui/themes/v5";
+import { describe, expect, it } from "vitest";
+import { contrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
+import { createThemesBuilder } from "./createThemes";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+
+const themes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const hex = (raw: string) => {
+  const value = normalizeToHex(raw);
+  if (!value) throw new Error(`not an opaque colour: ${raw}`);
+  return value;
+};
+const ratio = (a: string, b: string) =>
+  contrastRatio(relativeLuminance(hex(a)), relativeLuminance(hex(b)));
+
+const hues = Object.keys(defaultChildrenThemes).filter((hue) => hue !== "neutral");
+const stock = (scheme: "light" | "dark", hue: string) =>
+  hex(
+    (defaultChildrenThemes as Record<string, Record<string, Record<string, string>>>)[hue][scheme][
+      `${hue}11`
+    ],
+  );
+
+describe("named step-11 ink holds 4.5:1 on the v5 page and surface1 card", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    const theme = themes[scheme];
+    for (const hue of hues) {
+      it(`${scheme} $${hue}11 reads on $background and $color3`, () => {
+        expect(ratio(theme[`${hue}11`], theme.background)).toBeGreaterThanOrEqual(4.5);
+        expect(ratio(theme[`${hue}11`], theme.color3)).toBeGreaterThanOrEqual(4.5);
+      });
+    }
+  }
+
+  it("keeps v5's step 11 where it holds and darkens only the failing light hues", () => {
+    for (const scheme of ["light", "dark"] as const) {
+      const theme = themes[scheme];
+      for (const hue of hues) {
+        const shipped = stock(scheme, hue);
+        const holds = [theme.background, theme.color3].every(
+          (surface) => ratio(shipped, surface) >= 4.5,
+        );
+        if (holds) expect(hex(theme[`${hue}11`])).toBe(shipped);
+        else
+          expect(relativeLuminance(hex(theme[`${hue}11`]))).toBeLessThan(
+            relativeLuminance(shipped),
+          );
+      }
+    }
+    expect(hex(themes.light.green11)).not.toBe(stock("light", "green"));
+    expect(hex(themes.dark.green11)).toBe(stock("dark", "green"));
+  });
+});