@yahoo/uds 3.169.0 → 3.170.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/automated-config/dist/generated/autoVariantTemplates.cjs +218 -0
- package/dist/automated-config/dist/generated/autoVariantTemplates.js +218 -0
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
- package/dist/components/Icon.cjs +3 -6
- package/dist/components/Icon.js +3 -6
- package/dist/components/IconSlot.cjs +1 -1
- package/dist/components/IconSlot.js +1 -1
- package/dist/components/client/Button/Button.cjs +1 -1
- package/dist/components/client/Button/Button.js +1 -1
- package/dist/components/client/IconButton/IconButton.cjs +1 -1
- package/dist/components/client/IconButton/IconButton.js +1 -1
- package/dist/components/client/Menu/Menu.Content.cjs +1 -1
- package/dist/components/client/Menu/Menu.Content.js +1 -1
- package/dist/components/client/Popover/PopoverContent.cjs +1 -1
- package/dist/components/client/Popover/PopoverContent.js +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/Toast/UDSToastConfigProvider.d.cts +5 -5
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +5 -5
- package/dist/index.cjs +3 -3
- package/dist/index.js +3 -3
- package/dist/styles/styleVariantTemplates.cjs +146 -0
- package/dist/styles/styleVariantTemplates.d.cts +161 -0
- package/dist/styles/styleVariantTemplates.d.ts +161 -0
- package/dist/styles/styleVariantTemplates.js +145 -0
- package/dist/styles/styler.cjs +32 -21
- package/dist/styles/styler.d.cts +13 -281
- package/dist/styles/styler.d.ts +13 -281
- package/dist/styles/styler.js +32 -21
- package/dist/styles/stylerTypes.d.cts +1 -1
- package/dist/styles/stylerTypes.d.ts +1 -1
- package/dist/styles/textColorVariants.cjs +40 -0
- package/dist/styles/textColorVariants.d.cts +39 -0
- package/dist/styles/textColorVariants.d.ts +39 -0
- package/dist/styles/textColorVariants.js +39 -0
- package/dist/styles/udsTailwindMerge.cjs +522 -0
- package/dist/styles/udsTailwindMerge.d.cts +7 -0
- package/dist/styles/udsTailwindMerge.d.ts +7 -0
- package/dist/styles/udsTailwindMerge.js +520 -0
- package/dist/styles/variantClass.cjs +31 -0
- package/dist/styles/variantClass.d.cts +12 -0
- package/dist/styles/variantClass.d.ts +12 -0
- package/dist/styles/variantClass.js +30 -0
- package/dist/styles/variants.cjs +3 -29
- package/dist/styles/variants.js +3 -29
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
- package/dist/tokens/index.cjs +1 -1
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/utils/getFontUrls.cjs +8 -1
- package/dist/tokens/utils/getFontUrls.d.cts +7 -0
- package/dist/tokens/utils/getFontUrls.d.ts +7 -0
- package/dist/tokens/utils/getFontUrls.js +8 -1
- package/dist/uds/generated/componentData.cjs +365 -361
- package/dist/uds/generated/componentData.js +365 -361
- package/dist/uds/generated/tailwindPurge.cjs +80 -80
- package/dist/uds/generated/tailwindPurge.js +80 -80
- package/generated/componentData.json +590 -590
- package/generated/tailwindPurge.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
//#region ../automated-config/dist/generated/autoVariantTemplates.js
|
|
3
|
+
/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
|
|
4
|
+
/**
|
|
5
|
+
* Class-name templates for the auto-generated component variants. `%v` is
|
|
6
|
+
* replaced with the normalized variant value at runtime. Templates exist so
|
|
7
|
+
* the client bundle does not need the enumerated `autoVariants` map;
|
|
8
|
+
* `autoVariants` remains the source of truth for build-time tooling (CSS
|
|
9
|
+
* generation, purging).
|
|
10
|
+
*/
|
|
11
|
+
const autoVariantTemplates = {
|
|
12
|
+
avatarIconVariantRoot: "uds-avatar-icon-variant-%v-root",
|
|
13
|
+
avatarImageVariantRoot: "uds-avatar-image-variant-%v-root",
|
|
14
|
+
avatarSizeIcon: "uds-avatar-size-%v-icon",
|
|
15
|
+
avatarSizeRoot: "uds-avatar-size-%v-root",
|
|
16
|
+
avatarTextVariantRoot: "uds-avatar-text-variant-%v-root",
|
|
17
|
+
badgeSizeIcon: "uds-badge-size-%v-icon",
|
|
18
|
+
badgeSizeRoot: "uds-badge-size-%v-root",
|
|
19
|
+
badgeVariantIcon: "uds-badge-variant-%v-icon",
|
|
20
|
+
badgeVariantRoot: "uds-badge-variant-%v-root",
|
|
21
|
+
bannerSizeClose: "uds-banner-size-%v-close",
|
|
22
|
+
bannerSizeDescription: "uds-banner-size-%v-description",
|
|
23
|
+
bannerSizeIcon: "uds-banner-size-%v-icon",
|
|
24
|
+
bannerSizeRoot: "uds-banner-size-%v-root",
|
|
25
|
+
bannerSizeTitle: "uds-banner-size-%v-title",
|
|
26
|
+
bannerVariantDescription: "uds-banner-variant-%v-description",
|
|
27
|
+
bannerVariantIcon: "uds-banner-variant-%v-icon",
|
|
28
|
+
bannerVariantRoot: "uds-banner-variant-%v-root",
|
|
29
|
+
bannerVariantTitle: "uds-banner-variant-%v-title",
|
|
30
|
+
bottomsheetVariantHandleIndicator: "uds-bottomsheet-variant-%v-handleindicator",
|
|
31
|
+
bottomsheetVariantHeader: "uds-bottomsheet-variant-%v-header",
|
|
32
|
+
bottomsheetVariantRoot: "uds-bottomsheet-variant-%v-root",
|
|
33
|
+
buttonSizeIcon: "uds-button-size-%v-icon",
|
|
34
|
+
buttonSizeRoot: "uds-button-size-%v-root",
|
|
35
|
+
buttonVariantIcon: "uds-button-variant-%v-icon",
|
|
36
|
+
buttonVariantRoot: "uds-button-variant-%v-root",
|
|
37
|
+
checkboxSizeCheckbox: "uds-checkbox-size-%v-checkbox",
|
|
38
|
+
checkboxSizeRoot: "uds-checkbox-size-%v-root",
|
|
39
|
+
checkboxVariantCheckbox: "uds-checkbox-variant-%v-checkbox",
|
|
40
|
+
checkboxVariantCheckboxIcon: "uds-checkbox-variant-%v-checkboxicon",
|
|
41
|
+
checkboxVariantRoot: "uds-checkbox-variant-%v-root",
|
|
42
|
+
checkboxVariantValueCheckbox: "uds-checkbox-variant-value-%v-checkbox",
|
|
43
|
+
checkboxVariantValueCheckboxIcon: "uds-checkbox-variant-value-%v-checkboxicon",
|
|
44
|
+
checkboxVariantValueRoot: "uds-checkbox-variant-value-%v-root",
|
|
45
|
+
chipDismissibleVariantIcon: "uds-chip-dismissible-variant-%v-icon",
|
|
46
|
+
chipDismissibleVariantRoot: "uds-chip-dismissible-variant-%v-root",
|
|
47
|
+
chipLinkVariantIcon: "uds-chip-link-variant-%v-icon",
|
|
48
|
+
chipLinkVariantRoot: "uds-chip-link-variant-%v-root",
|
|
49
|
+
chipSizeIcon: "uds-chip-size-%v-icon",
|
|
50
|
+
chipSizeRoot: "uds-chip-size-%v-root",
|
|
51
|
+
chipToggleVariantActiveIcon: "uds-chip-toggle-variant-active-%v-icon",
|
|
52
|
+
chipToggleVariantActiveRoot: "uds-chip-toggle-variant-active-%v-root",
|
|
53
|
+
chipToggleVariantIcon: "uds-chip-toggle-variant-%v-icon",
|
|
54
|
+
chipToggleVariantRoot: "uds-chip-toggle-variant-%v-root",
|
|
55
|
+
dividerVariantLabel: "uds-divider-variant-%v-label",
|
|
56
|
+
dividerVariantLine: "uds-divider-variant-%v-line",
|
|
57
|
+
dividerVariantRoot: "uds-divider-variant-%v-root",
|
|
58
|
+
iconbuttonSizeIcon: "uds-iconbutton-size-%v-icon",
|
|
59
|
+
iconbuttonSizeRoot: "uds-iconbutton-size-%v-root",
|
|
60
|
+
inputSizeEndIcon: "uds-input-size-%v-endicon",
|
|
61
|
+
inputSizeHelperIcon: "uds-input-size-%v-helpericon",
|
|
62
|
+
inputSizeHelperText: "uds-input-size-%v-helpertext",
|
|
63
|
+
inputSizeInput: "uds-input-size-%v-input",
|
|
64
|
+
inputSizeInputWrapperDynamic: "uds-input-size-%v-inputwrapperdynamic",
|
|
65
|
+
inputSizeInputWrapperStatic: "uds-input-size-%v-inputwrapperstatic",
|
|
66
|
+
inputSizeLabel: "uds-input-size-%v-label",
|
|
67
|
+
inputSizeRoot: "uds-input-size-%v-root",
|
|
68
|
+
inputSizeStartIcon: "uds-input-size-%v-starticon",
|
|
69
|
+
inputVariantEndIcon: "uds-input-variant-%v-endicon",
|
|
70
|
+
inputVariantHelperIcon: "uds-input-variant-%v-helpericon",
|
|
71
|
+
inputVariantHelperText: "uds-input-variant-%v-helpertext",
|
|
72
|
+
inputVariantInput: "uds-input-variant-%v-input",
|
|
73
|
+
inputVariantInputPlaceholder: "uds-input-variant-%v-inputplaceholder",
|
|
74
|
+
inputVariantInputWrapper: "uds-input-variant-%v-inputwrapper",
|
|
75
|
+
inputVariantLabel: "uds-input-variant-%v-label",
|
|
76
|
+
inputVariantLabelRequired: "uds-input-variant-%v-labelrequired",
|
|
77
|
+
inputVariantRoot: "uds-input-variant-%v-root",
|
|
78
|
+
inputVariantStartIcon: "uds-input-variant-%v-starticon",
|
|
79
|
+
inputVariantValueEndIcon: "uds-input-variant-value-%v-endicon",
|
|
80
|
+
inputVariantValueHelperIcon: "uds-input-variant-value-%v-helpericon",
|
|
81
|
+
inputVariantValueHelperText: "uds-input-variant-value-%v-helpertext",
|
|
82
|
+
inputVariantValueInput: "uds-input-variant-value-%v-input",
|
|
83
|
+
inputVariantValueInputPlaceholder: "uds-input-variant-value-%v-inputplaceholder",
|
|
84
|
+
inputVariantValueInputWrapper: "uds-input-variant-value-%v-inputwrapper",
|
|
85
|
+
inputVariantValueLabel: "uds-input-variant-value-%v-label",
|
|
86
|
+
inputVariantValueLabelRequired: "uds-input-variant-value-%v-labelrequired",
|
|
87
|
+
inputVariantValueRoot: "uds-input-variant-value-%v-root",
|
|
88
|
+
inputVariantValueStartIcon: "uds-input-variant-value-%v-starticon",
|
|
89
|
+
linkTextStyleIcon: "uds-link-textstyle-%v-icon",
|
|
90
|
+
linkTextStyleRoot: "uds-link-textstyle-%v-root",
|
|
91
|
+
linkVariantIconEnd: "uds-link-variant-%v-iconend",
|
|
92
|
+
linkVariantIconStart: "uds-link-variant-%v-iconstart",
|
|
93
|
+
linkVariantRoot: "uds-link-variant-%v-root",
|
|
94
|
+
menucontentSizeRoot: "uds-menucontent-size-%v-root",
|
|
95
|
+
menucontentVariantRoot: "uds-menucontent-variant-%v-root",
|
|
96
|
+
menuitemDividerVariantLine: "uds-menuitem-divider-variant-%v-line",
|
|
97
|
+
menuitemDividerVariantRoot: "uds-menuitem-divider-variant-%v-root",
|
|
98
|
+
menuitemDividerVariantText: "uds-menuitem-divider-variant-%v-text",
|
|
99
|
+
menuitemItemCheckboxVariantActiveEndIcon: "uds-menuitem-itemcheckbox-variant-active-%v-endicon",
|
|
100
|
+
menuitemItemCheckboxVariantActiveRoot: "uds-menuitem-itemcheckbox-variant-active-%v-root",
|
|
101
|
+
menuitemItemCheckboxVariantActiveStartIcon: "uds-menuitem-itemcheckbox-variant-active-%v-starticon",
|
|
102
|
+
menuitemItemCheckboxVariantActiveText: "uds-menuitem-itemcheckbox-variant-active-%v-text",
|
|
103
|
+
menuitemItemCheckboxVariantEndIcon: "uds-menuitem-itemcheckbox-variant-%v-endicon",
|
|
104
|
+
menuitemItemCheckboxVariantRoot: "uds-menuitem-itemcheckbox-variant-%v-root",
|
|
105
|
+
menuitemItemCheckboxVariantStartIcon: "uds-menuitem-itemcheckbox-variant-%v-starticon",
|
|
106
|
+
menuitemItemCheckboxVariantText: "uds-menuitem-itemcheckbox-variant-%v-text",
|
|
107
|
+
menuitemItemVariantActiveIcon: "uds-menuitem-item-variant-active-%v-icon",
|
|
108
|
+
menuitemItemVariantActiveRoot: "uds-menuitem-item-variant-active-%v-root",
|
|
109
|
+
menuitemItemVariantActiveText: "uds-menuitem-item-variant-active-%v-text",
|
|
110
|
+
menuitemItemVariantIcon: "uds-menuitem-item-variant-%v-icon",
|
|
111
|
+
menuitemItemVariantRoot: "uds-menuitem-item-variant-%v-root",
|
|
112
|
+
menuitemItemVariantText: "uds-menuitem-item-variant-%v-text",
|
|
113
|
+
menuitemSizeEndIcon: "uds-menuitem-size-%v-endicon",
|
|
114
|
+
menuitemSizeRoot: "uds-menuitem-size-%v-root",
|
|
115
|
+
menuitemSizeStartIcon: "uds-menuitem-size-%v-starticon",
|
|
116
|
+
menuitemSizeText: "uds-menuitem-size-%v-text",
|
|
117
|
+
modalSizeActions: "uds-modal-size-%v-actions",
|
|
118
|
+
modalSizeCloseIcon: "uds-modal-size-%v-closeicon",
|
|
119
|
+
modalSizeCloseIconContainer: "uds-modal-size-%v-closeiconcontainer",
|
|
120
|
+
modalSizeDescription: "uds-modal-size-%v-description",
|
|
121
|
+
modalSizeHeader: "uds-modal-size-%v-header",
|
|
122
|
+
modalSizeRoot: "uds-modal-size-%v-root",
|
|
123
|
+
modalSizeScrim: "uds-modal-size-%v-scrim",
|
|
124
|
+
modalSizeSpacingHorizontal: "uds-modal-size-%v-spacinghorizontal",
|
|
125
|
+
modalSizeTitle: "uds-modal-size-%v-title",
|
|
126
|
+
modalSizeTitleDescriptionWrapper: "uds-modal-size-%v-titledescriptionwrapper",
|
|
127
|
+
modalVariantCloseIcon: "uds-modal-variant-%v-closeicon",
|
|
128
|
+
modalVariantDescription: "uds-modal-variant-%v-description",
|
|
129
|
+
modalVariantRoot: "uds-modal-variant-%v-root",
|
|
130
|
+
modalVariantTitle: "uds-modal-variant-%v-title",
|
|
131
|
+
paddlenavSizeIcon: "uds-paddlenav-size-%v-icon",
|
|
132
|
+
paddlenavSizeRoot: "uds-paddlenav-size-%v-root",
|
|
133
|
+
paddlenavVariantBackground: "uds-paddlenav-variant-%v-background",
|
|
134
|
+
paddlenavVariantIcon: "uds-paddlenav-variant-%v-icon",
|
|
135
|
+
paddlenavVariantRoot: "uds-paddlenav-variant-%v-root",
|
|
136
|
+
paginationSizeIcon: "uds-pagination-size-%v-icon",
|
|
137
|
+
paginationSizeItem: "uds-pagination-size-%v-item",
|
|
138
|
+
paginationSizeRoot: "uds-pagination-size-%v-root",
|
|
139
|
+
paginationSizeText: "uds-pagination-size-%v-text",
|
|
140
|
+
paginationVariantActiveRoot: "uds-pagination-variant-active-%v-root",
|
|
141
|
+
paginationVariantRoot: "uds-pagination-variant-%v-root",
|
|
142
|
+
popoverSizeCloseIcon: "uds-popover-size-%v-closeicon",
|
|
143
|
+
popoverSizeCloseIconContainer: "uds-popover-size-%v-closeiconcontainer",
|
|
144
|
+
popoverSizeContentWrapper: "uds-popover-size-%v-contentwrapper",
|
|
145
|
+
popoverSizeRoot: "uds-popover-size-%v-root",
|
|
146
|
+
popoverSizeSvgBase: "uds-popover-size-%v-svgbase",
|
|
147
|
+
popoverSizeSvgBorder: "uds-popover-size-%v-svgborder",
|
|
148
|
+
popoverVariantBlur: "uds-popover-variant-%v-blur",
|
|
149
|
+
popoverVariantCloseIcon: "uds-popover-variant-%v-closeicon",
|
|
150
|
+
popoverVariantRoot: "uds-popover-variant-%v-root",
|
|
151
|
+
popoverVariantSvgBase: "uds-popover-variant-%v-svgbase",
|
|
152
|
+
popoverVariantSvgBorder: "uds-popover-variant-%v-svgborder",
|
|
153
|
+
radioSizeRadio: "uds-radio-size-%v-radio",
|
|
154
|
+
radioSizeRoot: "uds-radio-size-%v-root",
|
|
155
|
+
radioVariantRadio: "uds-radio-variant-%v-radio",
|
|
156
|
+
radioVariantRadioCircle: "uds-radio-variant-%v-radiocircle",
|
|
157
|
+
radioVariantRoot: "uds-radio-variant-%v-root",
|
|
158
|
+
radioVariantValueRadio: "uds-radio-variant-value-%v-radio",
|
|
159
|
+
radioVariantValueRadioCircle: "uds-radio-variant-value-%v-radiocircle",
|
|
160
|
+
radioVariantValueRoot: "uds-radio-variant-value-%v-root",
|
|
161
|
+
scrimVariantRoot: "uds-scrim-variant-%v-root",
|
|
162
|
+
selectVariantRoot: "uds-select-variant-%v-root",
|
|
163
|
+
selectcontentSizeRoot: "uds-selectcontent-size-%v-root",
|
|
164
|
+
selectcontentVariantRoot: "uds-selectcontent-variant-%v-root",
|
|
165
|
+
selectitemDividerVariantLine: "uds-selectitem-divider-variant-%v-line",
|
|
166
|
+
selectitemDividerVariantRoot: "uds-selectitem-divider-variant-%v-root",
|
|
167
|
+
selectitemDividerVariantText: "uds-selectitem-divider-variant-%v-text",
|
|
168
|
+
selectitemItemVariantActiveIcon: "uds-selectitem-item-variant-active-%v-icon",
|
|
169
|
+
selectitemItemVariantActiveRoot: "uds-selectitem-item-variant-active-%v-root",
|
|
170
|
+
selectitemItemVariantActiveText: "uds-selectitem-item-variant-active-%v-text",
|
|
171
|
+
selectitemItemVariantIcon: "uds-selectitem-item-variant-%v-icon",
|
|
172
|
+
selectitemItemVariantRoot: "uds-selectitem-item-variant-%v-root",
|
|
173
|
+
selectitemItemVariantText: "uds-selectitem-item-variant-%v-text",
|
|
174
|
+
selectitemSizeEndIcon: "uds-selectitem-size-%v-endicon",
|
|
175
|
+
selectitemSizeRoot: "uds-selectitem-size-%v-root",
|
|
176
|
+
selectitemSizeStartIcon: "uds-selectitem-size-%v-starticon",
|
|
177
|
+
selectitemSizeText: "uds-selectitem-size-%v-text",
|
|
178
|
+
switchSizeHandle: "uds-switch-size-%v-handle",
|
|
179
|
+
switchSizeHandleIcon: "uds-switch-size-%v-handleicon",
|
|
180
|
+
switchSizeRoot: "uds-switch-size-%v-root",
|
|
181
|
+
switchSizeSwitch: "uds-switch-size-%v-switch",
|
|
182
|
+
switchVariantActiveHandle: "uds-switch-variant-active-%v-handle",
|
|
183
|
+
switchVariantActiveHandleIcon: "uds-switch-variant-active-%v-handleicon",
|
|
184
|
+
switchVariantActiveRoot: "uds-switch-variant-active-%v-root",
|
|
185
|
+
switchVariantActiveSwitch: "uds-switch-variant-active-%v-switch",
|
|
186
|
+
switchVariantHandle: "uds-switch-variant-%v-handle",
|
|
187
|
+
switchVariantHandleIcon: "uds-switch-variant-%v-handleicon",
|
|
188
|
+
switchVariantRoot: "uds-switch-variant-%v-root",
|
|
189
|
+
switchVariantSwitch: "uds-switch-variant-%v-switch",
|
|
190
|
+
tabSizeIcon: "uds-tab-size-%v-icon",
|
|
191
|
+
tabSizeRoot: "uds-tab-size-%v-root",
|
|
192
|
+
tabVariantActiveIcon: "uds-tab-variant-active-%v-icon",
|
|
193
|
+
tabVariantActiveRoot: "uds-tab-variant-active-%v-root",
|
|
194
|
+
tabVariantIcon: "uds-tab-variant-%v-icon",
|
|
195
|
+
tabVariantRoot: "uds-tab-variant-%v-root",
|
|
196
|
+
tabsVariantRoot: "uds-tabs-variant-%v-root",
|
|
197
|
+
toastSizeActionButton: "uds-toast-size-%v-actionbutton",
|
|
198
|
+
toastSizeCloseIcon: "uds-toast-size-%v-closeicon",
|
|
199
|
+
toastSizeIcon: "uds-toast-size-%v-icon",
|
|
200
|
+
toastSizeLabel: "uds-toast-size-%v-label",
|
|
201
|
+
toastSizeRoot: "uds-toast-size-%v-root",
|
|
202
|
+
toastVariantActionButton: "uds-toast-variant-%v-actionbutton",
|
|
203
|
+
toastVariantCloseIcon: "uds-toast-variant-%v-closeicon",
|
|
204
|
+
toastVariantIcon: "uds-toast-variant-%v-icon",
|
|
205
|
+
toastVariantRoot: "uds-toast-variant-%v-root",
|
|
206
|
+
tooltipSizeBody: "uds-tooltip-size-%v-body",
|
|
207
|
+
tooltipSizeEndContent: "uds-tooltip-size-%v-endcontent",
|
|
208
|
+
tooltipSizeIcon: "uds-tooltip-size-%v-icon",
|
|
209
|
+
tooltipSizeRoot: "uds-tooltip-size-%v-root",
|
|
210
|
+
tooltipSizeSvg: "uds-tooltip-size-%v-svg",
|
|
211
|
+
tooltipSizeTitle: "uds-tooltip-size-%v-title",
|
|
212
|
+
tooltipVariantBlur: "uds-tooltip-variant-%v-blur",
|
|
213
|
+
tooltipVariantIcon: "uds-tooltip-variant-%v-icon",
|
|
214
|
+
tooltipVariantRoot: "uds-tooltip-variant-%v-root",
|
|
215
|
+
tooltipVariantSvg: "uds-tooltip-variant-%v-svg"
|
|
216
|
+
};
|
|
217
|
+
//#endregion
|
|
218
|
+
exports.autoVariantTemplates = autoVariantTemplates;
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
//#region ../automated-config/dist/generated/autoVariantTemplates.js
|
|
3
|
+
/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
|
|
4
|
+
/**
|
|
5
|
+
* Class-name templates for the auto-generated component variants. `%v` is
|
|
6
|
+
* replaced with the normalized variant value at runtime. Templates exist so
|
|
7
|
+
* the client bundle does not need the enumerated `autoVariants` map;
|
|
8
|
+
* `autoVariants` remains the source of truth for build-time tooling (CSS
|
|
9
|
+
* generation, purging).
|
|
10
|
+
*/
|
|
11
|
+
const autoVariantTemplates = {
|
|
12
|
+
avatarIconVariantRoot: "uds-avatar-icon-variant-%v-root",
|
|
13
|
+
avatarImageVariantRoot: "uds-avatar-image-variant-%v-root",
|
|
14
|
+
avatarSizeIcon: "uds-avatar-size-%v-icon",
|
|
15
|
+
avatarSizeRoot: "uds-avatar-size-%v-root",
|
|
16
|
+
avatarTextVariantRoot: "uds-avatar-text-variant-%v-root",
|
|
17
|
+
badgeSizeIcon: "uds-badge-size-%v-icon",
|
|
18
|
+
badgeSizeRoot: "uds-badge-size-%v-root",
|
|
19
|
+
badgeVariantIcon: "uds-badge-variant-%v-icon",
|
|
20
|
+
badgeVariantRoot: "uds-badge-variant-%v-root",
|
|
21
|
+
bannerSizeClose: "uds-banner-size-%v-close",
|
|
22
|
+
bannerSizeDescription: "uds-banner-size-%v-description",
|
|
23
|
+
bannerSizeIcon: "uds-banner-size-%v-icon",
|
|
24
|
+
bannerSizeRoot: "uds-banner-size-%v-root",
|
|
25
|
+
bannerSizeTitle: "uds-banner-size-%v-title",
|
|
26
|
+
bannerVariantDescription: "uds-banner-variant-%v-description",
|
|
27
|
+
bannerVariantIcon: "uds-banner-variant-%v-icon",
|
|
28
|
+
bannerVariantRoot: "uds-banner-variant-%v-root",
|
|
29
|
+
bannerVariantTitle: "uds-banner-variant-%v-title",
|
|
30
|
+
bottomsheetVariantHandleIndicator: "uds-bottomsheet-variant-%v-handleindicator",
|
|
31
|
+
bottomsheetVariantHeader: "uds-bottomsheet-variant-%v-header",
|
|
32
|
+
bottomsheetVariantRoot: "uds-bottomsheet-variant-%v-root",
|
|
33
|
+
buttonSizeIcon: "uds-button-size-%v-icon",
|
|
34
|
+
buttonSizeRoot: "uds-button-size-%v-root",
|
|
35
|
+
buttonVariantIcon: "uds-button-variant-%v-icon",
|
|
36
|
+
buttonVariantRoot: "uds-button-variant-%v-root",
|
|
37
|
+
checkboxSizeCheckbox: "uds-checkbox-size-%v-checkbox",
|
|
38
|
+
checkboxSizeRoot: "uds-checkbox-size-%v-root",
|
|
39
|
+
checkboxVariantCheckbox: "uds-checkbox-variant-%v-checkbox",
|
|
40
|
+
checkboxVariantCheckboxIcon: "uds-checkbox-variant-%v-checkboxicon",
|
|
41
|
+
checkboxVariantRoot: "uds-checkbox-variant-%v-root",
|
|
42
|
+
checkboxVariantValueCheckbox: "uds-checkbox-variant-value-%v-checkbox",
|
|
43
|
+
checkboxVariantValueCheckboxIcon: "uds-checkbox-variant-value-%v-checkboxicon",
|
|
44
|
+
checkboxVariantValueRoot: "uds-checkbox-variant-value-%v-root",
|
|
45
|
+
chipDismissibleVariantIcon: "uds-chip-dismissible-variant-%v-icon",
|
|
46
|
+
chipDismissibleVariantRoot: "uds-chip-dismissible-variant-%v-root",
|
|
47
|
+
chipLinkVariantIcon: "uds-chip-link-variant-%v-icon",
|
|
48
|
+
chipLinkVariantRoot: "uds-chip-link-variant-%v-root",
|
|
49
|
+
chipSizeIcon: "uds-chip-size-%v-icon",
|
|
50
|
+
chipSizeRoot: "uds-chip-size-%v-root",
|
|
51
|
+
chipToggleVariantActiveIcon: "uds-chip-toggle-variant-active-%v-icon",
|
|
52
|
+
chipToggleVariantActiveRoot: "uds-chip-toggle-variant-active-%v-root",
|
|
53
|
+
chipToggleVariantIcon: "uds-chip-toggle-variant-%v-icon",
|
|
54
|
+
chipToggleVariantRoot: "uds-chip-toggle-variant-%v-root",
|
|
55
|
+
dividerVariantLabel: "uds-divider-variant-%v-label",
|
|
56
|
+
dividerVariantLine: "uds-divider-variant-%v-line",
|
|
57
|
+
dividerVariantRoot: "uds-divider-variant-%v-root",
|
|
58
|
+
iconbuttonSizeIcon: "uds-iconbutton-size-%v-icon",
|
|
59
|
+
iconbuttonSizeRoot: "uds-iconbutton-size-%v-root",
|
|
60
|
+
inputSizeEndIcon: "uds-input-size-%v-endicon",
|
|
61
|
+
inputSizeHelperIcon: "uds-input-size-%v-helpericon",
|
|
62
|
+
inputSizeHelperText: "uds-input-size-%v-helpertext",
|
|
63
|
+
inputSizeInput: "uds-input-size-%v-input",
|
|
64
|
+
inputSizeInputWrapperDynamic: "uds-input-size-%v-inputwrapperdynamic",
|
|
65
|
+
inputSizeInputWrapperStatic: "uds-input-size-%v-inputwrapperstatic",
|
|
66
|
+
inputSizeLabel: "uds-input-size-%v-label",
|
|
67
|
+
inputSizeRoot: "uds-input-size-%v-root",
|
|
68
|
+
inputSizeStartIcon: "uds-input-size-%v-starticon",
|
|
69
|
+
inputVariantEndIcon: "uds-input-variant-%v-endicon",
|
|
70
|
+
inputVariantHelperIcon: "uds-input-variant-%v-helpericon",
|
|
71
|
+
inputVariantHelperText: "uds-input-variant-%v-helpertext",
|
|
72
|
+
inputVariantInput: "uds-input-variant-%v-input",
|
|
73
|
+
inputVariantInputPlaceholder: "uds-input-variant-%v-inputplaceholder",
|
|
74
|
+
inputVariantInputWrapper: "uds-input-variant-%v-inputwrapper",
|
|
75
|
+
inputVariantLabel: "uds-input-variant-%v-label",
|
|
76
|
+
inputVariantLabelRequired: "uds-input-variant-%v-labelrequired",
|
|
77
|
+
inputVariantRoot: "uds-input-variant-%v-root",
|
|
78
|
+
inputVariantStartIcon: "uds-input-variant-%v-starticon",
|
|
79
|
+
inputVariantValueEndIcon: "uds-input-variant-value-%v-endicon",
|
|
80
|
+
inputVariantValueHelperIcon: "uds-input-variant-value-%v-helpericon",
|
|
81
|
+
inputVariantValueHelperText: "uds-input-variant-value-%v-helpertext",
|
|
82
|
+
inputVariantValueInput: "uds-input-variant-value-%v-input",
|
|
83
|
+
inputVariantValueInputPlaceholder: "uds-input-variant-value-%v-inputplaceholder",
|
|
84
|
+
inputVariantValueInputWrapper: "uds-input-variant-value-%v-inputwrapper",
|
|
85
|
+
inputVariantValueLabel: "uds-input-variant-value-%v-label",
|
|
86
|
+
inputVariantValueLabelRequired: "uds-input-variant-value-%v-labelrequired",
|
|
87
|
+
inputVariantValueRoot: "uds-input-variant-value-%v-root",
|
|
88
|
+
inputVariantValueStartIcon: "uds-input-variant-value-%v-starticon",
|
|
89
|
+
linkTextStyleIcon: "uds-link-textstyle-%v-icon",
|
|
90
|
+
linkTextStyleRoot: "uds-link-textstyle-%v-root",
|
|
91
|
+
linkVariantIconEnd: "uds-link-variant-%v-iconend",
|
|
92
|
+
linkVariantIconStart: "uds-link-variant-%v-iconstart",
|
|
93
|
+
linkVariantRoot: "uds-link-variant-%v-root",
|
|
94
|
+
menucontentSizeRoot: "uds-menucontent-size-%v-root",
|
|
95
|
+
menucontentVariantRoot: "uds-menucontent-variant-%v-root",
|
|
96
|
+
menuitemDividerVariantLine: "uds-menuitem-divider-variant-%v-line",
|
|
97
|
+
menuitemDividerVariantRoot: "uds-menuitem-divider-variant-%v-root",
|
|
98
|
+
menuitemDividerVariantText: "uds-menuitem-divider-variant-%v-text",
|
|
99
|
+
menuitemItemCheckboxVariantActiveEndIcon: "uds-menuitem-itemcheckbox-variant-active-%v-endicon",
|
|
100
|
+
menuitemItemCheckboxVariantActiveRoot: "uds-menuitem-itemcheckbox-variant-active-%v-root",
|
|
101
|
+
menuitemItemCheckboxVariantActiveStartIcon: "uds-menuitem-itemcheckbox-variant-active-%v-starticon",
|
|
102
|
+
menuitemItemCheckboxVariantActiveText: "uds-menuitem-itemcheckbox-variant-active-%v-text",
|
|
103
|
+
menuitemItemCheckboxVariantEndIcon: "uds-menuitem-itemcheckbox-variant-%v-endicon",
|
|
104
|
+
menuitemItemCheckboxVariantRoot: "uds-menuitem-itemcheckbox-variant-%v-root",
|
|
105
|
+
menuitemItemCheckboxVariantStartIcon: "uds-menuitem-itemcheckbox-variant-%v-starticon",
|
|
106
|
+
menuitemItemCheckboxVariantText: "uds-menuitem-itemcheckbox-variant-%v-text",
|
|
107
|
+
menuitemItemVariantActiveIcon: "uds-menuitem-item-variant-active-%v-icon",
|
|
108
|
+
menuitemItemVariantActiveRoot: "uds-menuitem-item-variant-active-%v-root",
|
|
109
|
+
menuitemItemVariantActiveText: "uds-menuitem-item-variant-active-%v-text",
|
|
110
|
+
menuitemItemVariantIcon: "uds-menuitem-item-variant-%v-icon",
|
|
111
|
+
menuitemItemVariantRoot: "uds-menuitem-item-variant-%v-root",
|
|
112
|
+
menuitemItemVariantText: "uds-menuitem-item-variant-%v-text",
|
|
113
|
+
menuitemSizeEndIcon: "uds-menuitem-size-%v-endicon",
|
|
114
|
+
menuitemSizeRoot: "uds-menuitem-size-%v-root",
|
|
115
|
+
menuitemSizeStartIcon: "uds-menuitem-size-%v-starticon",
|
|
116
|
+
menuitemSizeText: "uds-menuitem-size-%v-text",
|
|
117
|
+
modalSizeActions: "uds-modal-size-%v-actions",
|
|
118
|
+
modalSizeCloseIcon: "uds-modal-size-%v-closeicon",
|
|
119
|
+
modalSizeCloseIconContainer: "uds-modal-size-%v-closeiconcontainer",
|
|
120
|
+
modalSizeDescription: "uds-modal-size-%v-description",
|
|
121
|
+
modalSizeHeader: "uds-modal-size-%v-header",
|
|
122
|
+
modalSizeRoot: "uds-modal-size-%v-root",
|
|
123
|
+
modalSizeScrim: "uds-modal-size-%v-scrim",
|
|
124
|
+
modalSizeSpacingHorizontal: "uds-modal-size-%v-spacinghorizontal",
|
|
125
|
+
modalSizeTitle: "uds-modal-size-%v-title",
|
|
126
|
+
modalSizeTitleDescriptionWrapper: "uds-modal-size-%v-titledescriptionwrapper",
|
|
127
|
+
modalVariantCloseIcon: "uds-modal-variant-%v-closeicon",
|
|
128
|
+
modalVariantDescription: "uds-modal-variant-%v-description",
|
|
129
|
+
modalVariantRoot: "uds-modal-variant-%v-root",
|
|
130
|
+
modalVariantTitle: "uds-modal-variant-%v-title",
|
|
131
|
+
paddlenavSizeIcon: "uds-paddlenav-size-%v-icon",
|
|
132
|
+
paddlenavSizeRoot: "uds-paddlenav-size-%v-root",
|
|
133
|
+
paddlenavVariantBackground: "uds-paddlenav-variant-%v-background",
|
|
134
|
+
paddlenavVariantIcon: "uds-paddlenav-variant-%v-icon",
|
|
135
|
+
paddlenavVariantRoot: "uds-paddlenav-variant-%v-root",
|
|
136
|
+
paginationSizeIcon: "uds-pagination-size-%v-icon",
|
|
137
|
+
paginationSizeItem: "uds-pagination-size-%v-item",
|
|
138
|
+
paginationSizeRoot: "uds-pagination-size-%v-root",
|
|
139
|
+
paginationSizeText: "uds-pagination-size-%v-text",
|
|
140
|
+
paginationVariantActiveRoot: "uds-pagination-variant-active-%v-root",
|
|
141
|
+
paginationVariantRoot: "uds-pagination-variant-%v-root",
|
|
142
|
+
popoverSizeCloseIcon: "uds-popover-size-%v-closeicon",
|
|
143
|
+
popoverSizeCloseIconContainer: "uds-popover-size-%v-closeiconcontainer",
|
|
144
|
+
popoverSizeContentWrapper: "uds-popover-size-%v-contentwrapper",
|
|
145
|
+
popoverSizeRoot: "uds-popover-size-%v-root",
|
|
146
|
+
popoverSizeSvgBase: "uds-popover-size-%v-svgbase",
|
|
147
|
+
popoverSizeSvgBorder: "uds-popover-size-%v-svgborder",
|
|
148
|
+
popoverVariantBlur: "uds-popover-variant-%v-blur",
|
|
149
|
+
popoverVariantCloseIcon: "uds-popover-variant-%v-closeicon",
|
|
150
|
+
popoverVariantRoot: "uds-popover-variant-%v-root",
|
|
151
|
+
popoverVariantSvgBase: "uds-popover-variant-%v-svgbase",
|
|
152
|
+
popoverVariantSvgBorder: "uds-popover-variant-%v-svgborder",
|
|
153
|
+
radioSizeRadio: "uds-radio-size-%v-radio",
|
|
154
|
+
radioSizeRoot: "uds-radio-size-%v-root",
|
|
155
|
+
radioVariantRadio: "uds-radio-variant-%v-radio",
|
|
156
|
+
radioVariantRadioCircle: "uds-radio-variant-%v-radiocircle",
|
|
157
|
+
radioVariantRoot: "uds-radio-variant-%v-root",
|
|
158
|
+
radioVariantValueRadio: "uds-radio-variant-value-%v-radio",
|
|
159
|
+
radioVariantValueRadioCircle: "uds-radio-variant-value-%v-radiocircle",
|
|
160
|
+
radioVariantValueRoot: "uds-radio-variant-value-%v-root",
|
|
161
|
+
scrimVariantRoot: "uds-scrim-variant-%v-root",
|
|
162
|
+
selectVariantRoot: "uds-select-variant-%v-root",
|
|
163
|
+
selectcontentSizeRoot: "uds-selectcontent-size-%v-root",
|
|
164
|
+
selectcontentVariantRoot: "uds-selectcontent-variant-%v-root",
|
|
165
|
+
selectitemDividerVariantLine: "uds-selectitem-divider-variant-%v-line",
|
|
166
|
+
selectitemDividerVariantRoot: "uds-selectitem-divider-variant-%v-root",
|
|
167
|
+
selectitemDividerVariantText: "uds-selectitem-divider-variant-%v-text",
|
|
168
|
+
selectitemItemVariantActiveIcon: "uds-selectitem-item-variant-active-%v-icon",
|
|
169
|
+
selectitemItemVariantActiveRoot: "uds-selectitem-item-variant-active-%v-root",
|
|
170
|
+
selectitemItemVariantActiveText: "uds-selectitem-item-variant-active-%v-text",
|
|
171
|
+
selectitemItemVariantIcon: "uds-selectitem-item-variant-%v-icon",
|
|
172
|
+
selectitemItemVariantRoot: "uds-selectitem-item-variant-%v-root",
|
|
173
|
+
selectitemItemVariantText: "uds-selectitem-item-variant-%v-text",
|
|
174
|
+
selectitemSizeEndIcon: "uds-selectitem-size-%v-endicon",
|
|
175
|
+
selectitemSizeRoot: "uds-selectitem-size-%v-root",
|
|
176
|
+
selectitemSizeStartIcon: "uds-selectitem-size-%v-starticon",
|
|
177
|
+
selectitemSizeText: "uds-selectitem-size-%v-text",
|
|
178
|
+
switchSizeHandle: "uds-switch-size-%v-handle",
|
|
179
|
+
switchSizeHandleIcon: "uds-switch-size-%v-handleicon",
|
|
180
|
+
switchSizeRoot: "uds-switch-size-%v-root",
|
|
181
|
+
switchSizeSwitch: "uds-switch-size-%v-switch",
|
|
182
|
+
switchVariantActiveHandle: "uds-switch-variant-active-%v-handle",
|
|
183
|
+
switchVariantActiveHandleIcon: "uds-switch-variant-active-%v-handleicon",
|
|
184
|
+
switchVariantActiveRoot: "uds-switch-variant-active-%v-root",
|
|
185
|
+
switchVariantActiveSwitch: "uds-switch-variant-active-%v-switch",
|
|
186
|
+
switchVariantHandle: "uds-switch-variant-%v-handle",
|
|
187
|
+
switchVariantHandleIcon: "uds-switch-variant-%v-handleicon",
|
|
188
|
+
switchVariantRoot: "uds-switch-variant-%v-root",
|
|
189
|
+
switchVariantSwitch: "uds-switch-variant-%v-switch",
|
|
190
|
+
tabSizeIcon: "uds-tab-size-%v-icon",
|
|
191
|
+
tabSizeRoot: "uds-tab-size-%v-root",
|
|
192
|
+
tabVariantActiveIcon: "uds-tab-variant-active-%v-icon",
|
|
193
|
+
tabVariantActiveRoot: "uds-tab-variant-active-%v-root",
|
|
194
|
+
tabVariantIcon: "uds-tab-variant-%v-icon",
|
|
195
|
+
tabVariantRoot: "uds-tab-variant-%v-root",
|
|
196
|
+
tabsVariantRoot: "uds-tabs-variant-%v-root",
|
|
197
|
+
toastSizeActionButton: "uds-toast-size-%v-actionbutton",
|
|
198
|
+
toastSizeCloseIcon: "uds-toast-size-%v-closeicon",
|
|
199
|
+
toastSizeIcon: "uds-toast-size-%v-icon",
|
|
200
|
+
toastSizeLabel: "uds-toast-size-%v-label",
|
|
201
|
+
toastSizeRoot: "uds-toast-size-%v-root",
|
|
202
|
+
toastVariantActionButton: "uds-toast-variant-%v-actionbutton",
|
|
203
|
+
toastVariantCloseIcon: "uds-toast-variant-%v-closeicon",
|
|
204
|
+
toastVariantIcon: "uds-toast-variant-%v-icon",
|
|
205
|
+
toastVariantRoot: "uds-toast-variant-%v-root",
|
|
206
|
+
tooltipSizeBody: "uds-tooltip-size-%v-body",
|
|
207
|
+
tooltipSizeEndContent: "uds-tooltip-size-%v-endcontent",
|
|
208
|
+
tooltipSizeIcon: "uds-tooltip-size-%v-icon",
|
|
209
|
+
tooltipSizeRoot: "uds-tooltip-size-%v-root",
|
|
210
|
+
tooltipSizeSvg: "uds-tooltip-size-%v-svg",
|
|
211
|
+
tooltipSizeTitle: "uds-tooltip-size-%v-title",
|
|
212
|
+
tooltipVariantBlur: "uds-tooltip-variant-%v-blur",
|
|
213
|
+
tooltipVariantIcon: "uds-tooltip-variant-%v-icon",
|
|
214
|
+
tooltipVariantRoot: "uds-tooltip-variant-%v-root",
|
|
215
|
+
tooltipVariantSvg: "uds-tooltip-variant-%v-svg"
|
|
216
|
+
};
|
|
217
|
+
//#endregion
|
|
218
|
+
export { autoVariantTemplates };
|
|
@@ -11,8 +11,8 @@ import { VariantConfig } from "../types/ComponentConfig.cjs";
|
|
|
11
11
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
12
12
|
*/
|
|
13
13
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
14
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
15
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
16
16
|
} | null; //#endregion
|
|
17
17
|
//#endregion
|
|
18
18
|
export { getConfigVariantProperties };
|
|
@@ -11,8 +11,8 @@ import { VariantConfig } from "../types/ComponentConfig.js";
|
|
|
11
11
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
12
12
|
*/
|
|
13
13
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
14
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
15
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
16
16
|
} | null; //#endregion
|
|
17
17
|
//#endregion
|
|
18
18
|
export { getConfigVariantProperties };
|
package/dist/components/Icon.cjs
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
require("../_virtual/_rolldown/runtime.cjs");
|
|
4
|
-
const
|
|
4
|
+
const require_styles_textColorVariants = require("../styles/textColorVariants.cjs");
|
|
5
5
|
const require_tokens_configs_sizes = require("../tokens/configs/sizes.cjs");
|
|
6
6
|
let react = require("react");
|
|
7
|
+
let clsx = require("clsx");
|
|
7
8
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
9
|
//#region src/components/Icon.tsx
|
|
9
10
|
/**
|
|
@@ -39,11 +40,7 @@ const Icon = (0, react.forwardRef)(function BaseIcon({ name: SVGIcon, size = "md
|
|
|
39
40
|
const availableVariants = SVGIcon.metadata?.variants ?? [];
|
|
40
41
|
const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
|
|
41
42
|
const isMulticolor = effectiveVariant === "multicolor";
|
|
42
|
-
const styles =
|
|
43
|
-
flex: "none",
|
|
44
|
-
color: isMulticolor || color === "inherit" ? void 0 : color,
|
|
45
|
-
className: require_styles_styler.cx(className, !isMulticolor && "[&_path]:fill-current")
|
|
46
|
-
});
|
|
43
|
+
const styles = (0, clsx.clsx)("flex-none", !isMulticolor && color !== "inherit" && require_styles_textColorVariants.textColorVariants[color], !isMulticolor && "[&_path]:fill-current", className);
|
|
47
44
|
const sizePx = require_tokens_configs_sizes.normalIconSizes[size];
|
|
48
45
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
49
46
|
ref,
|
package/dist/components/Icon.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
-
import {
|
|
2
|
+
import { textColorVariants } from "../styles/textColorVariants.js";
|
|
3
3
|
import { normalIconSizes } from "../tokens/configs/sizes.js";
|
|
4
4
|
import { forwardRef } from "react";
|
|
5
|
+
import { clsx } from "clsx";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
//#region src/components/Icon.tsx
|
|
7
8
|
/**
|
|
@@ -37,11 +38,7 @@ const Icon = forwardRef(function BaseIcon({ name: SVGIcon, size = "md", variant
|
|
|
37
38
|
const availableVariants = SVGIcon.metadata?.variants ?? [];
|
|
38
39
|
const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
|
|
39
40
|
const isMulticolor = effectiveVariant === "multicolor";
|
|
40
|
-
const styles =
|
|
41
|
-
flex: "none",
|
|
42
|
-
color: isMulticolor || color === "inherit" ? void 0 : color,
|
|
43
|
-
className: cx(className, !isMulticolor && "[&_path]:fill-current")
|
|
44
|
-
});
|
|
41
|
+
const styles = clsx("flex-none", !isMulticolor && color !== "inherit" && textColorVariants[color], !isMulticolor && "[&_path]:fill-current", className);
|
|
45
42
|
const sizePx = normalIconSizes[size];
|
|
46
43
|
return /* @__PURE__ */ jsx("svg", {
|
|
47
44
|
ref,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
|
|
4
|
-
const require_index = require("../css-tokens/dist/index.cjs");
|
|
5
4
|
const require_styles_styler = require("../styles/styler.cjs");
|
|
5
|
+
const require_index = require("../css-tokens/dist/index.cjs");
|
|
6
6
|
const require_components_Icon = require("./Icon.cjs");
|
|
7
7
|
let react = require("react");
|
|
8
8
|
react = require_runtime.__toESM(react);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
-
import { ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE } from "../css-tokens/dist/index.js";
|
|
3
2
|
import { cx } from "../styles/styler.js";
|
|
3
|
+
import { ICON_COLOR_OVERRIDE_ATTRIBUTE, ICON_SIZE_OVERRIDE_ATTRIBUTE } from "../css-tokens/dist/index.js";
|
|
4
4
|
import { Icon } from "./Icon.js";
|
|
5
5
|
import { cloneElement, isValidElement, memo } from "react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
|
|
5
|
-
const require_index = require("../../../css-tokens/dist/index.cjs");
|
|
6
5
|
const require_utils_createSlot = require("../../../utils/createSlot.cjs");
|
|
6
|
+
const require_index = require("../../../css-tokens/dist/index.cjs");
|
|
7
7
|
const require_components_Icon = require("../../Icon.cjs");
|
|
8
8
|
const require_components_IconSlot = require("../../IconSlot.cjs");
|
|
9
9
|
const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
"use client";
|
|
3
|
-
import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
|
|
4
3
|
import { createSlot } from "../../../utils/createSlot.js";
|
|
4
|
+
import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
|
|
5
5
|
import { Icon } from "../../Icon.js";
|
|
6
6
|
import { IconSlot } from "../../IconSlot.js";
|
|
7
7
|
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
require("../../../_virtual/_rolldown/runtime.cjs");
|
|
5
|
-
const require_index = require("../../../css-tokens/dist/index.cjs");
|
|
6
5
|
const require_utils_createSlot = require("../../../utils/createSlot.cjs");
|
|
6
|
+
const require_index = require("../../../css-tokens/dist/index.cjs");
|
|
7
7
|
const require_components_Icon = require("../../Icon.cjs");
|
|
8
8
|
const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
|
|
9
9
|
const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
"use client";
|
|
3
|
-
import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
|
|
4
3
|
import { createSlot } from "../../../utils/createSlot.js";
|
|
4
|
+
import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
|
|
5
5
|
import { Icon } from "../../Icon.js";
|
|
6
6
|
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
|
|
7
7
|
import { SpringMotionConfig } from "../SpringMotionConfig.js";
|
|
@@ -5,11 +5,11 @@ require("../../../_virtual/_rolldown/runtime.cjs");
|
|
|
5
5
|
const require_styles_styler = require("../../../styles/styler.cjs");
|
|
6
6
|
const require_components_VStack = require("../../VStack.cjs");
|
|
7
7
|
let react = require("react");
|
|
8
|
-
let _yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
|
|
9
8
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
9
|
let _ariakit_react = require("@ariakit/react");
|
|
11
10
|
let motion_react = require("motion/react");
|
|
12
11
|
let _ariakit_react_menu = require("@ariakit/react/menu");
|
|
12
|
+
let _yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
|
|
13
13
|
//#region src/components/client/Menu/Menu.Content.tsx
|
|
14
14
|
const MotionVStack = motion_react.m.create(require_components_VStack.VStack);
|
|
15
15
|
const ANIMATION_CONFIG = {
|