@itcase/ui 1.8.135 → 1.8.136
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/cjs/components/Pagination.js +8 -5
- package/dist/components/Pagination.js +8 -5
- package/dist/css/styles/border-color/border-color.css +18 -2
- package/dist/css/styles/bundle.css +90 -42
- package/dist/css/styles/fill/fill.css +58 -38
- package/dist/css/styles/text-color/text-color.css +14 -2
- package/package.json +1 -1
|
@@ -248,7 +248,7 @@ const paginationConfig = {
|
|
|
248
248
|
},
|
|
249
249
|
};
|
|
250
250
|
function Pagination(props) {
|
|
251
|
-
const { className,
|
|
251
|
+
const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountArray = [10, 20, 50, 100], pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount,
|
|
252
252
|
/**
|
|
253
253
|
* @deprecated The method should not be used
|
|
254
254
|
*/
|
|
@@ -307,16 +307,19 @@ function Pagination(props) {
|
|
|
307
307
|
}, [pageNumber]);
|
|
308
308
|
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, paginationConfig, isDisabled);
|
|
309
309
|
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
310
|
-
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass,
|
|
310
|
+
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
|
|
311
311
|
const { styles: paginationStyles } = useStyles.useStyles(props);
|
|
312
|
-
return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass &&
|
|
313
|
-
`
|
|
312
|
+
return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
|
|
313
|
+
`fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
|
|
314
|
+
`text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
|
|
315
|
+
`text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
|
|
314
316
|
`pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled",
|
|
315
317
|
// pages settings
|
|
316
318
|
forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`),
|
|
317
319
|
// next button
|
|
318
320
|
nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
|
|
319
|
-
(() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
|
|
321
|
+
(() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
|
|
322
|
+
`shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
320
323
|
pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
321
324
|
pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
|
|
322
325
|
}
|
|
@@ -246,7 +246,7 @@ const paginationConfig = {
|
|
|
246
246
|
},
|
|
247
247
|
};
|
|
248
248
|
function Pagination(props) {
|
|
249
|
-
const { className,
|
|
249
|
+
const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountArray = [10, 20, 50, 100], pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount,
|
|
250
250
|
/**
|
|
251
251
|
* @deprecated The method should not be used
|
|
252
252
|
*/
|
|
@@ -305,16 +305,19 @@ function Pagination(props) {
|
|
|
305
305
|
}, [pageNumber]);
|
|
306
306
|
const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
|
|
307
307
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
308
|
-
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass,
|
|
308
|
+
const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
|
|
309
309
|
const { styles: paginationStyles } = useStyles(props);
|
|
310
|
-
return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass &&
|
|
311
|
-
`
|
|
310
|
+
return (allItemsCount > perPageCount && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
|
|
311
|
+
`fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
|
|
312
|
+
`text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
|
|
313
|
+
`text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
|
|
312
314
|
`pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled",
|
|
313
315
|
// pages settings
|
|
314
316
|
forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`),
|
|
315
317
|
// next button
|
|
316
318
|
nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
|
|
317
|
-
(() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
|
|
319
|
+
(() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
|
|
320
|
+
`shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
318
321
|
pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
|
|
319
322
|
pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
|
|
320
323
|
}
|
|
@@ -13,6 +13,17 @@
|
|
|
13
13
|
@each $type in accent, primary, secondary, surface, error, warning, success,
|
|
14
14
|
danger, info, disabled {
|
|
15
15
|
@each $color in primary, secondary, tertiary, quaternary {
|
|
16
|
+
.border&_active_$(type),
|
|
17
|
+
&_active_$(type) {
|
|
18
|
+
&-border {
|
|
19
|
+
&-$(color) {
|
|
20
|
+
border-width: 1px;
|
|
21
|
+
border-color: var(--color-$(type)-border-$(color));
|
|
22
|
+
border-style: solid;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
.border&_active_hover_$(type),
|
|
16
27
|
&_active_hover_$(type) {
|
|
17
28
|
&-border {
|
|
18
29
|
&-$(color) {
|
|
@@ -54,7 +65,6 @@
|
|
|
54
65
|
}
|
|
55
66
|
}
|
|
56
67
|
}
|
|
57
|
-
&_active_$(type),
|
|
58
68
|
&_$(type) {
|
|
59
69
|
&-border {
|
|
60
70
|
&-$(color) {
|
|
@@ -79,6 +89,13 @@
|
|
|
79
89
|
alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
|
|
80
90
|
gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
|
|
81
91
|
alto, athens-gray, sonic-silver {
|
|
92
|
+
.border&_active_$(palette),
|
|
93
|
+
&_active_$(palette) {
|
|
94
|
+
border-width: 1px;
|
|
95
|
+
border-color: var(--color-palette-$(palette));
|
|
96
|
+
border-style: solid;
|
|
97
|
+
}
|
|
98
|
+
.border&_active_hover_$(palette),
|
|
82
99
|
&_active_hover_$(palette) {
|
|
83
100
|
&:hover {
|
|
84
101
|
border-width: 1px;
|
|
@@ -108,7 +125,6 @@
|
|
|
108
125
|
}
|
|
109
126
|
}
|
|
110
127
|
}
|
|
111
|
-
&_active_$(palette),
|
|
112
128
|
&_$(palette) {
|
|
113
129
|
border-width: 1px;
|
|
114
130
|
border-color: var(--color-palette-$(palette));
|
|
@@ -355,6 +355,17 @@ div.alignment {
|
|
|
355
355
|
@each $type in accent, primary, secondary, surface, error, warning, success,
|
|
356
356
|
danger, info, disabled {
|
|
357
357
|
@each $color in primary, secondary, tertiary, quaternary {
|
|
358
|
+
.border&_active_$(type),
|
|
359
|
+
&_active_$(type) {
|
|
360
|
+
&-border {
|
|
361
|
+
&-$(color) {
|
|
362
|
+
border-width: 1px;
|
|
363
|
+
border-color: var(--color-$(type)-border-$(color));
|
|
364
|
+
border-style: solid;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
.border&_active_hover_$(type),
|
|
358
369
|
&_active_hover_$(type) {
|
|
359
370
|
&-border {
|
|
360
371
|
&-$(color) {
|
|
@@ -396,7 +407,6 @@ div.alignment {
|
|
|
396
407
|
}
|
|
397
408
|
}
|
|
398
409
|
}
|
|
399
|
-
&_active_$(type),
|
|
400
410
|
&_$(type) {
|
|
401
411
|
&-border {
|
|
402
412
|
&-$(color) {
|
|
@@ -421,6 +431,13 @@ div.alignment {
|
|
|
421
431
|
alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
|
|
422
432
|
gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
|
|
423
433
|
alto, athens-gray, sonic-silver {
|
|
434
|
+
.border&_active_$(palette),
|
|
435
|
+
&_active_$(palette) {
|
|
436
|
+
border-width: 1px;
|
|
437
|
+
border-color: var(--color-palette-$(palette));
|
|
438
|
+
border-style: solid;
|
|
439
|
+
}
|
|
440
|
+
.border&_active_hover_$(palette),
|
|
424
441
|
&_active_hover_$(palette) {
|
|
425
442
|
&:hover {
|
|
426
443
|
border-width: 1px;
|
|
@@ -450,7 +467,6 @@ div.alignment {
|
|
|
450
467
|
}
|
|
451
468
|
}
|
|
452
469
|
}
|
|
453
|
-
&_active_$(palette),
|
|
454
470
|
&_$(palette) {
|
|
455
471
|
border-width: 1px;
|
|
456
472
|
border-color: var(--color-palette-$(palette));
|
|
@@ -779,22 +795,26 @@ textarea.fill {
|
|
|
779
795
|
@each $type in accent, primary, secondary, surface, error, warning, success,
|
|
780
796
|
danger, info, disabled {
|
|
781
797
|
@each $color in primary, secondary, tertiary, quaternary {
|
|
782
|
-
&
|
|
798
|
+
&_$(type) {
|
|
799
|
+
&-item {
|
|
800
|
+
&-$(color) {
|
|
801
|
+
background: var(--color-$(type)-item-$(color));
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
&-$(color) {
|
|
805
|
+
background: var(--color-$(type)-fill-$(color));
|
|
806
|
+
}
|
|
807
|
+
}
|
|
808
|
+
&_hover_$(type) {
|
|
783
809
|
&-item {
|
|
784
810
|
&-$(color) {
|
|
785
811
|
&:hover {
|
|
786
812
|
background: var(--color-$(type)-item-$(color));
|
|
787
813
|
}
|
|
788
|
-
|
|
789
814
|
&-hover {
|
|
790
815
|
&:hover {
|
|
791
816
|
background: var(--color-$(type)-item-$(color)-hover);
|
|
792
817
|
}
|
|
793
|
-
&-active {
|
|
794
|
-
&:hover {
|
|
795
|
-
background: var(--color-$(type)-item-$(color)-active-hover);
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
818
|
}
|
|
799
819
|
}
|
|
800
820
|
}
|
|
@@ -806,16 +826,6 @@ textarea.fill {
|
|
|
806
826
|
&:hover {
|
|
807
827
|
background: var(--color-$(type)-fill-$(color)-hover);
|
|
808
828
|
}
|
|
809
|
-
&-active {
|
|
810
|
-
&:hover {
|
|
811
|
-
background: var(--color-$(type)-fill-$(color)-active-hover);
|
|
812
|
-
}
|
|
813
|
-
}
|
|
814
|
-
}
|
|
815
|
-
&-active {
|
|
816
|
-
&:hover {
|
|
817
|
-
background: var(--color-$(type)-fill-$(color)-active);
|
|
818
|
-
}
|
|
819
829
|
}
|
|
820
830
|
}
|
|
821
831
|
&-hover {
|
|
@@ -826,16 +836,34 @@ textarea.fill {
|
|
|
826
836
|
}
|
|
827
837
|
}
|
|
828
838
|
}
|
|
829
|
-
&
|
|
839
|
+
.fill&_active_$(type),
|
|
840
|
+
&_active_$(type) {
|
|
841
|
+
&-item {
|
|
842
|
+
&-$(color) {
|
|
843
|
+
background: var(--color-$(type)-item-$(color));
|
|
844
|
+
}
|
|
845
|
+
}
|
|
846
|
+
&-$(color) {
|
|
847
|
+
background: var(--color-$(type)-fill-$(color));
|
|
848
|
+
}
|
|
849
|
+
}
|
|
850
|
+
.fill&_active_hover_$(type),
|
|
851
|
+
&_active_hover_$(type) {
|
|
830
852
|
&-item {
|
|
831
853
|
&-$(color) {
|
|
832
854
|
&:hover {
|
|
833
855
|
background: var(--color-$(type)-item-$(color));
|
|
834
856
|
}
|
|
857
|
+
|
|
835
858
|
&-hover {
|
|
836
859
|
&:hover {
|
|
837
860
|
background: var(--color-$(type)-item-$(color)-hover);
|
|
838
861
|
}
|
|
862
|
+
&-active {
|
|
863
|
+
&:hover {
|
|
864
|
+
background: var(--color-$(type)-item-$(color)-active-hover);
|
|
865
|
+
}
|
|
866
|
+
}
|
|
839
867
|
}
|
|
840
868
|
}
|
|
841
869
|
}
|
|
@@ -847,6 +875,16 @@ textarea.fill {
|
|
|
847
875
|
&:hover {
|
|
848
876
|
background: var(--color-$(type)-fill-$(color)-hover);
|
|
849
877
|
}
|
|
878
|
+
&-active {
|
|
879
|
+
&:hover {
|
|
880
|
+
background: var(--color-$(type)-fill-$(color)-active-hover);
|
|
881
|
+
}
|
|
882
|
+
}
|
|
883
|
+
}
|
|
884
|
+
&-active {
|
|
885
|
+
&:hover {
|
|
886
|
+
background: var(--color-$(type)-fill-$(color)-active);
|
|
887
|
+
}
|
|
850
888
|
}
|
|
851
889
|
}
|
|
852
890
|
&-hover {
|
|
@@ -857,17 +895,6 @@ textarea.fill {
|
|
|
857
895
|
}
|
|
858
896
|
}
|
|
859
897
|
}
|
|
860
|
-
&_active_$(type),
|
|
861
|
-
&_$(type) {
|
|
862
|
-
&-item {
|
|
863
|
-
&-$(color) {
|
|
864
|
-
background: var(--color-$(type)-item-$(color));
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
&-$(color) {
|
|
868
|
-
background: var(--color-$(type)-fill-$(color));
|
|
869
|
-
}
|
|
870
|
-
}
|
|
871
898
|
}
|
|
872
899
|
}
|
|
873
900
|
@each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
|
|
@@ -883,15 +910,11 @@ textarea.fill {
|
|
|
883
910
|
dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
|
|
884
911
|
stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
|
|
885
912
|
sonic-silver {
|
|
886
|
-
&
|
|
887
|
-
|
|
888
|
-
background: var(--color-palette-$(palette));
|
|
889
|
-
}
|
|
913
|
+
&_$(palette) {
|
|
914
|
+
background: var(--color-palette-$(palette));
|
|
890
915
|
&-item {
|
|
891
916
|
&_$(palette) {
|
|
892
|
-
|
|
893
|
-
background: var(--color-palette-$(palette));
|
|
894
|
-
}
|
|
917
|
+
background: var(--color-palette-$(palette));
|
|
895
918
|
}
|
|
896
919
|
}
|
|
897
920
|
}
|
|
@@ -907,8 +930,8 @@ textarea.fill {
|
|
|
907
930
|
}
|
|
908
931
|
}
|
|
909
932
|
}
|
|
910
|
-
&_active_$(palette),
|
|
911
|
-
&
|
|
933
|
+
.fill&_active_$(palette),
|
|
934
|
+
&_active_$(palette) {
|
|
912
935
|
background: var(--color-palette-$(palette));
|
|
913
936
|
&-item {
|
|
914
937
|
&_$(palette) {
|
|
@@ -916,6 +939,19 @@ textarea.fill {
|
|
|
916
939
|
}
|
|
917
940
|
}
|
|
918
941
|
}
|
|
942
|
+
.fill&_active_hover_$(palette),
|
|
943
|
+
&_active_hover_$(palette) {
|
|
944
|
+
&:hover {
|
|
945
|
+
background: var(--color-palette-$(palette));
|
|
946
|
+
}
|
|
947
|
+
&-item {
|
|
948
|
+
&_$(palette) {
|
|
949
|
+
&:hover {
|
|
950
|
+
background: var(--color-palette-$(palette));
|
|
951
|
+
}
|
|
952
|
+
}
|
|
953
|
+
}
|
|
954
|
+
}
|
|
919
955
|
}
|
|
920
956
|
}
|
|
921
957
|
@each $selector in div, button, input, textarea {
|
|
@@ -1184,6 +1220,15 @@ textarea.fill {
|
|
|
1184
1220
|
@each $type in accent, primary, secondary, surface, error, warning, success,
|
|
1185
1221
|
danger, info, disabled {
|
|
1186
1222
|
@each $color in primary, secondary, tertiary, quaternary {
|
|
1223
|
+
.text&_active_$(type),
|
|
1224
|
+
&_active_$(type) {
|
|
1225
|
+
&-text {
|
|
1226
|
+
&-$(color) {
|
|
1227
|
+
color: var(--color-$(type)-text-$(color));
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
}
|
|
1231
|
+
.text&_active_hover_$(type),
|
|
1187
1232
|
&_active_hover_$(type) {
|
|
1188
1233
|
&-text {
|
|
1189
1234
|
&-$(color) {
|
|
@@ -1207,7 +1252,6 @@ textarea.fill {
|
|
|
1207
1252
|
}
|
|
1208
1253
|
}
|
|
1209
1254
|
}
|
|
1210
|
-
&_active_$(type),
|
|
1211
1255
|
&_$(type) {
|
|
1212
1256
|
&-text {
|
|
1213
1257
|
&-$(color) {
|
|
@@ -1230,6 +1274,11 @@ textarea.fill {
|
|
|
1230
1274
|
alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
|
|
1231
1275
|
gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
|
|
1232
1276
|
alto, athens-gray, sonic-silver {
|
|
1277
|
+
.text&_active_$(palette),
|
|
1278
|
+
&_active_$(palette) {
|
|
1279
|
+
color: var(--color-palette-$(palette));
|
|
1280
|
+
}
|
|
1281
|
+
.text&_active_hover_$(palette),
|
|
1233
1282
|
&_active_hover_$(palette) {
|
|
1234
1283
|
&:hover {
|
|
1235
1284
|
color: var(--color-palette-$(palette));
|
|
@@ -1245,7 +1294,6 @@ textarea.fill {
|
|
|
1245
1294
|
}
|
|
1246
1295
|
}
|
|
1247
1296
|
}
|
|
1248
|
-
&_active_$(palette),
|
|
1249
1297
|
&_$(palette) {
|
|
1250
1298
|
color: var(--color-palette-$(palette));
|
|
1251
1299
|
}
|
|
@@ -12,22 +12,26 @@ textarea.fill {
|
|
|
12
12
|
@each $type in accent, primary, secondary, surface, error, warning, success,
|
|
13
13
|
danger, info, disabled {
|
|
14
14
|
@each $color in primary, secondary, tertiary, quaternary {
|
|
15
|
-
&
|
|
15
|
+
&_$(type) {
|
|
16
|
+
&-item {
|
|
17
|
+
&-$(color) {
|
|
18
|
+
background: var(--color-$(type)-item-$(color));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
&-$(color) {
|
|
22
|
+
background: var(--color-$(type)-fill-$(color));
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
&_hover_$(type) {
|
|
16
26
|
&-item {
|
|
17
27
|
&-$(color) {
|
|
18
28
|
&:hover {
|
|
19
29
|
background: var(--color-$(type)-item-$(color));
|
|
20
30
|
}
|
|
21
|
-
|
|
22
31
|
&-hover {
|
|
23
32
|
&:hover {
|
|
24
33
|
background: var(--color-$(type)-item-$(color)-hover);
|
|
25
34
|
}
|
|
26
|
-
&-active {
|
|
27
|
-
&:hover {
|
|
28
|
-
background: var(--color-$(type)-item-$(color)-active-hover);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
35
|
}
|
|
32
36
|
}
|
|
33
37
|
}
|
|
@@ -39,16 +43,6 @@ textarea.fill {
|
|
|
39
43
|
&:hover {
|
|
40
44
|
background: var(--color-$(type)-fill-$(color)-hover);
|
|
41
45
|
}
|
|
42
|
-
&-active {
|
|
43
|
-
&:hover {
|
|
44
|
-
background: var(--color-$(type)-fill-$(color)-active-hover);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
&-active {
|
|
49
|
-
&:hover {
|
|
50
|
-
background: var(--color-$(type)-fill-$(color)-active);
|
|
51
|
-
}
|
|
52
46
|
}
|
|
53
47
|
}
|
|
54
48
|
&-hover {
|
|
@@ -59,16 +53,34 @@ textarea.fill {
|
|
|
59
53
|
}
|
|
60
54
|
}
|
|
61
55
|
}
|
|
62
|
-
&
|
|
56
|
+
.fill&_active_$(type),
|
|
57
|
+
&_active_$(type) {
|
|
58
|
+
&-item {
|
|
59
|
+
&-$(color) {
|
|
60
|
+
background: var(--color-$(type)-item-$(color));
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
&-$(color) {
|
|
64
|
+
background: var(--color-$(type)-fill-$(color));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
.fill&_active_hover_$(type),
|
|
68
|
+
&_active_hover_$(type) {
|
|
63
69
|
&-item {
|
|
64
70
|
&-$(color) {
|
|
65
71
|
&:hover {
|
|
66
72
|
background: var(--color-$(type)-item-$(color));
|
|
67
73
|
}
|
|
74
|
+
|
|
68
75
|
&-hover {
|
|
69
76
|
&:hover {
|
|
70
77
|
background: var(--color-$(type)-item-$(color)-hover);
|
|
71
78
|
}
|
|
79
|
+
&-active {
|
|
80
|
+
&:hover {
|
|
81
|
+
background: var(--color-$(type)-item-$(color)-active-hover);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
72
84
|
}
|
|
73
85
|
}
|
|
74
86
|
}
|
|
@@ -80,6 +92,16 @@ textarea.fill {
|
|
|
80
92
|
&:hover {
|
|
81
93
|
background: var(--color-$(type)-fill-$(color)-hover);
|
|
82
94
|
}
|
|
95
|
+
&-active {
|
|
96
|
+
&:hover {
|
|
97
|
+
background: var(--color-$(type)-fill-$(color)-active-hover);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
&-active {
|
|
102
|
+
&:hover {
|
|
103
|
+
background: var(--color-$(type)-fill-$(color)-active);
|
|
104
|
+
}
|
|
83
105
|
}
|
|
84
106
|
}
|
|
85
107
|
&-hover {
|
|
@@ -90,17 +112,6 @@ textarea.fill {
|
|
|
90
112
|
}
|
|
91
113
|
}
|
|
92
114
|
}
|
|
93
|
-
&_active_$(type),
|
|
94
|
-
&_$(type) {
|
|
95
|
-
&-item {
|
|
96
|
-
&-$(color) {
|
|
97
|
-
background: var(--color-$(type)-item-$(color));
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
&-$(color) {
|
|
101
|
-
background: var(--color-$(type)-fill-$(color));
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
115
|
}
|
|
105
116
|
}
|
|
106
117
|
@each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
|
|
@@ -116,15 +127,11 @@ textarea.fill {
|
|
|
116
127
|
dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
|
|
117
128
|
stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
|
|
118
129
|
sonic-silver {
|
|
119
|
-
&
|
|
120
|
-
|
|
121
|
-
background: var(--color-palette-$(palette));
|
|
122
|
-
}
|
|
130
|
+
&_$(palette) {
|
|
131
|
+
background: var(--color-palette-$(palette));
|
|
123
132
|
&-item {
|
|
124
133
|
&_$(palette) {
|
|
125
|
-
|
|
126
|
-
background: var(--color-palette-$(palette));
|
|
127
|
-
}
|
|
134
|
+
background: var(--color-palette-$(palette));
|
|
128
135
|
}
|
|
129
136
|
}
|
|
130
137
|
}
|
|
@@ -140,8 +147,8 @@ textarea.fill {
|
|
|
140
147
|
}
|
|
141
148
|
}
|
|
142
149
|
}
|
|
143
|
-
&_active_$(palette),
|
|
144
|
-
&
|
|
150
|
+
.fill&_active_$(palette),
|
|
151
|
+
&_active_$(palette) {
|
|
145
152
|
background: var(--color-palette-$(palette));
|
|
146
153
|
&-item {
|
|
147
154
|
&_$(palette) {
|
|
@@ -149,5 +156,18 @@ textarea.fill {
|
|
|
149
156
|
}
|
|
150
157
|
}
|
|
151
158
|
}
|
|
159
|
+
.fill&_active_hover_$(palette),
|
|
160
|
+
&_active_hover_$(palette) {
|
|
161
|
+
&:hover {
|
|
162
|
+
background: var(--color-palette-$(palette));
|
|
163
|
+
}
|
|
164
|
+
&-item {
|
|
165
|
+
&_$(palette) {
|
|
166
|
+
&:hover {
|
|
167
|
+
background: var(--color-palette-$(palette));
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
152
172
|
}
|
|
153
173
|
}
|
|
@@ -9,6 +9,15 @@
|
|
|
9
9
|
@each $type in accent, primary, secondary, surface, error, warning, success,
|
|
10
10
|
danger, info, disabled {
|
|
11
11
|
@each $color in primary, secondary, tertiary, quaternary {
|
|
12
|
+
.text&_active_$(type),
|
|
13
|
+
&_active_$(type) {
|
|
14
|
+
&-text {
|
|
15
|
+
&-$(color) {
|
|
16
|
+
color: var(--color-$(type)-text-$(color));
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
.text&_active_hover_$(type),
|
|
12
21
|
&_active_hover_$(type) {
|
|
13
22
|
&-text {
|
|
14
23
|
&-$(color) {
|
|
@@ -32,7 +41,6 @@
|
|
|
32
41
|
}
|
|
33
42
|
}
|
|
34
43
|
}
|
|
35
|
-
&_active_$(type),
|
|
36
44
|
&_$(type) {
|
|
37
45
|
&-text {
|
|
38
46
|
&-$(color) {
|
|
@@ -55,6 +63,11 @@
|
|
|
55
63
|
alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
|
|
56
64
|
gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
|
|
57
65
|
alto, athens-gray, sonic-silver {
|
|
66
|
+
.text&_active_$(palette),
|
|
67
|
+
&_active_$(palette) {
|
|
68
|
+
color: var(--color-palette-$(palette));
|
|
69
|
+
}
|
|
70
|
+
.text&_active_hover_$(palette),
|
|
58
71
|
&_active_hover_$(palette) {
|
|
59
72
|
&:hover {
|
|
60
73
|
color: var(--color-palette-$(palette));
|
|
@@ -70,7 +83,6 @@
|
|
|
70
83
|
}
|
|
71
84
|
}
|
|
72
85
|
}
|
|
73
|
-
&_active_$(palette),
|
|
74
86
|
&_$(palette) {
|
|
75
87
|
color: var(--color-palette-$(palette));
|
|
76
88
|
}
|