@yahoo/uds 3.133.1 → 3.133.2
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/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 +5 -5
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +5 -5
- package/dist/styles/styler.d.cts +62 -62
- package/dist/styles/styler.d.ts +62 -62
- 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 +1171 -1171
- package/dist/uds/generated/componentData.js +1171 -1171
- package/generated/componentData.json +1771 -1771
- 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 };
|
|
@@ -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,11 +30,11 @@ declare const useToastConfig: (sizeProp?: ToastSize | undefined, variantProp?: T
|
|
|
30
30
|
autoClose: number | false;
|
|
31
31
|
position: ToastPosition;
|
|
32
32
|
backgroundColor: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
success: "primary" | "secondary" | "
|
|
37
|
-
error: "primary" | "secondary" | "
|
|
33
|
+
loading: "primary" | "secondary" | "brand" | "brand-secondary" | "accent" | "alert" | "positive" | "warning" | "info" | "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
|
+
warning: "primary" | "secondary" | "brand" | "brand-secondary" | "accent" | "alert" | "positive" | "warning" | "info" | "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
|
+
info: "primary" | "secondary" | "brand" | "brand-secondary" | "accent" | "alert" | "positive" | "warning" | "info" | "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
|
+
success: "primary" | "secondary" | "brand" | "brand-secondary" | "accent" | "alert" | "positive" | "warning" | "info" | "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
|
+
error: "primary" | "secondary" | "brand" | "brand-secondary" | "accent" | "alert" | "positive" | "warning" | "info" | "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
|
};
|
|
39
39
|
};
|
|
40
40
|
//#endregion
|