@yahoo/uds 3.66.1 → 3.67.0-beta.1

package/dist/tokens/automation/configs/input.js

@@ -0,0 +1,472 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { createComponentStates, createConfigurableProperty, createLayerConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties } from "../utils/index.js";
+import { alwaysPaletteAliases, backgroundPaletteColors, borderRadii, borderWidths, foregroundPaletteColors, iconSizes, linePaletteColors, spacingAliases, spectrumColors, textVariants } from "@yahoo/uds/fixtures";
+
+//#region src/tokens/automation/configs/input.ts
+function defineComponentConfig(config) {
+	return config;
+}
+const InputConfig = defineComponentConfig({
+	label: "input",
+	description: "An input field is a box where users can type or select information. It can also open a dropdown menu to show options or help collect data.",
+	variants: {
+		size: createVariantConfigWithProperties({
+			label: "size",
+			isConfigurable: true,
+			options: ["md", "lg"],
+			default: "md",
+			description: "",
+			layers: {
+				root: createLayerConfig({
+					label: "root",
+					properties: {}
+				}),
+				inputWrapper: createLayerConfig({
+					label: "inputWrapper",
+					properties: {
+						spacingHorizontal: createConfigurableProperty({
+							name: "spacingHorizontal",
+							label: "Spacing horizontal",
+							typeOfFixture: ["spacingAliases"],
+							values: [spacingAliases],
+							defaults: {
+								md: "3.5",
+								lg: "4"
+							}
+						}),
+						spacingVertical: createConfigurableProperty({
+							name: "spacingVertical",
+							label: "Spacing vertical",
+							typeOfFixture: ["spacingAliases"],
+							values: [spacingAliases],
+							defaults: {
+								md: "2",
+								lg: "3.5"
+							}
+						}),
+						gap: createConfigurableProperty({
+							name: "gap",
+							label: "Gap",
+							typeOfFixture: ["spacingAliases"],
+							values: [spacingAliases],
+							defaults: {
+								md: "3",
+								lg: "3"
+							}
+						}),
+						borderWidth: createConfigurableProperty({
+							name: "borderWidth",
+							label: "Border width",
+							typeOfFixture: ["borderWidths"],
+							values: [borderWidths],
+							pseudoStates: ["pressed", "invalid"],
+							defaults: {
+								md: "thin",
+								lg: "thin"
+							}
+						}),
+						borderRadius: createConfigurableProperty({
+							name: "borderRadius",
+							label: "Border radius",
+							typeOfFixture: ["borderRadii"],
+							values: [borderRadii],
+							defaults: {
+								md: "md",
+								lg: "md"
+							}
+						}),
+						textVariant: createConfigurableProperty({
+							name: "textVariant",
+							label: "Input text style",
+							typeOfFixture: ["textVariants"],
+							pseudoStates: ["hover"],
+							values: [textVariants],
+							defaults: {
+								md: "label2",
+								lg: "label2"
+							}
+						})
+					}
+				}),
+				input: createLayerConfig({
+					label: "input",
+					properties: { height: createConfigurableProperty({
+						name: "height",
+						label: "Input element height",
+						typeOfFixture: ["spacingAliases"],
+						values: [spacingAliases],
+						defaults: {
+							md: "6",
+							lg: "6"
+						}
+					}) }
+				}),
+				startIcon: createLayerConfig({
+					label: "startIcon",
+					properties: { size: createConfigurableProperty({
+						name: "iconSize",
+						label: "Start icon size",
+						typeOfFixture: ["iconSizes"],
+						values: [iconSizes],
+						defaults: {
+							md: "md",
+							lg: "md"
+						}
+					}) }
+				}),
+				endIcon: createLayerConfig({
+					label: "endIcon",
+					properties: { size: createConfigurableProperty({
+						name: "iconSize",
+						label: "End icon size",
+						typeOfFixture: ["iconSizes"],
+						values: [iconSizes],
+						defaults: {
+							md: "md",
+							lg: "md"
+						}
+					}) }
+				}),
+				label: createLayerConfig({
+					label: "label",
+					properties: { textVariant: createConfigurableProperty({
+						name: "textVariant",
+						label: "Label text style",
+						typeOfFixture: ["textVariants"],
+						values: [textVariants],
+						defaults: {
+							md: "label4",
+							lg: "label4"
+						}
+					}) }
+				}),
+				helperIcon: createLayerConfig({
+					label: "helperIcon",
+					properties: { size: createConfigurableProperty({
+						name: "iconSize",
+						label: "Helper text icon size",
+						typeOfFixture: ["iconSizes"],
+						values: [iconSizes],
+						defaults: {
+							md: "sm",
+							lg: "sm"
+						}
+					}) }
+				}),
+				helperText: createLayerConfig({
+					label: "helperText",
+					properties: { textVariant: createConfigurableProperty({
+						name: "textVariant",
+						label: "Label text style",
+						typeOfFixture: ["textVariants"],
+						values: [textVariants],
+						defaults: {
+							md: "label4",
+							lg: "label4"
+						}
+					}) }
+				})
+			}
+		}),
+		variant: createVariantConfigWithComponentStates({
+			label: "variant",
+			description: "",
+			isConfigurable: true,
+			options: ["default"],
+			default: "default",
+			componentStates: { value: createComponentStates({
+				label: "value",
+				options: ["filled", "empty"],
+				layers: {
+					root: createLayerConfig({
+						label: "root",
+						properties: {}
+					}),
+					inputWrapper: createLayerConfig({
+						label: "input",
+						properties: {
+							borderColor: createConfigurableProperty({
+								name: "borderColor",
+								label: "Border color",
+								typeOfFixture: [
+									"spectrumColors",
+									"linePaletteColors",
+									"alwaysPaletteAliases"
+								],
+								values: [
+									spectrumColors,
+									linePaletteColors,
+									alwaysPaletteAliases
+								],
+								pseudoStates: [
+									"hover",
+									"pressed",
+									"focus-within",
+									"invalid",
+									"invalid&hover",
+									"invalid&pressed",
+									"readonly",
+									"disabled"
+								],
+								defaults: { default: "tertiary" }
+							}),
+							backgroundColor: createConfigurableProperty({
+								name: "backgroundColor",
+								label: "Background color",
+								typeOfFixture: [
+									"spectrumColors",
+									"backgroundPaletteColors",
+									"alwaysPaletteAliases"
+								],
+								values: [
+									spectrumColors,
+									backgroundPaletteColors,
+									alwaysPaletteAliases
+								],
+								pseudoStates: [
+									"hover",
+									"pressed",
+									"focus-within",
+									"invalid",
+									"invalid&hover",
+									"invalid&pressed",
+									"readonly",
+									"disabled"
+								],
+								defaults: { default: "primary" }
+							})
+						}
+					}),
+					input: createLayerConfig({
+						label: "input",
+						properties: { color: createConfigurableProperty({
+							name: "color",
+							label: "Input text color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"focus-within",
+								"invalid",
+								"invalid&hover",
+								"invalid&pressed",
+								"readonly",
+								"disabled"
+							],
+							defaults: { default: "muted" }
+						}) }
+					}),
+					inputPlaceholder: createLayerConfig({
+						label: "inputPlaceholder",
+						pseudoSelector: "::placeholder",
+						properties: { color: createConfigurableProperty({
+							name: "color",
+							label: "Input text color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"focus-within",
+								"invalid",
+								"invalid&hover",
+								"invalid&pressed",
+								"readonly",
+								"disabled"
+							],
+							defaults: { default: "muted" }
+						}) }
+					}),
+					startIcon: createLayerConfig({
+						label: "startIcon",
+						properties: { color: createConfigurableProperty({
+							name: "color",
+							label: "Start icon color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"focus-within",
+								"invalid",
+								"invalid&hover",
+								"invalid&pressed",
+								"readonly",
+								"disabled"
+							],
+							defaults: { default: "muted" }
+						}) }
+					}),
+					endIcon: createLayerConfig({
+						label: "endIcon",
+						properties: { color: createConfigurableProperty({
+							name: "color",
+							label: "End icon color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"focus-within",
+								"invalid",
+								"invalid&hover",
+								"invalid&pressed",
+								"readonly",
+								"disabled"
+							],
+							defaults: { default: "muted" }
+						}) }
+					}),
+					label: createLayerConfig({
+						label: "label",
+						properties: { color: createConfigurableProperty({
+							name: "color",
+							label: "Label color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"focus-within",
+								"invalid",
+								"invalid&hover",
+								"invalid&pressed",
+								"readonly",
+								"disabled"
+							],
+							defaults: { default: "muted" }
+						}) }
+					}),
+					labelRequired: createLayerConfig({
+						label: "labelRequired",
+						properties: { color: createConfigurableProperty({
+							name: "color",
+							label: "Required color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"focus-within",
+								"invalid",
+								"invalid&hover",
+								"invalid&pressed",
+								"readonly",
+								"disabled"
+							],
+							defaults: { default: "muted" }
+						}) }
+					}),
+					helperIcon: createLayerConfig({
+						label: "helperIcon",
+						properties: { color: createConfigurableProperty({
+							name: "color",
+							label: "Helper icon color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"focus-within",
+								"invalid",
+								"invalid&hover",
+								"invalid&pressed",
+								"readonly",
+								"disabled"
+							],
+							defaults: { default: "muted" }
+						}) }
+					}),
+					helperText: createLayerConfig({
+						label: "helpText",
+						properties: { color: createConfigurableProperty({
+							name: "color",
+							label: "Helper text color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"focus-within",
+								"invalid",
+								"invalid&hover",
+								"invalid&pressed",
+								"readonly",
+								"disabled"
+							],
+							defaults: { default: "brand" }
+						}) }
+					})
+				}
+			}) }
+		})
+	}
+});
+
+//#endregion
+export { InputConfig };

package/dist/tokens/automation/configs/link.cjs

@@ -0,0 +1,194 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_tokens_automation_utils_index = require('../utils/index.cjs');
+let __yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
+
+//#region src/tokens/automation/configs/link.ts
+function defineComponentConfig(config) {
+	return config;
+}
+const LinkConfig = defineComponentConfig({
+	label: "Link",
+	description: "Customizing your own buttons involves adjusting text styles, icon sizes, and spacing values to create a personalized button.",
+	variants: {
+		textStyle: require_tokens_automation_utils_index.createVariantConfigWithProperties({
+			label: "Text Style",
+			description: "",
+			isConfigurable: true,
+			default: "title1",
+			options: __yahoo_uds_fixtures.textVariantsWithoutEmphasized,
+			layers: {
+				root: require_tokens_automation_utils_index.createLayerConfig({
+					label: "root",
+					properties: { gap: require_tokens_automation_utils_index.createConfigurableProperty({
+						name: "gap",
+						label: "Gap",
+						typeOfFixture: ["spacingAliases"],
+						values: [__yahoo_uds_fixtures.spacingAliases],
+						defaults: {
+							display1: "2",
+							display2: "2",
+							display3: "2",
+							title1: "2",
+							title2: "2",
+							title3: "2",
+							title4: "2",
+							headline1: "2",
+							body1: "2",
+							label1: "2",
+							label2: "2",
+							label3: "2",
+							label4: "2",
+							caption1: "2",
+							caption2: "2",
+							legal1: "2",
+							ui1: "2",
+							ui2: "2",
+							ui3: "2",
+							ui4: "2",
+							ui5: "2",
+							ui6: "2"
+						}
+					}) }
+				}),
+				icon: require_tokens_automation_utils_index.createLayerConfig({
+					label: "icon",
+					properties: { size: require_tokens_automation_utils_index.createConfigurableProperty({
+						name: "iconSize",
+						label: "Icon size",
+						typeOfFixture: ["iconSizes"],
+						values: [__yahoo_uds_fixtures.iconSizes],
+						defaults: {
+							display1: "lg",
+							display2: "lg",
+							display3: "lg",
+							title1: "md",
+							title2: "md",
+							title3: "md",
+							title4: "md",
+							headline1: "md",
+							body1: "md",
+							label1: "md",
+							label2: "md",
+							label3: "md",
+							label4: "sm",
+							caption1: "md",
+							caption2: "sm",
+							legal1: "md",
+							ui1: "md",
+							ui2: "md",
+							ui3: "md",
+							ui4: "md",
+							ui5: "md",
+							ui6: "md"
+						}
+					}) }
+				})
+			}
+		}),
+		variant: require_tokens_automation_utils_index.createVariantConfigWithProperties({
+			label: "Variants",
+			description: "Variants",
+			isConfigurable: true,
+			default: "primary",
+			options: [
+				"primary",
+				"secondary",
+				"tertiary",
+				"on-color"
+			],
+			layers: {
+				root: require_tokens_automation_utils_index.createLayerConfig({
+					label: "root",
+					properties: {
+						color: require_tokens_automation_utils_index.createConfigurableProperty({
+							name: "color",
+							label: "Text color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								__yahoo_uds_fixtures.spectrumColors,
+								__yahoo_uds_fixtures.foregroundPaletteColors,
+								__yahoo_uds_fixtures.alwaysPaletteAliases
+							],
+							pseudoStates: ["hover", "pressed"],
+							defaults: {
+								primary: "primary",
+								secondary: "secondary",
+								tertiary: "tertiary",
+								"on-color": "on-color"
+							}
+						}),
+						textDecorationLine: require_tokens_automation_utils_index.createConfigurableProperty({
+							name: "textDecorationLine",
+							label: "Underline",
+							typeOfFixture: ["textDecorationLines"],
+							values: [__yahoo_uds_fixtures.textDecorationLines],
+							pseudoStates: ["hover", "pressed"],
+							defaults: {
+								primary: "none",
+								secondary: "none",
+								tertiary: "none",
+								"on-color": "none"
+							}
+						})
+					}
+				}),
+				iconStart: require_tokens_automation_utils_index.createLayerConfig({
+					label: "iconStart",
+					properties: { color: require_tokens_automation_utils_index.createConfigurableProperty({
+						name: "color",
+						label: "Icon start color",
+						typeOfFixture: [
+							"spectrumColors",
+							"foregroundPaletteColors",
+							"alwaysPaletteAliases"
+						],
+						pseudoStates: ["hover", "pressed"],
+						values: [
+							__yahoo_uds_fixtures.spectrumColors,
+							__yahoo_uds_fixtures.foregroundPaletteColors,
+							__yahoo_uds_fixtures.alwaysPaletteAliases
+						],
+						defaults: {
+							primary: "primary",
+							secondary: "secondary",
+							tertiary: "tertiary",
+							"on-color": "on-color"
+						}
+					}) }
+				}),
+				iconEnd: require_tokens_automation_utils_index.createLayerConfig({
+					label: "iconEnd",
+					properties: { color: require_tokens_automation_utils_index.createConfigurableProperty({
+						name: "color",
+						label: "Icon end color",
+						typeOfFixture: [
+							"spectrumColors",
+							"foregroundPaletteColors",
+							"alwaysPaletteAliases"
+						],
+						pseudoStates: ["hover", "pressed"],
+						values: [
+							__yahoo_uds_fixtures.spectrumColors,
+							__yahoo_uds_fixtures.foregroundPaletteColors,
+							__yahoo_uds_fixtures.alwaysPaletteAliases
+						],
+						defaults: {
+							primary: "primary",
+							secondary: "secondary",
+							tertiary: "tertiary",
+							"on-color": "on-color"
+						}
+					}) }
+				})
+			}
+		})
+	}
+});
+
+//#endregion
+exports.LinkConfig = LinkConfig;

package/dist/tokens/automation/configs/link.d.cts

@@ -0,0 +1,14 @@
+import { VariantConfigWithProperties } from "../types/ComponentConfig.cjs";
+import "../../index.cjs";
+
+//#region src/tokens/automation/configs/link.d.ts
+declare const LinkConfig: {
+  label: string;
+  description: string;
+  variants: {
+    textStyle: VariantConfigWithProperties<string>;
+    variant: VariantConfigWithProperties<string>;
+  };
+};
+//#endregion
+export { LinkConfig };

package/dist/tokens/automation/configs/link.d.ts

@@ -0,0 +1,14 @@
+import { VariantConfigWithProperties } from "../types/ComponentConfig.js";
+import "../../index.js";
+
+//#region src/tokens/automation/configs/link.d.ts
+declare const LinkConfig: {
+  label: string;
+  description: string;
+  variants: {
+    textStyle: VariantConfigWithProperties<string>;
+    variant: VariantConfigWithProperties<string>;
+  };
+};
+//#endregion
+export { LinkConfig };