@yahoo/uds 3.169.0 → 3.170.0

package/dist/styles/udsTailwindMerge.js

@@ -0,0 +1,520 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { createTailwindMerge } from "tailwind-merge";
+//#region src/styles/udsTailwindMerge.ts
+/**
+* A tailwind-merge instance scoped to the class vocabulary UDS can emit.
+*
+* tailwind-merge's default configuration catalogues every Tailwind utility and
+* is ~82% of the library's size (20.3 kB vs 3.6 kB minified for the engine
+* alone). UDS only needs conflict resolution between the classes its style
+* props generate (see `styleVariantTemplates.ts`) and consumer `className`
+* overrides, so this from-scratch config enumerates exactly that vocabulary:
+* the engine still handles variant modifiers (`hover:`, `placeholder:`),
+* `!important`, arbitrary values, and negative utilities.
+*
+* Guard groups exist for consumer utilities that share a prefix with a UDS
+* group but target a different CSS property (`text-lg` vs `text-primary`,
+* `border-2` vs `border-primary`, `font-bold` vs `font-icons`, `bg-cover` vs
+* `bg-primary`) so a consumer override never deletes an unrelated UDS class.
+*
+* Known, intentional behavior difference from the previous full-config merge:
+* conflicts between two classes *outside* this vocabulary (e.g.
+* `cx('mt-2', 'columns-3', 'columns-2')` in consumer code) are passed through
+* unmerged and CSS order decides. UDS never emits such classes, and
+* `udsTailwindMerge.test.ts` verifies parity with the previous behavior for
+* every class UDS does emit.
+*/
+const anyValue = () => true;
+const TEXT_VARIANT_NAMES = [
+	"display1",
+	"display2",
+	"display3",
+	"title1",
+	"title2",
+	"title3",
+	"title4",
+	"headline1",
+	"body1",
+	"label1",
+	"label2",
+	"label3",
+	"label4",
+	"caption1",
+	"caption2",
+	"legal1",
+	"ui1",
+	"ui2",
+	"ui3",
+	"ui4",
+	"ui5",
+	"ui6"
+];
+const isTextVariant = (value) => TEXT_VARIANT_NAMES.includes(value.split("/")[0]);
+const isArbitraryLength = (value) => /^\[(length:|\d|\.\d)/.test(value);
+const isTshirtSize = (value) => /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/.test(value);
+const isBorderWidth = (value) => /^\d+$/.test(value) || value === "thin" || value === "medium" || value === "thick" || value.startsWith("width-elevation-");
+const udsTwMerge = /* @__PURE__ */ createTailwindMerge(() => ({
+	cacheSize: 500,
+	separator: ":",
+	theme: {},
+	classGroups: {
+		"text-align": [{ text: [
+			"center",
+			"justify",
+			"start",
+			"end",
+			"left",
+			"right"
+		] }],
+		"text-overflow": ["truncate", { text: ["ellipsis", "clip"] }],
+		"text-wrap": [{ text: [
+			"wrap",
+			"nowrap",
+			"balance",
+			"pretty"
+		] }],
+		"font-size": [{ text: [
+			"base",
+			isTshirtSize,
+			isTextVariant,
+			isArbitraryLength
+		] }],
+		"text-opacity": [{ "text-opacity": [anyValue] }],
+		"text-color": [{ text: [anyValue] }],
+		"font-weight": [{ font: [
+			"thin",
+			"extralight",
+			"light",
+			"normal",
+			"medium",
+			"semibold",
+			"bold",
+			"extrabold",
+			"black"
+		] }],
+		"font-style": ["italic", "not-italic"],
+		"font-family": [{ font: ["icons", isTextVariant] }],
+		leading: [{ leading: [anyValue] }],
+		tracking: [{ tracking: [anyValue] }],
+		"uds-font-family": [{ "uds-font-family": [anyValue] }],
+		"uds-font-size": [{ "uds-font-size": [anyValue] }],
+		"uds-font-weight": [{ "uds-font-weight": [anyValue] }],
+		"uds-line-height": [{ "uds-line-height": [anyValue] }],
+		"uds-letter-spacing": [{ "uds-letter-spacing": [anyValue] }],
+		"uds-text-transform": [
+			{ "uds-text-transform": [anyValue] },
+			"normal-case",
+			"uppercase",
+			"lowercase",
+			"capitalize"
+		],
+		p: [{ p: [anyValue] }],
+		px: [{ px: [anyValue] }],
+		py: [{ py: [anyValue] }],
+		ps: [{ ps: [anyValue] }],
+		pe: [{ pe: [anyValue] }],
+		pt: [{ pt: [anyValue] }],
+		pb: [{ pb: [anyValue] }],
+		m: [{ m: [anyValue] }],
+		mx: [{ mx: [anyValue] }],
+		my: [{ my: [anyValue] }],
+		ms: [{ ms: [anyValue] }],
+		me: [{ me: [anyValue] }],
+		mt: [{ mt: [anyValue] }],
+		mb: [{ mb: [anyValue] }],
+		gap: [{ gap: [anyValue] }],
+		"gap-x": [{ "gap-x": [anyValue] }],
+		"gap-y": [{ "gap-y": [anyValue] }],
+		"bg-size": [{ bg: [
+			"auto",
+			"cover",
+			"contain"
+		] }],
+		"bg-position": [{ bg: [
+			"center",
+			"top",
+			"bottom",
+			"left",
+			"right",
+			"left-top",
+			"left-bottom",
+			"right-top",
+			"right-bottom"
+		] }],
+		"bg-repeat": [{ bg: [
+			"repeat",
+			"no-repeat",
+			"repeat-x",
+			"repeat-y",
+			"repeat-round",
+			"repeat-space"
+		] }],
+		"bg-attachment": [{ bg: [
+			"fixed",
+			"local",
+			"scroll"
+		] }],
+		"bg-clip": [{ "bg-clip": [
+			"border",
+			"padding",
+			"content",
+			"text"
+		] }],
+		"bg-origin": [{ "bg-origin": [
+			"border",
+			"padding",
+			"content"
+		] }],
+		"bg-blend": [{ "bg-blend": [anyValue] }],
+		"bg-image": ["bg-none", { "bg-gradient-to": [anyValue] }],
+		"bg-opacity": [{ "bg-opacity": [anyValue] }],
+		"bg-color": [{ bg: [anyValue] }],
+		"border-width": ["border", { border: [isBorderWidth] }],
+		"border-width-x": ["border-x", { "border-x": [isBorderWidth] }],
+		"border-width-y": ["border-y", { "border-y": [isBorderWidth] }],
+		"border-width-s": ["border-s", { "border-s": [isBorderWidth] }],
+		"border-width-e": ["border-e", { "border-e": [isBorderWidth] }],
+		"border-width-t": ["border-t", { "border-t": [isBorderWidth] }],
+		"border-width-r": ["border-r", { "border-r": [isBorderWidth] }],
+		"border-width-b": ["border-b", { "border-b": [isBorderWidth] }],
+		"border-width-l": ["border-l", { "border-l": [isBorderWidth] }],
+		"border-style": [{ border: [
+			"solid",
+			"dashed",
+			"dotted",
+			"double",
+			"hidden",
+			"none"
+		] }],
+		"border-collapse": ["border-collapse", "border-separate"],
+		"border-spacing": [{ "border-spacing": [anyValue] }],
+		"border-spacing-x": [{ "border-spacing-x": [anyValue] }],
+		"border-spacing-y": [{ "border-spacing-y": [anyValue] }],
+		"border-opacity": [{ "border-opacity": [anyValue] }],
+		"border-color": [{ border: [anyValue] }],
+		"border-color-x": [{ "border-x": [anyValue] }],
+		"border-color-y": [{ "border-y": [anyValue] }],
+		"border-color-s": [{ "border-s": [anyValue] }],
+		"border-color-e": [{ "border-e": [anyValue] }],
+		"border-color-t": [{ "border-t": [anyValue] }],
+		"border-color-r": [{ "border-r": [anyValue] }],
+		"border-color-b": [{ "border-b": [anyValue] }],
+		"border-color-l": [{ "border-l": [anyValue] }],
+		"uds-border-radius": [{ "uds-border-radius": [anyValue] }],
+		"uds-border-radius-ts": [{ "uds-border-top-start-radius": [anyValue] }],
+		"uds-border-radius-te": [{ "uds-border-top-end-radius": [anyValue] }],
+		"uds-border-radius-bs": [{ "uds-border-bottom-start-radius": [anyValue] }],
+		"uds-border-radius-be": [{ "uds-border-bottom-end-radius": [anyValue] }],
+		"uds-border-width": [{ "uds-border-width": [anyValue] }],
+		"uds-border-width-x": [{ "uds-border-width-x": [anyValue] }],
+		"uds-border-width-y": [{ "uds-border-width-y": [anyValue] }],
+		"uds-border-width-s": [{ "uds-border-width-start": [anyValue] }],
+		"uds-border-width-e": [{ "uds-border-width-end": [anyValue] }],
+		"uds-border-width-t": [{ "uds-border-width-top": [anyValue] }],
+		"uds-border-width-b": [{ "uds-border-width-bottom": [anyValue] }],
+		"uds-nested-border-radius": [
+			"uds-nested-border-radius",
+			"uds-nested-border-radius-first",
+			"uds-nested-border-radius-last"
+		],
+		"uds-nested-border-radius-size": [{ "uds-nested-border-radius-size": [anyValue] }],
+		"uds-nested-border-radius-width": [{ "uds-nested-border-radius-width": [anyValue] }],
+		"uds-nested-border-radius-spacing": [{ "uds-nested-border-radius-spacing": [anyValue] }],
+		"uds-drop-shadow": [{ "uds-drop-shadow": [anyValue] }],
+		"uds-inset-shadow": [{ "uds-inset-shadow": [anyValue] }],
+		"uds-color-mode": [{ "uds-color-mode": [anyValue] }],
+		"uds-scale-mode": [{ "uds-scale-mode": [anyValue] }],
+		avatarSize: [{ avatarSize: [anyValue] }],
+		iconSize: [{ iconSize: [anyValue] }],
+		w: [{ w: [anyValue] }],
+		h: [{ h: [anyValue] }],
+		size: [{ size: [anyValue] }],
+		basis: [{ basis: [anyValue] }],
+		content: ["content-none", { content: [(value) => value.startsWith("[")] }],
+		"align-content": [{ content: [anyValue] }],
+		"align-items": [{ items: [anyValue] }],
+		"align-self": [{ self: [anyValue] }],
+		"justify-items": [{ "justify-items": [anyValue] }],
+		"justify-self": [{ "justify-self": [anyValue] }],
+		"justify-content": [{ justify: [anyValue] }],
+		flex: [{ flex: [
+			"1",
+			"auto",
+			"initial",
+			"none"
+		] }],
+		"flex-direction": [{ flex: [
+			"row",
+			"row-reverse",
+			"col",
+			"col-reverse"
+		] }],
+		"flex-wrap": [{ flex: [
+			"wrap",
+			"wrap-reverse",
+			"nowrap"
+		] }],
+		grow: ["grow", { grow: [anyValue] }],
+		shrink: ["shrink", { shrink: [anyValue] }],
+		display: [
+			"block",
+			"inline-block",
+			"inline",
+			"flex",
+			"inline-flex",
+			"table",
+			"inline-table",
+			"table-caption",
+			"table-cell",
+			"table-column",
+			"table-column-group",
+			"table-footer-group",
+			"table-header-group",
+			"table-row-group",
+			"table-row",
+			"flow-root",
+			"grid",
+			"inline-grid",
+			"contents",
+			"list-item",
+			"hidden"
+		],
+		position: [
+			"static",
+			"fixed",
+			"absolute",
+			"relative",
+			"sticky"
+		],
+		overflow: [{ overflow: [anyValue] }],
+		"overflow-x": [{ "overflow-x": [anyValue] }],
+		"overflow-y": [{ "overflow-y": [anyValue] }],
+		"object-fit": [{ object: [
+			"contain",
+			"cover",
+			"fill",
+			"none",
+			"scale-down"
+		] }],
+		"object-position": [{ object: [anyValue] }],
+		opacity: [{ opacity: [anyValue] }],
+		cursor: [{ cursor: [anyValue] }],
+		"pointer-events": [{ "pointer-events": [anyValue] }],
+		visibility: [
+			"visible",
+			"invisible",
+			"collapse"
+		],
+		transition: ["transition", { transition: [anyValue] }],
+		duration: [{ duration: [anyValue] }],
+		ease: [{ ease: [anyValue] }],
+		delay: [{ delay: [anyValue] }],
+		animate: [{ animate: [anyValue] }],
+		z: [{ z: [anyValue] }],
+		inset: [{ inset: [anyValue] }],
+		"inset-x": [{ "inset-x": [anyValue] }],
+		"inset-y": [{ "inset-y": [anyValue] }],
+		top: [{ top: [anyValue] }],
+		right: [{ right: [anyValue] }],
+		bottom: [{ bottom: [anyValue] }],
+		left: [{ left: [anyValue] }],
+		"translate-x": [{ "translate-x": [anyValue] }],
+		"translate-y": [{ "translate-y": [anyValue] }],
+		scale: [{ scale: [anyValue] }],
+		"scale-x": [{ "scale-x": [anyValue] }],
+		"scale-y": [{ "scale-y": [anyValue] }],
+		rounded: ["rounded", { rounded: [anyValue] }],
+		"rounded-s": ["rounded-s", { "rounded-s": [anyValue] }],
+		"rounded-e": ["rounded-e", { "rounded-e": [anyValue] }],
+		"rounded-t": ["rounded-t", { "rounded-t": [anyValue] }],
+		"rounded-r": ["rounded-r", { "rounded-r": [anyValue] }],
+		"rounded-b": ["rounded-b", { "rounded-b": [anyValue] }],
+		"rounded-l": ["rounded-l", { "rounded-l": [anyValue] }],
+		"rounded-ss": ["rounded-ss", { "rounded-ss": [anyValue] }],
+		"rounded-se": ["rounded-se", { "rounded-se": [anyValue] }],
+		"rounded-ee": ["rounded-ee", { "rounded-ee": [anyValue] }],
+		"rounded-es": ["rounded-es", { "rounded-es": [anyValue] }],
+		"rounded-tl": ["rounded-tl", { "rounded-tl": [anyValue] }],
+		"rounded-tr": ["rounded-tr", { "rounded-tr": [anyValue] }],
+		"rounded-br": ["rounded-br", { "rounded-br": [anyValue] }],
+		"rounded-bl": ["rounded-bl", { "rounded-bl": [anyValue] }],
+		"min-w": [{ "min-w": [anyValue] }],
+		"min-h": [{ "min-h": [anyValue] }],
+		"max-w": [{ "max-w": [anyValue] }],
+		"max-h": [{ "max-h": [anyValue] }],
+		shadow: ["shadow", { shadow: [
+			"inner",
+			"none",
+			isTshirtSize,
+			isArbitraryLength
+		] }],
+		"shadow-color": [{ shadow: [anyValue] }],
+		"outline-style": [
+			"outline",
+			"outline-none",
+			{ outline: [
+				"dashed",
+				"dotted",
+				"double"
+			] }
+		],
+		"outline-offset": [{ "outline-offset": [anyValue] }],
+		select: [{ select: [anyValue] }],
+		touch: [{ touch: [
+			"auto",
+			"none",
+			"manipulation"
+		] }],
+		"touch-x": [{ "touch-pan": [
+			"x",
+			"left",
+			"right"
+		] }],
+		"touch-y": [{ "touch-pan": [
+			"y",
+			"up",
+			"down"
+		] }],
+		"touch-pz": ["touch-pinch-zoom"],
+		whitespace: [{ whitespace: [anyValue] }],
+		fill: [{ fill: [anyValue] }],
+		"line-clamp": [{ "line-clamp": [anyValue] }],
+		"list-style-type": [
+			"list-none",
+			"list-disc",
+			"list-decimal"
+		],
+		appearance: [{ appearance: [anyValue] }],
+		"box-sizing": ["box-border", "box-content"],
+		sr: ["sr-only", "not-sr-only"],
+		"fvn-spacing": [
+			"normal-nums",
+			"tabular-nums",
+			"proportional-nums"
+		],
+		"place-content": [{ "place-content": [anyValue] }],
+		"place-items": [{ "place-items": [anyValue] }],
+		"grid-flow": [{ "grid-flow": [anyValue] }],
+		"grid-cols": [{ "grid-cols": [anyValue] }],
+		"auto-cols": [{ "auto-cols": [anyValue] }],
+		"col-start-end": ["col-auto", { "col-span": [anyValue] }],
+		"col-start": [{ "col-start": [anyValue] }],
+		"col-end": [{ "col-end": [anyValue] }],
+		aspect: [{ aspect: [anyValue] }],
+		"text-decoration": [
+			"underline",
+			"overline",
+			"line-through",
+			"no-underline"
+		]
+	},
+	conflictingClassGroups: {
+		p: [
+			"px",
+			"py",
+			"ps",
+			"pe",
+			"pt",
+			"pb"
+		],
+		py: ["pt", "pb"],
+		m: [
+			"mx",
+			"my",
+			"ms",
+			"me",
+			"mt",
+			"mb"
+		],
+		my: ["mt", "mb"],
+		gap: ["gap-x", "gap-y"],
+		"border-width": [
+			"border-width-s",
+			"border-width-e",
+			"border-width-t",
+			"border-width-r",
+			"border-width-b",
+			"border-width-l"
+		],
+		"border-width-x": ["border-width-r", "border-width-l"],
+		"border-width-y": ["border-width-t", "border-width-b"],
+		"border-color": [
+			"border-color-s",
+			"border-color-e",
+			"border-color-t",
+			"border-color-r",
+			"border-color-b",
+			"border-color-l"
+		],
+		"border-color-x": ["border-color-r", "border-color-l"],
+		"border-color-y": ["border-color-t", "border-color-b"],
+		size: ["w", "h"],
+		rounded: [
+			"rounded-s",
+			"rounded-e",
+			"rounded-t",
+			"rounded-r",
+			"rounded-b",
+			"rounded-l",
+			"rounded-ss",
+			"rounded-se",
+			"rounded-ee",
+			"rounded-es",
+			"rounded-tl",
+			"rounded-tr",
+			"rounded-br",
+			"rounded-bl"
+		],
+		"rounded-s": ["rounded-ss", "rounded-es"],
+		"rounded-e": ["rounded-se", "rounded-ee"],
+		"rounded-t": ["rounded-tl", "rounded-tr"],
+		"rounded-r": ["rounded-tr", "rounded-br"],
+		"rounded-b": ["rounded-br", "rounded-bl"],
+		"rounded-l": ["rounded-tl", "rounded-bl"],
+		"border-spacing": ["border-spacing-x", "border-spacing-y"],
+		touch: [
+			"touch-x",
+			"touch-y",
+			"touch-pz"
+		],
+		"touch-x": ["touch"],
+		"touch-y": ["touch"],
+		"touch-pz": ["touch"],
+		"uds-border-radius": [
+			"uds-border-radius-ts",
+			"uds-border-radius-te",
+			"uds-border-radius-bs",
+			"uds-border-radius-be"
+		],
+		"uds-border-width": [
+			"uds-border-width-x",
+			"uds-border-width-y",
+			"uds-border-width-s",
+			"uds-border-width-e",
+			"uds-border-width-t",
+			"uds-border-width-b"
+		],
+		"uds-border-width-x": ["uds-border-width-s", "uds-border-width-e"],
+		"uds-border-width-y": ["uds-border-width-t", "uds-border-width-b"],
+		flex: [
+			"basis",
+			"grow",
+			"shrink"
+		],
+		overflow: ["overflow-x", "overflow-y"],
+		inset: [
+			"inset-x",
+			"inset-y",
+			"top",
+			"right",
+			"bottom",
+			"left"
+		],
+		"inset-x": ["left", "right"],
+		"inset-y": ["top", "bottom"],
+		"line-clamp": ["display", "overflow"]
+	},
+	conflictingClassGroupModifiers: {}
+}));
+//#endregion
+export { udsTwMerge };

package/dist/styles/variantClass.cjs

@@ -0,0 +1,31 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_autoVariantTemplates = require("../automated-config/dist/generated/autoVariantTemplates.cjs");
+const require_styles_styleVariantTemplates = require("./styleVariantTemplates.cjs");
+//#region src/styles/variantClass.ts
+/**
+* Normalizes a variant value before substituting it into a class template.
+* Mirrors the transforms baked into the enumerated class names: lowercasing,
+* `/` to `-` (e.g. `title1/emphasized` → `title1-emphasized`), whitespace to
+* hyphens.
+*/
+const normalizeVariantValue = (value) => value.toLowerCase().replace(/\//g, "-").replace(/\s+/g, "-");
+/**
+* Resolves a style/variant prop + value pair to its CSS class name by template
+* substitution instead of looking it up in the enumerated `variants` map, so
+* the map never has to ship in the client bundle. The generated CSS contains
+* the exact same class names (both are derived from the same sources), and
+* `variantClass.test.ts` exhaustively verifies template ≡ map.
+*/
+function resolveVariantClass(prop, value) {
+	if (value === void 0 || value === null) return;
+	if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") return;
+	const template = require_styles_styleVariantTemplates.styleVariantTemplates[prop] ?? require_autoVariantTemplates.autoVariantTemplates[prop];
+	if (template === void 0) return;
+	const rawValue = String(value);
+	if (typeof template === "string") return template.replace("%v", normalizeVariantValue(rawValue));
+	if (Object.hasOwn(template.e, rawValue)) return template.e[rawValue];
+	return template.t.replace("%v", normalizeVariantValue(rawValue));
+}
+//#endregion
+exports.resolveVariantClass = resolveVariantClass;

package/dist/styles/variantClass.d.cts

@@ -0,0 +1,12 @@
+
+//#region src/styles/variantClass.d.ts
+/**
+ * Resolves a style/variant prop + value pair to its CSS class name by template
+ * substitution instead of looking it up in the enumerated `variants` map, so
+ * the map never has to ship in the client bundle. The generated CSS contains
+ * the exact same class names (both are derived from the same sources), and
+ * `variantClass.test.ts` exhaustively verifies template ≡ map.
+ */
+declare function resolveVariantClass(prop: string, value: unknown): string | undefined;
+//#endregion
+export { resolveVariantClass };

package/dist/styles/variantClass.d.ts

@@ -0,0 +1,12 @@
+
+//#region src/styles/variantClass.d.ts
+/**
+ * Resolves a style/variant prop + value pair to its CSS class name by template
+ * substitution instead of looking it up in the enumerated `variants` map, so
+ * the map never has to ship in the client bundle. The generated CSS contains
+ * the exact same class names (both are derived from the same sources), and
+ * `variantClass.test.ts` exhaustively verifies template ≡ map.
+ */
+declare function resolveVariantClass(prop: string, value: unknown): string | undefined;
+//#endregion
+export { resolveVariantClass };

package/dist/styles/variantClass.js

@@ -0,0 +1,30 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { autoVariantTemplates } from "../automated-config/dist/generated/autoVariantTemplates.js";
+import { styleVariantTemplates } from "./styleVariantTemplates.js";
+//#region src/styles/variantClass.ts
+/**
+* Normalizes a variant value before substituting it into a class template.
+* Mirrors the transforms baked into the enumerated class names: lowercasing,
+* `/` to `-` (e.g. `title1/emphasized` → `title1-emphasized`), whitespace to
+* hyphens.
+*/
+const normalizeVariantValue = (value) => value.toLowerCase().replace(/\//g, "-").replace(/\s+/g, "-");
+/**
+* Resolves a style/variant prop + value pair to its CSS class name by template
+* substitution instead of looking it up in the enumerated `variants` map, so
+* the map never has to ship in the client bundle. The generated CSS contains
+* the exact same class names (both are derived from the same sources), and
+* `variantClass.test.ts` exhaustively verifies template ≡ map.
+*/
+function resolveVariantClass(prop, value) {
+	if (value === void 0 || value === null) return;
+	if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") return;
+	const template = styleVariantTemplates[prop] ?? autoVariantTemplates[prop];
+	if (template === void 0) return;
+	const rawValue = String(value);
+	if (typeof template === "string") return template.replace("%v", normalizeVariantValue(rawValue));
+	if (Object.hasOwn(template.e, rawValue)) return template.e[rawValue];
+	return template.t.replace("%v", normalizeVariantValue(rawValue));
+}
+//#endregion
+export { resolveVariantClass };

package/dist/styles/variants.cjs

@@ -1,37 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_autoVariants = require("../automated-config/dist/generated/autoVariants.cjs");
 const require_index = require("../css-tokens/dist/index.cjs");
+const require_styles_textColorVariants = require("./textColorVariants.cjs");
+const require_autoVariants = require("../automated-config/dist/generated/autoVariants.cjs");
 //#region src/styles/variants.ts
 const variants = {
-	color: {
-		accent: "text-accent",
-		alert: "text-alert",
-		"alert-secondary": "text-alert-secondary",
-		brand: "text-brand",
-		"brand-secondary": "text-brand-secondary",
-		positive: "text-positive",
-		"positive-secondary": "text-positive-secondary",
-		warning: "text-warning",
-		"warning-secondary": "text-warning-secondary",
-		info: "text-info",
-		"info-secondary": "text-info-secondary",
-		muted: "text-muted",
-		"on-color": "text-on-color",
-		primary: "text-primary",
-		secondary: "text-secondary",
-		tertiary: "text-tertiary",
-		white: "text-white",
-		black: "text-black",
-		transparent: "text-transparent",
-		current: "text-current",
-		"always/white": "text-always-white",
-		"always/black": "text-always-black",
-		"always/transparent": "text-always-transparent",
-		"always/current": "text-always-current",
-		"always/brand": "text-always-brand",
-		"always/accent": "text-always-accent"
-	},
+	color: require_styles_textColorVariants.textColorVariants,
 	placeholderColor: {
 		accent: "placeholder:text-accent",
 		alert: "placeholder:text-alert",

package/dist/styles/variants.js

@@ -1,36 +1,10 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { autoVariants } from "../automated-config/dist/generated/autoVariants.js";
 import { DARK_COLOR_MODE_CLASSNAME, LARGE_SCALE_MODE_CLASSNAME, LIGHT_COLOR_MODE_CLASSNAME, MEDIUM_SCALE_MODE_CLASSNAME, SMALL_SCALE_MODE_CLASSNAME, XLARGE_SCALE_MODE_CLASSNAME, XSMALL_SCALE_MODE_CLASSNAME, XXLARGE_SCALE_MODE_CLASSNAME, XXXLARGE_SCALE_MODE_CLASSNAME } from "../css-tokens/dist/index.js";
+import { textColorVariants } from "./textColorVariants.js";
+import { autoVariants } from "../automated-config/dist/generated/autoVariants.js";
 //#region src/styles/variants.ts
 const variants = {
-	color: {
-		accent: "text-accent",
-		alert: "text-alert",
-		"alert-secondary": "text-alert-secondary",
-		brand: "text-brand",
-		"brand-secondary": "text-brand-secondary",
-		positive: "text-positive",
-		"positive-secondary": "text-positive-secondary",
-		warning: "text-warning",
-		"warning-secondary": "text-warning-secondary",
-		info: "text-info",
-		"info-secondary": "text-info-secondary",
-		muted: "text-muted",
-		"on-color": "text-on-color",
-		primary: "text-primary",
-		secondary: "text-secondary",
-		tertiary: "text-tertiary",
-		white: "text-white",
-		black: "text-black",
-		transparent: "text-transparent",
-		current: "text-current",
-		"always/white": "text-always-white",
-		"always/black": "text-always-black",
-		"always/transparent": "text-always-transparent",
-		"always/current": "text-always-current",
-		"always/brand": "text-always-brand",
-		"always/accent": "text-always-accent"
-	},
+	color: textColorVariants,
 	placeholderColor: {
 		accent: "placeholder:text-accent",
 		alert: "placeholder:text-alert",