@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.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",
|
|
@@ -257,7 +257,7 @@ var styled = (_a$8 = createStitches({
|
|
|
257
257
|
createTheme("dark-theme", {
|
|
258
258
|
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
259
|
// Semantic colors
|
|
260
|
-
hiContrast: "$
|
|
260
|
+
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
261
|
});
|
|
262
262
|
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
263
|
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 +329,7 @@ var getThemes = function () {
|
|
|
329
329
|
|
|
330
330
|
var StyledAccordion = styled(AccordionPrimitive.Root, {
|
|
331
331
|
boxShadow: "0 0 0 1px $colors$neutral6",
|
|
332
|
-
borderRadius: "$
|
|
332
|
+
borderRadius: "$2",
|
|
333
333
|
});
|
|
334
334
|
var Accordion = React.forwardRef(function (_a, forwardedRef) {
|
|
335
335
|
var children = _a.children, props = __rest(_a, ["children"]);
|
|
@@ -337,9 +337,26 @@ var Accordion = React.forwardRef(function (_a, forwardedRef) {
|
|
|
337
337
|
});
|
|
338
338
|
Accordion.displayName = "Accordion";
|
|
339
339
|
var StyledItem = styled(AccordionPrimitive.Item, {
|
|
340
|
-
borderTop: "1px solid $colors$
|
|
340
|
+
borderTop: "1px solid $colors$neutral6",
|
|
341
|
+
"&:first-of-type": {
|
|
342
|
+
borderTop: "none",
|
|
343
|
+
},
|
|
341
344
|
"&:last-of-type": {
|
|
342
|
-
borderBottom: "
|
|
345
|
+
borderBottom: "none",
|
|
346
|
+
},
|
|
347
|
+
"&:hover": {
|
|
348
|
+
"&:first-of-type": {
|
|
349
|
+
button: {
|
|
350
|
+
borderTopLeftRadius: "$2",
|
|
351
|
+
borderTopRightRadius: "$2",
|
|
352
|
+
},
|
|
353
|
+
},
|
|
354
|
+
"&:last-of-type": {
|
|
355
|
+
button: {
|
|
356
|
+
borderBottomLeftRadius: "$2",
|
|
357
|
+
borderBottomRightRadius: "$2",
|
|
358
|
+
},
|
|
359
|
+
},
|
|
343
360
|
},
|
|
344
361
|
});
|
|
345
362
|
var StyledHeader = styled(AccordionPrimitive.Header, {
|
|
@@ -361,15 +378,12 @@ var StyledTrigger = styled(AccordionPrimitive.Trigger, {
|
|
|
361
378
|
p: "$2",
|
|
362
379
|
color: "$hiContrast",
|
|
363
380
|
width: "100%",
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
"&:hover": {
|
|
367
|
-
backgroundColor: "$slate2",
|
|
368
|
-
},
|
|
381
|
+
"&:hover": {
|
|
382
|
+
backgroundColor: "$neutral2",
|
|
369
383
|
},
|
|
370
384
|
"&:focus": {
|
|
371
385
|
outline: "none",
|
|
372
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
386
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
373
387
|
},
|
|
374
388
|
svg: {
|
|
375
389
|
transition: "transform 175ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
@@ -414,11 +428,11 @@ var Alert = styled("div", {
|
|
|
414
428
|
variant: {
|
|
415
429
|
loContrast: {
|
|
416
430
|
backgroundColor: "$loContrast",
|
|
417
|
-
borderColor: "$
|
|
431
|
+
borderColor: "$neutral6",
|
|
418
432
|
},
|
|
419
433
|
gray: {
|
|
420
|
-
backgroundColor: "$
|
|
421
|
-
borderColor: "$
|
|
434
|
+
backgroundColor: "$neutral2",
|
|
435
|
+
borderColor: "$neutral6",
|
|
422
436
|
},
|
|
423
437
|
blue: {
|
|
424
438
|
backgroundColor: "$blue2",
|
|
@@ -559,7 +573,7 @@ var Status = styled("div", {
|
|
|
559
573
|
},
|
|
560
574
|
variant: {
|
|
561
575
|
gray: {
|
|
562
|
-
backgroundColor: "$
|
|
576
|
+
backgroundColor: "$neutral7",
|
|
563
577
|
},
|
|
564
578
|
blue: {
|
|
565
579
|
backgroundColor: "$blue9",
|
|
@@ -643,7 +657,7 @@ var StyledAvatar = styled(AvatarPrimitive.Root, {
|
|
|
643
657
|
color: "$loContrast",
|
|
644
658
|
},
|
|
645
659
|
gray: {
|
|
646
|
-
backgroundColor: "$
|
|
660
|
+
backgroundColor: "$neutral5",
|
|
647
661
|
},
|
|
648
662
|
tomato: {
|
|
649
663
|
backgroundColor: "$tomato5",
|
|
@@ -847,9 +861,9 @@ var Badge = styled("span", {
|
|
|
847
861
|
userSelect: "none",
|
|
848
862
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
849
863
|
"&:disabled": {
|
|
850
|
-
backgroundColor: "$
|
|
864
|
+
backgroundColor: "$neutral3",
|
|
851
865
|
pointerEvents: "none",
|
|
852
|
-
color: "$
|
|
866
|
+
color: "$neutral8",
|
|
853
867
|
},
|
|
854
868
|
"&::before": {
|
|
855
869
|
boxSizing: "border-box",
|
|
@@ -860,9 +874,9 @@ var Badge = styled("span", {
|
|
|
860
874
|
content: '""',
|
|
861
875
|
},
|
|
862
876
|
// Custom
|
|
863
|
-
backgroundColor: "$
|
|
877
|
+
backgroundColor: "$neutral3",
|
|
864
878
|
borderRadius: "$pill",
|
|
865
|
-
color: "$
|
|
879
|
+
color: "$neutral11",
|
|
866
880
|
whiteSpace: "nowrap",
|
|
867
881
|
variants: {
|
|
868
882
|
size: {
|
|
@@ -893,10 +907,10 @@ var Badge = styled("span", {
|
|
|
893
907
|
},
|
|
894
908
|
},
|
|
895
909
|
gray: {
|
|
896
|
-
backgroundColor: "$
|
|
897
|
-
color: "$
|
|
910
|
+
backgroundColor: "$neutral3",
|
|
911
|
+
color: "$neutral11",
|
|
898
912
|
"&:focus": {
|
|
899
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
913
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
900
914
|
},
|
|
901
915
|
},
|
|
902
916
|
red: {
|
|
@@ -1428,7 +1442,6 @@ var Button = styled("button", {
|
|
|
1428
1442
|
fontSize: "$2",
|
|
1429
1443
|
fontWeight: 500,
|
|
1430
1444
|
ai: "center",
|
|
1431
|
-
cursor: "pointer",
|
|
1432
1445
|
px: "$3",
|
|
1433
1446
|
bc: "$neutral4",
|
|
1434
1447
|
borderRadius: "$2",
|
|
@@ -1663,11 +1676,11 @@ var StyledCheckbox = styled(CheckboxPrimitive.Root, {
|
|
|
1663
1676
|
padding: "0",
|
|
1664
1677
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
1665
1678
|
color: "$hiContrast",
|
|
1666
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1679
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
1667
1680
|
overflow: "hidden",
|
|
1668
1681
|
"@hover": {
|
|
1669
1682
|
"&:hover": {
|
|
1670
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1683
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
1671
1684
|
},
|
|
1672
1685
|
},
|
|
1673
1686
|
"&:focus": {
|
|
@@ -1713,8 +1726,8 @@ var Code = styled("code", {
|
|
|
1713
1726
|
variants: {
|
|
1714
1727
|
variant: {
|
|
1715
1728
|
gray: {
|
|
1716
|
-
backgroundColor: "$
|
|
1717
|
-
color: "$
|
|
1729
|
+
backgroundColor: "$neutral3",
|
|
1730
|
+
color: "$neutral11",
|
|
1718
1731
|
},
|
|
1719
1732
|
violet: {
|
|
1720
1733
|
backgroundColor: "$violet3",
|
|
@@ -1886,11 +1899,11 @@ var itemCss = css(baseItemCss, {
|
|
|
1886
1899
|
color: "white",
|
|
1887
1900
|
},
|
|
1888
1901
|
"&[data-disabled]": {
|
|
1889
|
-
color: "$
|
|
1902
|
+
color: "$neutral9",
|
|
1890
1903
|
},
|
|
1891
1904
|
});
|
|
1892
1905
|
var labelCss = css(baseItemCss, {
|
|
1893
|
-
color: "$
|
|
1906
|
+
color: "$neutral11",
|
|
1894
1907
|
});
|
|
1895
1908
|
var menuCss = css({
|
|
1896
1909
|
boxSizing: "border-box",
|
|
@@ -1900,7 +1913,7 @@ var menuCss = css({
|
|
|
1900
1913
|
var separatorCss = css({
|
|
1901
1914
|
height: 1,
|
|
1902
1915
|
my: "$1",
|
|
1903
|
-
backgroundColor: "$
|
|
1916
|
+
backgroundColor: "$neutral6",
|
|
1904
1917
|
});
|
|
1905
1918
|
var Menu = styled(MenuPrimitive.Root, menuCss);
|
|
1906
1919
|
styled(MenuPrimitive.Content, panelStyles);
|
|
@@ -2154,7 +2167,7 @@ var TextField = StyledTextField;
|
|
|
2154
2167
|
var SelectWrapper = styled("div", {
|
|
2155
2168
|
backgroundColor: "$loContrast",
|
|
2156
2169
|
borderRadius: "$2",
|
|
2157
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2170
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2158
2171
|
color: "$hiContrast",
|
|
2159
2172
|
fontFamily: "$untitled",
|
|
2160
2173
|
fontSize: "$1",
|
|
@@ -2211,37 +2224,37 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2211
2224
|
},
|
|
2212
2225
|
_a$6["& ".concat(Button)] = {
|
|
2213
2226
|
borderRadius: 0,
|
|
2214
|
-
boxShadow: "inset 0 1px $colors$
|
|
2227
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2215
2228
|
"&:hover": {
|
|
2216
|
-
boxShadow: "-1px 0 $colors$
|
|
2229
|
+
boxShadow: "-1px 0 $colors$neutral8, inset 0 1px $colors$neutral8, inset -1px 0 $colors$neutral8, inset 0 -1px $colors$neutral8",
|
|
2217
2230
|
},
|
|
2218
2231
|
"&:focus": {
|
|
2219
2232
|
zIndex: 1,
|
|
2220
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2233
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2221
2234
|
},
|
|
2222
2235
|
"&:first-child": {
|
|
2223
2236
|
borderTopLeftRadius: "$1",
|
|
2224
2237
|
borderBottomLeftRadius: "$1",
|
|
2225
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2238
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2226
2239
|
"&:hover": {
|
|
2227
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2240
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
2228
2241
|
},
|
|
2229
2242
|
"&:focus": {
|
|
2230
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2243
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2231
2244
|
},
|
|
2232
2245
|
},
|
|
2233
2246
|
"&:last-child": {
|
|
2234
2247
|
borderTopRightRadius: "$1",
|
|
2235
2248
|
borderBottomRightRadius: "$1",
|
|
2236
|
-
boxShadow: "inset 0 1px $colors$
|
|
2249
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2237
2250
|
"&:focus": {
|
|
2238
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2251
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2239
2252
|
},
|
|
2240
2253
|
},
|
|
2241
2254
|
},
|
|
2242
2255
|
_a$6["& ".concat(TextField)] = {
|
|
2243
2256
|
borderRadius: 0,
|
|
2244
|
-
boxShadow: "inset 0 1px $colors$
|
|
2257
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2245
2258
|
"&:focus": {
|
|
2246
2259
|
zIndex: 1,
|
|
2247
2260
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
@@ -2249,7 +2262,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2249
2262
|
"&:first-child": {
|
|
2250
2263
|
borderTopLeftRadius: "$1",
|
|
2251
2264
|
borderBottomLeftRadius: "$1",
|
|
2252
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2265
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2253
2266
|
"&:focus": {
|
|
2254
2267
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2255
2268
|
},
|
|
@@ -2257,7 +2270,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2257
2270
|
"&:last-child": {
|
|
2258
2271
|
borderTopRightRadius: "$1",
|
|
2259
2272
|
borderBottomRightRadius: "$1",
|
|
2260
|
-
boxShadow: "inset 0 1px $colors$
|
|
2273
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2261
2274
|
"&:focus": {
|
|
2262
2275
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2263
2276
|
},
|
|
@@ -2265,14 +2278,14 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2265
2278
|
},
|
|
2266
2279
|
_a$6["& ".concat(Select)] = {
|
|
2267
2280
|
borderRadius: 0,
|
|
2268
|
-
boxShadow: "inset 0 1px $colors$
|
|
2281
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2269
2282
|
"&:focus-within": {
|
|
2270
2283
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2271
2284
|
},
|
|
2272
2285
|
"&:first-child": {
|
|
2273
2286
|
borderTopLeftRadius: "$1",
|
|
2274
2287
|
borderBottomLeftRadius: "$1",
|
|
2275
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2288
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2276
2289
|
"&:focus-within": {
|
|
2277
2290
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2278
2291
|
},
|
|
@@ -2280,7 +2293,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2280
2293
|
"&:last-child": {
|
|
2281
2294
|
borderTopRightRadius: "$1",
|
|
2282
2295
|
borderBottomRightRadius: "$1",
|
|
2283
|
-
boxShadow: "inset 0 1px $colors$
|
|
2296
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2284
2297
|
"&:focus-within": {
|
|
2285
2298
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2286
2299
|
},
|
|
@@ -2317,23 +2330,23 @@ var IconButton = styled("button", {
|
|
|
2317
2330
|
boxSizing: "border-box",
|
|
2318
2331
|
},
|
|
2319
2332
|
backgroundColor: "$loContrast",
|
|
2320
|
-
border: "1px solid $
|
|
2333
|
+
border: "1px solid $neutral7",
|
|
2321
2334
|
"@hover": {
|
|
2322
2335
|
"&:hover": {
|
|
2323
|
-
borderColor: "$
|
|
2336
|
+
borderColor: "$neutral8",
|
|
2324
2337
|
},
|
|
2325
2338
|
},
|
|
2326
2339
|
"&:active": {
|
|
2327
|
-
backgroundColor: "$
|
|
2340
|
+
backgroundColor: "$neutral2",
|
|
2328
2341
|
},
|
|
2329
2342
|
"&:focus": {
|
|
2330
|
-
borderColor: "$
|
|
2331
|
-
boxShadow: "0 0 0 1px $colors$
|
|
2343
|
+
borderColor: "$neutral8",
|
|
2344
|
+
boxShadow: "0 0 0 1px $colors$neutral8",
|
|
2332
2345
|
},
|
|
2333
2346
|
"&:disabled": {
|
|
2334
2347
|
pointerEvents: "none",
|
|
2335
2348
|
backgroundColor: "transparent",
|
|
2336
|
-
color: "$
|
|
2349
|
+
color: "$neutral6",
|
|
2337
2350
|
},
|
|
2338
2351
|
variants: {
|
|
2339
2352
|
size: {
|
|
@@ -2364,17 +2377,17 @@ var IconButton = styled("button", {
|
|
|
2364
2377
|
borderWidth: "0",
|
|
2365
2378
|
"@hover": {
|
|
2366
2379
|
"&:hover": {
|
|
2367
|
-
backgroundColor: "$
|
|
2380
|
+
backgroundColor: "$neutralA3",
|
|
2368
2381
|
},
|
|
2369
2382
|
},
|
|
2370
2383
|
"&:focus": {
|
|
2371
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2384
|
+
boxShadow: "inset 0 0 0 1px $colors$neutralA8, 0 0 0 1px $colors$neutralA8",
|
|
2372
2385
|
},
|
|
2373
2386
|
"&:active": {
|
|
2374
|
-
backgroundColor: "$
|
|
2387
|
+
backgroundColor: "$neutralA4",
|
|
2375
2388
|
},
|
|
2376
2389
|
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
|
|
2377
|
-
backgroundColor: "$
|
|
2390
|
+
backgroundColor: "$neutralA4",
|
|
2378
2391
|
},
|
|
2379
2392
|
},
|
|
2380
2393
|
raised: {
|
|
@@ -2385,17 +2398,17 @@ var IconButton = styled("button", {
|
|
|
2385
2398
|
},
|
|
2386
2399
|
},
|
|
2387
2400
|
"&:focus": {
|
|
2388
|
-
borderColor: "$
|
|
2389
|
-
boxShadow: "0 0 0 1px $colors$
|
|
2401
|
+
borderColor: "$neutral8",
|
|
2402
|
+
boxShadow: "0 0 0 1px $colors$neutral8, 0 16px 32px hsl(206deg 12% 5% / 25%), 0 3px 5px hsl(0deg 0% 0% / 10%)",
|
|
2390
2403
|
},
|
|
2391
2404
|
"&:active": {
|
|
2392
|
-
backgroundColor: "$
|
|
2405
|
+
backgroundColor: "$neutral4",
|
|
2393
2406
|
},
|
|
2394
2407
|
},
|
|
2395
2408
|
},
|
|
2396
2409
|
state: {
|
|
2397
2410
|
active: {
|
|
2398
|
-
backgroundColor: "$
|
|
2411
|
+
backgroundColor: "$neutral4",
|
|
2399
2412
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2400
2413
|
"@hover": {
|
|
2401
2414
|
"&:hover": {
|
|
@@ -2403,11 +2416,11 @@ var IconButton = styled("button", {
|
|
|
2403
2416
|
},
|
|
2404
2417
|
},
|
|
2405
2418
|
"&:active": {
|
|
2406
|
-
backgroundColor: "$
|
|
2419
|
+
backgroundColor: "$neutral4",
|
|
2407
2420
|
},
|
|
2408
2421
|
},
|
|
2409
2422
|
waiting: {
|
|
2410
|
-
backgroundColor: "$
|
|
2423
|
+
backgroundColor: "$neutral4",
|
|
2411
2424
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2412
2425
|
"@hover": {
|
|
2413
2426
|
"&:hover": {
|
|
@@ -2415,7 +2428,7 @@ var IconButton = styled("button", {
|
|
|
2415
2428
|
},
|
|
2416
2429
|
},
|
|
2417
2430
|
"&:active": {
|
|
2418
|
-
backgroundColor: "$
|
|
2431
|
+
backgroundColor: "$neutral4",
|
|
2419
2432
|
},
|
|
2420
2433
|
},
|
|
2421
2434
|
},
|
|
@@ -2508,13 +2521,12 @@ var StyledCloseButton$1 = styled(DialogPrimitive.Close, {
|
|
|
2508
2521
|
position: "absolute",
|
|
2509
2522
|
top: "$2",
|
|
2510
2523
|
right: "$2",
|
|
2511
|
-
cursor: "pointer"
|
|
2512
2524
|
});
|
|
2513
2525
|
var DialogContent = React.forwardRef(function (_a, forwardedRef) {
|
|
2514
2526
|
var children = _a.children; _a.animation; var props = __rest(_a, ["children", "animation"]);
|
|
2515
2527
|
return (React.createElement(DialogPrimitive.Portal, null,
|
|
2516
2528
|
React.createElement(StyledOverlay$1, null),
|
|
2517
|
-
React.createElement(StyledDialogContent, __assign({}, props, { ref: forwardedRef, style: { overflow:
|
|
2529
|
+
React.createElement(StyledDialogContent, __assign({}, props, { ref: forwardedRef, style: { overflow: "auto" } }),
|
|
2518
2530
|
children,
|
|
2519
2531
|
React.createElement(StyledCloseButton$1, { asChild: true },
|
|
2520
2532
|
React.createElement(IconButton, { variant: "ghost" },
|
|
@@ -2869,7 +2881,7 @@ var Text = styled("span", {
|
|
|
2869
2881
|
color: "$bronze11",
|
|
2870
2882
|
},
|
|
2871
2883
|
gray: {
|
|
2872
|
-
color: "$
|
|
2884
|
+
color: "$neutral11",
|
|
2873
2885
|
},
|
|
2874
2886
|
primary: {
|
|
2875
2887
|
color: "$primary11",
|
|
@@ -3054,7 +3066,7 @@ var Kbd = styled("kbd", {
|
|
|
3054
3066
|
userSelect: "none",
|
|
3055
3067
|
cursor: "default",
|
|
3056
3068
|
whiteSpace: "nowrap",
|
|
3057
|
-
boxShadow: "\n inset 0 0.5px rgba(255, 255, 255, 0.1),\n inset 0 1px 5px $colors$
|
|
3069
|
+
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",
|
|
3058
3070
|
textShadow: "0 0 1px rgba(255, 255, 255, 0.5)",
|
|
3059
3071
|
fontFamily: "inherit",
|
|
3060
3072
|
fontWeight: 400,
|
|
@@ -3215,7 +3227,7 @@ var Paragraph = React.forwardRef(function (props, forwardedRef) {
|
|
|
3215
3227
|
var textCss = {
|
|
3216
3228
|
1: { lineHeight: "25px", "@bp2": { lineHeight: "27px" } },
|
|
3217
3229
|
2: {
|
|
3218
|
-
color: "$
|
|
3230
|
+
color: "$neutral11",
|
|
3219
3231
|
lineHeight: "27px",
|
|
3220
3232
|
"@bp2": { lineHeight: "30px" },
|
|
3221
3233
|
},
|
|
@@ -3266,13 +3278,13 @@ var StyledProgressBar = styled(ProgressPrimitive.Root, {
|
|
|
3266
3278
|
overflow: "hidden",
|
|
3267
3279
|
borderRadius: "$pill",
|
|
3268
3280
|
'&[data-state="indeterminate"]': {
|
|
3269
|
-
backgroundColor: "$
|
|
3281
|
+
backgroundColor: "$neutral4",
|
|
3270
3282
|
"&::after": {
|
|
3271
3283
|
animationName: indeterminateProgress,
|
|
3272
3284
|
animationDuration: "1500ms",
|
|
3273
3285
|
animationIterationCount: "infinite",
|
|
3274
3286
|
animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3275
|
-
backgroundColor: "$
|
|
3287
|
+
backgroundColor: "$neutral7",
|
|
3276
3288
|
boxSizing: "border-box",
|
|
3277
3289
|
borderRadius: "$pill",
|
|
3278
3290
|
content: '""',
|
|
@@ -3286,7 +3298,7 @@ var StyledProgressBar = styled(ProgressPrimitive.Root, {
|
|
|
3286
3298
|
variants: {
|
|
3287
3299
|
variant: {
|
|
3288
3300
|
gray: {
|
|
3289
|
-
background: "$
|
|
3301
|
+
background: "$neutral8",
|
|
3290
3302
|
},
|
|
3291
3303
|
blue: {
|
|
3292
3304
|
backgroundColor: "$blue9",
|
|
@@ -3308,7 +3320,7 @@ var ProgressBarIndicator = styled(ProgressPrimitive.Indicator, {
|
|
|
3308
3320
|
bottom: 0,
|
|
3309
3321
|
left: 0,
|
|
3310
3322
|
width: "100%",
|
|
3311
|
-
backgroundColor: "$
|
|
3323
|
+
backgroundColor: "$neutral4",
|
|
3312
3324
|
transition: "transform 150ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3313
3325
|
});
|
|
3314
3326
|
var ProgressBar = React.forwardRef(function (_a, forwardedRef) {
|
|
@@ -3472,11 +3484,11 @@ var StyledRadio$1 = styled(RadioGroupPrimitive.Item, {
|
|
|
3472
3484
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
3473
3485
|
borderRadius: "50%",
|
|
3474
3486
|
color: "$hiContrast",
|
|
3475
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3487
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
3476
3488
|
overflow: "hidden",
|
|
3477
3489
|
"@hover": {
|
|
3478
3490
|
"&:hover": {
|
|
3479
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3491
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
3480
3492
|
},
|
|
3481
3493
|
},
|
|
3482
3494
|
"&:focus": {
|
|
@@ -3601,7 +3613,7 @@ var Separator = styled(SeparatorPrimitive.Root, {
|
|
|
3601
3613
|
border: "none",
|
|
3602
3614
|
margin: 0,
|
|
3603
3615
|
flexShrink: 0,
|
|
3604
|
-
backgroundColor: "$
|
|
3616
|
+
backgroundColor: "$neutral6",
|
|
3605
3617
|
cursor: "default",
|
|
3606
3618
|
variants: {
|
|
3607
3619
|
size: {
|
|
@@ -3760,25 +3772,25 @@ var SimpleToggle = styled(TogglePrimitive.Root, {
|
|
|
3760
3772
|
backgroundColor: "transparent",
|
|
3761
3773
|
"@hover": {
|
|
3762
3774
|
"&:hover": {
|
|
3763
|
-
backgroundColor: "$
|
|
3775
|
+
backgroundColor: "$neutralA3",
|
|
3764
3776
|
},
|
|
3765
3777
|
},
|
|
3766
3778
|
"&:active": {
|
|
3767
|
-
backgroundColor: "$
|
|
3779
|
+
backgroundColor: "$neutralA4",
|
|
3768
3780
|
},
|
|
3769
3781
|
"&:focus": {
|
|
3770
|
-
boxShadow: "inset 0 0 0 1px $
|
|
3782
|
+
boxShadow: "inset 0 0 0 1px $neutralA8, 0 0 0 1px $neutralA8",
|
|
3771
3783
|
zIndex: 1,
|
|
3772
3784
|
},
|
|
3773
3785
|
'&[data-state="on"]': {
|
|
3774
|
-
backgroundColor: "$
|
|
3786
|
+
backgroundColor: "$neutralA5",
|
|
3775
3787
|
"@hover": {
|
|
3776
3788
|
"&:hover": {
|
|
3777
|
-
backgroundColor: "$
|
|
3789
|
+
backgroundColor: "$neutralA5",
|
|
3778
3790
|
},
|
|
3779
3791
|
},
|
|
3780
3792
|
"&:active": {
|
|
3781
|
-
backgroundColor: "$
|
|
3793
|
+
backgroundColor: "$neutralA7",
|
|
3782
3794
|
},
|
|
3783
3795
|
},
|
|
3784
3796
|
variants: {
|
|
@@ -3798,7 +3810,7 @@ var pulse = keyframes({
|
|
|
3798
3810
|
"100%": { opacity: "100%" },
|
|
3799
3811
|
});
|
|
3800
3812
|
var Skeleton = styled("div", {
|
|
3801
|
-
backgroundColor: "$
|
|
3813
|
+
backgroundColor: "$neutral4",
|
|
3802
3814
|
position: "relative",
|
|
3803
3815
|
overflow: "hidden",
|
|
3804
3816
|
"&::after": {
|
|
@@ -3807,7 +3819,7 @@ var Skeleton = styled("div", {
|
|
|
3807
3819
|
animationDirection: "alternate",
|
|
3808
3820
|
animationIterationCount: "infinite",
|
|
3809
3821
|
animationTimingFunction: "ease-in-out",
|
|
3810
|
-
backgroundColor: "$
|
|
3822
|
+
backgroundColor: "$neutral6",
|
|
3811
3823
|
borderRadius: "inherit",
|
|
3812
3824
|
bottom: 0,
|
|
3813
3825
|
content: '""',
|
|
@@ -3873,7 +3885,7 @@ var _a$2;
|
|
|
3873
3885
|
var SliderTrack = styled(SliderPrimitive.Track, {
|
|
3874
3886
|
position: "relative",
|
|
3875
3887
|
flexGrow: 1,
|
|
3876
|
-
backgroundColor: "$
|
|
3888
|
+
backgroundColor: "$neutral7",
|
|
3877
3889
|
borderRadius: "$pill",
|
|
3878
3890
|
'&[data-orientation="horizontal"]': {
|
|
3879
3891
|
height: 2,
|
|
@@ -3939,7 +3951,7 @@ var StyledSlider = styled(SliderPrimitive.Root, {
|
|
|
3939
3951
|
"@hover": {
|
|
3940
3952
|
"&:hover": (_a$2 = {},
|
|
3941
3953
|
_a$2["& ".concat(SliderTrack)] = {
|
|
3942
|
-
backgroundColor: "$
|
|
3954
|
+
backgroundColor: "$neutral8",
|
|
3943
3955
|
},
|
|
3944
3956
|
_a$2["& ".concat(SliderThumb)] = {
|
|
3945
3957
|
opacity: "1",
|
|
@@ -4171,7 +4183,6 @@ var SnackbarProvider = function (_a) {
|
|
|
4171
4183
|
height: "36px",
|
|
4172
4184
|
padding: "8px",
|
|
4173
4185
|
margin: "0 8px 0 0",
|
|
4174
|
-
cursor: "pointer",
|
|
4175
4186
|
position: "relative",
|
|
4176
4187
|
pointerEvents: "auto",
|
|
4177
4188
|
WebkitTapHighlightColor: "transparent",
|
|
@@ -4269,11 +4280,11 @@ var StyledSwitch = styled(SwitchPrimitive.Root, {
|
|
|
4269
4280
|
margin: "0",
|
|
4270
4281
|
outline: "none",
|
|
4271
4282
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4272
|
-
backgroundColor: "$
|
|
4283
|
+
backgroundColor: "$neutral5",
|
|
4273
4284
|
borderRadius: "$pill",
|
|
4274
4285
|
position: "relative",
|
|
4275
4286
|
"&:focus": {
|
|
4276
|
-
boxShadow: "0 0 0 2px $colors$
|
|
4287
|
+
boxShadow: "0 0 0 2px $colors$neutral8",
|
|
4277
4288
|
},
|
|
4278
4289
|
'&[data-state="checked"]': {
|
|
4279
4290
|
backgroundColor: "$blue9",
|
|
@@ -4435,7 +4446,7 @@ var TabLink = styled("a", {
|
|
|
4435
4446
|
outline: "none",
|
|
4436
4447
|
alignItems: "center",
|
|
4437
4448
|
justifyContent: "center",
|
|
4438
|
-
color: "$
|
|
4449
|
+
color: "$neutral11",
|
|
4439
4450
|
textDecoration: "none",
|
|
4440
4451
|
"@hover": {
|
|
4441
4452
|
"&:hover": {
|
|
@@ -4443,7 +4454,7 @@ var TabLink = styled("a", {
|
|
|
4443
4454
|
},
|
|
4444
4455
|
},
|
|
4445
4456
|
"&:focus": {
|
|
4446
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4457
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
4447
4458
|
},
|
|
4448
4459
|
variants: {
|
|
4449
4460
|
active: {
|
|
@@ -4481,7 +4492,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4481
4492
|
outline: "none",
|
|
4482
4493
|
alignItems: "center",
|
|
4483
4494
|
justifyContent: "center",
|
|
4484
|
-
color: "$
|
|
4495
|
+
color: "$neutral11",
|
|
4485
4496
|
border: "1px solid transparent",
|
|
4486
4497
|
borderTopLeftRadius: "$2",
|
|
4487
4498
|
borderTopRightRadius: "$2",
|
|
@@ -4493,7 +4504,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4493
4504
|
},
|
|
4494
4505
|
'&[data-state="active"]': {
|
|
4495
4506
|
color: "$hiContrast",
|
|
4496
|
-
borderColor: "$
|
|
4507
|
+
borderColor: "$neutral6",
|
|
4497
4508
|
borderBottomColor: "transparent",
|
|
4498
4509
|
},
|
|
4499
4510
|
'&[data-orientation="vertical"]': {
|
|
@@ -4502,7 +4513,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4502
4513
|
borderBottomLeftRadius: "$2",
|
|
4503
4514
|
borderBottomColor: "transparent",
|
|
4504
4515
|
'&[data-state="active"]': {
|
|
4505
|
-
borderBottomColor: "$
|
|
4516
|
+
borderBottomColor: "$neutral6",
|
|
4506
4517
|
borderRightColor: "transparent",
|
|
4507
4518
|
},
|
|
4508
4519
|
},
|
|
@@ -4512,11 +4523,11 @@ var StyledTabsListBase = styled(TabsPrimitive.List, {
|
|
|
4512
4523
|
display: "flex",
|
|
4513
4524
|
"&:focus": {
|
|
4514
4525
|
outline: "none",
|
|
4515
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4526
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4516
4527
|
},
|
|
4517
4528
|
'&[data-orientation="vertical"]': {
|
|
4518
4529
|
flexDirection: "column",
|
|
4519
|
-
boxShadow: "inset -1px 0 0 $
|
|
4530
|
+
boxShadow: "inset -1px 0 0 $neutral6",
|
|
4520
4531
|
},
|
|
4521
4532
|
});
|
|
4522
4533
|
var TabsListBase = React.forwardRef(function (props, forwardedRef) { return (React.createElement(React.Fragment, null,
|
|
@@ -4527,7 +4538,7 @@ var TabsContentBase = styled(TabsPrimitive.Content, {
|
|
|
4527
4538
|
flexGrow: 1,
|
|
4528
4539
|
"&:focus": {
|
|
4529
4540
|
outline: "none",
|
|
4530
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4541
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4531
4542
|
},
|
|
4532
4543
|
});
|
|
4533
4544
|
var TabsTrigger = styled(TabsTriggerBase, {
|
|
@@ -4576,7 +4587,7 @@ var TextArea = styled("textarea", {
|
|
|
4576
4587
|
width: "100%",
|
|
4577
4588
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4578
4589
|
backgroundColor: "$loContrast",
|
|
4579
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4590
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
4580
4591
|
color: "$hiContrast",
|
|
4581
4592
|
fontVariantNumeric: "tabular-nums",
|
|
4582
4593
|
position: "relative",
|
|
@@ -4587,22 +4598,22 @@ var TextArea = styled("textarea", {
|
|
|
4587
4598
|
zIndex: "1",
|
|
4588
4599
|
},
|
|
4589
4600
|
"&::placeholder": {
|
|
4590
|
-
color: "$
|
|
4601
|
+
color: "$neutral9",
|
|
4591
4602
|
},
|
|
4592
4603
|
"&:disabled": {
|
|
4593
4604
|
pointerEvents: "none",
|
|
4594
|
-
backgroundColor: "$
|
|
4595
|
-
color: "$
|
|
4605
|
+
backgroundColor: "$neutral2",
|
|
4606
|
+
color: "$neutral8",
|
|
4596
4607
|
cursor: "not-allowed",
|
|
4597
4608
|
resize: "none",
|
|
4598
4609
|
"&::placeholder": {
|
|
4599
|
-
color: "$
|
|
4610
|
+
color: "$neutral7",
|
|
4600
4611
|
},
|
|
4601
4612
|
},
|
|
4602
4613
|
"&:read-only": {
|
|
4603
|
-
backgroundColor: "$
|
|
4614
|
+
backgroundColor: "$neutral2",
|
|
4604
4615
|
"&:focus": {
|
|
4605
|
-
boxShadow: "inset 0px 0px 0px 1px $colors$
|
|
4616
|
+
boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
|
|
4606
4617
|
},
|
|
4607
4618
|
},
|
|
4608
4619
|
variants: {
|
|
@@ -4716,12 +4727,12 @@ var TreeItem = styled("div", {
|
|
|
4716
4727
|
variants: {
|
|
4717
4728
|
variant: {
|
|
4718
4729
|
gray: {
|
|
4719
|
-
backgroundColor: "$
|
|
4730
|
+
backgroundColor: "$neutral3",
|
|
4720
4731
|
"&:hover": {
|
|
4721
|
-
backgroundColor: "$
|
|
4732
|
+
backgroundColor: "$neutral4",
|
|
4722
4733
|
},
|
|
4723
4734
|
"&:active": {
|
|
4724
|
-
backgroundColor: "$
|
|
4735
|
+
backgroundColor: "$neutral5",
|
|
4725
4736
|
},
|
|
4726
4737
|
},
|
|
4727
4738
|
red: {
|