@livepeer/design-system 1.0.12 → 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 +118 -107
- package/dist/index.js +118 -107
- 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,15 +422,12 @@ var StyledTrigger = styled(AccordionPrimitive__namespace.Trigger, {
|
|
|
405
422
|
p: "$2",
|
|
406
423
|
color: "$hiContrast",
|
|
407
424
|
width: "100%",
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
"&:hover": {
|
|
411
|
-
backgroundColor: "$slate2",
|
|
412
|
-
},
|
|
425
|
+
"&:hover": {
|
|
426
|
+
backgroundColor: "$neutral2",
|
|
413
427
|
},
|
|
414
428
|
"&:focus": {
|
|
415
429
|
outline: "none",
|
|
416
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
430
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
417
431
|
},
|
|
418
432
|
svg: {
|
|
419
433
|
transition: "transform 175ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
@@ -458,11 +472,11 @@ var Alert = styled("div", {
|
|
|
458
472
|
variant: {
|
|
459
473
|
loContrast: {
|
|
460
474
|
backgroundColor: "$loContrast",
|
|
461
|
-
borderColor: "$
|
|
475
|
+
borderColor: "$neutral6",
|
|
462
476
|
},
|
|
463
477
|
gray: {
|
|
464
|
-
backgroundColor: "$
|
|
465
|
-
borderColor: "$
|
|
478
|
+
backgroundColor: "$neutral2",
|
|
479
|
+
borderColor: "$neutral6",
|
|
466
480
|
},
|
|
467
481
|
blue: {
|
|
468
482
|
backgroundColor: "$blue2",
|
|
@@ -603,7 +617,7 @@ var Status = styled("div", {
|
|
|
603
617
|
},
|
|
604
618
|
variant: {
|
|
605
619
|
gray: {
|
|
606
|
-
backgroundColor: "$
|
|
620
|
+
backgroundColor: "$neutral7",
|
|
607
621
|
},
|
|
608
622
|
blue: {
|
|
609
623
|
backgroundColor: "$blue9",
|
|
@@ -687,7 +701,7 @@ var StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
|
|
|
687
701
|
color: "$loContrast",
|
|
688
702
|
},
|
|
689
703
|
gray: {
|
|
690
|
-
backgroundColor: "$
|
|
704
|
+
backgroundColor: "$neutral5",
|
|
691
705
|
},
|
|
692
706
|
tomato: {
|
|
693
707
|
backgroundColor: "$tomato5",
|
|
@@ -891,9 +905,9 @@ var Badge = styled("span", {
|
|
|
891
905
|
userSelect: "none",
|
|
892
906
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
893
907
|
"&:disabled": {
|
|
894
|
-
backgroundColor: "$
|
|
908
|
+
backgroundColor: "$neutral3",
|
|
895
909
|
pointerEvents: "none",
|
|
896
|
-
color: "$
|
|
910
|
+
color: "$neutral8",
|
|
897
911
|
},
|
|
898
912
|
"&::before": {
|
|
899
913
|
boxSizing: "border-box",
|
|
@@ -904,9 +918,9 @@ var Badge = styled("span", {
|
|
|
904
918
|
content: '""',
|
|
905
919
|
},
|
|
906
920
|
// Custom
|
|
907
|
-
backgroundColor: "$
|
|
921
|
+
backgroundColor: "$neutral3",
|
|
908
922
|
borderRadius: "$pill",
|
|
909
|
-
color: "$
|
|
923
|
+
color: "$neutral11",
|
|
910
924
|
whiteSpace: "nowrap",
|
|
911
925
|
variants: {
|
|
912
926
|
size: {
|
|
@@ -937,10 +951,10 @@ var Badge = styled("span", {
|
|
|
937
951
|
},
|
|
938
952
|
},
|
|
939
953
|
gray: {
|
|
940
|
-
backgroundColor: "$
|
|
941
|
-
color: "$
|
|
954
|
+
backgroundColor: "$neutral3",
|
|
955
|
+
color: "$neutral11",
|
|
942
956
|
"&:focus": {
|
|
943
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
957
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
944
958
|
},
|
|
945
959
|
},
|
|
946
960
|
red: {
|
|
@@ -1472,7 +1486,6 @@ var Button = styled("button", {
|
|
|
1472
1486
|
fontSize: "$2",
|
|
1473
1487
|
fontWeight: 500,
|
|
1474
1488
|
ai: "center",
|
|
1475
|
-
cursor: "pointer",
|
|
1476
1489
|
px: "$3",
|
|
1477
1490
|
bc: "$neutral4",
|
|
1478
1491
|
borderRadius: "$2",
|
|
@@ -1707,11 +1720,11 @@ var StyledCheckbox = styled(CheckboxPrimitive__namespace.Root, {
|
|
|
1707
1720
|
padding: "0",
|
|
1708
1721
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
1709
1722
|
color: "$hiContrast",
|
|
1710
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1723
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
1711
1724
|
overflow: "hidden",
|
|
1712
1725
|
"@hover": {
|
|
1713
1726
|
"&:hover": {
|
|
1714
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1727
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
1715
1728
|
},
|
|
1716
1729
|
},
|
|
1717
1730
|
"&:focus": {
|
|
@@ -1757,8 +1770,8 @@ var Code = styled("code", {
|
|
|
1757
1770
|
variants: {
|
|
1758
1771
|
variant: {
|
|
1759
1772
|
gray: {
|
|
1760
|
-
backgroundColor: "$
|
|
1761
|
-
color: "$
|
|
1773
|
+
backgroundColor: "$neutral3",
|
|
1774
|
+
color: "$neutral11",
|
|
1762
1775
|
},
|
|
1763
1776
|
violet: {
|
|
1764
1777
|
backgroundColor: "$violet3",
|
|
@@ -1930,11 +1943,11 @@ var itemCss = css(baseItemCss, {
|
|
|
1930
1943
|
color: "white",
|
|
1931
1944
|
},
|
|
1932
1945
|
"&[data-disabled]": {
|
|
1933
|
-
color: "$
|
|
1946
|
+
color: "$neutral9",
|
|
1934
1947
|
},
|
|
1935
1948
|
});
|
|
1936
1949
|
var labelCss = css(baseItemCss, {
|
|
1937
|
-
color: "$
|
|
1950
|
+
color: "$neutral11",
|
|
1938
1951
|
});
|
|
1939
1952
|
var menuCss = css({
|
|
1940
1953
|
boxSizing: "border-box",
|
|
@@ -1944,7 +1957,7 @@ var menuCss = css({
|
|
|
1944
1957
|
var separatorCss = css({
|
|
1945
1958
|
height: 1,
|
|
1946
1959
|
my: "$1",
|
|
1947
|
-
backgroundColor: "$
|
|
1960
|
+
backgroundColor: "$neutral6",
|
|
1948
1961
|
});
|
|
1949
1962
|
var Menu = styled(MenuPrimitive__namespace.Root, menuCss);
|
|
1950
1963
|
styled(MenuPrimitive__namespace.Content, panelStyles);
|
|
@@ -2198,7 +2211,7 @@ var TextField = StyledTextField;
|
|
|
2198
2211
|
var SelectWrapper = styled("div", {
|
|
2199
2212
|
backgroundColor: "$loContrast",
|
|
2200
2213
|
borderRadius: "$2",
|
|
2201
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2214
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2202
2215
|
color: "$hiContrast",
|
|
2203
2216
|
fontFamily: "$untitled",
|
|
2204
2217
|
fontSize: "$1",
|
|
@@ -2255,37 +2268,37 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2255
2268
|
},
|
|
2256
2269
|
_a$6["& ".concat(Button)] = {
|
|
2257
2270
|
borderRadius: 0,
|
|
2258
|
-
boxShadow: "inset 0 1px $colors$
|
|
2271
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2259
2272
|
"&:hover": {
|
|
2260
|
-
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",
|
|
2261
2274
|
},
|
|
2262
2275
|
"&:focus": {
|
|
2263
2276
|
zIndex: 1,
|
|
2264
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2277
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2265
2278
|
},
|
|
2266
2279
|
"&:first-child": {
|
|
2267
2280
|
borderTopLeftRadius: "$1",
|
|
2268
2281
|
borderBottomLeftRadius: "$1",
|
|
2269
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2282
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2270
2283
|
"&:hover": {
|
|
2271
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2284
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
2272
2285
|
},
|
|
2273
2286
|
"&:focus": {
|
|
2274
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2287
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2275
2288
|
},
|
|
2276
2289
|
},
|
|
2277
2290
|
"&:last-child": {
|
|
2278
2291
|
borderTopRightRadius: "$1",
|
|
2279
2292
|
borderBottomRightRadius: "$1",
|
|
2280
|
-
boxShadow: "inset 0 1px $colors$
|
|
2293
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2281
2294
|
"&:focus": {
|
|
2282
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2295
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2283
2296
|
},
|
|
2284
2297
|
},
|
|
2285
2298
|
},
|
|
2286
2299
|
_a$6["& ".concat(TextField)] = {
|
|
2287
2300
|
borderRadius: 0,
|
|
2288
|
-
boxShadow: "inset 0 1px $colors$
|
|
2301
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2289
2302
|
"&:focus": {
|
|
2290
2303
|
zIndex: 1,
|
|
2291
2304
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
@@ -2293,7 +2306,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2293
2306
|
"&:first-child": {
|
|
2294
2307
|
borderTopLeftRadius: "$1",
|
|
2295
2308
|
borderBottomLeftRadius: "$1",
|
|
2296
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2309
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2297
2310
|
"&:focus": {
|
|
2298
2311
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2299
2312
|
},
|
|
@@ -2301,7 +2314,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2301
2314
|
"&:last-child": {
|
|
2302
2315
|
borderTopRightRadius: "$1",
|
|
2303
2316
|
borderBottomRightRadius: "$1",
|
|
2304
|
-
boxShadow: "inset 0 1px $colors$
|
|
2317
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2305
2318
|
"&:focus": {
|
|
2306
2319
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2307
2320
|
},
|
|
@@ -2309,14 +2322,14 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2309
2322
|
},
|
|
2310
2323
|
_a$6["& ".concat(Select)] = {
|
|
2311
2324
|
borderRadius: 0,
|
|
2312
|
-
boxShadow: "inset 0 1px $colors$
|
|
2325
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2313
2326
|
"&:focus-within": {
|
|
2314
2327
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2315
2328
|
},
|
|
2316
2329
|
"&:first-child": {
|
|
2317
2330
|
borderTopLeftRadius: "$1",
|
|
2318
2331
|
borderBottomLeftRadius: "$1",
|
|
2319
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2332
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2320
2333
|
"&:focus-within": {
|
|
2321
2334
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2322
2335
|
},
|
|
@@ -2324,7 +2337,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2324
2337
|
"&:last-child": {
|
|
2325
2338
|
borderTopRightRadius: "$1",
|
|
2326
2339
|
borderBottomRightRadius: "$1",
|
|
2327
|
-
boxShadow: "inset 0 1px $colors$
|
|
2340
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2328
2341
|
"&:focus-within": {
|
|
2329
2342
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2330
2343
|
},
|
|
@@ -2361,23 +2374,23 @@ var IconButton = styled("button", {
|
|
|
2361
2374
|
boxSizing: "border-box",
|
|
2362
2375
|
},
|
|
2363
2376
|
backgroundColor: "$loContrast",
|
|
2364
|
-
border: "1px solid $
|
|
2377
|
+
border: "1px solid $neutral7",
|
|
2365
2378
|
"@hover": {
|
|
2366
2379
|
"&:hover": {
|
|
2367
|
-
borderColor: "$
|
|
2380
|
+
borderColor: "$neutral8",
|
|
2368
2381
|
},
|
|
2369
2382
|
},
|
|
2370
2383
|
"&:active": {
|
|
2371
|
-
backgroundColor: "$
|
|
2384
|
+
backgroundColor: "$neutral2",
|
|
2372
2385
|
},
|
|
2373
2386
|
"&:focus": {
|
|
2374
|
-
borderColor: "$
|
|
2375
|
-
boxShadow: "0 0 0 1px $colors$
|
|
2387
|
+
borderColor: "$neutral8",
|
|
2388
|
+
boxShadow: "0 0 0 1px $colors$neutral8",
|
|
2376
2389
|
},
|
|
2377
2390
|
"&:disabled": {
|
|
2378
2391
|
pointerEvents: "none",
|
|
2379
2392
|
backgroundColor: "transparent",
|
|
2380
|
-
color: "$
|
|
2393
|
+
color: "$neutral6",
|
|
2381
2394
|
},
|
|
2382
2395
|
variants: {
|
|
2383
2396
|
size: {
|
|
@@ -2408,17 +2421,17 @@ var IconButton = styled("button", {
|
|
|
2408
2421
|
borderWidth: "0",
|
|
2409
2422
|
"@hover": {
|
|
2410
2423
|
"&:hover": {
|
|
2411
|
-
backgroundColor: "$
|
|
2424
|
+
backgroundColor: "$neutralA3",
|
|
2412
2425
|
},
|
|
2413
2426
|
},
|
|
2414
2427
|
"&:focus": {
|
|
2415
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2428
|
+
boxShadow: "inset 0 0 0 1px $colors$neutralA8, 0 0 0 1px $colors$neutralA8",
|
|
2416
2429
|
},
|
|
2417
2430
|
"&:active": {
|
|
2418
|
-
backgroundColor: "$
|
|
2431
|
+
backgroundColor: "$neutralA4",
|
|
2419
2432
|
},
|
|
2420
2433
|
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
|
|
2421
|
-
backgroundColor: "$
|
|
2434
|
+
backgroundColor: "$neutralA4",
|
|
2422
2435
|
},
|
|
2423
2436
|
},
|
|
2424
2437
|
raised: {
|
|
@@ -2429,17 +2442,17 @@ var IconButton = styled("button", {
|
|
|
2429
2442
|
},
|
|
2430
2443
|
},
|
|
2431
2444
|
"&:focus": {
|
|
2432
|
-
borderColor: "$
|
|
2433
|
-
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%)",
|
|
2434
2447
|
},
|
|
2435
2448
|
"&:active": {
|
|
2436
|
-
backgroundColor: "$
|
|
2449
|
+
backgroundColor: "$neutral4",
|
|
2437
2450
|
},
|
|
2438
2451
|
},
|
|
2439
2452
|
},
|
|
2440
2453
|
state: {
|
|
2441
2454
|
active: {
|
|
2442
|
-
backgroundColor: "$
|
|
2455
|
+
backgroundColor: "$neutral4",
|
|
2443
2456
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2444
2457
|
"@hover": {
|
|
2445
2458
|
"&:hover": {
|
|
@@ -2447,11 +2460,11 @@ var IconButton = styled("button", {
|
|
|
2447
2460
|
},
|
|
2448
2461
|
},
|
|
2449
2462
|
"&:active": {
|
|
2450
|
-
backgroundColor: "$
|
|
2463
|
+
backgroundColor: "$neutral4",
|
|
2451
2464
|
},
|
|
2452
2465
|
},
|
|
2453
2466
|
waiting: {
|
|
2454
|
-
backgroundColor: "$
|
|
2467
|
+
backgroundColor: "$neutral4",
|
|
2455
2468
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2456
2469
|
"@hover": {
|
|
2457
2470
|
"&:hover": {
|
|
@@ -2459,7 +2472,7 @@ var IconButton = styled("button", {
|
|
|
2459
2472
|
},
|
|
2460
2473
|
},
|
|
2461
2474
|
"&:active": {
|
|
2462
|
-
backgroundColor: "$
|
|
2475
|
+
backgroundColor: "$neutral4",
|
|
2463
2476
|
},
|
|
2464
2477
|
},
|
|
2465
2478
|
},
|
|
@@ -2552,13 +2565,12 @@ var StyledCloseButton$1 = styled(DialogPrimitive__namespace.Close, {
|
|
|
2552
2565
|
position: "absolute",
|
|
2553
2566
|
top: "$2",
|
|
2554
2567
|
right: "$2",
|
|
2555
|
-
cursor: "pointer"
|
|
2556
2568
|
});
|
|
2557
2569
|
var DialogContent = React__default["default"].forwardRef(function (_a, forwardedRef) {
|
|
2558
2570
|
var children = _a.children; _a.animation; var props = tslib.__rest(_a, ["children", "animation"]);
|
|
2559
2571
|
return (React__default["default"].createElement(DialogPrimitive__namespace.Portal, null,
|
|
2560
2572
|
React__default["default"].createElement(StyledOverlay$1, null),
|
|
2561
|
-
React__default["default"].createElement(StyledDialogContent, tslib.__assign({}, props, { ref: forwardedRef, style: { overflow:
|
|
2573
|
+
React__default["default"].createElement(StyledDialogContent, tslib.__assign({}, props, { ref: forwardedRef, style: { overflow: "auto" } }),
|
|
2562
2574
|
children,
|
|
2563
2575
|
React__default["default"].createElement(StyledCloseButton$1, { asChild: true },
|
|
2564
2576
|
React__default["default"].createElement(IconButton, { variant: "ghost" },
|
|
@@ -2913,7 +2925,7 @@ var Text = styled("span", {
|
|
|
2913
2925
|
color: "$bronze11",
|
|
2914
2926
|
},
|
|
2915
2927
|
gray: {
|
|
2916
|
-
color: "$
|
|
2928
|
+
color: "$neutral11",
|
|
2917
2929
|
},
|
|
2918
2930
|
primary: {
|
|
2919
2931
|
color: "$primary11",
|
|
@@ -3098,7 +3110,7 @@ var Kbd = styled("kbd", {
|
|
|
3098
3110
|
userSelect: "none",
|
|
3099
3111
|
cursor: "default",
|
|
3100
3112
|
whiteSpace: "nowrap",
|
|
3101
|
-
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",
|
|
3102
3114
|
textShadow: "0 0 1px rgba(255, 255, 255, 0.5)",
|
|
3103
3115
|
fontFamily: "inherit",
|
|
3104
3116
|
fontWeight: 400,
|
|
@@ -3259,7 +3271,7 @@ var Paragraph = React__default["default"].forwardRef(function (props, forwardedR
|
|
|
3259
3271
|
var textCss = {
|
|
3260
3272
|
1: { lineHeight: "25px", "@bp2": { lineHeight: "27px" } },
|
|
3261
3273
|
2: {
|
|
3262
|
-
color: "$
|
|
3274
|
+
color: "$neutral11",
|
|
3263
3275
|
lineHeight: "27px",
|
|
3264
3276
|
"@bp2": { lineHeight: "30px" },
|
|
3265
3277
|
},
|
|
@@ -3310,13 +3322,13 @@ var StyledProgressBar = styled(ProgressPrimitive__namespace.Root, {
|
|
|
3310
3322
|
overflow: "hidden",
|
|
3311
3323
|
borderRadius: "$pill",
|
|
3312
3324
|
'&[data-state="indeterminate"]': {
|
|
3313
|
-
backgroundColor: "$
|
|
3325
|
+
backgroundColor: "$neutral4",
|
|
3314
3326
|
"&::after": {
|
|
3315
3327
|
animationName: indeterminateProgress,
|
|
3316
3328
|
animationDuration: "1500ms",
|
|
3317
3329
|
animationIterationCount: "infinite",
|
|
3318
3330
|
animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3319
|
-
backgroundColor: "$
|
|
3331
|
+
backgroundColor: "$neutral7",
|
|
3320
3332
|
boxSizing: "border-box",
|
|
3321
3333
|
borderRadius: "$pill",
|
|
3322
3334
|
content: '""',
|
|
@@ -3330,7 +3342,7 @@ var StyledProgressBar = styled(ProgressPrimitive__namespace.Root, {
|
|
|
3330
3342
|
variants: {
|
|
3331
3343
|
variant: {
|
|
3332
3344
|
gray: {
|
|
3333
|
-
background: "$
|
|
3345
|
+
background: "$neutral8",
|
|
3334
3346
|
},
|
|
3335
3347
|
blue: {
|
|
3336
3348
|
backgroundColor: "$blue9",
|
|
@@ -3352,7 +3364,7 @@ var ProgressBarIndicator = styled(ProgressPrimitive__namespace.Indicator, {
|
|
|
3352
3364
|
bottom: 0,
|
|
3353
3365
|
left: 0,
|
|
3354
3366
|
width: "100%",
|
|
3355
|
-
backgroundColor: "$
|
|
3367
|
+
backgroundColor: "$neutral4",
|
|
3356
3368
|
transition: "transform 150ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3357
3369
|
});
|
|
3358
3370
|
var ProgressBar = React__default["default"].forwardRef(function (_a, forwardedRef) {
|
|
@@ -3516,11 +3528,11 @@ var StyledRadio$1 = styled(RadioGroupPrimitive__namespace.Item, {
|
|
|
3516
3528
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
3517
3529
|
borderRadius: "50%",
|
|
3518
3530
|
color: "$hiContrast",
|
|
3519
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3531
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
3520
3532
|
overflow: "hidden",
|
|
3521
3533
|
"@hover": {
|
|
3522
3534
|
"&:hover": {
|
|
3523
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3535
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
3524
3536
|
},
|
|
3525
3537
|
},
|
|
3526
3538
|
"&:focus": {
|
|
@@ -3645,7 +3657,7 @@ var Separator = styled(SeparatorPrimitive__namespace.Root, {
|
|
|
3645
3657
|
border: "none",
|
|
3646
3658
|
margin: 0,
|
|
3647
3659
|
flexShrink: 0,
|
|
3648
|
-
backgroundColor: "$
|
|
3660
|
+
backgroundColor: "$neutral6",
|
|
3649
3661
|
cursor: "default",
|
|
3650
3662
|
variants: {
|
|
3651
3663
|
size: {
|
|
@@ -3804,25 +3816,25 @@ var SimpleToggle = styled(TogglePrimitive__namespace.Root, {
|
|
|
3804
3816
|
backgroundColor: "transparent",
|
|
3805
3817
|
"@hover": {
|
|
3806
3818
|
"&:hover": {
|
|
3807
|
-
backgroundColor: "$
|
|
3819
|
+
backgroundColor: "$neutralA3",
|
|
3808
3820
|
},
|
|
3809
3821
|
},
|
|
3810
3822
|
"&:active": {
|
|
3811
|
-
backgroundColor: "$
|
|
3823
|
+
backgroundColor: "$neutralA4",
|
|
3812
3824
|
},
|
|
3813
3825
|
"&:focus": {
|
|
3814
|
-
boxShadow: "inset 0 0 0 1px $
|
|
3826
|
+
boxShadow: "inset 0 0 0 1px $neutralA8, 0 0 0 1px $neutralA8",
|
|
3815
3827
|
zIndex: 1,
|
|
3816
3828
|
},
|
|
3817
3829
|
'&[data-state="on"]': {
|
|
3818
|
-
backgroundColor: "$
|
|
3830
|
+
backgroundColor: "$neutralA5",
|
|
3819
3831
|
"@hover": {
|
|
3820
3832
|
"&:hover": {
|
|
3821
|
-
backgroundColor: "$
|
|
3833
|
+
backgroundColor: "$neutralA5",
|
|
3822
3834
|
},
|
|
3823
3835
|
},
|
|
3824
3836
|
"&:active": {
|
|
3825
|
-
backgroundColor: "$
|
|
3837
|
+
backgroundColor: "$neutralA7",
|
|
3826
3838
|
},
|
|
3827
3839
|
},
|
|
3828
3840
|
variants: {
|
|
@@ -3842,7 +3854,7 @@ var pulse = keyframes({
|
|
|
3842
3854
|
"100%": { opacity: "100%" },
|
|
3843
3855
|
});
|
|
3844
3856
|
var Skeleton = styled("div", {
|
|
3845
|
-
backgroundColor: "$
|
|
3857
|
+
backgroundColor: "$neutral4",
|
|
3846
3858
|
position: "relative",
|
|
3847
3859
|
overflow: "hidden",
|
|
3848
3860
|
"&::after": {
|
|
@@ -3851,7 +3863,7 @@ var Skeleton = styled("div", {
|
|
|
3851
3863
|
animationDirection: "alternate",
|
|
3852
3864
|
animationIterationCount: "infinite",
|
|
3853
3865
|
animationTimingFunction: "ease-in-out",
|
|
3854
|
-
backgroundColor: "$
|
|
3866
|
+
backgroundColor: "$neutral6",
|
|
3855
3867
|
borderRadius: "inherit",
|
|
3856
3868
|
bottom: 0,
|
|
3857
3869
|
content: '""',
|
|
@@ -3917,7 +3929,7 @@ var _a$2;
|
|
|
3917
3929
|
var SliderTrack = styled(SliderPrimitive__namespace.Track, {
|
|
3918
3930
|
position: "relative",
|
|
3919
3931
|
flexGrow: 1,
|
|
3920
|
-
backgroundColor: "$
|
|
3932
|
+
backgroundColor: "$neutral7",
|
|
3921
3933
|
borderRadius: "$pill",
|
|
3922
3934
|
'&[data-orientation="horizontal"]': {
|
|
3923
3935
|
height: 2,
|
|
@@ -3983,7 +3995,7 @@ var StyledSlider = styled(SliderPrimitive__namespace.Root, {
|
|
|
3983
3995
|
"@hover": {
|
|
3984
3996
|
"&:hover": (_a$2 = {},
|
|
3985
3997
|
_a$2["& ".concat(SliderTrack)] = {
|
|
3986
|
-
backgroundColor: "$
|
|
3998
|
+
backgroundColor: "$neutral8",
|
|
3987
3999
|
},
|
|
3988
4000
|
_a$2["& ".concat(SliderThumb)] = {
|
|
3989
4001
|
opacity: "1",
|
|
@@ -4215,7 +4227,6 @@ var SnackbarProvider = function (_a) {
|
|
|
4215
4227
|
height: "36px",
|
|
4216
4228
|
padding: "8px",
|
|
4217
4229
|
margin: "0 8px 0 0",
|
|
4218
|
-
cursor: "pointer",
|
|
4219
4230
|
position: "relative",
|
|
4220
4231
|
pointerEvents: "auto",
|
|
4221
4232
|
WebkitTapHighlightColor: "transparent",
|
|
@@ -4313,11 +4324,11 @@ var StyledSwitch = styled(SwitchPrimitive__namespace.Root, {
|
|
|
4313
4324
|
margin: "0",
|
|
4314
4325
|
outline: "none",
|
|
4315
4326
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4316
|
-
backgroundColor: "$
|
|
4327
|
+
backgroundColor: "$neutral5",
|
|
4317
4328
|
borderRadius: "$pill",
|
|
4318
4329
|
position: "relative",
|
|
4319
4330
|
"&:focus": {
|
|
4320
|
-
boxShadow: "0 0 0 2px $colors$
|
|
4331
|
+
boxShadow: "0 0 0 2px $colors$neutral8",
|
|
4321
4332
|
},
|
|
4322
4333
|
'&[data-state="checked"]': {
|
|
4323
4334
|
backgroundColor: "$blue9",
|
|
@@ -4479,7 +4490,7 @@ var TabLink = styled("a", {
|
|
|
4479
4490
|
outline: "none",
|
|
4480
4491
|
alignItems: "center",
|
|
4481
4492
|
justifyContent: "center",
|
|
4482
|
-
color: "$
|
|
4493
|
+
color: "$neutral11",
|
|
4483
4494
|
textDecoration: "none",
|
|
4484
4495
|
"@hover": {
|
|
4485
4496
|
"&:hover": {
|
|
@@ -4487,7 +4498,7 @@ var TabLink = styled("a", {
|
|
|
4487
4498
|
},
|
|
4488
4499
|
},
|
|
4489
4500
|
"&:focus": {
|
|
4490
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4501
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
4491
4502
|
},
|
|
4492
4503
|
variants: {
|
|
4493
4504
|
active: {
|
|
@@ -4525,7 +4536,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
|
|
|
4525
4536
|
outline: "none",
|
|
4526
4537
|
alignItems: "center",
|
|
4527
4538
|
justifyContent: "center",
|
|
4528
|
-
color: "$
|
|
4539
|
+
color: "$neutral11",
|
|
4529
4540
|
border: "1px solid transparent",
|
|
4530
4541
|
borderTopLeftRadius: "$2",
|
|
4531
4542
|
borderTopRightRadius: "$2",
|
|
@@ -4537,7 +4548,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
|
|
|
4537
4548
|
},
|
|
4538
4549
|
'&[data-state="active"]': {
|
|
4539
4550
|
color: "$hiContrast",
|
|
4540
|
-
borderColor: "$
|
|
4551
|
+
borderColor: "$neutral6",
|
|
4541
4552
|
borderBottomColor: "transparent",
|
|
4542
4553
|
},
|
|
4543
4554
|
'&[data-orientation="vertical"]': {
|
|
@@ -4546,7 +4557,7 @@ var TabsTriggerBase = styled(TabsPrimitive__namespace.Trigger, {
|
|
|
4546
4557
|
borderBottomLeftRadius: "$2",
|
|
4547
4558
|
borderBottomColor: "transparent",
|
|
4548
4559
|
'&[data-state="active"]': {
|
|
4549
|
-
borderBottomColor: "$
|
|
4560
|
+
borderBottomColor: "$neutral6",
|
|
4550
4561
|
borderRightColor: "transparent",
|
|
4551
4562
|
},
|
|
4552
4563
|
},
|
|
@@ -4556,11 +4567,11 @@ var StyledTabsListBase = styled(TabsPrimitive__namespace.List, {
|
|
|
4556
4567
|
display: "flex",
|
|
4557
4568
|
"&:focus": {
|
|
4558
4569
|
outline: "none",
|
|
4559
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4570
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4560
4571
|
},
|
|
4561
4572
|
'&[data-orientation="vertical"]': {
|
|
4562
4573
|
flexDirection: "column",
|
|
4563
|
-
boxShadow: "inset -1px 0 0 $
|
|
4574
|
+
boxShadow: "inset -1px 0 0 $neutral6",
|
|
4564
4575
|
},
|
|
4565
4576
|
});
|
|
4566
4577
|
var TabsListBase = React__default["default"].forwardRef(function (props, forwardedRef) { return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -4571,7 +4582,7 @@ var TabsContentBase = styled(TabsPrimitive__namespace.Content, {
|
|
|
4571
4582
|
flexGrow: 1,
|
|
4572
4583
|
"&:focus": {
|
|
4573
4584
|
outline: "none",
|
|
4574
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4585
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4575
4586
|
},
|
|
4576
4587
|
});
|
|
4577
4588
|
var TabsTrigger = styled(TabsTriggerBase, {
|
|
@@ -4620,7 +4631,7 @@ var TextArea = styled("textarea", {
|
|
|
4620
4631
|
width: "100%",
|
|
4621
4632
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4622
4633
|
backgroundColor: "$loContrast",
|
|
4623
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4634
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
4624
4635
|
color: "$hiContrast",
|
|
4625
4636
|
fontVariantNumeric: "tabular-nums",
|
|
4626
4637
|
position: "relative",
|
|
@@ -4631,22 +4642,22 @@ var TextArea = styled("textarea", {
|
|
|
4631
4642
|
zIndex: "1",
|
|
4632
4643
|
},
|
|
4633
4644
|
"&::placeholder": {
|
|
4634
|
-
color: "$
|
|
4645
|
+
color: "$neutral9",
|
|
4635
4646
|
},
|
|
4636
4647
|
"&:disabled": {
|
|
4637
4648
|
pointerEvents: "none",
|
|
4638
|
-
backgroundColor: "$
|
|
4639
|
-
color: "$
|
|
4649
|
+
backgroundColor: "$neutral2",
|
|
4650
|
+
color: "$neutral8",
|
|
4640
4651
|
cursor: "not-allowed",
|
|
4641
4652
|
resize: "none",
|
|
4642
4653
|
"&::placeholder": {
|
|
4643
|
-
color: "$
|
|
4654
|
+
color: "$neutral7",
|
|
4644
4655
|
},
|
|
4645
4656
|
},
|
|
4646
4657
|
"&:read-only": {
|
|
4647
|
-
backgroundColor: "$
|
|
4658
|
+
backgroundColor: "$neutral2",
|
|
4648
4659
|
"&:focus": {
|
|
4649
|
-
boxShadow: "inset 0px 0px 0px 1px $colors$
|
|
4660
|
+
boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
|
|
4650
4661
|
},
|
|
4651
4662
|
},
|
|
4652
4663
|
variants: {
|
|
@@ -4760,12 +4771,12 @@ var TreeItem = styled("div", {
|
|
|
4760
4771
|
variants: {
|
|
4761
4772
|
variant: {
|
|
4762
4773
|
gray: {
|
|
4763
|
-
backgroundColor: "$
|
|
4774
|
+
backgroundColor: "$neutral3",
|
|
4764
4775
|
"&:hover": {
|
|
4765
|
-
backgroundColor: "$
|
|
4776
|
+
backgroundColor: "$neutral4",
|
|
4766
4777
|
},
|
|
4767
4778
|
"&:active": {
|
|
4768
|
-
backgroundColor: "$
|
|
4779
|
+
backgroundColor: "$neutral5",
|
|
4769
4780
|
},
|
|
4770
4781
|
},
|
|
4771
4782
|
red: {
|