@yahoo/uds 3.66.1 → 3.67.0-beta.1

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

@@ -0,0 +1,59 @@
+import { UniversalTokensConfig } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+import * as tailwindcss_types_config33 from "tailwindcss/types/config";
+import { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin.js";
+
+//#region src/tailwind/utils/composeTailwindPlugins.d.ts
+interface TailwindPluginOptions {
+  config: UniversalTokensConfig;
+  /**
+   * Safelisting is a last-resort, and should only be used in situations where
+   * it’s impossible to scan certain content for class names. These situations
+   * are rare, and you should almost never need this feature.
+   *
+   * {@link https://v3.tailwindcss.com/docs/content-configuration#safelisting-classes}
+   */
+  safelist?: Config['safelist'];
+  /**
+   * Disable generating font face declarations through Tailwind
+   * @default false
+   */
+  disableFontFaceDeclarations?: boolean;
+  /**
+   * Enable responsive type ramp styles.
+   * @default false
+   * @deprecated This is now set in the uds.config
+   */
+  enableResponsiveTypeRamp?: boolean;
+  /**
+   * Enable opt-in automatice color mode based on media query.
+   * @default false
+   */
+  enableSystemColorMode?: boolean;
+  /**
+   * Include the noop plugin that does nothing.
+   * @default false
+   */
+  enableNoopPlugin?: boolean;
+  previewOptions?: {
+    /**
+     * Generates CSS classes for visually forcing components into a pseudo state (hover, focus, etc)
+     * @default false
+     */
+    generatePseudoStateClassModifier: boolean;
+  };
+}
+type Plugin = ReturnType<typeof plugin.withOptions<TailwindPluginOptions>>;
+type Falsy = false | undefined | null;
+type PluginWithPrecidate = [Plugin, (options: TailwindPluginOptions) => boolean | null | undefined];
+type PossiblePlugins = Array<Plugin | PluginWithPrecidate | Falsy>;
+declare const composeTailwindPlugins: (...allPossiblePlugins: PossiblePlugins) => {
+  (options: TailwindPluginOptions): {
+    handler: tailwindcss_types_config33.PluginCreator;
+    config?: Partial<tailwindcss_types_config33.Config>;
+  };
+  __isOptionsFunction: true;
+};
+//#endregion
+export { type TailwindPluginOptions, composeTailwindPlugins };

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

@@ -0,0 +1,59 @@
+import { UniversalTokensConfig } from "../../tokens/types.js";
+import "../../tokens/index.js";
+import plugin from "tailwindcss/plugin.js";
+import * as tailwindcss_types_config33 from "tailwindcss/types/config";
+import { Config } from "tailwindcss";
+
+//#region src/tailwind/utils/composeTailwindPlugins.d.ts
+interface TailwindPluginOptions {
+  config: UniversalTokensConfig;
+  /**
+   * Safelisting is a last-resort, and should only be used in situations where
+   * it’s impossible to scan certain content for class names. These situations
+   * are rare, and you should almost never need this feature.
+   *
+   * {@link https://v3.tailwindcss.com/docs/content-configuration#safelisting-classes}
+   */
+  safelist?: Config['safelist'];
+  /**
+   * Disable generating font face declarations through Tailwind
+   * @default false
+   */
+  disableFontFaceDeclarations?: boolean;
+  /**
+   * Enable responsive type ramp styles.
+   * @default false
+   * @deprecated This is now set in the uds.config
+   */
+  enableResponsiveTypeRamp?: boolean;
+  /**
+   * Enable opt-in automatice color mode based on media query.
+   * @default false
+   */
+  enableSystemColorMode?: boolean;
+  /**
+   * Include the noop plugin that does nothing.
+   * @default false
+   */
+  enableNoopPlugin?: boolean;
+  previewOptions?: {
+    /**
+     * Generates CSS classes for visually forcing components into a pseudo state (hover, focus, etc)
+     * @default false
+     */
+    generatePseudoStateClassModifier: boolean;
+  };
+}
+type Plugin = ReturnType<typeof plugin.withOptions<TailwindPluginOptions>>;
+type Falsy = false | undefined | null;
+type PluginWithPrecidate = [Plugin, (options: TailwindPluginOptions) => boolean | null | undefined];
+type PossiblePlugins = Array<Plugin | PluginWithPrecidate | Falsy>;
+declare const composeTailwindPlugins: (...allPossiblePlugins: PossiblePlugins) => {
+  (options: TailwindPluginOptions): {
+    handler: tailwindcss_types_config33.PluginCreator;
+    config?: Partial<tailwindcss_types_config33.Config>;
+  };
+  __isOptionsFunction: true;
+};
+//#endregion
+export { type TailwindPluginOptions, composeTailwindPlugins };

package/dist/tailwind/utils/composeTailwindPlugins.js

@@ -0,0 +1,63 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { entries as entries$1 } from "../../utils/entries.js";
+import { isFunction, isString, merge, partition } from "lodash-es";
+import plugin from "tailwindcss/plugin.js";
+
+//#region src/tailwind/utils/composeTailwindPlugins.ts
+const validPlugins = (allPossiblePlugins, options) => allPossiblePlugins.map((p) => {
+	if (!Array.isArray(p)) return p;
+	const [plugin$1, predicate] = p;
+	return predicate(options) && plugin$1;
+}).filter(Boolean);
+const composeTailwindPlugins = (...allPossiblePlugins) => plugin.withOptions((options) => {
+	if (!options.config) throw new Error("`tailwindPlugin` requires a config object. If your project has not yet sync'd a config, you can import `defaultTokensConfig` from `@yahoo/uds/defaultTokensConfig` and pass it to `tailwindPlugin`.");
+	const plugins = validPlugins(allPossiblePlugins, options);
+	return (api) => {
+		const { addBase, addComponents, addUtilities, config } = api;
+		const parentConfigImportant = config().important;
+		const useImportNamespace = isString(parentConfigImportant);
+		const rootSelector = useImportNamespace ? parentConfigImportant : ":root";
+		const fns = {
+			...api,
+			addBase(css) {
+				const [vars, classes] = (Array.isArray(css) ? css : [css]).map((rule) => entries$1(rule)).map((pairs) => partition(pairs, ([key]) => key.startsWith("--"))).reduce((acc, [vars$1, classes$1]) => [{
+					...acc[0],
+					...Object.fromEntries(vars$1)
+				}, {
+					...acc[1],
+					...Object.fromEntries(classes$1)
+				}], [{}, {}]);
+				addBase({ [rootSelector]: vars });
+				addBase(classes);
+			},
+			addComponents(css, options$1 = {}) {
+				addComponents(css, {
+					respectImportant: useImportNamespace,
+					...options$1
+				});
+			},
+			addUtilities(css, options$1 = {}) {
+				addUtilities(css, {
+					respectPrefix: true,
+					respectImportant: useImportNamespace,
+					...options$1
+				});
+			}
+		};
+		for (const plugin$1 of plugins) plugin$1(options).handler(fns);
+	};
+}, (options) => {
+	if (!options.config) throw new Error("`tailwindPlugin` requires a config object. If your project has not yet sync'd a config, you can import `defaultTokensConfig` from `@yahoo/uds/defaultTokensConfig` and pass it to `tailwindPlugin`.");
+	const pluginConfigs = validPlugins(allPossiblePlugins, options).map((plugin$1) => plugin$1(options).config ?? {});
+	for (const config of pluginConfigs) for (const [key, value] of entries$1(config.theme?.extend ?? {})) {
+		if (!isFunction(value)) continue;
+		throw new Error(`The theme.extend.${key} value cannot be a function when using composeTailwindPlugins. Please resolve the function to an object instead.`);
+	}
+	const mergedConfig = merge({}, ...pluginConfigs);
+	const safelist = new Set([...options.safelist ?? [], ...pluginConfigs.flatMap((c) => c.safelist ?? [])]);
+	mergedConfig.safelist = Array.from(safelist);
+	return mergedConfig;
+});
+
+//#endregion
+export { composeTailwindPlugins };

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,17 @@
+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 };

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

@@ -0,0 +1,17 @@
+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 };

package/dist/tailwind/utils/getColorModeStyles.js

@@ -0,0 +1,21 @@
+/*! © 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 };

package/dist/tailwind/utils/getElevationStyles.cjs

@@ -0,0 +1,12 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_tokens_utils_entries = require('../../tokens/utils/entries.cjs');
+const require_tokens_utils_fromEntries = require('../../tokens/utils/fromEntries.cjs');
+const require_tailwind_utils_getShadowStyles = require('./getShadowStyles.cjs');
+
+//#region src/tailwind/utils/getElevationStyles.ts
+function getElevationStyles({ config }) {
+	return require_tokens_utils_fromEntries.fromEntries(require_tokens_utils_entries.entries(config.elevation).map(([level]) => require_tailwind_utils_getShadowStyles.shadowVariantToCSS("drop", `elevation-${level}`)));
+}
+
+//#endregion
+exports.getElevationStyles = getElevationStyles;

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

@@ -0,0 +1,14 @@
+import { UniversalTokensConfig } from "../../tokens/types.cjs";
+import "../../tokens/index.cjs";
+
+//#region src/tailwind/utils/getElevationStyles.d.ts
+declare function getElevationStyles({
+  config
+}: {
+  config: UniversalTokensConfig;
+}): Record<".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-5" | ".uds-inset-shadow-none" | ".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-5" | ".uds-drop-shadow-none" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-xs", {
+  readonly [x: string]: "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
+  readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
+}>;
+//#endregion
+export { getElevationStyles };

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

@@ -0,0 +1,14 @@
+import { UniversalTokensConfig } from "../../tokens/types.js";
+import "../../tokens/index.js";
+
+//#region src/tailwind/utils/getElevationStyles.d.ts
+declare function getElevationStyles({
+  config
+}: {
+  config: UniversalTokensConfig;
+}): Record<".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-5" | ".uds-inset-shadow-none" | ".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-5" | ".uds-drop-shadow-none" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-xs", {
+  readonly [x: string]: "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
+  readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
+}>;
+//#endregion
+export { getElevationStyles };

package/dist/tailwind/utils/getElevationStyles.js

@@ -0,0 +1,12 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { entries } from "../../tokens/utils/entries.js";
+import { fromEntries } from "../../tokens/utils/fromEntries.js";
+import { shadowVariantToCSS } from "./getShadowStyles.js";
+
+//#region src/tailwind/utils/getElevationStyles.ts
+function getElevationStyles({ config }) {
+	return fromEntries(entries(config.elevation).map(([level]) => shadowVariantToCSS("drop", `elevation-${level}`)));
+}
+
+//#endregion
+export { getElevationStyles };

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,11 @@
+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 };

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

@@ -0,0 +1,11 @@
+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 };

package/dist/tailwind/utils/getFontFaceDeclarations.js

@@ -0,0 +1,20 @@
+/*! © 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 };

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 addBase.
+*
+* const fontVars = getFontStyles(fontConfig);
+* addBase(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,24 @@
+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 addBase.
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * addBase(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 };

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

@@ -0,0 +1,24 @@
+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 addBase.
+ *
+ * const fontVars = getFontStyles(fontConfig);
+ * addBase(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 };

package/dist/tailwind/utils/getFontStyles.js

@@ -0,0 +1,41 @@
+/*! © 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 addBase.
+*
+* const fontVars = getFontStyles(fontConfig);
+* addBase(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 };

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 addBase.
+*
+* const motionVars = getMotionStyles(motionConfig);
+* addBase(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,24 @@
+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 addBase.
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * addBase(motionVars);
+ *
+ */
+declare function getMotionStyles(motionConfig: MotionConfig): Record<"--uds-motion-damped-4-damping" | "--uds-motion-damped-4-stiffness" | "--uds-motion-damped-3-damping" | "--uds-motion-damped-3-stiffness" | "--uds-motion-damped-1-damping" | "--uds-motion-damped-1-stiffness" | "--uds-motion-damped-2-damping" | "--uds-motion-damped-2-stiffness" | "--uds-motion-smooth-4-damping" | "--uds-motion-smooth-4-stiffness" | "--uds-motion-smooth-3-damping" | "--uds-motion-smooth-3-stiffness" | "--uds-motion-smooth-1-damping" | "--uds-motion-smooth-1-stiffness" | "--uds-motion-smooth-2-damping" | "--uds-motion-smooth-2-stiffness" | "--uds-motion-subtle-4-damping" | "--uds-motion-subtle-4-stiffness" | "--uds-motion-subtle-3-damping" | "--uds-motion-subtle-3-stiffness" | "--uds-motion-subtle-1-damping" | "--uds-motion-subtle-1-stiffness" | "--uds-motion-subtle-2-damping" | "--uds-motion-subtle-2-stiffness" | "--uds-motion-bouncy-4-damping" | "--uds-motion-bouncy-4-stiffness" | "--uds-motion-bouncy-3-damping" | "--uds-motion-bouncy-3-stiffness" | "--uds-motion-bouncy-1-damping" | "--uds-motion-bouncy-1-stiffness" | "--uds-motion-bouncy-2-damping" | "--uds-motion-bouncy-2-stiffness" | "--uds-motion-veryBouncy-4-damping" | "--uds-motion-veryBouncy-4-stiffness" | "--uds-motion-veryBouncy-3-damping" | "--uds-motion-veryBouncy-3-stiffness" | "--uds-motion-veryBouncy-1-damping" | "--uds-motion-veryBouncy-1-stiffness" | "--uds-motion-veryBouncy-2-damping" | "--uds-motion-veryBouncy-2-stiffness", string>;
+//#endregion
+export { getMotionStyles };

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

@@ -0,0 +1,24 @@
+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 addBase.
+ *
+ * const motionVars = getMotionStyles(motionConfig);
+ * addBase(motionVars);
+ *
+ */
+declare function getMotionStyles(motionConfig: MotionConfig): Record<"--uds-motion-damped-4-damping" | "--uds-motion-damped-4-stiffness" | "--uds-motion-damped-3-damping" | "--uds-motion-damped-3-stiffness" | "--uds-motion-damped-1-damping" | "--uds-motion-damped-1-stiffness" | "--uds-motion-damped-2-damping" | "--uds-motion-damped-2-stiffness" | "--uds-motion-smooth-4-damping" | "--uds-motion-smooth-4-stiffness" | "--uds-motion-smooth-3-damping" | "--uds-motion-smooth-3-stiffness" | "--uds-motion-smooth-1-damping" | "--uds-motion-smooth-1-stiffness" | "--uds-motion-smooth-2-damping" | "--uds-motion-smooth-2-stiffness" | "--uds-motion-subtle-4-damping" | "--uds-motion-subtle-4-stiffness" | "--uds-motion-subtle-3-damping" | "--uds-motion-subtle-3-stiffness" | "--uds-motion-subtle-1-damping" | "--uds-motion-subtle-1-stiffness" | "--uds-motion-subtle-2-damping" | "--uds-motion-subtle-2-stiffness" | "--uds-motion-bouncy-4-damping" | "--uds-motion-bouncy-4-stiffness" | "--uds-motion-bouncy-3-damping" | "--uds-motion-bouncy-3-stiffness" | "--uds-motion-bouncy-1-damping" | "--uds-motion-bouncy-1-stiffness" | "--uds-motion-bouncy-2-damping" | "--uds-motion-bouncy-2-stiffness" | "--uds-motion-veryBouncy-4-damping" | "--uds-motion-veryBouncy-4-stiffness" | "--uds-motion-veryBouncy-3-damping" | "--uds-motion-veryBouncy-3-stiffness" | "--uds-motion-veryBouncy-1-damping" | "--uds-motion-veryBouncy-1-stiffness" | "--uds-motion-veryBouncy-2-damping" | "--uds-motion-veryBouncy-2-stiffness", string>;
+//#endregion
+export { getMotionStyles };