@seed-design/css 1.1.10 → 1.1.13

package/recipes/menu-sheet.css

@@ -20,25 +20,6 @@
     background: var(--seed-color-bg-overlay);
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
 }
-.seed-menu-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-exit);
-    animation-duration: var(--seed-duration-d2);
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-.seed-menu-sheet__backdrop:is([data-state="open"], [data-open]) {
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter);
-    animation-duration: var(--seed-duration-d2);
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-}
 .seed-menu-sheet__content {
     position: relative;
     display: flex;
@@ -55,25 +36,6 @@
     border-top-left-radius: var(--seed-radius-r5);
     border-top-right-radius: var(--seed-radius-r5);
 }
-.seed-menu-sheet__content:not(:is([data-state="open"], [data-open])) {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-exit);
-    animation-duration: var(--seed-duration-d4);
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 100%;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}
-.seed-menu-sheet__content:is([data-state="open"], [data-open]) {
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter-expressive);
-    animation-duration: var(--seed-duration-d6);
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 100%;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-}
 .seed-menu-sheet__header {
     display: flex;
     flex-direction: column;
@@ -128,4 +90,42 @@
 }
 .seed-menu-sheet__closeButton:is(:active, [data-active]) {
     background-color: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
+    animation: seed-enter;
+    animation-timing-function: var(--seed-timing-function-enter);
+    animation-duration: var(--seed-duration-d2);
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 1;
+}
+.seed-menu-sheet__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+    animation: seed-exit;
+    animation-timing-function: var(--seed-timing-function-exit);
+    animation-duration: var(--seed-duration-d2);
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+}
+.seed-menu-sheet__content--skipAnimation_false:is([data-state="open"], [data-open]) {
+    animation: seed-enter;
+    animation-timing-function: var(--seed-timing-function-enter-expressive);
+    animation-duration: var(--seed-duration-d6);
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 100%;
+    --seed-enter-opacity: 1;
+    --seed-enter-scale: 1;
+}
+.seed-menu-sheet__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+    animation: seed-exit;
+    animation-timing-function: var(--seed-timing-function-exit);
+    animation-duration: var(--seed-duration-d4);
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 100%;
+    --seed-exit-opacity: 1;
+    --seed-exit-scale: 1;
 }

package/recipes/menu-sheet.d.ts

@@ -1,5 +1,8 @@
 declare interface MenuSheetVariant {
-  
+  /**
+  * @default false
+  */
+  skipAnimation: boolean;
 }
 
 declare type MenuSheetVariantMap = {

package/recipes/menu-sheet.mjs

@@ -40,11 +40,17 @@ const menuSheetSlotNames = [
   ]
 ];
 
-const defaultVariant = {};
+const defaultVariant = {
+  "skipAnimation": false
+};
 
 const compoundVariants = [];
 
-export const menuSheetVariantMap = {};
+export const menuSheetVariantMap = {
+  "skipAnimation": [
+    false
+  ]
+};
 
 export const menuSheetVariantKeys = Object.keys(menuSheetVariantMap);
 

package/recipes/toggle-button.css

@@ -105,8 +105,8 @@
     padding-right: var(--seed-dimension-x3_5);
     padding-top: var(--seed-dimension-x1_5);
     padding-bottom: var(--seed-dimension-x1_5);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
     --size: 14px;
     --thickness: 2px;
     --seed-prefix-icon-size: var(--seed-dimension-x3_5);

package/theming/index.cjs

@@ -43,8 +43,35 @@ function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = fal
       } catch (e) {}
 
       try {
-        if (${fontScaling} && document.documentElement.dataset.seedPlatform === 'ios') {
-          document.documentElement.dataset.seedFontScaling = 'enabled';
+        if (${fontScaling}) {
+          var platform = document.documentElement.dataset.seedPlatform;
+
+          if (platform === 'ios') {
+            document.documentElement.dataset.seedFontScaling = 'enabled';
+
+            function applyIOSFontScaling() {
+              try {
+                var tempEl = document.createElement('div');
+                tempEl.style.cssText = 'position:absolute;visibility:hidden;font-size:16px;font:-apple-system-body;';
+                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();
+              } catch (e) {}
+            }
+
+            if (document.readyState === 'loading') {
+              document.addEventListener('DOMContentLoaded', applyIOSFontScaling);
+            } else {
+              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();
+            document.documentElement.dataset.seedFontScaling = 'enabled';
+          }
         }
       } catch (e) {}
     })(window, document, '${mode}');

package/theming/index.mjs

@@ -43,8 +43,35 @@ export const generateThemingScript = ({ mode = DefaultColorModeValue, fontScalin
       } catch (e) {}
 
       try {
-        if (${fontScaling} && document.documentElement.dataset.seedPlatform === 'ios') {
-          document.documentElement.dataset.seedFontScaling = 'enabled';
+        if (${fontScaling}) {
+          var platform = document.documentElement.dataset.seedPlatform;
+
+          if (platform === 'ios') {
+            document.documentElement.dataset.seedFontScaling = 'enabled';
+
+            function applyIOSFontScaling() {
+              try {
+                var tempEl = document.createElement('div');
+                tempEl.style.cssText = 'position:absolute;visibility:hidden;font-size:16px;font:-apple-system-body;';
+                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();
+              } catch (e) {}
+            }
+
+            if (document.readyState === 'loading') {
+              document.addEventListener('DOMContentLoaded', applyIOSFontScaling);
+            } else {
+              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();
+            document.documentElement.dataset.seedFontScaling = 'enabled';
+          }
         }
       } catch (e) {}
     })(window, document, '${mode}');

package/vars/component/action-button.d.ts

@@ -392,8 +392,8 @@ export declare const vars: {
         "size": "var(--seed-dimension-x3_5)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
       }
     }
   },

package/vars/component/action-button.mjs

@@ -392,8 +392,8 @@ export const vars = {
         "size": "var(--seed-dimension-x3_5)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
       }
     }
   },

package/vars/component/contextual-floating-button.d.ts

@@ -3,7 +3,7 @@ export declare const vars: {
     "enabled": {
       "root": {
         "cornerRadius": "var(--seed-radius-full)",
-        "shadow": "0px 2px 6px 0px #00000026",
+        "shadow": "var(--seed-shadow-s3)",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)"
       },

package/vars/component/contextual-floating-button.mjs

@@ -3,7 +3,7 @@ export const vars = {
     "enabled": {
       "root": {
         "cornerRadius": "var(--seed-radius-full)",
-        "shadow": "0px 2px 6px 0px #00000026",
+        "shadow": "var(--seed-shadow-s3)",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)"
       },

package/vars/component/floating-action-button.d.ts

@@ -4,7 +4,7 @@ export declare const vars: {
       "root": {
         "color": "var(--seed-color-bg-brand-solid)",
         "cornerRadius": "var(--seed-radius-full)",
-        "shadow": "0px 2px 6px 0px #00000026",
+        "shadow": "var(--seed-shadow-s3)",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)",
         "layoutDuration": "var(--seed-duration-d4)",

package/vars/component/floating-action-button.mjs

@@ -4,7 +4,7 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-brand-solid)",
         "cornerRadius": "var(--seed-radius-full)",
-        "shadow": "0px 2px 6px 0px #00000026",
+        "shadow": "var(--seed-shadow-s3)",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)",
         "layoutDuration": "var(--seed-duration-d4)",

package/vars/component/radiomark.d.ts

@@ -22,20 +22,6 @@ export declare const vars: {
         "strokeWidth": "0px",
         "strokeColor": "#00000000"
       }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-palette-gray-300)"
-      }
-    },
-    "disabledSelected": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)",
-        "strokeColor": "var(--seed-color-palette-gray-300)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-gray-300)"
-      }
     }
   },
   "toneBrand": {
@@ -51,6 +37,21 @@ export declare const vars: {
       "root": {
         "color": "var(--seed-color-bg-brand-solid-pressed)"
       }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-300)"
+      }
+    },
+    "disabledSelected": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-palette-gray-300)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-gray-300)"
+      }
     }
   },
   "toneNeutral": {
@@ -66,6 +67,21 @@ export declare const vars: {
       "root": {
         "color": "var(--seed-color-bg-neutral-inverted-pressed)"
       }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-300)"
+      }
+    },
+    "disabledSelected": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-palette-gray-300)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-gray-300)"
+      }
     }
   },
   "sizeMedium": {

package/vars/component/radiomark.mjs

@@ -22,20 +22,6 @@ export const vars = {
         "strokeWidth": "0px",
         "strokeColor": "#00000000"
       }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-palette-gray-300)"
-      }
-    },
-    "disabledSelected": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)",
-        "strokeColor": "var(--seed-color-palette-gray-300)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-gray-300)"
-      }
     }
   },
   "toneBrand": {
@@ -51,6 +37,21 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-brand-solid-pressed)"
       }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-300)"
+      }
+    },
+    "disabledSelected": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-palette-gray-300)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-gray-300)"
+      }
     }
   },
   "toneNeutral": {
@@ -66,6 +67,21 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-neutral-inverted-pressed)"
       }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-300)"
+      }
+    },
+    "disabledSelected": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-palette-gray-300)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-gray-300)"
+      }
     }
   },
   "sizeMedium": {

package/vars/component/toggle-button.d.ts

@@ -170,8 +170,8 @@ export declare const vars: {
         "size": "var(--seed-dimension-x3_5)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
       },
       "progressCircle": {
         "size": "14px",

package/vars/component/toggle-button.mjs

@@ -170,8 +170,8 @@ export const vars = {
         "size": "var(--seed-dimension-x3_5)"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
       },
       "progressCircle": {
         "size": "14px",

package/vars/index.d.ts

@@ -42,3 +42,5 @@ export type Dimension = Exclude<keyof TokenObject["$dimension"], "spacingX" | "s
 export type SpacingX = keyof TokenObject["$dimension"]["spacingX"];
 
 export type SpacingY = keyof TokenObject["$dimension"]["spacingY"];
+
+export type Shadow = keyof TokenObject["$shadow"];

package/vars/shadow.d.ts

@@ -0,0 +1,3 @@
+export declare const s1 = "var(--seed-shadow-s1)";
+export declare const s2 = "var(--seed-shadow-s2)";
+export declare const s3 = "var(--seed-shadow-s3)";

package/vars/shadow.mjs

@@ -0,0 +1,3 @@
+export const s1 = "var(--seed-shadow-s1)";
+export const s2 = "var(--seed-shadow-s2)";
+export const s3 = "var(--seed-shadow-s3)";

package/vars/vars.d.ts

@@ -1,9 +1,10 @@
 export * as $color from "./color";
+export * as $dimension from "./dimension";
 export * as $duration from "./duration";
 export * as $fontSize from "./font-size";
 export * as $fontWeight from "./font-weight";
 export * as $gradient from "./gradient";
 export * as $lineHeight from "./line-height";
 export * as $radius from "./radius";
+export * as $shadow from "./shadow"
 export * as $timingFunction from "./timing-function";
-export * as $dimension from "./dimension";

package/vars/vars.mjs

@@ -1,9 +1,10 @@
 export * as $color from "./color/index.mjs";
+export * as $dimension from "./dimension/index.mjs";
 export * as $duration from "./duration.mjs";
 export * as $fontSize from "./font-size.mjs";
 export * as $fontWeight from "./font-weight.mjs";
 export * as $gradient from "./gradient.mjs";
 export * as $lineHeight from "./line-height.mjs";
 export * as $radius from "./radius.mjs";
+export * as $shadow from "./shadow.mjs";
 export * as $timingFunction from "./timing-function.mjs";
-export * as $dimension from "./dimension/index.mjs";