@multiplatform.one/theme 7.2.0 → 7.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.2.0",
+  "version": "7.2.2",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -53,8 +53,8 @@
     "@tamagui/toast": "2.7.6",
     "@tamagui/web": "2.7.6",
     "react-cookie": "^8.1.2",
-    "@multiplatform.one/platform": "7.2.0",
-    "@multiplatform.one/store": "7.2.0"
+    "@multiplatform.one/platform": "7.2.2",
+    "@multiplatform.one/store": "7.2.2"
   },
   "devDependencies": {
     "@tamagui/animations-css": "2.7.6",
@@ -69,8 +69,8 @@
     "tamagui": "2.7.6",
     "typescript": "~5.9.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.2.0",
-    "@multiplatform.one/test-utils": "7.2.0"
+    "@multiplatform.one/config": "7.2.2",
+    "@multiplatform.one/test-utils": "7.2.2"
   },
   "peerDependencies": {
     "@tamagui/animations-css": "^2.0.0-rc",

package/src/theme/theme.native.tsx

@@ -2,6 +2,7 @@ import { ToastProvider } from "@tamagui/toast";
 import { useContext, useMemo } from "react";
 import { type CreateTamaguiProps, TamaguiProvider, type TamaguiProviderProps } from "tamagui";
 import type { PropsWithChildren } from "react";
+import { FontKnobStyles } from "./FontKnobStyles";
 import { PresetContext, type PresetContextValue } from "./PresetContext";
 import { defaultPreset } from "./presets";
 import { useTheme } from "./useTheme";
@@ -57,9 +58,16 @@ function KnobBridge({ children }: PropsWithChildren) {
     [knobs],
   );
 
+  const tree = (
+    <>
+      <FontKnobStyles />
+      {children}
+    </>
+  );
+
   if (existingCtx) {
-    return <>{children}</>;
+    return tree;
   }
 
-  return <PresetContext.Provider value={presetCtxValue}>{children}</PresetContext.Provider>;
+  return <PresetContext.Provider value={presetCtxValue}>{tree}</PresetContext.Provider>;
 }

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

@@ -0,0 +1,24 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+describe("ThemeProvider knob injectors", () => {
+  it("mounts FontKnobStyles inside KnobBridge so shipped apps inherit heading/body fonts", () => {
+    const src = readFileSync(join(here, "theme.tsx"), "utf8");
+    expect(src).toMatch(/import \{ FontKnobStyles \} from "\.\/FontKnobStyles"/);
+    expect(src).toContain("<FontKnobStyles");
+    expect(src).toContain("function KnobBridge");
+    const bridge = src.slice(src.indexOf("function KnobBridge"));
+    expect(bridge).toContain("<FontKnobStyles");
+  });
+
+  it("does not invent a second knob store — cookies still feed PresetContext", () => {
+    const src = readFileSync(join(here, "theme.tsx"), "utf8");
+    expect(src).toContain("readPresetCookie");
+    expect(src).toContain("readOverridesCookie");
+    expect(src).toContain("PresetContext.Provider");
+  });
+});

package/src/theme/theme.tsx

@@ -5,6 +5,7 @@ import { type CreateTamaguiProps, TamaguiProvider, type TamaguiProviderProps } f
 import type { PropsWithChildren } from "react";
 import { animationDurations } from "./animations/css";
 import { getCookieWatchList, readOverridesCookie, readPresetCookie } from "./cookies";
+import { FontKnobStyles } from "./FontKnobStyles";
 import { PresetContext, type PresetContextValue } from "./PresetContext";
 import { defaultPreset } from "./presets";
 import { getPreset } from "./shared";
@@ -155,6 +156,10 @@ export function ThemeProvider<T extends CreateTamaguiProps>({
  *
  * If an ancestor PresetContext already exists (e.g. from a Storybook decorator),
  * the bridge is a pass-through to avoid overriding it.
+ *
+ * FontKnobStyles mounts here (not only in Storybook CreatePreview) so
+ * headingFont/bodyFont restyle every shipped app that uses ThemeProvider.
+ * Hairline and corner-smoothing already self-mount on module load.
  */
 function KnobBridge({ children }: PropsWithChildren) {
   const existingCtx = useContext(PresetContext);
@@ -182,9 +187,18 @@ function KnobBridge({ children }: PropsWithChildren) {
     document.documentElement.style.setProperty("--mp-transition", `${durationMs}ms`);
   }, [animationValue]);
 
+  // Inside the provider (or the Storybook ancestor context) so the
+  // heading/body CSS vars follow the same cookie path as useResolvedKnobs.
+  const tree = (
+    <>
+      <FontKnobStyles />
+      {children}
+    </>
+  );
+
   if (existingCtx) {
-    return <>{children}</>;
+    return tree;
   }
 
-  return <PresetContext.Provider value={presetCtxValue}>{children}</PresetContext.Provider>;
+  return <PresetContext.Provider value={presetCtxValue}>{tree}</PresetContext.Provider>;
 }

package/types/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,kBAAkB,EAAmB,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO/C;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkB5D;AAMD,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,cAAc,CAAC,CAAC;IAChF,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,UAAU,CAAC,cAAc,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KAChE,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAMD,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EAAE,EAC1D,QAAQ,EACR,MAAM,EACN,WAAqB,EACrB,GAAG,YAAY,EAChB,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAiFvB"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,kBAAkB,EAAmB,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ/C;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CAkB5D;AAMD,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,cAAc,CAAC,CAAC;IAChF,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,UAAU,CAAC,cAAc,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KAChE,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAMD,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EAAE,EAC1D,QAAQ,EACR,MAAM,EACN,WAAqB,EACrB,GAAG,YAAY,EAChB,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAiFvB"}

package/types/theme/theme.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.native.d.ts","sourceRoot":"","sources":["../../src/theme/theme.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAmB,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAS/C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,cAAc,CAAC,CAAC;IAChF,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,UAAU,CAAC,cAAc,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KAChE,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAMD,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EAAE,EAC1D,QAAQ,EACR,MAAM,EACN,WAAqB,EACrB,GAAG,YAAY,EAChB,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAevB"}
+{"version":3,"file":"theme.native.d.ts","sourceRoot":"","sources":["../../src/theme/theme.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAmB,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC9F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,cAAc,CAAC,CAAC;IAChF,MAAM,CAAC,EAAE;QACP,OAAO,EAAE,UAAU,CAAC,cAAc,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KAChE,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAMD,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EAAE,EAC1D,QAAQ,EACR,MAAM,EACN,WAAqB,EACrB,GAAG,YAAY,EAChB,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAevB"}