@seed-design/css 0.0.0-alpha-20260324091316

package/recipes/text.layered.mjs

@@ -0,0 +1,90 @@
+import './text.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "textStyle": "t5Regular",
+  "maxLines": "none",
+  "textDecorationLine": "none"
+};
+
+const compoundVariants = [];
+
+export const textVariantMap = {
+  "textStyle": [
+    "screenTitle",
+    "articleBody",
+    "articleNote",
+    "t1Regular",
+    "t1Medium",
+    "t1Bold",
+    "t2Regular",
+    "t2Medium",
+    "t2Bold",
+    "t3Regular",
+    "t3Medium",
+    "t3Bold",
+    "t4Regular",
+    "t4Medium",
+    "t4Bold",
+    "t5Regular",
+    "t5Medium",
+    "t5Bold",
+    "t6Regular",
+    "t6Medium",
+    "t6Bold",
+    "t7Regular",
+    "t7Medium",
+    "t7Bold",
+    "t8Bold",
+    "t9Bold",
+    "t10Bold",
+    "t1StaticRegular",
+    "t1StaticMedium",
+    "t1StaticBold",
+    "t2StaticRegular",
+    "t2StaticMedium",
+    "t2StaticBold",
+    "t3StaticRegular",
+    "t3StaticMedium",
+    "t3StaticBold",
+    "t4StaticRegular",
+    "t4StaticMedium",
+    "t4StaticBold",
+    "t5StaticRegular",
+    "t5StaticMedium",
+    "t5StaticBold",
+    "t6StaticRegular",
+    "t6StaticMedium",
+    "t6StaticBold",
+    "t7StaticRegular",
+    "t7StaticMedium",
+    "t7StaticBold",
+    "t8StaticBold",
+    "t9StaticBold",
+    "t10StaticBold"
+  ],
+  "maxLines": [
+    "none",
+    "single",
+    "multi"
+  ],
+  "textDecorationLine": [
+    "none",
+    "line-through",
+    "underline"
+  ]
+};
+
+export const textVariantKeys = Object.keys(textVariantMap);
+
+export function text(props) {
+  return createClassName(
+    "seed-text",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(text, { splitVariantProps: (props) => splitVariantProps(props, textVariantMap) });
+
+// @recipe(seed): text

package/recipes/text.mjs

@@ -0,0 +1,90 @@
+import './text.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "textStyle": "t5Regular",
+  "maxLines": "none",
+  "textDecorationLine": "none"
+};
+
+const compoundVariants = [];
+
+export const textVariantMap = {
+  "textStyle": [
+    "screenTitle",
+    "articleBody",
+    "articleNote",
+    "t1Regular",
+    "t1Medium",
+    "t1Bold",
+    "t2Regular",
+    "t2Medium",
+    "t2Bold",
+    "t3Regular",
+    "t3Medium",
+    "t3Bold",
+    "t4Regular",
+    "t4Medium",
+    "t4Bold",
+    "t5Regular",
+    "t5Medium",
+    "t5Bold",
+    "t6Regular",
+    "t6Medium",
+    "t6Bold",
+    "t7Regular",
+    "t7Medium",
+    "t7Bold",
+    "t8Bold",
+    "t9Bold",
+    "t10Bold",
+    "t1StaticRegular",
+    "t1StaticMedium",
+    "t1StaticBold",
+    "t2StaticRegular",
+    "t2StaticMedium",
+    "t2StaticBold",
+    "t3StaticRegular",
+    "t3StaticMedium",
+    "t3StaticBold",
+    "t4StaticRegular",
+    "t4StaticMedium",
+    "t4StaticBold",
+    "t5StaticRegular",
+    "t5StaticMedium",
+    "t5StaticBold",
+    "t6StaticRegular",
+    "t6StaticMedium",
+    "t6StaticBold",
+    "t7StaticRegular",
+    "t7StaticMedium",
+    "t7StaticBold",
+    "t8StaticBold",
+    "t9StaticBold",
+    "t10StaticBold"
+  ],
+  "maxLines": [
+    "none",
+    "single",
+    "multi"
+  ],
+  "textDecorationLine": [
+    "none",
+    "line-through",
+    "underline"
+  ]
+};
+
+export const textVariantKeys = Object.keys(textVariantMap);
+
+export function text(props) {
+  return createClassName(
+    "seed-text",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(text, { splitVariantProps: (props) => splitVariantProps(props, textVariantMap) });
+
+// @recipe(seed): text

package/recipes/toggle-button.css

@@ -0,0 +1,160 @@
+.seed-toggle-button {
+    display: inline-flex;
+    position: relative;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    text-transform: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: none;
+    flex-shrink: 0;
+    font-family: inherit;
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-toggle-button:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+}
+.seed-toggle-button {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    font-weight: var(--seed-font-weight-bold);
+}
+.seed-toggle-button--variant_brandSolid {
+    background: var(--seed-color-bg-brand-solid);
+    color: var(--seed-color-palette-static-white);
+    --track-color: var(--seed-color-palette-static-white-alpha-300);
+    --range-color: var(--seed-color-palette-static-white);
+}
+@media (hover: hover) {
+    .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
+        background: var(--seed-color-bg-brand-solid-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
+        background: var(--seed-color-bg-brand-solid-pressed);
+    }
+}
+.seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]) {
+    background: var(--seed-color-bg-neutral-weak);
+    color: var(--seed-color-fg-neutral);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
+@media (hover: hover) {
+    .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+.seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--seed-color-bg-disabled);
+    color: var(--seed-color-fg-disabled);
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+}
+.seed-toggle-button--variant_brandSolid[data-loading] {
+    background: var(--seed-color-bg-brand-solid-pressed);
+}
+.seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed])[data-loading] {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_brandSolid {
+    --seed-prefix-icon-color: var(--seed-color-palette-static-white);
+    --seed-suffix-icon-color: var(--seed-color-palette-static-white);
+}
+.seed-toggle-button--variant_neutralWeak {
+    background: var(--seed-color-bg-neutral-weak);
+    color: var(--seed-color-fg-neutral);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+}
+@media (hover: hover) {
+    .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+.seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]) {
+    background: var(--seed-color-bg-neutral-weak);
+    color: var(--seed-color-fg-neutral);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
+@media (hover: hover) {
+    .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+.seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--seed-color-bg-disabled);
+    color: var(--seed-color-fg-disabled);
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+}
+.seed-toggle-button--variant_neutralWeak[data-loading] {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed])[data-loading] {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-toggle-button--variant_neutralWeak {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
+.seed-toggle-button--size_xsmall {
+    height: var(--seed-dimension-x8);
+    border-radius: var(--seed-radius-full);
+    gap: var(--seed-dimension-x1);
+    padding-left: var(--seed-dimension-x3_5);
+    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-t3);
+    line-height: var(--seed-line-height-t3);
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+}
+.seed-toggle-button--size_small {
+    height: var(--seed-dimension-x9);
+    border-radius: var(--seed-radius-full);
+    gap: var(--seed-dimension-x1);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+}

package/recipes/toggle-button.d.ts

@@ -0,0 +1,26 @@
+declare interface ToggleButtonVariant {
+  /**
+  * @default "brandSolid"
+  */
+  variant: "brandSolid" | "neutralWeak";
+/**
+  * @default "small"
+  */
+  size: "xsmall" | "small";
+}
+
+declare type ToggleButtonVariantMap = {
+  [key in keyof ToggleButtonVariant]: Array<ToggleButtonVariant[key]>;
+};
+
+export declare type ToggleButtonVariantProps = Partial<ToggleButtonVariant>;
+
+export declare const toggleButtonVariantMap: ToggleButtonVariantMap;
+
+export declare const toggleButton: ((
+  props?: ToggleButtonVariantProps,
+) => string) & {
+  splitVariantProps: <T extends ToggleButtonVariantProps>(
+    props: T,
+  ) => [ToggleButtonVariantProps, Omit<T, keyof ToggleButtonVariantProps>];
+}

package/recipes/toggle-button.layered.css

@@ -0,0 +1,183 @@
+@layer seed-components {
+  .seed-toggle-button {
+    box-sizing: border-box;
+    cursor: pointer;
+    text-transform: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+    border: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    font-family: inherit;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .seed-toggle-button:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
+  .seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  .seed-toggle-button {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-toggle-button--variant_brandSolid {
+    background: var(--seed-color-bg-brand-solid);
+    color: var(--seed-color-palette-static-white);
+    --track-color: var(--seed-color-palette-static-white-alpha-300);
+    --range-color: var(--seed-color-palette-static-white);
+  }
+
+  @media (hover: hover) {
+    .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
+      background: var(--seed-color-bg-brand-solid-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
+      background: var(--seed-color-bg-brand-solid-pressed);
+    }
+  }
+
+  .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
+    background: var(--seed-color-bg-neutral-weak);
+    color: var(--seed-color-fg-neutral);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
+
+  @media (hover: hover) {
+    .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
+      background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
+      background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+  }
+
+  .seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--seed-color-bg-disabled);
+    color: var(--seed-color-fg-disabled);
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-toggle-button--variant_brandSolid[data-loading] {
+    background: var(--seed-color-bg-brand-solid-pressed);
+  }
+
+  .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed])[data-loading] {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+  }
+
+  .seed-toggle-button--variant_brandSolid {
+    --seed-prefix-icon-color: var(--seed-color-palette-static-white);
+    --seed-suffix-icon-color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-toggle-button--variant_neutralWeak {
+    background: var(--seed-color-bg-neutral-weak);
+    color: var(--seed-color-fg-neutral);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+  }
+
+  @media (hover: hover) {
+    .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
+      background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
+      background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+  }
+
+  .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
+    background: var(--seed-color-bg-neutral-weak);
+    color: var(--seed-color-fg-neutral);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
+
+  @media (hover: hover) {
+    .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
+      background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
+      background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+  }
+
+  .seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--seed-color-bg-disabled);
+    color: var(--seed-color-fg-disabled);
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-toggle-button--variant_neutralWeak[data-loading], .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed])[data-loading] {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+  }
+
+  .seed-toggle-button--variant_neutralWeak {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-toggle-button--size_xsmall {
+    height: var(--seed-dimension-x8);
+    border-radius: var(--seed-radius-full);
+    gap: var(--seed-dimension-x1);
+    padding-left: var(--seed-dimension-x3_5);
+    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-t3);
+    line-height: var(--seed-line-height-t3);
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+  }
+
+  .seed-toggle-button--size_small {
+    height: var(--seed-dimension-x9);
+    border-radius: var(--seed-radius-full);
+    gap: var(--seed-dimension-x1);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    --size: 14px;
+    --thickness: 2px;
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+  }
+}

package/recipes/toggle-button.layered.mjs

@@ -0,0 +1,34 @@
+import './toggle-button.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "variant": "brandSolid",
+  "size": "small"
+};
+
+const compoundVariants = [];
+
+export const toggleButtonVariantMap = {
+  "variant": [
+    "brandSolid",
+    "neutralWeak"
+  ],
+  "size": [
+    "xsmall",
+    "small"
+  ]
+};
+
+export const toggleButtonVariantKeys = Object.keys(toggleButtonVariantMap);
+
+export function toggleButton(props) {
+  return createClassName(
+    "seed-toggle-button",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(toggleButton, { splitVariantProps: (props) => splitVariantProps(props, toggleButtonVariantMap) });
+
+// @recipe(seed): toggle-button

package/recipes/toggle-button.mjs

@@ -0,0 +1,34 @@
+import './toggle-button.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "variant": "brandSolid",
+  "size": "small"
+};
+
+const compoundVariants = [];
+
+export const toggleButtonVariantMap = {
+  "variant": [
+    "brandSolid",
+    "neutralWeak"
+  ],
+  "size": [
+    "xsmall",
+    "small"
+  ]
+};
+
+export const toggleButtonVariantKeys = Object.keys(toggleButtonVariantMap);
+
+export function toggleButton(props) {
+  return createClassName(
+    "seed-toggle-button",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(toggleButton, { splitVariantProps: (props) => splitVariantProps(props, toggleButtonVariantMap) });
+
+// @recipe(seed): toggle-button

package/theming/index.cjs

@@ -0,0 +1,81 @@
+const { DefaultColorModeValue, isValidColorMode } = require("./mode.cjs");
+
+function generateThemingScript({ mode = DefaultColorModeValue, fontScaling = false }) {
+  if (!isValidColorMode(mode)) {
+    throw new Error(`Invalid color mode: ${mode}`);
+  }
+
+  return `
+    (function(window, document, mode) {
+      try {
+        document.documentElement.dataset.seed = '';
+        document.documentElement.dataset.seedColorMode = mode;
+      } catch (e) {}
+
+      try {
+        var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+        if ('addEventListener' in prefersDark) {
+          prefersDark.addEventListener('change', apply);
+        } else if ('addListener' in prefersDark) {
+          prefersDark.addListener(apply);
+        }
+
+        if (prefersDark.matches) {
+          document.documentElement.dataset.seedUserColorScheme = 'dark';
+        } else {
+          document.documentElement.dataset.seedUserColorScheme = 'light';
+        }
+
+        function apply() {
+          document.documentElement.dataset.seedUserColorScheme = prefersDark.matches ? 'dark' : 'light';
+        }
+      } catch (e) {}
+
+      try {
+        if (typeof window.AndroidFunction !== 'undefined') {
+          document.documentElement.dataset.seedPlatform = 'android';
+        } else if (typeof window.webkit !== 'undefined' && typeof window.webkit.messageHandlers !== 'undefined') {
+          document.documentElement.dataset.seedPlatform = 'ios';
+        } else {
+          document.documentElement.dataset.seedPlatform = 'ios';
+        }
+      } catch (e) {}
+
+      try {
+        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}');
+  `;
+}
+
+module.exports = { generateThemingScript };