@livepeer/design-system 1.0.13 → 1.0.15
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/components/AlertDialog.d.ts +2 -1
- package/dist/index.es.js +123 -140
- package/dist/index.js +123 -140
- package/dist/stitches.config.d.ts +2 -2
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -39,8 +39,8 @@ var styled = (_a$8 = createStitches({
|
|
|
39
39
|
theme: {
|
|
40
40
|
colors: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, gray), mauve), slate), sage), olive), sand), tomato), red), crimson), pink), plum), purple), violet), indigo), blue), sky), mint), cyan), teal), green), grass), lime), yellow), amber), orange), brown), bronze), gold), whiteA), blackA), {
|
|
41
41
|
// Semantic colors
|
|
42
|
-
hiContrast: "$
|
|
43
|
-
// loContrast: '$
|
|
42
|
+
hiContrast: "$neutral12",
|
|
43
|
+
// loContrast: '$neutral1',
|
|
44
44
|
loContrast: "white", canvas: "hsl(0 0% 93%)", panel: "white", transparentPanel: "hsl(0 0% 0% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
|
|
45
45
|
fonts: {
|
|
46
46
|
untitled: "Untitled Sans, -apple-system, system-ui, sans-serif",
|
|
@@ -68,28 +68,6 @@ var styled = (_a$8 = createStitches({
|
|
|
68
68
|
8: "65px",
|
|
69
69
|
9: "80px",
|
|
70
70
|
},
|
|
71
|
-
// space: {
|
|
72
|
-
// 1: '4px',
|
|
73
|
-
// 2: '8px',
|
|
74
|
-
// 3: '16px',
|
|
75
|
-
// 4: '20px',
|
|
76
|
-
// 5: '24px',
|
|
77
|
-
// 6: '32px',
|
|
78
|
-
// 7: '48px',
|
|
79
|
-
// 8: '64px',
|
|
80
|
-
// 9: '80px',
|
|
81
|
-
// },
|
|
82
|
-
// sizes: {
|
|
83
|
-
// 1: '4px',
|
|
84
|
-
// 2: '8px',
|
|
85
|
-
// 3: '16px',
|
|
86
|
-
// 4: '20px',
|
|
87
|
-
// 5: '24px',
|
|
88
|
-
// 6: '32px',
|
|
89
|
-
// 7: '48px',
|
|
90
|
-
// 8: '64px',
|
|
91
|
-
// 9: '80px',
|
|
92
|
-
// },
|
|
93
71
|
fontSizes: {
|
|
94
72
|
1: "12px",
|
|
95
73
|
2: "13px",
|
|
@@ -101,17 +79,6 @@ var styled = (_a$8 = createStitches({
|
|
|
101
79
|
8: "35px",
|
|
102
80
|
9: "59px",
|
|
103
81
|
},
|
|
104
|
-
// fontSizes: {
|
|
105
|
-
// 1: '11px',
|
|
106
|
-
// 2: '12px',
|
|
107
|
-
// 3: '15px',
|
|
108
|
-
// 4: '17px',
|
|
109
|
-
// 5: '20px',
|
|
110
|
-
// 6: '22px',
|
|
111
|
-
// 7: '28px',
|
|
112
|
-
// 8: '36px',
|
|
113
|
-
// 9: '60px',
|
|
114
|
-
// },
|
|
115
82
|
radii: {
|
|
116
83
|
1: "4px",
|
|
117
84
|
2: "6px",
|
|
@@ -257,7 +224,7 @@ var styled = (_a$8 = createStitches({
|
|
|
257
224
|
createTheme("dark-theme", {
|
|
258
225
|
colors: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, grayDark), mauveDark), slateDark), sageDark), oliveDark), sandDark), tomatoDark), redDark), crimsonDark), pinkDark), plumDark), purpleDark), violetDark), indigoDark), blueDark), skyDark), mintDark), cyanDark), tealDark), greenDark), grassDark), limeDark), yellowDark), amberDark), orangeDark), brownDark), bronzeDark), goldDark), {
|
|
259
226
|
// Semantic colors
|
|
260
|
-
hiContrast: "$
|
|
227
|
+
hiContrast: "$neutral12", loContrast: "$neutral1", canvas: "hsl(0 0% 15%)", panel: "$neutral3", transparentPanel: "hsl(0 100% 100% / 97%)", shadowLight: "hsl(206 22% 7% / 35%)", shadowDark: "hsl(206 22% 7% / 20%)" }),
|
|
261
228
|
});
|
|
262
229
|
var lightThemeColors = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, gray), mauve), slate), sage), olive), sand), tomato), red), crimson), pink), plum), purple), violet), indigo), blue), sky), mint), cyan), teal), green), grass), lime), yellow), amber), orange), brown), bronze), gold), whiteA), blackA);
|
|
263
230
|
var darkThemeColors = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, grayDark), mauveDark), slateDark), sageDark), oliveDark), sandDark), tomatoDark), redDark), crimsonDark), pinkDark), plumDark), purpleDark), violetDark), indigoDark), blueDark), skyDark), mintDark), cyanDark), tealDark), greenDark), grassDark), limeDark), yellowDark), amberDark), orangeDark), brownDark), bronzeDark), goldDark), whiteA), blackA);
|
|
@@ -329,7 +296,7 @@ var getThemes = function () {
|
|
|
329
296
|
|
|
330
297
|
var StyledAccordion = styled(AccordionPrimitive.Root, {
|
|
331
298
|
boxShadow: "0 0 0 1px $colors$neutral6",
|
|
332
|
-
borderRadius: "$
|
|
299
|
+
borderRadius: "$2",
|
|
333
300
|
});
|
|
334
301
|
var Accordion = React.forwardRef(function (_a, forwardedRef) {
|
|
335
302
|
var children = _a.children, props = __rest(_a, ["children"]);
|
|
@@ -337,9 +304,26 @@ var Accordion = React.forwardRef(function (_a, forwardedRef) {
|
|
|
337
304
|
});
|
|
338
305
|
Accordion.displayName = "Accordion";
|
|
339
306
|
var StyledItem = styled(AccordionPrimitive.Item, {
|
|
340
|
-
borderTop: "1px solid $colors$
|
|
307
|
+
borderTop: "1px solid $colors$neutral6",
|
|
308
|
+
"&:first-of-type": {
|
|
309
|
+
borderTop: "none",
|
|
310
|
+
},
|
|
341
311
|
"&:last-of-type": {
|
|
342
|
-
borderBottom: "
|
|
312
|
+
borderBottom: "none",
|
|
313
|
+
},
|
|
314
|
+
"&:hover": {
|
|
315
|
+
"&:first-of-type": {
|
|
316
|
+
button: {
|
|
317
|
+
borderTopLeftRadius: "$2",
|
|
318
|
+
borderTopRightRadius: "$2",
|
|
319
|
+
},
|
|
320
|
+
},
|
|
321
|
+
"&:last-of-type": {
|
|
322
|
+
button: {
|
|
323
|
+
borderBottomLeftRadius: "$2",
|
|
324
|
+
borderBottomRightRadius: "$2",
|
|
325
|
+
},
|
|
326
|
+
},
|
|
343
327
|
},
|
|
344
328
|
});
|
|
345
329
|
var StyledHeader = styled(AccordionPrimitive.Header, {
|
|
@@ -361,14 +345,12 @@ var StyledTrigger = styled(AccordionPrimitive.Trigger, {
|
|
|
361
345
|
p: "$2",
|
|
362
346
|
color: "$hiContrast",
|
|
363
347
|
width: "100%",
|
|
364
|
-
"
|
|
365
|
-
"
|
|
366
|
-
backgroundColor: "$slate2",
|
|
367
|
-
},
|
|
348
|
+
"&:hover": {
|
|
349
|
+
backgroundColor: "$neutral2",
|
|
368
350
|
},
|
|
369
351
|
"&:focus": {
|
|
370
352
|
outline: "none",
|
|
371
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
353
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
372
354
|
},
|
|
373
355
|
svg: {
|
|
374
356
|
transition: "transform 175ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
@@ -413,11 +395,11 @@ var Alert = styled("div", {
|
|
|
413
395
|
variant: {
|
|
414
396
|
loContrast: {
|
|
415
397
|
backgroundColor: "$loContrast",
|
|
416
|
-
borderColor: "$
|
|
398
|
+
borderColor: "$neutral6",
|
|
417
399
|
},
|
|
418
400
|
gray: {
|
|
419
|
-
backgroundColor: "$
|
|
420
|
-
borderColor: "$
|
|
401
|
+
backgroundColor: "$neutral2",
|
|
402
|
+
borderColor: "$neutral6",
|
|
421
403
|
},
|
|
422
404
|
blue: {
|
|
423
405
|
backgroundColor: "$blue2",
|
|
@@ -529,7 +511,7 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyles,
|
|
|
529
511
|
});
|
|
530
512
|
var AlertDialogContent = function (_a) {
|
|
531
513
|
var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = __rest(_a, ["children", "animation"]);
|
|
532
|
-
return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props, { style: { overflow:
|
|
514
|
+
return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props, { style: { overflow: "auto" } }), children));
|
|
533
515
|
};
|
|
534
516
|
var AlertDialogTitle = AlertDialogPrimitive.Title;
|
|
535
517
|
var AlertDialogDescription = AlertDialogPrimitive.Description;
|
|
@@ -558,7 +540,7 @@ var Status = styled("div", {
|
|
|
558
540
|
},
|
|
559
541
|
variant: {
|
|
560
542
|
gray: {
|
|
561
|
-
backgroundColor: "$
|
|
543
|
+
backgroundColor: "$neutral7",
|
|
562
544
|
},
|
|
563
545
|
blue: {
|
|
564
546
|
backgroundColor: "$blue9",
|
|
@@ -642,7 +624,7 @@ var StyledAvatar = styled(AvatarPrimitive.Root, {
|
|
|
642
624
|
color: "$loContrast",
|
|
643
625
|
},
|
|
644
626
|
gray: {
|
|
645
|
-
backgroundColor: "$
|
|
627
|
+
backgroundColor: "$neutral5",
|
|
646
628
|
},
|
|
647
629
|
tomato: {
|
|
648
630
|
backgroundColor: "$tomato5",
|
|
@@ -846,9 +828,9 @@ var Badge = styled("span", {
|
|
|
846
828
|
userSelect: "none",
|
|
847
829
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
848
830
|
"&:disabled": {
|
|
849
|
-
backgroundColor: "$
|
|
831
|
+
backgroundColor: "$neutral3",
|
|
850
832
|
pointerEvents: "none",
|
|
851
|
-
color: "$
|
|
833
|
+
color: "$neutral8",
|
|
852
834
|
},
|
|
853
835
|
"&::before": {
|
|
854
836
|
boxSizing: "border-box",
|
|
@@ -859,9 +841,9 @@ var Badge = styled("span", {
|
|
|
859
841
|
content: '""',
|
|
860
842
|
},
|
|
861
843
|
// Custom
|
|
862
|
-
backgroundColor: "$
|
|
844
|
+
backgroundColor: "$neutral3",
|
|
863
845
|
borderRadius: "$pill",
|
|
864
|
-
color: "$
|
|
846
|
+
color: "$neutral11",
|
|
865
847
|
whiteSpace: "nowrap",
|
|
866
848
|
variants: {
|
|
867
849
|
size: {
|
|
@@ -892,10 +874,10 @@ var Badge = styled("span", {
|
|
|
892
874
|
},
|
|
893
875
|
},
|
|
894
876
|
gray: {
|
|
895
|
-
backgroundColor: "$
|
|
896
|
-
color: "$
|
|
877
|
+
backgroundColor: "$neutral3",
|
|
878
|
+
color: "$neutral11",
|
|
897
879
|
"&:focus": {
|
|
898
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
880
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
899
881
|
},
|
|
900
882
|
},
|
|
901
883
|
red: {
|
|
@@ -1661,11 +1643,11 @@ var StyledCheckbox = styled(CheckboxPrimitive.Root, {
|
|
|
1661
1643
|
padding: "0",
|
|
1662
1644
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
1663
1645
|
color: "$hiContrast",
|
|
1664
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1646
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
1665
1647
|
overflow: "hidden",
|
|
1666
1648
|
"@hover": {
|
|
1667
1649
|
"&:hover": {
|
|
1668
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1650
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
1669
1651
|
},
|
|
1670
1652
|
},
|
|
1671
1653
|
"&:focus": {
|
|
@@ -1711,8 +1693,8 @@ var Code = styled("code", {
|
|
|
1711
1693
|
variants: {
|
|
1712
1694
|
variant: {
|
|
1713
1695
|
gray: {
|
|
1714
|
-
backgroundColor: "$
|
|
1715
|
-
color: "$
|
|
1696
|
+
backgroundColor: "$neutral3",
|
|
1697
|
+
color: "$neutral11",
|
|
1716
1698
|
},
|
|
1717
1699
|
violet: {
|
|
1718
1700
|
backgroundColor: "$violet3",
|
|
@@ -1884,11 +1866,11 @@ var itemCss = css(baseItemCss, {
|
|
|
1884
1866
|
color: "white",
|
|
1885
1867
|
},
|
|
1886
1868
|
"&[data-disabled]": {
|
|
1887
|
-
color: "$
|
|
1869
|
+
color: "$neutral9",
|
|
1888
1870
|
},
|
|
1889
1871
|
});
|
|
1890
1872
|
var labelCss = css(baseItemCss, {
|
|
1891
|
-
color: "$
|
|
1873
|
+
color: "$neutral11",
|
|
1892
1874
|
});
|
|
1893
1875
|
var menuCss = css({
|
|
1894
1876
|
boxSizing: "border-box",
|
|
@@ -1898,7 +1880,7 @@ var menuCss = css({
|
|
|
1898
1880
|
var separatorCss = css({
|
|
1899
1881
|
height: 1,
|
|
1900
1882
|
my: "$1",
|
|
1901
|
-
backgroundColor: "$
|
|
1883
|
+
backgroundColor: "$neutral6",
|
|
1902
1884
|
});
|
|
1903
1885
|
var Menu = styled(MenuPrimitive.Root, menuCss);
|
|
1904
1886
|
styled(MenuPrimitive.Content, panelStyles);
|
|
@@ -2152,7 +2134,7 @@ var TextField = StyledTextField;
|
|
|
2152
2134
|
var SelectWrapper = styled("div", {
|
|
2153
2135
|
backgroundColor: "$loContrast",
|
|
2154
2136
|
borderRadius: "$2",
|
|
2155
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2137
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2156
2138
|
color: "$hiContrast",
|
|
2157
2139
|
fontFamily: "$untitled",
|
|
2158
2140
|
fontSize: "$1",
|
|
@@ -2209,37 +2191,37 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2209
2191
|
},
|
|
2210
2192
|
_a$6["& ".concat(Button)] = {
|
|
2211
2193
|
borderRadius: 0,
|
|
2212
|
-
boxShadow: "inset 0 1px $colors$
|
|
2194
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2213
2195
|
"&:hover": {
|
|
2214
|
-
boxShadow: "-1px 0 $colors$
|
|
2196
|
+
boxShadow: "-1px 0 $colors$neutral8, inset 0 1px $colors$neutral8, inset -1px 0 $colors$neutral8, inset 0 -1px $colors$neutral8",
|
|
2215
2197
|
},
|
|
2216
2198
|
"&:focus": {
|
|
2217
2199
|
zIndex: 1,
|
|
2218
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2200
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2219
2201
|
},
|
|
2220
2202
|
"&:first-child": {
|
|
2221
2203
|
borderTopLeftRadius: "$1",
|
|
2222
2204
|
borderBottomLeftRadius: "$1",
|
|
2223
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2205
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2224
2206
|
"&:hover": {
|
|
2225
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2207
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
2226
2208
|
},
|
|
2227
2209
|
"&:focus": {
|
|
2228
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2210
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2229
2211
|
},
|
|
2230
2212
|
},
|
|
2231
2213
|
"&:last-child": {
|
|
2232
2214
|
borderTopRightRadius: "$1",
|
|
2233
2215
|
borderBottomRightRadius: "$1",
|
|
2234
|
-
boxShadow: "inset 0 1px $colors$
|
|
2216
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2235
2217
|
"&:focus": {
|
|
2236
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2218
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2237
2219
|
},
|
|
2238
2220
|
},
|
|
2239
2221
|
},
|
|
2240
2222
|
_a$6["& ".concat(TextField)] = {
|
|
2241
2223
|
borderRadius: 0,
|
|
2242
|
-
boxShadow: "inset 0 1px $colors$
|
|
2224
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2243
2225
|
"&:focus": {
|
|
2244
2226
|
zIndex: 1,
|
|
2245
2227
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
@@ -2247,7 +2229,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2247
2229
|
"&:first-child": {
|
|
2248
2230
|
borderTopLeftRadius: "$1",
|
|
2249
2231
|
borderBottomLeftRadius: "$1",
|
|
2250
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2232
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2251
2233
|
"&:focus": {
|
|
2252
2234
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2253
2235
|
},
|
|
@@ -2255,7 +2237,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2255
2237
|
"&:last-child": {
|
|
2256
2238
|
borderTopRightRadius: "$1",
|
|
2257
2239
|
borderBottomRightRadius: "$1",
|
|
2258
|
-
boxShadow: "inset 0 1px $colors$
|
|
2240
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2259
2241
|
"&:focus": {
|
|
2260
2242
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2261
2243
|
},
|
|
@@ -2263,14 +2245,14 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2263
2245
|
},
|
|
2264
2246
|
_a$6["& ".concat(Select)] = {
|
|
2265
2247
|
borderRadius: 0,
|
|
2266
|
-
boxShadow: "inset 0 1px $colors$
|
|
2248
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2267
2249
|
"&:focus-within": {
|
|
2268
2250
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2269
2251
|
},
|
|
2270
2252
|
"&:first-child": {
|
|
2271
2253
|
borderTopLeftRadius: "$1",
|
|
2272
2254
|
borderBottomLeftRadius: "$1",
|
|
2273
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2255
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2274
2256
|
"&:focus-within": {
|
|
2275
2257
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2276
2258
|
},
|
|
@@ -2278,7 +2260,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2278
2260
|
"&:last-child": {
|
|
2279
2261
|
borderTopRightRadius: "$1",
|
|
2280
2262
|
borderBottomRightRadius: "$1",
|
|
2281
|
-
boxShadow: "inset 0 1px $colors$
|
|
2263
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2282
2264
|
"&:focus-within": {
|
|
2283
2265
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2284
2266
|
},
|
|
@@ -2315,23 +2297,23 @@ var IconButton = styled("button", {
|
|
|
2315
2297
|
boxSizing: "border-box",
|
|
2316
2298
|
},
|
|
2317
2299
|
backgroundColor: "$loContrast",
|
|
2318
|
-
border: "1px solid $
|
|
2300
|
+
border: "1px solid $neutral7",
|
|
2319
2301
|
"@hover": {
|
|
2320
2302
|
"&:hover": {
|
|
2321
|
-
borderColor: "$
|
|
2303
|
+
borderColor: "$neutral8",
|
|
2322
2304
|
},
|
|
2323
2305
|
},
|
|
2324
2306
|
"&:active": {
|
|
2325
|
-
backgroundColor: "$
|
|
2307
|
+
backgroundColor: "$neutral2",
|
|
2326
2308
|
},
|
|
2327
2309
|
"&:focus": {
|
|
2328
|
-
borderColor: "$
|
|
2329
|
-
boxShadow: "0 0 0 1px $colors$
|
|
2310
|
+
borderColor: "$neutral8",
|
|
2311
|
+
boxShadow: "0 0 0 1px $colors$neutral8",
|
|
2330
2312
|
},
|
|
2331
2313
|
"&:disabled": {
|
|
2332
2314
|
pointerEvents: "none",
|
|
2333
2315
|
backgroundColor: "transparent",
|
|
2334
|
-
color: "$
|
|
2316
|
+
color: "$neutral6",
|
|
2335
2317
|
},
|
|
2336
2318
|
variants: {
|
|
2337
2319
|
size: {
|
|
@@ -2362,17 +2344,17 @@ var IconButton = styled("button", {
|
|
|
2362
2344
|
borderWidth: "0",
|
|
2363
2345
|
"@hover": {
|
|
2364
2346
|
"&:hover": {
|
|
2365
|
-
backgroundColor: "$
|
|
2347
|
+
backgroundColor: "$neutralA3",
|
|
2366
2348
|
},
|
|
2367
2349
|
},
|
|
2368
2350
|
"&:focus": {
|
|
2369
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2351
|
+
boxShadow: "inset 0 0 0 1px $colors$neutralA8, 0 0 0 1px $colors$neutralA8",
|
|
2370
2352
|
},
|
|
2371
2353
|
"&:active": {
|
|
2372
|
-
backgroundColor: "$
|
|
2354
|
+
backgroundColor: "$neutralA4",
|
|
2373
2355
|
},
|
|
2374
2356
|
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
|
|
2375
|
-
backgroundColor: "$
|
|
2357
|
+
backgroundColor: "$neutralA4",
|
|
2376
2358
|
},
|
|
2377
2359
|
},
|
|
2378
2360
|
raised: {
|
|
@@ -2383,17 +2365,17 @@ var IconButton = styled("button", {
|
|
|
2383
2365
|
},
|
|
2384
2366
|
},
|
|
2385
2367
|
"&:focus": {
|
|
2386
|
-
borderColor: "$
|
|
2387
|
-
boxShadow: "0 0 0 1px $colors$
|
|
2368
|
+
borderColor: "$neutral8",
|
|
2369
|
+
boxShadow: "0 0 0 1px $colors$neutral8, 0 16px 32px hsl(206deg 12% 5% / 25%), 0 3px 5px hsl(0deg 0% 0% / 10%)",
|
|
2388
2370
|
},
|
|
2389
2371
|
"&:active": {
|
|
2390
|
-
backgroundColor: "$
|
|
2372
|
+
backgroundColor: "$neutral4",
|
|
2391
2373
|
},
|
|
2392
2374
|
},
|
|
2393
2375
|
},
|
|
2394
2376
|
state: {
|
|
2395
2377
|
active: {
|
|
2396
|
-
backgroundColor: "$
|
|
2378
|
+
backgroundColor: "$neutral4",
|
|
2397
2379
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2398
2380
|
"@hover": {
|
|
2399
2381
|
"&:hover": {
|
|
@@ -2401,11 +2383,11 @@ var IconButton = styled("button", {
|
|
|
2401
2383
|
},
|
|
2402
2384
|
},
|
|
2403
2385
|
"&:active": {
|
|
2404
|
-
backgroundColor: "$
|
|
2386
|
+
backgroundColor: "$neutral4",
|
|
2405
2387
|
},
|
|
2406
2388
|
},
|
|
2407
2389
|
waiting: {
|
|
2408
|
-
backgroundColor: "$
|
|
2390
|
+
backgroundColor: "$neutral4",
|
|
2409
2391
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2410
2392
|
"@hover": {
|
|
2411
2393
|
"&:hover": {
|
|
@@ -2413,7 +2395,7 @@ var IconButton = styled("button", {
|
|
|
2413
2395
|
},
|
|
2414
2396
|
},
|
|
2415
2397
|
"&:active": {
|
|
2416
|
-
backgroundColor: "$
|
|
2398
|
+
backgroundColor: "$neutral4",
|
|
2417
2399
|
},
|
|
2418
2400
|
},
|
|
2419
2401
|
},
|
|
@@ -2529,7 +2511,7 @@ for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairin
|
|
|
2529
2511
|
colorVariants[color] = {
|
|
2530
2512
|
"&:focus": {
|
|
2531
2513
|
outline: "none",
|
|
2532
|
-
backgroundColor: "$"
|
|
2514
|
+
backgroundColor: "$neutral4",
|
|
2533
2515
|
color: "$hiContrast",
|
|
2534
2516
|
},
|
|
2535
2517
|
};
|
|
@@ -2577,6 +2559,9 @@ var DropdownMenuRadioItemBase = React.forwardRef(function (_a, forwardedRef) {
|
|
|
2577
2559
|
});
|
|
2578
2560
|
DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
|
|
2579
2561
|
var DropdownMenuItem = styled(DropdownMenuItemBase, {
|
|
2562
|
+
"&:focus": {
|
|
2563
|
+
backgroundColor: "$neutral4",
|
|
2564
|
+
},
|
|
2580
2565
|
variants: {
|
|
2581
2566
|
color: __assign({ primary: {
|
|
2582
2567
|
"&:focus": {
|
|
@@ -2586,9 +2571,6 @@ var DropdownMenuItem = styled(DropdownMenuItemBase, {
|
|
|
2586
2571
|
},
|
|
2587
2572
|
} }, colorVariants),
|
|
2588
2573
|
},
|
|
2589
|
-
defaultVariants: {
|
|
2590
|
-
color: "primary",
|
|
2591
|
-
},
|
|
2592
2574
|
});
|
|
2593
2575
|
var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
|
|
2594
2576
|
variants: {
|
|
@@ -2605,6 +2587,7 @@ var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
|
|
|
2605
2587
|
},
|
|
2606
2588
|
});
|
|
2607
2589
|
var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
|
|
2590
|
+
backgroundColor: "$neutral4",
|
|
2608
2591
|
variants: {
|
|
2609
2592
|
color: __assign({ primary: {
|
|
2610
2593
|
"&:focus": {
|
|
@@ -2866,7 +2849,7 @@ var Text = styled("span", {
|
|
|
2866
2849
|
color: "$bronze11",
|
|
2867
2850
|
},
|
|
2868
2851
|
gray: {
|
|
2869
|
-
color: "$
|
|
2852
|
+
color: "$neutral11",
|
|
2870
2853
|
},
|
|
2871
2854
|
primary: {
|
|
2872
2855
|
color: "$primary11",
|
|
@@ -3051,7 +3034,7 @@ var Kbd = styled("kbd", {
|
|
|
3051
3034
|
userSelect: "none",
|
|
3052
3035
|
cursor: "default",
|
|
3053
3036
|
whiteSpace: "nowrap",
|
|
3054
|
-
boxShadow: "\n inset 0 0.5px rgba(255, 255, 255, 0.1),\n inset 0 1px 5px $colors$
|
|
3037
|
+
boxShadow: "\n inset 0 0.5px rgba(255, 255, 255, 0.1),\n inset 0 1px 5px $colors$neutral2,\n 0px 0px 0px 0.5px $colors$neutral8,\n 0px 2px 1px -1px $colors$neutral8,\n 0 1px $colors$neutral8",
|
|
3055
3038
|
textShadow: "0 0 1px rgba(255, 255, 255, 0.5)",
|
|
3056
3039
|
fontFamily: "inherit",
|
|
3057
3040
|
fontWeight: 400,
|
|
@@ -3212,7 +3195,7 @@ var Paragraph = React.forwardRef(function (props, forwardedRef) {
|
|
|
3212
3195
|
var textCss = {
|
|
3213
3196
|
1: { lineHeight: "25px", "@bp2": { lineHeight: "27px" } },
|
|
3214
3197
|
2: {
|
|
3215
|
-
color: "$
|
|
3198
|
+
color: "$neutral11",
|
|
3216
3199
|
lineHeight: "27px",
|
|
3217
3200
|
"@bp2": { lineHeight: "30px" },
|
|
3218
3201
|
},
|
|
@@ -3263,13 +3246,13 @@ var StyledProgressBar = styled(ProgressPrimitive.Root, {
|
|
|
3263
3246
|
overflow: "hidden",
|
|
3264
3247
|
borderRadius: "$pill",
|
|
3265
3248
|
'&[data-state="indeterminate"]': {
|
|
3266
|
-
backgroundColor: "$
|
|
3249
|
+
backgroundColor: "$neutral4",
|
|
3267
3250
|
"&::after": {
|
|
3268
3251
|
animationName: indeterminateProgress,
|
|
3269
3252
|
animationDuration: "1500ms",
|
|
3270
3253
|
animationIterationCount: "infinite",
|
|
3271
3254
|
animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3272
|
-
backgroundColor: "$
|
|
3255
|
+
backgroundColor: "$neutral7",
|
|
3273
3256
|
boxSizing: "border-box",
|
|
3274
3257
|
borderRadius: "$pill",
|
|
3275
3258
|
content: '""',
|
|
@@ -3283,7 +3266,7 @@ var StyledProgressBar = styled(ProgressPrimitive.Root, {
|
|
|
3283
3266
|
variants: {
|
|
3284
3267
|
variant: {
|
|
3285
3268
|
gray: {
|
|
3286
|
-
background: "$
|
|
3269
|
+
background: "$neutral8",
|
|
3287
3270
|
},
|
|
3288
3271
|
blue: {
|
|
3289
3272
|
backgroundColor: "$blue9",
|
|
@@ -3305,7 +3288,7 @@ var ProgressBarIndicator = styled(ProgressPrimitive.Indicator, {
|
|
|
3305
3288
|
bottom: 0,
|
|
3306
3289
|
left: 0,
|
|
3307
3290
|
width: "100%",
|
|
3308
|
-
backgroundColor: "$
|
|
3291
|
+
backgroundColor: "$neutral4",
|
|
3309
3292
|
transition: "transform 150ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3310
3293
|
});
|
|
3311
3294
|
var ProgressBar = React.forwardRef(function (_a, forwardedRef) {
|
|
@@ -3469,11 +3452,11 @@ var StyledRadio$1 = styled(RadioGroupPrimitive.Item, {
|
|
|
3469
3452
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
3470
3453
|
borderRadius: "50%",
|
|
3471
3454
|
color: "$hiContrast",
|
|
3472
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3455
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
3473
3456
|
overflow: "hidden",
|
|
3474
3457
|
"@hover": {
|
|
3475
3458
|
"&:hover": {
|
|
3476
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3459
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
3477
3460
|
},
|
|
3478
3461
|
},
|
|
3479
3462
|
"&:focus": {
|
|
@@ -3598,7 +3581,7 @@ var Separator = styled(SeparatorPrimitive.Root, {
|
|
|
3598
3581
|
border: "none",
|
|
3599
3582
|
margin: 0,
|
|
3600
3583
|
flexShrink: 0,
|
|
3601
|
-
backgroundColor: "$
|
|
3584
|
+
backgroundColor: "$neutral6",
|
|
3602
3585
|
cursor: "default",
|
|
3603
3586
|
variants: {
|
|
3604
3587
|
size: {
|
|
@@ -3757,25 +3740,25 @@ var SimpleToggle = styled(TogglePrimitive.Root, {
|
|
|
3757
3740
|
backgroundColor: "transparent",
|
|
3758
3741
|
"@hover": {
|
|
3759
3742
|
"&:hover": {
|
|
3760
|
-
backgroundColor: "$
|
|
3743
|
+
backgroundColor: "$neutralA3",
|
|
3761
3744
|
},
|
|
3762
3745
|
},
|
|
3763
3746
|
"&:active": {
|
|
3764
|
-
backgroundColor: "$
|
|
3747
|
+
backgroundColor: "$neutralA4",
|
|
3765
3748
|
},
|
|
3766
3749
|
"&:focus": {
|
|
3767
|
-
boxShadow: "inset 0 0 0 1px $
|
|
3750
|
+
boxShadow: "inset 0 0 0 1px $neutralA8, 0 0 0 1px $neutralA8",
|
|
3768
3751
|
zIndex: 1,
|
|
3769
3752
|
},
|
|
3770
3753
|
'&[data-state="on"]': {
|
|
3771
|
-
backgroundColor: "$
|
|
3754
|
+
backgroundColor: "$neutralA5",
|
|
3772
3755
|
"@hover": {
|
|
3773
3756
|
"&:hover": {
|
|
3774
|
-
backgroundColor: "$
|
|
3757
|
+
backgroundColor: "$neutralA5",
|
|
3775
3758
|
},
|
|
3776
3759
|
},
|
|
3777
3760
|
"&:active": {
|
|
3778
|
-
backgroundColor: "$
|
|
3761
|
+
backgroundColor: "$neutralA7",
|
|
3779
3762
|
},
|
|
3780
3763
|
},
|
|
3781
3764
|
variants: {
|
|
@@ -3795,7 +3778,7 @@ var pulse = keyframes({
|
|
|
3795
3778
|
"100%": { opacity: "100%" },
|
|
3796
3779
|
});
|
|
3797
3780
|
var Skeleton = styled("div", {
|
|
3798
|
-
backgroundColor: "$
|
|
3781
|
+
backgroundColor: "$neutral4",
|
|
3799
3782
|
position: "relative",
|
|
3800
3783
|
overflow: "hidden",
|
|
3801
3784
|
"&::after": {
|
|
@@ -3804,7 +3787,7 @@ var Skeleton = styled("div", {
|
|
|
3804
3787
|
animationDirection: "alternate",
|
|
3805
3788
|
animationIterationCount: "infinite",
|
|
3806
3789
|
animationTimingFunction: "ease-in-out",
|
|
3807
|
-
backgroundColor: "$
|
|
3790
|
+
backgroundColor: "$neutral6",
|
|
3808
3791
|
borderRadius: "inherit",
|
|
3809
3792
|
bottom: 0,
|
|
3810
3793
|
content: '""',
|
|
@@ -3870,7 +3853,7 @@ var _a$2;
|
|
|
3870
3853
|
var SliderTrack = styled(SliderPrimitive.Track, {
|
|
3871
3854
|
position: "relative",
|
|
3872
3855
|
flexGrow: 1,
|
|
3873
|
-
backgroundColor: "$
|
|
3856
|
+
backgroundColor: "$neutral7",
|
|
3874
3857
|
borderRadius: "$pill",
|
|
3875
3858
|
'&[data-orientation="horizontal"]': {
|
|
3876
3859
|
height: 2,
|
|
@@ -3936,7 +3919,7 @@ var StyledSlider = styled(SliderPrimitive.Root, {
|
|
|
3936
3919
|
"@hover": {
|
|
3937
3920
|
"&:hover": (_a$2 = {},
|
|
3938
3921
|
_a$2["& ".concat(SliderTrack)] = {
|
|
3939
|
-
backgroundColor: "$
|
|
3922
|
+
backgroundColor: "$neutral8",
|
|
3940
3923
|
},
|
|
3941
3924
|
_a$2["& ".concat(SliderThumb)] = {
|
|
3942
3925
|
opacity: "1",
|
|
@@ -4265,11 +4248,11 @@ var StyledSwitch = styled(SwitchPrimitive.Root, {
|
|
|
4265
4248
|
margin: "0",
|
|
4266
4249
|
outline: "none",
|
|
4267
4250
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4268
|
-
backgroundColor: "$
|
|
4251
|
+
backgroundColor: "$neutral5",
|
|
4269
4252
|
borderRadius: "$pill",
|
|
4270
4253
|
position: "relative",
|
|
4271
4254
|
"&:focus": {
|
|
4272
|
-
boxShadow: "0 0 0 2px $colors$
|
|
4255
|
+
boxShadow: "0 0 0 2px $colors$neutral8",
|
|
4273
4256
|
},
|
|
4274
4257
|
'&[data-state="checked"]': {
|
|
4275
4258
|
backgroundColor: "$blue9",
|
|
@@ -4431,7 +4414,7 @@ var TabLink = styled("a", {
|
|
|
4431
4414
|
outline: "none",
|
|
4432
4415
|
alignItems: "center",
|
|
4433
4416
|
justifyContent: "center",
|
|
4434
|
-
color: "$
|
|
4417
|
+
color: "$neutral11",
|
|
4435
4418
|
textDecoration: "none",
|
|
4436
4419
|
"@hover": {
|
|
4437
4420
|
"&:hover": {
|
|
@@ -4439,7 +4422,7 @@ var TabLink = styled("a", {
|
|
|
4439
4422
|
},
|
|
4440
4423
|
},
|
|
4441
4424
|
"&:focus": {
|
|
4442
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4425
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
4443
4426
|
},
|
|
4444
4427
|
variants: {
|
|
4445
4428
|
active: {
|
|
@@ -4477,7 +4460,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4477
4460
|
outline: "none",
|
|
4478
4461
|
alignItems: "center",
|
|
4479
4462
|
justifyContent: "center",
|
|
4480
|
-
color: "$
|
|
4463
|
+
color: "$neutral11",
|
|
4481
4464
|
border: "1px solid transparent",
|
|
4482
4465
|
borderTopLeftRadius: "$2",
|
|
4483
4466
|
borderTopRightRadius: "$2",
|
|
@@ -4489,7 +4472,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4489
4472
|
},
|
|
4490
4473
|
'&[data-state="active"]': {
|
|
4491
4474
|
color: "$hiContrast",
|
|
4492
|
-
borderColor: "$
|
|
4475
|
+
borderColor: "$neutral6",
|
|
4493
4476
|
borderBottomColor: "transparent",
|
|
4494
4477
|
},
|
|
4495
4478
|
'&[data-orientation="vertical"]': {
|
|
@@ -4498,7 +4481,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4498
4481
|
borderBottomLeftRadius: "$2",
|
|
4499
4482
|
borderBottomColor: "transparent",
|
|
4500
4483
|
'&[data-state="active"]': {
|
|
4501
|
-
borderBottomColor: "$
|
|
4484
|
+
borderBottomColor: "$neutral6",
|
|
4502
4485
|
borderRightColor: "transparent",
|
|
4503
4486
|
},
|
|
4504
4487
|
},
|
|
@@ -4508,11 +4491,11 @@ var StyledTabsListBase = styled(TabsPrimitive.List, {
|
|
|
4508
4491
|
display: "flex",
|
|
4509
4492
|
"&:focus": {
|
|
4510
4493
|
outline: "none",
|
|
4511
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4494
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4512
4495
|
},
|
|
4513
4496
|
'&[data-orientation="vertical"]': {
|
|
4514
4497
|
flexDirection: "column",
|
|
4515
|
-
boxShadow: "inset -1px 0 0 $
|
|
4498
|
+
boxShadow: "inset -1px 0 0 $neutral6",
|
|
4516
4499
|
},
|
|
4517
4500
|
});
|
|
4518
4501
|
var TabsListBase = React.forwardRef(function (props, forwardedRef) { return (React.createElement(React.Fragment, null,
|
|
@@ -4523,7 +4506,7 @@ var TabsContentBase = styled(TabsPrimitive.Content, {
|
|
|
4523
4506
|
flexGrow: 1,
|
|
4524
4507
|
"&:focus": {
|
|
4525
4508
|
outline: "none",
|
|
4526
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4509
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4527
4510
|
},
|
|
4528
4511
|
});
|
|
4529
4512
|
var TabsTrigger = styled(TabsTriggerBase, {
|
|
@@ -4572,7 +4555,7 @@ var TextArea = styled("textarea", {
|
|
|
4572
4555
|
width: "100%",
|
|
4573
4556
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4574
4557
|
backgroundColor: "$loContrast",
|
|
4575
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4558
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
4576
4559
|
color: "$hiContrast",
|
|
4577
4560
|
fontVariantNumeric: "tabular-nums",
|
|
4578
4561
|
position: "relative",
|
|
@@ -4583,22 +4566,22 @@ var TextArea = styled("textarea", {
|
|
|
4583
4566
|
zIndex: "1",
|
|
4584
4567
|
},
|
|
4585
4568
|
"&::placeholder": {
|
|
4586
|
-
color: "$
|
|
4569
|
+
color: "$neutral9",
|
|
4587
4570
|
},
|
|
4588
4571
|
"&:disabled": {
|
|
4589
4572
|
pointerEvents: "none",
|
|
4590
|
-
backgroundColor: "$
|
|
4591
|
-
color: "$
|
|
4573
|
+
backgroundColor: "$neutral2",
|
|
4574
|
+
color: "$neutral8",
|
|
4592
4575
|
cursor: "not-allowed",
|
|
4593
4576
|
resize: "none",
|
|
4594
4577
|
"&::placeholder": {
|
|
4595
|
-
color: "$
|
|
4578
|
+
color: "$neutral7",
|
|
4596
4579
|
},
|
|
4597
4580
|
},
|
|
4598
4581
|
"&:read-only": {
|
|
4599
|
-
backgroundColor: "$
|
|
4582
|
+
backgroundColor: "$neutral2",
|
|
4600
4583
|
"&:focus": {
|
|
4601
|
-
boxShadow: "inset 0px 0px 0px 1px $colors$
|
|
4584
|
+
boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
|
|
4602
4585
|
},
|
|
4603
4586
|
},
|
|
4604
4587
|
variants: {
|
|
@@ -4712,12 +4695,12 @@ var TreeItem = styled("div", {
|
|
|
4712
4695
|
variants: {
|
|
4713
4696
|
variant: {
|
|
4714
4697
|
gray: {
|
|
4715
|
-
backgroundColor: "$
|
|
4698
|
+
backgroundColor: "$neutral3",
|
|
4716
4699
|
"&:hover": {
|
|
4717
|
-
backgroundColor: "$
|
|
4700
|
+
backgroundColor: "$neutral4",
|
|
4718
4701
|
},
|
|
4719
4702
|
"&:active": {
|
|
4720
|
-
backgroundColor: "$
|
|
4703
|
+
backgroundColor: "$neutral5",
|
|
4721
4704
|
},
|
|
4722
4705
|
},
|
|
4723
4706
|
red: {
|