@seed-design/css 1.2.15 → 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';
           }
         }

package/vars/color/bg.d.ts

@@ -29,7 +29,7 @@ export declare const layerBasement = "var(--seed-color-bg-layer-basement)";
 export declare const layerDefault = "var(--seed-color-bg-layer-default)";
 /** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed) */
 export declare const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
-/** @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다. */
+/** @deprecated `@seed-design/css@2.0.0`에서 제거될 예정입니다. */
 export declare const layerFill = "var(--seed-color-bg-layer-fill)";
 /** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. */
 export declare const layerFloating = "var(--seed-color-bg-layer-floating)";

package/vars/component/image-frame.d.ts

@@ -26,7 +26,7 @@ export declare const vars: {
   "strokeFalse": {},
   /**
    * 모서리를 둥글게 처리합니다.
-@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
+@deprecated `rounded` 옵션은 @seed-design/react@2.0.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
 Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
 
    */
@@ -40,7 +40,7 @@ Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
   },
   /**
    * 모서리를 둥글게 처리하지 않습니다.
-@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
+@deprecated `rounded` 옵션은 @seed-design/react@2.0.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
 Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
 
    */

package/vars/gradient.d.ts

@@ -1,9 +1,9 @@
 /** 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
-@deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다.
+@deprecated `@seed-design/css@2.0.0`에서 제거될 예정입니다.
  */
 export declare const fadeLayerFloating = "var(--seed-gradient-fade-layer-floating)";
 /** 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
-@deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다.
+@deprecated `@seed-design/css@2.0.0`에서 제거될 예정입니다.
  */
 export declare const fadeLayerDefault = "var(--seed-gradient-fade-layer-default)";
 /** 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다. */