@multiplatform.one/theme 7.34.4 → 7.36.0

package/src/theme/Surface.stories.tsx

@@ -10,7 +10,7 @@ export default {
     docs: {
       description: {
         component:
-          "Surface paints nothing. It declares size/density intent for a subtree and nested Surfaces clamp step-down only (LC-68). The probe below is a Tamagui stack that spreads what useResolvedKnobs resolved inside the wrapper, so the measured part is the stack, never the wrapper.",
+          "Surface paints nothing. It forwards a Tamagui size token to a subtree, and nested Surfaces clamp step-down only (LC-78). The probe below is a Tamagui stack that spreads what useResolvedKnobs resolved inside the wrapper, so the measured part is the stack, never the wrapper.",
       },
     },
   },
@@ -20,8 +20,6 @@ export default {
 function Probe({ label }: { label: string }) {
   const { knobProps } = useResolvedKnobs();
   const attrs = {
-    "data-size": String(knobProps.size),
-    "data-space": String(knobProps.space),
     "data-size-token": String(knobProps.sizeToken),
     "data-gap": String(knobProps.gap.gap),
   } as Record<string, unknown>;
@@ -46,46 +44,31 @@ export const main = {
   render: () => (
     <XStack gap="$4" flexWrap="wrap" alignItems="flex-start">
       <Probe label="outside" />
-      <Surface size="small">
+      <Surface size="$3">
         <Probe label="small" />
       </Surface>
-      <Surface size="large">
+      <Surface size="$5">
         <Probe label="large" />
       </Surface>
     </XStack>
   ),
 };
 
-/** LC-68: a large request inside a small Surface resolves small; small inside large stays small. */
+/** LC-78: a $5 request inside a $3 Surface resolves $3; $3 inside $5 stays $3. */
 export const nestedClamp = {
   name: "Nested clamp",
   render: () => (
     <XStack gap="$4" flexWrap="wrap" alignItems="flex-start">
-      <Surface size="small">
-        <Surface size="large">
+      <Surface size="$3">
+        <Surface size="$5">
           <Probe label="large-in-small" />
         </Surface>
       </Surface>
-      <Surface size="large">
-        <Surface size="small">
+      <Surface size="$5">
+        <Surface size="$3">
           <Probe label="small-in-large" />
         </Surface>
       </Surface>
     </XStack>
   ),
 };
-
-/** Density steps the gap, not the control height. */
-export const density = {
-  name: "Density",
-  render: () => (
-    <XStack gap="$4" flexWrap="wrap" alignItems="flex-start">
-      <Surface density="comfortable">
-        <Probe label="comfortable" />
-      </Surface>
-      <Surface density="compact">
-        <Probe label="compact" />
-      </Surface>
-    </XStack>
-  ),
-};

package/src/theme/Surface.tsx

@@ -1,72 +1,116 @@
 import type { ReactNode } from "react";
-import { createStyledContext } from "tamagui";
+import { createStyledContext, type SizeTokens } from "tamagui";
+import { SIZE_KEYS } from "./scale/scaleInputs";
 
-export type SurfaceSize = "small" | "medium" | "large";
-export type SurfaceSizeIntent = SurfaceSize | "sm" | "md" | "lg";
-export type SurfaceDensity = "compact" | "comfortable";
-export type SurfaceIntent = { size: SurfaceSize | "unset"; density: SurfaceDensity | "unset" };
-
-const SIZE_INTENT_ALIASES: Record<SurfaceSizeIntent, SurfaceSize> = {
-  sm: "small",
-  small: "small",
-  md: "medium",
-  medium: "medium",
-  lg: "large",
-  large: "large",
-};
-
-export function normalizeSurfaceSize(size: SurfaceSizeIntent): SurfaceSize {
-  return SIZE_INTENT_ALIASES[size];
-}
+/** A Tamagui size key ("$3", "$true") or `unset` for no ceiling. */
+export type SurfaceSize = SizeTokens | "unset";
+/**
+ * `painted`: an ancestor already paints a surface box (Card, Panel), so a
+ * surface under it draws border only and no second shadow. Overlays (dialog,
+ * popover, sheet, menu, tooltip, toast) reset it: they float over the page.
+ */
+export type SurfaceIntent = { size: SurfaceSize; painted: boolean };
 
 export const SurfaceContext = createStyledContext<SurfaceIntent>({
   size: "unset",
-  density: "unset",
+  painted: false,
 });
 
-export const SURFACE_SIZE_RANK = { unset: 99, small: 0, medium: 1, large: 2 } as const;
-export const SURFACE_DENSITY_RANK = { unset: 99, compact: 0, comfortable: 1 } as const;
+const sizeKeyRank = new Map<string, number>(SIZE_KEYS.map((key, index) => [key, index]));
+sizeKeyRank.set("$true", sizeKeyRank.get("$4") ?? 0);
 
 /**
- * Nested surfaces/controls may inherit or go tighter (lower rank), never larger
- * than the parent (LC-68). `unset` parent = no ceiling. `unset` requested = inherit.
+ * Rank of a size key on the scale's sorted `$size` ladder (`$true` ranks
+ * with `$4`). Undefined for anything that is not a size key.
  */
-export function clampSurfaceSize(
-  requested: SurfaceSize | "unset",
-  parent: SurfaceSize | "unset",
-): SurfaceSize | "unset" {
-  if (parent === "unset") return requested;
-  if (requested === "unset") return parent;
-  return SURFACE_SIZE_RANK[requested] <= SURFACE_SIZE_RANK[parent] ? requested : parent;
+export function surfaceSizeRank(size: SurfaceSize): number | undefined {
+  return typeof size === "string" ? sizeKeyRank.get(size) : undefined;
 }
 
-export function clampSurfaceDensity(
-  requested: SurfaceDensity | "unset",
-  parent: SurfaceDensity | "unset",
-): SurfaceDensity | "unset" {
+/**
+ * Order two size keys on the `$size` ladder: negative when `a` is smaller
+ * than `b`, 0 when equal or either is not a size key.
+ *
+ * @example A part that draws a smaller glyph below the default control size
+ * const small = compareSizeTokens(knobProps.sizeToken, "$true") < 0;
+ */
+export function compareSizeTokens(a: SurfaceSize | string, b: SurfaceSize | string): number {
+  const rankA = surfaceSizeRank(a as SurfaceSize);
+  const rankB = surfaceSizeRank(b as SurfaceSize);
+  return rankA === undefined || rankB === undefined ? 0 : rankA - rankB;
+}
+
+/**
+ * Where a size token sits against the default control size: -1 below
+ * `$true`, 0 at it, 1 above. For parts whose own table has a row per side.
+ */
+export function sizeTokenStep(sizeToken: SurfaceSize | string): -1 | 0 | 1 {
+  return Math.sign(compareSizeTokens(sizeToken, "$true")) as -1 | 0 | 1;
+}
+
+/**
+ * The row a part's own three-row table reads at a size token: `small` below
+ * `$true`, `large` above, `medium` at it. Only for per-part px tables
+ * (glyphs, swatches); controls read the size recipe.
+ */
+export function sizeTokenStop(sizeToken: SurfaceSize | string): "small" | "medium" | "large" {
+  const step = sizeTokenStep(sizeToken);
+  return step < 0 ? "small" : step > 0 ? "large" : "medium";
+}
+
+/**
+ * The whole size key one step below `size` (`$true` reads as `$4`), floored at
+ * `$1`: a table's cells default one key below the table. A key that is not a
+ * whole step snaps to the whole key under it.
+ *
+ * @example sizeTokenBelow("$true") === "$3"
+ */
+export function sizeTokenBelow(size: SizeTokens | string): SizeTokens {
+  const key = size === "$true" ? "$4" : String(size);
+  const step = Number(key.replace(/^\$/, ""));
+  if (!Number.isFinite(step)) return "$3";
+  return `$${Math.max(1, Math.ceil(step) - 1)}` as SizeTokens;
+}
+
+/**
+ * Nested surfaces and controls inherit the ceiling or go smaller, never
+ * larger (LC-78). `unset` parent = no ceiling; `unset` requested = inherit.
+ * A request that is not a size key cannot be ranked, so under a ceiling it
+ * takes the ceiling.
+ */
+export function clampSurfaceSize(requested: SurfaceSize, parent: SurfaceSize): SurfaceSize {
   if (parent === "unset") return requested;
   if (requested === "unset") return parent;
-  return SURFACE_DENSITY_RANK[requested] <= SURFACE_DENSITY_RANK[parent] ? requested : parent;
+  const requestedRank = surfaceSizeRank(requested);
+  const parentRank = surfaceSizeRank(parent);
+  if (parentRank === undefined) return requested;
+  if (requestedRank === undefined) return parent;
+  return requestedRank <= parentRank ? requested : parent;
 }
 
 /**
- * Declares size/density INTENT for a subtree. Nested Surfaces clamp step-down
- * only — never raw gap tokens (LC-68, LC-69). Accepts sm/md/lg aliases.
+ * Forwards a size token to a subtree: every knob reader under it renders its
+ * controls at `size` unless it asks for a smaller one (LC-78 ceiling).
+ * `painted` marks (true) or resets (false) the painted-ancestor flag; omitted
+ * inherits it.
+ *
+ * @example A table cell's editors at the row's control height
+ * <Surface size="$3">{cell}</Surface>
  */
 export function Surface({
   size,
-  density,
+  painted,
   children,
 }: {
-  size?: SurfaceSizeIntent;
-  density?: SurfaceDensity;
+  size?: SizeTokens;
+  painted?: boolean;
   children?: ReactNode;
 }) {
   const parent = SurfaceContext.useStyledContext();
-  const nextSize = clampSurfaceSize(size ? normalizeSurfaceSize(size) : "unset", parent.size);
-  const nextDensity = clampSurfaceDensity(density ?? "unset", parent.density);
+  const nextSize = clampSurfaceSize(size ?? "unset", parent.size);
+  const nextPainted = painted ?? parent.painted ?? false;
   return (
-    <SurfaceContext.Provider size={nextSize} density={nextDensity}>
+    <SurfaceContext.Provider size={nextSize} painted={nextPainted}>
       {children}
     </SurfaceContext.Provider>
   );

package/src/theme/accentFloor.spec.ts

@@ -1,3 +1,4 @@
+import { themes as stockThemes } from "@tamagui/themes/v5";
 import { describe, expect, it } from "vitest";
 import { contrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
 import { createThemesBuilder } from "./createThemes";
@@ -38,19 +39,44 @@ describe("MPO-448 / MPO-449: the built accent pair holds Axiom 12", () => {
     });
   }
 
-  it("light keeps the builder's pair; dark takes the nearest steps that hold", () => {
-    expect(hex(themes.light.accentBackground)).toBe("#634fc4");
-    expect(hex(themes.light.accentColor)).toBe("#3d2e8a");
-    expect(themes.dark.accentBackground).toBe(themes.dark.accent9);
-    expect(themes.dark.accentColor).toBe(themes.dark.accent11);
+  it("uses the nearest accent steps that hold the floors", () => {
+    for (const scheme of ["light", "dark"] as const) {
+      const theme = themes[scheme];
+      const steps = Array.from({ length: 12 }, (_, i) => theme[`accent${i + 1}`]);
+      const luminance = (value: string) => relativeLuminance(hex(value));
+      const nearest = (preferred: string, candidates: string[], holds: (step: string) => boolean) =>
+        candidates
+          .filter(holds)
+          .sort(
+            (a, b) =>
+              Math.abs(luminance(a) - luminance(preferred)) -
+              Math.abs(luminance(b) - luminance(preferred)),
+          )[0];
+      expect(theme.accentBackground).toBe(
+        nearest(
+          stockThemes[scheme].accentBackground,
+          steps.slice(0, 10),
+          (fill) =>
+            Math.max(ratio(fill, theme.color1), ratio(fill, theme.color12)) >= 4.5 &&
+            ratio(fill, theme.color1) >= 3,
+        ),
+      );
+      expect(theme.accentColor).toBe(
+        nearest(stockThemes[scheme].accentColor, steps, (ink) =>
+          [theme.color1, theme.color2, theme.color3].every((surface) => ratio(ink, surface) >= 4.5),
+        ),
+      );
+    }
   });
 
-  it("the intent children carry the corrected pair and the inverse component themes keep theirs", () => {
-    for (const name of ["dark_warning", "dark_error", "dark_success"]) {
-      expect(themes[name].accentBackground).toBe(themes.dark.accentBackground);
-      expect(themes[name].accentColor).toBe(themes.dark.accentColor);
+  it("the intent children inherit the corrected accent pair", () => {
+    for (const scheme of ["light", "dark"] as const) {
+      for (const intent of ["warning", "error", "success"]) {
+        expect(themes[`${scheme}_${intent}`].accentBackground).toBe(
+          themes[scheme].accentBackground,
+        );
+        expect(themes[`${scheme}_${intent}`].accentColor).toBe(themes[scheme].accentColor);
+      }
     }
-    expect(hex(themes.dark_Tooltip.accentBackground)).toBe("#46349d");
-    expect(hex(themes.dark_Tooltip.accentColor)).toBe("#7766cc");
   });
 });

package/src/theme/activateThemeConfig.ts

@@ -1,6 +1,13 @@
-import { forceUpdateThemes, getConfig, setConfig } from "@tamagui/web";
+import { type TamaguiInternalConfig, forceUpdateThemes, getConfig, setConfig } from "@tamagui/web";
+import { type TokensGlobal, mergedTokens } from "./mergedTokens";
 import type { ThemeConfig } from "./shared";
 
+function isThemeConfig(
+  target: Pick<ThemeConfig, "tamagui"> | TamaguiInternalConfig,
+): target is Pick<ThemeConfig, "tamagui"> {
+  return "tamagui" in target && Boolean((target as Pick<ThemeConfig, "tamagui">).tamagui);
+}
+
 /**
  * Make `themeConfig` the config Tamagui resolves theme names against.
  *
@@ -9,12 +16,21 @@ import type { ThemeConfig } from "./shared";
  * full house config and its subset) the one created last wins whichever
  * config the provider is handed. Tamagui also caches resolved theme names,
  * so the cache is dropped here too: without that a name the new config lacks
- * keeps resolving to the old config's theme. Returns false when `themeConfig`
- * is already the active one.
+ * keeps resolving to the old config's theme. Takes a ThemeConfig or a built
+ * Tamagui config (a preset scale's `tamagui()`). Returns false when it is
+ * already the active one.
  */
-export function activateThemeConfig(themeConfig: ThemeConfig): boolean {
-  if (getConfig() === themeConfig.tamagui) return false;
-  setConfig(themeConfig.tamagui);
+export function activateThemeConfig(
+  themeConfig: Pick<ThemeConfig, "tamagui"> | TamaguiInternalConfig,
+): boolean {
+  const tamagui = (
+    isThemeConfig(themeConfig) ? themeConfig.tamagui : themeConfig
+  ) as TamaguiInternalConfig;
+  if (getConfig() === tamagui) return false;
+  setConfig(tamagui);
+  if (tamagui.tokensParsed) {
+    (globalThis as TokensGlobal).__tamaguiTokensMerged = mergedTokens(tamagui);
+  }
   forceUpdateThemes();
   return true;
 }

package/src/theme/animations/animations.spec.ts

@@ -0,0 +1,62 @@
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { animationsReactNative } from "@tamagui/config/v5-rn";
+import { describe, expect, it } from "vitest";
+import { animationConfig, animationDurations, animationNames, motionStops } from "./css";
+import { animationConfig as nativeConfig } from "./reactNative";
+
+describe("Tamagui v5 motion tables", () => {
+  it("orders the thirteen named stops by duration", () => {
+    expect(motionStops).toEqual([
+      "quickestLessBouncy",
+      "quickest",
+      "quickerLessBouncy",
+      "quicker",
+      "quick",
+      "quickLessBouncy",
+      "medium",
+      "superBouncy",
+      "bouncy",
+      "slow",
+      "lazy",
+      "superLazy",
+      "slowest",
+    ]);
+    expect(motionStops.map((stop) => animationDurations[stop])).toEqual([
+      60, 80, 100, 120, 150, 180, 300, 300, 350, 450, 500, 600, 800,
+    ]);
+  });
+  it("preserves every upstream CSS and native entry in order", () => {
+    const keys = Object.keys(animationsCSS.animations);
+    expect(keys).toHaveLength(22);
+    expect(animationNames.slice(0, 22)).toEqual(keys);
+    expect(Object.keys(nativeConfig).slice(0, 22)).toEqual(keys);
+    for (const key of keys) {
+      expect(animationConfig[key as keyof typeof animationConfig]).toEqual(
+        animationsCSS.animations[key as keyof typeof animationsCSS.animations],
+      );
+      expect(nativeConfig[key as keyof typeof nativeConfig]).toEqual(
+        animationsReactNative.animations[key as keyof typeof animationsReactNative.animations],
+      );
+    }
+  });
+
+  it("maps house aliases to their nearest v5 duration", () => {
+    for (const [alias, stop] of [
+      ["tooltip", "slow"],
+      ["snappy", "quickest"],
+      ["gentle", "slow"],
+    ] as const) {
+      expect(animationConfig[alias]).toEqual(animationConfig[stop]);
+      expect(nativeConfig[alias]).toEqual(nativeConfig[stop]);
+    }
+  });
+
+  it("uses v5 easing and derives every duration from its CSS value", () => {
+    expect(animationConfig.quick).toBe("150ms cubic-bezier(0.25, 0.1, 0.25, 1)");
+    for (const key of animationNames) {
+      expect(animationConfig[key]).not.toContain("ease-in ");
+      expect(animationConfig[key]).not.toContain("ease-in-out");
+      expect(animationDurations[key]).toBe(Number.parseInt(animationConfig[key], 10));
+    }
+  });
+});

package/src/theme/animations/css.ts

@@ -1,38 +1,12 @@
 import { createAnimations } from "@tamagui/animations-css";
-
-/**
- * The CSS driver's named durations.
- *
- * `bouncy`, `lazy`, `slow`, `medium` and `quick` are Tamagui's own names and
- * carry Tamagui's own values — a shared name that means something different
- * here is worse than no name, because every consumer reading `animation="medium"`
- * against the upstream docs gets a different answer than the one it renders.
- * MPO-19 X10: `medium` was `ease-in-out 250ms` against stock `ease-in 300ms`,
- * with no improvement argument written down anywhere.
- *
- * `tooltip`, `snappy` and `gentle` are additive — names Tamagui does not use,
- * so they are ours to set and are not a contradiction.
- */
-export const animationConfig = {
-  bouncy: "ease-in 200ms",
-  lazy: "ease-in 600ms",
-  slow: "ease-in 500ms",
-  medium: "ease-in 300ms",
-  quick: "ease-in 100ms",
-  tooltip: "ease-in 400ms",
-  snappy: "ease-out 80ms",
-  gentle: "ease-in-out 450ms",
-} as const;
-
-export type AnimationName = keyof typeof animationConfig;
-export const animationNames = Object.keys(animationConfig) as AnimationName[];
+import { animationConfig } from "../motionTiming";
+
+export {
+  animationConfig,
+  animationDurations,
+  animationNames,
+  type AnimationName,
+} from "../motionTiming";
 export const animations = createAnimations(animationConfig);
 
-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 { motionStops, type MotionStop } from "../motionStops";

package/src/theme/animations/reactNative.ts

@@ -1,55 +1,128 @@
 import { createAnimations } from "@tamagui/animations-react-native";
 
-/**
- * Canonical spring vocabulary. Exported so native gesture code can drive
- * RN `Animated.spring` (which provides completion callbacks) with the exact
- * same physics as Tamagui's `transition` tokens — one closed vocabulary.
- */
 export const animationConfig = {
+  "0ms": {
+    type: "timing",
+    duration: 0,
+  },
+  "50ms": {
+    type: "timing",
+    duration: 50,
+  },
+  "75ms": {
+    type: "timing",
+    duration: 75,
+  },
+  "100ms": {
+    type: "timing",
+    duration: 100,
+  },
+  "200ms": {
+    type: "timing",
+    duration: 200,
+  },
+  "250ms": {
+    type: "timing",
+    duration: 250,
+  },
+  "300ms": {
+    type: "timing",
+    duration: 300,
+  },
+  "400ms": {
+    type: "timing",
+    duration: 400,
+  },
+  "500ms": {
+    type: "timing",
+    duration: 500,
+  },
+  superBouncy: {
+    type: "spring",
+    damping: 5,
+    mass: 0.7,
+    stiffness: 180,
+  },
   bouncy: {
     type: "spring",
     damping: 9,
     mass: 0.9,
-    stiffness: 150,
+    stiffness: 120,
+  },
+  superLazy: {
+    type: "spring",
+    damping: 25,
+    mass: 2,
+    stiffness: 25,
   },
   lazy: {
     type: "spring",
     damping: 18,
-    stiffness: 50,
+    mass: 0.2,
+    stiffness: 10,
   },
-  slow: {
+  medium: {
+    damping: 16,
+    stiffness: 90,
+    mass: 0.8,
+  },
+  slowest: {
     type: "spring",
     damping: 15,
-    stiffness: 40,
+    stiffness: 10,
   },
-  medium: {
+  slow: {
     type: "spring",
-    damping: 15,
-    mass: 1,
-    stiffness: 120,
+    damping: 45,
+    stiffness: 60,
   },
   quick: {
     type: "spring",
-    damping: 20,
-    mass: 1.2,
-    stiffness: 250,
+    damping: 25,
+    mass: 1,
+    stiffness: 550,
+  },
+  quickLessBouncy: {
+    type: "spring",
+    damping: 40,
+    mass: 2,
+    stiffness: 400,
+  },
+  quicker: {
+    type: "spring",
+    damping: 16,
+    mass: 0.6,
+    stiffness: 700,
+  },
+  quickerLessBouncy: {
+    type: "spring",
+    damping: 27,
+    mass: 0.45,
+    stiffness: 750,
+  },
+  quickest: {
+    damping: 15,
+    mass: 0.6,
+    stiffness: 400,
+  },
+  quickestLessBouncy: {
+    damping: 24,
+    mass: 0.35,
+    stiffness: 750,
   },
   tooltip: {
     type: "spring",
-    damping: 10,
-    mass: 0.9,
-    stiffness: 100,
+    damping: 45,
+    stiffness: 60,
   },
   snappy: {
-    type: "spring",
-    damping: 28,
-    mass: 0.8,
-    stiffness: 350,
+    damping: 15,
+    mass: 0.6,
+    stiffness: 400,
   },
   gentle: {
     type: "spring",
-    damping: 12,
-    mass: 1.4,
+    damping: 45,
     stiffness: 60,
   },
 } as const;

package/src/theme/boundaryFloor.spec.ts

@@ -0,0 +1,57 @@
+import { configWithoutAnimations } from "@tamagui/config";
+import { createTamagui } from "tamagui";
+import { describe, expect, it } from "vitest";
+import { contrastRatio, minContrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
+import { createThemesBuilder } from "./createThemes";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+
+const inputThemes: Record<string, Record<string, string>> = {};
+
+const themes = createThemesBuilder(defaultBaseTheme, defaultAccentTheme, {
+  ...defaultBuilderOptions,
+  getTheme: (props) => {
+    inputThemes[props.name] = props.theme;
+    return defaultBuilderOptions.getTheme!(props);
+  },
+}).themes() as Record<string, Record<string, string>>;
+const config = createTamagui({ ...configWithoutAnimations, themes });
+
+function ratio(a: string, b: string) {
+  const aHex = normalizeToHex(a);
+  const bHex = normalizeToHex(b);
+  if (!aHex || !bHex) throw new Error(`Expected opaque colours: ${a}, ${b}`);
+  return contrastRatio(relativeLuminance(aHex), relativeLuminance(bHex));
+}
+
+describe("DF-06 / WCAG 1.4.11: control boundaries hold 3:1", () => {
+  for (const [name, theme] of Object.entries(themes).filter(
+    ([, theme]) => theme.color5 !== undefined,
+  )) {
+    it(`${name} holds the boundary floor`, () => {
+      expect(theme.boundaryColor).toBeTruthy();
+      const surfaces = [theme.background, theme.color3, theme.color5];
+      const minimum = (ink: string) => Math.min(...surfaces.map((surface) => ratio(ink, surface)));
+      // Tint text is neutralized after getBaseTheme; selection uses the input ramp.
+      const candidates = [8, 9, 10, 11, 12].map((step) => inputThemes[name][`color${step}`]);
+      const firstHolding = candidates.find((ink) => minimum(ink) >= minContrastRatio);
+      expect(minimum(theme.boundaryColor)).toBeGreaterThanOrEqual(minContrastRatio);
+      expect(theme.boundaryColor).toBe(firstHolding);
+    });
+  }
+
+  it.each([
+    "light_Switch",
+    "dark_error_InputContainerFrame",
+    "light_ProgressIndicator",
+    "dark_ProgressIndicator",
+    "light_alt1",
+    "dark_error_active",
+  ])("%s resolves its parent's boundary through Tamagui's theme proxy", (name) => {
+    const parent = name.slice(0, name.lastIndexOf("_"));
+    expect(Object.hasOwn(themes[name], "boundaryColor")).toBe(false);
+    expect(config.themes[parent].boundaryColor?.val).toBeTruthy();
+    expect(config.themes[name].boundaryColor?.val).toBe(config.themes[parent].boundaryColor.val);
+  });
+});