@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.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,14 +378,12 @@ var StyledTrigger = styled(AccordionPrimitive.Trigger, {
|
|
|
361
378
|
p: "$2",
|
|
362
379
|
color: "$hiContrast",
|
|
363
380
|
width: "100%",
|
|
364
|
-
"
|
|
365
|
-
"
|
|
366
|
-
backgroundColor: "$slate2",
|
|
367
|
-
},
|
|
381
|
+
"&:hover": {
|
|
382
|
+
backgroundColor: "$neutral2",
|
|
368
383
|
},
|
|
369
384
|
"&:focus": {
|
|
370
385
|
outline: "none",
|
|
371
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
386
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
372
387
|
},
|
|
373
388
|
svg: {
|
|
374
389
|
transition: "transform 175ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
@@ -413,11 +428,11 @@ var Alert = styled("div", {
|
|
|
413
428
|
variant: {
|
|
414
429
|
loContrast: {
|
|
415
430
|
backgroundColor: "$loContrast",
|
|
416
|
-
borderColor: "$
|
|
431
|
+
borderColor: "$neutral6",
|
|
417
432
|
},
|
|
418
433
|
gray: {
|
|
419
|
-
backgroundColor: "$
|
|
420
|
-
borderColor: "$
|
|
434
|
+
backgroundColor: "$neutral2",
|
|
435
|
+
borderColor: "$neutral6",
|
|
421
436
|
},
|
|
422
437
|
blue: {
|
|
423
438
|
backgroundColor: "$blue2",
|
|
@@ -558,7 +573,7 @@ var Status = styled("div", {
|
|
|
558
573
|
},
|
|
559
574
|
variant: {
|
|
560
575
|
gray: {
|
|
561
|
-
backgroundColor: "$
|
|
576
|
+
backgroundColor: "$neutral7",
|
|
562
577
|
},
|
|
563
578
|
blue: {
|
|
564
579
|
backgroundColor: "$blue9",
|
|
@@ -642,7 +657,7 @@ var StyledAvatar = styled(AvatarPrimitive.Root, {
|
|
|
642
657
|
color: "$loContrast",
|
|
643
658
|
},
|
|
644
659
|
gray: {
|
|
645
|
-
backgroundColor: "$
|
|
660
|
+
backgroundColor: "$neutral5",
|
|
646
661
|
},
|
|
647
662
|
tomato: {
|
|
648
663
|
backgroundColor: "$tomato5",
|
|
@@ -846,9 +861,9 @@ var Badge = styled("span", {
|
|
|
846
861
|
userSelect: "none",
|
|
847
862
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
848
863
|
"&:disabled": {
|
|
849
|
-
backgroundColor: "$
|
|
864
|
+
backgroundColor: "$neutral3",
|
|
850
865
|
pointerEvents: "none",
|
|
851
|
-
color: "$
|
|
866
|
+
color: "$neutral8",
|
|
852
867
|
},
|
|
853
868
|
"&::before": {
|
|
854
869
|
boxSizing: "border-box",
|
|
@@ -859,9 +874,9 @@ var Badge = styled("span", {
|
|
|
859
874
|
content: '""',
|
|
860
875
|
},
|
|
861
876
|
// Custom
|
|
862
|
-
backgroundColor: "$
|
|
877
|
+
backgroundColor: "$neutral3",
|
|
863
878
|
borderRadius: "$pill",
|
|
864
|
-
color: "$
|
|
879
|
+
color: "$neutral11",
|
|
865
880
|
whiteSpace: "nowrap",
|
|
866
881
|
variants: {
|
|
867
882
|
size: {
|
|
@@ -892,10 +907,10 @@ var Badge = styled("span", {
|
|
|
892
907
|
},
|
|
893
908
|
},
|
|
894
909
|
gray: {
|
|
895
|
-
backgroundColor: "$
|
|
896
|
-
color: "$
|
|
910
|
+
backgroundColor: "$neutral3",
|
|
911
|
+
color: "$neutral11",
|
|
897
912
|
"&:focus": {
|
|
898
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
913
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
899
914
|
},
|
|
900
915
|
},
|
|
901
916
|
red: {
|
|
@@ -1661,11 +1676,11 @@ var StyledCheckbox = styled(CheckboxPrimitive.Root, {
|
|
|
1661
1676
|
padding: "0",
|
|
1662
1677
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
1663
1678
|
color: "$hiContrast",
|
|
1664
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1679
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
1665
1680
|
overflow: "hidden",
|
|
1666
1681
|
"@hover": {
|
|
1667
1682
|
"&:hover": {
|
|
1668
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
1683
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
1669
1684
|
},
|
|
1670
1685
|
},
|
|
1671
1686
|
"&:focus": {
|
|
@@ -1711,8 +1726,8 @@ var Code = styled("code", {
|
|
|
1711
1726
|
variants: {
|
|
1712
1727
|
variant: {
|
|
1713
1728
|
gray: {
|
|
1714
|
-
backgroundColor: "$
|
|
1715
|
-
color: "$
|
|
1729
|
+
backgroundColor: "$neutral3",
|
|
1730
|
+
color: "$neutral11",
|
|
1716
1731
|
},
|
|
1717
1732
|
violet: {
|
|
1718
1733
|
backgroundColor: "$violet3",
|
|
@@ -1884,11 +1899,11 @@ var itemCss = css(baseItemCss, {
|
|
|
1884
1899
|
color: "white",
|
|
1885
1900
|
},
|
|
1886
1901
|
"&[data-disabled]": {
|
|
1887
|
-
color: "$
|
|
1902
|
+
color: "$neutral9",
|
|
1888
1903
|
},
|
|
1889
1904
|
});
|
|
1890
1905
|
var labelCss = css(baseItemCss, {
|
|
1891
|
-
color: "$
|
|
1906
|
+
color: "$neutral11",
|
|
1892
1907
|
});
|
|
1893
1908
|
var menuCss = css({
|
|
1894
1909
|
boxSizing: "border-box",
|
|
@@ -1898,7 +1913,7 @@ var menuCss = css({
|
|
|
1898
1913
|
var separatorCss = css({
|
|
1899
1914
|
height: 1,
|
|
1900
1915
|
my: "$1",
|
|
1901
|
-
backgroundColor: "$
|
|
1916
|
+
backgroundColor: "$neutral6",
|
|
1902
1917
|
});
|
|
1903
1918
|
var Menu = styled(MenuPrimitive.Root, menuCss);
|
|
1904
1919
|
styled(MenuPrimitive.Content, panelStyles);
|
|
@@ -2152,7 +2167,7 @@ var TextField = StyledTextField;
|
|
|
2152
2167
|
var SelectWrapper = styled("div", {
|
|
2153
2168
|
backgroundColor: "$loContrast",
|
|
2154
2169
|
borderRadius: "$2",
|
|
2155
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2170
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2156
2171
|
color: "$hiContrast",
|
|
2157
2172
|
fontFamily: "$untitled",
|
|
2158
2173
|
fontSize: "$1",
|
|
@@ -2209,37 +2224,37 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2209
2224
|
},
|
|
2210
2225
|
_a$6["& ".concat(Button)] = {
|
|
2211
2226
|
borderRadius: 0,
|
|
2212
|
-
boxShadow: "inset 0 1px $colors$
|
|
2227
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2213
2228
|
"&:hover": {
|
|
2214
|
-
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",
|
|
2215
2230
|
},
|
|
2216
2231
|
"&:focus": {
|
|
2217
2232
|
zIndex: 1,
|
|
2218
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2233
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2219
2234
|
},
|
|
2220
2235
|
"&:first-child": {
|
|
2221
2236
|
borderTopLeftRadius: "$1",
|
|
2222
2237
|
borderBottomLeftRadius: "$1",
|
|
2223
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2238
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2224
2239
|
"&:hover": {
|
|
2225
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2240
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
2226
2241
|
},
|
|
2227
2242
|
"&:focus": {
|
|
2228
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2243
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2229
2244
|
},
|
|
2230
2245
|
},
|
|
2231
2246
|
"&:last-child": {
|
|
2232
2247
|
borderTopRightRadius: "$1",
|
|
2233
2248
|
borderBottomRightRadius: "$1",
|
|
2234
|
-
boxShadow: "inset 0 1px $colors$
|
|
2249
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2235
2250
|
"&:focus": {
|
|
2236
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2251
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
2237
2252
|
},
|
|
2238
2253
|
},
|
|
2239
2254
|
},
|
|
2240
2255
|
_a$6["& ".concat(TextField)] = {
|
|
2241
2256
|
borderRadius: 0,
|
|
2242
|
-
boxShadow: "inset 0 1px $colors$
|
|
2257
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2243
2258
|
"&:focus": {
|
|
2244
2259
|
zIndex: 1,
|
|
2245
2260
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
@@ -2247,7 +2262,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2247
2262
|
"&:first-child": {
|
|
2248
2263
|
borderTopLeftRadius: "$1",
|
|
2249
2264
|
borderBottomLeftRadius: "$1",
|
|
2250
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2265
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2251
2266
|
"&:focus": {
|
|
2252
2267
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2253
2268
|
},
|
|
@@ -2255,7 +2270,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2255
2270
|
"&:last-child": {
|
|
2256
2271
|
borderTopRightRadius: "$1",
|
|
2257
2272
|
borderBottomRightRadius: "$1",
|
|
2258
|
-
boxShadow: "inset 0 1px $colors$
|
|
2273
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2259
2274
|
"&:focus": {
|
|
2260
2275
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2261
2276
|
},
|
|
@@ -2263,14 +2278,14 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2263
2278
|
},
|
|
2264
2279
|
_a$6["& ".concat(Select)] = {
|
|
2265
2280
|
borderRadius: 0,
|
|
2266
|
-
boxShadow: "inset 0 1px $colors$
|
|
2281
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2267
2282
|
"&:focus-within": {
|
|
2268
2283
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2269
2284
|
},
|
|
2270
2285
|
"&:first-child": {
|
|
2271
2286
|
borderTopLeftRadius: "$1",
|
|
2272
2287
|
borderBottomLeftRadius: "$1",
|
|
2273
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2288
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
2274
2289
|
"&:focus-within": {
|
|
2275
2290
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2276
2291
|
},
|
|
@@ -2278,7 +2293,7 @@ var ControlGroup = styled("div", (_a$6 = {
|
|
|
2278
2293
|
"&:last-child": {
|
|
2279
2294
|
borderTopRightRadius: "$1",
|
|
2280
2295
|
borderBottomRightRadius: "$1",
|
|
2281
|
-
boxShadow: "inset 0 1px $colors$
|
|
2296
|
+
boxShadow: "inset 0 1px $colors$neutral7, inset -1px 0 $colors$neutral7, inset 0 -1px $colors$neutral7",
|
|
2282
2297
|
"&:focus-within": {
|
|
2283
2298
|
boxShadow: "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
|
|
2284
2299
|
},
|
|
@@ -2315,23 +2330,23 @@ var IconButton = styled("button", {
|
|
|
2315
2330
|
boxSizing: "border-box",
|
|
2316
2331
|
},
|
|
2317
2332
|
backgroundColor: "$loContrast",
|
|
2318
|
-
border: "1px solid $
|
|
2333
|
+
border: "1px solid $neutral7",
|
|
2319
2334
|
"@hover": {
|
|
2320
2335
|
"&:hover": {
|
|
2321
|
-
borderColor: "$
|
|
2336
|
+
borderColor: "$neutral8",
|
|
2322
2337
|
},
|
|
2323
2338
|
},
|
|
2324
2339
|
"&:active": {
|
|
2325
|
-
backgroundColor: "$
|
|
2340
|
+
backgroundColor: "$neutral2",
|
|
2326
2341
|
},
|
|
2327
2342
|
"&:focus": {
|
|
2328
|
-
borderColor: "$
|
|
2329
|
-
boxShadow: "0 0 0 1px $colors$
|
|
2343
|
+
borderColor: "$neutral8",
|
|
2344
|
+
boxShadow: "0 0 0 1px $colors$neutral8",
|
|
2330
2345
|
},
|
|
2331
2346
|
"&:disabled": {
|
|
2332
2347
|
pointerEvents: "none",
|
|
2333
2348
|
backgroundColor: "transparent",
|
|
2334
|
-
color: "$
|
|
2349
|
+
color: "$neutral6",
|
|
2335
2350
|
},
|
|
2336
2351
|
variants: {
|
|
2337
2352
|
size: {
|
|
@@ -2362,17 +2377,17 @@ var IconButton = styled("button", {
|
|
|
2362
2377
|
borderWidth: "0",
|
|
2363
2378
|
"@hover": {
|
|
2364
2379
|
"&:hover": {
|
|
2365
|
-
backgroundColor: "$
|
|
2380
|
+
backgroundColor: "$neutralA3",
|
|
2366
2381
|
},
|
|
2367
2382
|
},
|
|
2368
2383
|
"&:focus": {
|
|
2369
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
2384
|
+
boxShadow: "inset 0 0 0 1px $colors$neutralA8, 0 0 0 1px $colors$neutralA8",
|
|
2370
2385
|
},
|
|
2371
2386
|
"&:active": {
|
|
2372
|
-
backgroundColor: "$
|
|
2387
|
+
backgroundColor: "$neutralA4",
|
|
2373
2388
|
},
|
|
2374
2389
|
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
|
|
2375
|
-
backgroundColor: "$
|
|
2390
|
+
backgroundColor: "$neutralA4",
|
|
2376
2391
|
},
|
|
2377
2392
|
},
|
|
2378
2393
|
raised: {
|
|
@@ -2383,17 +2398,17 @@ var IconButton = styled("button", {
|
|
|
2383
2398
|
},
|
|
2384
2399
|
},
|
|
2385
2400
|
"&:focus": {
|
|
2386
|
-
borderColor: "$
|
|
2387
|
-
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%)",
|
|
2388
2403
|
},
|
|
2389
2404
|
"&:active": {
|
|
2390
|
-
backgroundColor: "$
|
|
2405
|
+
backgroundColor: "$neutral4",
|
|
2391
2406
|
},
|
|
2392
2407
|
},
|
|
2393
2408
|
},
|
|
2394
2409
|
state: {
|
|
2395
2410
|
active: {
|
|
2396
|
-
backgroundColor: "$
|
|
2411
|
+
backgroundColor: "$neutral4",
|
|
2397
2412
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2398
2413
|
"@hover": {
|
|
2399
2414
|
"&:hover": {
|
|
@@ -2401,11 +2416,11 @@ var IconButton = styled("button", {
|
|
|
2401
2416
|
},
|
|
2402
2417
|
},
|
|
2403
2418
|
"&:active": {
|
|
2404
|
-
backgroundColor: "$
|
|
2419
|
+
backgroundColor: "$neutral4",
|
|
2405
2420
|
},
|
|
2406
2421
|
},
|
|
2407
2422
|
waiting: {
|
|
2408
|
-
backgroundColor: "$
|
|
2423
|
+
backgroundColor: "$neutral4",
|
|
2409
2424
|
boxShadow: "inset 0 0 0 1px hsl(206,10%,76%)",
|
|
2410
2425
|
"@hover": {
|
|
2411
2426
|
"&:hover": {
|
|
@@ -2413,7 +2428,7 @@ var IconButton = styled("button", {
|
|
|
2413
2428
|
},
|
|
2414
2429
|
},
|
|
2415
2430
|
"&:active": {
|
|
2416
|
-
backgroundColor: "$
|
|
2431
|
+
backgroundColor: "$neutral4",
|
|
2417
2432
|
},
|
|
2418
2433
|
},
|
|
2419
2434
|
},
|
|
@@ -2866,7 +2881,7 @@ var Text = styled("span", {
|
|
|
2866
2881
|
color: "$bronze11",
|
|
2867
2882
|
},
|
|
2868
2883
|
gray: {
|
|
2869
|
-
color: "$
|
|
2884
|
+
color: "$neutral11",
|
|
2870
2885
|
},
|
|
2871
2886
|
primary: {
|
|
2872
2887
|
color: "$primary11",
|
|
@@ -3051,7 +3066,7 @@ var Kbd = styled("kbd", {
|
|
|
3051
3066
|
userSelect: "none",
|
|
3052
3067
|
cursor: "default",
|
|
3053
3068
|
whiteSpace: "nowrap",
|
|
3054
|
-
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",
|
|
3055
3070
|
textShadow: "0 0 1px rgba(255, 255, 255, 0.5)",
|
|
3056
3071
|
fontFamily: "inherit",
|
|
3057
3072
|
fontWeight: 400,
|
|
@@ -3212,7 +3227,7 @@ var Paragraph = React.forwardRef(function (props, forwardedRef) {
|
|
|
3212
3227
|
var textCss = {
|
|
3213
3228
|
1: { lineHeight: "25px", "@bp2": { lineHeight: "27px" } },
|
|
3214
3229
|
2: {
|
|
3215
|
-
color: "$
|
|
3230
|
+
color: "$neutral11",
|
|
3216
3231
|
lineHeight: "27px",
|
|
3217
3232
|
"@bp2": { lineHeight: "30px" },
|
|
3218
3233
|
},
|
|
@@ -3263,13 +3278,13 @@ var StyledProgressBar = styled(ProgressPrimitive.Root, {
|
|
|
3263
3278
|
overflow: "hidden",
|
|
3264
3279
|
borderRadius: "$pill",
|
|
3265
3280
|
'&[data-state="indeterminate"]': {
|
|
3266
|
-
backgroundColor: "$
|
|
3281
|
+
backgroundColor: "$neutral4",
|
|
3267
3282
|
"&::after": {
|
|
3268
3283
|
animationName: indeterminateProgress,
|
|
3269
3284
|
animationDuration: "1500ms",
|
|
3270
3285
|
animationIterationCount: "infinite",
|
|
3271
3286
|
animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3272
|
-
backgroundColor: "$
|
|
3287
|
+
backgroundColor: "$neutral7",
|
|
3273
3288
|
boxSizing: "border-box",
|
|
3274
3289
|
borderRadius: "$pill",
|
|
3275
3290
|
content: '""',
|
|
@@ -3283,7 +3298,7 @@ var StyledProgressBar = styled(ProgressPrimitive.Root, {
|
|
|
3283
3298
|
variants: {
|
|
3284
3299
|
variant: {
|
|
3285
3300
|
gray: {
|
|
3286
|
-
background: "$
|
|
3301
|
+
background: "$neutral8",
|
|
3287
3302
|
},
|
|
3288
3303
|
blue: {
|
|
3289
3304
|
backgroundColor: "$blue9",
|
|
@@ -3305,7 +3320,7 @@ var ProgressBarIndicator = styled(ProgressPrimitive.Indicator, {
|
|
|
3305
3320
|
bottom: 0,
|
|
3306
3321
|
left: 0,
|
|
3307
3322
|
width: "100%",
|
|
3308
|
-
backgroundColor: "$
|
|
3323
|
+
backgroundColor: "$neutral4",
|
|
3309
3324
|
transition: "transform 150ms cubic-bezier(0.65, 0, 0.35, 1)",
|
|
3310
3325
|
});
|
|
3311
3326
|
var ProgressBar = React.forwardRef(function (_a, forwardedRef) {
|
|
@@ -3469,11 +3484,11 @@ var StyledRadio$1 = styled(RadioGroupPrimitive.Item, {
|
|
|
3469
3484
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
3470
3485
|
borderRadius: "50%",
|
|
3471
3486
|
color: "$hiContrast",
|
|
3472
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3487
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
3473
3488
|
overflow: "hidden",
|
|
3474
3489
|
"@hover": {
|
|
3475
3490
|
"&:hover": {
|
|
3476
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
3491
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8",
|
|
3477
3492
|
},
|
|
3478
3493
|
},
|
|
3479
3494
|
"&:focus": {
|
|
@@ -3598,7 +3613,7 @@ var Separator = styled(SeparatorPrimitive.Root, {
|
|
|
3598
3613
|
border: "none",
|
|
3599
3614
|
margin: 0,
|
|
3600
3615
|
flexShrink: 0,
|
|
3601
|
-
backgroundColor: "$
|
|
3616
|
+
backgroundColor: "$neutral6",
|
|
3602
3617
|
cursor: "default",
|
|
3603
3618
|
variants: {
|
|
3604
3619
|
size: {
|
|
@@ -3757,25 +3772,25 @@ var SimpleToggle = styled(TogglePrimitive.Root, {
|
|
|
3757
3772
|
backgroundColor: "transparent",
|
|
3758
3773
|
"@hover": {
|
|
3759
3774
|
"&:hover": {
|
|
3760
|
-
backgroundColor: "$
|
|
3775
|
+
backgroundColor: "$neutralA3",
|
|
3761
3776
|
},
|
|
3762
3777
|
},
|
|
3763
3778
|
"&:active": {
|
|
3764
|
-
backgroundColor: "$
|
|
3779
|
+
backgroundColor: "$neutralA4",
|
|
3765
3780
|
},
|
|
3766
3781
|
"&:focus": {
|
|
3767
|
-
boxShadow: "inset 0 0 0 1px $
|
|
3782
|
+
boxShadow: "inset 0 0 0 1px $neutralA8, 0 0 0 1px $neutralA8",
|
|
3768
3783
|
zIndex: 1,
|
|
3769
3784
|
},
|
|
3770
3785
|
'&[data-state="on"]': {
|
|
3771
|
-
backgroundColor: "$
|
|
3786
|
+
backgroundColor: "$neutralA5",
|
|
3772
3787
|
"@hover": {
|
|
3773
3788
|
"&:hover": {
|
|
3774
|
-
backgroundColor: "$
|
|
3789
|
+
backgroundColor: "$neutralA5",
|
|
3775
3790
|
},
|
|
3776
3791
|
},
|
|
3777
3792
|
"&:active": {
|
|
3778
|
-
backgroundColor: "$
|
|
3793
|
+
backgroundColor: "$neutralA7",
|
|
3779
3794
|
},
|
|
3780
3795
|
},
|
|
3781
3796
|
variants: {
|
|
@@ -3795,7 +3810,7 @@ var pulse = keyframes({
|
|
|
3795
3810
|
"100%": { opacity: "100%" },
|
|
3796
3811
|
});
|
|
3797
3812
|
var Skeleton = styled("div", {
|
|
3798
|
-
backgroundColor: "$
|
|
3813
|
+
backgroundColor: "$neutral4",
|
|
3799
3814
|
position: "relative",
|
|
3800
3815
|
overflow: "hidden",
|
|
3801
3816
|
"&::after": {
|
|
@@ -3804,7 +3819,7 @@ var Skeleton = styled("div", {
|
|
|
3804
3819
|
animationDirection: "alternate",
|
|
3805
3820
|
animationIterationCount: "infinite",
|
|
3806
3821
|
animationTimingFunction: "ease-in-out",
|
|
3807
|
-
backgroundColor: "$
|
|
3822
|
+
backgroundColor: "$neutral6",
|
|
3808
3823
|
borderRadius: "inherit",
|
|
3809
3824
|
bottom: 0,
|
|
3810
3825
|
content: '""',
|
|
@@ -3870,7 +3885,7 @@ var _a$2;
|
|
|
3870
3885
|
var SliderTrack = styled(SliderPrimitive.Track, {
|
|
3871
3886
|
position: "relative",
|
|
3872
3887
|
flexGrow: 1,
|
|
3873
|
-
backgroundColor: "$
|
|
3888
|
+
backgroundColor: "$neutral7",
|
|
3874
3889
|
borderRadius: "$pill",
|
|
3875
3890
|
'&[data-orientation="horizontal"]': {
|
|
3876
3891
|
height: 2,
|
|
@@ -3936,7 +3951,7 @@ var StyledSlider = styled(SliderPrimitive.Root, {
|
|
|
3936
3951
|
"@hover": {
|
|
3937
3952
|
"&:hover": (_a$2 = {},
|
|
3938
3953
|
_a$2["& ".concat(SliderTrack)] = {
|
|
3939
|
-
backgroundColor: "$
|
|
3954
|
+
backgroundColor: "$neutral8",
|
|
3940
3955
|
},
|
|
3941
3956
|
_a$2["& ".concat(SliderThumb)] = {
|
|
3942
3957
|
opacity: "1",
|
|
@@ -4265,11 +4280,11 @@ var StyledSwitch = styled(SwitchPrimitive.Root, {
|
|
|
4265
4280
|
margin: "0",
|
|
4266
4281
|
outline: "none",
|
|
4267
4282
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4268
|
-
backgroundColor: "$
|
|
4283
|
+
backgroundColor: "$neutral5",
|
|
4269
4284
|
borderRadius: "$pill",
|
|
4270
4285
|
position: "relative",
|
|
4271
4286
|
"&:focus": {
|
|
4272
|
-
boxShadow: "0 0 0 2px $colors$
|
|
4287
|
+
boxShadow: "0 0 0 2px $colors$neutral8",
|
|
4273
4288
|
},
|
|
4274
4289
|
'&[data-state="checked"]': {
|
|
4275
4290
|
backgroundColor: "$blue9",
|
|
@@ -4431,7 +4446,7 @@ var TabLink = styled("a", {
|
|
|
4431
4446
|
outline: "none",
|
|
4432
4447
|
alignItems: "center",
|
|
4433
4448
|
justifyContent: "center",
|
|
4434
|
-
color: "$
|
|
4449
|
+
color: "$neutral11",
|
|
4435
4450
|
textDecoration: "none",
|
|
4436
4451
|
"@hover": {
|
|
4437
4452
|
"&:hover": {
|
|
@@ -4439,7 +4454,7 @@ var TabLink = styled("a", {
|
|
|
4439
4454
|
},
|
|
4440
4455
|
},
|
|
4441
4456
|
"&:focus": {
|
|
4442
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4457
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral8, 0 0 0 1px $colors$neutral8",
|
|
4443
4458
|
},
|
|
4444
4459
|
variants: {
|
|
4445
4460
|
active: {
|
|
@@ -4477,7 +4492,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4477
4492
|
outline: "none",
|
|
4478
4493
|
alignItems: "center",
|
|
4479
4494
|
justifyContent: "center",
|
|
4480
|
-
color: "$
|
|
4495
|
+
color: "$neutral11",
|
|
4481
4496
|
border: "1px solid transparent",
|
|
4482
4497
|
borderTopLeftRadius: "$2",
|
|
4483
4498
|
borderTopRightRadius: "$2",
|
|
@@ -4489,7 +4504,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4489
4504
|
},
|
|
4490
4505
|
'&[data-state="active"]': {
|
|
4491
4506
|
color: "$hiContrast",
|
|
4492
|
-
borderColor: "$
|
|
4507
|
+
borderColor: "$neutral6",
|
|
4493
4508
|
borderBottomColor: "transparent",
|
|
4494
4509
|
},
|
|
4495
4510
|
'&[data-orientation="vertical"]': {
|
|
@@ -4498,7 +4513,7 @@ var TabsTriggerBase = styled(TabsPrimitive.Trigger, {
|
|
|
4498
4513
|
borderBottomLeftRadius: "$2",
|
|
4499
4514
|
borderBottomColor: "transparent",
|
|
4500
4515
|
'&[data-state="active"]': {
|
|
4501
|
-
borderBottomColor: "$
|
|
4516
|
+
borderBottomColor: "$neutral6",
|
|
4502
4517
|
borderRightColor: "transparent",
|
|
4503
4518
|
},
|
|
4504
4519
|
},
|
|
@@ -4508,11 +4523,11 @@ var StyledTabsListBase = styled(TabsPrimitive.List, {
|
|
|
4508
4523
|
display: "flex",
|
|
4509
4524
|
"&:focus": {
|
|
4510
4525
|
outline: "none",
|
|
4511
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4526
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4512
4527
|
},
|
|
4513
4528
|
'&[data-orientation="vertical"]': {
|
|
4514
4529
|
flexDirection: "column",
|
|
4515
|
-
boxShadow: "inset -1px 0 0 $
|
|
4530
|
+
boxShadow: "inset -1px 0 0 $neutral6",
|
|
4516
4531
|
},
|
|
4517
4532
|
});
|
|
4518
4533
|
var TabsListBase = React.forwardRef(function (props, forwardedRef) { return (React.createElement(React.Fragment, null,
|
|
@@ -4523,7 +4538,7 @@ var TabsContentBase = styled(TabsPrimitive.Content, {
|
|
|
4523
4538
|
flexGrow: 1,
|
|
4524
4539
|
"&:focus": {
|
|
4525
4540
|
outline: "none",
|
|
4526
|
-
boxShadow: "inset 0 0 0 1px $
|
|
4541
|
+
boxShadow: "inset 0 0 0 1px $neutral8, 0 0 0 1px $neutral8",
|
|
4527
4542
|
},
|
|
4528
4543
|
});
|
|
4529
4544
|
var TabsTrigger = styled(TabsTriggerBase, {
|
|
@@ -4572,7 +4587,7 @@ var TextArea = styled("textarea", {
|
|
|
4572
4587
|
width: "100%",
|
|
4573
4588
|
WebkitTapHighlightColor: "rgba(0,0,0,0)",
|
|
4574
4589
|
backgroundColor: "$loContrast",
|
|
4575
|
-
boxShadow: "inset 0 0 0 1px $colors$
|
|
4590
|
+
boxShadow: "inset 0 0 0 1px $colors$neutral7",
|
|
4576
4591
|
color: "$hiContrast",
|
|
4577
4592
|
fontVariantNumeric: "tabular-nums",
|
|
4578
4593
|
position: "relative",
|
|
@@ -4583,22 +4598,22 @@ var TextArea = styled("textarea", {
|
|
|
4583
4598
|
zIndex: "1",
|
|
4584
4599
|
},
|
|
4585
4600
|
"&::placeholder": {
|
|
4586
|
-
color: "$
|
|
4601
|
+
color: "$neutral9",
|
|
4587
4602
|
},
|
|
4588
4603
|
"&:disabled": {
|
|
4589
4604
|
pointerEvents: "none",
|
|
4590
|
-
backgroundColor: "$
|
|
4591
|
-
color: "$
|
|
4605
|
+
backgroundColor: "$neutral2",
|
|
4606
|
+
color: "$neutral8",
|
|
4592
4607
|
cursor: "not-allowed",
|
|
4593
4608
|
resize: "none",
|
|
4594
4609
|
"&::placeholder": {
|
|
4595
|
-
color: "$
|
|
4610
|
+
color: "$neutral7",
|
|
4596
4611
|
},
|
|
4597
4612
|
},
|
|
4598
4613
|
"&:read-only": {
|
|
4599
|
-
backgroundColor: "$
|
|
4614
|
+
backgroundColor: "$neutral2",
|
|
4600
4615
|
"&:focus": {
|
|
4601
|
-
boxShadow: "inset 0px 0px 0px 1px $colors$
|
|
4616
|
+
boxShadow: "inset 0px 0px 0px 1px $colors$neutral7",
|
|
4602
4617
|
},
|
|
4603
4618
|
},
|
|
4604
4619
|
variants: {
|
|
@@ -4712,12 +4727,12 @@ var TreeItem = styled("div", {
|
|
|
4712
4727
|
variants: {
|
|
4713
4728
|
variant: {
|
|
4714
4729
|
gray: {
|
|
4715
|
-
backgroundColor: "$
|
|
4730
|
+
backgroundColor: "$neutral3",
|
|
4716
4731
|
"&:hover": {
|
|
4717
|
-
backgroundColor: "$
|
|
4732
|
+
backgroundColor: "$neutral4",
|
|
4718
4733
|
},
|
|
4719
4734
|
"&:active": {
|
|
4720
|
-
backgroundColor: "$
|
|
4735
|
+
backgroundColor: "$neutral5",
|
|
4721
4736
|
},
|
|
4722
4737
|
},
|
|
4723
4738
|
red: {
|