@yahoo/uds 3.100.0-beta.2 → 3.100.0-beta.3

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.
Files changed (27) hide show
  1. package/dist/automated-config/dist/generated/generatedConfigs.cjs +2 -2
  2. package/dist/automated-config/dist/generated/generatedConfigs.d.cts +1 -1
  3. package/dist/automated-config/dist/generated/generatedConfigs.d.ts +1 -1
  4. package/dist/automated-config/dist/generated/generatedConfigs.js +2 -2
  5. package/dist/automated-config/dist/properties.cjs +6 -1
  6. package/dist/automated-config/dist/properties.d.cts +2 -2
  7. package/dist/automated-config/dist/properties.d.ts +2 -2
  8. package/dist/automated-config/dist/properties.js +6 -1
  9. package/dist/automated-config/dist/utils/index.cjs +4 -4
  10. package/dist/automated-config/dist/utils/index.d.cts +1 -1
  11. package/dist/automated-config/dist/utils/index.d.ts +1 -1
  12. package/dist/automated-config/dist/utils/index.js +4 -4
  13. package/dist/components/client/Tooltip/TooltipContent.cjs +3 -4
  14. package/dist/components/client/Tooltip/TooltipContent.js +3 -4
  15. package/dist/components/client/Tooltip/useTooltipContent.cjs +1 -14
  16. package/dist/components/client/Tooltip/useTooltipContent.d.cts +0 -2
  17. package/dist/components/client/Tooltip/useTooltipContent.d.ts +0 -2
  18. package/dist/components/client/Tooltip/useTooltipContent.js +1 -14
  19. package/dist/runtime/tooltipConfig.cjs +1 -19
  20. package/dist/runtime/tooltipConfig.d.cts +2 -4
  21. package/dist/runtime/tooltipConfig.d.ts +2 -4
  22. package/dist/runtime/tooltipConfig.js +1 -19
  23. package/dist/styles/styler.d.cts +34 -34
  24. package/dist/styles/styler.d.ts +34 -34
  25. package/dist/tailwind/utils/getTailwindAsUdsColors.d.cts +1 -1
  26. package/dist/tailwind/utils/getTailwindAsUdsColors.d.ts +1 -1
  27. package/package.json +1 -1
package/dist/automated-config/dist/generated/generatedConfigs.cjs CHANGED
@@ -30702,8 +30702,8 @@ const TooltipConfig = {
30702
30702
  defaults: { default: 0 },
30703
30703
  label: "background blur radius",
30704
30704
  layerReference: {
30705
- layerName: "svg",
30706
- propertyName: "backgroundColor"
30705
+ propertyName: "backgroundColor",
30706
+ variablePath: "variant/default/svg"
30707
30707
  },
30708
30708
  name: "backdropBlur",
30709
30709
  typeOfFixture: ["positiveIntegers"],
package/dist/automated-config/dist/generated/generatedConfigs.d.cts CHANGED
@@ -3385,8 +3385,8 @@ declare const TooltipConfig: {
3385
3385
  };
3386
3386
  readonly label: "background blur radius";
3387
3387
  readonly layerReference: {
3388
- readonly layerName: "svg";
3389
3388
  readonly propertyName: "backgroundColor";
3389
+ readonly variablePath: "variant/default/svg";
3390
3390
  };
3391
3391
  readonly name: "backdropBlur";
3392
3392
  readonly typeOfFixture: readonly ["positiveIntegers"];
package/dist/automated-config/dist/generated/generatedConfigs.d.ts CHANGED
@@ -3385,8 +3385,8 @@ declare const TooltipConfig: {
3385
3385
  };
3386
3386
  readonly label: "background blur radius";
3387
3387
  readonly layerReference: {
3388
- readonly layerName: "svg";
3389
3388
  readonly propertyName: "backgroundColor";
3389
+ readonly variablePath: "variant/default/svg";
3390
3390
  };
3391
3391
  readonly name: "backdropBlur";
3392
3392
  readonly typeOfFixture: readonly ["positiveIntegers"];
package/dist/automated-config/dist/generated/generatedConfigs.js CHANGED
@@ -30701,8 +30701,8 @@ const TooltipConfig = {
30701
30701
  defaults: { default: 0 },
30702
30702
  label: "background blur radius",
30703
30703
  layerReference: {
30704
- layerName: "svg",
30705
- propertyName: "backgroundColor"
30704
+ propertyName: "backgroundColor",
30705
+ variablePath: "variant/default/svg"
30706
30706
  },
30707
30707
  name: "backdropBlur",
30708
30708
  typeOfFixture: ["positiveIntegers"],
package/dist/automated-config/dist/properties.cjs CHANGED
@@ -402,7 +402,12 @@ const publicProperties = {
402
402
  twThemePath: () => {
403
403
  return ``;
404
404
  },
405
- customValueRenderer: (schemaValue) => {
405
+ customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
406
+ if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
407
+ const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
408
+ const property = schema.variables[variablePath][propertyName].rest;
409
+ if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
410
+ }
406
411
  return `blur(${schemaValue.value}px)`;
407
412
  }
408
413
  },
package/dist/automated-config/dist/properties.d.cts CHANGED
@@ -18,7 +18,7 @@ interface ConfigurableProperty<T extends AllPossibleProperties, CVR = unknown> {
18
18
  twThemePath: (fixtureType: T, value: string) => string;
19
19
  possibleFixtures: readonly T[];
20
20
  extendedProperties?: ExtendablePropertiesName[] | ((context: ComponentConfigContext) => ExtendablePropertiesName[] | undefined | false);
21
- customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string) => string;
21
+ customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string, originalPropertyDefinition?: SelectedConfigurableProperty<ConfigurablePropertiesName, any>) => string;
22
22
  concatenate?: boolean;
23
23
  concatenationDelimiter?: string;
24
24
  }
@@ -113,7 +113,7 @@ interface SelectedConfigurableProperty<C extends ConfigurablePropertiesName, O e
113
113
  pseudoStates?: PossibleStates[];
114
114
  supportsCustom?: boolean;
115
115
  layerReference?: {
116
- layerName: string;
116
+ variablePath: string;
117
117
  propertyName: string;
118
118
  };
119
119
  defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };
package/dist/automated-config/dist/properties.d.ts CHANGED
@@ -18,7 +18,7 @@ interface ConfigurableProperty<T extends AllPossibleProperties, CVR = unknown> {
18
18
  twThemePath: (fixtureType: T, value: string) => string;
19
19
  possibleFixtures: readonly T[];
20
20
  extendedProperties?: ExtendablePropertiesName[] | ((context: ComponentConfigContext) => ExtendablePropertiesName[] | undefined | false);
21
- customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string) => string;
21
+ customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string, originalPropertyDefinition?: SelectedConfigurableProperty<ConfigurablePropertiesName, any>) => string;
22
22
  concatenate?: boolean;
23
23
  concatenationDelimiter?: string;
24
24
  }
@@ -113,7 +113,7 @@ interface SelectedConfigurableProperty<C extends ConfigurablePropertiesName, O e
113
113
  pseudoStates?: PossibleStates[];
114
114
  supportsCustom?: boolean;
115
115
  layerReference?: {
116
- layerName: string;
116
+ variablePath: string;
117
117
  propertyName: string;
118
118
  };
119
119
  defaults: { [K in O]: V[number][number] | (Extract<T[number], ArbitraryFixtures> extends never ? never : InferArbitraryType<Extract<T[number], ArbitraryFixtures>>) };
package/dist/automated-config/dist/properties.js CHANGED
@@ -402,7 +402,12 @@ const publicProperties = {
402
402
  twThemePath: () => {
403
403
  return ``;
404
404
  },
405
- customValueRenderer: (schemaValue) => {
405
+ customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
406
+ if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
407
+ const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
408
+ const property = schema.variables[variablePath][propertyName].rest;
409
+ if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
410
+ }
406
411
  return `blur(${schemaValue.value}px)`;
407
412
  }
408
413
  },
package/dist/automated-config/dist/utils/index.cjs CHANGED
@@ -115,11 +115,11 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
115
115
  if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
116
116
  return className.replaceAll(/\s+/g, "-");
117
117
  }
118
- const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue) => {
118
+ const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
119
119
  const { value, type } = schemaStateValue;
120
120
  const propertyConfig = require_properties.configurableProperties[propertyName];
121
121
  let newValue;
122
- if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme);
122
+ if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme, originalPropertyDefinition);
123
123
  else {
124
124
  const safeTwThemePath = propertyConfig.twThemePath;
125
125
  newValue = theme(safeTwThemePath(type, String(value)));
@@ -222,10 +222,10 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
222
222
  }
223
223
  } else if (typeof cssProperties === "string") {
224
224
  const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
225
- cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
225
+ cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
226
226
  } else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
227
227
  const existingValue = currentStyles?.[fullClassName]?.[cssProp];
228
- cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
228
+ cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
229
229
  }
230
230
  /**
231
231
  * Button root layer workarounds & enhancements.
package/dist/automated-config/dist/utils/index.d.cts CHANGED
@@ -94,7 +94,7 @@ declare function createConfigurableProperty<C extends ConfigurablePropertiesName
94
94
  pseudoStates?: PossibleStates[];
95
95
  supportsCustom?: boolean;
96
96
  layerReference?: {
97
- layerName: string;
97
+ variablePath: string;
98
98
  propertyName: string;
99
99
  };
100
100
  }): SelectedConfigurableProperty<C, O, T, V>;
package/dist/automated-config/dist/utils/index.d.ts CHANGED
@@ -94,7 +94,7 @@ declare function createConfigurableProperty<C extends ConfigurablePropertiesName
94
94
  pseudoStates?: PossibleStates[];
95
95
  supportsCustom?: boolean;
96
96
  layerReference?: {
97
- layerName: string;
97
+ variablePath: string;
98
98
  propertyName: string;
99
99
  };
100
100
  }): SelectedConfigurableProperty<C, O, T, V>;
package/dist/automated-config/dist/utils/index.js CHANGED
@@ -111,11 +111,11 @@ function generateClassName({ componentName, subComponentName, variantKey, varian
111
111
  if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
112
112
  return className.replaceAll(/\s+/g, "-");
113
113
  }
114
- const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue) => {
114
+ const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
115
115
  const { value, type } = schemaStateValue;
116
116
  const propertyConfig = configurableProperties[propertyName];
117
117
  let newValue;
118
- if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme);
118
+ if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme, originalPropertyDefinition);
119
119
  else {
120
120
  const safeTwThemePath = propertyConfig.twThemePath;
121
121
  newValue = theme(safeTwThemePath(type, String(value)));
@@ -218,10 +218,10 @@ function generateDeclaration({ componentName, subComponentName, variantKey, vari
218
218
  }
219
219
  } else if (typeof cssProperties === "string") {
220
220
  const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
221
- cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
221
+ cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
222
222
  } else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
223
223
  const existingValue = currentStyles?.[fullClassName]?.[cssProp];
224
- cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue);
224
+ cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
225
225
  }
226
226
  /**
227
227
  * Button root layer workarounds & enhancements.
package/dist/components/client/Tooltip/TooltipContent.cjs CHANGED
@@ -23,17 +23,16 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
23
23
  const currentPlacement = (0, _ariakit_react.useStoreState)(store, "currentPlacement");
24
24
  const placement = (0, _ariakit_react.useStoreState)(store, "placement");
25
25
  const effectivePlacement = currentPlacement ?? placement ?? "top";
26
- const { backdropBlur, borderRadius } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig();
26
+ const { borderRadius } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig();
27
27
  const defaultBorderRadius = borderRadius["default"];
28
28
  const arrowRef = (0, react.useRef)(null);
29
- const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, colorScheme, tooltipShift, onPositionUpdate } = require_components_client_Tooltip_useTooltipContent.useTooltipContent({
29
+ const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, tooltipShift, onPositionUpdate } = require_components_client_Tooltip_useTooltipContent.useTooltipContent({
30
30
  open: open ?? false,
31
31
  effectivePlacement,
32
32
  maxWidth,
33
33
  borderRadius: defaultBorderRadius,
34
34
  arrowRef
35
35
  });
36
- const defaultBackdropBlur = backdropBlur["default"][colorScheme];
37
36
  const mergedRef = require_hooks_useForkRef.useForkRef(ref, internalRef);
38
37
  const classNames = {
39
38
  root: require_styles_styler.getStyles({
@@ -69,7 +68,7 @@ const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children,
69
68
  updatePosition: onPositionUpdate,
70
69
  style: tooltipShift.x !== 0 || tooltipShift.y !== 0 ? { transform: `translate(${tooltipShift.x}px, ${tooltipShift.y}px)` } : void 0,
71
70
  children: [
72
- defaultBackdropBlur > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
71
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
73
72
  className: classNames.blur,
74
73
  style: {
75
74
  ...blurStyle,
package/dist/components/client/Tooltip/TooltipContent.js CHANGED
@@ -21,17 +21,16 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
21
21
  const currentPlacement = useStoreState(store, "currentPlacement");
22
22
  const placement = useStoreState(store, "placement");
23
23
  const effectivePlacement = currentPlacement ?? placement ?? "top";
24
- const { backdropBlur, borderRadius } = useTooltipConfig();
24
+ const { borderRadius } = useTooltipConfig();
25
25
  const defaultBorderRadius = borderRadius["default"];
26
26
  const arrowRef = useRef(null);
27
- const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, colorScheme, tooltipShift, onPositionUpdate } = useTooltipContent({
27
+ const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, tooltipShift, onPositionUpdate } = useTooltipContent({
28
28
  open: open ?? false,
29
29
  effectivePlacement,
30
30
  maxWidth,
31
31
  borderRadius: defaultBorderRadius,
32
32
  arrowRef
33
33
  });
34
- const defaultBackdropBlur = backdropBlur["default"][colorScheme];
35
34
  const mergedRef = useForkRef(ref, internalRef);
36
35
  const classNames = {
37
36
  root: getStyles({
@@ -67,7 +66,7 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
67
66
  updatePosition: onPositionUpdate,
68
67
  style: tooltipShift.x !== 0 || tooltipShift.y !== 0 ? { transform: `translate(${tooltipShift.x}px, ${tooltipShift.y}px)` } : void 0,
69
68
  children: [
70
- defaultBackdropBlur > 0 && /* @__PURE__ */ jsx(Box, {
69
+ /* @__PURE__ */ jsx(Box, {
71
70
  className: classNames.blur,
72
71
  style: {
73
72
  ...blurStyle,
package/dist/components/client/Tooltip/useTooltipContent.cjs CHANGED
@@ -48,13 +48,6 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
48
48
  return Math.max(max, extentX, extentY);
49
49
  }, 0);
50
50
  }, [shadows]);
51
- const [colorScheme, setColorScheme] = (0, react.useState)("light");
52
- const readColorScheme = (0, react.useCallback)(() => {
53
- const el = internalRef.current;
54
- if (!el) return;
55
- const scheme = getComputedStyle(el).colorScheme;
56
- setColorScheme(scheme === "dark" ? "dark" : "light");
57
- }, []);
58
51
  const [arrowCenter, setArrowCenter] = (0, react.useState)(void 0);
59
52
  const computeArrowCenter = (0, react.useCallback)(() => {
60
53
  const arrowEl = arrowRef.current;
@@ -79,15 +72,10 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
79
72
  };
80
73
  });
81
74
  readShadows();
82
- readColorScheme();
83
75
  }
84
76
  const next = computeArrowCenter();
85
77
  if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
86
- }, [
87
- computeArrowCenter,
88
- readShadows,
89
- readColorScheme
90
- ]);
78
+ }, [computeArrowCenter, readShadows]);
91
79
  const svgPath = (0, react.useMemo)(() => {
92
80
  return dimensions.width > 0 && dimensions.height > 0 ? require_components_client_Tooltip_util.generateTooltipPath({
93
81
  width: dimensions.width,
@@ -171,7 +159,6 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
171
159
  opacity: visible ? 1 : 0,
172
160
  transition: "opacity 200ms ease-in-out"
173
161
  },
174
- colorScheme,
175
162
  tooltipShift: (0, react.useMemo)(() => {
176
163
  if (arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
177
164
  x: 0,
package/dist/components/client/Tooltip/useTooltipContent.d.cts CHANGED
@@ -34,8 +34,6 @@ interface UseTooltipContentReturn {
34
34
  blurStyle: CSSProperties;
35
35
  visible: boolean;
36
36
  childTransitionStyle: CSSProperties;
37
- /** Resolved CSS `color-scheme` of the tooltip element: `'light'` or `'dark'`. */
38
- colorScheme: 'light' | 'dark';
39
37
  /**
40
38
  * Pixel offset to apply as a CSS transform on the tooltip element so that
41
39
  * the (clamped) SVG arrow aligns with the trigger center even when the
package/dist/components/client/Tooltip/useTooltipContent.d.ts CHANGED
@@ -34,8 +34,6 @@ interface UseTooltipContentReturn {
34
34
  blurStyle: CSSProperties;
35
35
  visible: boolean;
36
36
  childTransitionStyle: CSSProperties;
37
- /** Resolved CSS `color-scheme` of the tooltip element: `'light'` or `'dark'`. */
38
- colorScheme: 'light' | 'dark';
39
37
  /**
40
38
  * Pixel offset to apply as a CSS transform on the tooltip element so that
41
39
  * the (clamped) SVG arrow aligns with the trigger center even when the
package/dist/components/client/Tooltip/useTooltipContent.js CHANGED
@@ -46,13 +46,6 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
46
46
  return Math.max(max, extentX, extentY);
47
47
  }, 0);
48
48
  }, [shadows]);
49
- const [colorScheme, setColorScheme] = useState("light");
50
- const readColorScheme = useCallback(() => {
51
- const el = internalRef.current;
52
- if (!el) return;
53
- const scheme = getComputedStyle(el).colorScheme;
54
- setColorScheme(scheme === "dark" ? "dark" : "light");
55
- }, []);
56
49
  const [arrowCenter, setArrowCenter] = useState(void 0);
57
50
  const computeArrowCenter = useCallback(() => {
58
51
  const arrowEl = arrowRef.current;
@@ -77,15 +70,10 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
77
70
  };
78
71
  });
79
72
  readShadows();
80
- readColorScheme();
81
73
  }
82
74
  const next = computeArrowCenter();
83
75
  if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
84
- }, [
85
- computeArrowCenter,
86
- readShadows,
87
- readColorScheme
88
- ]);
76
+ }, [computeArrowCenter, readShadows]);
89
77
  const svgPath = useMemo(() => {
90
78
  return dimensions.width > 0 && dimensions.height > 0 ? generateTooltipPath({
91
79
  width: dimensions.width,
@@ -169,7 +157,6 @@ function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, a
169
157
  opacity: visible ? 1 : 0,
170
158
  transition: "opacity 200ms ease-in-out"
171
159
  },
172
- colorScheme,
173
160
  tooltipShift: useMemo(() => {
174
161
  if (arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
175
162
  x: 0,
package/dist/runtime/tooltipConfig.cjs CHANGED
@@ -4,7 +4,6 @@ const require_tokens_utils_fromEntries = require('../tokens/utils/fromEntries.cj
4
4
 
5
5
  //#region src/runtime/tooltipConfig.ts
6
6
  const tooltipSizes = ["default"];
7
- const tooltipVariants = ["default"];
8
7
  const placementMap = {
9
8
  top: "top",
10
9
  bottom: "bottom",
@@ -19,28 +18,11 @@ const placementMap = {
19
18
  "end-top": "right-start",
20
19
  "end-bottom": "right-end"
21
20
  };
22
- const configToTooltipConfigContext = ({ tooltip, scaleMode, elevation }) => {
23
- const backdropBlur = require_tokens_utils_fromEntries.fromEntries(tooltipVariants.map((v) => {
24
- const bgColor = tooltip.variables[`variant/${v}/svg`].backgroundColor.rest;
25
- if (bgColor.type === "elevationAliases") {
26
- const level = bgColor.value.replace("elevation-", "");
27
- return [v, {
28
- light: elevation[level].light.backgroundBlurRadius,
29
- dark: elevation[level].dark.backgroundBlurRadius
30
- }];
31
- }
32
- const value = tooltip.variables[`variant/${v}/blur`].backdropBlur.rest.value;
33
- return [v, {
34
- light: value,
35
- dark: value
36
- }];
37
- }));
21
+ const configToTooltipConfigContext = ({ tooltip, scaleMode }) => {
38
22
  const borderRadius = require_tokens_utils_fromEntries.fromEntries(tooltipSizes.map((s) => [s, scaleMode.medium.borderRadius[tooltip.variables[`size/${s}/svg`].borderRadius.rest.value]]));
39
- if (Object.values(backdropBlur).some((b) => typeof b.light !== "number" || typeof b.dark !== "number")) throw new Error("backdropBlur is not a number");
40
23
  if (Object.values(borderRadius).some((b) => typeof b !== "number")) throw new Error("borderRadius is not a number");
41
24
  return {
42
25
  animationDuration: 200,
43
- backdropBlur,
44
26
  borderRadius,
45
27
  placementMap
46
28
  };
package/dist/runtime/tooltipConfig.d.cts CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- import { ColorMode, TooltipPlacement, TooltipSize, TooltipVariant } from "../types/dist/index.cjs";
2
+ import { TooltipPlacement, TooltipSize } from "../types/dist/index.cjs";
3
3
  import { UniversalTokensConfig } from "../config/dist/index.cjs";
4
4
  import "../tokens/index.cjs";
5
5
  import { TooltipProviderProps } from "@ariakit/react";
@@ -8,14 +8,12 @@ import { TooltipProviderProps } from "@ariakit/react";
8
8
  type TooltipPlacementMap = Record<TooltipPlacement, TooltipProviderProps['placement']>;
9
9
  interface UDSTooltipConfigContextType {
10
10
  animationDuration: number;
11
- backdropBlur: Record<TooltipVariant, Record<ColorMode, number>>;
12
11
  borderRadius: Record<TooltipSize, number>;
13
12
  placementMap: TooltipPlacementMap;
14
13
  }
15
14
  declare const configToTooltipConfigContext: ({
16
15
  tooltip,
17
- scaleMode,
18
- elevation
16
+ scaleMode
19
17
  }: UniversalTokensConfig) => UDSTooltipConfigContextType;
20
18
  //#endregion
21
19
  export { type UDSTooltipConfigContextType, configToTooltipConfigContext };
package/dist/runtime/tooltipConfig.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- import { ColorMode, TooltipPlacement, TooltipSize, TooltipVariant } from "../types/dist/index.js";
2
+ import { TooltipPlacement, TooltipSize } from "../types/dist/index.js";
3
3
  import { UniversalTokensConfig } from "../config/dist/index.js";
4
4
  import "../tokens/index.js";
5
5
  import { TooltipProviderProps } from "@ariakit/react";
@@ -8,14 +8,12 @@ import { TooltipProviderProps } from "@ariakit/react";
8
8
  type TooltipPlacementMap = Record<TooltipPlacement, TooltipProviderProps['placement']>;
9
9
  interface UDSTooltipConfigContextType {
10
10
  animationDuration: number;
11
- backdropBlur: Record<TooltipVariant, Record<ColorMode, number>>;
12
11
  borderRadius: Record<TooltipSize, number>;
13
12
  placementMap: TooltipPlacementMap;
14
13
  }
15
14
  declare const configToTooltipConfigContext: ({
16
15
  tooltip,
17
- scaleMode,
18
- elevation
16
+ scaleMode
19
17
  }: UniversalTokensConfig) => UDSTooltipConfigContextType;
20
18
  //#endregion
21
19
  export { type UDSTooltipConfigContextType, configToTooltipConfigContext };
package/dist/runtime/tooltipConfig.js CHANGED
@@ -3,7 +3,6 @@ import { fromEntries } from "../tokens/utils/fromEntries.js";
3
3
 
4
4
  //#region src/runtime/tooltipConfig.ts
5
5
  const tooltipSizes = ["default"];
6
- const tooltipVariants = ["default"];
7
6
  const placementMap = {
8
7
  top: "top",
9
8
  bottom: "bottom",
@@ -18,28 +17,11 @@ const placementMap = {
18
17
  "end-top": "right-start",
19
18
  "end-bottom": "right-end"
20
19
  };
21
- const configToTooltipConfigContext = ({ tooltip, scaleMode, elevation }) => {
22
- const backdropBlur = fromEntries(tooltipVariants.map((v) => {
23
- const bgColor = tooltip.variables[`variant/${v}/svg`].backgroundColor.rest;
24
- if (bgColor.type === "elevationAliases") {
25
- const level = bgColor.value.replace("elevation-", "");
26
- return [v, {
27
- light: elevation[level].light.backgroundBlurRadius,
28
- dark: elevation[level].dark.backgroundBlurRadius
29
- }];
30
- }
31
- const value = tooltip.variables[`variant/${v}/blur`].backdropBlur.rest.value;
32
- return [v, {
33
- light: value,
34
- dark: value
35
- }];
36
- }));
20
+ const configToTooltipConfigContext = ({ tooltip, scaleMode }) => {
37
21
  const borderRadius = fromEntries(tooltipSizes.map((s) => [s, scaleMode.medium.borderRadius[tooltip.variables[`size/${s}/svg`].borderRadius.rest.value]]));
38
- if (Object.values(backdropBlur).some((b) => typeof b.light !== "number" || typeof b.dark !== "number")) throw new Error("backdropBlur is not a number");
39
22
  if (Object.values(borderRadius).some((b) => typeof b !== "number")) throw new Error("borderRadius is not a number");
40
23
  return {
41
24
  animationDuration: 200,
42
- backdropBlur,
43
25
  borderRadius,
44
26
  placementMap
45
27
  };
package/dist/styles/styler.d.cts CHANGED
@@ -17,17 +17,17 @@ declare const getStylesInternal: (props?: ({
17
17
  avatarTextVariantRoot?: "primary" | "secondary" | undefined;
18
18
  badgeSizeIcon?: "xs" | "sm" | "md" | "lg" | undefined;
19
19
  badgeSizeRoot?: "xs" | "sm" | "md" | "lg" | undefined;
20
- badgeVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | undefined;
21
- badgeVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | undefined;
20
+ badgeVariantIcon?: "alert" | "primary" | "secondary" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | undefined;
21
+ badgeVariantRoot?: "alert" | "primary" | "secondary" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | undefined;
22
22
  buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | undefined;
23
23
  buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | undefined;
24
- buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "alert-tertiary" | "brand-tertiary" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
25
- buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "alert-tertiary" | "brand-tertiary" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
24
+ buttonVariantIcon?: "alert" | "primary" | "secondary" | "tertiary" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "alert-tertiary" | "brand-tertiary" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
25
+ buttonVariantRoot?: "alert" | "primary" | "secondary" | "tertiary" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "alert-tertiary" | "brand-tertiary" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
26
26
  checkboxSizeCheckbox?: "sm" | "md" | undefined;
27
27
  checkboxSizeRoot?: "sm" | "md" | undefined;
28
- checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
29
- checkboxVariantCheckboxIcon?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
30
- checkboxVariantRoot?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
28
+ checkboxVariantCheckbox?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
29
+ checkboxVariantCheckboxIcon?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
30
+ checkboxVariantRoot?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
31
31
  checkboxVariantValueCheckbox?: "checked" | "indeterminate" | "unchecked" | undefined;
32
32
  checkboxVariantValueCheckboxIcon?: "checked" | "indeterminate" | "unchecked" | undefined;
33
33
  checkboxVariantValueRoot?: "checked" | "indeterminate" | "unchecked" | undefined;
@@ -103,9 +103,9 @@ declare const getStylesInternal: (props?: ({
103
103
  menuitemSizeStartIcon?: "default" | undefined;
104
104
  radioSizeRadio?: "sm" | "md" | undefined;
105
105
  radioSizeRoot?: "sm" | "md" | undefined;
106
- radioVariantRadio?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
107
- radioVariantRadioCircle?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
108
- radioVariantRoot?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
106
+ radioVariantRadio?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
107
+ radioVariantRadioCircle?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
108
+ radioVariantRoot?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
109
109
  radioVariantValueRadio?: "checked" | "unchecked" | undefined;
110
110
  radioVariantValueRadioCircle?: "checked" | "unchecked" | undefined;
111
111
  radioVariantValueRoot?: "checked" | "unchecked" | undefined;
@@ -139,14 +139,14 @@ declare const getStylesInternal: (props?: ({
139
139
  tooltipVariantIcon?: "default" | undefined;
140
140
  tooltipVariantRoot?: "default" | undefined;
141
141
  tooltipVariantSvg?: "default" | undefined;
142
- color?: "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;
143
- 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;
142
+ color?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | undefined;
143
+ placeholderColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | undefined;
144
144
  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;
145
145
  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;
146
- 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;
146
+ fontWeight?: "black" | "bold" | "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" | "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "extrabold" | undefined;
147
147
  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;
148
148
  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;
149
- textAlign?: "start" | "end" | "center" | "justify" | undefined;
149
+ textAlign?: "center" | "justify" | "start" | "end" | undefined;
150
150
  textTransform?: "none" | "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" | "uppercase" | "lowercase" | "capitalize" | undefined;
151
151
  spacing?: "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;
152
152
  spacingHorizontal?: "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;
@@ -164,50 +164,50 @@ declare const getStylesInternal: (props?: ({
164
164
  offsetTop?: "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;
165
165
  columnGap?: "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;
166
166
  rowGap?: "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;
167
- backgroundColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
168
- borderColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
169
- borderStartColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
170
- borderEndColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
171
- borderBottomColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
172
- borderTopColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
167
+ backgroundColor?: "alert" | "primary" | "secondary" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
168
+ borderColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
169
+ borderStartColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
170
+ borderEndColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
171
+ borderBottomColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
172
+ borderTopColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
173
173
  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
174
174
  borderTopStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
175
175
  borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
176
176
  borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
177
177
  borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
178
- borderWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
179
- borderVerticalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
180
- borderHorizontalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
181
- borderStartWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
182
- borderEndWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
183
- borderTopWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
184
- borderBottomWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
178
+ borderWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
179
+ borderVerticalWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
180
+ borderHorizontalWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
181
+ borderStartWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
182
+ borderEndWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
183
+ borderTopWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
184
+ borderBottomWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
185
185
  avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
186
186
  iconSize?: "xs" | "sm" | "md" | "lg" | undefined;
187
187
  alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
188
188
  alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
189
- alignSelf?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto" | undefined;
190
- flex?: "1" | "none" | "auto" | "initial" | undefined;
189
+ alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
190
+ flex?: "none" | "auto" | "1" | "initial" | undefined;
191
191
  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
192
192
  flexGrow?: "0" | "1" | "2" | "3" | undefined;
193
193
  flexShrink?: "0" | "1" | undefined;
194
194
  flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
195
195
  justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
196
196
  flexBasis?: "min-content" | undefined;
197
- display?: "table" | "flex" | "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;
197
+ display?: "flex" | "none" | "grid" | "table" | "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" | "contents" | undefined;
198
198
  overflow?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
199
199
  overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
200
200
  overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
201
- position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
202
- contentFit?: "fill" | "none" | "cover" | "contain" | "scale-down" | undefined;
201
+ position?: "fixed" | "static" | "absolute" | "relative" | "sticky" | undefined;
202
+ contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
203
203
  colorMode?: "light" | "dark" | undefined;
204
204
  scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
205
205
  width?: "full" | "fit" | "screen" | undefined;
206
206
  height?: "full" | "fit" | "screen" | undefined;
207
- dropShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
207
+ dropShadow?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
208
208
  insetShadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
209
209
  nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
210
- nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
210
+ nestedBorderRadiusWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
211
211
  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;
212
212
  nestedBorderRadius?: boolean | "first" | "last" | undefined;
213
213
  } & {
package/dist/styles/styler.d.ts CHANGED
@@ -17,17 +17,17 @@ declare const getStylesInternal: (props?: ({
17
17
  avatarTextVariantRoot?: "primary" | "secondary" | undefined;
18
18
  badgeSizeIcon?: "xs" | "sm" | "md" | "lg" | undefined;
19
19
  badgeSizeRoot?: "xs" | "sm" | "md" | "lg" | undefined;
20
- badgeVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | undefined;
21
- badgeVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | undefined;
20
+ badgeVariantIcon?: "alert" | "primary" | "secondary" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | undefined;
21
+ badgeVariantRoot?: "alert" | "primary" | "secondary" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | undefined;
22
22
  buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | undefined;
23
23
  buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | undefined;
24
- buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "alert-tertiary" | "brand-tertiary" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
25
- buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "alert-tertiary" | "brand-tertiary" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
24
+ buttonVariantIcon?: "alert" | "primary" | "secondary" | "tertiary" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "alert-tertiary" | "brand-tertiary" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
25
+ buttonVariantRoot?: "alert" | "primary" | "secondary" | "tertiary" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "alert-tertiary" | "brand-tertiary" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
26
26
  checkboxSizeCheckbox?: "sm" | "md" | undefined;
27
27
  checkboxSizeRoot?: "sm" | "md" | undefined;
28
- checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
29
- checkboxVariantCheckboxIcon?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
30
- checkboxVariantRoot?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
28
+ checkboxVariantCheckbox?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
29
+ checkboxVariantCheckboxIcon?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
30
+ checkboxVariantRoot?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
31
31
  checkboxVariantValueCheckbox?: "checked" | "indeterminate" | "unchecked" | undefined;
32
32
  checkboxVariantValueCheckboxIcon?: "checked" | "indeterminate" | "unchecked" | undefined;
33
33
  checkboxVariantValueRoot?: "checked" | "indeterminate" | "unchecked" | undefined;
@@ -103,9 +103,9 @@ declare const getStylesInternal: (props?: ({
103
103
  menuitemSizeStartIcon?: "default" | undefined;
104
104
  radioSizeRadio?: "sm" | "md" | undefined;
105
105
  radioSizeRoot?: "sm" | "md" | undefined;
106
- radioVariantRadio?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
107
- radioVariantRadioCircle?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
108
- radioVariantRoot?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
106
+ radioVariantRadio?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
107
+ radioVariantRadioCircle?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
108
+ radioVariantRoot?: "alert" | "primary" | "secondary" | "alert-secondary" | undefined;
109
109
  radioVariantValueRadio?: "checked" | "unchecked" | undefined;
110
110
  radioVariantValueRadioCircle?: "checked" | "unchecked" | undefined;
111
111
  radioVariantValueRoot?: "checked" | "unchecked" | undefined;
@@ -139,14 +139,14 @@ declare const getStylesInternal: (props?: ({
139
139
  tooltipVariantIcon?: "default" | undefined;
140
140
  tooltipVariantRoot?: "default" | undefined;
141
141
  tooltipVariantSvg?: "default" | undefined;
142
- color?: "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;
143
- 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;
142
+ color?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | undefined;
143
+ placeholderColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | undefined;
144
144
  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;
145
145
  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;
146
- 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;
146
+ fontWeight?: "black" | "bold" | "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" | "thin" | "extralight" | "light" | "regular" | "medium" | "semibold" | "extrabold" | undefined;
147
147
  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;
148
148
  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;
149
- textAlign?: "start" | "end" | "center" | "justify" | undefined;
149
+ textAlign?: "center" | "justify" | "start" | "end" | undefined;
150
150
  textTransform?: "none" | "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" | "uppercase" | "lowercase" | "capitalize" | undefined;
151
151
  spacing?: "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;
152
152
  spacingHorizontal?: "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;
@@ -164,50 +164,50 @@ declare const getStylesInternal: (props?: ({
164
164
  offsetTop?: "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;
165
165
  columnGap?: "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;
166
166
  rowGap?: "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;
167
- backgroundColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
168
- borderColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
169
- borderStartColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
170
- borderEndColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
171
- borderBottomColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
172
- borderTopColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
167
+ backgroundColor?: "alert" | "primary" | "secondary" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
168
+ borderColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
169
+ borderStartColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
170
+ borderEndColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
171
+ borderBottomColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
172
+ borderTopColor?: "alert" | "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
173
173
  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
174
174
  borderTopStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
175
175
  borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
176
176
  borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
177
177
  borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
178
- borderWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
179
- borderVerticalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
180
- borderHorizontalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
181
- borderStartWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
182
- borderEndWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
183
- borderTopWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
184
- borderBottomWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
178
+ borderWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
179
+ borderVerticalWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
180
+ borderHorizontalWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
181
+ borderStartWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
182
+ borderEndWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
183
+ borderTopWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
184
+ borderBottomWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
185
185
  avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
186
186
  iconSize?: "xs" | "sm" | "md" | "lg" | undefined;
187
187
  alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
188
188
  alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
189
- alignSelf?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto" | undefined;
190
- flex?: "1" | "none" | "auto" | "initial" | undefined;
189
+ alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
190
+ flex?: "none" | "auto" | "1" | "initial" | undefined;
191
191
  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
192
192
  flexGrow?: "0" | "1" | "2" | "3" | undefined;
193
193
  flexShrink?: "0" | "1" | undefined;
194
194
  flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
195
195
  justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
196
196
  flexBasis?: "min-content" | undefined;
197
- display?: "table" | "flex" | "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;
197
+ display?: "flex" | "none" | "grid" | "table" | "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" | "contents" | undefined;
198
198
  overflow?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
199
199
  overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
200
200
  overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
201
- position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
202
- contentFit?: "fill" | "none" | "cover" | "contain" | "scale-down" | undefined;
201
+ position?: "fixed" | "static" | "absolute" | "relative" | "sticky" | undefined;
202
+ contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
203
203
  colorMode?: "light" | "dark" | undefined;
204
204
  scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
205
205
  width?: "full" | "fit" | "screen" | undefined;
206
206
  height?: "full" | "fit" | "screen" | undefined;
207
- dropShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
207
+ dropShadow?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
208
208
  insetShadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
209
209
  nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
210
- nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
210
+ nestedBorderRadiusWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thick" | undefined;
211
211
  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;
212
212
  nestedBorderRadius?: boolean | "first" | "last" | undefined;
213
213
  } & {
package/dist/tailwind/utils/getTailwindAsUdsColors.d.cts CHANGED
@@ -4,6 +4,6 @@ import tailwindColors from "tailwindcss/colors";
4
4
  //#region src/tailwind/utils/getTailwindAsUdsColors.d.ts
5
5
  type DeprecatedTailwindHue = 'lightBlue' | 'warmGray' | 'trueGray' | 'coolGray' | 'blueGray';
6
6
  type TailwindHue = Exclude<keyof typeof tailwindColors, DeprecatedTailwindHue>;
7
- declare function getTailwindAsUdsColors(): Record<TailwindHue, Record<"50" | "100" | "200" | "300" | "500" | "700" | "400" | "600" | "800" | "900" | "950", string>>;
7
+ declare function getTailwindAsUdsColors(): Record<TailwindHue, Record<"50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950", string>>;
8
8
  //#endregion
9
9
  export { getTailwindAsUdsColors };
package/dist/tailwind/utils/getTailwindAsUdsColors.d.ts CHANGED
@@ -4,6 +4,6 @@ import tailwindColors from "tailwindcss/colors";
4
4
  //#region src/tailwind/utils/getTailwindAsUdsColors.d.ts
5
5
  type DeprecatedTailwindHue = 'lightBlue' | 'warmGray' | 'trueGray' | 'coolGray' | 'blueGray';
6
6
  type TailwindHue = Exclude<keyof typeof tailwindColors, DeprecatedTailwindHue>;
7
- declare function getTailwindAsUdsColors(): Record<TailwindHue, Record<"50" | "100" | "200" | "300" | "500" | "700" | "400" | "600" | "800" | "900" | "950", string>>;
7
+ declare function getTailwindAsUdsColors(): Record<TailwindHue, Record<"50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950", string>>;
8
8
  //#endregion
9
9
  export { getTailwindAsUdsColors };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@yahoo/uds",
3
3
  "description": "Yahoo Universal System",
4
- "version": "3.100.0-beta.2",
4
+ "version": "3.100.0-beta.3",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
7
7
  "module": "./dist/index.js",