@yahoo/uds 3.133.1 → 3.133.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.
- 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/Menu/Menu.ItemCheckbox.d.cts +1 -1
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/Tabs/Tab.cjs +4 -4
- package/dist/components/client/Tabs/Tab.js +4 -4
- package/dist/components/client/Tabs/TabList.cjs +10 -10
- package/dist/components/client/Tabs/TabList.js +10 -10
- package/dist/components/client/Tabs/Tabs.cjs +3 -3
- package/dist/components/client/Tabs/Tabs.d.cts +2 -2
- package/dist/components/client/Tabs/Tabs.d.ts +2 -2
- package/dist/components/client/Tabs/Tabs.js +3 -3
- package/dist/components/client/Tabs/tabsContext.cjs +1 -1
- package/dist/components/client/Tabs/tabsContext.d.cts +1 -1
- package/dist/components/client/Tabs/tabsContext.d.ts +1 -1
- package/dist/components/client/Tabs/tabsContext.js +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 +22 -22
- package/dist/styles/styler.d.ts +22 -22
- package/dist/tailwind/dist/purger/optimized/ast/expressions.cjs +9 -3
- package/dist/tailwind/dist/purger/optimized/ast/expressions.js +9 -3
- package/dist/tailwind/dist/purger/optimized/ast/expressions.js.map +1 -1
- package/dist/tailwind/dist/purger/optimized/purgeFromCode.cjs +1 -1
- package/dist/tailwind/dist/purger/optimized/purgeFromCode.js +1 -1
- package/dist/tailwind/dist/purger/optimized/purgeFromCode.js.map +1 -1
- package/dist/tailwind/dist/types/dist/index.d.cts.map +1 -1
- package/dist/tailwind/dist/types/dist/index.d.ts.map +1 -1
- package/dist/types/dist/index.d.cts +2 -2
- package/dist/types/dist/index.d.ts +2 -2
- package/dist/uds/generated/componentData.cjs +1179 -1179
- package/dist/uds/generated/componentData.js +1179 -1179
- package/generated/componentData.json +1799 -1799
- package/package.json +1 -1
|
@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.cjs";
|
|
|
11
11
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
12
12
|
*/
|
|
13
13
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
14
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
15
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
16
16
|
} | null; //#endregion
|
|
17
17
|
//#endregion
|
|
18
18
|
export { getConfigVariantProperties };
|
|
@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.js";
|
|
|
11
11
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
12
12
|
*/
|
|
13
13
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
14
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
15
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
16
16
|
} | null; //#endregion
|
|
17
17
|
//#endregion
|
|
18
18
|
export { getConfigVariantProperties };
|
|
@@ -87,6 +87,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
|
|
|
87
87
|
*
|
|
88
88
|
* @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
|
|
89
89
|
**/
|
|
90
|
-
declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "
|
|
90
|
+
declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & _$react.RefAttributes<HTMLDivElement>>;
|
|
91
91
|
//#endregion
|
|
92
92
|
export { MenuItemCheckbox, type MenuItemCheckboxProps };
|
|
@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
|
|
|
88
88
|
*
|
|
89
89
|
* @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
|
|
90
90
|
**/
|
|
91
|
-
declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "
|
|
91
|
+
declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & _$react.RefAttributes<HTMLDivElement>>;
|
|
92
92
|
//#endregion
|
|
93
93
|
export { MenuItemCheckbox, type MenuItemCheckboxProps };
|
|
@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
29
29
|
gap: SpacingAlias;
|
|
30
30
|
dismissButtonSpacing: SpacingAlias;
|
|
31
31
|
dismissIconSize: number;
|
|
32
|
-
ariaKitPlacement: ("
|
|
32
|
+
ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
33
33
|
animationDuration: number;
|
|
34
34
|
};
|
|
35
35
|
//#endregion
|
|
@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
30
30
|
gap: SpacingAlias;
|
|
31
31
|
dismissButtonSpacing: SpacingAlias;
|
|
32
32
|
dismissIconSize: number;
|
|
33
|
-
ariaKitPlacement: ("
|
|
33
|
+
ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
34
34
|
animationDuration: number;
|
|
35
35
|
};
|
|
36
36
|
//#endregion
|
|
@@ -15,7 +15,7 @@ const tabRootUnderlineClassName = require_styles_styler.cx("pointer-events-none
|
|
|
15
15
|
function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className, slotProps }) {
|
|
16
16
|
const generatedId = (0, react.useId)();
|
|
17
17
|
const uid = value ?? `uds-tab-${generatedId}`;
|
|
18
|
-
const { variant,
|
|
18
|
+
const { variant, reduceMotion } = require_components_client_Tabs_tabsContext.useTabsContext();
|
|
19
19
|
const store = (0, _ariakit_react.useTabContext)();
|
|
20
20
|
if (!store) throw new Error("Tab must be wrapped in a Tabs component");
|
|
21
21
|
const selectedId = (0, _ariakit_react.useStoreState)(store, "selectedId");
|
|
@@ -30,16 +30,16 @@ function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, c
|
|
|
30
30
|
tabVariantRoot: variant,
|
|
31
31
|
tabVariantActiveRoot: "on"
|
|
32
32
|
});
|
|
33
|
-
const configClass = activeState === "on" ? require_styles_styler.cx(rootOnClass, !
|
|
33
|
+
const configClass = activeState === "on" ? require_styles_styler.cx(rootOnClass, !reduceMotion && require_styles_styler.cx("!bg-transparent", "!shadow-none")) : rootBaseClass;
|
|
34
34
|
const iconConfigClass = require_styles_styler.getStyles({
|
|
35
35
|
tabSizeIcon: "default",
|
|
36
36
|
tabVariantIcon: variant,
|
|
37
37
|
tabVariantActiveIcon: activeState
|
|
38
38
|
});
|
|
39
|
-
const tabClass = require_styles_styler.cx(configClass, "inline-flex items-center shrink-0 box-border relative", !
|
|
39
|
+
const tabClass = require_styles_styler.cx(configClass, "inline-flex items-center shrink-0 box-border relative", !reduceMotion && "z-[1]", "cursor-pointer select-none whitespace-nowrap", !disabled && "uds-ring", disabled && "opacity-50 cursor-default pointer-events-none", "border-solid border-b-solid", "transition-colors duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]", className);
|
|
40
40
|
const resolvedContent = asChild && (0, react.isValidElement)(children) ? children.props.children ?? null : children;
|
|
41
41
|
const resolvedRender = asChild && (0, react.isValidElement)(children) ? children : void 0;
|
|
42
|
-
const showPerTabUnderline = !(activeState === "on" && !
|
|
42
|
+
const showPerTabUnderline = !(activeState === "on" && !reduceMotion);
|
|
43
43
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Tab, {
|
|
44
44
|
id: uid,
|
|
45
45
|
disabled,
|
|
@@ -13,7 +13,7 @@ const tabRootUnderlineClassName = cx("pointer-events-none absolute bottom-0 left
|
|
|
13
13
|
function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className, slotProps }) {
|
|
14
14
|
const generatedId = useId();
|
|
15
15
|
const uid = value ?? `uds-tab-${generatedId}`;
|
|
16
|
-
const { variant,
|
|
16
|
+
const { variant, reduceMotion } = useTabsContext();
|
|
17
17
|
const store = useTabContext();
|
|
18
18
|
if (!store) throw new Error("Tab must be wrapped in a Tabs component");
|
|
19
19
|
const selectedId = useStoreState(store, "selectedId");
|
|
@@ -28,16 +28,16 @@ function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, c
|
|
|
28
28
|
tabVariantRoot: variant,
|
|
29
29
|
tabVariantActiveRoot: "on"
|
|
30
30
|
});
|
|
31
|
-
const configClass = activeState === "on" ? cx(rootOnClass, !
|
|
31
|
+
const configClass = activeState === "on" ? cx(rootOnClass, !reduceMotion && cx("!bg-transparent", "!shadow-none")) : rootBaseClass;
|
|
32
32
|
const iconConfigClass = getStyles({
|
|
33
33
|
tabSizeIcon: "default",
|
|
34
34
|
tabVariantIcon: variant,
|
|
35
35
|
tabVariantActiveIcon: activeState
|
|
36
36
|
});
|
|
37
|
-
const tabClass = cx(configClass, "inline-flex items-center shrink-0 box-border relative", !
|
|
37
|
+
const tabClass = cx(configClass, "inline-flex items-center shrink-0 box-border relative", !reduceMotion && "z-[1]", "cursor-pointer select-none whitespace-nowrap", !disabled && "uds-ring", disabled && "opacity-50 cursor-default pointer-events-none", "border-solid border-b-solid", "transition-colors duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]", className);
|
|
38
38
|
const resolvedContent = asChild && isValidElement(children) ? children.props.children ?? null : children;
|
|
39
39
|
const resolvedRender = asChild && isValidElement(children) ? children : void 0;
|
|
40
|
-
const showPerTabUnderline = !(activeState === "on" && !
|
|
40
|
+
const showPerTabUnderline = !(activeState === "on" && !reduceMotion);
|
|
41
41
|
return /* @__PURE__ */ jsxs(Tab$1, {
|
|
42
42
|
id: uid,
|
|
43
43
|
disabled,
|
|
@@ -16,7 +16,7 @@ const SELECTION_TRANSITION = "left 240ms cubic-bezier(0.2, 0, 0, 1), top 240ms c
|
|
|
16
16
|
const TAB_UNDERLINE_COLOR_VAR = "--uds-tab-underline-color";
|
|
17
17
|
const TAB_UNDERLINE_WIDTH_VAR = "--uds-tab-underline-width";
|
|
18
18
|
const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, className, ...props }, ref) {
|
|
19
|
-
const { variant,
|
|
19
|
+
const { variant, reduceMotion } = require_components_client_Tabs_tabsContext.useTabsContext();
|
|
20
20
|
const selectedId = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useTabContext)(), "selectedId");
|
|
21
21
|
const listRef = (0, react.useRef)(null);
|
|
22
22
|
const indicatorRef = (0, react.useRef)(null);
|
|
@@ -25,7 +25,7 @@ const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, c
|
|
|
25
25
|
const applyIndicator = (0, react.useCallback)(() => {
|
|
26
26
|
const listEl = listRef.current;
|
|
27
27
|
const indicatorEl = indicatorRef.current;
|
|
28
|
-
if (!listEl || !indicatorEl ||
|
|
28
|
+
if (!listEl || !indicatorEl || reduceMotion) return;
|
|
29
29
|
const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
|
|
30
30
|
if (!selected) {
|
|
31
31
|
indicatorEl.style.opacity = "0";
|
|
@@ -51,12 +51,12 @@ const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, c
|
|
|
51
51
|
else indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
|
|
52
52
|
if (underlineWidth) indicatorEl.style.setProperty(TAB_UNDERLINE_WIDTH_VAR, underlineWidth);
|
|
53
53
|
else indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
|
|
54
|
-
}, [
|
|
54
|
+
}, [reduceMotion, reducedMotion]);
|
|
55
55
|
(0, react.useLayoutEffect)(() => {
|
|
56
56
|
applyIndicator();
|
|
57
57
|
}, [selectedId, applyIndicator]);
|
|
58
58
|
(0, react.useLayoutEffect)(() => {
|
|
59
|
-
if (
|
|
59
|
+
if (reduceMotion) return;
|
|
60
60
|
const listEl = listRef.current;
|
|
61
61
|
if (!listEl) return;
|
|
62
62
|
const ro = new ResizeObserver(() => applyIndicator());
|
|
@@ -69,10 +69,10 @@ const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, c
|
|
|
69
69
|
listEl.removeEventListener("scroll", onScroll);
|
|
70
70
|
window.removeEventListener("resize", applyIndicator);
|
|
71
71
|
};
|
|
72
|
-
}, [
|
|
72
|
+
}, [reduceMotion, applyIndicator]);
|
|
73
73
|
/** Re-sync underline tokens when the selected tab's hover/pressed state changes (indicator does not receive those pseudos). */
|
|
74
74
|
(0, react.useLayoutEffect)(() => {
|
|
75
|
-
if (
|
|
75
|
+
if (reduceMotion) return;
|
|
76
76
|
const listEl = listRef.current;
|
|
77
77
|
if (!listEl) return;
|
|
78
78
|
const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
|
|
@@ -90,7 +90,7 @@ const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, c
|
|
|
90
90
|
return () => events.forEach((e) => selected.removeEventListener(e, bump));
|
|
91
91
|
}, [
|
|
92
92
|
selectedId,
|
|
93
|
-
|
|
93
|
+
reduceMotion,
|
|
94
94
|
applyIndicator
|
|
95
95
|
]);
|
|
96
96
|
const setListRef = (el) => {
|
|
@@ -104,8 +104,8 @@ const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, c
|
|
|
104
104
|
tabVariantRoot: variant,
|
|
105
105
|
tabVariantActiveRoot: "on"
|
|
106
106
|
}), "!m-0 !p-0 !gap-0 box-border pointer-events-none", "absolute z-0 min-w-0 min-h-0");
|
|
107
|
-
const styles = require_styles_styler.cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !
|
|
108
|
-
const indicatorBoxStyle = !
|
|
107
|
+
const styles = require_styles_styler.cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !reduceMotion && "relative", className);
|
|
108
|
+
const indicatorBoxStyle = !reduceMotion ? {
|
|
109
109
|
opacity: 0,
|
|
110
110
|
transition: "none"
|
|
111
111
|
} : {};
|
|
@@ -113,7 +113,7 @@ const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, c
|
|
|
113
113
|
ref: setListRef,
|
|
114
114
|
className: styles,
|
|
115
115
|
...props,
|
|
116
|
-
children: [!
|
|
116
|
+
children: [!reduceMotion ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
117
117
|
ref: indicatorRef,
|
|
118
118
|
className: indicatorClass,
|
|
119
119
|
style: indicatorBoxStyle,
|
|
@@ -14,7 +14,7 @@ const SELECTION_TRANSITION = "left 240ms cubic-bezier(0.2, 0, 0, 1), top 240ms c
|
|
|
14
14
|
const TAB_UNDERLINE_COLOR_VAR = "--uds-tab-underline-color";
|
|
15
15
|
const TAB_UNDERLINE_WIDTH_VAR = "--uds-tab-underline-width";
|
|
16
16
|
const TabList = forwardRef(function TabList({ children, scrollable, className, ...props }, ref) {
|
|
17
|
-
const { variant,
|
|
17
|
+
const { variant, reduceMotion } = useTabsContext();
|
|
18
18
|
const selectedId = useStoreState(useTabContext(), "selectedId");
|
|
19
19
|
const listRef = useRef(null);
|
|
20
20
|
const indicatorRef = useRef(null);
|
|
@@ -23,7 +23,7 @@ const TabList = forwardRef(function TabList({ children, scrollable, className, .
|
|
|
23
23
|
const applyIndicator = useCallback(() => {
|
|
24
24
|
const listEl = listRef.current;
|
|
25
25
|
const indicatorEl = indicatorRef.current;
|
|
26
|
-
if (!listEl || !indicatorEl ||
|
|
26
|
+
if (!listEl || !indicatorEl || reduceMotion) return;
|
|
27
27
|
const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
|
|
28
28
|
if (!selected) {
|
|
29
29
|
indicatorEl.style.opacity = "0";
|
|
@@ -49,12 +49,12 @@ const TabList = forwardRef(function TabList({ children, scrollable, className, .
|
|
|
49
49
|
else indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
|
|
50
50
|
if (underlineWidth) indicatorEl.style.setProperty(TAB_UNDERLINE_WIDTH_VAR, underlineWidth);
|
|
51
51
|
else indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
|
|
52
|
-
}, [
|
|
52
|
+
}, [reduceMotion, reducedMotion]);
|
|
53
53
|
useLayoutEffect(() => {
|
|
54
54
|
applyIndicator();
|
|
55
55
|
}, [selectedId, applyIndicator]);
|
|
56
56
|
useLayoutEffect(() => {
|
|
57
|
-
if (
|
|
57
|
+
if (reduceMotion) return;
|
|
58
58
|
const listEl = listRef.current;
|
|
59
59
|
if (!listEl) return;
|
|
60
60
|
const ro = new ResizeObserver(() => applyIndicator());
|
|
@@ -67,10 +67,10 @@ const TabList = forwardRef(function TabList({ children, scrollable, className, .
|
|
|
67
67
|
listEl.removeEventListener("scroll", onScroll);
|
|
68
68
|
window.removeEventListener("resize", applyIndicator);
|
|
69
69
|
};
|
|
70
|
-
}, [
|
|
70
|
+
}, [reduceMotion, applyIndicator]);
|
|
71
71
|
/** Re-sync underline tokens when the selected tab's hover/pressed state changes (indicator does not receive those pseudos). */
|
|
72
72
|
useLayoutEffect(() => {
|
|
73
|
-
if (
|
|
73
|
+
if (reduceMotion) return;
|
|
74
74
|
const listEl = listRef.current;
|
|
75
75
|
if (!listEl) return;
|
|
76
76
|
const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
|
|
@@ -88,7 +88,7 @@ const TabList = forwardRef(function TabList({ children, scrollable, className, .
|
|
|
88
88
|
return () => events.forEach((e) => selected.removeEventListener(e, bump));
|
|
89
89
|
}, [
|
|
90
90
|
selectedId,
|
|
91
|
-
|
|
91
|
+
reduceMotion,
|
|
92
92
|
applyIndicator
|
|
93
93
|
]);
|
|
94
94
|
const setListRef = (el) => {
|
|
@@ -102,8 +102,8 @@ const TabList = forwardRef(function TabList({ children, scrollable, className, .
|
|
|
102
102
|
tabVariantRoot: variant,
|
|
103
103
|
tabVariantActiveRoot: "on"
|
|
104
104
|
}), "!m-0 !p-0 !gap-0 box-border pointer-events-none", "absolute z-0 min-w-0 min-h-0");
|
|
105
|
-
const styles = cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !
|
|
106
|
-
const indicatorBoxStyle = !
|
|
105
|
+
const styles = cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !reduceMotion && "relative", className);
|
|
106
|
+
const indicatorBoxStyle = !reduceMotion ? {
|
|
107
107
|
opacity: 0,
|
|
108
108
|
transition: "none"
|
|
109
109
|
} : {};
|
|
@@ -111,7 +111,7 @@ const TabList = forwardRef(function TabList({ children, scrollable, className, .
|
|
|
111
111
|
ref: setListRef,
|
|
112
112
|
className: styles,
|
|
113
113
|
...props,
|
|
114
|
-
children: [!
|
|
114
|
+
children: [!reduceMotion ? /* @__PURE__ */ jsx("span", {
|
|
115
115
|
ref: indicatorRef,
|
|
116
116
|
className: indicatorClass,
|
|
117
117
|
style: indicatorBoxStyle,
|
|
@@ -15,7 +15,7 @@ let _ariakit_react = require("@ariakit/react");
|
|
|
15
15
|
* Tabs organize content into multiple sections and allow users to navigate between them.
|
|
16
16
|
* Supports two visual variants: `primary` and `secondary`. By default, the active selection
|
|
17
17
|
* indicator (underline or pill) animates between tabs with the same timing as the design reference
|
|
18
|
-
* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `
|
|
18
|
+
* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `reduceMotion={true}` to reduce that motion.
|
|
19
19
|
*
|
|
20
20
|
* @example
|
|
21
21
|
* ```tsx
|
|
@@ -32,11 +32,11 @@ let _ariakit_react = require("@ariakit/react");
|
|
|
32
32
|
* </Tabs>
|
|
33
33
|
* ```
|
|
34
34
|
**/
|
|
35
|
-
function Tabs({ children, variant = "primary",
|
|
35
|
+
function Tabs({ children, variant = "primary", reduceMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
|
|
36
36
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Tabs_tabsContext.TabsContext.Provider, {
|
|
37
37
|
value: {
|
|
38
38
|
variant,
|
|
39
|
-
|
|
39
|
+
reduceMotion
|
|
40
40
|
},
|
|
41
41
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabProvider, {
|
|
42
42
|
defaultSelectedId,
|
|
@@ -13,7 +13,7 @@ type TabsProps = UniversalTabsProps;
|
|
|
13
13
|
* Tabs organize content into multiple sections and allow users to navigate between them.
|
|
14
14
|
* Supports two visual variants: `primary` and `secondary`. By default, the active selection
|
|
15
15
|
* indicator (underline or pill) animates between tabs with the same timing as the design reference
|
|
16
|
-
* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `
|
|
16
|
+
* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `reduceMotion={true}` to reduce that motion.
|
|
17
17
|
*
|
|
18
18
|
* @example
|
|
19
19
|
* ```tsx
|
|
@@ -33,7 +33,7 @@ type TabsProps = UniversalTabsProps;
|
|
|
33
33
|
declare function Tabs({
|
|
34
34
|
children,
|
|
35
35
|
variant,
|
|
36
|
-
|
|
36
|
+
reduceMotion,
|
|
37
37
|
defaultSelectedId,
|
|
38
38
|
selectedId,
|
|
39
39
|
onSelectionChange
|
|
@@ -14,7 +14,7 @@ type TabsProps = UniversalTabsProps;
|
|
|
14
14
|
* Tabs organize content into multiple sections and allow users to navigate between them.
|
|
15
15
|
* Supports two visual variants: `primary` and `secondary`. By default, the active selection
|
|
16
16
|
* indicator (underline or pill) animates between tabs with the same timing as the design reference
|
|
17
|
-
* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `
|
|
17
|
+
* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `reduceMotion={true}` to reduce that motion.
|
|
18
18
|
*
|
|
19
19
|
* @example
|
|
20
20
|
* ```tsx
|
|
@@ -34,7 +34,7 @@ type TabsProps = UniversalTabsProps;
|
|
|
34
34
|
declare function Tabs({
|
|
35
35
|
children,
|
|
36
36
|
variant,
|
|
37
|
-
|
|
37
|
+
reduceMotion,
|
|
38
38
|
defaultSelectedId,
|
|
39
39
|
selectedId,
|
|
40
40
|
onSelectionChange
|
|
@@ -13,7 +13,7 @@ import { TabProvider } from "@ariakit/react";
|
|
|
13
13
|
* Tabs organize content into multiple sections and allow users to navigate between them.
|
|
14
14
|
* Supports two visual variants: `primary` and `secondary`. By default, the active selection
|
|
15
15
|
* indicator (underline or pill) animates between tabs with the same timing as the design reference
|
|
16
|
-
* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `
|
|
16
|
+
* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `reduceMotion={true}` to reduce that motion.
|
|
17
17
|
*
|
|
18
18
|
* @example
|
|
19
19
|
* ```tsx
|
|
@@ -30,11 +30,11 @@ import { TabProvider } from "@ariakit/react";
|
|
|
30
30
|
* </Tabs>
|
|
31
31
|
* ```
|
|
32
32
|
**/
|
|
33
|
-
function Tabs({ children, variant = "primary",
|
|
33
|
+
function Tabs({ children, variant = "primary", reduceMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
|
|
34
34
|
return /* @__PURE__ */ jsx(TabsContext.Provider, {
|
|
35
35
|
value: {
|
|
36
36
|
variant,
|
|
37
|
-
|
|
37
|
+
reduceMotion
|
|
38
38
|
},
|
|
39
39
|
children: /* @__PURE__ */ jsx(TabProvider, {
|
|
40
40
|
defaultSelectedId,
|
|
@@ -6,7 +6,7 @@ let react = require("react");
|
|
|
6
6
|
//#region src/components/client/Tabs/tabsContext.tsx
|
|
7
7
|
const TabsContext = (0, react.createContext)({
|
|
8
8
|
variant: "primary",
|
|
9
|
-
|
|
9
|
+
reduceMotion: false
|
|
10
10
|
});
|
|
11
11
|
function useTabsContext() {
|
|
12
12
|
return (0, react.useContext)(TabsContext);
|
|
@@ -7,7 +7,7 @@ type TabsVariant = UniversalTabsVariant;
|
|
|
7
7
|
interface TabsContextValue {
|
|
8
8
|
variant: TabsVariant;
|
|
9
9
|
/** When true, selection indicator sliding motion is off; TabList/Tab still show correct selection. */
|
|
10
|
-
|
|
10
|
+
reduceMotion: boolean;
|
|
11
11
|
}
|
|
12
12
|
declare const TabsContext: _$react.Context<TabsContextValue>;
|
|
13
13
|
declare function useTabsContext(): TabsContextValue;
|
|
@@ -8,7 +8,7 @@ type TabsVariant = UniversalTabsVariant;
|
|
|
8
8
|
interface TabsContextValue {
|
|
9
9
|
variant: TabsVariant;
|
|
10
10
|
/** When true, selection indicator sliding motion is off; TabList/Tab still show correct selection. */
|
|
11
|
-
|
|
11
|
+
reduceMotion: boolean;
|
|
12
12
|
}
|
|
13
13
|
declare const TabsContext: _$react.Context<TabsContextValue>;
|
|
14
14
|
declare function useTabsContext(): TabsContextValue;
|
|
@@ -4,7 +4,7 @@ import { createContext, useContext } from "react";
|
|
|
4
4
|
//#region src/components/client/Tabs/tabsContext.tsx
|
|
5
5
|
const TabsContext = createContext({
|
|
6
6
|
variant: "primary",
|
|
7
|
-
|
|
7
|
+
reduceMotion: false
|
|
8
8
|
});
|
|
9
9
|
function useTabsContext() {
|
|
10
10
|
return useContext(TabsContext);
|
|
@@ -30,9 +30,9 @@ declare const useToastConfig: (sizeProp?: ToastSize | undefined, variantProp?: T
|
|
|
30
30
|
autoClose: number | false;
|
|
31
31
|
position: ToastPosition;
|
|
32
32
|
backgroundColor: {
|
|
33
|
+
loading: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
33
34
|
warning: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
34
35
|
info: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
35
|
-
loading: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
36
36
|
success: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
37
37
|
error: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
38
38
|
};
|