@yahoo/uds 3.66.1 → 3.67.0-beta.1

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

@@ -0,0 +1,446 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { createConfigurableProperty, createLayerConfig, createVariantConfigWithProperties } from "../utils/index.js";
+import { alwaysPaletteAliases, backgroundPaletteColors, borderRadii, borderWidths, buttonVariantsFlat, foregroundPaletteColors, iconSizes, linePaletteColors, opacitySteps, scaleEffects, shadowVariants, shadowVariantsWithInvert, spacingAliases, spectrumColors, textVariants } from "@yahoo/uds/fixtures";
+
+//#region src/tokens/automation/configs/button.ts
+function defineComponentConfig(config) {
+	return config;
+}
+const ButtonConfig = defineComponentConfig({
+	label: "Button",
+	description: "Customizing your own buttons involves adjusting text styles, icon sizes, and spacing values to create a personalized button.",
+	variants: {
+		size: createVariantConfigWithProperties({
+			label: "Size",
+			description: "These sizes will apply across all variants",
+			isConfigurable: true,
+			default: "md",
+			options: [
+				"sm",
+				"md",
+				"lg"
+			],
+			layers: {
+				root: createLayerConfig({
+					label: "root",
+					properties: {
+						spacingHorizontal: createConfigurableProperty({
+							name: "spacingHorizontal",
+							label: "Spacing horizontal",
+							typeOfFixture: ["spacingAliases"],
+							values: [spacingAliases],
+							defaults: {
+								sm: "3",
+								md: "4",
+								lg: "5"
+							}
+						}),
+						spacingVertical: createConfigurableProperty({
+							name: "spacingVertical",
+							label: "Spacing vertical",
+							typeOfFixture: ["spacingAliases"],
+							values: [spacingAliases],
+							defaults: {
+								sm: "1",
+								md: "2",
+								lg: "3.5"
+							}
+						}),
+						gap: createConfigurableProperty({
+							name: "gap",
+							label: "Gap",
+							typeOfFixture: ["spacingAliases"],
+							values: [spacingAliases],
+							defaults: {
+								sm: "1.5",
+								md: "1.5",
+								lg: "1.5"
+							}
+						}),
+						textVariant: createConfigurableProperty({
+							name: "textVariant",
+							label: "Text variant",
+							typeOfFixture: ["textVariants"],
+							values: [textVariants],
+							defaults: {
+								sm: "ui1",
+								md: "ui1",
+								lg: "ui1"
+							}
+						})
+					}
+				}),
+				icon: createLayerConfig({
+					label: "icon",
+					properties: { size: createConfigurableProperty({
+						name: "iconSize",
+						label: "Icon size",
+						typeOfFixture: ["iconSizes"],
+						values: [iconSizes],
+						defaults: {
+							sm: "sm",
+							md: "sm",
+							lg: "sm"
+						}
+					}) }
+				})
+			}
+		}),
+		variant: createVariantConfigWithProperties({
+			label: "Variants",
+			description: "",
+			isConfigurable: true,
+			default: "primary",
+			options: buttonVariantsFlat,
+			layers: {
+				root: createLayerConfig({
+					label: "root",
+					properties: {
+						borderWidth: createConfigurableProperty({
+							name: "borderWidth",
+							label: "Border width",
+							typeOfFixture: ["borderWidths"],
+							values: [borderWidths],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "thin",
+								secondary: "none",
+								tertiary: "none",
+								brand: "none",
+								"brand-secondary": "none",
+								"brand-tertiary": "none",
+								alert: "none",
+								"alert-secondary": "none",
+								"alert-tertiary": "none",
+								warning: "none",
+								"warning-secondary": "none",
+								"warning-tertiary": "none",
+								positive: "none",
+								"positive-secondary": "none",
+								"positive-tertiary": "none",
+								info: "none",
+								"info-secondary": "none",
+								"info-tertiary": "none"
+							}
+						}),
+						borderRadius: createConfigurableProperty({
+							name: "borderRadius",
+							label: "Border radius",
+							typeOfFixture: ["borderRadii"],
+							values: [borderRadii],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "full",
+								secondary: "full",
+								tertiary: "full",
+								brand: "full",
+								"brand-secondary": "full",
+								"brand-tertiary": "full",
+								alert: "full",
+								"alert-secondary": "full",
+								"alert-tertiary": "full",
+								warning: "full",
+								"warning-secondary": "full",
+								"warning-tertiary": "full",
+								positive: "full",
+								"positive-secondary": "full",
+								"positive-tertiary": "full",
+								info: "full",
+								"info-secondary": "full",
+								"info-tertiary": "full"
+							}
+						}),
+						borderColor: createConfigurableProperty({
+							name: "borderColor",
+							label: "Border color",
+							typeOfFixture: [
+								"spectrumColors",
+								"linePaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								linePaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "tertiary",
+								secondary: "tertiary",
+								tertiary: "tertiary",
+								brand: "tertiary",
+								"brand-secondary": "tertiary",
+								"brand-tertiary": "tertiary",
+								alert: "tertiary",
+								"alert-secondary": "tertiary",
+								"alert-tertiary": "tertiary",
+								warning: "tertiary",
+								"warning-secondary": "tertiary",
+								"warning-tertiary": "tertiary",
+								positive: "tertiary",
+								"positive-secondary": "tertiary",
+								"positive-tertiary": "tertiary",
+								info: "tertiary",
+								"info-secondary": "tertiary",
+								"info-tertiary": "tertiary"
+							}
+						}),
+						backgroundColor: createConfigurableProperty({
+							name: "backgroundColor",
+							label: "Background color",
+							typeOfFixture: [
+								"spectrumColors",
+								"backgroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								backgroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "accent",
+								secondary: "accent",
+								tertiary: "accent",
+								brand: "brand",
+								"brand-secondary": "accent",
+								"brand-tertiary": "accent",
+								alert: "alert",
+								"alert-secondary": "accent",
+								"alert-tertiary": "accent",
+								warning: "warning",
+								"warning-secondary": "accent",
+								"warning-tertiary": "accent",
+								positive: "positive",
+								"positive-secondary": "accent",
+								"positive-tertiary": "accent",
+								info: "accent",
+								"info-secondary": "accent",
+								"info-tertiary": "accent"
+							}
+						}),
+						color: createConfigurableProperty({
+							name: "color",
+							label: "Text color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								spectrumColors,
+								foregroundPaletteColors,
+								alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "primary",
+								secondary: "primary",
+								tertiary: "primary",
+								brand: "primary",
+								"brand-secondary": "primary",
+								"brand-tertiary": "primary",
+								alert: "primary",
+								"alert-secondary": "primary",
+								"alert-tertiary": "primary",
+								warning: "primary",
+								"warning-secondary": "primary",
+								"warning-tertiary": "primary",
+								positive: "primary",
+								"positive-secondary": "primary",
+								"positive-tertiary": "primary",
+								info: "info",
+								"info-secondary": "primary",
+								"info-tertiary": "primary"
+							}
+						}),
+						opacity: createConfigurableProperty({
+							name: "opacity",
+							label: "Opacity",
+							typeOfFixture: ["opacitySteps"],
+							values: [opacitySteps],
+							skipRestState: true,
+							pseudoStates: ["disabled"],
+							defaults: {
+								primary: "100",
+								secondary: "100",
+								tertiary: "100",
+								brand: "100",
+								"brand-secondary": "100",
+								"brand-tertiary": "100",
+								alert: "100",
+								"alert-secondary": "100",
+								"alert-tertiary": "100",
+								warning: "100",
+								"warning-secondary": "100",
+								"warning-tertiary": "100",
+								positive: "100",
+								"positive-secondary": "100",
+								"positive-tertiary": "100",
+								info: "100",
+								"info-secondary": "100",
+								"info-tertiary": "100"
+							}
+						}),
+						shadow: createConfigurableProperty({
+							name: "shadow",
+							label: "Shadow",
+							typeOfFixture: ["shadowVariants"],
+							values: [shadowVariants],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "none",
+								secondary: "none",
+								tertiary: "none",
+								brand: "none",
+								"brand-secondary": "none",
+								"brand-tertiary": "none",
+								alert: "none",
+								"alert-secondary": "none",
+								"alert-tertiary": "none",
+								warning: "none",
+								"warning-secondary": "none",
+								"warning-tertiary": "none",
+								positive: "none",
+								"positive-secondary": "none",
+								"positive-tertiary": "none",
+								info: "none",
+								"info-secondary": "none",
+								"info-tertiary": "none"
+							}
+						}),
+						insetShadow: createConfigurableProperty({
+							name: "insetShadow",
+							label: "Inset shadow",
+							typeOfFixture: ["shadowVariantsWithInvert"],
+							values: [shadowVariantsWithInvert],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "none",
+								secondary: "none",
+								tertiary: "none",
+								brand: "none",
+								"brand-secondary": "none",
+								"brand-tertiary": "none",
+								alert: "none",
+								"alert-secondary": "none",
+								"alert-tertiary": "none",
+								warning: "none",
+								"warning-secondary": "none",
+								"warning-tertiary": "none",
+								positive: "none",
+								"positive-secondary": "none",
+								"positive-tertiary": "none",
+								info: "none",
+								"info-secondary": "none",
+								"info-tertiary": "none"
+							}
+						}),
+						scaleEffect: createConfigurableProperty({
+							name: "scaleEffect",
+							label: "Scale",
+							typeOfFixture: ["scaleEffects"],
+							values: [scaleEffects],
+							skipRestState: true,
+							pseudoStates: ["hover", "pressed"],
+							defaults: {
+								primary: "none",
+								secondary: "none",
+								tertiary: "none",
+								brand: "none",
+								"brand-secondary": "none",
+								"brand-tertiary": "none",
+								alert: "none",
+								"alert-secondary": "none",
+								"alert-tertiary": "none",
+								warning: "none",
+								"warning-secondary": "none",
+								"warning-tertiary": "none",
+								positive: "none",
+								"positive-secondary": "none",
+								"positive-tertiary": "none",
+								info: "none",
+								"info-secondary": "none",
+								"info-tertiary": "none"
+							}
+						})
+					}
+				}),
+				icon: createLayerConfig({
+					label: "icon",
+					properties: { color: createConfigurableProperty({
+						name: "color",
+						label: "Icon color",
+						typeOfFixture: [
+							"spectrumColors",
+							"foregroundPaletteColors",
+							"alwaysPaletteAliases"
+						],
+						values: [
+							spectrumColors,
+							foregroundPaletteColors,
+							alwaysPaletteAliases
+						],
+						pseudoStates: [
+							"hover",
+							"pressed",
+							"disabled"
+						],
+						defaults: {
+							primary: "primary",
+							secondary: "primary",
+							tertiary: "primary",
+							brand: "primary",
+							"brand-secondary": "primary",
+							"brand-tertiary": "primary",
+							alert: "primary",
+							"alert-secondary": "primary",
+							"alert-tertiary": "primary",
+							warning: "primary",
+							"warning-secondary": "primary",
+							"warning-tertiary": "primary",
+							positive: "primary",
+							"positive-secondary": "primary",
+							"positive-tertiary": "primary",
+							info: "primary",
+							"info-secondary": "primary",
+							"info-tertiary": "primary"
+						}
+					}) }
+				})
+			}
+		})
+	}
+});
+
+//#endregion
+export { ButtonConfig };

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

@@ -0,0 +1,256 @@
+/*! © 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/checkbox.ts
+function defineComponentConfig(config) {
+	return config;
+}
+const CheckboxConfig = defineComponentConfig({
+	label: "Checkbox",
+	description: "A checkbox is a small, interactive element that lets users select one or more options from a list.",
+	variants: {
+		size: require_tokens_automation_utils_index.createVariantConfigWithProperties({
+			label: "size",
+			isConfigurable: true,
+			options: ["sm", "md"],
+			default: "md",
+			description: "",
+			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: {
+								sm: "2",
+								md: "2.5"
+							}
+						}),
+						textVariant: require_tokens_automation_utils_index.createConfigurableProperty({
+							name: "textVariant",
+							label: "Text variant",
+							typeOfFixture: ["textVariants"],
+							values: [__yahoo_uds_fixtures.textVariants],
+							defaults: {
+								sm: "label4",
+								md: "label2"
+							}
+						})
+					}
+				}),
+				checkbox: require_tokens_automation_utils_index.createLayerConfig({
+					label: "checkbox",
+					properties: {
+						borderWidth: require_tokens_automation_utils_index.createConfigurableProperty({
+							name: "borderWidth",
+							label: "Checkbox border width",
+							typeOfFixture: ["borderWidths"],
+							values: [__yahoo_uds_fixtures.borderWidths],
+							defaults: {
+								sm: "thin",
+								md: "thin"
+							}
+						}),
+						height: require_tokens_automation_utils_index.createConfigurableProperty({
+							name: "height",
+							label: "Checkbox height",
+							typeOfFixture: ["spacingAliases"],
+							values: [__yahoo_uds_fixtures.spacingAliases],
+							defaults: {
+								sm: "4",
+								md: "5"
+							}
+						}),
+						width: require_tokens_automation_utils_index.createConfigurableProperty({
+							name: "width",
+							label: "Checkbox width",
+							typeOfFixture: ["spacingAliases"],
+							values: [__yahoo_uds_fixtures.spacingAliases],
+							defaults: {
+								sm: "4",
+								md: "5"
+							}
+						})
+					}
+				})
+			}
+		}),
+		variant: require_tokens_automation_utils_index.createVariantConfigWithComponentStates({
+			label: "variant",
+			description: "",
+			isConfigurable: true,
+			options: [
+				"primary",
+				"secondary",
+				"alert",
+				"alert-secondary"
+			],
+			default: "primary",
+			componentStates: { value: require_tokens_automation_utils_index.createComponentStates({
+				label: "value",
+				options: [
+					"checked",
+					"unchecked",
+					"indeterminate"
+				],
+				layers: {
+					root: require_tokens_automation_utils_index.createLayerConfig({
+						label: "root",
+						properties: { color: require_tokens_automation_utils_index.createConfigurableProperty({
+							name: "color",
+							label: "Label color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								__yahoo_uds_fixtures.spectrumColors,
+								__yahoo_uds_fixtures.foregroundPaletteColors,
+								__yahoo_uds_fixtures.alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "primary",
+								secondary: "primary",
+								alert: "primary",
+								"alert-secondary": "primary"
+							}
+						}) }
+					}),
+					checkbox: require_tokens_automation_utils_index.createLayerConfig({
+						label: "checkbox",
+						properties: {
+							borderColor: require_tokens_automation_utils_index.createConfigurableProperty({
+								name: "borderColor",
+								label: "border color",
+								typeOfFixture: [
+									"spectrumColors",
+									"linePaletteColors",
+									"alwaysPaletteAliases"
+								],
+								values: [
+									__yahoo_uds_fixtures.spectrumColors,
+									__yahoo_uds_fixtures.linePaletteColors,
+									__yahoo_uds_fixtures.alwaysPaletteAliases
+								],
+								pseudoStates: [
+									"hover",
+									"pressed",
+									"disabled"
+								],
+								defaults: {
+									primary: "tertiary",
+									secondary: "tertiary",
+									alert: "tertiary",
+									"alert-secondary": "tertiary"
+								}
+							}),
+							backgroundColor: require_tokens_automation_utils_index.createConfigurableProperty({
+								name: "backgroundColor",
+								label: "Checkbox background color",
+								typeOfFixture: [
+									"spectrumColors",
+									"backgroundPaletteColors",
+									"alwaysPaletteAliases"
+								],
+								values: [
+									__yahoo_uds_fixtures.spectrumColors,
+									__yahoo_uds_fixtures.backgroundPaletteColors,
+									__yahoo_uds_fixtures.alwaysPaletteAliases
+								],
+								pseudoStates: [
+									"hover",
+									"pressed",
+									"disabled"
+								],
+								defaults: {
+									primary: "secondary",
+									secondary: "secondary",
+									alert: "secondary",
+									"alert-secondary": "secondary"
+								}
+							}),
+							shadow: require_tokens_automation_utils_index.createConfigurableProperty({
+								name: "shadow",
+								label: "Drop shadow",
+								typeOfFixture: ["shadowVariants"],
+								supportsCustom: true,
+								values: [__yahoo_uds_fixtures.shadowVariants],
+								pseudoStates: [
+									"hover",
+									"pressed",
+									"disabled"
+								],
+								defaults: {
+									primary: "none",
+									secondary: "none",
+									alert: "md",
+									"alert-secondary": "none"
+								}
+							}),
+							insetShadow: require_tokens_automation_utils_index.createConfigurableProperty({
+								name: "insetShadow",
+								label: "Inset shadow",
+								typeOfFixture: ["shadowVariantsWithInvert"],
+								supportsCustom: true,
+								values: [__yahoo_uds_fixtures.shadowVariantsWithInvert],
+								pseudoStates: [
+									"hover",
+									"pressed",
+									"disabled"
+								],
+								defaults: {
+									primary: "2xl-invert",
+									secondary: "md-invert",
+									alert: "md",
+									"alert-secondary": "xl"
+								}
+							})
+						}
+					}),
+					checkboxIcon: require_tokens_automation_utils_index.createLayerConfig({
+						label: "checkboxIcon",
+						properties: { color: require_tokens_automation_utils_index.createConfigurableProperty({
+							name: "color",
+							label: "Icon color",
+							typeOfFixture: [
+								"spectrumColors",
+								"foregroundPaletteColors",
+								"alwaysPaletteAliases"
+							],
+							values: [
+								__yahoo_uds_fixtures.spectrumColors,
+								__yahoo_uds_fixtures.foregroundPaletteColors,
+								__yahoo_uds_fixtures.alwaysPaletteAliases
+							],
+							pseudoStates: [
+								"hover",
+								"pressed",
+								"disabled"
+							],
+							defaults: {
+								primary: "primary",
+								secondary: "primary",
+								alert: "primary",
+								"alert-secondary": "primary"
+							}
+						}) }
+					})
+				}
+			}) }
+		})
+	}
+});
+
+//#endregion
+exports.CheckboxConfig = CheckboxConfig;