@livepeer/design-system 1.0.13 → 1.0.14
Sign up to get free protection for your applications and to get access to all the features.
- 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: {
|