@yahoo/uds 3.169.0 → 3.169.1
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/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/client/Toast/UDSToastConfigProvider.d.cts +1 -1
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +1 -1
- package/dist/styles/styler.cjs +18 -2
- package/dist/styles/styler.d.cts +35 -27
- package/dist/styles/styler.d.ts +35 -27
- package/dist/styles/styler.js +18 -2
- 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/variants.cjs +1 -28
- package/dist/styles/variants.js +2 -28
- 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/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 +274 -270
- package/dist/uds/generated/componentData.js +274 -270
- package/dist/uds/generated/tailwindPurge.cjs +1 -1
- package/dist/uds/generated/tailwindPurge.js +1 -1
- package/generated/componentData.json +456 -456
- package/generated/tailwindPurge.ts +1 -1
- package/package.json +1 -1
package/dist/styles/styler.d.ts
CHANGED
|
@@ -9,11 +9,19 @@ import { CVA, CX } from "./stylerTypes.js";
|
|
|
9
9
|
declare function normalizeObject(props: Record<string, unknown>): Record<string, unknown>;
|
|
10
10
|
declare const cx: CX<string>;
|
|
11
11
|
declare const cva: CVA<string>;
|
|
12
|
+
/**
|
|
13
|
+
* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
|
|
14
|
+
*
|
|
15
|
+
* Without it, importing anything from this module (e.g. just `cx`) drags the full `variants`
|
|
16
|
+
* map and the auto-generated `autoVariants` (~70 kB minified) into the bundle, because bundlers
|
|
17
|
+
* must assume the module-level `cva(...)` call has side effects. With it, `getStylesInternal`
|
|
18
|
+
* and its `variants` import are dropped when `getStyles` is unused.
|
|
19
|
+
*/
|
|
12
20
|
declare const getStylesInternal: (props?: ({
|
|
13
21
|
avatarIconVariantRoot?: "primary" | "secondary" | "default" | undefined;
|
|
14
22
|
avatarImageVariantRoot?: "primary" | "secondary" | "default" | undefined;
|
|
15
|
-
avatarSizeIcon?: "xs" | "sm" | "md" | "lg" | "xl" | "
|
|
16
|
-
avatarSizeRoot?: "xs" | "sm" | "md" | "lg" | "xl" | "
|
|
23
|
+
avatarSizeIcon?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "default" | "2xs" | "3xl" | undefined;
|
|
24
|
+
avatarSizeRoot?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "default" | "2xs" | "3xl" | undefined;
|
|
17
25
|
avatarTextVariantRoot?: "primary" | "secondary" | "default" | undefined;
|
|
18
26
|
badgeSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
|
|
19
27
|
badgeSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
|
|
@@ -33,8 +41,8 @@ declare const getStylesInternal: (props?: ({
|
|
|
33
41
|
bottomsheetVariantRoot?: "default" | undefined;
|
|
34
42
|
buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
|
|
35
43
|
buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
|
|
36
|
-
buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "
|
|
37
|
-
buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "
|
|
44
|
+
buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
|
|
45
|
+
buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
|
|
38
46
|
checkboxSizeCheckbox?: "sm" | "md" | "default" | undefined;
|
|
39
47
|
checkboxSizeRoot?: "sm" | "md" | "default" | undefined;
|
|
40
48
|
checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
|
|
@@ -200,10 +208,10 @@ declare const getStylesInternal: (props?: ({
|
|
|
200
208
|
toastSizeIcon?: "default" | undefined;
|
|
201
209
|
toastSizeLabel?: "default" | undefined;
|
|
202
210
|
toastSizeRoot?: "default" | undefined;
|
|
203
|
-
toastVariantActionButton?: "
|
|
204
|
-
toastVariantCloseIcon?: "
|
|
205
|
-
toastVariantIcon?: "
|
|
206
|
-
toastVariantRoot?: "
|
|
211
|
+
toastVariantActionButton?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
|
|
212
|
+
toastVariantCloseIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
|
|
213
|
+
toastVariantIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
|
|
214
|
+
toastVariantRoot?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
|
|
207
215
|
tooltipSizeBody?: "default" | undefined;
|
|
208
216
|
tooltipSizeEndContent?: "default" | undefined;
|
|
209
217
|
tooltipSizeIcon?: "default" | undefined;
|
|
@@ -218,7 +226,7 @@ declare const getStylesInternal: (props?: ({
|
|
|
218
226
|
placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
|
|
219
227
|
fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
|
|
220
228
|
fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
|
|
221
|
-
fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "
|
|
229
|
+
fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
|
|
222
230
|
lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
|
|
223
231
|
letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
|
|
224
232
|
textAlign?: "center" | "justify" | "start" | "end" | undefined;
|
|
@@ -250,39 +258,39 @@ declare const getStylesInternal: (props?: ({
|
|
|
250
258
|
borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
251
259
|
borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
252
260
|
borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
253
|
-
borderWidth?: "
|
|
254
|
-
borderVerticalWidth?: "
|
|
255
|
-
borderHorizontalWidth?: "
|
|
256
|
-
borderStartWidth?: "
|
|
257
|
-
borderEndWidth?: "
|
|
258
|
-
borderTopWidth?: "
|
|
259
|
-
borderBottomWidth?: "
|
|
261
|
+
borderWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
262
|
+
borderVerticalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
263
|
+
borderHorizontalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
264
|
+
borderStartWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
265
|
+
borderEndWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
266
|
+
borderTopWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
267
|
+
borderBottomWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
260
268
|
avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs" | "3xl" | undefined;
|
|
261
269
|
iconSize?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
262
|
-
alignContent?: "
|
|
263
|
-
alignItems?: "
|
|
264
|
-
alignSelf?: "
|
|
265
|
-
flex?: "
|
|
270
|
+
alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
|
|
271
|
+
alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
|
|
272
|
+
alignSelf?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto" | undefined;
|
|
273
|
+
flex?: "1" | "none" | "auto" | "initial" | undefined;
|
|
266
274
|
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
|
|
267
275
|
flexGrow?: "0" | "1" | "2" | "3" | undefined;
|
|
268
276
|
flexShrink?: "0" | "1" | undefined;
|
|
269
277
|
flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
270
|
-
justifyContent?: "
|
|
278
|
+
justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
|
|
271
279
|
flexBasis?: "min-content" | undefined;
|
|
272
|
-
display?: "flex" | "none" | "block" | "inline-block" | "inline" | "inline-flex" | "
|
|
280
|
+
display?: "flex" | "table" | "none" | "block" | "inline-block" | "inline" | "inline-flex" | "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" | "contents" | undefined;
|
|
273
281
|
overflow?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
274
282
|
overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
275
283
|
overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
276
284
|
position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
277
|
-
contentFit?: "
|
|
285
|
+
contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
|
|
278
286
|
colorMode?: "light" | "dark" | undefined;
|
|
279
|
-
scaleMode?: "
|
|
287
|
+
scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
|
|
280
288
|
width?: "full" | "fit" | "screen" | undefined;
|
|
281
289
|
height?: "full" | "fit" | "screen" | undefined;
|
|
282
|
-
dropShadow?: "
|
|
283
|
-
insetShadow?: "
|
|
290
|
+
dropShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
|
|
291
|
+
insetShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
|
|
284
292
|
nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
285
|
-
nestedBorderRadiusWidth?: "
|
|
293
|
+
nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
286
294
|
nestedBorderRadiusSpacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
287
295
|
nestedBorderRadius?: boolean | "first" | "last" | undefined;
|
|
288
296
|
} & {
|
package/dist/styles/styler.js
CHANGED
|
@@ -21,7 +21,15 @@ function normalizeObject(props) {
|
|
|
21
21
|
}
|
|
22
22
|
return sorted;
|
|
23
23
|
}
|
|
24
|
-
|
|
24
|
+
/**
|
|
25
|
+
* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
|
|
26
|
+
*
|
|
27
|
+
* Without it, bundlers must assume this module-level call has side effects and keep it (plus
|
|
28
|
+
* `tailwind-merge` and the fixtures color lists it references) in any bundle that imports
|
|
29
|
+
* anything from this module. Do not rename/wrap the call without re-checking bundle output
|
|
30
|
+
* (e.g. `esbuild --bundle --minify` an entry that imports a single lightweight export).
|
|
31
|
+
*/
|
|
32
|
+
const twMerge = /* @__PURE__ */ extendTailwindMerge({
|
|
25
33
|
extend: { theme: {
|
|
26
34
|
borderColor: lineColors,
|
|
27
35
|
borderWidth: borderWidthsWithElevation,
|
|
@@ -83,7 +91,15 @@ const cva = (config) => {
|
|
|
83
91
|
return cx(base, variantClassNames, compoundVariantClassNames, className);
|
|
84
92
|
};
|
|
85
93
|
};
|
|
86
|
-
|
|
94
|
+
/**
|
|
95
|
+
* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
|
|
96
|
+
*
|
|
97
|
+
* Without it, importing anything from this module (e.g. just `cx`) drags the full `variants`
|
|
98
|
+
* map and the auto-generated `autoVariants` (~70 kB minified) into the bundle, because bundlers
|
|
99
|
+
* must assume the module-level `cva(...)` call has side effects. With it, `getStylesInternal`
|
|
100
|
+
* and its `variants` import are dropped when `getStyles` is unused.
|
|
101
|
+
*/
|
|
102
|
+
const getStylesInternal = /* @__PURE__ */ cva({ variants });
|
|
87
103
|
const styleCache = /* @__PURE__ */ new Map();
|
|
88
104
|
const getStylesCacheKeySymbol = Symbol("getStylesCacheKey");
|
|
89
105
|
const generateCacheKey = (props) => {
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
//#region src/styles/textColorVariants.ts
|
|
4
|
+
/**
|
|
5
|
+
* Text color classes for the `color` style prop.
|
|
6
|
+
*
|
|
7
|
+
* Kept in a standalone module so lightweight components (e.g. `Icon`) can map
|
|
8
|
+
* a color to its class without pulling in the full `variants` map, the
|
|
9
|
+
* auto-generated variants, or `tailwind-merge` via the styler.
|
|
10
|
+
*/
|
|
11
|
+
const textColorVariants = {
|
|
12
|
+
accent: "text-accent",
|
|
13
|
+
alert: "text-alert",
|
|
14
|
+
"alert-secondary": "text-alert-secondary",
|
|
15
|
+
brand: "text-brand",
|
|
16
|
+
"brand-secondary": "text-brand-secondary",
|
|
17
|
+
positive: "text-positive",
|
|
18
|
+
"positive-secondary": "text-positive-secondary",
|
|
19
|
+
warning: "text-warning",
|
|
20
|
+
"warning-secondary": "text-warning-secondary",
|
|
21
|
+
info: "text-info",
|
|
22
|
+
"info-secondary": "text-info-secondary",
|
|
23
|
+
muted: "text-muted",
|
|
24
|
+
"on-color": "text-on-color",
|
|
25
|
+
primary: "text-primary",
|
|
26
|
+
secondary: "text-secondary",
|
|
27
|
+
tertiary: "text-tertiary",
|
|
28
|
+
white: "text-white",
|
|
29
|
+
black: "text-black",
|
|
30
|
+
transparent: "text-transparent",
|
|
31
|
+
current: "text-current",
|
|
32
|
+
"always/white": "text-always-white",
|
|
33
|
+
"always/black": "text-always-black",
|
|
34
|
+
"always/transparent": "text-always-transparent",
|
|
35
|
+
"always/current": "text-always-current",
|
|
36
|
+
"always/brand": "text-always-brand",
|
|
37
|
+
"always/accent": "text-always-accent"
|
|
38
|
+
};
|
|
39
|
+
//#endregion
|
|
40
|
+
exports.textColorVariants = textColorVariants;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/styles/textColorVariants.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Text color classes for the `color` style prop.
|
|
5
|
+
*
|
|
6
|
+
* Kept in a standalone module so lightweight components (e.g. `Icon`) can map
|
|
7
|
+
* a color to its class without pulling in the full `variants` map, the
|
|
8
|
+
* auto-generated variants, or `tailwind-merge` via the styler.
|
|
9
|
+
*/
|
|
10
|
+
declare const textColorVariants: {
|
|
11
|
+
accent: string;
|
|
12
|
+
alert: string;
|
|
13
|
+
'alert-secondary': string;
|
|
14
|
+
brand: string;
|
|
15
|
+
'brand-secondary': string;
|
|
16
|
+
positive: string;
|
|
17
|
+
'positive-secondary': string;
|
|
18
|
+
warning: string;
|
|
19
|
+
'warning-secondary': string;
|
|
20
|
+
info: string;
|
|
21
|
+
'info-secondary': string;
|
|
22
|
+
muted: string;
|
|
23
|
+
'on-color': string;
|
|
24
|
+
primary: string;
|
|
25
|
+
secondary: string;
|
|
26
|
+
tertiary: string;
|
|
27
|
+
white: string;
|
|
28
|
+
black: string;
|
|
29
|
+
transparent: string;
|
|
30
|
+
current: string;
|
|
31
|
+
'always/white': string;
|
|
32
|
+
'always/black': string;
|
|
33
|
+
'always/transparent': string;
|
|
34
|
+
'always/current': string;
|
|
35
|
+
'always/brand': string;
|
|
36
|
+
'always/accent': string;
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { textColorVariants };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/styles/textColorVariants.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Text color classes for the `color` style prop.
|
|
5
|
+
*
|
|
6
|
+
* Kept in a standalone module so lightweight components (e.g. `Icon`) can map
|
|
7
|
+
* a color to its class without pulling in the full `variants` map, the
|
|
8
|
+
* auto-generated variants, or `tailwind-merge` via the styler.
|
|
9
|
+
*/
|
|
10
|
+
declare const textColorVariants: {
|
|
11
|
+
accent: string;
|
|
12
|
+
alert: string;
|
|
13
|
+
'alert-secondary': string;
|
|
14
|
+
brand: string;
|
|
15
|
+
'brand-secondary': string;
|
|
16
|
+
positive: string;
|
|
17
|
+
'positive-secondary': string;
|
|
18
|
+
warning: string;
|
|
19
|
+
'warning-secondary': string;
|
|
20
|
+
info: string;
|
|
21
|
+
'info-secondary': string;
|
|
22
|
+
muted: string;
|
|
23
|
+
'on-color': string;
|
|
24
|
+
primary: string;
|
|
25
|
+
secondary: string;
|
|
26
|
+
tertiary: string;
|
|
27
|
+
white: string;
|
|
28
|
+
black: string;
|
|
29
|
+
transparent: string;
|
|
30
|
+
current: string;
|
|
31
|
+
'always/white': string;
|
|
32
|
+
'always/black': string;
|
|
33
|
+
'always/transparent': string;
|
|
34
|
+
'always/current': string;
|
|
35
|
+
'always/brand': string;
|
|
36
|
+
'always/accent': string;
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { textColorVariants };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
//#region src/styles/textColorVariants.ts
|
|
3
|
+
/**
|
|
4
|
+
* Text color classes for the `color` style prop.
|
|
5
|
+
*
|
|
6
|
+
* Kept in a standalone module so lightweight components (e.g. `Icon`) can map
|
|
7
|
+
* a color to its class without pulling in the full `variants` map, the
|
|
8
|
+
* auto-generated variants, or `tailwind-merge` via the styler.
|
|
9
|
+
*/
|
|
10
|
+
const textColorVariants = {
|
|
11
|
+
accent: "text-accent",
|
|
12
|
+
alert: "text-alert",
|
|
13
|
+
"alert-secondary": "text-alert-secondary",
|
|
14
|
+
brand: "text-brand",
|
|
15
|
+
"brand-secondary": "text-brand-secondary",
|
|
16
|
+
positive: "text-positive",
|
|
17
|
+
"positive-secondary": "text-positive-secondary",
|
|
18
|
+
warning: "text-warning",
|
|
19
|
+
"warning-secondary": "text-warning-secondary",
|
|
20
|
+
info: "text-info",
|
|
21
|
+
"info-secondary": "text-info-secondary",
|
|
22
|
+
muted: "text-muted",
|
|
23
|
+
"on-color": "text-on-color",
|
|
24
|
+
primary: "text-primary",
|
|
25
|
+
secondary: "text-secondary",
|
|
26
|
+
tertiary: "text-tertiary",
|
|
27
|
+
white: "text-white",
|
|
28
|
+
black: "text-black",
|
|
29
|
+
transparent: "text-transparent",
|
|
30
|
+
current: "text-current",
|
|
31
|
+
"always/white": "text-always-white",
|
|
32
|
+
"always/black": "text-always-black",
|
|
33
|
+
"always/transparent": "text-always-transparent",
|
|
34
|
+
"always/current": "text-always-current",
|
|
35
|
+
"always/brand": "text-always-brand",
|
|
36
|
+
"always/accent": "text-always-accent"
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { textColorVariants };
|
package/dist/styles/variants.cjs
CHANGED
|
@@ -4,34 +4,7 @@ const require_autoVariants = require("../automated-config/dist/generated/autoVar
|
|
|
4
4
|
const require_index = require("../css-tokens/dist/index.cjs");
|
|
5
5
|
//#region src/styles/variants.ts
|
|
6
6
|
const variants = {
|
|
7
|
-
color:
|
|
8
|
-
accent: "text-accent",
|
|
9
|
-
alert: "text-alert",
|
|
10
|
-
"alert-secondary": "text-alert-secondary",
|
|
11
|
-
brand: "text-brand",
|
|
12
|
-
"brand-secondary": "text-brand-secondary",
|
|
13
|
-
positive: "text-positive",
|
|
14
|
-
"positive-secondary": "text-positive-secondary",
|
|
15
|
-
warning: "text-warning",
|
|
16
|
-
"warning-secondary": "text-warning-secondary",
|
|
17
|
-
info: "text-info",
|
|
18
|
-
"info-secondary": "text-info-secondary",
|
|
19
|
-
muted: "text-muted",
|
|
20
|
-
"on-color": "text-on-color",
|
|
21
|
-
primary: "text-primary",
|
|
22
|
-
secondary: "text-secondary",
|
|
23
|
-
tertiary: "text-tertiary",
|
|
24
|
-
white: "text-white",
|
|
25
|
-
black: "text-black",
|
|
26
|
-
transparent: "text-transparent",
|
|
27
|
-
current: "text-current",
|
|
28
|
-
"always/white": "text-always-white",
|
|
29
|
-
"always/black": "text-always-black",
|
|
30
|
-
"always/transparent": "text-always-transparent",
|
|
31
|
-
"always/current": "text-always-current",
|
|
32
|
-
"always/brand": "text-always-brand",
|
|
33
|
-
"always/accent": "text-always-accent"
|
|
34
|
-
},
|
|
7
|
+
color: require("./textColorVariants.cjs").textColorVariants,
|
|
35
8
|
placeholderColor: {
|
|
36
9
|
accent: "placeholder:text-accent",
|
|
37
10
|
alert: "placeholder:text-alert",
|
package/dist/styles/variants.js
CHANGED
|
@@ -1,36 +1,10 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
import { autoVariants } from "../automated-config/dist/generated/autoVariants.js";
|
|
3
3
|
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";
|
|
4
|
+
import { textColorVariants } from "./textColorVariants.js";
|
|
4
5
|
//#region src/styles/variants.ts
|
|
5
6
|
const variants = {
|
|
6
|
-
color:
|
|
7
|
-
accent: "text-accent",
|
|
8
|
-
alert: "text-alert",
|
|
9
|
-
"alert-secondary": "text-alert-secondary",
|
|
10
|
-
brand: "text-brand",
|
|
11
|
-
"brand-secondary": "text-brand-secondary",
|
|
12
|
-
positive: "text-positive",
|
|
13
|
-
"positive-secondary": "text-positive-secondary",
|
|
14
|
-
warning: "text-warning",
|
|
15
|
-
"warning-secondary": "text-warning-secondary",
|
|
16
|
-
info: "text-info",
|
|
17
|
-
"info-secondary": "text-info-secondary",
|
|
18
|
-
muted: "text-muted",
|
|
19
|
-
"on-color": "text-on-color",
|
|
20
|
-
primary: "text-primary",
|
|
21
|
-
secondary: "text-secondary",
|
|
22
|
-
tertiary: "text-tertiary",
|
|
23
|
-
white: "text-white",
|
|
24
|
-
black: "text-black",
|
|
25
|
-
transparent: "text-transparent",
|
|
26
|
-
current: "text-current",
|
|
27
|
-
"always/white": "text-always-white",
|
|
28
|
-
"always/black": "text-always-black",
|
|
29
|
-
"always/transparent": "text-always-transparent",
|
|
30
|
-
"always/current": "text-always-current",
|
|
31
|
-
"always/brand": "text-always-brand",
|
|
32
|
-
"always/accent": "text-always-accent"
|
|
33
|
-
},
|
|
7
|
+
color: textColorVariants,
|
|
34
8
|
placeholderColor: {
|
|
35
9
|
accent: "placeholder:text-accent",
|
|
36
10
|
alert: "placeholder:text-alert",
|
|
@@ -10,8 +10,8 @@ declare function getShadowStyles({
|
|
|
10
10
|
}: {
|
|
11
11
|
config: UniversalTokensConfig;
|
|
12
12
|
shadowType: ShadowType;
|
|
13
|
-
}): Record<".uds-inset-shadow-
|
|
14
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
13
|
+
}): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
|
|
14
|
+
readonly [x: string]: "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
15
15
|
readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
16
16
|
}>; //#endregion
|
|
17
17
|
//#endregion
|
|
@@ -10,8 +10,8 @@ declare function getShadowStyles({
|
|
|
10
10
|
}: {
|
|
11
11
|
config: UniversalTokensConfig;
|
|
12
12
|
shadowType: ShadowType;
|
|
13
|
-
}): Record<".uds-inset-shadow-
|
|
14
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
13
|
+
}): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
|
|
14
|
+
readonly [x: string]: "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
15
15
|
readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
16
16
|
}>; //#endregion
|
|
17
17
|
//#endregion
|
|
@@ -80,7 +80,14 @@ function getFontUrlsByIds(fontIds) {
|
|
|
80
80
|
* ReactDOM.preload(fontUrls['centra-no2'][400], { as: 'font', crossOrigin: '', type: 'font/woff2' });
|
|
81
81
|
* ```
|
|
82
82
|
*/
|
|
83
|
-
|
|
83
|
+
/**
|
|
84
|
+
* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
|
|
85
|
+
*
|
|
86
|
+
* This const is re-exported from the `tokens` barrel, so without the annotation some bundlers
|
|
87
|
+
* (rollup, webpack + terser) retain this call — and the font declarations map it walks — in any
|
|
88
|
+
* bundle that imports anything from the barrel, even when `fontUrls` itself is unused.
|
|
89
|
+
*/
|
|
90
|
+
const fontUrls = /* @__PURE__ */ getFontUrls();
|
|
84
91
|
//#endregion
|
|
85
92
|
exports.fontUrls = fontUrls;
|
|
86
93
|
exports.getFontUrls = getFontUrls;
|
|
@@ -68,6 +68,13 @@ declare function getFontUrlsByIds(fontIds: FontID[]): string[];
|
|
|
68
68
|
* ReactDOM.preload(fontUrls['centra-no2'][400], { as: 'font', crossOrigin: '', type: 'font/woff2' });
|
|
69
69
|
* ```
|
|
70
70
|
*/
|
|
71
|
+
/**
|
|
72
|
+
* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
|
|
73
|
+
*
|
|
74
|
+
* This const is re-exported from the `tokens` barrel, so without the annotation some bundlers
|
|
75
|
+
* (rollup, webpack + terser) retain this call — and the font declarations map it walks — in any
|
|
76
|
+
* bundle that imports anything from the barrel, even when `fontUrls` itself is unused.
|
|
77
|
+
*/
|
|
71
78
|
declare const fontUrls: FontUrlMap;
|
|
72
79
|
//#endregion
|
|
73
80
|
export { FontUrlConfig, FontUrlMap, fontUrls, getFontUrls, getFontUrlsByIds };
|
|
@@ -68,6 +68,13 @@ declare function getFontUrlsByIds(fontIds: FontID[]): string[];
|
|
|
68
68
|
* ReactDOM.preload(fontUrls['centra-no2'][400], { as: 'font', crossOrigin: '', type: 'font/woff2' });
|
|
69
69
|
* ```
|
|
70
70
|
*/
|
|
71
|
+
/**
|
|
72
|
+
* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
|
|
73
|
+
*
|
|
74
|
+
* This const is re-exported from the `tokens` barrel, so without the annotation some bundlers
|
|
75
|
+
* (rollup, webpack + terser) retain this call — and the font declarations map it walks — in any
|
|
76
|
+
* bundle that imports anything from the barrel, even when `fontUrls` itself is unused.
|
|
77
|
+
*/
|
|
71
78
|
declare const fontUrls: FontUrlMap;
|
|
72
79
|
//#endregion
|
|
73
80
|
export { FontUrlConfig, FontUrlMap, fontUrls, getFontUrls, getFontUrlsByIds };
|
|
@@ -79,6 +79,13 @@ function getFontUrlsByIds(fontIds) {
|
|
|
79
79
|
* ReactDOM.preload(fontUrls['centra-no2'][400], { as: 'font', crossOrigin: '', type: 'font/woff2' });
|
|
80
80
|
* ```
|
|
81
81
|
*/
|
|
82
|
-
|
|
82
|
+
/**
|
|
83
|
+
* !WARNING: The `@__PURE__` annotation below is load-bearing for tree-shaking — do not remove it.
|
|
84
|
+
*
|
|
85
|
+
* This const is re-exported from the `tokens` barrel, so without the annotation some bundlers
|
|
86
|
+
* (rollup, webpack + terser) retain this call — and the font declarations map it walks — in any
|
|
87
|
+
* bundle that imports anything from the barrel, even when `fontUrls` itself is unused.
|
|
88
|
+
*/
|
|
89
|
+
const fontUrls = /* @__PURE__ */ getFontUrls();
|
|
83
90
|
//#endregion
|
|
84
91
|
export { fontUrls, getFontUrls, getFontUrlsByIds };
|