@livepeer/design-system 1.0.13 → 1.0.14
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/index.es.js +117 -102
- package/dist/index.js +117 -102
- package/dist/stitches.config.d.ts +2 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -83,8 +83,8 @@ var styled = (_a$8 = react.createStitches({
|
|
|
83
83
|
theme: {
|
|
84
84
|
colors: tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, colors.gray), colors.mauve), colors.slate), colors.sage), colors.olive), colors.sand), colors.tomato), colors.red), colors.crimson), colors.pink), colors.plum), colors.purple), colors.violet), colors.indigo), colors.blue), colors.sky), colors.mint), colors.cyan), colors.teal), colors.green), colors.grass), colors.lime), colors.yellow), colors.amber), colors.orange), colors.brown), colors.bronze), colors.gold), colors.whiteA), colors.blackA), {
|
|
85
85
|
// Semantic colors
|
|
86
|
-
hiContrast: "$
|
|
87
|
-
// loContrast: '$
|
|
86
|
+
hiContrast: "$neutral12",
|
|
87
|
+
// loContrast: '$neutral1',
|
|
88
88
|
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%)" }),
|
|
89
89
|
fonts: {
|
|
90
90
|
untitled: "Untitled Sans, -apple-system, system-ui, sans-serif",
|
|
@@ -301,7 +301,7 @@ var styled = (_a$8 = react.createStitches({
|
|
|
301
301
|
createTheme("dark-theme", {
|
|
302
302
|
colors: tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, colors.grayDark), colors.mauveDark), colors.slateDark), colors.sageDark), colors.oliveDark), colors.sandDark), colors.tomatoDark), colors.redDark), colors.crimsonDark), colors.pinkDark), colors.plumDark), colors.purpleDark), colors.violetDark), colors.indigoDark), colors.blueDark), colors.skyDark), colors.mintDark), colors.cyanDark), colors.tealDark), colors.greenDark), colors.grassDark), colors.limeDark), colors.yellowDark), colors.amberDark), colors.orangeDark), colors.brownDark), colors.bronzeDark), colors.goldDark), {
|
|
303
303
|
// Semantic colors
|
|
304
|
-
hiContrast: "$
|
|
304
|
+
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%)" }),
|
|
305
305
|
});
|
|
306
306
|
var lightThemeColors = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, colors.gray), colors.mauve), colors.slate), colors.sage), colors.olive), colors.sand), colors.tomato), colors.red), colors.crimson), colors.pink), colors.plum), colors.purple), colors.violet), colors.indigo), colors.blue), colors.sky), colors.mint), colors.cyan), colors.teal), colors.green), colors.grass), colors.lime), colors.yellow), colors.amber), colors.orange), colors.brown), colors.bronze), colors.gold), colors.whiteA), colors.blackA);
|
|
307
307
|
var darkThemeColors = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, colors.grayDark), colors.mauveDark), colors.slateDark), colors.sageDark), colors.oliveDark), colors.sandDark), colors.tomatoDark), colors.redDark), colors.crimsonDark), colors.pinkDark), colors.plumDark), colors.purpleDark), colors.violetDark), colors.indigoDark), colors.blueDark), colors.skyDark), colors.mintDark), colors.cyanDark), colors.tealDark), colors.greenDark), colors.grassDark), colors.limeDark), colors.yellowDark), colors.amberDark), colors.orangeDark), colors.brownDark), colors.bronzeDark), colors.goldDark), colors.whiteA), colors.blackA);
|
|
@@ -373,7 +373,7 @@ var getThemes = function () {
|
|
|
373
373
|
|
|
374
374
|
var StyledAccordion = styled(AccordionPrimitive__namespace.Root, {
|
|
375
375
|
boxShadow: "0 0 0 1px $colors$neutral6",
|
|
376
|
-
borderRadius: "$
|
|
376
|
+
borderRadius: "$2",
|
|
377
377
|
});
|
|
378
378
|
var Accordion = React__default["default"].forwardRef(function (_a, forwardedRef) {
|
|
379
379
|
var children = _a.children, props = tslib.__rest(_a, ["children"]);
|
|
@@ -381,9 +381,26 @@ var Accordion = React__default["default"].forwardRef(function (_a, forwardedRef)
|
|
|
381
381
|
});
|
|
382
382
|
Accordion.displayName = "Accordion";
|
|
383
383
|
var StyledItem = styled(AccordionPrimitive__namespace.Item, {
|
|
384
|
-
borderTop: "1px solid $colors$
|
|
384
|
+
borderTop: "1px solid $colors$neutral6",
|
|
385
|
+
"&:first-of-type": {
|
|
386
|
+
borderTop: "none",
|
|
387
|
+
},
|
|
385
388
|
"&:last-of-type": {
|
|
386
|
-
borderBottom: "
|
|
389
|
+
borderBottom: "none",
|
|
390
|
+
},
|
|
391
|
+
"&:hover": {
|
|
392
|
+
"&:first-of-type": {
|
|
393
|
+
button: {
|
|
394
|
+
borderTopLeftRadius: "$2",
|
|
395
|
+
borderTopRightRadius: "$2",
|
|
396
|
+
},
|
|
397
|
+
},
|
|
398
|
+
"&:last-of-type": {
|
|
399
|
+
button: {
|
|
400
|
+
borderBottomLeftRadius: "$2",
|
|
401
|
+
borderBottomRightRadius: "$2",
|
|
402
|
+
},
|
|
403
|
+
},
|
|
387
404
|
},
|
|
388
405
|
});
|
|
389
406
|
var StyledHeader = styled(AccordionPrimitive__namespace.Header, {
|
|
@@ -405,14 +422,12 @@ var StyledTrigger = styled(AccordionPrimitive__namespace.Trigger, {
|
|
|
405
422
|
p: "$2",
|
|
406
423
|
color: "$hiContrast",
|
|
407
424
|
width: "100%",
|
|
408
|
-
"
|
|
409
|
-
"
|
|
410
|
-
backgroundColor: "$slate2",
|
|
411
|
-
},
|
|
425
|
+
"&:hover": {
|
|
426
|
+
backgroundColor: "$neutral2",
|
|
412
427
|
},
|
|
413
428
|
"&:focus": {
|
|
414
429
|
outline: "none",
|
|
415
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
430
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
416
431
|
},
|
|
417
432
|
svg: {
|
|
418
433
|
transition: "transform 175ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
@@ -457,11 +472,11 @@ var Alert = styled("div", {
|
|
|
457
472
|
variant: {
|
|
458
473
|
loContrast: {
|
|
459
474
|
backgroundColor: "$loContrast",
|
|
460
|
-
borderColor: "$
|
|
475
|
+
borderColor: "$neutral6",
|
|
461
476
|
},
|
|
462
477
|
gray: {
|
|
463
|
-
backgroundColor: "$
|
|
464
|
-
borderColor: "$
|
|
478
|
+
backgroundColor: "$neutral2",
|
|
479
|
+
borderColor: "$neutral6",
|
|
465
480
|
},
|
|
466
481
|
blue: {
|
|
467
482
|
backgroundColor: "$blue2",
|
|
@@ -602,7 +617,7 @@ var Status = styled("div", {
|
|
|
602
617
|
},
|
|
603
618
|
variant: {
|
|
604
619
|
gray: {
|
|
605
|
-
backgroundColor: "$
|
|
620
|
+
backgroundColor: "$neutral7",
|
|
606
621
|
},
|
|
607
622
|
blue: {
|
|
608
623
|
backgroundColor: "$blue9",
|
|
@@ -686,7 +701,7 @@ var StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
|
|
|
686
701
|
color: "$loContrast",
|
|
687
702
|
},
|
|
688
703
|
gray: {
|
|
689
|
-
backgroundColor: "$
|
|
704
|
+
backgroundColor: "$neutral5",
|
|
690
705
|
},
|
|
691
706
|
tomato: {
|
|
692
707
|
backgroundColor: "$tomato5",
|
|
@@ -890,9 +905,9 @@ var Badge = styled("span", {
|
|
|
890
905
|
userSelect: "none",
|
|
891
906
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
892
907
|
"&:disabled": {
|
|
893
|
-
backgroundColor: "$
|
|
908
|
+
backgroundColor: "$neutral3",
|
|
894
909
|
pointerEvents: "none",
|
|
895
|
-
color: "$
|
|
910
|
+
color: "$neutral8",
|
|
896
911
|
},
|
|
897
912
|
"&::before": {
|
|
898
913
|
boxSizing: "border-box",
|
|
@@ -903,9 +918,9 @@ var Badge = styled("span", {
|
|
|
903
918
|
content: '""',
|
|
904
919
|
},
|
|
905
920
|
// Custom
|
|
906
|
-
backgroundColor: "$
|
|
921
|
+
backgroundColor: "$neutral3",
|
|
907
922
|
borderRadius: "$pill",
|
|
908
|
-
color: "$
|
|
923
|
+
color: "$neutral11",
|
|
909
924
|
whiteSpace: "nowrap",
|
|
910
925
|
variants: {
|
|
911
926
|
size: {
|
|
@@ -936,10 +951,10 @@ var Badge = styled("span", {
|
|
|
936
951
|
},
|
|
937
952
|
},
|
|
938
953
|
gray: {
|
|
939
|
-
backgroundColor: "$
|
|
940
|
-
color: "$
|
|
954
|
+
backgroundColor: "$neutral3",
|
|
955
|
+
color: "$neutral11",
|
|
941
956
|
"&:focus": {
|
|
942
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
957
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
943
958
|
},
|
|
944
959
|
},
|
|
945
960
|
red: {
|
|
@@ -1705,11 +1720,11 @@ var StyledCheckbox = styled(CheckboxPrimitive__namespace.Root, {
|
|
|
1705
1720
|
padding: "0",
|
|
1706
1721
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
1707
1722
|
color: "$hiContrast",
|
|
1708
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1723
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
1709
1724
|
overflow: "hidden",
|
|
1710
1725
|
"@hover": {
|
|
1711
1726
|
"&:hover": {
|
|
1712
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1727
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
1713
1728
|
},
|
|
1714
1729
|
},
|
|
1715
1730
|
"&:focus": {
|
|
@@ -1755,8 +1770,8 @@ var Code = styled("code", {
|
|
|
1755
1770
|
variants: {
|
|
1756
1771
|
variant: {
|
|
1757
1772
|
gray: {
|
|
1758
|
-
backgroundColor: "$
|
|
1759
|
-
color: "$
|
|
1773
|
+
backgroundColor: "$neutral3",
|
|
1774
|
+
color: "$neutral11",
|
|
1760
1775
|
},
|
|
1761
1776
|
violet: {
|
|
1762
1777
|
backgroundColor: "$violet3",
|
|
@@ -1928,11 +1943,11 @@ var itemCss = css(baseItemCss, {
|
|
|
1928
1943
|
color: "white",
|
|
1929
1944
|
},
|
|
1930
1945
|
"&[data-disabled]": {
|
|
1931
|
-
color: "$
|
|
1946
|
+
color: "$neutral9",
|
|
1932
1947
|
},
|
|
1933
1948
|
});
|
|
1934
1949
|
var labelCss = css(baseItemCss, {
|
|
1935
|
-
color: "$
|
|
1950
|
+
color: "$neutral11",
|
|
1936
1951
|
});
|
|
1937
1952
|
var menuCss = css({
|
|
1938
1953
|
boxSizing: "border-box",
|
|
@@ -1942,7 +1957,7 @@ var menuCss = css({
|
|
|
1942
1957
|
var separatorCss = css({
|
|
1943
1958
|
height: 1,
|
|
1944
1959
|
my: "$1",
|
|
1945
|
-
backgroundColor: "$
|
|
1960
|
+
backgroundColor: "$neutral6",
|
|
1946
1961
|
});
|
|
1947
1962
|
var Menu = styled(MenuPrimitive__namespace.Root, menuCss);
|
|
1948
1963
|
styled(MenuPrimitive__namespace.Content, panelStyles);
|
|
@@ -2196,7 +2211,7 @@ var TextField = StyledTextField;
|
|
|
2196
2211
|
var SelectWrapper = styled("div", {
|
|
2197
2212
|
backgroundColor: "$loContrast",
|
|
2198
2213
|
borderRadius: "$2",
|
|
2199
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2214
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2200
2215
|
color: "$hiContrast",
|
|
2201
2216
|
fontFamily: "$untitled",
|
|
2202
2217
|
fontSize: "$1",
|
|
@@ -2253,37 +2268,37 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2253
2268
|
},
|
|
2254
2269
|
_a$6["& ".concat(Button)] = {
|
|
2255
2270
|
borderRadius: 0,
|
|
2256
|
-
boxShadow: "inset 0 1px $colors$
|
|
2271
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2257
2272
|
"&:hover": {
|
|
2258
|
-
boxShadow: "-1px 0 $colors$
|
|
2273
|
+
boxShadow: "-1px 0 $colors$neutral8, inset 0 1px $colors$neutral8, inset -1px 0 $colors$neutral8, inset 0 -1px $colors$neutral8",
|
|
2259
2274
|
},
|
|
2260
2275
|
"&:focus": {
|
|
2261
2276
|
zIndex: 1,
|
|
2262
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2277
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2263
2278
|
},
|
|
2264
2279
|
"&:first-child": {
|
|
2265
2280
|
borderTopLeftRadius: "$1",
|
|
2266
2281
|
borderBottomLeftRadius: "$1",
|
|
2267
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2282
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2268
2283
|
"&:hover": {
|
|
2269
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2284
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
2270
2285
|
},
|
|
2271
2286
|
"&:focus": {
|
|
2272
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2287
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2273
2288
|
},
|
|
2274
2289
|
},
|
|
2275
2290
|
"&:last-child": {
|
|
2276
2291
|
borderTopRightRadius: "$1",
|
|
2277
2292
|
borderBottomRightRadius: "$1",
|
|
2278
|
-
boxShadow: "inset 0 1px $colors$
|
|
2293
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2279
2294
|
"&:focus": {
|
|
2280
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2295
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2281
2296
|
},
|
|
2282
2297
|
},
|
|
2283
2298
|
},
|
|
2284
2299
|
_a$6["& ".concat(TextField)] = {
|
|
2285
2300
|
borderRadius: 0,
|
|
2286
|
-
boxShadow: "inset 0 1px $colors$
|
|
2301
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2287
2302
|
"&:focus": {
|
|
2288
2303
|
zIndex: 1,
|
|
2289
2304
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
@@ -2291,7 +2306,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2291
2306
|
"&:first-child": {
|
|
2292
2307
|
borderTopLeftRadius: "$1",
|
|
2293
2308
|
borderBottomLeftRadius: "$1",
|
|
2294
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2309
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2295
2310
|
"&:focus": {
|
|
2296
2311
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2297
2312
|
},
|
|
@@ -2299,7 +2314,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2299
2314
|
"&:last-child": {
|
|
2300
2315
|
borderTopRightRadius: "$1",
|
|
2301
2316
|
borderBottomRightRadius: "$1",
|
|
2302
|
-
boxShadow: "inset 0 1px $colors$
|
|
2317
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2303
2318
|
"&:focus": {
|
|
2304
2319
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2305
2320
|
},
|
|
@@ -2307,14 +2322,14 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2307
2322
|
},
|
|
2308
2323
|
_a$6["& ".concat(Select)] = {
|
|
2309
2324
|
borderRadius: 0,
|
|
2310
|
-
boxShadow: "inset 0 1px $colors$
|
|
2325
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2311
2326
|
"&:focus-within": {
|
|
2312
2327
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2313
2328
|
},
|
|
2314
2329
|
"&:first-child": {
|
|
2315
2330
|
borderTopLeftRadius: "$1",
|
|
2316
2331
|
borderBottomLeftRadius: "$1",
|
|
2317
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2332
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2318
2333
|
"&:focus-within": {
|
|
2319
2334
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2320
2335
|
},
|
|
@@ -2322,7 +2337,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2322
2337
|
"&:last-child": {
|
|
2323
2338
|
borderTopRightRadius: "$1",
|
|
2324
2339
|
borderBottomRightRadius: "$1",
|
|
2325
|
-
boxShadow: "inset 0 1px $colors$
|
|
2340
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2326
2341
|
"&:focus-within": {
|
|
2327
2342
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2328
2343
|
},
|
|
@@ -2359,23 +2374,23 @@ var IconButton = styled("button", {
|
|
|
2359
2374
|
boxSizing: "border-box",
|
|
2360
2375
|
},
|
|
2361
2376
|
backgroundColor: "$loContrast",
|
|
2362
|
-
border: "1px solid $
|
|
2377
|
+
border: "1px solid $neutral7",
|
|
2363
2378
|
"@hover": {
|
|
2364
2379
|
"&:hover": {
|
|
2365
|
-
borderColor: "$
|
|
2380
|
+
borderColor: "$neutral8",
|
|
2366
2381
|
},
|
|
2367
2382
|
},
|
|
2368
2383
|
"&:active": {
|
|
2369
|
-
backgroundColor: "$
|
|
2384
|
+
backgroundColor: "$neutral2",
|
|
2370
2385
|
},
|
|
2371
2386
|
"&:focus": {
|
|
2372
|
-
borderColor: "$
|
|
2373
|
-
boxShadow: "0 0 0 1px $colors$
|
|
2387
|
+
borderColor: "$neutral8",
|
|
2388
|
+
boxShadow: "0 0 0 1px $colors$neutral8",
|
|
2374
2389
|
},
|
|
2375
2390
|
"&:disabled": {
|
|
2376
2391
|
pointerEvents: "none",
|
|
2377
2392
|
backgroundColor: "transparent",
|
|
2378
|
-
color: "$
|
|
2393
|
+
color: "$neutral6",
|
|
2379
2394
|
},
|
|
2380
2395
|
variants: {
|
|
2381
2396
|
size: {
|
|
@@ -2406,17 +2421,17 @@ var IconButton = styled("button", {
|
|
|
2406
2421
|
borderWidth: "0",
|
|
2407
2422
|
"@hover": {
|
|
2408
2423
|
"&:hover": {
|
|
2409
|
-
backgroundColor: "$
|
|
2424
|
+
backgroundColor: "$neutralA3",
|
|
2410
2425
|
},
|
|
2411
2426
|
},
|
|
2412
2427
|
"&:focus": {
|
|
2413
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2428
|
+
boxShadow: "inset 0 0 0 1px $colors$neutralA8, 0 0 0 1px $colors$neutralA8",
|
|
2414
2429
|
},
|
|
2415
2430
|
"&:active": {
|
|
2416
|
-
backgroundColor: "$
|
|
2431
|
+
backgroundColor: "$neutralA4",
|
|
2417
2432
|
},
|
|
2418
2433
|
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
|
|
2419
|
-
backgroundColor: "$
|
|
2434
|
+
backgroundColor: "$neutralA4",
|
|
2420
2435
|
},
|
|
2421
2436
|
},
|
|
2422
2437
|
raised: {
|
|
@@ -2427,17 +2442,17 @@ var IconButton = styled("button", {
|
|
|
2427
2442
|
},
|
|
2428
2443
|
},
|
|
2429
2444
|
"&:focus": {
|
|
2430
|
-
borderColor: "$
|
|
2431
|
-
boxShadow: "0 0 0 1px $colors$
|
|
2445
|
+
borderColor: "$neutral8",
|
|
2446
|
+
boxShadow: "0 0 0 1px $colors$neutral8, 0 16px 32px hsl(206deg 12% 5% / 25%), 0 3px 5px hsl(0deg 0% 0% / 10%)",
|
|
2432
2447
|
},
|
|
2433
2448
|
"&:active": {
|
|
2434
|
-
backgroundColor: "$
|
|
2449
|
+
backgroundColor: "$neutral4",
|
|
2435
2450
|
},
|
|
2436
2451
|
},
|
|
2437
2452
|
},
|
|
2438
2453
|
state: {
|
|
2439
2454
|
active: {
|
|
2440
|
-
backgroundColor: "$
|
|
2455
|
+
backgroundColor: "$neutral4",
|
|
2441
2456
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2442
2457
|
"@hover": {
|
|
2443
2458
|
"&:hover": {
|
|
@@ -2445,11 +2460,11 @@ var IconButton = styled("button", {
|
|
|
2445
2460
|
},
|
|
2446
2461
|
},
|
|
2447
2462
|
"&:active": {
|
|
2448
|
-
backgroundColor: "$
|
|
2463
|
+
backgroundColor: "$neutral4",
|
|
2449
2464
|
},
|
|
2450
2465
|
},
|
|
2451
2466
|
waiting: {
|
|
2452
|
-
backgroundColor: "$
|
|
2467
|
+
backgroundColor: "$neutral4",
|
|
2453
2468
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2454
2469
|
"@hover": {
|
|
2455
2470
|
"&:hover": {
|
|
@@ -2457,7 +2472,7 @@ var IconButton = styled("button", {
|
|
|
2457
2472
|
},
|
|
2458
2473
|
},
|
|
2459
2474
|
"&:active": {
|
|
2460
|
-
backgroundColor: "$
|
|
2475
|
+
backgroundColor: "$neutral4",
|
|
2461
2476
|
},
|
|
2462
2477
|
},
|
|
2463
2478
|
},
|
|
@@ -2910,7 +2925,7 @@ var Text = styled("span", {
|
|
|
2910
2925
|
color: "$bronze11",
|
|
2911
2926
|
},
|
|
2912
2927
|
gray: {
|
|
2913
|
-
color: "$
|
|
2928
|
+
color: "$neutral11",
|
|
2914
2929
|
},
|
|
2915
2930
|
primary: {
|
|
2916
2931
|
color: "$primary11",
|
|
@@ -3095,7 +3110,7 @@ var Kbd = styled("kbd", {
|
|
|
3095
3110
|
userSelect: "none",
|
|
3096
3111
|
cursor: "default",
|
|
3097
3112
|
whiteSpace: "nowrap",
|
|
3098
|
-
boxShadow: "\n inset 0 0.5px rgba(255, 255, 255, 0.1),\n inset 0 1px 5px $colors$
|
|
3113
|
+
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",
|
|
3099
3114
|
textShadow: "0 0 1px rgba(255, 255, 255, 0.5)",
|
|
3100
3115
|
fontFamily: "inherit",
|
|
3101
3116
|
fontWeight: 400,
|
|
@@ -3256,7 +3271,7 @@ var Paragraph = React__default["default"].forwardRef(function (props, forwardedR
|
|
|
3256
3271
|
var textCss = {
|
|
3257
3272
|
1: { lineHeight: "25px", "@bp2": { lineHeight: "27px" } },
|
|
3258
3273
|
2: {
|
|
3259
|
-
color: "$
|
|
3274
|
+
color: "$neutral11",
|
|
3260
3275
|
lineHeight: "27px",
|
|
3261
3276
|
"@bp2": { lineHeight: "30px" },
|
|
3262
3277
|
},
|
|
@@ -3307,13 +3322,13 @@ var StyledProgressBar = styled(ProgressPrimitive__namespace.Root, {
|
|
|
3307
3322
|
overflow: "hidden",
|
|
3308
3323
|
borderRadius: "$pill",
|
|
3309
3324
|
'&[data-state="indeterminate"]': {
|
|
3310
|
-
backgroundColor: "$
|
|
3325
|
+
backgroundColor: "$neutral4",
|
|
3311
3326
|
"&::after": {
|
|
3312
3327
|
animationName: indeterminateProgress,
|
|
3313
3328
|
animationDuration: "1500ms",
|
|
3314
3329
|
animationIterationCount: "infinite",
|
|
3315
3330
|
animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3316
|
-
backgroundColor: "$
|
|
3331
|
+
backgroundColor: "$neutral7",
|
|
3317
3332
|
boxSizing: "border-box",
|
|
3318
3333
|
borderRadius: "$pill",
|
|
3319
3334
|
content: '""',
|
|
@@ -3327,7 +3342,7 @@ var StyledProgressBar = styled(ProgressPrimitive__namespace.Root, {
|
|
|
3327
3342
|
variants: {
|
|
3328
3343
|
variant: {
|
|
3329
3344
|
gray: {
|
|
3330
|
-
background: "$
|
|
3345
|
+
background: "$neutral8",
|
|
3331
3346
|
},
|
|
3332
3347
|
blue: {
|
|
3333
3348
|
backgroundColor: "$blue9",
|
|
@@ -3349,7 +3364,7 @@ var ProgressBarIndicator = styled(ProgressPrimitive__namespace.Indicator, {
|
|
|
3349
3364
|
bottom: 0,
|
|
3350
3365
|
left: 0,
|
|
3351
3366
|
width: "100%",
|
|
3352
|
-
backgroundColor: "$
|
|
3367
|
+
backgroundColor: "$neutral4",
|
|
3353
3368
|
transition: "transform 150ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3354
3369
|
});
|
|
3355
3370
|
var ProgressBar = React__default["default"].forwardRef(function (_a, forwardedRef) {
|
|
@@ -3513,11 +3528,11 @@ var StyledRadio$1 = styled(RadioGroupPrimitive__namespace.Item, {
|
|
|
3513
3528
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
3514
3529
|
borderRadius: "50%",
|
|
3515
3530
|
color: "$hiContrast",
|
|
3516
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3531
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
3517
3532
|
overflow: "hidden",
|
|
3518
3533
|
"@hover": {
|
|
3519
3534
|
"&:hover": {
|
|
3520
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3535
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
3521
3536
|
},
|
|
3522
3537
|
},
|
|
3523
3538
|
"&:focus": {
|
|
@@ -3642,7 +3657,7 @@ var Separator = styled(SeparatorPrimitive__namespace.Root, {
|
|
|
3642
3657
|
border: "none",
|
|
3643
3658
|
margin: 0,
|
|
3644
3659
|
flexShrink: 0,
|
|
3645
|
-
backgroundColor: "$
|
|
3660
|
+
backgroundColor: "$neutral6",
|
|
3646
3661
|
cursor: "default",
|
|
3647
3662
|
variants: {
|
|
3648
3663
|
size: {
|
|
@@ -3801,25 +3816,25 @@ var SimpleToggle = styled(TogglePrimitive__namespace.Root, {
|
|
|
3801
3816
|
backgroundColor: "transparent",
|
|
3802
3817
|
"@hover": {
|
|
3803
3818
|
"&:hover": {
|
|
3804
|
-
backgroundColor: "$
|
|
3819
|
+
backgroundColor: "$neutralA3",
|
|
3805
3820
|
},
|
|
3806
3821
|
},
|
|
3807
3822
|
"&:active": {
|
|
3808
|
-
backgroundColor: "$
|
|
3823
|
+
backgroundColor: "$neutralA4",
|
|
3809
3824
|
},
|
|
3810
3825
|
"&:focus": {
|
|
3811
|
-
boxShadow: "inset 0 0 0 1px $
|
|
3826
|
+
boxShadow: "inset 0 0 0 1px $neutralA8, 0 0 0 1px $neutralA8",
|
|
3812
3827
|
zIndex: 1,
|
|
3813
3828
|
},
|
|
3814
3829
|
'&[data-state="on"]': {
|
|
3815
|
-
backgroundColor: "$
|
|
3830
|
+
backgroundColor: "$neutralA5",
|
|
3816
3831
|
"@hover": {
|
|
3817
3832
|
"&:hover": {
|
|
3818
|
-
backgroundColor: "$
|
|
3833
|
+
backgroundColor: "$neutralA5",
|
|
3819
3834
|
},
|
|
3820
3835
|
},
|
|
3821
3836
|
"&:active": {
|
|
3822
|
-
backgroundColor: "$
|
|
3837
|
+
backgroundColor: "$neutralA7",
|
|
3823
3838
|
},
|
|
3824
3839
|
},
|
|
3825
3840
|
variants: {
|
|
@@ -3839,7 +3854,7 @@ var pulse = keyframes({
|
|
|
3839
3854
|
"100%": { opacity: "100%" },
|
|
3840
3855
|
});
|
|
3841
3856
|
var Skeleton = styled("div", {
|
|
3842
|
-
backgroundColor: "$
|
|
3857
|
+
backgroundColor: "$neutral4",
|
|
3843
3858
|
position: "relative",
|
|
3844
3859
|
overflow: "hidden",
|
|
3845
3860
|
"&::after": {
|
|
@@ -3848,7 +3863,7 @@ var Skeleton = styled("div", {
|
|
|
3848
3863
|
animationDirection: "alternate",
|
|
3849
3864
|
animationIterationCount: "infinite",
|
|
3850
3865
|
animationTimingFunction: "ease-in-out",
|
|
3851
|
-
backgroundColor: "$
|
|
3866
|
+
backgroundColor: "$neutral6",
|
|
3852
3867
|
borderRadius: "inherit",
|
|
3853
3868
|
bottom: 0,
|
|
3854
3869
|
content: '""',
|
|
@@ -3914,7 +3929,7 @@ var _a$2;
|
|
|
3914
3929
|
var SliderTrack = styled(SliderPrimitive__namespace.Track, {
|
|
3915
3930
|
position: "relative",
|
|
3916
3931
|
flexGrow: 1,
|
|
3917
|
-
backgroundColor: "$
|
|
3932
|
+
backgroundColor: "$neutral7",
|
|
3918
3933
|
borderRadius: "$pill",
|
|
3919
3934
|
'&[data-orientation="horizontal"]': {
|
|
3920
3935
|
height: 2,
|
|
@@ -3980,7 +3995,7 @@ var StyledSlider = styled(SliderPrimitive__namespace.Root, {
|
|
|
3980
3995
|
"@hover": {
|
|
3981
3996
|
"&:hover": (_a$2 = {},
|
|
3982
3997
|
_a$2["& ".concat(SliderTrack)] = {
|
|
3983
|
-
backgroundColor: "$
|
|
3998
|
+
backgroundColor: "$neutral8",
|
|
3984
3999
|
},
|
|
3985
4000
|
_a$2["& ".concat(SliderThumb)] = {
|
|
3986
4001
|
opacity: "1",
|
|
@@ -4309,11 +4324,11 @@ var StyledSwitch = styled(SwitchPrimitive__namespace.Root, {
|
|
|
4309
4324
|
margin: "0",
|
|
4310
4325
|
outline: "none",
|
|
4311
4326
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4312
|
-
backgroundColor: "$
|
|
4327
|
+
backgroundColor: "$neutral5",
|
|
4313
4328
|
borderRadius: "$pill",
|
|
4314
4329
|
position: "relative",
|
|
4315
4330
|
"&:focus": {
|
|
4316
|
-
boxShadow: "0 0 0 2px $colors$
|
|
4331
|
+
boxShadow: "0 0 0 2px $colors$neutral8",
|
|
4317
4332
|
},
|
|
4318
4333
|
'&[data-state="checked"]': {
|
|
4319
4334
|
backgroundColor: "$blue9",
|
|
@@ -4475,7 +4490,7 @@ var TabLink = styled("a", {
|
|
|
4475
4490
|
outline: "none",
|
|
4476
4491
|
alignItems: "center",
|
|
4477
4492
|
justifyContent: "center",
|
|
4478
|
-
color: "$
|
|
4493
|
+
color: "$neutral11",
|
|
4479
4494
|
textDecoration: "none",
|
|
4480
4495
|
"@hover": {
|
|
4481
4496
|
"&:hover": {
|
|
@@ -4483,7 +4498,7 @@ var TabLink = styled("a", {
|
|
|
4483
4498
|
},
|
|
4484
4499
|
},
|
|
4485
4500
|
"&:focus": {
|
|
4486
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4501
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
4487
4502
|
},
|
|
4488
4503
|
variants: {
|
|
4489
4504
|
active: {
|
|
@@ -4521,7 +4536,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
|
|
|
4521
4536
|
outline: "none",
|
|
4522
4537
|
alignItems: "center",
|
|
4523
4538
|
justifyContent: "center",
|
|
4524
|
-
color: "$
|
|
4539
|
+
color: "$neutral11",
|
|
4525
4540
|
border: "1px solid transparent",
|
|
4526
4541
|
borderTopLeftRadius: "$2",
|
|
4527
4542
|
borderTopRightRadius: "$2",
|
|
@@ -4533,7 +4548,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
|
|
|
4533
4548
|
},
|
|
4534
4549
|
'&[data-state="active"]': {
|
|
4535
4550
|
color: "$hiContrast",
|
|
4536
|
-
borderColor: "$
|
|
4551
|
+
borderColor: "$neutral6",
|
|
4537
4552
|
borderBottomColor: "transparent",
|
|
4538
4553
|
},
|
|
4539
4554
|
'&[data-orientation="vertical"]': {
|
|
@@ -4542,7 +4557,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
|
|
|
4542
4557
|
borderBottomLeftRadius: "$2",
|
|
4543
4558
|
borderBottomColor: "transparent",
|
|
4544
4559
|
'&[data-state="active"]': {
|
|
4545
|
-
borderBottomColor: "$
|
|
4560
|
+
borderBottomColor: "$neutral6",
|
|
4546
4561
|
borderRightColor: "transparent",
|
|
4547
4562
|
},
|
|
4548
4563
|
},
|
|
@@ -4552,11 +4567,11 @@ var StyledTabsListBase = styled(TabsPrimitive__namespace.List, {
|
|
|
4552
4567
|
display: "flex",
|
|
4553
4568
|
"&:focus": {
|
|
4554
4569
|
outline: "none",
|
|
4555
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4570
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4556
4571
|
},
|
|
4557
4572
|
'&[data-orientation="vertical"]': {
|
|
4558
4573
|
flexDirection: "column",
|
|
4559
|
-
boxShadow: "inset -1px 0 0 $
|
|
4574
|
+
boxShadow: "inset -1px 0 0 $neutral6",
|
|
4560
4575
|
},
|
|
4561
4576
|
});
|
|
4562
4577
|
var TabsListBase = React__default["default"].forwardRef(function (props, forwardedRef) { return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -4567,7 +4582,7 @@ var TabsContentBase = styled(TabsPrimitive__namespace.Content, {
|
|
|
4567
4582
|
flexGrow: 1,
|
|
4568
4583
|
"&:focus": {
|
|
4569
4584
|
outline: "none",
|
|
4570
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4585
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4571
4586
|
},
|
|
4572
4587
|
});
|
|
4573
4588
|
var TabsTrigger = styled(TabsTriggerBase, {
|
|
@@ -4616,7 +4631,7 @@ var TextArea = styled("textarea", {
|
|
|
4616
4631
|
width: "100%",
|
|
4617
4632
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4618
4633
|
backgroundColor: "$loContrast",
|
|
4619
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4634
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
4620
4635
|
color: "$hiContrast",
|
|
4621
4636
|
fontVariantNumeric: "tabular-nums",
|
|
4622
4637
|
position: "relative",
|
|
@@ -4627,22 +4642,22 @@ var TextArea = styled("textarea", {
|
|
|
4627
4642
|
zIndex: "1",
|
|
4628
4643
|
},
|
|
4629
4644
|
"&::placeholder": {
|
|
4630
|
-
color: "$
|
|
4645
|
+
color: "$neutral9",
|
|
4631
4646
|
},
|
|
4632
4647
|
"&:disabled": {
|
|
4633
4648
|
pointerEvents: "none",
|
|
4634
|
-
backgroundColor: "$
|
|
4635
|
-
color: "$
|
|
4649
|
+
backgroundColor: "$neutral2",
|
|
4650
|
+
color: "$neutral8",
|
|
4636
4651
|
cursor: "not-allowed",
|
|
4637
4652
|
resize: "none",
|
|
4638
4653
|
"&::placeholder": {
|
|
4639
|
-
color: "$
|
|
4654
|
+
color: "$neutral7",
|
|
4640
4655
|
},
|
|
4641
4656
|
},
|
|
4642
4657
|
"&:read-only": {
|
|
4643
|
-
backgroundColor: "$
|
|
4658
|
+
backgroundColor: "$neutral2",
|
|
4644
4659
|
"&:focus": {
|
|
4645
|
-
boxShadow: "inset 0px 0px 0px 1px $colors$
|
|
4660
|
+
boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
|
|
4646
4661
|
},
|
|
4647
4662
|
},
|
|
4648
4663
|
variants: {
|
|
@@ -4756,12 +4771,12 @@ var TreeItem = styled("div", {
|
|
|
4756
4771
|
variants: {
|
|
4757
4772
|
variant: {
|
|
4758
4773
|
gray: {
|
|
4759
|
-
backgroundColor: "$
|
|
4774
|
+
backgroundColor: "$neutral3",
|
|
4760
4775
|
"&:hover": {
|
|
4761
|
-
backgroundColor: "$
|
|
4776
|
+
backgroundColor: "$neutral4",
|
|
4762
4777
|
},
|
|
4763
4778
|
"&:active": {
|
|
4764
|
-
backgroundColor: "$
|
|
4779
|
+
backgroundColor: "$neutral5",
|
|
4765
4780
|
},
|
|
4766
4781
|
},
|
|
4767
4782
|
red: {
|