@seed-design/css 1.2.16 → 1.2.17

package/theming/index.cjs

@@ -1,5 +1,32 @@
 const { DefaultColorModeValue, isValidColorMode } = require("./mode.cjs");
 
+// Never write a comment inside the template literal below. It is emitted
+// verbatim into an inline <script>, so a comment there is string content rather
+// than source: the bundler minifying this module cannot reach it, and whether
+// the host's HTML pipeline minifies an injected inline script is out of this
+// package's hands. Every such comment ships on every page load. The rationale
+// for what the snippet does lives here instead.
+//
+// `--seed-static-font-scale`, written outside the `fontScaling` gate: Android
+// WebView multiplies every computed font-size and line-height by
+// Configuration.fontScale whether or not the app opted in, so the `*-static`
+// tokens have to divide it back out either way. The option picks whether SEED
+// *follows* the user's scale, not whether the WebView applies one. iOS needs
+// nothing here, because its scaling arrives through `-apple-system-body`
+// inheritance, which the gate does control, and a literal px is never inflated.
+// The measured scale stays uncapped because it is a divisor: the tokens cancel
+// textZoom only by dividing by exactly what the WebView multiplied back in,
+// whatever cap the native app chose.
+//
+// `data-seed-font-multiplier`, written on both platforms inside the gate: it
+// reports how much SEED grew the text, not how large a step the user picked.
+// On iOS the measurement is normalized to the web 16px baseline and then
+// clamped to the cap iOS actually applies, the 1.35 that globalCss sets as
+// `--seed-font-size-limit-max`; the Dynamic Type accessibility steps reach 3.1
+// and would otherwise overstate it. On Android the token clamp bounds the same
+// value to [`--seed-font-size-limit-min`, `--seed-font-size-limit-max`], so
+// past the cap it stays deliberately below the raw scale measured above.
+
 function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = false }) {
   if (!isValidColorMode(mode)) {
     throw new Error(`Invalid color mode: ${mode}`);
@@ -42,6 +69,15 @@ function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = fal
         }
       } catch (e) {}
 
+      var seedAndroidFontScale = 1;
+      try {
+        if (document.documentElement.dataset.seedPlatform === 'android') {
+          var rootSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+          seedAndroidFontScale = rootSize > 0 ? rootSize / 16 : 1;
+          document.documentElement.style.setProperty('--seed-static-font-scale', seedAndroidFontScale.toString());
+        }
+      } catch (e) {}
+
       try {
         if (${fontScaling}) {
           var platform = document.documentElement.dataset.seedPlatform;
@@ -56,8 +92,9 @@ function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = fal
                 document.body.appendChild(tempEl);
                 var size = parseFloat(window.getComputedStyle(tempEl).fontSize);
                 document.body.removeChild(tempEl);
-                var mult = Math.max(0.8, Math.min(1.35, (size / 16) * 0.9412));
-                document.documentElement.dataset.seedFontMultiplier = parseFloat(mult.toFixed(2)).toString();
+                var raw = size > 0 ? (size / 16) * 0.9412 : 1;
+                var scale = Math.max(0.8, Math.min(1.35, raw));
+                document.documentElement.dataset.seedFontMultiplier = parseFloat(scale.toFixed(2)).toString();
               } catch (e) {}
             }
 
@@ -67,9 +104,8 @@ function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = fal
               applyIOSFontScaling();
             }
           } else if (platform === 'android') {
-            var fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-            var scale = Math.max(0.8, Math.min(1.5, fontSize / 16));
-            document.documentElement.dataset.seedFontMultiplier = parseFloat(scale.toFixed(2)).toString();
+            var applied = Math.max(0.8, Math.min(1.5, seedAndroidFontScale));
+            document.documentElement.dataset.seedFontMultiplier = parseFloat(applied.toFixed(2)).toString();
             document.documentElement.dataset.seedFontScaling = 'enabled';
           }
         }

package/theming/index.mjs

@@ -1,5 +1,32 @@
 import { DefaultColorModeValue, isValidColorMode } from "./mode.mjs";
 
+// Never write a comment inside the template literal below. It is emitted
+// verbatim into an inline <script>, so a comment there is string content rather
+// than source: the bundler minifying this module cannot reach it, and whether
+// the host's HTML pipeline minifies an injected inline script is out of this
+// package's hands. Every such comment ships on every page load. The rationale
+// for what the snippet does lives here instead.
+//
+// `--seed-static-font-scale`, written outside the `fontScaling` gate: Android
+// WebView multiplies every computed font-size and line-height by
+// Configuration.fontScale whether or not the app opted in, so the `*-static`
+// tokens have to divide it back out either way. The option picks whether SEED
+// *follows* the user's scale, not whether the WebView applies one. iOS needs
+// nothing here, because its scaling arrives through `-apple-system-body`
+// inheritance, which the gate does control, and a literal px is never inflated.
+// The measured scale stays uncapped because it is a divisor: the tokens cancel
+// textZoom only by dividing by exactly what the WebView multiplied back in,
+// whatever cap the native app chose.
+//
+// `data-seed-font-multiplier`, written on both platforms inside the gate: it
+// reports how much SEED grew the text, not how large a step the user picked.
+// On iOS the measurement is normalized to the web 16px baseline and then
+// clamped to the cap iOS actually applies, the 1.35 that globalCss sets as
+// `--seed-font-size-limit-max`; the Dynamic Type accessibility steps reach 3.1
+// and would otherwise overstate it. On Android the token clamp bounds the same
+// value to [`--seed-font-size-limit-min`, `--seed-font-size-limit-max`], so
+// past the cap it stays deliberately below the raw scale measured above.
+
 export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScaling = false }) => {
   if (!isValidColorMode(mode)) {
     throw new Error(`Invalid color mode: ${mode}`);
@@ -42,6 +69,15 @@ export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScalin
         }
       } catch (e) {}
 
+      var seedAndroidFontScale = 1;
+      try {
+        if (document.documentElement.dataset.seedPlatform === 'android') {
+          var rootSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+          seedAndroidFontScale = rootSize > 0 ? rootSize / 16 : 1;
+          document.documentElement.style.setProperty('--seed-static-font-scale', seedAndroidFontScale.toString());
+        }
+      } catch (e) {}
+
       try {
         if (${fontScaling}) {
           var platform = document.documentElement.dataset.seedPlatform;
@@ -56,8 +92,9 @@ export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScalin
                 document.body.appendChild(tempEl);
                 var size = parseFloat(window.getComputedStyle(tempEl).fontSize);
                 document.body.removeChild(tempEl);
-                var mult = Math.max(0.8, Math.min(1.35, (size / 16) * 0.9412));
-                document.documentElement.dataset.seedFontMultiplier = parseFloat(mult.toFixed(2)).toString();
+                var raw = size > 0 ? (size / 16) * 0.9412 : 1;
+                var scale = Math.max(0.8, Math.min(1.35, raw));
+                document.documentElement.dataset.seedFontMultiplier = parseFloat(scale.toFixed(2)).toString();
               } catch (e) {}
             }
 
@@ -67,9 +104,8 @@ export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScalin
               applyIOSFontScaling();
             }
           } else if (platform === 'android') {
-            var fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-            var scale = Math.max(0.8, Math.min(1.5, fontSize / 16));
-            document.documentElement.dataset.seedFontMultiplier = parseFloat(scale.toFixed(2)).toString();
+            var applied = Math.max(0.8, Math.min(1.5, seedAndroidFontScale));
+            document.documentElement.dataset.seedFontMultiplier = parseFloat(applied.toFixed(2)).toString();
             document.documentElement.dataset.seedFontScaling = 'enabled';
           }
         }