@multiplatform.one/theme 7.44.0 → 7.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.44.0",
+  "version": "7.45.1",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -59,8 +59,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.44.0",
-    "@multiplatform.one/store": "^7.44.0",
+    "@multiplatform.one/platform": "^7.45.1",
+    "@multiplatform.one/store": "^7.45.1",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -73,8 +73,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.44.0",
-    "@multiplatform.one/test-utils": "7.44.0",
+    "@multiplatform.one/config": "7.45.1",
+    "@multiplatform.one/test-utils": "7.45.1",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/createDefaultThemeConfig.ts

@@ -12,7 +12,7 @@ import {
 import { defaultAccentTheme } from "./defaults/accent";
 import { defaultBaseTheme } from "./defaults/base";
 import { defaultBuilderOptions } from "./defaults/builderOptions";
-import { defaultFonts } from "./defaults/fonts";
+import { defaultFonts, withDerivedHeadingCategories } from "./defaults/fonts";
 import { scaleFontSet } from "./scale/scaleFonts";
 import type { Preset } from "./preset.types";
 import { type SizeRecipeInputs } from "./recipeInputs";
@@ -147,11 +147,11 @@ export function createDefaultThemeConfig(
   // pipeline (e.g. the Frappe SPA) where runtime JS themes are required.
   // Always keep themes to ensure TamaguiProvider has valid theme data.
   const themes = options.subset ? subsetThemes(builtThemes, options.subset) : builtThemes;
-  const fonts = {
+  const fonts = withDerivedHeadingCategories({
     ...defaultConfig.fonts,
     ...defaultFonts,
     ...options.fonts,
-  } as Record<string, GenericFont>;
+  } as Record<string, GenericFont>);
   return createThemeConfig(
     {
       ...defaultConfig,

package/src/theme/defaults/fonts.ts

@@ -133,6 +133,7 @@ export function createCategoryFont(
   family: string,
   tables: ScaleFonts = defaultTypeTables,
   scope: "body" | "heading" = "body",
+  face?: GenericFont["face"],
 ): GenericFont {
   const sizes = scope === "heading" ? tables.headingSizes : tables.bodySizes;
   return createFont({
@@ -141,6 +142,7 @@ export function createCategoryFont(
     lineHeight: categoryLineHeights(category, tables, scope),
     weight: scope === "heading" ? headingWeights : bodyWeights,
     letterSpacing: neutralTracking(sizes),
+    ...(face ? { face } : {}),
   }) as GenericFont;
 }
 
@@ -293,3 +295,51 @@ export const defaultFonts = {
   blackletter: defaultBlackletterFont,
   geometric: defaultGeometricFont,
 } as const;
+
+type HeadingSource = {
+  category: FontCategory;
+  family: string;
+  face?: GenericFont["face"];
+};
+
+const derivedHeadingSources = new WeakMap<GenericFont, HeadingSource>();
+
+function deriveHeading(source: HeadingSource, tables: ScaleFonts): GenericFont {
+  const font = createCategoryFont(source.category, source.family, tables, "heading", source.face);
+  derivedHeadingSources.set(font, source);
+  return font;
+}
+
+export function withDerivedHeadingCategories(
+  fonts: Record<string, GenericFont>,
+  tables: ScaleFonts = defaultTypeTables,
+): Record<string, GenericFont> {
+  const result = { ...fonts };
+  for (const [category, key] of Object.entries(headingCategoryFontKeys)) {
+    const source = fonts[category];
+    if (
+      fonts[key] !== defaultFonts[key] ||
+      !source ||
+      source === defaultFonts[category as keyof typeof defaultFonts]
+    )
+      continue;
+    const family = source.family as string | { val: string };
+    result[key] = deriveHeading(
+      {
+        category: category as FontCategory,
+        family: typeof family === "string" ? family : family.val,
+        face: source.face,
+      },
+      tables,
+    );
+  }
+  return result;
+}
+
+export function rescaleDerivedHeadingFont(
+  font: GenericFont,
+  tables: ScaleFonts,
+): GenericFont | undefined {
+  const source = derivedHeadingSources.get(font);
+  return source ? deriveHeading(source, tables) : undefined;
+}

package/src/theme/headingCategoryFamilies.spec.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("tamagui", () => ({ createTamagui: (config: unknown) => config }));
+vi.mock("./animations/index", () => ({ animations: {} }));
+
+import { createDefaultFont } from "../font";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { defaultFonts, headingCategoryFontKeys } from "./defaults/fonts";
+import { generateScale } from "./scale/generateScale";
+import { defaultScaleInputs } from "./scale/scaleInputs";
+import { scaleFontSet } from "./scale/scaleFonts";
+
+describe("heading category family registration", () => {
+  it("uses a consumer category family and face without inheriting body metrics", () => {
+    const face = { 400: { normal: "CustomScript" }, 700: { normal: "CustomScriptBold" } };
+    const cursive = createDefaultFont({ family: "Custom Script", face });
+    const config = createDefaultThemeConfig({ fonts: { cursive } });
+    const fonts = config.tamagui.fonts;
+    expect(fonts.headingCursive.family).toBe(cursive.family);
+    expect(fonts.headingCursive.face).toMatchObject(face);
+    expect(fonts.headingCursive.size).toEqual(defaultFonts.headingCursive.size);
+    expect(fonts.headingCursive.weight).toEqual(defaultFonts.headingCursive.weight);
+    expect(fonts.headingCursive.lineHeight).toEqual(defaultFonts.headingCursive.lineHeight);
+  });
+
+  it("keeps each inherited category family on the heading ladder after a preset scale change", () => {
+    const families = Object.fromEntries(
+      Object.keys(headingCategoryFontKeys).map((category) => [
+        category,
+        createDefaultFont({ family: `Loaded-${category}` }),
+      ]),
+    );
+    const config = createDefaultThemeConfig({ fonts: families });
+    const from = generateScale(defaultScaleInputs).fonts;
+    const to = generateScale({ ...defaultScaleInputs, type: 19 }).fonts;
+    const scaled = scaleFontSet(config.tamagui.fonts, from, to);
+    for (const [category, key] of Object.entries(headingCategoryFontKeys)) {
+      expect(scaled[key].family).toBe(`Loaded-${category}`);
+      expect(scaled[key].size).toEqual(to.headingSizes);
+      expect(scaled[key].weight).toEqual(defaultFonts[key].weight);
+    }
+  });
+
+  it("lets an explicit heading category override win", () => {
+    const headingCursive = { ...defaultFonts.headingCursive, family: "Heading Only" };
+    const config = createDefaultThemeConfig({
+      fonts: { cursive: createDefaultFont({ family: "Body Only" }), headingCursive },
+    });
+    expect(config.tamagui.fonts.headingCursive.family).toBe("Heading Only");
+  });
+});

package/src/theme/scale/scaleFonts.ts

@@ -6,6 +6,7 @@ import {
   defaultFonts,
   fontFamilyStacks,
   headingCategoryFontKeys,
+  rescaleDerivedHeadingFont,
 } from "../defaults/fonts";
 import type { FontCategory } from "../knobs";
 import type { ScaleFonts } from "./generateScale";
@@ -99,7 +100,7 @@ export function scaleFontSet(
         to,
       );
     } else {
-      out[name] = rescaleFont(font, from, to);
+      out[name] = rescaleDerivedHeadingFont(font, to) ?? rescaleFont(font, from, to);
     }
   }
   return out;

package/types/theme/defaults/fonts.d.ts

@@ -30,7 +30,7 @@ export type FontFamilyCategory = FontCategory;
 /** Scope leading raised to the category's LC-11 floor. */
 export declare function categoryLineHeights(category: FontCategory, tables?: ScaleFonts, scope?: "body" | "heading"): Record<string, number>;
 /** Category family on the selected scope's size and weight ladder. */
-export declare function createCategoryFont(category: FontCategory, family: string, tables?: ScaleFonts, scope?: "body" | "heading"): GenericFont;
+export declare function createCategoryFont(category: FontCategory, family: string, tables?: ScaleFonts, scope?: "body" | "heading", face?: GenericFont["face"]): GenericFont;
 /** Inter `$heading` on a generated scale's heading ladder. */
 export declare function createHeadingFont(tables?: ScaleFonts): import("@tamagui/web").FillInFont<{
     face: {
@@ -442,4 +442,6 @@ export declare const defaultFonts: {
     readonly blackletter: GenericFont;
     readonly geometric: GenericFont;
 };
+export declare function withDerivedHeadingCategories(fonts: Record<string, GenericFont>, tables?: ScaleFonts): Record<string, GenericFont>;
+export declare function rescaleDerivedHeadingFont(font: GenericFont, tables: ScaleFonts): GenericFont | undefined;
 //# sourceMappingURL=fonts.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/theme/defaults/fonts.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/theme/defaults/fonts.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"scaleFonts.d.ts","sourceRoot":"","sources":["../../../src/theme/scale/scaleFonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQlD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,GAAG,CAAC,CAqC/F;AAQD;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EAClC,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,UAAU,GACb,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CA2B7B"}
+{"version":3,"file":"scaleFonts.d.ts","sourceRoot":"","sources":["../../../src/theme/scale/scaleFonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAWhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQlD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,GAAG,CAAC,CAqC/F;AAQD;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EAClC,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,UAAU,GACb,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CA2B7B"}