@multiplatform.one/theme 7.47.2 → 7.47.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.47.2",
+  "version": "7.47.4",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.47.2",
-    "@multiplatform.one/store": "^7.47.2",
+    "@multiplatform.one/platform": "^7.47.4",
+    "@multiplatform.one/store": "^7.47.4",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.47.2",
-    "@multiplatform.one/test-utils": "7.47.2",
+    "@multiplatform.one/config": "7.47.4",
+    "@multiplatform.one/test-utils": "7.47.4",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/Heading.tsx

@@ -4,6 +4,7 @@
  * H1 alone takes pageTitle: moderate $10 (40 px), display $12 (52 px), one
  * token less below $sm (LC-143).
  */
+import { headingMaxFontScale } from "./dynamicType";
 import { useResolvedKnobs } from "./useResolvedKnobs";
 import {
   H1 as RawH1,
@@ -13,6 +14,9 @@ import {
   H5 as RawH5,
   H6 as RawH6,
   Heading as RawHeading,
+  getFontSize,
+  useMedia,
+  type FontSizeTokens,
   type HeadingProps,
 } from "tamagui";
 
@@ -20,24 +24,58 @@ export type { HeadingProps };
 
 type Weight = HeadingProps["fontWeight"];
 
-function useHeadingVoice(fontWeight: Weight) {
+/** The size each tamagui heading draws when the use site passes none. */
+type DefaultSize = "$5" | "$6" | "$7" | "$8" | "$9";
+
+function headingPx(size: unknown, fallback: unknown): number {
+  if (typeof size === "number") return size;
+  const token = typeof size === "string" ? size : fallback;
+  if (typeof token === "number") return token;
+  return getFontSize(token as FontSizeTokens, { font: "$heading" });
+}
+
+/**
+ * The props that ride last: the resolved weight, then the native text props
+ * that keep a heading whole under Dynamic Type (web drops them). LC-158: the
+ * page title grows on the iOS large-title curve and smaller headings grow
+ * until they meet it, so a one-word title never outgrows the line and breaks
+ * mid-word. iOS breaks lines with UILabel's standard strategy.
+ */
+function useHeadingVoice(
+  fontWeight: Weight,
+  props: HeadingProps,
+  defaultSize: DefaultSize | "title",
+) {
   const { knobProps } = useResolvedKnobs();
+  const { sm } = useMedia();
   const { fontWeight: knobWeight, ...heading } = knobProps.heading;
   const resolvedWeight = fontWeight ?? (knobWeight as Weight);
+  const pageTitle = knobProps.pageTitle;
+  // Below $sm the title paints its compact step (LC-143); the cap meets that.
+  const titleSize = (sm === false ? pageTitle["$max-sm"]?.fontSize : undefined) ?? pageTitle.size;
+  const titlePx = headingPx(titleSize, "$10");
+  const ownPx = headingPx(
+    props.fontSize ?? props.size,
+    defaultSize === "title" ? titleSize : defaultSize,
+  );
   return {
     heading,
-    pageTitle: knobProps.pageTitle,
-    weight: resolvedWeight === undefined ? {} : { fontWeight: resolvedWeight },
+    pageTitle,
+    weight: {
+      ...(resolvedWeight === undefined ? {} : { fontWeight: resolvedWeight }),
+      maxFontSizeMultiplier: props.maxFontSizeMultiplier ?? headingMaxFontScale(ownPx, titlePx),
+      lineBreakStrategyIOS: props.lineBreakStrategyIOS ?? "standard",
+    },
   };
 }
 
 export function Heading({ fontWeight, ...props }: HeadingProps) {
-  const { heading, weight } = useHeadingVoice(fontWeight);
+  const { heading, weight } = useHeadingVoice(fontWeight, props, "$8");
   return <RawHeading {...heading} {...props} {...weight} />;
 }
 
 export function H1({ fontWeight, ...props }: HeadingProps) {
-  const { heading, pageTitle, weight } = useHeadingVoice(fontWeight);
+  const { heading, pageTitle, weight } = useHeadingVoice(fontWeight, props, "title");
   // An explicit size ejects the whole step. Spread anyway, the knob's compact
   // `$max-sm` entry would still override that size on a phone.
   const step = props.size === undefined ? pageTitle : null;
@@ -45,26 +83,26 @@ export function H1({ fontWeight, ...props }: HeadingProps) {
 }
 
 export function H2({ fontWeight, ...props }: HeadingProps) {
-  const { heading, weight } = useHeadingVoice(fontWeight);
+  const { heading, weight } = useHeadingVoice(fontWeight, props, "$9");
   return <RawH2 {...heading} {...props} {...weight} />;
 }
 
 export function H3({ fontWeight, ...props }: HeadingProps) {
-  const { heading, weight } = useHeadingVoice(fontWeight);
+  const { heading, weight } = useHeadingVoice(fontWeight, props, "$8");
   return <RawH3 {...heading} {...props} {...weight} />;
 }
 
 export function H4({ fontWeight, ...props }: HeadingProps) {
-  const { heading, weight } = useHeadingVoice(fontWeight);
+  const { heading, weight } = useHeadingVoice(fontWeight, props, "$7");
   return <RawH4 {...heading} {...props} {...weight} />;
 }
 
 export function H5({ fontWeight, ...props }: HeadingProps) {
-  const { heading, weight } = useHeadingVoice(fontWeight);
+  const { heading, weight } = useHeadingVoice(fontWeight, props, "$6");
   return <RawH5 {...heading} {...props} {...weight} />;
 }
 
 export function H6({ fontWeight, ...props }: HeadingProps) {
-  const { heading, weight } = useHeadingVoice(fontWeight);
+  const { heading, weight } = useHeadingVoice(fontWeight, props, "$5");
   return <RawH6 {...heading} {...props} {...weight} />;
 }

package/src/theme/dynamicType.ts

@@ -0,0 +1,42 @@
+/**
+ * LC-158 DYNAMIC-TYPE-FIT. On native, text grows with the platform text size
+ * (iOS Dynamic Type, Android font scale) and a fixed box does not. Text that
+ * lives inside a box of fixed size caps its growth at what the box holds;
+ * text whose box can grow (a badge pill, body copy) is never capped.
+ *
+ * React Native applies the cap per text node through `maxFontSizeMultiplier`
+ * (RN ignores a value below 1, so every cap here is at least 1).
+ */
+export const dynamicTypeFit = {
+  /**
+   * The page title grows at most 1.5x, the iOS large-title curve: 34 pt at
+   * Large reaches 52 pt at accessibility-extra-large (1.53x) while body text
+   * reaches 2.6x. Smaller headings grow until they meet the capped title.
+   */
+  titleMaxScale: 1.5,
+  /** Initials in an avatar circle: the em fills at most half the diameter. */
+  medallionFill: 0.5,
+  /** A control label in a fixed-height control: the em fills at most 3/4 of the height. */
+  controlLabelFill: 0.75,
+} as const;
+
+/** Largest `maxFontSizeMultiplier` that keeps a `fontPx` em within `fill` of `boxPx`. */
+export function maxFontScaleToFit(boxPx: number, fontPx: number, fill: number): number {
+  if (!(boxPx > 0) || !(fontPx > 0) || !(fill > 0)) return 1;
+  return Math.max(1, Math.floor(((boxPx * fill) / fontPx) * 100) / 100);
+}
+
+/** A heading's cap: it may grow until it meets the capped page title, never past it. */
+export function headingMaxFontScale(headingPx: number, titlePx: number): number {
+  return maxFontScaleToFit(titlePx, headingPx, dynamicTypeFit.titleMaxScale);
+}
+
+/**
+ * The multiplier React Native paints a text node at: the platform font scale,
+ * held to `maxFontSizeMultiplier` when that is 1 or more.
+ */
+export function effectiveFontScale(fontScale: number, maxFontSizeMultiplier?: number): number {
+  return maxFontSizeMultiplier != null && maxFontSizeMultiplier >= 1
+    ? Math.min(fontScale, maxFontSizeMultiplier)
+    : fontScale;
+}

package/src/theme/index.ts

@@ -8,6 +8,7 @@ export * from "./createDefaultThemeConfig";
 export * from "./createThemes";
 export * from "./defaults/index";
 export * from "./devtools/ThemeDevtoolsPanel";
+export * from "./dynamicType";
 export * from "./fieldFocus";
 export * from "./focusState";
 export * from "./glyphPaint";

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/theme/Heading.tsx"],"names":[],"mappings":"AAOA,OAAO,EAQL,KAAK,YAAY,EAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,YAAY,EAAE,CAAC;AAe7B,wBAAgB,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAG7D;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAMxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/theme/Heading.tsx"],"names":[],"mappings":"AAQA,OAAO,EAWL,KAAK,YAAY,EAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,YAAY,EAAE,CAAC;AAiD7B,wBAAgB,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAG7D;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAMxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD;AAED,wBAAgB,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAGxD"}

package/types/theme/dynamicType.d.ts

@@ -0,0 +1,31 @@
+/**
+ * LC-158 DYNAMIC-TYPE-FIT. On native, text grows with the platform text size
+ * (iOS Dynamic Type, Android font scale) and a fixed box does not. Text that
+ * lives inside a box of fixed size caps its growth at what the box holds;
+ * text whose box can grow (a badge pill, body copy) is never capped.
+ *
+ * React Native applies the cap per text node through `maxFontSizeMultiplier`
+ * (RN ignores a value below 1, so every cap here is at least 1).
+ */
+export declare const dynamicTypeFit: {
+    /**
+     * The page title grows at most 1.5x, the iOS large-title curve: 34 pt at
+     * Large reaches 52 pt at accessibility-extra-large (1.53x) while body text
+     * reaches 2.6x. Smaller headings grow until they meet the capped title.
+     */
+    readonly titleMaxScale: 1.5;
+    /** Initials in an avatar circle: the em fills at most half the diameter. */
+    readonly medallionFill: 0.5;
+    /** A control label in a fixed-height control: the em fills at most 3/4 of the height. */
+    readonly controlLabelFill: 0.75;
+};
+/** Largest `maxFontSizeMultiplier` that keeps a `fontPx` em within `fill` of `boxPx`. */
+export declare function maxFontScaleToFit(boxPx: number, fontPx: number, fill: number): number;
+/** A heading's cap: it may grow until it meets the capped page title, never past it. */
+export declare function headingMaxFontScale(headingPx: number, titlePx: number): number;
+/**
+ * The multiplier React Native paints a text node at: the platform font scale,
+ * held to `maxFontSizeMultiplier` when that is 1 or more.
+ */
+export declare function effectiveFontScale(fontScale: number, maxFontSizeMultiplier?: number): number;
+//# sourceMappingURL=dynamicType.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dynamicType.d.ts","sourceRoot":"","sources":["../../src/theme/dynamicType.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc;IACzB;;;;OAIG;;IAEH,4EAA4E;;IAE5E,yFAAyF;;CAEjF,CAAC;AAEX,yFAAyF;AACzF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAGrF;AAED,wFAAwF;AACxF,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,CAI5F"}

package/types/theme/index.d.ts

@@ -8,6 +8,7 @@ export * from "./createDefaultThemeConfig";
 export * from "./createThemes";
 export * from "./defaults/index";
 export * from "./devtools/ThemeDevtoolsPanel";
+export * from "./dynamicType";
 export * from "./fieldFocus";
 export * from "./focusState";
 export * from "./glyphPaint";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}