@multiplatform.one/theme 7.34.4 → 7.35.0

package/src/theme/scale/installScaleConfig.native.spec.ts

@@ -0,0 +1,77 @@
+import { type TamaguiInternalConfig, getConfig, getTokenValue, setConfig } from "@tamagui/web";
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("../animations/index", () => ({ animations: {} }));
+
+import { createDefaultThemeConfig } from "../createDefaultThemeConfig";
+import { densePreset, roomyPreset } from "../presets";
+import { clearPresets } from "../shared";
+import { installScaleConfig, resetInstalledScaleForTests } from "./installScaleConfig.native";
+import { buildThemeScales } from "./themeScales";
+
+const themeConfig = createDefaultThemeConfig({
+  presets: { dense: densePreset, roomy: roomyPreset },
+});
+const base = themeConfig.tamagui as unknown as TamaguiInternalConfig;
+
+afterEach(() => {
+  resetInstalledScaleForTests();
+  setConfig(base);
+});
+afterAll(() => clearPresets());
+
+function parsed(config: TamaguiInternalConfig, category: string, key: string): number {
+  return (config.tokensParsed as Record<string, Record<string, { val: number }>>)[category][key]
+    .val;
+}
+
+function bodySize(config: TamaguiInternalConfig): number {
+  return (config.fontsParsed.$body?.size as Record<string, { val: number }>).$true.val;
+}
+
+describe("native scale install", () => {
+  it("copies a scale's tokens and fonts into the config Tamagui first rendered with", () => {
+    setConfig(base);
+    const dense = themeConfig.scales!.dense.tamagui();
+    expect(dense).not.toBe(base);
+
+    expect(installScaleConfig(dense)).toBe(true);
+    expect(getConfig()).toBe(base);
+    expect(parsed(base, "size", "$4")).toBe(36);
+    expect(parsed(base, "space", "$4")).toBe(parsed(dense, "space", "$4"));
+    expect(bodySize(base)).toBe(14);
+    expect(getTokenValue("$4" as Parameters<typeof getTokenValue>[0], "size")).toBe(36);
+    expect(installScaleConfig(dense)).toBe(false);
+
+    const roomy = themeConfig.scales!.roomy.tamagui();
+    expect(installScaleConfig(roomy)).toBe(true);
+    expect(parsed(base, "size", "$4")).toBe(48);
+    expect(bodySize(base)).toBe(16);
+  });
+
+  it("restores the first config's own fields for the default scale", () => {
+    setConfig(base);
+    const own = { size4: parsed(base, "size", "$4"), body: bodySize(base) };
+    installScaleConfig(themeConfig.scales!.roomy.tamagui());
+    expect(installScaleConfig(themeConfig.scales!.default.tamagui())).toBe(true);
+    expect(parsed(base, "size", "$4")).toBe(own.size4);
+    expect(bodySize(base)).toBe(own.body);
+    expect(getTokenValue("$4" as Parameters<typeof getTokenValue>[0], "size")).toBe(own.size4);
+  });
+
+  it("gives every preset scale its own config", () => {
+    const scales = buildThemeScales({
+      base,
+      props: { tokens: {}, themes: {} } as never,
+      presets: { dense: densePreset, roomy: roomyPreset },
+      recipeInputs: themeConfig.recipeInputs!,
+      fonts: () => ({}),
+      createConfig: (props) => ({ tokens: props.tokens }) as unknown as TamaguiInternalConfig,
+    });
+    const dense = scales.dense.tamagui() as unknown as { tokens: unknown };
+    const roomy = scales.roomy.tamagui() as unknown as { tokens: unknown };
+    expect(dense).not.toBe(roomy);
+    expect(dense.tokens).toBe(scales.dense.tokens);
+    expect(roomy.tokens).toBe(scales.roomy.tokens);
+  });
+});

package/src/theme/scale/installScaleConfig.native.ts

@@ -0,0 +1,57 @@
+import { type TamaguiInternalConfig, forceUpdateThemes, getConfig } from "@tamagui/web";
+import { type TokensGlobal, mergedTokens } from "../mergedTokens";
+
+const scaleFields = [
+  "tokens",
+  "tokensParsed",
+  "specificTokens",
+  "fonts",
+  "fontsParsed",
+  "fontSizeTokens",
+  "defaultFont",
+  "defaultFontToken",
+] as const;
+
+type ScaleFields = Partial<Record<(typeof scaleFields)[number], unknown>>;
+
+let live: TamaguiInternalConfig | undefined;
+let liveOwnFields: ScaleFields | undefined;
+let installed: TamaguiInternalConfig | undefined;
+
+function fieldsOf(config: TamaguiInternalConfig): ScaleFields {
+  const source = config as unknown as Record<string, unknown>;
+  return Object.fromEntries(scaleFields.map((field) => [field, source[field]]));
+}
+
+/**
+ * Native Tamagui resolves `$` tokens against the config it held on its first
+ * render (getSplitStyles and every styled component keep that object), so
+ * installing another config object changes nothing they paint. A scale is
+ * installed here by copying its token and font fields into that first config;
+ * the first config's own fields are kept so the default scale can come back.
+ * Returns true when anything changed.
+ */
+export function installScaleConfig(config: TamaguiInternalConfig): boolean {
+  if (!live) {
+    live = getConfig();
+    liveOwnFields = fieldsOf(live);
+    installed = live;
+  }
+  if (installed === config) return false;
+  Object.assign(live, config === live ? liveOwnFields : fieldsOf(config));
+  (globalThis as TokensGlobal).__tamaguiTokensMerged = mergedTokens(live);
+  installed = config;
+  forceUpdateThemes();
+  return true;
+}
+
+/** @internal */
+export function resetInstalledScaleForTests(): void {
+  if (live && liveOwnFields) {
+    Object.assign(live, liveOwnFields);
+    (globalThis as TokensGlobal).__tamaguiTokensMerged = mergedTokens(live);
+  }
+  live = undefined;
+  liveOwnFields = undefined;
+  installed = undefined;
+}

package/src/theme/scale/installScaleConfig.ts

@@ -0,0 +1,7 @@
+import type { TamaguiInternalConfig } from "@tamagui/web";
+import { activateThemeConfig } from "../activateThemeConfig";
+
+/** Make a scale's built config the one token reads resolve against; true when anything changed. */
+export function installScaleConfig(config: TamaguiInternalConfig): boolean {
+  return activateThemeConfig(config);
+}

package/src/theme/scale/scaleAttribute.ts

@@ -0,0 +1,21 @@
+import { cookiePreset, readPresetCookie } from "../cookies";
+
+/** The `<html>` attribute that names the active preset; scale blocks key off it. */
+export const SCALE_ATTRIBUTE = "data-mp-scale";
+
+export { cookiePreset };
+
+/** The `data-mp-scale` value for a raw `mp.preset` cookie value (none for an empty or foreign one). */
+export function scaleAttributeFromCookie(value: unknown): string | undefined {
+  return readPresetCookie({ [cookiePreset]: value });
+}
+
+const cookiePattern = cookiePreset.replace(/\./g, "\\.");
+
+/**
+ * Blocking `<head>` script for web root layouts: copies the `mp.preset`
+ * cookie onto `<html data-mp-scale>` before first paint, so a cold load of a
+ * cached or client-rendered document paints the stored preset's scale
+ * without waiting for hydration.
+ */
+export const scaleAttributeScript = `(function(){try{var m=document.cookie.match(/(?:^|;\\s*)${cookiePattern}=([^;]*)/);var v=m?decodeURIComponent(m[1]):"";if(v.charAt(0)==='"')v=JSON.parse(v);if(v)document.documentElement.setAttribute(${JSON.stringify(SCALE_ATTRIBUTE)},v)}catch(e){}})()`;

package/src/theme/scale/scaleCss.probe.spec.tsx

@@ -0,0 +1,64 @@
+/**
+ * @vitest-environment happy-dom
+ *
+ * Web lemma the runtime scale switch builds on: a `$size` style paints
+ * through the token's `:root` CSS variable, so redefining that variable
+ * moves an already-rendered control with no re-render and no new class.
+ */
+
+import { createElement } from "react";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("../animations/index", () => ({ animations: {} }));
+
+import { Button, TamaguiProvider } from "tamagui";
+import { createDefaultThemeConfig } from "../createDefaultThemeConfig";
+
+const themeConfig = createDefaultThemeConfig();
+const OVERRIDE_ID = "scale-css-probe";
+
+afterEach(() => {
+  cleanup();
+  document.getElementById(OVERRIDE_ID)?.remove();
+});
+
+function sizeVariable(key: string): string {
+  const tokens = themeConfig.tamagui.tokens as unknown as {
+    size: Record<string, { variable?: string; val: number }>;
+  };
+  const variable = tokens.size[key]?.variable ?? "";
+  const name = variable.match(/^var\((--[\w-]+)\)$/)?.[1];
+  if (!name)
+    throw new Error(`size.${key} is not a CSS variable on web: ${JSON.stringify(variable)}`);
+  return name;
+}
+
+function px(value: string): number {
+  const n = Number.parseFloat(value);
+  if (!Number.isFinite(n)) throw new Error(`unreadable length ${JSON.stringify(value)}`);
+  return n;
+}
+
+describe("scale tokens repaint through root CSS variables (web)", () => {
+  it("a root override of the $size.4 variable moves a rendered Button's computed height", () => {
+    const { getByTestId } = render(
+      createElement(
+        TamaguiProvider,
+        { config: themeConfig.tamagui, defaultTheme: "light" },
+        createElement(Button, { size: "$4", testID: "probe" }, "Save"),
+      ),
+    );
+    const button = getByTestId("probe");
+    const classes = button.className;
+    expect(px(getComputedStyle(button).height)).toBe(40);
+
+    const style = document.createElement("style");
+    style.id = OVERRIDE_ID;
+    style.textContent = `:root{${sizeVariable("4")}:36px}`;
+    document.head.appendChild(style);
+
+    expect(px(getComputedStyle(button).height)).toBe(36);
+    expect(button.className).toBe(classes);
+  });
+});

package/src/theme/scale/scaleCss.spec.ts

@@ -0,0 +1,132 @@
+/**
+ * The web repaint blocks a ThemeConfig's preset scales carry: one block per
+ * distinct registered scale, every variable named by the base config's own
+ * parsed tokens and fonts, px on lengths and none on zIndex.
+ */
+
+import { afterAll, describe, expect, it, vi } from "vitest";
+
+vi.mock("../animations/index", () => ({ animations: {} }));
+
+import { headingCategoryFontKeys } from "../defaults/fonts";
+import { flooredLineHeight, fontCategoryMetrics } from "../fontCategoryMetrics";
+import type { FontCategory } from "../knobs";
+import { boldPreset, defaultPreset, densePreset, heroPreset, roomyPreset } from "../presets";
+import { createDefaultThemeConfig } from "../createDefaultThemeConfig";
+import { clearPresets } from "../shared";
+import { generateScale } from "./generateScale";
+import { scaleCss } from "./scaleCss";
+import { scaleStyleSheet } from "./ScaleStyles";
+import { DEFAULT_SCALE_ID, uniqueScales } from "./themeScales";
+
+const themeConfig = createDefaultThemeConfig({
+  presets: { hero: heroPreset, bold: boldPreset, dense: densePreset, roomy: roomyPreset },
+});
+
+afterAll(() => clearPresets());
+
+type Parsed = { name: string; variable: string; val: number };
+
+function tokenVariable(category: string, key: string): string {
+  const parsed = (
+    themeConfig.tamagui.tokensParsed as unknown as Record<string, Record<string, Parsed>>
+  )[category][key];
+  return parsed.variable.match(/^var\((--[^)]+)\)$/)?.[1] ?? "";
+}
+
+function fontVariable(family: string, attribute: string, key: string): string {
+  const parsed = (
+    themeConfig.tamagui.fontsParsed as unknown as Record<
+      string,
+      Record<string, Record<string, Parsed>>
+    >
+  )[`$${family}`][attribute][key];
+  return parsed.variable.match(/^var\((--[^)]+)\)$/)?.[1] ?? "";
+}
+
+function block(css: string, selectorStart: string): string {
+  const line = css.split("\n").find((rule) => rule.startsWith(selectorStart));
+  if (!line) throw new Error(`no rule starting ${selectorStart} in:\n${css.slice(0, 400)}`);
+  return line;
+}
+
+describe("preset scale CSS", () => {
+  it("emits one block per distinct non-default scale and none for presets on the default scale", () => {
+    const scales = uniqueScales(themeConfig.scales);
+    expect(scales.map((scale) => scale.id)).toEqual([DEFAULT_SCALE_ID, "dense", "roomy"]);
+    expect(themeConfig.scales?.hero).toBe(themeConfig.scales?.[DEFAULT_SCALE_ID]);
+    expect(themeConfig.scales?.bold).toBe(themeConfig.scales?.[DEFAULT_SCALE_ID]);
+    expect(themeConfig.scales?.[DEFAULT_SCALE_ID]?.css).toBe("");
+
+    const sheet = scaleStyleSheet(themeConfig.scales);
+    const roots = sheet
+      .split("\n")
+      .filter((rule) => !rule.includes(".font_"))
+      .map((rule) => rule.slice(0, rule.indexOf("{")));
+    expect(roots).toEqual([':root[data-mp-scale="dense"]', ':root[data-mp-scale="roomy"]']);
+  });
+
+  it("names token variables from the base config's parsed tokens, with px on lengths", () => {
+    const dense = themeConfig.scales?.dense;
+    if (!dense) throw new Error("dense scale missing");
+    const tokens = block(dense.css, ':root[data-mp-scale="dense"]{');
+    const size4 = tokenVariable("size", "$4");
+    const space4 = tokenVariable("space", "$4");
+    const radius4 = tokenVariable("radius", "$4");
+    expect(size4).toMatch(/^--/);
+    expect(tokens).toContain(`${size4}:36px`);
+    expect(tokens).toContain(`${space4}:${dense.tokens.space.$4}px`);
+    expect(tokens).toContain(`${radius4}:${dense.tokens.radius[4]}px`);
+    expect(dense.tokens.size.$4).toBe(36);
+  });
+
+  it("writes zIndex unitless and skips values equal to the base", () => {
+    const base = themeConfig.tamagui as unknown as Parameters<typeof scaleCss>[1];
+    const tokens = generateScale({ control: 36, type: 14 }).tokens;
+    const shifted = { ...tokens, zIndex: { ...tokens.zIndex, "1": 7 } };
+    const css = scaleCss([':root[data-mp-scale="x"]'], base, shifted, {});
+    expect(css).toMatch(new RegExp(`${tokenVariable("zIndex", "$1")}:7[;}]`));
+    expect(css).not.toContain(`${tokenVariable("zIndex", "$2")}:`);
+    expect(css).not.toContain(`${tokenVariable("size", "$0")}:`);
+  });
+
+  it("scopes font tables to each .font_<family> class under the scale selector", () => {
+    const dense = themeConfig.scales?.dense;
+    if (!dense) throw new Error("dense scale missing");
+    const body = block(dense.css, ':root[data-mp-scale="dense"] .font_body{');
+    const heading = block(dense.css, ':root[data-mp-scale="dense"] .font_heading{');
+    expect(body).toContain(
+      `${fontVariable("body", "size", "$true")}:${dense.fonts.bodySizes.true}px`,
+    );
+    expect(dense.fonts.bodySizes.true).toBe(14);
+    expect(heading).toContain(
+      `${fontVariable("heading", "lineHeight", "$4")}:${dense.fonts.headingLineHeights[4]}px`,
+    );
+    expect(block(dense.css, ':root[data-mp-scale="dense"] .font_mono{')).toContain("px");
+    for (const [category, key] of Object.entries(headingCategoryFontKeys)) {
+      const headingCategory = block(dense.css, `:root[data-mp-scale="dense"] .font_${key}{`);
+      expect(headingCategory).toContain(
+        `${fontVariable(key, "size", "$true")}:${dense.fonts.headingSizes.true}px`,
+      );
+      const leading = flooredLineHeight(
+        dense.fonts.headingSizes[10]!,
+        dense.fonts.headingLineHeights[10]!,
+        fontCategoryMetrics[category as FontCategory].heading,
+      );
+      expect(headingCategory).toContain(`${fontVariable(key, "lineHeight", "$10")}:${leading}px`);
+    }
+  });
+
+  it("matches the default scale's tokens to the base config value for value", () => {
+    const parsed = themeConfig.tamagui.tokensParsed as unknown as Record<
+      string,
+      Record<string, Parsed>
+    >;
+    const defaults = themeConfig.scales?.[DEFAULT_SCALE_ID];
+    if (!defaults) throw new Error("default scale missing");
+    for (const [key, px] of Object.entries(defaults.tokens.size)) {
+      expect(parsed.size[key].val).toBe(px);
+    }
+    expect(defaultPreset.scale).toEqual({ control: 40, type: 15 });
+  });
+});

package/src/theme/scale/scaleCss.ts

@@ -0,0 +1,95 @@
+import { createCSSVariable } from "@tamagui/web";
+import type { ScaleTokens } from "./generateScale";
+import { SCALE_ATTRIBUTE } from "./scaleAttribute";
+
+export { SCALE_ATTRIBUTE };
+
+type ParsedVariable = { name?: string; variable?: string; val?: unknown };
+
+/** The slice of a built Tamagui config the scale CSS reads its variable names from. */
+export type ScaleCssSource = {
+  tokensParsed?: Record<string, Record<string, ParsedVariable | undefined> | undefined>;
+  fontsParsed?: Record<string, Record<string, unknown> | undefined>;
+};
+
+type FontTables = Record<string, Record<string, unknown> | string | undefined>;
+
+const FONT_LENGTH_ATTRIBUTES = ["size", "lineHeight", "letterSpacing"] as const;
+
+/** `--c-size-4` for a parsed token: the name Tamagui's own `:root` block declares. */
+function cssVariableName(variable: ParsedVariable): string | undefined {
+  const fromVar = variable.variable?.match(/^var\((--[^)]+)\)$/)?.[1];
+  if (fromVar) return fromVar;
+  return variable.name ? `--${createCSSVariable(variable.name, false)}` : undefined;
+}
+
+function prefixed(key: string): string {
+  return key.startsWith("$") ? key : `$${key}`;
+}
+
+/** One `:root[data-mp-scale="<name>"]` selector per preset name, plus an optional bare fallback. */
+export function scaleRootSelectors(presetNames: readonly string[], fallback = false): string[] {
+  const roots = presetNames.map((name) => `:root[${SCALE_ATTRIBUTE}=${JSON.stringify(name)}]`);
+  if (fallback) roots.push(`:root:not([${SCALE_ATTRIBUTE}])`);
+  return roots;
+}
+
+/**
+ * The CSS that repaints every token-driven style for one scale on web: the
+ * scale's token values under the same `--c-*` variables Tamagui's `:root`
+ * block declares, and its font tables under each `.font_<family>` scope.
+ * Only values that differ from `base` are written, so the default scale
+ * produces nothing and a scale block stays small.
+ */
+export function scaleCss(
+  roots: readonly string[],
+  base: ScaleCssSource,
+  tokens: ScaleTokens,
+  fonts: Record<string, FontTables | undefined>,
+): string {
+  if (roots.length === 0) return "";
+  const rules: string[] = [];
+
+  const tokenDeclarations: string[] = [];
+  for (const category of Object.keys(tokens).sort()) {
+    const group = tokens[category as keyof ScaleTokens] as Record<string, number>;
+    const parsedGroup = base.tokensParsed?.[category];
+    if (!parsedGroup) continue;
+    const unit = category === "zIndex" ? "" : "px";
+    for (const key of Object.keys(group).sort()) {
+      const parsed = parsedGroup[prefixed(key)];
+      const value = group[key];
+      if (!parsed || parsed.val === value) continue;
+      const name = cssVariableName(parsed);
+      if (name) tokenDeclarations.push(`${name}:${value}${unit}`);
+    }
+  }
+  if (tokenDeclarations.length > 0) {
+    rules.push(`${roots.join(",")}{${tokenDeclarations.join(";")}}`);
+  }
+
+  for (const family of Object.keys(fonts).sort()) {
+    const font = fonts[family];
+    const parsedFont = base.fontsParsed?.[`$${family}`];
+    if (!font || !parsedFont) continue;
+    const declarations: string[] = [];
+    for (const attribute of FONT_LENGTH_ATTRIBUTES) {
+      const table = font[attribute];
+      const parsedTable = parsedFont[attribute] as Record<string, ParsedVariable> | undefined;
+      if (!table || typeof table !== "object" || !parsedTable) continue;
+      for (const key of Object.keys(table).sort()) {
+        const value = table[key];
+        const parsed = parsedTable[prefixed(key)];
+        if (typeof value !== "number" || !parsed || parsed.val === value) continue;
+        const name = cssVariableName(parsed);
+        if (name) declarations.push(`${name}:${value}px`);
+      }
+    }
+    if (declarations.length > 0) {
+      const selector = roots.map((root) => `${root} .font_${family}`).join(",");
+      rules.push(`${selector}{${declarations.join(";")}}`);
+    }
+  }
+
+  return rules.join("\n");
+}

package/src/theme/scale/scaleFonts.ts

@@ -0,0 +1,106 @@
+import type { GenericFont } from "@tamagui/web";
+import {
+  createBodyFont,
+  createCategoryFont,
+  createHeadingFont,
+  defaultFonts,
+  fontFamilyStacks,
+  headingCategoryFontKeys,
+} from "../defaults/fonts";
+import type { FontCategory } from "../knobs";
+import type { ScaleFonts } from "./generateScale";
+
+type NumberTable = Record<string, unknown>;
+
+function at(table: Record<string, number>, key: string): number | undefined {
+  return Object.hasOwn(table, key) ? table[key] : undefined;
+}
+
+/**
+ * Move a font that was built on the `from` ladder onto the `to` ladder: a
+ * size or leading that IS the `from` body value at its key becomes the `to`
+ * value there, anything else scales with the type ratio (leading with its own
+ * size). Family, face, weight and tracking are untouched.
+ */
+export function rescaleFont<F extends GenericFont>(font: F, from: ScaleFonts, to: ScaleFonts): F {
+  const size = font.size as NumberTable | undefined;
+  if (!size || typeof size !== "object") return font;
+  const ratio = to.bodySizes.true / from.bodySizes.true;
+
+  const nextSize: NumberTable = {};
+  for (const [key, value] of Object.entries(size)) {
+    if (typeof value !== "number") {
+      nextSize[key] = value;
+      continue;
+    }
+    const target = value === at(from.bodySizes, key) ? at(to.bodySizes, key) : undefined;
+    nextSize[key] = target ?? Math.round(value * ratio);
+  }
+
+  const lineHeight = font.lineHeight as NumberTable | undefined;
+  let nextLineHeight: NumberTable | undefined = lineHeight;
+  if (lineHeight && typeof lineHeight === "object") {
+    nextLineHeight = {};
+    for (const [key, value] of Object.entries(lineHeight)) {
+      if (typeof value !== "number") {
+        nextLineHeight[key] = value;
+        continue;
+      }
+      const target =
+        value === at(from.bodyLineHeights, key) ? at(to.bodyLineHeights, key) : undefined;
+      const before = size[key];
+      const after = nextSize[key];
+      nextLineHeight[key] =
+        target ??
+        (typeof before === "number" && typeof after === "number" && before > 0
+          ? Math.round((value * after) / before)
+          : Math.round(value * ratio));
+    }
+  }
+
+  return { ...font, size: nextSize, lineHeight: nextLineHeight } as F;
+}
+
+const headingCategories = new Map<string, FontCategory>(
+  Object.entries(headingCategoryFontKeys).map(([category, key]) => [key, category as FontCategory]),
+);
+
+const builtInCategories = new Set<string>(Object.keys(fontFamilyStacks));
+
+/**
+ * A scale's font map. The built-in heading/body and category fonts are
+ * rebuilt on the scale's own type tables; any other font (a consumer's
+ * `createDefaultFont` family) is moved onto the new ladder by `rescaleFont`.
+ */
+export function scaleFontSet(
+  fonts: Record<string, GenericFont>,
+  from: ScaleFonts,
+  to: ScaleFonts,
+): Record<string, GenericFont> {
+  const out: Record<string, GenericFont> = {};
+  for (const [name, font] of Object.entries(fonts)) {
+    if (name === "heading" && font === defaultFonts.heading) {
+      out[name] = createHeadingFont(to) as GenericFont;
+    } else if (name === "body" && font === defaultFonts.body) {
+      out[name] = createBodyFont(to) as GenericFont;
+    } else if (
+      headingCategories.has(name) &&
+      font === (defaultFonts as Record<string, GenericFont>)[name]
+    ) {
+      const category = headingCategories.get(name)!;
+      out[name] = createCategoryFont(category, fontFamilyStacks[category], to, "heading");
+    } else if (
+      builtInCategories.has(name) &&
+      font === (defaultFonts as Record<string, GenericFont>)[name]
+    ) {
+      out[name] = createCategoryFont(
+        name as FontCategory,
+        fontFamilyStacks[name as FontCategory],
+        to,
+      );
+    } else {
+      out[name] = rescaleFont(font, from, to);
+    }
+  }
+  return out;
+}