@multiplatform.one/theme 7.88.4 → 7.88.5

package/dist/cjs/theme/layoutTokens.cjs

@@ -32,7 +32,9 @@ __export(layoutTokens_exports, {
   OVERLAY_ANCHOR_GAP: () => OVERLAY_ANCHOR_GAP,
   OVERLAY_ATTACH_GAP: () => OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT: () => OVERLAY_BREAKPOINT,
+  READING_WIDTH_BODY_FALLBACK: () => READING_WIDTH_BODY_FALLBACK,
   READING_WIDTH_CH: () => READING_WIDTH_CH,
+  READING_WIDTH_CH_EM: () => READING_WIDTH_CH_EM,
   READING_WIDTH_MAX_CH: () => READING_WIDTH_MAX_CH,
   READING_WIDTH_MIN_CH: () => READING_WIDTH_MIN_CH,
   defaultMaxPanes: () => defaultMaxPanes,
@@ -45,6 +47,7 @@ __export(layoutTokens_exports, {
   readingWidthStyle: () => readingWidthStyle,
   useLayoutSizeClass: () => useLayoutSizeClass,
   useMultiPane: () => useMultiPane,
+  useReadingWidthStyle: () => useReadingWidthStyle,
   useSemanticGaps: () => useSemanticGaps
 });
 module.exports = __toCommonJS(layoutTokens_exports);
@@ -127,14 +130,22 @@ function useMultiPane(maxPanes) {
 const READING_WIDTH_CH = 70;
 const READING_WIDTH_MIN_CH = 65;
 const READING_WIDTH_MAX_CH = 75;
-function readingWidthStyle(measure = READING_WIDTH_CH) {
+const READING_WIDTH_CH_EM = 0.5;
+const READING_WIDTH_BODY_FALLBACK = 16;
+function readingWidthStyle(measure = READING_WIDTH_CH, web = import_tamagui.isWeb, bodyFontSize = READING_WIDTH_BODY_FALLBACK) {
   if (measure === "none" || measure === null) return {};
   const ch = Math.min(READING_WIDTH_MAX_CH, Math.max(READING_WIDTH_MIN_CH, measure));
   return {
-    maxWidth: `${ch}ch`,
+    maxWidth: web ? `${ch}ch` : Math.round(ch * READING_WIDTH_CH_EM * bodyFontSize),
     width: "100%"
   };
 }
+function useReadingWidthStyle(measure = READING_WIDTH_CH) {
+  const bodyFontSize = import_tamagui.isWeb ? READING_WIDTH_BODY_FALLBACK : (0, import_tamagui.getFontSize)("$true", {
+    font: "$body"
+  });
+  return readingWidthStyle(measure, import_tamagui.isWeb, bodyFontSize);
+}
 const FORM_READABLE_WIDTH = 560;
 const FORM_READABLE_WIDTH_MIN = 480;
 const FORM_READABLE_WIDTH_MAX = 640;

package/dist/cjs/theme/layoutTokens.native.js

@@ -34,7 +34,9 @@ __export(layoutTokens_exports, {
   OVERLAY_ANCHOR_GAP: () => OVERLAY_ANCHOR_GAP,
   OVERLAY_ATTACH_GAP: () => OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT: () => OVERLAY_BREAKPOINT,
+  READING_WIDTH_BODY_FALLBACK: () => READING_WIDTH_BODY_FALLBACK,
   READING_WIDTH_CH: () => READING_WIDTH_CH,
+  READING_WIDTH_CH_EM: () => READING_WIDTH_CH_EM,
   READING_WIDTH_MAX_CH: () => READING_WIDTH_MAX_CH,
   READING_WIDTH_MIN_CH: () => READING_WIDTH_MIN_CH,
   defaultMaxPanes: () => defaultMaxPanes,
@@ -47,6 +49,7 @@ __export(layoutTokens_exports, {
   readingWidthStyle: () => readingWidthStyle,
   useLayoutSizeClass: () => useLayoutSizeClass,
   useMultiPane: () => useMultiPane,
+  useReadingWidthStyle: () => useReadingWidthStyle,
   useSemanticGaps: () => useSemanticGaps
 });
 module.exports = __toCommonJS(layoutTokens_exports);
@@ -173,15 +176,26 @@ function useMultiPane(maxPanes) {
 var READING_WIDTH_CH = 70;
 var READING_WIDTH_MIN_CH = 65;
 var READING_WIDTH_MAX_CH = 75;
+var READING_WIDTH_CH_EM = 0.5;
+var READING_WIDTH_BODY_FALLBACK = 16;
 function readingWidthStyle() {
-  var measure = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : READING_WIDTH_CH;
+  var measure = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : READING_WIDTH_CH,
+    web = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : import_tamagui.isWeb,
+    bodyFontSize = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : READING_WIDTH_BODY_FALLBACK;
   if (measure === "none" || measure === null) return {};
   var ch = Math.min(READING_WIDTH_MAX_CH, Math.max(READING_WIDTH_MIN_CH, measure));
   return {
-    maxWidth: `${ch}ch`,
+    maxWidth: web ? `${ch}ch` : Math.round(ch * READING_WIDTH_CH_EM * bodyFontSize),
     width: "100%"
   };
 }
+function useReadingWidthStyle() {
+  var measure = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : READING_WIDTH_CH;
+  var bodyFontSize = import_tamagui.isWeb ? READING_WIDTH_BODY_FALLBACK : (0, import_tamagui.getFontSize)("$true", {
+    font: "$body"
+  });
+  return readingWidthStyle(measure, import_tamagui.isWeb, bodyFontSize);
+}
 var FORM_READABLE_WIDTH = 560;
 var FORM_READABLE_WIDTH_MIN = 480;
 var FORM_READABLE_WIDTH_MAX = 640;

package/dist/cjs/theme/layoutTokens.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","layoutTokens_exports","__export","DETAIL_READABLE_WIDTH","FORM_READABLE_WIDTH","FORM_READABLE_WIDTH_MAX","FORM_READABLE_WIDTH_MIN","LAYOUT_SIZE_CLASS_ORDER","MIN_PRESS_TARGET","NARROW_BREAKPOINT","OVERLAY_ANCHOR_GAP","OVERLAY_ATTACH_GAP","OVERLAY_BREAKPOINT","READING_WIDTH_CH","READING_WIDTH_MAX_CH","READING_WIDTH_MIN_CH","defaultMaxPanes","getLayoutSizeClass","isTouchSurface","layoutBreakpoints","layoutSizeClassAtLeast","pressTargetHitSlop","pressTargetStyle","readingWidthStyle","useLayoutSizeClass","useMultiPane","useSemanticGaps","module","exports","import_platform","require","import_react","import_tamagui","import_useResolvedKnobs","xxs","xs","medium","md","expanded","large","xl","xxl","width","sizeClass","current","minimum","indexOf","readViewportWidth","window","innerWidth","subscribeViewportSizeClass","onChange","isWeb","queries","map","matchMedia","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","mq","addEventListener","err","return","_iteratorNormalCompletion2","_didIteratorError2","_iteratorError2","_iterator2","_step2","mq2","removeEventListener","viewportSizeClass","serverViewportSizeClass","nativeWidth","useWindowDimensions","webSizeClass","useSyncExternalStore","maxPanes"],"sources":["../../../src/theme/layoutTokens.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","layoutTokens_exports","__export","DETAIL_READABLE_WIDTH","FORM_READABLE_WIDTH","FORM_READABLE_WIDTH_MAX","FORM_READABLE_WIDTH_MIN","LAYOUT_SIZE_CLASS_ORDER","MIN_PRESS_TARGET","NARROW_BREAKPOINT","OVERLAY_ANCHOR_GAP","OVERLAY_ATTACH_GAP","OVERLAY_BREAKPOINT","READING_WIDTH_BODY_FALLBACK","READING_WIDTH_CH","READING_WIDTH_CH_EM","READING_WIDTH_MAX_CH","READING_WIDTH_MIN_CH","defaultMaxPanes","getLayoutSizeClass","isTouchSurface","layoutBreakpoints","layoutSizeClassAtLeast","pressTargetHitSlop","pressTargetStyle","readingWidthStyle","useLayoutSizeClass","useMultiPane","useReadingWidthStyle","useSemanticGaps","module","exports","import_platform","require","import_react","import_tamagui","import_useResolvedKnobs","xxs","xs","medium","md","expanded","large","xl","xxl","width","sizeClass","current","minimum","indexOf","readViewportWidth","window","innerWidth","subscribeViewportSizeClass","onChange","isWeb","queries","map","matchMedia","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","mq","addEventListener","err","return","_iteratorNormalCompletion2","_didIteratorError2","_iteratorError2","_iterator2","_step2","mq2","removeEventListener","viewportSizeClass","serverViewportSizeClass","nativeWidth","useWindowDimensions","webSizeClass","useSyncExternalStore","maxPanes","budget"],"sources":["../../../src/theme/layoutTokens.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/theme/layoutTokens.mjs

@@ -1,6 +1,6 @@
 import { isTouchable, isWebTouchable } from "@multiplatform.one/platform";
 import { useSyncExternalStore } from "react";
-import { isWeb, useWindowDimensions } from "tamagui";
+import { getFontSize, isWeb, useWindowDimensions } from "tamagui";
 import { useResolvedKnobs } from "./useResolvedKnobs.mjs";
 const layoutBreakpoints = {
   /** Tamagui `$xxs`. Smallest phones. */
@@ -77,14 +77,22 @@ function useMultiPane(maxPanes) {
 const READING_WIDTH_CH = 70;
 const READING_WIDTH_MIN_CH = 65;
 const READING_WIDTH_MAX_CH = 75;
-function readingWidthStyle(measure = READING_WIDTH_CH) {
+const READING_WIDTH_CH_EM = 0.5;
+const READING_WIDTH_BODY_FALLBACK = 16;
+function readingWidthStyle(measure = READING_WIDTH_CH, web = isWeb, bodyFontSize = READING_WIDTH_BODY_FALLBACK) {
   if (measure === "none" || measure === null) return {};
   const ch = Math.min(READING_WIDTH_MAX_CH, Math.max(READING_WIDTH_MIN_CH, measure));
   return {
-    maxWidth: `${ch}ch`,
+    maxWidth: web ? `${ch}ch` : Math.round(ch * READING_WIDTH_CH_EM * bodyFontSize),
     width: "100%"
   };
 }
+function useReadingWidthStyle(measure = READING_WIDTH_CH) {
+  const bodyFontSize = isWeb ? READING_WIDTH_BODY_FALLBACK : getFontSize("$true", {
+    font: "$body"
+  });
+  return readingWidthStyle(measure, isWeb, bodyFontSize);
+}
 const FORM_READABLE_WIDTH = 560;
 const FORM_READABLE_WIDTH_MIN = 480;
 const FORM_READABLE_WIDTH_MAX = 640;
@@ -120,5 +128,5 @@ function useSemanticGaps() {
     betweenGroups: knobProps.gapLg
   };
 }
-export { DETAIL_READABLE_WIDTH, FORM_READABLE_WIDTH, FORM_READABLE_WIDTH_MAX, FORM_READABLE_WIDTH_MIN, LAYOUT_SIZE_CLASS_ORDER, MIN_PRESS_TARGET, NARROW_BREAKPOINT, OVERLAY_ANCHOR_GAP, OVERLAY_ATTACH_GAP, OVERLAY_BREAKPOINT, READING_WIDTH_CH, READING_WIDTH_MAX_CH, READING_WIDTH_MIN_CH, defaultMaxPanes, getLayoutSizeClass, isTouchSurface, layoutBreakpoints, layoutSizeClassAtLeast, pressTargetHitSlop, pressTargetStyle, readingWidthStyle, useLayoutSizeClass, useMultiPane, useSemanticGaps };
+export { DETAIL_READABLE_WIDTH, FORM_READABLE_WIDTH, FORM_READABLE_WIDTH_MAX, FORM_READABLE_WIDTH_MIN, LAYOUT_SIZE_CLASS_ORDER, MIN_PRESS_TARGET, NARROW_BREAKPOINT, OVERLAY_ANCHOR_GAP, OVERLAY_ATTACH_GAP, OVERLAY_BREAKPOINT, READING_WIDTH_BODY_FALLBACK, READING_WIDTH_CH, READING_WIDTH_CH_EM, READING_WIDTH_MAX_CH, READING_WIDTH_MIN_CH, defaultMaxPanes, getLayoutSizeClass, isTouchSurface, layoutBreakpoints, layoutSizeClassAtLeast, pressTargetHitSlop, pressTargetStyle, readingWidthStyle, useLayoutSizeClass, useMultiPane, useReadingWidthStyle, useSemanticGaps };
 //# sourceMappingURL=layoutTokens.mjs.map

package/dist/esm/theme/layoutTokens.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["isTouchable","isWebTouchable","useSyncExternalStore","isWeb","useWindowDimensions","useResolvedKnobs","layoutBreakpoints","xxs","xs","medium","md","expanded","large","xl","xxl","OVERLAY_BREAKPOINT","NARROW_BREAKPOINT","LAYOUT_SIZE_CLASS_ORDER","getLayoutSizeClass","width","defaultMaxPanes","sizeClass","layoutSizeClassAtLeast","current","minimum","indexOf","readViewportWidth","window","innerWidth","subscribeViewportSizeClass","onChange","queries","map","matchMedia","mq","addEventListener","removeEventListener","viewportSizeClass","serverViewportSizeClass","useLayoutSizeClass","nativeWidth","webSizeClass","useMultiPane","maxPanes","budget","READING_WIDTH_CH","READING_WIDTH_MIN_CH","READING_WIDTH_MAX_CH","readingWidthStyle","measure","ch","Math","min","max","maxWidth","FORM_READABLE_WIDTH","FORM_READABLE_WIDTH_MIN","FORM_READABLE_WIDTH_MAX","DETAIL_READABLE_WIDTH","MIN_PRESS_TARGET","isTouchSurface","pressTargetStyle","size","minWidth","minHeight","pressTargetHitSlop","visualSize","pad","ceil","top","bottom","left","right","OVERLAY_ANCHOR_GAP","OVERLAY_ATTACH_GAP","useSemanticGaps","knobProps","tight","gapSm","withinGroup","gap","betweenGroups","gapLg"],"sources":["../../../src/theme/layoutTokens.ts"],"sourcesContent":[null],"mappings":"AAiCA,SAASA,WAAA,EAAaC,cAAA,QAAsB;AAC5C,SAASC,oBAAA,QAA4B;AACrC,SAASC,KAAA,EAAOC,mBAAA,QAA2B;AAC3C,SAASC,gBAAA,QAAwB;AAmB1B,MAAMC,iBAAA,GAAoB;EAAA;EAE/BC,GAAA,EAAK;EAAA;EAELC,EAAA,EAAI;EAAA;AAAA;AAAA;AAAA;AAAA;EAMJC,MAAA,EAAQ;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQRC,EAAA,EAAI;EAAA;EAEJC,QAAA,EAAU;EAAA;EAEVC,KAAA,EAAO;EAAA;EAEPC,EAAA,EAAI;EAAA;EAEJC,GAAA,EAAK;AACP;AAcO,MAAMC,kBAAA,GAAqBT,iBAAA,CAAkBG,MAAA;AAG7C,MAAMO,iBAAA,GAAoBV,iBAAA,CAAkBG,MAAA;AAE5C,MAAMQ,uBAAA,GAAsD,CACjE,WACA,UACA,YACA,SACA,KACF;AAGO,SAASC,mBAAmBC,KAAA,EAAgC;EACjE,IAAIA,KAAA,IAASb,iBAAA,CAAkBO,EAAA,EAAI,OAAO;EAC1C,IAAIM,KAAA,IAASb,iBAAA,CAAkBM,KAAA,EAAO,OAAO;EAC7C,IAAIO,KAAA,IAASb,iBAAA,CAAkBK,QAAA,EAAU,OAAO;EAChD,IAAIQ,KAAA,IAASb,iBAAA,CAAkBG,MAAA,EAAQ,OAAO;EAC9C,OAAO;AACT;AAGO,SAASW,gBAAgBC,SAAA,EAAmC;EACjE,OAAOA,SAAA,KAAc,aAAaA,SAAA,KAAc,WAAW,IAAI;AACjE;AAEO,SAASC,uBACdC,OAAA,EACAC,OAAA,EACS;EACT,OAAOP,uBAAA,CAAwBQ,OAAA,CAAQF,OAAO,KAAKN,uBAAA,CAAwBQ,OAAA,CAAQD,OAAO;AAC5F;AAGA,SAASE,kBAAA,EAA4B;EACnC,IAAI,OAAOC,MAAA,KAAW,aAAa,OAAOrB,iBAAA,CAAkBG,MAAA;EAC5D,OAAOkB,MAAA,CAAOC,UAAA;AAChB;AAEA,SAASC,2BAA2BC,QAAA,EAAkC;EACpE,IAAI,CAAC3B,KAAA,IAAS,OAAOwB,MAAA,KAAW,aAAa,OAAO,MAAM,CAAC;EAC3D,MAAMI,OAAA,GAAU,CACdzB,iBAAA,CAAkBO,EAAA,EAClBP,iBAAA,CAAkBM,KAAA,EAClBN,iBAAA,CAAkBK,QAAA,EAClBL,iBAAA,CAAkBG,MAAA,CACpB,CAAEuB,GAAA,CAAKb,KAAA,IAAUQ,MAAA,CAAOM,UAAA,CAAW,eAAed,KAAK,KAAK,CAAC;EAC7D,WAAWe,EAAA,IAAMH,OAAA,EAASG,EAAA,CAAGC,gBAAA,CAAiB,UAAUL,QAAQ;EAChE,OAAO,MAAM;IACX,WAAWI,EAAA,IAAMH,OAAA,EAASG,EAAA,CAAGE,mBAAA,CAAoB,UAAUN,QAAQ;EACrE;AACF;AAEA,SAASO,kBAAA,EAAqC;EAC5C,OAAOnB,kBAAA,CAAmBQ,iBAAA,CAAkB,CAAC;AAC/C;AAEA,SAASY,wBAAA,EAA2C;EAClD,OAAOpB,kBAAA,CAAmBZ,iBAAA,CAAkBG,MAAM;AACpD;AAaO,SAAS8B,mBAAA,EAAsC;EACpD,MAAMC,WAAA,GAAcpC,mBAAA,CAAoB,EAAEe,KAAA;EAC1C,MAAMsB,YAAA,GAAevC,oBAAA,CACnB2B,0BAAA,EACAQ,iBAAA,EACAC,uBACF;EACA,OAAOnC,KAAA,GAAQsC,YAAA,GAAevB,kBAAA,CAAmBsB,WAAW;AAC9D;AAGO,SAASE,aAAaC,QAAA,EAA2B;EACtD,MAAMtB,SAAA,GAAYkB,kBAAA,CAAmB;EACrC,MAAMK,MAAA,GAASD,QAAA,IAAYvB,eAAA,CAAgBC,SAAS;EACpD,OAAOuB,MAAA,IAAU,KAAKxB,eAAA,CAAgBC,SAAS,KAAK;AACtD;AAKO,MAAMwB,gBAAA,GAAmB;AACzB,MAAMC,oBAAA,GAAuB;AAC7B,MAAMC,oBAAA,GAAuB;AAQ7B,SAASC,kBACdC,OAAA,GAAkCJ,gBAAA,EACS;EAC3C,IAAII,OAAA,KAAY,UAAUA,OAAA,KAAY,MAAM,OAAO,CAAC;EACpD,MAAMC,EAAA,GAAKC,IAAA,CAAKC,GAAA,CAAIL,oBAAA,EAAsBI,IAAA,CAAKE,GAAA,CAAIP,oBAAA,EAAsBG,OAAO,CAAC;EACjF,OAAO;IAAEK,QAAA,EAAU,GAAGJ,EAAE;IAAM/B,KAAA,EAAO;EAAO;AAC9C;AASO,MAAMoC,mBAAA,GAAsB;AAC5B,MAAMC,uBAAA,GAA0B;AAChC,MAAMC,uBAAA,GAA0B;AAUhC,MAAMC,qBAAA,GAAwB;AAK9B,MAAMC,gBAAA,GAAmB;AAGzB,SAASC,eAAA,EAA0B;EACxC,OAAO5D,WAAA,IAAeC,cAAA;AACxB;AAOO,SAAS4D,iBAAiBC,IAAA,GAAeH,gBAAA,EAAoC;EAClF,OAAO;IAAEI,QAAA,EAAUD,IAAA;IAAME,SAAA,EAAWF;EAAK;AAC3C;AAUO,SAASG,mBACdC,UAAA,EACAd,GAAA,GAAcO,gBAAA,EACC;EACf,MAAMQ,GAAA,GAAMhB,IAAA,CAAKE,GAAA,CAAI,GAAGF,IAAA,CAAKiB,IAAA,EAAMhB,GAAA,GAAMc,UAAA,IAAc,CAAC,CAAC;EACzD,OAAO;IAAEG,GAAA,EAAKF,GAAA;IAAKG,MAAA,EAAQH,GAAA;IAAKI,IAAA,EAAMJ,GAAA;IAAKK,KAAA,EAAOL;EAAI;AACxD;AAuBO,MAAMM,kBAAA,GAAqB;AAiB3B,MAAMC,kBAAA,GAAqB;AAS3B,SAASC,gBAAA,EAId;EACA,MAAM;IAAEC;EAAU,IAAIvE,gBAAA,CAAiB;EACvC,OAAO;IACLwE,KAAA,EAAOD,SAAA,CAAUE,KAAA;IACjBC,WAAA,EAAaH,SAAA,CAAUI,GAAA;IACvBC,aAAA,EAAeL,SAAA,CAAUM;EAC3B;AACF","ignoreList":[]}
+{"version":3,"names":["isTouchable","isWebTouchable","useSyncExternalStore","getFontSize","isWeb","useWindowDimensions","useResolvedKnobs","layoutBreakpoints","xxs","xs","medium","md","expanded","large","xl","xxl","OVERLAY_BREAKPOINT","NARROW_BREAKPOINT","LAYOUT_SIZE_CLASS_ORDER","getLayoutSizeClass","width","defaultMaxPanes","sizeClass","layoutSizeClassAtLeast","current","minimum","indexOf","readViewportWidth","window","innerWidth","subscribeViewportSizeClass","onChange","queries","map","matchMedia","mq","addEventListener","removeEventListener","viewportSizeClass","serverViewportSizeClass","useLayoutSizeClass","nativeWidth","webSizeClass","useMultiPane","maxPanes","budget","READING_WIDTH_CH","READING_WIDTH_MIN_CH","READING_WIDTH_MAX_CH","READING_WIDTH_CH_EM","READING_WIDTH_BODY_FALLBACK","readingWidthStyle","measure","web","bodyFontSize","ch","Math","min","max","maxWidth","round","useReadingWidthStyle","font","FORM_READABLE_WIDTH","FORM_READABLE_WIDTH_MIN","FORM_READABLE_WIDTH_MAX","DETAIL_READABLE_WIDTH","MIN_PRESS_TARGET","isTouchSurface","pressTargetStyle","size","minWidth","minHeight","pressTargetHitSlop","visualSize","pad","ceil","top","bottom","left","right","OVERLAY_ANCHOR_GAP","OVERLAY_ATTACH_GAP","useSemanticGaps","knobProps","tight","gapSm","withinGroup","gap","betweenGroups","gapLg"],"sources":["../../../src/theme/layoutTokens.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/theme/layoutTokens.native.js

@@ -1,6 +1,6 @@
 import { isTouchable, isWebTouchable } from "@multiplatform.one/platform";
 import { useSyncExternalStore } from "react";
-import { isWeb, useWindowDimensions } from "tamagui";
+import { getFontSize, isWeb, useWindowDimensions } from "tamagui";
 import { useResolvedKnobs } from "./useResolvedKnobs.native.js";
 var layoutBreakpoints = {
   /** Tamagui `$xxs`. Smallest phones. */
@@ -121,15 +121,26 @@ function useMultiPane(maxPanes) {
 var READING_WIDTH_CH = 70;
 var READING_WIDTH_MIN_CH = 65;
 var READING_WIDTH_MAX_CH = 75;
+var READING_WIDTH_CH_EM = 0.5;
+var READING_WIDTH_BODY_FALLBACK = 16;
 function readingWidthStyle() {
-  var measure = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : READING_WIDTH_CH;
+  var measure = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : READING_WIDTH_CH,
+    web = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : isWeb,
+    bodyFontSize = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : READING_WIDTH_BODY_FALLBACK;
   if (measure === "none" || measure === null) return {};
   var ch = Math.min(READING_WIDTH_MAX_CH, Math.max(READING_WIDTH_MIN_CH, measure));
   return {
-    maxWidth: `${ch}ch`,
+    maxWidth: web ? `${ch}ch` : Math.round(ch * READING_WIDTH_CH_EM * bodyFontSize),
     width: "100%"
   };
 }
+function useReadingWidthStyle() {
+  var measure = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : READING_WIDTH_CH;
+  var bodyFontSize = isWeb ? READING_WIDTH_BODY_FALLBACK : getFontSize("$true", {
+    font: "$body"
+  });
+  return readingWidthStyle(measure, isWeb, bodyFontSize);
+}
 var FORM_READABLE_WIDTH = 560;
 var FORM_READABLE_WIDTH_MIN = 480;
 var FORM_READABLE_WIDTH_MAX = 640;
@@ -167,5 +178,5 @@ function useSemanticGaps() {
     betweenGroups: knobProps.gapLg
   };
 }
-export { DETAIL_READABLE_WIDTH, FORM_READABLE_WIDTH, FORM_READABLE_WIDTH_MAX, FORM_READABLE_WIDTH_MIN, LAYOUT_SIZE_CLASS_ORDER, MIN_PRESS_TARGET, NARROW_BREAKPOINT, OVERLAY_ANCHOR_GAP, OVERLAY_ATTACH_GAP, OVERLAY_BREAKPOINT, READING_WIDTH_CH, READING_WIDTH_MAX_CH, READING_WIDTH_MIN_CH, defaultMaxPanes, getLayoutSizeClass, isTouchSurface, layoutBreakpoints, layoutSizeClassAtLeast, pressTargetHitSlop, pressTargetStyle, readingWidthStyle, useLayoutSizeClass, useMultiPane, useSemanticGaps };
+export { DETAIL_READABLE_WIDTH, FORM_READABLE_WIDTH, FORM_READABLE_WIDTH_MAX, FORM_READABLE_WIDTH_MIN, LAYOUT_SIZE_CLASS_ORDER, MIN_PRESS_TARGET, NARROW_BREAKPOINT, OVERLAY_ANCHOR_GAP, OVERLAY_ATTACH_GAP, OVERLAY_BREAKPOINT, READING_WIDTH_BODY_FALLBACK, READING_WIDTH_CH, READING_WIDTH_CH_EM, READING_WIDTH_MAX_CH, READING_WIDTH_MIN_CH, defaultMaxPanes, getLayoutSizeClass, isTouchSurface, layoutBreakpoints, layoutSizeClassAtLeast, pressTargetHitSlop, pressTargetStyle, readingWidthStyle, useLayoutSizeClass, useMultiPane, useReadingWidthStyle, useSemanticGaps };
 //# sourceMappingURL=layoutTokens.native.js.map

package/dist/esm/theme/layoutTokens.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["isTouchable","isWebTouchable","useSyncExternalStore","isWeb","useWindowDimensions","useResolvedKnobs","layoutBreakpoints","xxs","xs","medium","md","expanded","large","xl","xxl","OVERLAY_BREAKPOINT","NARROW_BREAKPOINT","LAYOUT_SIZE_CLASS_ORDER","getLayoutSizeClass","width","defaultMaxPanes","sizeClass","layoutSizeClassAtLeast","current","minimum","indexOf","readViewportWidth","window","innerWidth","subscribeViewportSizeClass","onChange","queries","map","matchMedia","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","mq","value","addEventListener","err","return","_iteratorNormalCompletion2","_didIteratorError2","_iteratorError2","_iterator2","_step2","mq2","removeEventListener","viewportSizeClass","serverViewportSizeClass","useLayoutSizeClass","nativeWidth","webSizeClass","useMultiPane","maxPanes"],"sources":["../../../src/theme/layoutTokens.ts"],"sourcesContent":[null],"mappings":"AAiCA,SAASA,WAAA,EAAaC,cAAA,QAAsB;AAC5C,SAASC,oBAAA,QAA4B;AACrC,SAASC,KAAA,EAAOC,mBAAA,QAA2B;AAC3C,SAASC,gBAAA,QAAwB;AAmB1B,IAAAC,iBAAM;EAAoB;EAE/BC,GAAA,EAAK;EAAA;EAELC,EAAA,EAAI;EAAA;AAAA;AAAA;AAAA;AAAA;EAMJC,MAAA,EAAQ;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQRC,EAAA,EAAI;EAAA;EAEJC,QAAA,EAAU;EAAA;EAEVC,KAAA,EAAO;EAAA;EAEPC,EAAA,EAAI;EAAA;EAEJC,GAAA,EAAK;AACP;AAcO,IAAAC,kBAAM,GAAAT,iBAAqB,CAAAG,MAAkB;AAG7C,IAAAO,iBAAM,GAAAV,iBAAoB,CAAAG,MAAkB;AAE5C,IAAAQ,uBAAM,IACX,WACA,UACA,YACA,SACA,KACF;AAGO,SAASC,mBAAmBC,KAAA,EAAgC;EACjE,IAAIA,KAAA,IAASb,iBAAA,CAAkBO,EAAA,EAAI,OAAO;EAC1C,IAAIM,KAAA,IAASb,iBAAA,CAAkBM,KAAA,EAAO,OAAO;EAC7C,IAAIO,KAAA,IAASb,iBAAA,CAAkBK,QAAA,EAAU,OAAO;EAChD,IAAIQ,KAAA,IAASb,iBAAA,CAAkBG,MAAA,EAAQ,OAAO;EAC9C,OAAO;AACT;AAGO,SAASW,gBAAgBC,SAAA,EAAmC;EACjE,OAAOA,SAAA,KAAc,aAAaA,SAAA,KAAc,WAAW,IAAI;AACjE;AAEO,SAASC,uBACdC,OAAA,EACAC,OAAA,EACS;EACT,OAAOP,uBAAA,CAAwBQ,OAAA,CAAQF,OAAO,KAAKN,uBAAA,CAAwBQ,OAAA,CAAQD,OAAO;AAC5F;AAGA,SAASE,kBAAA,EAA4B;EACnC,IAAI,OAAOC,MAAA,KAAW,aAAa,OAAOrB,iBAAA,CAAkBG,MAAA;EAC5D,OAAOkB,MAAA,CAAOC,UAAA;AAChB;AAEA,SAASC,2BAA2BC,QAAA,EAAkC;EACpE,IAAI,CAAC3B,KAAA,IAAS,OAAOwB,MAAA,KAAW,aAAa,OAAO,YAAM,CAAC;EAC3D,IAAAI,OAAM,IACJzB,iBAAA,CAAkBO,EAAA,EAClBP,iBAAA,CAAkBM,KAAA,EAClBN,iBAAA,CAAkBK,QAAA,EAClBL,iBAAA,CAAkBG,MAAA,CACpB,CAAEuB,GAAA,CAAI,UAACb,KAAU;IACjB,OAAAQ,MAAW,CAAAM,UAAe,gBAAGd,KAAiB;EAC9C;EACE,IAAAe,yBAA0B,GAAG;IAAAC,iBAAoB,QAAU;IAAAC,cAAQ;EACrE;IACF,SAAAC,SAAA,GAAAN,OAAA,CAAAO,MAAA,CAAAC,QAAA,KAAAC,KAAA,IAAAN,yBAAA,IAAAM,KAAA,GAAAH,SAAA,CAAAI,IAAA,IAAAC,IAAA,GAAAR,yBAAA;MAEA,IAASS,EAAA,GAAAH,KAAA,CAAAI,KAAA;MACPD,EAAA,CAAOE,gBAAA,SAAmB,EAAAf,QAAA;IAC5B;EAEA,SAASgB,GAAA;IACPX,iBAAO,OAAmB;IAC5BC,cAAA,GAAAU,GAAA;EAaO,UAAS;IACd,IAAM;MACN,IAAM,CAAAZ,yBAAe,IAAAG,SAAA,CAAAU,MAAA;QACnBV,SAAA,CAAAU,MAAA;MACA;IACA;MACF,IAAAZ,iBAAA;QACA,MAAOC,cAAQ;MACjB;IAGO;EACL;EACA,OAAM,YAAS;IACf,IAAAY,0BAAsB,OAAgB;MAAAC,kBAAc;MAAAC,eAAA;IACtD;MAKa,SAAAC,UAAmB,GAAApB,OAAA,CAAAO,MAAA,CAAAC,QAAA,KAAAa,MAAA,IAAAJ,0BAAA,IAAAI,MAAA,GAAAD,UAAA,CAAAV,IAAA,IAAAC,IAAA,GAAAM,0BAAA;QACnB,IAAAK,GAAA,GAAAD,MAAA,CAAAR,KAAuB;QACvBS,GAAA,CAAAC,mBAAuB,WAAAxB,QAAA;MAQ7B;IAGL,EAAI,OAAAgB,GAAA,EAAY;MAChBG,kBAAoB;MACpBC,eAAmB,GAAGJ,GAAE;IAC1B;MASa;QACA,KAAAE,0BAA0B,IAAAG,UAAA,CAAAJ,MAAA;UAC1BI,UAAA,CAAAJ,MAAA;QAUA;MAKA;QAGN,IAASE,kBAA0B;UACjC,MAAAC,eAAe;QACxB;MAOO;IACL;EACF;AAUO;AAIL,SAAMK,iBAAkBA,CAAA;EACxB,OAAOrC,kBAAY,CAAAQ,iBAAwB;AAC7C;AAuBO,SAAM8B,uBAAqBA,CAAA;EAiB3B,OAAMtC,kBAAqB,CAAAZ,iBAAA,CAAAG,MAAA;AAS3B;AAKL,SAAMgD,kBAAgBA,CAAA;EACtB,IAAAC,WAAO,GAAAtD,mBAAA,GAAAe,KAAA;EAAA,IACLwC,YAAO,GAAUzD,oBAAA,CAAA2B,0BAAA,EAAA0B,iBAAA,EAAAC,uBAAA;EAAA,OACjBrD,KAAA,GAAawD,YAAU,GAAAzC,kBAAA,CAAAwC,WAAA;AAAA;AACE,SAC3BE,aAAAC,QAAA;EACF,IAAAxC,SAAA,GAAAoC,kBAAA","ignoreList":[]}
+{"version":3,"names":["isTouchable","isWebTouchable","useSyncExternalStore","getFontSize","isWeb","useWindowDimensions","useResolvedKnobs","layoutBreakpoints","xxs","xs","medium","md","expanded","large","xl","xxl","OVERLAY_BREAKPOINT","NARROW_BREAKPOINT","LAYOUT_SIZE_CLASS_ORDER","getLayoutSizeClass","width","defaultMaxPanes","sizeClass","layoutSizeClassAtLeast","current","minimum","indexOf","readViewportWidth","window","innerWidth","subscribeViewportSizeClass","onChange","queries","map","matchMedia","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","mq","value","addEventListener","err","return","_iteratorNormalCompletion2","_didIteratorError2","_iteratorError2","_iterator2","_step2","mq2","removeEventListener","viewportSizeClass","serverViewportSizeClass","useLayoutSizeClass","nativeWidth","webSizeClass","useMultiPane","maxPanes","budget","READING_WIDTH_CH","READING_WIDTH_MIN_CH","READING_WIDTH_MAX_CH","READING_WIDTH_CH_EM","READING_WIDTH_BODY_FALLBACK","readingWidthStyle"],"sources":["../../../src/theme/layoutTokens.ts"],"sourcesContent":[null],"mappings":"AAiCA,SAASA,WAAA,EAAaC,cAAA,QAAsB;AAC5C,SAASC,oBAAA,QAA4B;AACrC,SAA8BC,WAAA,EAAaC,KAAA,EAAOC,mBAAA,QAA2B;AAC7E,SAASC,gBAAA,QAAwB;AAmB1B,IAAAC,iBAAM;EAAoB;EAE/BC,GAAA,EAAK;EAAA;EAELC,EAAA,EAAI;EAAA;AAAA;AAAA;AAAA;AAAA;EAMJC,MAAA,EAAQ;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQRC,EAAA,EAAI;EAAA;EAEJC,QAAA,EAAU;EAAA;EAEVC,KAAA,EAAO;EAAA;EAEPC,EAAA,EAAI;EAAA;EAEJC,GAAA,EAAK;AACP;AAcO,IAAAC,kBAAM,GAAAT,iBAAqB,CAAAG,MAAkB;AAG7C,IAAAO,iBAAM,GAAAV,iBAAoB,CAAAG,MAAkB;AAE5C,IAAAQ,uBAAM,IACX,WACA,UACA,YACA,SACA,KACF;AAGO,SAASC,mBAAmBC,KAAA,EAAgC;EACjE,IAAIA,KAAA,IAASb,iBAAA,CAAkBO,EAAA,EAAI,OAAO;EAC1C,IAAIM,KAAA,IAASb,iBAAA,CAAkBM,KAAA,EAAO,OAAO;EAC7C,IAAIO,KAAA,IAASb,iBAAA,CAAkBK,QAAA,EAAU,OAAO;EAChD,IAAIQ,KAAA,IAASb,iBAAA,CAAkBG,MAAA,EAAQ,OAAO;EAC9C,OAAO;AACT;AAGO,SAASW,gBAAgBC,SAAA,EAAmC;EACjE,OAAOA,SAAA,KAAc,aAAaA,SAAA,KAAc,WAAW,IAAI;AACjE;AAEO,SAASC,uBACdC,OAAA,EACAC,OAAA,EACS;EACT,OAAOP,uBAAA,CAAwBQ,OAAA,CAAQF,OAAO,KAAKN,uBAAA,CAAwBQ,OAAA,CAAQD,OAAO;AAC5F;AAGA,SAASE,kBAAA,EAA4B;EACnC,IAAI,OAAOC,MAAA,KAAW,aAAa,OAAOrB,iBAAA,CAAkBG,MAAA;EAC5D,OAAOkB,MAAA,CAAOC,UAAA;AAChB;AAEA,SAASC,2BAA2BC,QAAA,EAAkC;EACpE,IAAI,CAAC3B,KAAA,IAAS,OAAOwB,MAAA,KAAW,aAAa,OAAO,YAAM,CAAC;EAC3D,IAAAI,OAAM,IACJzB,iBAAA,CAAkBO,EAAA,EAClBP,iBAAA,CAAkBM,KAAA,EAClBN,iBAAA,CAAkBK,QAAA,EAClBL,iBAAA,CAAkBG,MAAA,CACpB,CAAEuB,GAAA,CAAI,UAACb,KAAU;IACjB,OAAAQ,MAAW,CAAAM,UAAe,gBAAGd,KAAiB;EAC9C;EACE,IAAAe,yBAA0B,GAAG;IAAAC,iBAAoB,QAAU;IAAAC,cAAQ;EACrE;IACF,SAAAC,SAAA,GAAAN,OAAA,CAAAO,MAAA,CAAAC,QAAA,KAAAC,KAAA,IAAAN,yBAAA,IAAAM,KAAA,GAAAH,SAAA,CAAAI,IAAA,IAAAC,IAAA,GAAAR,yBAAA;MAEA,IAASS,EAAA,GAAAH,KAAA,CAAAI,KAAA;MACPD,EAAA,CAAOE,gBAAA,SAAmB,EAAAf,QAAA;IAC5B;EAEA,SAASgB,GAAA;IACPX,iBAAO,OAAmB;IAC5BC,cAAA,GAAAU,GAAA;EAaO,UAAS;IACd,IAAM;MACN,IAAM,CAAAZ,yBAAe,IAAAG,SAAA,CAAAU,MAAA;QACnBV,SAAA,CAAAU,MAAA;MACA;IACA;MACF,IAAAZ,iBAAA;QACA,MAAOC,cAAQ;MACjB;IAGO;EACL;EACA,OAAM,YAAS;IACf,IAAAY,0BAAsB,OAAgB;MAAAC,kBAAc;MAAAC,eAAA;IACtD;MAKa,SAAAC,UAAmB,GAAApB,OAAA,CAAAO,MAAA,CAAAC,QAAA,KAAAa,MAAA,IAAAJ,0BAAA,IAAAI,MAAA,GAAAD,UAAA,CAAAV,IAAA,IAAAC,IAAA,GAAAM,0BAAA;QACnB,IAAAK,GAAA,GAAAD,MAAA,CAAAR,KAAuB;QACvBS,GAAA,CAAAC,mBAAuB,WAAAxB,QAAA;MAGvB;IAGN,EAAM,OAAAgB,GAAA;MAcNG,kBAAS,GACd;MAIIC,eAAY,GAAAJ,GAAA;IAChB,UAAW;MACX,IAAO;QACL,KAAAE,0BAAiC,IAAMG,UAAK,CAAAJ,MAAA,UAAsB;UAClEI,UAAO,CAAAJ,MAAA;QACT;MACF;QAGO,IAASE,kBACd;UAEM,MAAAC,eACF;QAEJ;MACF;IASO;EACA;AACA;AAUA,SAAMK,kBAAA;EAKN,OAAMrC,kBAAmB,CAAAQ,iBAAA;AAGzB;AACL,SAAO8B,uBAAeA,CAAA;EACxB,OAAAtC,kBAAA,CAAAZ,iBAAA,CAAAG,MAAA;AAOO;AACL,SAAOgD,kBAAkBA,CAAA;EAC3B,IAAAC,WAAA,GAAAtD,mBAAA,GAAAe,KAAA;EAUO,IAAAwC,YAAS,GAAA1D,oBAEd,CAAA4B,0BACe,EAAA0B,iBAAA,EAAAC,uBAAA;EACf,OAAMrD,KAAM,GAAAwD,YAAY,GAAKzC,kBAAY,CAAAwC,WAAgB;AACzD;AACF,SAAAE,aAAAC,QAAA;EAuBO,IAAMxC,SAAA,GAAAoC,kBAAqB;EAiB3B,IAAMK,MAAA,GAAAD,QAAA,KAAqB,QAAAA,QAAA,cAAAA,QAAA,GAAAzC,eAAA,CAAAC,SAAA;EAS3B,OAASyC,MAAA,SAAA1C,eAId,CAAAC,SAAA;AACA;AACA,IAAA0C,gBAAO;AAAA,IACLC,oBAAiB;AAAA,IACjBC,oBAAa,GAAU;AAAA,IACvBC,mBAAe,MAAU;AAAA,IAC3BC,2BAAA;AACF,SAAAC,kBAAA","ignoreList":[]}

package/package.json

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

package/src/theme/layoutTokens.spec.ts

@@ -15,8 +15,11 @@ import {
   layoutSizeClassAtLeast,
   pressTargetHitSlop,
   pressTargetStyle,
+  READING_WIDTH_CH_EM,
   readingWidthStyle,
 } from "./layoutTokens";
+import { densePreset, roomyPreset } from "./presets";
+import { generateScaleFonts } from "./scale";
 
 describe("layoutBreakpoints (DG-LAY-01)", () => {
   it("pivots overlays at medium 640 (Tamagui $sm — MPO-13 C5); expanded 860 stays the pane class", () => {
@@ -67,6 +70,24 @@ describe("readingWidthStyle (DG-LAY-05)", () => {
     expect(readingWidthStyle("none")).toEqual({});
     expect(readingWidthStyle(null)).toEqual({});
   });
+
+  it("gives targets without a ch unit the measure in points from the body size (FZ-9278)", () => {
+    const denseBody = generateScaleFonts(densePreset.scale!.type, "native").bodySizes.true;
+    const roomyBody = generateScaleFonts(roomyPreset.scale!.type, "native").bodySizes.true;
+    expect(denseBody).toBeLessThan(roomyBody);
+    expect(readingWidthStyle(undefined, false, denseBody)).toEqual({
+      maxWidth: Math.round(70 * READING_WIDTH_CH_EM * denseBody),
+      width: "100%",
+    });
+    expect(readingWidthStyle(undefined, false, roomyBody)).toEqual({
+      maxWidth: Math.round(70 * READING_WIDTH_CH_EM * roomyBody),
+      width: "100%",
+    });
+    expect(readingWidthStyle(90, false, roomyBody)).toEqual({
+      maxWidth: Math.round(75 * READING_WIDTH_CH_EM * roomyBody),
+      width: "100%",
+    });
+  });
 });
 
 describe("overlay anchoring", () => {

package/src/theme/layoutTokens.ts

@@ -33,7 +33,7 @@
 
 import { isTouchable, isWebTouchable } from "@multiplatform.one/platform";
 import { useSyncExternalStore } from "react";
-import { isWeb, useWindowDimensions } from "tamagui";
+import { type FontSizeTokens, getFontSize, isWeb, useWindowDimensions } from "tamagui";
 import { useResolvedKnobs } from "./useResolvedKnobs";
 
 // ── Breakpoint tokens (DG-LAY-01) ─────────────────────────────────────────
@@ -191,18 +191,45 @@ export const READING_WIDTH_CH = 70;
 export const READING_WIDTH_MIN_CH = 65;
 export const READING_WIDTH_MAX_CH = 75;
 
+/** One `ch` as a share of the body font size, for targets with no `ch` unit. */
+export const READING_WIDTH_CH_EM = 0.5;
+
+/** Body size the pure helper assumes when the caller has no live one. */
+export const READING_WIDTH_BODY_FALLBACK = 16;
+
 export type ReadingWidthStyle = {
-  maxWidth: string;
+  maxWidth: string | number;
   width: "100%";
 };
 
-/** Style props for prose / long-form columns. Pass `null`/`"none"` to eject. */
+/**
+ * Style props for prose / long-form columns. Pass `null`/`"none"` to eject.
+ * React Native and the GTK renderer have no `ch` unit and read "70ch" as 70
+ * points, so off the web the measure is points from the body font size
+ * (FZ-9278). Components use `useReadingWidthStyle`, which reads that size
+ * from the active preset.
+ */
 export function readingWidthStyle(
   measure: number | "none" | null = READING_WIDTH_CH,
+  web: boolean = isWeb,
+  bodyFontSize: number = READING_WIDTH_BODY_FALLBACK,
 ): ReadingWidthStyle | Record<string, never> {
   if (measure === "none" || measure === null) return {};
   const ch = Math.min(READING_WIDTH_MAX_CH, Math.max(READING_WIDTH_MIN_CH, measure));
-  return { maxWidth: `${ch}ch`, width: "100%" };
+  return {
+    maxWidth: web ? `${ch}ch` : Math.round(ch * READING_WIDTH_CH_EM * bodyFontSize),
+    width: "100%",
+  };
+}
+
+/** `readingWidthStyle` at the active preset's body size (`$true` on `$body`). */
+export function useReadingWidthStyle(
+  measure: number | "none" | null = READING_WIDTH_CH,
+): ReadingWidthStyle | Record<string, never> {
+  const bodyFontSize = isWeb
+    ? READING_WIDTH_BODY_FALLBACK
+    : getFontSize("$true" as FontSizeTokens, { font: "$body" });
+  return readingWidthStyle(measure, isWeb, bodyFontSize);
 }
 
 // ── Form readable width ───────────────────────────────────────────────────

package/src/theme/sheetElevation.spec.ts

@@ -0,0 +1,61 @@
+/**
+ * FZ-9211. The dark elevation order: page < card <= sheet. A sheet frame paints
+ * `elevatedSurface.backgroundColor`, which must resolve at or above the card
+ * (the Card surface1 theme) it slides over, in every colour theme and every knob preset.
+ */
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("tamagui", async (original) => ({
+  ...(await original<typeof import("tamagui")>()),
+  createTamagui: vi.fn((config: Record<string, unknown>) => config),
+}));
+vi.mock("./animations/index", () => ({ animations: {} }));
+
+import { normalizeToHex, relativeLuminance } from "./colorRules";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import { resolveAllThemes } from "./dedupeInherited";
+import { defaultKnobs } from "./knobs";
+import * as presets from "./presets";
+import { resolveKnobs } from "./resolveKnobs";
+
+const themes = resolveAllThemes(
+  createDefaultThemeConfig().tamagui.themes as unknown as Record<string, Record<string, unknown>>,
+);
+
+const darkRoots = Object.keys(themes).filter(
+  (name) => /^dark(_[a-z]+)?$/.test(name) && !name.endsWith("_accent") && themes[`${name}_Card`],
+);
+
+function luminance(theme: Record<string, unknown>, token: string): number {
+  const key = token.startsWith("$") ? token.slice(1) : token;
+  const hex = normalizeToHex(String(theme[key]));
+  if (!hex) throw new Error(`${key} has no colour: ${String(theme[key])}`);
+  return relativeLuminance(hex);
+}
+
+const knobPresets = Object.entries(presets as Record<string, unknown>)
+  .filter(([name, value]) => name.endsWith("Preset") && typeof value === "object" && value !== null)
+  .map(([name, value]) => [name, value as { knobs?: Record<string, unknown> }] as const);
+
+describe("FZ-9211: dark sheets sit at or above the card", () => {
+  it("covers the dark colour themes", () => {
+    expect(darkRoots).toContain("dark");
+    expect(darkRoots.length).toBeGreaterThan(4);
+  });
+
+  it.each(darkRoots)("%s: page < card <= sheet", (name) => {
+    const root = themes[name]!;
+    const card = themes[`${name}_Card`]!;
+    const page = luminance(root, "background");
+    const cardFill = luminance(card, "background");
+    expect(cardFill, `${name} card over page`).toBeGreaterThan(page);
+    for (const [presetName, preset] of [["default", {}], ...knobPresets] as const) {
+      const knobs = { ...defaultKnobs, ...(preset as { knobs?: object }).knobs };
+      const sheet = resolveKnobs(knobs as never, undefined, "dark").knobProps.elevatedSurface;
+      expect(
+        luminance(root, sheet.backgroundColor),
+        `${name} ${presetName}: sheet ${sheet.backgroundColor} over card`,
+      ).toBeGreaterThanOrEqual(cardFill);
+    }
+  });
+});

package/types/theme/layoutTokens.d.ts

@@ -110,12 +110,24 @@ export declare function useMultiPane(maxPanes?: 1 | 2): boolean;
 export declare const READING_WIDTH_CH = 70;
 export declare const READING_WIDTH_MIN_CH = 65;
 export declare const READING_WIDTH_MAX_CH = 75;
+/** One `ch` as a share of the body font size, for targets with no `ch` unit. */
+export declare const READING_WIDTH_CH_EM = 0.5;
+/** Body size the pure helper assumes when the caller has no live one. */
+export declare const READING_WIDTH_BODY_FALLBACK = 16;
 export type ReadingWidthStyle = {
-    maxWidth: string;
+    maxWidth: string | number;
     width: "100%";
 };
-/** Style props for prose / long-form columns. Pass `null`/`"none"` to eject. */
-export declare function readingWidthStyle(measure?: number | "none" | null): ReadingWidthStyle | Record<string, never>;
+/**
+ * Style props for prose / long-form columns. Pass `null`/`"none"` to eject.
+ * React Native and the GTK renderer have no `ch` unit and read "70ch" as 70
+ * points, so off the web the measure is points from the body font size
+ * (FZ-9278). Components use `useReadingWidthStyle`, which reads that size
+ * from the active preset.
+ */
+export declare function readingWidthStyle(measure?: number | "none" | null, web?: boolean, bodyFontSize?: number): ReadingWidthStyle | Record<string, never>;
+/** `readingWidthStyle` at the active preset's body size (`$true` on `$body`). */
+export declare function useReadingWidthStyle(measure?: number | "none" | null): ReadingWidthStyle | Record<string, never>;
 /**
  * A form column's readable max width: wide enough for two FormGrid columns
  * (FORM_GRID_COLLAPSE_WIDTH 480), narrow enough that a label, its field and

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

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