@multiplatform.one/theme 7.34.3 → 7.35.0

package/src/theme/syntaxFloor.spec.ts

@@ -33,15 +33,18 @@ describe("MPO-468: code syntax ink holds Axiom 12 on the code surface", () => {
     }
   }
 
-  it("dark keeps step 11; light walks green, blue and orange toward step 12", () => {
-    for (const hue of hues) {
-      expect(themes.dark[token(hue)]).toBe(hex(themes.dark[`${hue}11`]));
+  it("keeps stock ink 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 stock = hex(theme[`${hue}11`]);
+        const holds = [theme.color3, theme[`${hue}3`]].every(
+          (surface) => ratio(stock, surface) >= 4.5,
+        );
+        if (holds) expect(theme[token(hue)]).toBe(stock);
+        else expect(relativeLuminance(theme[token(hue)])).toBeLessThan(relativeLuminance(stock));
+      }
     }
-    expect(themes.light.syntaxPurple).toBe(hex(themes.light.purple11));
-    expect(themes.light.syntaxRed).toBe(hex(themes.light.red11));
-    expect(themes.light.syntaxGreen).toBe("#207c54");
-    expect(themes.light.syntaxBlue).toBe("#0d6dc3");
-    expect(themes.light.syntaxOrange).toBe("#bb4904");
   });
 
   it("the tokens ride exactly the themes that carry the hue ramps", () => {

package/src/theme/theme.hydration.native.spec.tsx

@@ -0,0 +1,51 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { ThemeProvider } from "./theme.native";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { PresetContext, usePresetContext } from "./PresetContext";
+import { hydrateStoredPreset } from "./presetStore";
+import { boldPreset, defaultPreset } from "./presets";
+
+const pending = vi.hoisted(() => ({ finish: undefined as undefined | ((value: string) => void) }));
+vi.mock("@multiplatform.one/store", () => ({
+  storage: {
+    getItem: (key: string) =>
+      key === "mp.preset"
+        ? new Promise<string>((resolve) => {
+            pending.finish = resolve;
+          })
+        : null,
+  },
+}));
+const config = createDefaultThemeConfig({ presets: { bold: boldPreset } });
+afterEach(cleanup);
+
+it("holds first paint for async hydration, but leaves ancestor contexts usable", async () => {
+  const observed: string[] = [];
+  function Probe() {
+    const context = usePresetContext();
+    observed.push(context!.preset.knobs.borderRadius);
+    return <span data-testid="hydrated">{context!.preset.knobs.borderRadius}</span>;
+  }
+  const ancestor = render(
+    <PresetContext.Provider value={{ preset: defaultPreset }}>
+      <ThemeProvider config={config}>
+        <span>ancestor</span>
+      </ThemeProvider>
+    </PresetContext.Provider>,
+  );
+  expect(screen.getByText("ancestor")).toBeDefined();
+  render(
+    <ThemeProvider config={config}>
+      <Probe />
+    </ThemeProvider>,
+  );
+  expect(screen.queryByTestId("hydrated")).toBeNull();
+  await act(async () => {
+    pending.finish!("bold");
+    await hydrateStoredPreset();
+  });
+  expect(screen.getByTestId("hydrated").textContent).toBe(boldPreset.knobs.borderRadius);
+  expect(observed.every((radius) => radius === boldPreset.knobs.borderRadius)).toBe(true);
+  ancestor.unmount();
+});

package/src/theme/theme.native.tsx

@@ -1,12 +1,21 @@
 import { ToastProvider } from "@tamagui/toast";
-import { useContext, useMemo } from "react";
-import { type CreateTamaguiProps, TamaguiProvider, type TamaguiProviderProps } from "tamagui";
+import { Fragment, useContext, useMemo, useSyncExternalStore } from "react";
+import {
+  type CreateTamaguiProps,
+  TamaguiProvider,
+  type TamaguiProviderProps,
+  Theme,
+} from "tamagui";
 import type { PropsWithChildren } from "react";
 import { CornerSmoothingStyles } from "./cornerSmoothing";
 import { FontKnobStyles } from "./FontKnobStyles";
+import type { Knobs } from "./knobs";
 import { PresetContext, type PresetContextValue } from "./PresetContext";
+import { getStoredPreset, subscribeStoredPreset } from "./presetStore";
 import { defaultPreset } from "./presets";
-import { useTheme } from "./useTheme";
+import { resolveThemeScale, useActiveScale } from "./scale/useActiveScale";
+import { type ThemeConfig, getPreset } from "./shared";
+import { useSchemePreference } from "./useSchemePreference";
 
 // ---------------------------------------------------------------------------
 // ThemeProviderProps (simplified — knob-based theming)
@@ -17,7 +26,7 @@ export interface ThemeProviderProps<
 > extends PropsWithChildren<Omit<TamaguiProviderProps, "config" | "defaultTheme">> {
   config?: {
     tamagui: ReturnType<typeof import("tamagui").createTamagui<T>>;
-  };
+  } & Partial<Pick<ThemeConfig, "scales" | "defaultPreset">>;
   systemTheme?: "light" | "dark";
 }
 
@@ -25,39 +34,65 @@ export interface ThemeProviderProps<
 // ThemeProvider (simplified — TamaguiProvider + scheme + ToastProvider)
 // ---------------------------------------------------------------------------
 
+/**
+ * Native resolves token values (`.val`) at render and only theme subscribers
+ * re-render on a config change, so a preset whose scale differs remounts the
+ * subtree under the provider (keyed on the scale id). That is a settings-level
+ * action: local component state under the provider does not survive it.
+ * The preset persists in `@multiplatform.one/store` storage (`mp.preset`);
+ * first render waits for storage so a relaunch paints the stored scale.
+ */
 export function ThemeProvider<T extends CreateTamaguiProps>({
   children,
   config,
-  systemTheme = "light",
+  systemTheme,
   ...tamaguiProps
 }: ThemeProviderProps<T>) {
-  const activeTheme = systemTheme;
+  const scheme = useSchemePreference();
+  const activeTheme = systemTheme ?? scheme.value;
+  const ancestor = useContext(PresetContext);
+  const stored = useSyncExternalStore(subscribeStoredPreset, getStoredPreset, getStoredPreset);
+  const presetName = (ancestor ? ancestor.presetName : stored.presetName) ?? config?.defaultPreset;
+  const scaleId = useActiveScale(config, presetName);
+  const scaleConfig = resolveThemeScale(config, presetName)?.tamagui() ?? config?.tamagui;
 
   return (
     <TamaguiProvider
       {...tamaguiProps}
-      config={config?.tamagui}
+      config={scaleConfig as TamaguiProviderProps["config"]}
       defaultTheme={activeTheme}
       disableInjectCSS={false}
     >
-      <ToastProvider>
-        <KnobBridge>{children}</KnobBridge>
-      </ToastProvider>
+      {ancestor || stored.hydrated ? (
+        <Fragment key={scaleId}>
+          <ToastProvider>
+            <KnobBridge presetName={presetName} overrides={stored.overrides} scaleId={scaleId}>
+              {children}
+            </KnobBridge>
+          </ToastProvider>
+        </Fragment>
+      ) : null}
     </TamaguiProvider>
   );
 }
 
-function KnobBridge({ children }: PropsWithChildren) {
+function KnobBridge({
+  children,
+  presetName,
+  overrides,
+  scaleId,
+}: PropsWithChildren<{ presetName?: string; overrides: Partial<Knobs>; scaleId: string }>) {
   const existingCtx = useContext(PresetContext);
-  const [knobs] = useTheme();
 
-  const presetCtxValue = useMemo<PresetContextValue>(
-    () => ({
-      preset: { ...defaultPreset, knobs },
-      overrides: undefined,
-    }),
-    [knobs],
-  );
+  const presetCtxValue = useMemo<PresetContextValue>(() => {
+    const base = (presetName ? getPreset(presetName) : undefined) ?? defaultPreset;
+    return {
+      preset: { ...base, knobs: { ...base.knobs, ...overrides } },
+      overrides,
+      presetName,
+      scaleId,
+    };
+  }, [presetName, overrides, scaleId]);
 
   const tree = (
     <>
@@ -67,9 +102,12 @@ function KnobBridge({ children }: PropsWithChildren) {
     </>
   );
 
+  const theme = (existingCtx ?? presetCtxValue).preset.theme;
+  const themedTree = theme ? <Theme name={theme}>{tree}</Theme> : tree;
+
   if (existingCtx) {
-    return tree;
+    return themedTree;
   }
 
-  return <PresetContext.Provider value={presetCtxValue}>{tree}</PresetContext.Provider>;
+  return <PresetContext.Provider value={presetCtxValue}>{themedTree}</PresetContext.Provider>;
 }

package/src/theme/theme.palette.spec.tsx

@@ -0,0 +1,76 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import Cookies from "universal-cookie";
+import { CookiesProvider } from "react-cookie";
+import { afterEach, expect, it } from "vitest";
+import { useTheme, useThemeName } from "tamagui";
+import { ThemeProvider as WebProvider } from "./theme";
+import { ThemeProvider as NativeProvider } from "./theme.native";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { PresetContext } from "./PresetContext";
+import { boldPreset, defaultPreset } from "./presets";
+import { setStoredPreset } from "./presetStore";
+import { usePresetSwitch } from "./usePresetSwitch";
+
+const config = createDefaultThemeConfig({ presets: { bold: boldPreset, default: defaultPreset } });
+afterEach(cleanup);
+function Probe() {
+  const theme = useTheme();
+  return (
+    <output data-testid="palette" data-color={String(theme.color5?.val)}>
+      {useThemeName()}
+    </output>
+  );
+}
+function WebSwitch() {
+  const picker = usePresetSwitch();
+  return <button onClick={() => picker.applyPreset("bold")}>Bold</button>;
+}
+it.each([false, true])(
+  "applies selected preset palette to web descendants (ancestor: %s)",
+  (ancestor) => {
+    render(
+      <CookiesProvider cookies={new Cookies({ "mp.preset": ancestor ? "default" : "bold" })}>
+        <PresetContext.Provider value={ancestor ? { preset: boldPreset } : null}>
+          <WebProvider config={config} systemTheme="light">
+            <Probe />
+          </WebProvider>
+        </PresetContext.Provider>
+      </CookiesProvider>,
+    );
+    expect(screen.getByTestId("palette").textContent).toBe("light_pink");
+    expect(screen.getByTestId("palette").getAttribute("data-color")).toBe(
+      String(config.tamagui.themes.light_pink.color5.val),
+    );
+  },
+);
+it.each([false, true])(
+  "applies selected preset palette to native descendants (ancestor: %s)",
+  (ancestor) => {
+    setStoredPreset(ancestor ? "default" : "bold");
+    render(
+      <PresetContext.Provider value={ancestor ? { preset: boldPreset } : null}>
+        <NativeProvider config={config} systemTheme="dark">
+          <Probe />
+        </NativeProvider>
+      </PresetContext.Provider>,
+    );
+    expect(screen.getByTestId("palette").textContent).toBe("dark_pink");
+    expect(screen.getByTestId("palette").getAttribute("data-color")).toBe(
+      String(config.tamagui.themes.dark_pink.color5.val),
+    );
+  },
+);
+it("changes the live palette as well as the preset metadata", () => {
+  render(
+    <CookiesProvider cookies={new Cookies({})}>
+      <WebProvider config={config} systemTheme="light">
+        <Probe />
+        <WebSwitch />
+      </WebProvider>
+    </CookiesProvider>,
+  );
+  const initial = screen.getByTestId("palette").getAttribute("data-color");
+  act(() => screen.getByText("Bold").click());
+  expect(screen.getByTestId("palette").textContent).toBe("light_pink");
+  expect(screen.getByTestId("palette").getAttribute("data-color")).not.toBe(initial);
+});

package/src/theme/theme.preset.native.spec.tsx

@@ -0,0 +1,73 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { ThemeProvider } from "./theme.native";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { getStoredPreset, setStoredPreset } from "./presetStore";
+import { usePresetContext, PresetContext } from "./PresetContext";
+import { useResolvedKnobs } from "./useResolvedKnobs";
+import { usePresetSwitch } from "./usePresetSwitch.native";
+import { boldPreset, defaultPreset } from "./presets";
+
+const backend = vi.hoisted(() => ({ data: new Map<string, string>([["mp.preset", "bold"]]) }));
+vi.mock("@multiplatform.one/store", () => ({
+  storage: {
+    getItem: (key: string) => backend.data.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      backend.data.set(key, value);
+    },
+    removeItem: (key: string) => {
+      backend.data.delete(key);
+    },
+  },
+}));
+const config = createDefaultThemeConfig({ presets: { bold: boldPreset, default: defaultPreset } });
+afterEach(cleanup);
+function Probe() {
+  const context = usePresetContext();
+  const { knobProps } = useResolvedKnobs();
+  const picker = usePresetSwitch();
+  return (
+    <button
+      data-testid="probe"
+      data-radius={String(knobProps.borderRadius.borderRadius)}
+      onClick={() => picker.applyPreset("default")}
+    >
+      {context?.preset.knobs.borderRadius}:{context?.preset.tints.join(",")}
+    </button>
+  );
+}
+it("paints hydrated preset metadata on first mount and switches resolved knobs live across remount", () => {
+  const first = render(
+    <ThemeProvider config={config}>
+      <Probe />
+    </ThemeProvider>,
+  );
+  expect(screen.getByTestId("probe").textContent).toBe(
+    `${boldPreset.knobs.borderRadius}:${boldPreset.tints.join(",")}`,
+  );
+  const boldRadius = screen.getByTestId("probe").getAttribute("data-radius");
+  fireEvent.click(screen.getByTestId("probe"));
+  expect(screen.getByTestId("probe").textContent).toBe(
+    `${defaultPreset.knobs.borderRadius}:${defaultPreset.tints.join(",")}`,
+  );
+  expect(screen.getByTestId("probe").getAttribute("data-radius")).not.toBe(boldRadius);
+  first.unmount();
+  render(
+    <ThemeProvider config={config}>
+      <Probe />
+    </ThemeProvider>,
+  );
+  expect(getStoredPreset().presetName).toBe("default");
+  expect(screen.getByTestId("probe").textContent).toContain(defaultPreset.knobs.borderRadius);
+});
+it("preserves an ancestor preset context", () => {
+  act(() => setStoredPreset("default"));
+  render(
+    <PresetContext.Provider value={{ preset: boldPreset }}>
+      <ThemeProvider config={config}>
+        <Probe />
+      </ThemeProvider>
+    </PresetContext.Provider>,
+  );
+  expect(screen.getByTestId("probe").textContent).toContain(boldPreset.knobs.borderRadius);
+});

package/src/theme/theme.provider.spec.ts

@@ -1,7 +1,29 @@
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { describe, expect, it } from "vitest";
+import { act, cleanup, render } from "@testing-library/react";
+import { createElement, useEffect, useState } from "react";
+import { Cookies, CookiesProvider } from "react-cookie";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("./animations/index", () => ({ animations: {} }));
+
+const { items } = vi.hoisted(() => ({ items: new Map<string, string>() }));
+vi.mock("@multiplatform.one/store", () => ({
+  storage: {
+    getItem: (key: string) => items.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      items.set(key, value);
+    },
+    removeItem: (key: string) => {
+      items.delete(key);
+    },
+  },
+}));
+
+beforeEach(() => items.clear());
+
+import { useResolvedKnobs } from "./useResolvedKnobs";
 
 const here = dirname(fileURLToPath(import.meta.url));
 
@@ -31,3 +53,123 @@ describe("ThemeProvider knob injectors", () => {
     expect(src).toContain("PresetContext.Provider");
   });
 });
+
+// ── Runtime preset scale switching ───────────────────────────────────────────
+
+describe("ThemeProvider preset scale (web)", () => {
+  it("sets <html data-mp-scale> from the mp.preset cookie and keeps mounted state across a switch", async () => {
+    const { ThemeProvider } = await import("./theme");
+    const { themeConfig, cookies, mounts, values, reset } = await scaleHarness();
+    cookies.set("mp.preset", "dense", { path: "/" });
+
+    const view = render(
+      createElement(
+        CookiesProvider,
+        { cookies },
+        createElement(
+          ThemeProvider,
+          { config: themeConfig, systemTheme: "light" },
+          createElement(Probe),
+        ),
+      ),
+    );
+    expect(document.documentElement.getAttribute("data-mp-scale")).toBe("dense");
+    expect(values.control).toBe(36);
+    expect(mounts.count).toBe(1);
+    act(() => values.setTyped?.("typed"));
+    expect(values.typed).toBe("typed");
+    const sheet = document.querySelector('style[data-href="mp-scales"], style[href="mp-scales"]');
+    expect(sheet?.textContent).toContain(':root[data-mp-scale="dense"]');
+
+    act(() => cookies.set("mp.preset", "roomy", { path: "/" }));
+    expect(document.documentElement.getAttribute("data-mp-scale")).toBe("roomy");
+    expect(values.control).toBe(48);
+    expect(mounts.count).toBe(1);
+    expect(values.typed).toBe("typed");
+
+    view.unmount();
+    reset();
+  });
+});
+
+describe("ThemeProvider preset scale (native twin)", () => {
+  it("remounts the subtree, keyed on the scale id, when the stored preset changes scale", async () => {
+    const { ThemeProvider } = await import("./theme.native");
+    const { setStoredPreset } = await import("./presetStore");
+    const { themeConfig, mounts, values, reset } = await scaleHarness();
+    setStoredPreset(undefined);
+
+    const view = render(
+      createElement(
+        ThemeProvider,
+        { config: themeConfig, systemTheme: "light" },
+        createElement(Probe),
+      ),
+    );
+    expect(values.control).toBe(40);
+    expect(mounts.count).toBe(1);
+
+    act(() => setStoredPreset("dense"));
+    expect(values.control).toBe(36);
+    expect(mounts.count).toBe(2);
+
+    act(() => setStoredPreset("hero"));
+    expect(values.control).toBe(40);
+    expect(mounts.count).toBe(3);
+
+    act(() => setStoredPreset(""));
+    expect(mounts.count).toBe(3);
+
+    await vi.waitFor(() => expect(items.has("mp.preset")).toBe(false));
+    act(() => setStoredPreset("dense"));
+    await vi.waitFor(() => expect(items.get("mp.preset")).toBe("dense"));
+
+    view.unmount();
+    act(() => setStoredPreset(undefined));
+    reset();
+  });
+});
+
+const probeState: {
+  mounts: { count: number };
+  values: { control?: number; typed?: string; setTyped?: (value: string) => void };
+} = { mounts: { count: 0 }, values: {} };
+
+function Probe() {
+  const [typed, setTyped] = useState("");
+  const { knobProps } = useResolvedKnobs();
+  useEffect(() => {
+    probeState.mounts.count += 1;
+  }, []);
+  probeState.values.control = knobProps.control.height as number;
+  probeState.values.typed = typed;
+  probeState.values.setTyped = setTyped;
+  return null;
+}
+
+async function scaleHarness() {
+  const { createDefaultThemeConfig } = await import("./createDefaultThemeConfig");
+  const { densePreset, heroPreset, roomyPreset } = await import("./presets");
+  const { applyThemeScale } = await import("./scale/useActiveScale");
+  const themeConfig = createDefaultThemeConfig({
+    presets: { hero: heroPreset, dense: densePreset, roomy: roomyPreset },
+  });
+  probeState.mounts.count = 0;
+  probeState.values = {};
+  for (const cookie of document.cookie.split(";")) {
+    const name = cookie.split("=")[0]?.trim();
+    if (name) document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+  }
+  return {
+    themeConfig,
+    cookies: new Cookies(),
+    mounts: probeState.mounts,
+    values: probeState.values,
+    reset: () => {
+      cleanup();
+      document.documentElement.removeAttribute("data-mp-scale");
+      const defaults = themeConfig.scales?.default;
+      if (defaults) applyThemeScale(defaults);
+    },
+  };
+}