@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.2

package/dist/tailwind/utils/addFontsPlugin.d.ts

@@ -0,0 +1,18 @@
+import { FontID } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import * as tailwindcss_types_config3 from "tailwindcss/types/config";
+
+//#region src/tailwind/utils/addFontsPlugin.d.ts
+interface AddFontsPluginOptions {
+  fontIds: FontID[];
+}
+declare const addFontsPlugin: {
+  (options: AddFontsPluginOptions): {
+    handler: tailwindcss_types_config3.PluginCreator;
+    config?: Partial<tailwindcss_types_config3.Config>;
+  };
+  __isOptionsFunction: true;
+};
+//#endregion
+export { AddFontsPluginOptions, addFontsPlugin };
+//# sourceMappingURL=addFontsPlugin.d.ts.map

package/dist/tailwind/utils/addFontsPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addFontsPlugin.d.ts","names":[],"sources":["../../../src/tailwind/utils/addFontsPlugin.ts"],"sourcesContent":[],"mappings":";;;;;UAOiB,qBAAA;WACN;;cAEE;EAHI,CAAA,OAAA,CAAA,sBAAqB,CAAA,CAAA,CAAA;IAGzB,OAAA,CAAA,wCAMX;aAZ2C,kCAAA,MAAA;;2BAAA;CAAA"}

package/dist/tailwind/utils/addFontsPlugin.js

@@ -0,0 +1,14 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { addFontFaceDeclarations } from "../base/addFontFaceDeclarations.js";
+import plugin from "tailwindcss/plugin.js";
+
+//#region src/tailwind/utils/addFontsPlugin.ts
+const addFontsPlugin = plugin.withOptions(function addFontsPlugin$1({ fontIds }) {
+	return function({ addBase }) {
+		addFontFaceDeclarations(fontIds, { addBase });
+	};
+});
+
+//#endregion
+export { addFontsPlugin };
+//# sourceMappingURL=addFontsPlugin.js.map

package/dist/tailwind/utils/addFontsPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addFontsPlugin.js","names":["addFontsPlugin"],"sources":["../../../src/tailwind/utils/addFontsPlugin.ts"],"sourcesContent":["import type { FontID } from '@yahoo/uds/tokens';\n// Tailwind 3.x poorly supports ESM modules so we must include the .js extension when importing.\nimport plugin from 'tailwindcss/plugin.js';\n\nimport { addFontFaceDeclarations } from '../base/addFontFaceDeclarations';\nimport type { TailwindPluginFns } from '../base/types';\n\nexport interface AddFontsPluginOptions {\n  fontIds: FontID[];\n}\nexport const addFontsPlugin = plugin.withOptions(function addFontsPlugin({\n  fontIds,\n}: AddFontsPluginOptions) {\n  return function ({ addBase }) {\n    addFontFaceDeclarations(fontIds, { addBase } as TailwindPluginFns);\n  };\n});\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,OAAO,YAAY,SAASA,iBAAe,EACvE,WACwB;AACxB,QAAO,SAAU,EAAE,WAAW;AAC5B,0BAAwB,SAAS,EAAE,SAAS,CAAsB;;EAEpE"}

package/dist/tailwind/utils/getColorModeStyles.cjs

@@ -0,0 +1,22 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+
+//#region src/tailwind/utils/getColorModeStyles.ts
+function getColorModeStyles(tokens) {
+	return {
+		light: {
+			colorScheme: "light",
+			"--uds-light-mode-icon": "inline",
+			"--uds-dark-mode-icon": "none",
+			...tokens.colorMode.light._vars
+		},
+		dark: {
+			colorScheme: "dark",
+			"--uds-light-mode-icon": "none",
+			"--uds-dark-mode-icon": "inline",
+			...tokens.colorMode.dark._vars
+		}
+	};
+}
+
+//#endregion
+exports.getColorModeStyles = getColorModeStyles;

package/dist/tailwind/utils/getColorModeStyles.d.cts

@@ -0,0 +1,18 @@
+import { WebTokens } from "../../tokens/parseTokens.cjs";
+
+//#region src/tailwind/utils/getColorModeStyles.d.ts
+declare function getColorModeStyles(tokens: WebTokens): {
+  light: {
+    colorScheme: string;
+    '--uds-light-mode-icon': string;
+    '--uds-dark-mode-icon': string;
+  };
+  dark: {
+    colorScheme: string;
+    '--uds-light-mode-icon': string;
+    '--uds-dark-mode-icon': string;
+  };
+};
+//#endregion
+export { getColorModeStyles };
+//# sourceMappingURL=getColorModeStyles.d.cts.map

package/dist/tailwind/utils/getColorModeStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getColorModeStyles.d.cts","names":[],"sources":["../../../src/tailwind/utils/getColorModeStyles.ts"],"sourcesContent":[],"mappings":";;;iBAEgB,kBAAA,SAA2B;;IAA3B,WAAA,CAAA,CAAA,MAAkB"}

package/dist/tailwind/utils/getColorModeStyles.d.ts

@@ -0,0 +1,18 @@
+import { WebTokens } from "../../tokens/parseTokens.js";
+
+//#region src/tailwind/utils/getColorModeStyles.d.ts
+declare function getColorModeStyles(tokens: WebTokens): {
+  light: {
+    colorScheme: string;
+    '--uds-light-mode-icon': string;
+    '--uds-dark-mode-icon': string;
+  };
+  dark: {
+    colorScheme: string;
+    '--uds-light-mode-icon': string;
+    '--uds-dark-mode-icon': string;
+  };
+};
+//#endregion
+export { getColorModeStyles };
+//# sourceMappingURL=getColorModeStyles.d.ts.map

package/dist/tailwind/utils/getColorModeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getColorModeStyles.d.ts","names":[],"sources":["../../../src/tailwind/utils/getColorModeStyles.ts"],"sourcesContent":[],"mappings":";;;iBAEgB,kBAAA,SAA2B;;IAA3B,WAAA,CAAA,CAAA,MAAkB"}

package/dist/tailwind/utils/getColorModeStyles.js

@@ -0,0 +1,22 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+//#region src/tailwind/utils/getColorModeStyles.ts
+function getColorModeStyles(tokens) {
+	return {
+		light: {
+			colorScheme: "light",
+			"--uds-light-mode-icon": "inline",
+			"--uds-dark-mode-icon": "none",
+			...tokens.colorMode.light._vars
+		},
+		dark: {
+			colorScheme: "dark",
+			"--uds-light-mode-icon": "none",
+			"--uds-dark-mode-icon": "inline",
+			...tokens.colorMode.dark._vars
+		}
+	};
+}
+
+//#endregion
+export { getColorModeStyles };
+//# sourceMappingURL=getColorModeStyles.js.map

package/dist/tailwind/utils/getColorModeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getColorModeStyles.js","names":[],"sources":["../../../src/tailwind/utils/getColorModeStyles.ts"],"sourcesContent":["import type { WebTokens } from '@yahoo/uds/tokens/parseTokens';\n\nexport function getColorModeStyles(tokens: WebTokens) {\n  const lightStyles = {\n    colorScheme: 'light',\n    '--uds-light-mode-icon': 'inline',\n    '--uds-dark-mode-icon': 'none',\n    ...tokens.colorMode.light._vars,\n  };\n  const darkStyles = {\n    colorScheme: 'dark',\n    '--uds-light-mode-icon': 'none',\n    '--uds-dark-mode-icon': 'inline',\n    ...tokens.colorMode.dark._vars,\n  };\n\n  return {\n    light: lightStyles,\n    dark: darkStyles,\n  };\n}\n"],"mappings":";;AAEA,SAAgB,mBAAmB,QAAmB;AAcpD,QAAO;EACL,OAdkB;GAClB,aAAa;GACb,yBAAyB;GACzB,wBAAwB;GACxB,GAAG,OAAO,UAAU,MAAM;GAC3B;EAUC,MATiB;GACjB,aAAa;GACb,yBAAyB;GACzB,wBAAwB;GACxB,GAAG,OAAO,UAAU,KAAK;GAC1B;EAKA"}

package/dist/tailwind/utils/getFontFaceDeclarations.cjs

@@ -0,0 +1,20 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_tokens_consts_fontDeclarationsMap = require('../../tokens/consts/fontDeclarationsMap.cjs');
+
+//#region src/tailwind/utils/getFontFaceDeclarations.ts
+/**
+* Get all font face declarations for a given set of font IDs.
+*/
+function getFontFaceDeclarations(fontIds) {
+	return fontIds.flatMap((fontID) => {
+		const { declarations, fontFamily } = require_tokens_consts_fontDeclarationsMap.FONT_DECLARATIONS_MAP[fontID];
+		return declarations.map((declaration) => ({
+			fontFamily,
+			fontDisplay: "swap",
+			...declaration
+		}));
+	});
+}
+
+//#endregion
+exports.getFontFaceDeclarations = getFontFaceDeclarations;

package/dist/tailwind/utils/getFontFaceDeclarations.d.cts

@@ -0,0 +1,12 @@
+import { FontDeclarationItemConfig } from "../../tokens/consts/fontDeclarationsMap.cjs";
+import { FontID } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+
+//#region src/tailwind/utils/getFontFaceDeclarations.d.ts
+/**
+ * Get all font face declarations for a given set of font IDs.
+ */
+declare function getFontFaceDeclarations(fontIds: FontID[]): FontDeclarationItemConfig[];
+//#endregion
+export { getFontFaceDeclarations };
+//# sourceMappingURL=getFontFaceDeclarations.d.cts.map

package/dist/tailwind/utils/getFontFaceDeclarations.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFontFaceDeclarations.d.cts","names":[],"sources":["../../../src/tailwind/utils/getFontFaceDeclarations.ts"],"sourcesContent":[],"mappings":";;;;;;;;iBAMgB,uBAAA,UAAiC,WAAW"}

package/dist/tailwind/utils/getFontFaceDeclarations.d.ts

@@ -0,0 +1,12 @@
+import { FontDeclarationItemConfig } from "../../tokens/consts/fontDeclarationsMap.js";
+import { FontID } from "../../tokens/types.js";
+import "../../tokens/index.js";
+
+//#region src/tailwind/utils/getFontFaceDeclarations.d.ts
+/**
+ * Get all font face declarations for a given set of font IDs.
+ */
+declare function getFontFaceDeclarations(fontIds: FontID[]): FontDeclarationItemConfig[];
+//#endregion
+export { getFontFaceDeclarations };
+//# sourceMappingURL=getFontFaceDeclarations.d.ts.map

package/dist/tailwind/utils/getFontFaceDeclarations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFontFaceDeclarations.d.ts","names":[],"sources":["../../../src/tailwind/utils/getFontFaceDeclarations.ts"],"sourcesContent":[],"mappings":";;;;;;;;iBAMgB,uBAAA,UAAiC,WAAW"}

package/dist/tailwind/utils/getFontFaceDeclarations.js

@@ -0,0 +1,21 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { FONT_DECLARATIONS_MAP } from "../../tokens/consts/fontDeclarationsMap.js";
+
+//#region src/tailwind/utils/getFontFaceDeclarations.ts
+/**
+* Get all font face declarations for a given set of font IDs.
+*/
+function getFontFaceDeclarations(fontIds) {
+	return fontIds.flatMap((fontID) => {
+		const { declarations, fontFamily } = FONT_DECLARATIONS_MAP[fontID];
+		return declarations.map((declaration) => ({
+			fontFamily,
+			fontDisplay: "swap",
+			...declaration
+		}));
+	});
+}
+
+//#endregion
+export { getFontFaceDeclarations };
+//# sourceMappingURL=getFontFaceDeclarations.js.map

package/dist/tailwind/utils/getFontFaceDeclarations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFontFaceDeclarations.js","names":[],"sources":["../../../src/tailwind/utils/getFontFaceDeclarations.ts"],"sourcesContent":["import type { FontDeclarationItemConfig, FontID } from '@yahoo/uds/tokens';\nimport { FONT_DECLARATIONS_MAP } from '@yahoo/uds/tokens';\n\n/**\n * Get all font face declarations for a given set of font IDs.\n */\nexport function getFontFaceDeclarations(fontIds: FontID[]): FontDeclarationItemConfig[] {\n  return fontIds.flatMap((fontID) => {\n    const { declarations, fontFamily } = FONT_DECLARATIONS_MAP[fontID];\n    return declarations.map((declaration) => ({ fontFamily, fontDisplay: 'swap', ...declaration }));\n  });\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,wBAAwB,SAAgD;AACtF,QAAO,QAAQ,SAAS,WAAW;EACjC,MAAM,EAAE,cAAc,eAAe,sBAAsB;AAC3D,SAAO,aAAa,KAAK,iBAAiB;GAAE;GAAY,aAAa;GAAQ,GAAG;GAAa,EAAE;GAC/F"}

package/dist/tailwind/utils/getFontStyles.cjs

@@ -0,0 +1,41 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_tokens_consts_cssTokens = require('../../tokens/consts/cssTokens.cjs');
+const require_tokens_consts_fontDeclarationsMap = require('../../tokens/consts/fontDeclarationsMap.cjs');
+const require_tokens_utils_entries = require('../../tokens/utils/entries.cjs');
+const require_tokens_utils_fromEntries = require('../../tokens/utils/fromEntries.cjs');
+
+//#region src/tailwind/utils/getFontStyles.ts
+/**
+* Tailwind does not automatically escape font names for you.
+* If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
+* @link https://tailwindcss.com/docs/font-family#customizing-your-theme:~:text=Tailwind%20does%20not%20automatically
+*/
+function escapeFontFamilyName(fontFamily) {
+	return `"${fontFamily}"`;
+}
+/**
+* Return CSS variables object based on font config.
+* i.e. { --font-xyz: '"Font Family 1", "Font Family 2", sans-serif' }
+*
+* @example
+* // 1. Use return value in style prop of an html element to assign font variables at runtime
+*
+* const fontVars = getFontStyles(fontConfig);
+* <body style={fontVars}> {...} </body>
+*
+* // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+*
+* const fontVars = getFontStyles(fontConfig);
+* addRootVariables(fontVars);
+*
+*/
+function getFontStyles(fontConfig) {
+	return require_tokens_utils_fromEntries.fromEntries(require_tokens_utils_entries.entries(fontConfig).map(([fontAlias, fontID]) => {
+		const cssVar = `--${require_tokens_consts_cssTokens.FONT_FAMILY_PREFIX}-${fontAlias}`;
+		const font = require_tokens_consts_fontDeclarationsMap.FONT_DECLARATIONS_MAP[fontID];
+		return [cssVar, [font.fontFamily, ...font.fallback].map(escapeFontFamilyName).join(", ")];
+	}));
+}
+
+//#endregion
+exports.getFontStyles = getFontStyles;

package/dist/tailwind/utils/getFontStyles.d.cts

@@ -0,0 +1,25 @@
+import { FontConfig } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+
+//#region src/tailwind/utils/getFontStyles.d.ts
+
+/**
+ * Return CSS variables object based on font config.
+ * i.e. { --font-xyz: '"Font Family 1", "Font Family 2", sans-serif' }
+ *
+ * @example
+ * // 1. Use return value in style prop of an html element to assign font variables at runtime
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * <body style={fontVars}> {...} </body>
+ *
+ * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * addRootVariables(fontVars);
+ *
+ */
+declare function getFontStyles(fontConfig: FontConfig): Record<"--uds-font-sans" | "--uds-font-sans-alt" | "--uds-font-serif" | "--uds-font-serif-alt" | "--uds-font-mono", string>;
+//#endregion
+export { getFontStyles };
+//# sourceMappingURL=getFontStyles.d.cts.map

package/dist/tailwind/utils/getFontStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFontStyles.d.cts","names":[],"sources":["../../../src/tailwind/utils/getFontStyles.ts"],"sourcesContent":[],"mappings":";;;;;;;;AA4BA,CAAA;;;;;;;;;;;;;iBAAgB,aAAA,aAA0B,aAAU"}

package/dist/tailwind/utils/getFontStyles.d.ts

@@ -0,0 +1,25 @@
+import { FontConfig } from "../../tokens/types.js";
+import "../../tokens/index.js";
+
+//#region src/tailwind/utils/getFontStyles.d.ts
+
+/**
+ * Return CSS variables object based on font config.
+ * i.e. { --font-xyz: '"Font Family 1", "Font Family 2", sans-serif' }
+ *
+ * @example
+ * // 1. Use return value in style prop of an html element to assign font variables at runtime
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * <body style={fontVars}> {...} </body>
+ *
+ * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * addRootVariables(fontVars);
+ *
+ */
+declare function getFontStyles(fontConfig: FontConfig): Record<"--uds-font-sans" | "--uds-font-sans-alt" | "--uds-font-serif" | "--uds-font-serif-alt" | "--uds-font-mono", string>;
+//#endregion
+export { getFontStyles };
+//# sourceMappingURL=getFontStyles.d.ts.map

package/dist/tailwind/utils/getFontStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFontStyles.d.ts","names":[],"sources":["../../../src/tailwind/utils/getFontStyles.ts"],"sourcesContent":[],"mappings":";;;;;;;;AA4BA,CAAA;;;;;;;;;;;;;iBAAgB,aAAA,aAA0B,aAAU"}

package/dist/tailwind/utils/getFontStyles.js

@@ -0,0 +1,42 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { FONT_FAMILY_PREFIX } from "../../tokens/consts/cssTokens.js";
+import { FONT_DECLARATIONS_MAP } from "../../tokens/consts/fontDeclarationsMap.js";
+import { entries } from "../../tokens/utils/entries.js";
+import { fromEntries } from "../../tokens/utils/fromEntries.js";
+
+//#region src/tailwind/utils/getFontStyles.ts
+/**
+* Tailwind does not automatically escape font names for you.
+* If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
+* @link https://tailwindcss.com/docs/font-family#customizing-your-theme:~:text=Tailwind%20does%20not%20automatically
+*/
+function escapeFontFamilyName(fontFamily) {
+	return `"${fontFamily}"`;
+}
+/**
+* Return CSS variables object based on font config.
+* i.e. { --font-xyz: '"Font Family 1", "Font Family 2", sans-serif' }
+*
+* @example
+* // 1. Use return value in style prop of an html element to assign font variables at runtime
+*
+* const fontVars = getFontStyles(fontConfig);
+* <body style={fontVars}> {...} </body>
+*
+* // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+*
+* const fontVars = getFontStyles(fontConfig);
+* addRootVariables(fontVars);
+*
+*/
+function getFontStyles(fontConfig) {
+	return fromEntries(entries(fontConfig).map(([fontAlias, fontID]) => {
+		const cssVar = `--${FONT_FAMILY_PREFIX}-${fontAlias}`;
+		const font = FONT_DECLARATIONS_MAP[fontID];
+		return [cssVar, [font.fontFamily, ...font.fallback].map(escapeFontFamilyName).join(", ")];
+	}));
+}
+
+//#endregion
+export { getFontStyles };
+//# sourceMappingURL=getFontStyles.js.map

package/dist/tailwind/utils/getFontStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFontStyles.js","names":[],"sources":["../../../src/tailwind/utils/getFontStyles.ts"],"sourcesContent":["import type { FontConfig } from '@yahoo/uds/tokens';\nimport { entries, FONT_DECLARATIONS_MAP, FONT_FAMILY_PREFIX, fromEntries } from '@yahoo/uds/tokens';\n\n/**\n * Tailwind does not automatically escape font names for you.\n * If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.\n * @link https://tailwindcss.com/docs/font-family#customizing-your-theme:~:text=Tailwind%20does%20not%20automatically\n */\nfunction escapeFontFamilyName(fontFamily: string) {\n  return `\"${fontFamily}\"`;\n}\n\n/**\n * Return CSS variables object based on font config.\n * i.e. { --font-xyz: '\"Font Family 1\", \"Font Family 2\", sans-serif' }\n *\n * @example\n * // 1. Use return value in style prop of an html element to assign font variables at runtime\n *\n * const fontVars = getFontStyles(fontConfig);\n * <body style={fontVars}> {...} </body>\n *\n * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.\n *\n * const fontVars = getFontStyles(fontConfig);\n * addRootVariables(fontVars);\n *\n */\nexport function getFontStyles(fontConfig: FontConfig) {\n  return fromEntries(\n    entries(fontConfig).map(([fontAlias, fontID]) => {\n      const cssVar = `--${FONT_FAMILY_PREFIX}-${fontAlias}` as const;\n      const font = FONT_DECLARATIONS_MAP[fontID];\n      const value = [font.fontFamily, ...font.fallback].map(escapeFontFamilyName).join(', ');\n      return [cssVar, value] as const;\n    }),\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAQA,SAAS,qBAAqB,YAAoB;AAChD,QAAO,IAAI,WAAW;;;;;;;;;;;;;;;;;;AAmBxB,SAAgB,cAAc,YAAwB;AACpD,QAAO,YACL,QAAQ,WAAW,CAAC,KAAK,CAAC,WAAW,YAAY;EAC/C,MAAM,SAAS,KAAK,mBAAmB,GAAG;EAC1C,MAAM,OAAO,sBAAsB;AAEnC,SAAO,CAAC,QADM,CAAC,KAAK,YAAY,GAAG,KAAK,SAAS,CAAC,IAAI,qBAAqB,CAAC,KAAK,KAAK,CAChE;GACtB,CACH"}

package/dist/tailwind/utils/getMotionStyles.cjs

@@ -0,0 +1,38 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_tokens_utils_entries = require('../../tokens/utils/entries.cjs');
+const require_tokens_utils_fromEntries = require('../../tokens/utils/fromEntries.cjs');
+const require_utils_getMotionVar = require('../../utils/getMotionVar.cjs');
+let __yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
+
+//#region src/tailwind/utils/getMotionStyles.ts
+/**
+* Return CSS variables object based on the motion config.
+* i.e. { --uds-motion-damped-1--damping: '20.585796264350424' }
+*
+* @example
+* // 1. Use return value in style prop of an html element to assign motion variables at runtime
+*
+* const motionVars = getMotionStyles(motionConfig);
+* <body style={motionVars}> {...} </body>
+*
+* // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+*
+* const motionVars = getMotionStyles(motionConfig);
+* addRootVariables(motionVars);
+*
+*/
+function getMotionStyles(motionConfig) {
+	return require_tokens_utils_fromEntries.fromEntries(require_tokens_utils_entries.entries(motionConfig).flatMap(([variant, speeds]) => require_tokens_utils_entries.entries(speeds).flatMap(([speed, config]) => {
+		return __yahoo_uds_fixtures.motionSpringConfigOptions.map((control) => {
+			return [require_utils_getMotionVar.getMotionVar({
+				variant,
+				speed,
+				control
+			}), `${config[control]}`];
+		});
+	})));
+}
+
+//#endregion
+exports.getMotionStyles = getMotionStyles;

package/dist/tailwind/utils/getMotionStyles.d.cts

@@ -0,0 +1,25 @@
+import { MotionConfig } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+
+//#region src/tailwind/utils/getMotionStyles.d.ts
+
+/**
+ * Return CSS variables object based on the motion config.
+ * i.e. { --uds-motion-damped-1--damping: '20.585796264350424' }
+ *
+ * @example
+ * // 1. Use return value in style prop of an html element to assign motion variables at runtime
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * <body style={motionVars}> {...} </body>
+ *
+ * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * addRootVariables(motionVars);
+ *
+ */
+declare function getMotionStyles(motionConfig: MotionConfig): Record<"--uds-motion-damped-2-damping" | "--uds-motion-damped-2-stiffness" | "--uds-motion-damped-1-damping" | "--uds-motion-damped-1-stiffness" | "--uds-motion-damped-4-damping" | "--uds-motion-damped-4-stiffness" | "--uds-motion-damped-3-damping" | "--uds-motion-damped-3-stiffness" | "--uds-motion-smooth-2-damping" | "--uds-motion-smooth-2-stiffness" | "--uds-motion-smooth-1-damping" | "--uds-motion-smooth-1-stiffness" | "--uds-motion-smooth-4-damping" | "--uds-motion-smooth-4-stiffness" | "--uds-motion-smooth-3-damping" | "--uds-motion-smooth-3-stiffness" | "--uds-motion-subtle-2-damping" | "--uds-motion-subtle-2-stiffness" | "--uds-motion-subtle-1-damping" | "--uds-motion-subtle-1-stiffness" | "--uds-motion-subtle-4-damping" | "--uds-motion-subtle-4-stiffness" | "--uds-motion-subtle-3-damping" | "--uds-motion-subtle-3-stiffness" | "--uds-motion-bouncy-2-damping" | "--uds-motion-bouncy-2-stiffness" | "--uds-motion-bouncy-1-damping" | "--uds-motion-bouncy-1-stiffness" | "--uds-motion-bouncy-4-damping" | "--uds-motion-bouncy-4-stiffness" | "--uds-motion-bouncy-3-damping" | "--uds-motion-bouncy-3-stiffness" | "--uds-motion-veryBouncy-2-damping" | "--uds-motion-veryBouncy-2-stiffness" | "--uds-motion-veryBouncy-1-damping" | "--uds-motion-veryBouncy-1-stiffness" | "--uds-motion-veryBouncy-4-damping" | "--uds-motion-veryBouncy-4-stiffness" | "--uds-motion-veryBouncy-3-damping" | "--uds-motion-veryBouncy-3-stiffness", string>;
+//#endregion
+export { getMotionStyles };
+//# sourceMappingURL=getMotionStyles.d.cts.map

package/dist/tailwind/utils/getMotionStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMotionStyles.d.cts","names":[],"sources":["../../../src/tailwind/utils/getMotionStyles.ts"],"sourcesContent":[],"mappings":";;;;;;;;AAsBA,CAAA;;;;;;;;;;;;;iBAAgB,eAAA,eAA8B,eAAY"}

package/dist/tailwind/utils/getMotionStyles.d.ts

@@ -0,0 +1,25 @@
+import { MotionConfig } from "../../tokens/types.js";
+import "../../tokens/index.js";
+
+//#region src/tailwind/utils/getMotionStyles.d.ts
+
+/**
+ * Return CSS variables object based on the motion config.
+ * i.e. { --uds-motion-damped-1--damping: '20.585796264350424' }
+ *
+ * @example
+ * // 1. Use return value in style prop of an html element to assign motion variables at runtime
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * <body style={motionVars}> {...} </body>
+ *
+ * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * addRootVariables(motionVars);
+ *
+ */
+declare function getMotionStyles(motionConfig: MotionConfig): Record<"--uds-motion-damped-2-damping" | "--uds-motion-damped-2-stiffness" | "--uds-motion-damped-1-damping" | "--uds-motion-damped-1-stiffness" | "--uds-motion-damped-4-damping" | "--uds-motion-damped-4-stiffness" | "--uds-motion-damped-3-damping" | "--uds-motion-damped-3-stiffness" | "--uds-motion-smooth-2-damping" | "--uds-motion-smooth-2-stiffness" | "--uds-motion-smooth-1-damping" | "--uds-motion-smooth-1-stiffness" | "--uds-motion-smooth-4-damping" | "--uds-motion-smooth-4-stiffness" | "--uds-motion-smooth-3-damping" | "--uds-motion-smooth-3-stiffness" | "--uds-motion-subtle-2-damping" | "--uds-motion-subtle-2-stiffness" | "--uds-motion-subtle-1-damping" | "--uds-motion-subtle-1-stiffness" | "--uds-motion-subtle-4-damping" | "--uds-motion-subtle-4-stiffness" | "--uds-motion-subtle-3-damping" | "--uds-motion-subtle-3-stiffness" | "--uds-motion-bouncy-2-damping" | "--uds-motion-bouncy-2-stiffness" | "--uds-motion-bouncy-1-damping" | "--uds-motion-bouncy-1-stiffness" | "--uds-motion-bouncy-4-damping" | "--uds-motion-bouncy-4-stiffness" | "--uds-motion-bouncy-3-damping" | "--uds-motion-bouncy-3-stiffness" | "--uds-motion-veryBouncy-2-damping" | "--uds-motion-veryBouncy-2-stiffness" | "--uds-motion-veryBouncy-1-damping" | "--uds-motion-veryBouncy-1-stiffness" | "--uds-motion-veryBouncy-4-damping" | "--uds-motion-veryBouncy-4-stiffness" | "--uds-motion-veryBouncy-3-damping" | "--uds-motion-veryBouncy-3-stiffness", string>;
+//#endregion
+export { getMotionStyles };
+//# sourceMappingURL=getMotionStyles.d.ts.map

package/dist/tailwind/utils/getMotionStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMotionStyles.d.ts","names":[],"sources":["../../../src/tailwind/utils/getMotionStyles.ts"],"sourcesContent":[],"mappings":";;;;;;;;AAsBA,CAAA;;;;;;;;;;;;;iBAAgB,eAAA,eAA8B,eAAY"}

package/dist/tailwind/utils/getMotionStyles.js

@@ -0,0 +1,38 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { entries } from "../../tokens/utils/entries.js";
+import { fromEntries } from "../../tokens/utils/fromEntries.js";
+import { getMotionVar } from "../../utils/getMotionVar.js";
+import { motionSpringConfigOptions } from "@yahoo/uds/fixtures";
+
+//#region src/tailwind/utils/getMotionStyles.ts
+/**
+* Return CSS variables object based on the motion config.
+* i.e. { --uds-motion-damped-1--damping: '20.585796264350424' }
+*
+* @example
+* // 1. Use return value in style prop of an html element to assign motion variables at runtime
+*
+* const motionVars = getMotionStyles(motionConfig);
+* <body style={motionVars}> {...} </body>
+*
+* // 2. Generate CSS at build time in tailwind plugin via addRootVariables.
+*
+* const motionVars = getMotionStyles(motionConfig);
+* addRootVariables(motionVars);
+*
+*/
+function getMotionStyles(motionConfig) {
+	return fromEntries(entries(motionConfig).flatMap(([variant, speeds]) => entries(speeds).flatMap(([speed, config]) => {
+		return motionSpringConfigOptions.map((control) => {
+			return [getMotionVar({
+				variant,
+				speed,
+				control
+			}), `${config[control]}`];
+		});
+	})));
+}
+
+//#endregion
+export { getMotionStyles };
+//# sourceMappingURL=getMotionStyles.js.map

package/dist/tailwind/utils/getMotionStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMotionStyles.js","names":[],"sources":["../../../src/tailwind/utils/getMotionStyles.ts"],"sourcesContent":["import { motionSpringConfigOptions } from '@yahoo/uds/fixtures';\nimport type { MotionConfig, MotionCssVar } from '@yahoo/uds/tokens';\nimport { entries, fromEntries } from '@yahoo/uds/tokens';\n\nimport { getMotionVar } from '../../utils/getMotionVar';\n\n/**\n * Return CSS variables object based on the motion config.\n * i.e. { --uds-motion-damped-1--damping: '20.585796264350424' }\n *\n * @example\n * // 1. Use return value in style prop of an html element to assign motion variables at runtime\n *\n * const motionVars = getMotionStyles(motionConfig);\n * <body style={motionVars}> {...} </body>\n *\n * // 2. Generate CSS at build time in tailwind plugin via addRootVariables.\n *\n * const motionVars = getMotionStyles(motionConfig);\n * addRootVariables(motionVars);\n *\n */\nexport function getMotionStyles(motionConfig: MotionConfig) {\n  const motionEntries = entries(motionConfig).flatMap(([variant, speeds]) =>\n    entries(speeds).flatMap(([speed, config]) => {\n      return motionSpringConfigOptions.map((control) => {\n        const cssVar = getMotionVar({ variant, speed, control });\n        // Keep the unit wrapped in quotes to avoid tailwind from adding units (px/rem)\n        return [cssVar, `${config[control]}`];\n      });\n    }),\n  ) as [MotionCssVar, string][];\n\n  return fromEntries(motionEntries);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,gBAAgB,cAA4B;AAW1D,QAAO,YAVe,QAAQ,aAAa,CAAC,SAAS,CAAC,SAAS,YAC7D,QAAQ,OAAO,CAAC,SAAS,CAAC,OAAO,YAAY;AAC3C,SAAO,0BAA0B,KAAK,YAAY;AAGhD,UAAO,CAFQ,aAAa;IAAE;IAAS;IAAO;IAAS,CAAC,EAExC,GAAG,OAAO,WAAW;IACrC;GACF,CACH,CAEgC"}

package/dist/tailwind/utils/getScaleModeStyles.cjs

@@ -0,0 +1,25 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+
+//#region src/tailwind/utils/getScaleModeStyles.ts
+function getStylesForScaleMode(config) {
+	return {
+		...config.borderRadius._vars,
+		...config.borderWidth._vars,
+		...config.avatarSizes._vars,
+		...config.iconSizes._vars
+	};
+}
+function getScaleModeStyles(tokens) {
+	return {
+		xSmall: getStylesForScaleMode(tokens.scaleMode.xSmall),
+		small: getStylesForScaleMode(tokens.scaleMode.small),
+		medium: getStylesForScaleMode(tokens.scaleMode.medium),
+		large: getStylesForScaleMode(tokens.scaleMode.large),
+		xLarge: getStylesForScaleMode(tokens.scaleMode.xLarge),
+		xxLarge: getStylesForScaleMode(tokens.scaleMode.xxLarge),
+		xxxLarge: getStylesForScaleMode(tokens.scaleMode.xxxLarge)
+	};
+}
+
+//#endregion
+exports.getScaleModeStyles = getScaleModeStyles;

package/dist/tailwind/utils/getScaleModeStyles.d.cts

@@ -0,0 +1,29 @@
+import { WebTokens } from "../../tokens/parseTokens.cjs";
+
+//#region src/tailwind/utils/getScaleModeStyles.d.ts
+declare function getScaleModeStyles(tokens: WebTokens): {
+  xSmall: {
+    [x: string]: string;
+  };
+  small: {
+    [x: string]: string;
+  };
+  medium: {
+    [x: string]: string;
+  };
+  large: {
+    [x: string]: string;
+  };
+  xLarge: {
+    [x: string]: string;
+  };
+  xxLarge: {
+    [x: string]: string;
+  };
+  xxxLarge: {
+    [x: string]: string;
+  };
+};
+//#endregion
+export { getScaleModeStyles };
+//# sourceMappingURL=getScaleModeStyles.d.cts.map

package/dist/tailwind/utils/getScaleModeStyles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScaleModeStyles.d.cts","names":[],"sources":["../../../src/tailwind/utils/getScaleModeStyles.ts"],"sourcesContent":[],"mappings":";;;iBAYgB,kBAAA,SAA2B;;IAA3B,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAkB"}

package/dist/tailwind/utils/getScaleModeStyles.d.ts

@@ -0,0 +1,29 @@
+import { WebTokens } from "../../tokens/parseTokens.js";
+
+//#region src/tailwind/utils/getScaleModeStyles.d.ts
+declare function getScaleModeStyles(tokens: WebTokens): {
+  xSmall: {
+    [x: string]: string;
+  };
+  small: {
+    [x: string]: string;
+  };
+  medium: {
+    [x: string]: string;
+  };
+  large: {
+    [x: string]: string;
+  };
+  xLarge: {
+    [x: string]: string;
+  };
+  xxLarge: {
+    [x: string]: string;
+  };
+  xxxLarge: {
+    [x: string]: string;
+  };
+};
+//#endregion
+export { getScaleModeStyles };
+//# sourceMappingURL=getScaleModeStyles.d.ts.map

package/dist/tailwind/utils/getScaleModeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScaleModeStyles.d.ts","names":[],"sources":["../../../src/tailwind/utils/getScaleModeStyles.ts"],"sourcesContent":[],"mappings":";;;iBAYgB,kBAAA,SAA2B;;IAA3B,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAkB"}