@yahoo/uds 3.144.0 → 3.144.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/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 +1 -1
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +1 -1
- package/dist/styles/styler.d.cts +52 -52
- package/dist/styles/styler.d.ts +52 -52
- package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.cts +1 -1
- package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.ts +1 -1
- package/dist/tailwind/dist/tailwind/utils/getShadowStyles.d.cts +4 -4
- package/dist/tailwind/dist/tailwind/utils/getShadowStyles.d.ts +4 -4
- package/dist/tailwind/dist/utils/parseTokens.cjs +9 -3
- package/dist/tailwind/dist/utils/parseTokens.d.cts.map +1 -1
- package/dist/tailwind/dist/utils/parseTokens.d.ts.map +1 -1
- package/dist/tailwind/dist/utils/parseTokens.js +9 -3
- package/dist/tailwind/dist/utils/parseTokens.js.map +1 -1
- package/dist/uds/generated/componentData.cjs +1451 -1451
- package/dist/uds/generated/componentData.js +1451 -1451
- package/generated/componentData.json +1965 -1965
- package/package.json +1 -1
|
@@ -3,8 +3,8 @@ import { ElevationAlias, ShadowType, ShadowVariant } from "../../types/dist/inde
|
|
|
3
3
|
import { UniversalTokensConfig } from "../../config/dist/index.cjs";
|
|
4
4
|
|
|
5
5
|
//#region src/tailwind/utils/getShadowStyles.d.ts
|
|
6
|
-
declare const shadowVariantToCSS: (shadowType: ShadowType, shadowVariant: ShadowVariant | ElevationAlias) => readonly [".uds-inset-shadow-
|
|
7
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
6
|
+
declare const shadowVariantToCSS: (shadowType: ShadowType, shadowVariant: ShadowVariant | ElevationAlias) => readonly [".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", {
|
|
7
|
+
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)";
|
|
8
8
|
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)";
|
|
9
9
|
}];
|
|
10
10
|
declare function getShadowStyles({
|
|
@@ -13,8 +13,8 @@ declare function getShadowStyles({
|
|
|
13
13
|
}: {
|
|
14
14
|
config: UniversalTokensConfig;
|
|
15
15
|
shadowType: ShadowType;
|
|
16
|
-
}): Record<".uds-inset-shadow-
|
|
17
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
16
|
+
}): 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", {
|
|
17
|
+
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)";
|
|
18
18
|
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)";
|
|
19
19
|
}>;
|
|
20
20
|
//#endregion
|
|
@@ -3,8 +3,8 @@ import { ElevationAlias, ShadowType, ShadowVariant } from "../../types/dist/inde
|
|
|
3
3
|
import { UniversalTokensConfig } from "../../config/dist/index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/tailwind/utils/getShadowStyles.d.ts
|
|
6
|
-
declare const shadowVariantToCSS: (shadowType: ShadowType, shadowVariant: ShadowVariant | ElevationAlias) => readonly [".uds-inset-shadow-
|
|
7
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
6
|
+
declare const shadowVariantToCSS: (shadowType: ShadowType, shadowVariant: ShadowVariant | ElevationAlias) => readonly [".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", {
|
|
7
|
+
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)";
|
|
8
8
|
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)";
|
|
9
9
|
}];
|
|
10
10
|
declare function getShadowStyles({
|
|
@@ -13,8 +13,8 @@ declare function getShadowStyles({
|
|
|
13
13
|
}: {
|
|
14
14
|
config: UniversalTokensConfig;
|
|
15
15
|
shadowType: ShadowType;
|
|
16
|
-
}): Record<".uds-inset-shadow-
|
|
17
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
16
|
+
}): 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", {
|
|
17
|
+
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)";
|
|
18
18
|
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)";
|
|
19
19
|
}>;
|
|
20
20
|
//#endregion
|
|
@@ -15,6 +15,9 @@ function shouldIncludeOpacity(opacity) {
|
|
|
15
15
|
const parsedOpacity = parseInt(opacity, 10);
|
|
16
16
|
return !isNaN(parsedOpacity) && parsedOpacity !== 100;
|
|
17
17
|
}
|
|
18
|
+
function formatColorVarWithOpacity(name, opacity) {
|
|
19
|
+
return shouldIncludeOpacity(opacity) ? `rgb(var(${name}) / ${opacity}%)` : `rgb(var(${name}))`;
|
|
20
|
+
}
|
|
18
21
|
function resolveFocusRingColor(color) {
|
|
19
22
|
switch (color.type) {
|
|
20
23
|
case "spectrum": return `rgb(var(--${require_index$1.SPECTRUM_COLOR_PREFIX}-${color.value.hue}-${color.value.step}))`;
|
|
@@ -42,7 +45,7 @@ function transformColors(colors, elevationPresets, focusRingConfig) {
|
|
|
42
45
|
const name = `--uds-${paletteType}-color-${paletteKey}`;
|
|
43
46
|
rootVars[name] = `var(--${require_index$1.SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;
|
|
44
47
|
const opacityValue = opacity !== void 0 ? require_opacity.parseOpacityStep(opacity) : void 0;
|
|
45
|
-
tailwindConfig.palette[paletteType][paletteKey] =
|
|
48
|
+
tailwindConfig.palette[paletteType][paletteKey] = formatColorVarWithOpacity(name, opacityValue);
|
|
46
49
|
}
|
|
47
50
|
});
|
|
48
51
|
require_entries.entries(elevationPresets).forEach(([level, elevationPreset]) => {
|
|
@@ -62,9 +65,12 @@ function transformColors(colors, elevationPresets, focusRingConfig) {
|
|
|
62
65
|
case "spectrum":
|
|
63
66
|
rootVars[name] = `rgb(var(--${require_index$1.SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;
|
|
64
67
|
break;
|
|
65
|
-
case "line":
|
|
66
|
-
|
|
68
|
+
case "line": {
|
|
69
|
+
const lineColor = palette.line[elevationPreset[key].value];
|
|
70
|
+
const opacityValue = lineColor.opacity !== void 0 ? require_opacity.parseOpacityStep(lineColor.opacity) : void 0;
|
|
71
|
+
rootVars[name] = formatColorVarWithOpacity(`--${require_index$1.LINE_COLOR_PREFIX}-${elevationPreset[key].value}`, opacityValue);
|
|
67
72
|
break;
|
|
73
|
+
}
|
|
68
74
|
}
|
|
69
75
|
}
|
|
70
76
|
if (key === "borderWidth") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseTokens.d.cts","names":[],"sources":["../../src/utils/parseTokens.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"parseTokens.d.cts","names":[],"sources":["../../src/utils/parseTokens.ts"],"mappings":";;;;;KAwDK,yBAAA,GAA4B,OAAA,CAAQ,MAAA,CAAO,cAAA,EAAgB,eAAA;AAAA,iBAevD,eAAA,CACP,MAAA,EAAQ,YAAA,EACR,gBAAA,EAAkB,yBAAA,EAClB,eAAA,GAAkB,eAAA;;;;cAKA,MAAA,CAAO,GAAA,EAAK,MAAA,CAAO,OAAA;uBAEzB,WAAA,GAAc,MAAA,OAAa,aAAA,CAAc,GAAA;EAAA;AAAA;AAAA,iBA+I9C,oBAAA,WAA+B,MAAA,iBAAA,CAAwB,MAAA,UAAgB,MAAA,EAAQ,CAAA;SAGrE,MAAA;QACD,MAAA;kBACU,MAAA;AAAA;AAAA,KAkBvB,SAAA,GAAY,IAAA,CAAK,qBAAA;EACpB,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,UAAA,QAAkB,eAAA;EAC/C,SAAA,EAAW,MAAA,CACT,SAAA;IAEE,YAAA,EAAc,UAAA,QAAkB,oBAAA;IAChC,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,SAAA,EAAW,UAAA,QAAkB,oBAAA;EAAA;AAAA;AAAA,iBAsBnB,WAAA,CAAY,MAAA,EAAQ,qBAAA,GAAwB,SAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseTokens.d.ts","names":[],"sources":["../../src/utils/parseTokens.ts"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"parseTokens.d.ts","names":[],"sources":["../../src/utils/parseTokens.ts"],"mappings":";;;;;KAwDK,yBAAA,GAA4B,OAAA,CAAQ,MAAA,CAAO,cAAA,EAAgB,eAAA;AAAA,iBAevD,eAAA,CACP,MAAA,EAAQ,YAAA,EACR,gBAAA,EAAkB,yBAAA,EAClB,eAAA,GAAkB,eAAA;;;;cAKA,MAAA,CAAO,GAAA,EAAK,MAAA,CAAO,OAAA;uBAEzB,WAAA,GAAc,MAAA,OAAa,aAAA,CAAc,GAAA;EAAA;AAAA;AAAA,iBA+I9C,oBAAA,WAA+B,MAAA,iBAAA,CAAwB,MAAA,UAAgB,MAAA,EAAQ,CAAA;SAGrE,MAAA;QACD,MAAA;kBACU,MAAA;AAAA;AAAA,KAkBvB,SAAA,GAAY,IAAA,CAAK,qBAAA;EACpB,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,UAAA,QAAkB,eAAA;EAC/C,SAAA,EAAW,MAAA,CACT,SAAA;IAEE,YAAA,EAAc,UAAA,QAAkB,oBAAA;IAChC,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,SAAA,EAAW,UAAA,QAAkB,oBAAA;EAAA;AAAA;AAAA,iBAsBnB,WAAA,CAAY,MAAA,EAAQ,qBAAA,GAAwB,SAAA"}
|
|
@@ -15,6 +15,9 @@ function shouldIncludeOpacity(opacity) {
|
|
|
15
15
|
const parsedOpacity = parseInt(opacity, 10);
|
|
16
16
|
return !isNaN(parsedOpacity) && parsedOpacity !== 100;
|
|
17
17
|
}
|
|
18
|
+
function formatColorVarWithOpacity(name, opacity) {
|
|
19
|
+
return shouldIncludeOpacity(opacity) ? `rgb(var(${name}) / ${opacity}%)` : `rgb(var(${name}))`;
|
|
20
|
+
}
|
|
18
21
|
function resolveFocusRingColor(color) {
|
|
19
22
|
switch (color.type) {
|
|
20
23
|
case "spectrum": return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${color.value.hue}-${color.value.step}))`;
|
|
@@ -42,7 +45,7 @@ function transformColors(colors, elevationPresets, focusRingConfig) {
|
|
|
42
45
|
const name = `--uds-${paletteType}-color-${paletteKey}`;
|
|
43
46
|
rootVars[name] = `var(--${SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;
|
|
44
47
|
const opacityValue = opacity !== void 0 ? parseOpacityStep(opacity) : void 0;
|
|
45
|
-
tailwindConfig.palette[paletteType][paletteKey] =
|
|
48
|
+
tailwindConfig.palette[paletteType][paletteKey] = formatColorVarWithOpacity(name, opacityValue);
|
|
46
49
|
}
|
|
47
50
|
});
|
|
48
51
|
entries(elevationPresets).forEach(([level, elevationPreset]) => {
|
|
@@ -62,9 +65,12 @@ function transformColors(colors, elevationPresets, focusRingConfig) {
|
|
|
62
65
|
case "spectrum":
|
|
63
66
|
rootVars[name] = `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;
|
|
64
67
|
break;
|
|
65
|
-
case "line":
|
|
66
|
-
|
|
68
|
+
case "line": {
|
|
69
|
+
const lineColor = palette.line[elevationPreset[key].value];
|
|
70
|
+
const opacityValue = lineColor.opacity !== void 0 ? parseOpacityStep(lineColor.opacity) : void 0;
|
|
71
|
+
rootVars[name] = formatColorVarWithOpacity(`--${LINE_COLOR_PREFIX}-${elevationPreset[key].value}`, opacityValue);
|
|
67
72
|
break;
|
|
73
|
+
}
|
|
68
74
|
}
|
|
69
75
|
}
|
|
70
76
|
if (key === "borderWidth") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseTokens.js","names":[],"sources":["../../src/utils/parseTokens.ts"],"sourcesContent":["import type { UniversalTokensConfig } from '@yahoo/uds-config';\nimport {\n AVATAR_SIZE_PREFIX,\n BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX,\n BACKGROUND_BLUR_RADIUS_PREFIX,\n BACKGROUND_COLOR_PREFIX,\n BORDER_RADIUS_PREFIX,\n BORDER_WIDTH_PREFIX,\n DROP_SHADOW_PREFIX,\n getShadowLayerValue,\n ICON_SIZE_PREFIX,\n INSET_SHADOW_PREFIX,\n LINE_COLOR_PREFIX,\n OUTLINE_PREFIX,\n SPECTRUM_COLOR_PREFIX,\n UDS_PREFIX,\n} from '@yahoo/uds-css-tokens';\nimport { alwaysPalette } from '@yahoo/uds-palette';\nimport type {\n ColorMode,\n ColorsConfig,\n ElevationLevel,\n ElevationPreset,\n FocusRingColor,\n FocusRingConfig,\n Hue,\n HueStep,\n OpacityStep,\n PaletteConfig,\n PaletteType,\n ScaleMode,\n} from '@yahoo/uds-types';\n\nimport { entries } from './entries';\nimport { mapValues } from './mapValues';\nimport { parseOpacityStep } from './opacity';\n\n/** Converts a SpectrumValueEntry to a space-separated RGB string for CSS variables. */\nfunction spectrumValueToRgbString(value: { rgb: { r: number; g: number; b: number } }): string {\n const { r, g, b } = value.rgb;\n return `${r} ${g} ${b}`;\n}\n\nfunction shouldIncludeOpacity(opacity: OpacityStep | undefined): boolean {\n if (!opacity) {\n return false;\n }\n\n const parsedOpacity = parseInt(opacity, 10);\n return !isNaN(parsedOpacity) && parsedOpacity !== 100;\n}\n\ntype ColorModeElevationPresets = Partial<Record<ElevationLevel, ElevationPreset>>;\n\nfunction resolveFocusRingColor(color: FocusRingColor): string {\n switch (color.type) {\n case 'spectrum':\n return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${color.value.hue}-${color.value.step}))`;\n case 'line':\n return `rgb(var(--${LINE_COLOR_PREFIX}-${color.value}))`;\n case 'always':\n return alwaysPalette[color.value as keyof typeof alwaysPalette];\n default:\n return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-gray-15))`;\n }\n}\n\nfunction transformColors(\n colors: ColorsConfig,\n elevationPresets: ColorModeElevationPresets,\n focusRingConfig?: FocusRingConfig,\n) {\n const { palette, spectrum } = colors;\n const rootVars: Record<string, string> = {};\n const tailwindConfig = {\n spectrum: {} as Record<Hue, Record<HueStep, string>>,\n palette: {} as {\n [key in PaletteType]: Record<keyof PaletteConfig[key], string>;\n },\n };\n\n for (const [hue, hueSteps] of entries(spectrum)) {\n for (const [hueStep, value] of entries(hueSteps)) {\n const name = `${hue}-${hueStep}`;\n const varKey = `--${SPECTRUM_COLOR_PREFIX}-${name}`;\n if (!tailwindConfig.spectrum[hue]) {\n tailwindConfig.spectrum[hue] = {} as Record<HueStep, string>;\n }\n tailwindConfig.spectrum[hue][hueStep] = `rgb(var(${varKey}))`;\n rootVars[varKey] = spectrumValueToRgbString(value);\n }\n }\n\n entries(palette).forEach(([paletteType, paletteConfig]) => {\n for (const [paletteKey, { hue, step, opacity }] of Object.entries(paletteConfig)) {\n if (!(paletteType in tailwindConfig.palette)) {\n // @ts-expect-error we fill this object later\n tailwindConfig.palette[paletteType] = {};\n }\n const name = `--${UDS_PREFIX}-${paletteType}-color-${paletteKey}`;\n rootVars[name] = `var(--${SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;\n const opacityValue = opacity !== undefined ? parseOpacityStep(opacity) : undefined;\n // @ts-expect-error this is fine\n tailwindConfig.palette[paletteType][paletteKey] = shouldIncludeOpacity(opacityValue)\n ? `rgb(var(${name}) / ${opacityValue}%)`\n : `rgb(var(${name}))`;\n }\n });\n\n // Elevation levels\n entries(elevationPresets).forEach(([level, elevationPreset]) => {\n if (elevationPreset) {\n entries(elevationPreset).forEach(([key]) => {\n // background color\n if (key === 'finalBackgroundValue') {\n const { r, g, b, a } = elevationPreset[key];\n const alpha = parseInt(a) / 100;\n const name = `--${BACKGROUND_COLOR_PREFIX}-elevation-${level}`;\n rootVars[name] = `rgba(${r}, ${g}, ${b}, ${alpha})`;\n }\n\n // border color\n if (key === 'borderColor') {\n const name = `--${LINE_COLOR_PREFIX}-elevation-${level}`;\n\n switch (elevationPreset[key].type) {\n case 'always':\n rootVars[name] = alwaysPalette[elevationPreset[key].value];\n break;\n case 'spectrum':\n rootVars[name] =\n `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;\n break;\n case 'line':\n rootVars[name] = `rgb(var(--${LINE_COLOR_PREFIX}-${elevationPreset[key].value}))`;\n break;\n }\n }\n\n // border width\n if (key === 'borderWidth') {\n const name = `--${BORDER_WIDTH_PREFIX}-elevation-${level}`;\n rootVars[name] = `var(--${BORDER_WIDTH_PREFIX}-${elevationPreset[key]})`;\n }\n\n // drop shadow\n if (key === 'dropShadow') {\n const name = `--${DROP_SHADOW_PREFIX}-elevation-${level}`;\n const configValue = elevationPreset[key];\n\n rootVars[name] = Array.isArray(configValue)\n ? configValue\n .map((preset, index) =>\n getShadowLayerValue({\n preset,\n prefix: index > 0 ? `${index + 1}` : undefined,\n shadowType: 'drop',\n }),\n )\n .join(', ')\n : `var(--${DROP_SHADOW_PREFIX}-${elevationPreset[key]})`;\n }\n\n // inset shadow\n if (key === 'insetShadow') {\n const name = `--${INSET_SHADOW_PREFIX}-elevation-${level}`;\n const configValue = elevationPreset[key];\n\n rootVars[name] = Array.isArray(configValue)\n ? configValue\n .map((preset, index) =>\n getShadowLayerValue({\n preset,\n prefix: index > 0 ? `${index + 1}` : undefined,\n shadowType: 'inset',\n }),\n )\n .join(', ')\n : `var(--${INSET_SHADOW_PREFIX}-${elevationPreset[key]})`;\n }\n\n // background blur radius\n if (key === 'backgroundBlurRadius') {\n const name = `--${BACKGROUND_BLUR_RADIUS_PREFIX}-elevation-${level}`;\n rootVars[name] = `blur(${elevationPreset[key]}px)`;\n }\n\n // background blur fallback value\n if (key === 'fallbackBlurredBackgroundValue') {\n const { r, g, b } = elevationPreset[key];\n const name = `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}-elevation-${level}`;\n rootVars[name] = `rgb(${r}, ${g}, ${b})`;\n }\n });\n }\n });\n\n rootVars[`--${OUTLINE_PREFIX}-offset`] = focusRingConfig ? `${focusRingConfig.offset}px` : '2px';\n rootVars[`--${OUTLINE_PREFIX}-width`] = focusRingConfig ? `${focusRingConfig.width}px` : '2px';\n rootVars[`--${OUTLINE_PREFIX}-style`] = 'solid';\n rootVars[`--${OUTLINE_PREFIX}-color`] = focusRingConfig\n ? resolveFocusRingColor(focusRingConfig.color)\n : `rgb(var(--${SPECTRUM_COLOR_PREFIX}-gray-15))`;\n\n return {\n _vars: rootVars,\n _raw: colors,\n tailwindConfig,\n };\n}\n\nfunction transformNumericToPx<T extends Record<string, number>>(prefix: string, config: T) {\n if (!config) {\n return {\n _vars: {} as Record<string, string>,\n _raw: {} as Record<string, number>,\n tailwindConfig: {} as Record<string, string>,\n };\n }\n const rootVars: Record<string, string> = {};\n const tailwindConfig = {} as Record<string, string>;\n for (const [variant, value] of entries(config)) {\n const rootVarKey = `--${prefix}-${variant}`;\n const rootVarValue = `${value}px`;\n rootVars[rootVarKey] = rootVarValue;\n tailwindConfig[variant] = `var(${rootVarKey})`;\n }\n return {\n _vars: rootVars,\n _raw: config,\n tailwindConfig,\n };\n}\n\ntype WebTokens = Omit<UniversalTokensConfig, 'colorMode' | 'scaleMode' | 'fontFamily'> & {\n colorMode: Record<ColorMode, ReturnType<typeof transformColors>>;\n scaleMode: Record<\n ScaleMode,\n {\n borderRadius: ReturnType<typeof transformNumericToPx>;\n borderWidth: ReturnType<typeof transformNumericToPx>;\n avatarSizes: ReturnType<typeof transformNumericToPx>;\n iconSizes: ReturnType<typeof transformNumericToPx>;\n }\n >;\n};\n\nfunction getElevationPresetsForColorMode(\n colorMode: ColorMode,\n config: UniversalTokensConfig,\n): ColorModeElevationPresets {\n if (!config.elevation) {\n return {};\n }\n\n const result: ColorModeElevationPresets = {};\n\n entries(config.elevation).forEach(([level, levelPreset]) => {\n result[level] = levelPreset[colorMode];\n });\n\n return result;\n}\n\nexport function parseTokens(config: UniversalTokensConfig): WebTokens {\n const { colorMode, scaleMode } = config;\n\n return {\n ...config,\n colorMode: {\n light: transformColors(\n colorMode.light,\n getElevationPresetsForColorMode('light', config),\n config.focusRing?.light,\n ),\n dark: transformColors(\n colorMode.dark,\n getElevationPresetsForColorMode('dark', config),\n config.focusRing?.dark,\n ),\n },\n scaleMode: mapValues(scaleMode, ({ borderRadius, borderWidth, avatarSizes, iconSizes }) => {\n return {\n borderRadius: transformNumericToPx(BORDER_RADIUS_PREFIX, borderRadius),\n borderWidth: transformNumericToPx(BORDER_WIDTH_PREFIX, borderWidth),\n avatarSizes: transformNumericToPx(AVATAR_SIZE_PREFIX, avatarSizes),\n iconSizes: transformNumericToPx(ICON_SIZE_PREFIX, iconSizes),\n };\n }),\n };\n}\n\nexport { type WebTokens };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"parseTokens.js","names":[],"sources":["../../src/utils/parseTokens.ts"],"sourcesContent":["import type { UniversalTokensConfig } from '@yahoo/uds-config';\nimport {\n AVATAR_SIZE_PREFIX,\n BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX,\n BACKGROUND_BLUR_RADIUS_PREFIX,\n BACKGROUND_COLOR_PREFIX,\n BORDER_RADIUS_PREFIX,\n BORDER_WIDTH_PREFIX,\n DROP_SHADOW_PREFIX,\n getShadowLayerValue,\n ICON_SIZE_PREFIX,\n INSET_SHADOW_PREFIX,\n LINE_COLOR_PREFIX,\n OUTLINE_PREFIX,\n SPECTRUM_COLOR_PREFIX,\n UDS_PREFIX,\n} from '@yahoo/uds-css-tokens';\nimport { alwaysPalette } from '@yahoo/uds-palette';\nimport type {\n ColorMode,\n ColorsConfig,\n ElevationLevel,\n ElevationPreset,\n FocusRingColor,\n FocusRingConfig,\n Hue,\n HueStep,\n OpacityStep,\n PaletteConfig,\n PaletteType,\n ScaleMode,\n} from '@yahoo/uds-types';\n\nimport { entries } from './entries';\nimport { mapValues } from './mapValues';\nimport { parseOpacityStep } from './opacity';\n\n/** Converts a SpectrumValueEntry to a space-separated RGB string for CSS variables. */\nfunction spectrumValueToRgbString(value: { rgb: { r: number; g: number; b: number } }): string {\n const { r, g, b } = value.rgb;\n return `${r} ${g} ${b}`;\n}\n\nfunction shouldIncludeOpacity(opacity: OpacityStep | undefined): boolean {\n if (!opacity) {\n return false;\n }\n\n const parsedOpacity = parseInt(opacity, 10);\n return !isNaN(parsedOpacity) && parsedOpacity !== 100;\n}\n\nfunction formatColorVarWithOpacity(name: string, opacity: OpacityStep | undefined): string {\n return shouldIncludeOpacity(opacity) ? `rgb(var(${name}) / ${opacity}%)` : `rgb(var(${name}))`;\n}\n\ntype ColorModeElevationPresets = Partial<Record<ElevationLevel, ElevationPreset>>;\n\nfunction resolveFocusRingColor(color: FocusRingColor): string {\n switch (color.type) {\n case 'spectrum':\n return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${color.value.hue}-${color.value.step}))`;\n case 'line':\n return `rgb(var(--${LINE_COLOR_PREFIX}-${color.value}))`;\n case 'always':\n return alwaysPalette[color.value as keyof typeof alwaysPalette];\n default:\n return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-gray-15))`;\n }\n}\n\nfunction transformColors(\n colors: ColorsConfig,\n elevationPresets: ColorModeElevationPresets,\n focusRingConfig?: FocusRingConfig,\n) {\n const { palette, spectrum } = colors;\n const rootVars: Record<string, string> = {};\n const tailwindConfig = {\n spectrum: {} as Record<Hue, Record<HueStep, string>>,\n palette: {} as {\n [key in PaletteType]: Record<keyof PaletteConfig[key], string>;\n },\n };\n\n for (const [hue, hueSteps] of entries(spectrum)) {\n for (const [hueStep, value] of entries(hueSteps)) {\n const name = `${hue}-${hueStep}`;\n const varKey = `--${SPECTRUM_COLOR_PREFIX}-${name}`;\n if (!tailwindConfig.spectrum[hue]) {\n tailwindConfig.spectrum[hue] = {} as Record<HueStep, string>;\n }\n tailwindConfig.spectrum[hue][hueStep] = `rgb(var(${varKey}))`;\n rootVars[varKey] = spectrumValueToRgbString(value);\n }\n }\n\n entries(palette).forEach(([paletteType, paletteConfig]) => {\n for (const [paletteKey, { hue, step, opacity }] of Object.entries(paletteConfig)) {\n if (!(paletteType in tailwindConfig.palette)) {\n // @ts-expect-error we fill this object later\n tailwindConfig.palette[paletteType] = {};\n }\n const name = `--${UDS_PREFIX}-${paletteType}-color-${paletteKey}`;\n rootVars[name] = `var(--${SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;\n const opacityValue = opacity !== undefined ? parseOpacityStep(opacity) : undefined;\n // @ts-expect-error this is fine\n tailwindConfig.palette[paletteType][paletteKey] = formatColorVarWithOpacity(\n name,\n opacityValue,\n );\n }\n });\n\n // Elevation levels\n entries(elevationPresets).forEach(([level, elevationPreset]) => {\n if (elevationPreset) {\n entries(elevationPreset).forEach(([key]) => {\n // background color\n if (key === 'finalBackgroundValue') {\n const { r, g, b, a } = elevationPreset[key];\n const alpha = parseInt(a) / 100;\n const name = `--${BACKGROUND_COLOR_PREFIX}-elevation-${level}`;\n rootVars[name] = `rgba(${r}, ${g}, ${b}, ${alpha})`;\n }\n\n // border color\n if (key === 'borderColor') {\n const name = `--${LINE_COLOR_PREFIX}-elevation-${level}`;\n\n switch (elevationPreset[key].type) {\n case 'always':\n rootVars[name] = alwaysPalette[elevationPreset[key].value];\n break;\n case 'spectrum':\n rootVars[name] =\n `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;\n break;\n case 'line': {\n const lineColor = palette.line[elevationPreset[key].value];\n const opacityValue =\n lineColor.opacity !== undefined ? parseOpacityStep(lineColor.opacity) : undefined;\n\n rootVars[name] = formatColorVarWithOpacity(\n `--${LINE_COLOR_PREFIX}-${elevationPreset[key].value}`,\n opacityValue,\n );\n break;\n }\n }\n }\n\n // border width\n if (key === 'borderWidth') {\n const name = `--${BORDER_WIDTH_PREFIX}-elevation-${level}`;\n rootVars[name] = `var(--${BORDER_WIDTH_PREFIX}-${elevationPreset[key]})`;\n }\n\n // drop shadow\n if (key === 'dropShadow') {\n const name = `--${DROP_SHADOW_PREFIX}-elevation-${level}`;\n const configValue = elevationPreset[key];\n\n rootVars[name] = Array.isArray(configValue)\n ? configValue\n .map((preset, index) =>\n getShadowLayerValue({\n preset,\n prefix: index > 0 ? `${index + 1}` : undefined,\n shadowType: 'drop',\n }),\n )\n .join(', ')\n : `var(--${DROP_SHADOW_PREFIX}-${elevationPreset[key]})`;\n }\n\n // inset shadow\n if (key === 'insetShadow') {\n const name = `--${INSET_SHADOW_PREFIX}-elevation-${level}`;\n const configValue = elevationPreset[key];\n\n rootVars[name] = Array.isArray(configValue)\n ? configValue\n .map((preset, index) =>\n getShadowLayerValue({\n preset,\n prefix: index > 0 ? `${index + 1}` : undefined,\n shadowType: 'inset',\n }),\n )\n .join(', ')\n : `var(--${INSET_SHADOW_PREFIX}-${elevationPreset[key]})`;\n }\n\n // background blur radius\n if (key === 'backgroundBlurRadius') {\n const name = `--${BACKGROUND_BLUR_RADIUS_PREFIX}-elevation-${level}`;\n rootVars[name] = `blur(${elevationPreset[key]}px)`;\n }\n\n // background blur fallback value\n if (key === 'fallbackBlurredBackgroundValue') {\n const { r, g, b } = elevationPreset[key];\n const name = `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}-elevation-${level}`;\n rootVars[name] = `rgb(${r}, ${g}, ${b})`;\n }\n });\n }\n });\n\n rootVars[`--${OUTLINE_PREFIX}-offset`] = focusRingConfig ? `${focusRingConfig.offset}px` : '2px';\n rootVars[`--${OUTLINE_PREFIX}-width`] = focusRingConfig ? `${focusRingConfig.width}px` : '2px';\n rootVars[`--${OUTLINE_PREFIX}-style`] = 'solid';\n rootVars[`--${OUTLINE_PREFIX}-color`] = focusRingConfig\n ? resolveFocusRingColor(focusRingConfig.color)\n : `rgb(var(--${SPECTRUM_COLOR_PREFIX}-gray-15))`;\n\n return {\n _vars: rootVars,\n _raw: colors,\n tailwindConfig,\n };\n}\n\nfunction transformNumericToPx<T extends Record<string, number>>(prefix: string, config: T) {\n if (!config) {\n return {\n _vars: {} as Record<string, string>,\n _raw: {} as Record<string, number>,\n tailwindConfig: {} as Record<string, string>,\n };\n }\n const rootVars: Record<string, string> = {};\n const tailwindConfig = {} as Record<string, string>;\n for (const [variant, value] of entries(config)) {\n const rootVarKey = `--${prefix}-${variant}`;\n const rootVarValue = `${value}px`;\n rootVars[rootVarKey] = rootVarValue;\n tailwindConfig[variant] = `var(${rootVarKey})`;\n }\n return {\n _vars: rootVars,\n _raw: config,\n tailwindConfig,\n };\n}\n\ntype WebTokens = Omit<UniversalTokensConfig, 'colorMode' | 'scaleMode' | 'fontFamily'> & {\n colorMode: Record<ColorMode, ReturnType<typeof transformColors>>;\n scaleMode: Record<\n ScaleMode,\n {\n borderRadius: ReturnType<typeof transformNumericToPx>;\n borderWidth: ReturnType<typeof transformNumericToPx>;\n avatarSizes: ReturnType<typeof transformNumericToPx>;\n iconSizes: ReturnType<typeof transformNumericToPx>;\n }\n >;\n};\n\nfunction getElevationPresetsForColorMode(\n colorMode: ColorMode,\n config: UniversalTokensConfig,\n): ColorModeElevationPresets {\n if (!config.elevation) {\n return {};\n }\n\n const result: ColorModeElevationPresets = {};\n\n entries(config.elevation).forEach(([level, levelPreset]) => {\n result[level] = levelPreset[colorMode];\n });\n\n return result;\n}\n\nexport function parseTokens(config: UniversalTokensConfig): WebTokens {\n const { colorMode, scaleMode } = config;\n\n return {\n ...config,\n colorMode: {\n light: transformColors(\n colorMode.light,\n getElevationPresetsForColorMode('light', config),\n config.focusRing?.light,\n ),\n dark: transformColors(\n colorMode.dark,\n getElevationPresetsForColorMode('dark', config),\n config.focusRing?.dark,\n ),\n },\n scaleMode: mapValues(scaleMode, ({ borderRadius, borderWidth, avatarSizes, iconSizes }) => {\n return {\n borderRadius: transformNumericToPx(BORDER_RADIUS_PREFIX, borderRadius),\n borderWidth: transformNumericToPx(BORDER_WIDTH_PREFIX, borderWidth),\n avatarSizes: transformNumericToPx(AVATAR_SIZE_PREFIX, avatarSizes),\n iconSizes: transformNumericToPx(ICON_SIZE_PREFIX, iconSizes),\n };\n }),\n };\n}\n\nexport { type WebTokens };\n"],"mappings":"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"}
|