@tidbcloud/uikit 2.0.0-beta.10 → 2.0.0-beta.12
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/CHANGELOG.md +12 -0
- package/dist/theme/theme.cjs +68 -59
- package/dist/theme/theme.js +68 -59
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/theme/theme.cjs
CHANGED
|
@@ -144,7 +144,7 @@ const getInputStyles = (theme2, params) => {
|
|
|
144
144
|
label: matches.label,
|
|
145
145
|
input: {
|
|
146
146
|
...matches.input,
|
|
147
|
-
color: theme2.colors.
|
|
147
|
+
color: theme2.colors.carbon[8],
|
|
148
148
|
"&:disabled": {
|
|
149
149
|
opacity: 1
|
|
150
150
|
}
|
|
@@ -221,7 +221,7 @@ const theme = {
|
|
|
221
221
|
},
|
|
222
222
|
Loader: {
|
|
223
223
|
defaultProps: {
|
|
224
|
-
color: "
|
|
224
|
+
color: "carbon.5"
|
|
225
225
|
}
|
|
226
226
|
},
|
|
227
227
|
Skeleton: {
|
|
@@ -237,7 +237,7 @@ const theme = {
|
|
|
237
237
|
return {
|
|
238
238
|
visible: {
|
|
239
239
|
"&::after": {
|
|
240
|
-
backgroundImage: `linear-gradient(90deg,${theme2.colors.
|
|
240
|
+
backgroundImage: `linear-gradient(90deg,${theme2.colors.carbon[2]},${theme2.colors.carbon[4]},${theme2.colors.carbon[4]},${theme2.colors.carbon[2]})`,
|
|
241
241
|
backgroundSize: "400% 100%",
|
|
242
242
|
animation: params.animate ? `${animation} 5000ms ease-in-out infinite` : "none"
|
|
243
243
|
}
|
|
@@ -253,7 +253,7 @@ const theme = {
|
|
|
253
253
|
border: 0
|
|
254
254
|
},
|
|
255
255
|
tab: {
|
|
256
|
-
color: theme2.colors.
|
|
256
|
+
color: theme2.colors.carbon[7],
|
|
257
257
|
fontWeight: 600,
|
|
258
258
|
paddingLeft: 0,
|
|
259
259
|
paddingRight: 0,
|
|
@@ -294,24 +294,24 @@ const theme = {
|
|
|
294
294
|
},
|
|
295
295
|
item: {
|
|
296
296
|
transition: "background 150ms ease-in-out",
|
|
297
|
-
color: theme2.colors.
|
|
297
|
+
color: theme2.colors.carbon[8],
|
|
298
298
|
"&[data-hovered], &:hover": {
|
|
299
|
-
color: theme2.colors.
|
|
300
|
-
backgroundColor: theme2.colors.
|
|
299
|
+
color: theme2.colors.carbon[8],
|
|
300
|
+
backgroundColor: theme2.colors.carbon[3],
|
|
301
301
|
textDecoration: "none"
|
|
302
302
|
},
|
|
303
303
|
"&[data-active]": {
|
|
304
304
|
color: theme2.colors.sky[7],
|
|
305
305
|
"&:hover": {
|
|
306
|
-
backgroundColor: theme2.colors.
|
|
306
|
+
backgroundColor: theme2.colors.carbon[3]
|
|
307
307
|
}
|
|
308
308
|
},
|
|
309
309
|
"&[data-disabled]": {
|
|
310
|
-
color: theme2.colors.
|
|
310
|
+
color: theme2.colors.carbon[6],
|
|
311
311
|
userSelect: "none",
|
|
312
312
|
cursor: "not-allowed",
|
|
313
313
|
"&[data-hovered], &:hover": {
|
|
314
|
-
color: theme2.colors.
|
|
314
|
+
color: theme2.colors.carbon[6],
|
|
315
315
|
backgroundColor: "transparent"
|
|
316
316
|
}
|
|
317
317
|
}
|
|
@@ -327,23 +327,23 @@ const theme = {
|
|
|
327
327
|
styles: (theme2, params) => {
|
|
328
328
|
const rootStyles = {
|
|
329
329
|
light: {
|
|
330
|
-
color: theme2.colors.
|
|
330
|
+
color: theme2.colors.carbon[8],
|
|
331
331
|
"&:hover": {
|
|
332
|
-
color: theme2.colors.
|
|
333
|
-
backgroundColor: theme2.colors.
|
|
332
|
+
color: theme2.colors.carbon[8],
|
|
333
|
+
backgroundColor: theme2.colors.carbon[3]
|
|
334
334
|
},
|
|
335
335
|
"&:active": {
|
|
336
|
-
color: theme2.colors.
|
|
337
|
-
backgroundColor: theme2.colors.
|
|
336
|
+
color: theme2.colors.carbon[8],
|
|
337
|
+
backgroundColor: theme2.colors.carbon[4]
|
|
338
338
|
},
|
|
339
339
|
"&[data-active]": {
|
|
340
|
-
color: theme2.colors.
|
|
341
|
-
backgroundColor: theme2.colors.
|
|
340
|
+
color: theme2.colors.peacock[7],
|
|
341
|
+
backgroundColor: theme2.colors.peacock[2],
|
|
342
342
|
"&:hover": {
|
|
343
|
-
backgroundColor: theme2.colors.
|
|
343
|
+
backgroundColor: theme2.colors.peacock[2]
|
|
344
344
|
},
|
|
345
345
|
"&:active": {
|
|
346
|
-
backgroundColor: theme2.colors.
|
|
346
|
+
backgroundColor: theme2.colors.peacock[2]
|
|
347
347
|
}
|
|
348
348
|
}
|
|
349
349
|
}
|
|
@@ -375,9 +375,9 @@ const theme = {
|
|
|
375
375
|
});
|
|
376
376
|
return {
|
|
377
377
|
stepIcon: {
|
|
378
|
-
backgroundColor: theme2.colors.
|
|
379
|
-
borderColor: theme2.colors.
|
|
380
|
-
color: theme2.colors.
|
|
378
|
+
backgroundColor: theme2.colors.carbon[1],
|
|
379
|
+
borderColor: theme2.colors.carbon[4],
|
|
380
|
+
color: theme2.colors.carbon[8],
|
|
381
381
|
"&[data-progress]": {
|
|
382
382
|
backgroundColor: filledColors.background,
|
|
383
383
|
color: filledColors.color
|
|
@@ -395,10 +395,10 @@ const theme = {
|
|
|
395
395
|
}
|
|
396
396
|
},
|
|
397
397
|
separator: {
|
|
398
|
-
borderColor: theme2.colors.
|
|
398
|
+
borderColor: theme2.colors.carbon[4]
|
|
399
399
|
},
|
|
400
400
|
verticalSeparator: {
|
|
401
|
-
borderColor: theme2.colors.
|
|
401
|
+
borderColor: theme2.colors.carbon[4]
|
|
402
402
|
}
|
|
403
403
|
};
|
|
404
404
|
}
|
|
@@ -451,23 +451,23 @@ const theme = {
|
|
|
451
451
|
label: matches.label,
|
|
452
452
|
input: {
|
|
453
453
|
...matches.input,
|
|
454
|
-
color: theme2.colors.
|
|
454
|
+
color: theme2.colors.carbon[8],
|
|
455
455
|
"&:disabled": {
|
|
456
456
|
opacity: 1
|
|
457
457
|
}
|
|
458
458
|
},
|
|
459
459
|
item: {
|
|
460
460
|
transition: "background 150ms ease-in-out",
|
|
461
|
-
color: theme2.colors.
|
|
461
|
+
color: theme2.colors.carbon[8],
|
|
462
462
|
"&[data-hovered]": {
|
|
463
|
-
color: theme2.colors.
|
|
464
|
-
backgroundColor: theme2.colors.
|
|
463
|
+
color: theme2.colors.carbon[8],
|
|
464
|
+
backgroundColor: theme2.colors.carbon[3]
|
|
465
465
|
},
|
|
466
466
|
"&[data-selected]": {
|
|
467
|
-
color: theme2.colors.
|
|
467
|
+
color: theme2.colors.peacock[7],
|
|
468
468
|
backgroundColor: "transparent",
|
|
469
469
|
"&:hover": {
|
|
470
|
-
backgroundColor: theme2.colors.
|
|
470
|
+
backgroundColor: theme2.colors.carbon[3]
|
|
471
471
|
}
|
|
472
472
|
}
|
|
473
473
|
}
|
|
@@ -537,7 +537,7 @@ const theme = {
|
|
|
537
537
|
styles(theme2) {
|
|
538
538
|
return {
|
|
539
539
|
root: {
|
|
540
|
-
borderColor: theme2.colors.
|
|
540
|
+
borderColor: theme2.colors.carbon[4]
|
|
541
541
|
}
|
|
542
542
|
};
|
|
543
543
|
}
|
|
@@ -549,14 +549,14 @@ const theme = {
|
|
|
549
549
|
},
|
|
550
550
|
styles: (theme2, params) => ({
|
|
551
551
|
root: {
|
|
552
|
-
backgroundColor: theme2.colorScheme === "dark" ? theme2.colors.
|
|
553
|
-
border: params.withBorder ? `1px solid ${theme2.colors.
|
|
552
|
+
backgroundColor: theme2.colorScheme === "dark" ? theme2.colors.carbon[1] : theme2.white,
|
|
553
|
+
border: params.withBorder ? `1px solid ${theme2.colors.carbon[3]}` : void 0
|
|
554
554
|
}
|
|
555
555
|
})
|
|
556
556
|
},
|
|
557
557
|
Drawer: {
|
|
558
558
|
defaultProps: (theme2) => ({
|
|
559
|
-
overlayColor: theme2.colors.
|
|
559
|
+
overlayColor: theme2.colors.carbon[2],
|
|
560
560
|
overlayOpacity: 0.9,
|
|
561
561
|
overlayBlur: 3
|
|
562
562
|
})
|
|
@@ -566,26 +566,26 @@ const theme = {
|
|
|
566
566
|
shadow: "xl",
|
|
567
567
|
padding: 0,
|
|
568
568
|
exitTransitionDuration: 200,
|
|
569
|
-
overlayColor: theme2.colors.
|
|
569
|
+
overlayColor: theme2.colors.carbon[2],
|
|
570
570
|
overlayOpacity: 0.9,
|
|
571
571
|
overlayBlur: 3
|
|
572
572
|
}),
|
|
573
573
|
styles: (theme2) => ({
|
|
574
574
|
modal: {
|
|
575
|
-
border: `1px solid ${theme2.colors.
|
|
575
|
+
border: `1px solid ${theme2.colors.carbon[4]}`
|
|
576
576
|
},
|
|
577
577
|
header: {
|
|
578
578
|
borderTopLeftRadius: theme2.defaultRadius,
|
|
579
579
|
borderTopRightRadius: theme2.defaultRadius,
|
|
580
580
|
padding: "16px 16px 16px 24px",
|
|
581
581
|
margin: 0,
|
|
582
|
-
backgroundColor: theme2.colors.
|
|
582
|
+
backgroundColor: theme2.colors.carbon[2]
|
|
583
583
|
},
|
|
584
584
|
title: {
|
|
585
585
|
fontWeight: 700,
|
|
586
586
|
fontSize: 16,
|
|
587
587
|
lineHeight: 1.5,
|
|
588
|
-
color: theme2.colors.
|
|
588
|
+
color: theme2.colors.carbon[9]
|
|
589
589
|
},
|
|
590
590
|
body: {
|
|
591
591
|
padding: 24
|
|
@@ -613,7 +613,7 @@ const theme = {
|
|
|
613
613
|
return {
|
|
614
614
|
root: {
|
|
615
615
|
thead: {
|
|
616
|
-
backgroundColor: theme2.colors.
|
|
616
|
+
backgroundColor: theme2.colors.carbon[2]
|
|
617
617
|
},
|
|
618
618
|
...borderStyles,
|
|
619
619
|
...colBorderStyles
|
|
@@ -631,22 +631,46 @@ const theme = {
|
|
|
631
631
|
borderColor: color
|
|
632
632
|
},
|
|
633
633
|
"& input:disabled+*>.mantine-Switch-thumb": {
|
|
634
|
-
backgroundColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.
|
|
635
|
-
borderColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.
|
|
634
|
+
backgroundColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.carbon[7],
|
|
635
|
+
borderColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.carbon[7]
|
|
636
636
|
}
|
|
637
637
|
}
|
|
638
638
|
};
|
|
639
639
|
}
|
|
640
640
|
},
|
|
641
641
|
Radio: {
|
|
642
|
-
defaultProps: {
|
|
643
|
-
size: "xs"
|
|
644
|
-
},
|
|
645
642
|
styles(theme2, params) {
|
|
646
643
|
const color = params.color ?? "carbon";
|
|
647
644
|
const shade = color === "carbon" ? 9 : 7;
|
|
645
|
+
const size = params.size ?? "sm";
|
|
646
|
+
const sizes = {
|
|
647
|
+
xs: 14,
|
|
648
|
+
sm: 16,
|
|
649
|
+
md: 20,
|
|
650
|
+
lg: 24,
|
|
651
|
+
xl: 30
|
|
652
|
+
};
|
|
653
|
+
const iconSizes = {
|
|
654
|
+
xs: 5,
|
|
655
|
+
sm: 6,
|
|
656
|
+
md: 8,
|
|
657
|
+
lg: 10,
|
|
658
|
+
xl: 12
|
|
659
|
+
};
|
|
648
660
|
return {
|
|
661
|
+
icon: {
|
|
662
|
+
width: theme2.fn.size({ sizes: iconSizes, size }),
|
|
663
|
+
height: theme2.fn.size({ sizes: iconSizes, size }),
|
|
664
|
+
top: `calc(50% - ${theme2.fn.size({ sizes: iconSizes, size }) / 2}px)`,
|
|
665
|
+
left: `calc(50% - ${theme2.fn.size({ sizes: iconSizes, size }) / 2}px)`
|
|
666
|
+
},
|
|
667
|
+
label: {
|
|
668
|
+
lineHeight: `${theme2.fn.size({ sizes, size })}px`
|
|
669
|
+
},
|
|
649
670
|
radio: {
|
|
671
|
+
width: theme2.fn.size({ sizes, size }),
|
|
672
|
+
height: theme2.fn.size({ sizes, size }),
|
|
673
|
+
borderRadius: theme2.fn.size({ sizes, size }),
|
|
650
674
|
borderColor: theme2.colors[color][6],
|
|
651
675
|
"&:checked:not(:disabled)": {
|
|
652
676
|
background: theme2.colors[color][shade],
|
|
@@ -666,21 +690,6 @@ const theme = {
|
|
|
666
690
|
}
|
|
667
691
|
};
|
|
668
692
|
}
|
|
669
|
-
},
|
|
670
|
-
RadioGroup: {
|
|
671
|
-
defaultProps: {
|
|
672
|
-
size: "xs",
|
|
673
|
-
labelProps: {
|
|
674
|
-
size: "sm"
|
|
675
|
-
},
|
|
676
|
-
descriptionProps: {
|
|
677
|
-
size: "sm"
|
|
678
|
-
},
|
|
679
|
-
errorProps: {
|
|
680
|
-
size: "sm",
|
|
681
|
-
mt: 4
|
|
682
|
-
}
|
|
683
|
-
}
|
|
684
693
|
}
|
|
685
694
|
}
|
|
686
695
|
};
|
package/dist/theme/theme.js
CHANGED
|
@@ -142,7 +142,7 @@ const getInputStyles = (theme2, params) => {
|
|
|
142
142
|
label: matches.label,
|
|
143
143
|
input: {
|
|
144
144
|
...matches.input,
|
|
145
|
-
color: theme2.colors.
|
|
145
|
+
color: theme2.colors.carbon[8],
|
|
146
146
|
"&:disabled": {
|
|
147
147
|
opacity: 1
|
|
148
148
|
}
|
|
@@ -219,7 +219,7 @@ const theme = {
|
|
|
219
219
|
},
|
|
220
220
|
Loader: {
|
|
221
221
|
defaultProps: {
|
|
222
|
-
color: "
|
|
222
|
+
color: "carbon.5"
|
|
223
223
|
}
|
|
224
224
|
},
|
|
225
225
|
Skeleton: {
|
|
@@ -235,7 +235,7 @@ const theme = {
|
|
|
235
235
|
return {
|
|
236
236
|
visible: {
|
|
237
237
|
"&::after": {
|
|
238
|
-
backgroundImage: `linear-gradient(90deg,${theme2.colors.
|
|
238
|
+
backgroundImage: `linear-gradient(90deg,${theme2.colors.carbon[2]},${theme2.colors.carbon[4]},${theme2.colors.carbon[4]},${theme2.colors.carbon[2]})`,
|
|
239
239
|
backgroundSize: "400% 100%",
|
|
240
240
|
animation: params.animate ? `${animation} 5000ms ease-in-out infinite` : "none"
|
|
241
241
|
}
|
|
@@ -251,7 +251,7 @@ const theme = {
|
|
|
251
251
|
border: 0
|
|
252
252
|
},
|
|
253
253
|
tab: {
|
|
254
|
-
color: theme2.colors.
|
|
254
|
+
color: theme2.colors.carbon[7],
|
|
255
255
|
fontWeight: 600,
|
|
256
256
|
paddingLeft: 0,
|
|
257
257
|
paddingRight: 0,
|
|
@@ -292,24 +292,24 @@ const theme = {
|
|
|
292
292
|
},
|
|
293
293
|
item: {
|
|
294
294
|
transition: "background 150ms ease-in-out",
|
|
295
|
-
color: theme2.colors.
|
|
295
|
+
color: theme2.colors.carbon[8],
|
|
296
296
|
"&[data-hovered], &:hover": {
|
|
297
|
-
color: theme2.colors.
|
|
298
|
-
backgroundColor: theme2.colors.
|
|
297
|
+
color: theme2.colors.carbon[8],
|
|
298
|
+
backgroundColor: theme2.colors.carbon[3],
|
|
299
299
|
textDecoration: "none"
|
|
300
300
|
},
|
|
301
301
|
"&[data-active]": {
|
|
302
302
|
color: theme2.colors.sky[7],
|
|
303
303
|
"&:hover": {
|
|
304
|
-
backgroundColor: theme2.colors.
|
|
304
|
+
backgroundColor: theme2.colors.carbon[3]
|
|
305
305
|
}
|
|
306
306
|
},
|
|
307
307
|
"&[data-disabled]": {
|
|
308
|
-
color: theme2.colors.
|
|
308
|
+
color: theme2.colors.carbon[6],
|
|
309
309
|
userSelect: "none",
|
|
310
310
|
cursor: "not-allowed",
|
|
311
311
|
"&[data-hovered], &:hover": {
|
|
312
|
-
color: theme2.colors.
|
|
312
|
+
color: theme2.colors.carbon[6],
|
|
313
313
|
backgroundColor: "transparent"
|
|
314
314
|
}
|
|
315
315
|
}
|
|
@@ -325,23 +325,23 @@ const theme = {
|
|
|
325
325
|
styles: (theme2, params) => {
|
|
326
326
|
const rootStyles = {
|
|
327
327
|
light: {
|
|
328
|
-
color: theme2.colors.
|
|
328
|
+
color: theme2.colors.carbon[8],
|
|
329
329
|
"&:hover": {
|
|
330
|
-
color: theme2.colors.
|
|
331
|
-
backgroundColor: theme2.colors.
|
|
330
|
+
color: theme2.colors.carbon[8],
|
|
331
|
+
backgroundColor: theme2.colors.carbon[3]
|
|
332
332
|
},
|
|
333
333
|
"&:active": {
|
|
334
|
-
color: theme2.colors.
|
|
335
|
-
backgroundColor: theme2.colors.
|
|
334
|
+
color: theme2.colors.carbon[8],
|
|
335
|
+
backgroundColor: theme2.colors.carbon[4]
|
|
336
336
|
},
|
|
337
337
|
"&[data-active]": {
|
|
338
|
-
color: theme2.colors.
|
|
339
|
-
backgroundColor: theme2.colors.
|
|
338
|
+
color: theme2.colors.peacock[7],
|
|
339
|
+
backgroundColor: theme2.colors.peacock[2],
|
|
340
340
|
"&:hover": {
|
|
341
|
-
backgroundColor: theme2.colors.
|
|
341
|
+
backgroundColor: theme2.colors.peacock[2]
|
|
342
342
|
},
|
|
343
343
|
"&:active": {
|
|
344
|
-
backgroundColor: theme2.colors.
|
|
344
|
+
backgroundColor: theme2.colors.peacock[2]
|
|
345
345
|
}
|
|
346
346
|
}
|
|
347
347
|
}
|
|
@@ -373,9 +373,9 @@ const theme = {
|
|
|
373
373
|
});
|
|
374
374
|
return {
|
|
375
375
|
stepIcon: {
|
|
376
|
-
backgroundColor: theme2.colors.
|
|
377
|
-
borderColor: theme2.colors.
|
|
378
|
-
color: theme2.colors.
|
|
376
|
+
backgroundColor: theme2.colors.carbon[1],
|
|
377
|
+
borderColor: theme2.colors.carbon[4],
|
|
378
|
+
color: theme2.colors.carbon[8],
|
|
379
379
|
"&[data-progress]": {
|
|
380
380
|
backgroundColor: filledColors.background,
|
|
381
381
|
color: filledColors.color
|
|
@@ -393,10 +393,10 @@ const theme = {
|
|
|
393
393
|
}
|
|
394
394
|
},
|
|
395
395
|
separator: {
|
|
396
|
-
borderColor: theme2.colors.
|
|
396
|
+
borderColor: theme2.colors.carbon[4]
|
|
397
397
|
},
|
|
398
398
|
verticalSeparator: {
|
|
399
|
-
borderColor: theme2.colors.
|
|
399
|
+
borderColor: theme2.colors.carbon[4]
|
|
400
400
|
}
|
|
401
401
|
};
|
|
402
402
|
}
|
|
@@ -449,23 +449,23 @@ const theme = {
|
|
|
449
449
|
label: matches.label,
|
|
450
450
|
input: {
|
|
451
451
|
...matches.input,
|
|
452
|
-
color: theme2.colors.
|
|
452
|
+
color: theme2.colors.carbon[8],
|
|
453
453
|
"&:disabled": {
|
|
454
454
|
opacity: 1
|
|
455
455
|
}
|
|
456
456
|
},
|
|
457
457
|
item: {
|
|
458
458
|
transition: "background 150ms ease-in-out",
|
|
459
|
-
color: theme2.colors.
|
|
459
|
+
color: theme2.colors.carbon[8],
|
|
460
460
|
"&[data-hovered]": {
|
|
461
|
-
color: theme2.colors.
|
|
462
|
-
backgroundColor: theme2.colors.
|
|
461
|
+
color: theme2.colors.carbon[8],
|
|
462
|
+
backgroundColor: theme2.colors.carbon[3]
|
|
463
463
|
},
|
|
464
464
|
"&[data-selected]": {
|
|
465
|
-
color: theme2.colors.
|
|
465
|
+
color: theme2.colors.peacock[7],
|
|
466
466
|
backgroundColor: "transparent",
|
|
467
467
|
"&:hover": {
|
|
468
|
-
backgroundColor: theme2.colors.
|
|
468
|
+
backgroundColor: theme2.colors.carbon[3]
|
|
469
469
|
}
|
|
470
470
|
}
|
|
471
471
|
}
|
|
@@ -535,7 +535,7 @@ const theme = {
|
|
|
535
535
|
styles(theme2) {
|
|
536
536
|
return {
|
|
537
537
|
root: {
|
|
538
|
-
borderColor: theme2.colors.
|
|
538
|
+
borderColor: theme2.colors.carbon[4]
|
|
539
539
|
}
|
|
540
540
|
};
|
|
541
541
|
}
|
|
@@ -547,14 +547,14 @@ const theme = {
|
|
|
547
547
|
},
|
|
548
548
|
styles: (theme2, params) => ({
|
|
549
549
|
root: {
|
|
550
|
-
backgroundColor: theme2.colorScheme === "dark" ? theme2.colors.
|
|
551
|
-
border: params.withBorder ? `1px solid ${theme2.colors.
|
|
550
|
+
backgroundColor: theme2.colorScheme === "dark" ? theme2.colors.carbon[1] : theme2.white,
|
|
551
|
+
border: params.withBorder ? `1px solid ${theme2.colors.carbon[3]}` : void 0
|
|
552
552
|
}
|
|
553
553
|
})
|
|
554
554
|
},
|
|
555
555
|
Drawer: {
|
|
556
556
|
defaultProps: (theme2) => ({
|
|
557
|
-
overlayColor: theme2.colors.
|
|
557
|
+
overlayColor: theme2.colors.carbon[2],
|
|
558
558
|
overlayOpacity: 0.9,
|
|
559
559
|
overlayBlur: 3
|
|
560
560
|
})
|
|
@@ -564,26 +564,26 @@ const theme = {
|
|
|
564
564
|
shadow: "xl",
|
|
565
565
|
padding: 0,
|
|
566
566
|
exitTransitionDuration: 200,
|
|
567
|
-
overlayColor: theme2.colors.
|
|
567
|
+
overlayColor: theme2.colors.carbon[2],
|
|
568
568
|
overlayOpacity: 0.9,
|
|
569
569
|
overlayBlur: 3
|
|
570
570
|
}),
|
|
571
571
|
styles: (theme2) => ({
|
|
572
572
|
modal: {
|
|
573
|
-
border: `1px solid ${theme2.colors.
|
|
573
|
+
border: `1px solid ${theme2.colors.carbon[4]}`
|
|
574
574
|
},
|
|
575
575
|
header: {
|
|
576
576
|
borderTopLeftRadius: theme2.defaultRadius,
|
|
577
577
|
borderTopRightRadius: theme2.defaultRadius,
|
|
578
578
|
padding: "16px 16px 16px 24px",
|
|
579
579
|
margin: 0,
|
|
580
|
-
backgroundColor: theme2.colors.
|
|
580
|
+
backgroundColor: theme2.colors.carbon[2]
|
|
581
581
|
},
|
|
582
582
|
title: {
|
|
583
583
|
fontWeight: 700,
|
|
584
584
|
fontSize: 16,
|
|
585
585
|
lineHeight: 1.5,
|
|
586
|
-
color: theme2.colors.
|
|
586
|
+
color: theme2.colors.carbon[9]
|
|
587
587
|
},
|
|
588
588
|
body: {
|
|
589
589
|
padding: 24
|
|
@@ -611,7 +611,7 @@ const theme = {
|
|
|
611
611
|
return {
|
|
612
612
|
root: {
|
|
613
613
|
thead: {
|
|
614
|
-
backgroundColor: theme2.colors.
|
|
614
|
+
backgroundColor: theme2.colors.carbon[2]
|
|
615
615
|
},
|
|
616
616
|
...borderStyles,
|
|
617
617
|
...colBorderStyles
|
|
@@ -629,22 +629,46 @@ const theme = {
|
|
|
629
629
|
borderColor: color
|
|
630
630
|
},
|
|
631
631
|
"& input:disabled+*>.mantine-Switch-thumb": {
|
|
632
|
-
backgroundColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.
|
|
633
|
-
borderColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.
|
|
632
|
+
backgroundColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.carbon[7],
|
|
633
|
+
borderColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.carbon[7]
|
|
634
634
|
}
|
|
635
635
|
}
|
|
636
636
|
};
|
|
637
637
|
}
|
|
638
638
|
},
|
|
639
639
|
Radio: {
|
|
640
|
-
defaultProps: {
|
|
641
|
-
size: "xs"
|
|
642
|
-
},
|
|
643
640
|
styles(theme2, params) {
|
|
644
641
|
const color = params.color ?? "carbon";
|
|
645
642
|
const shade = color === "carbon" ? 9 : 7;
|
|
643
|
+
const size = params.size ?? "sm";
|
|
644
|
+
const sizes = {
|
|
645
|
+
xs: 14,
|
|
646
|
+
sm: 16,
|
|
647
|
+
md: 20,
|
|
648
|
+
lg: 24,
|
|
649
|
+
xl: 30
|
|
650
|
+
};
|
|
651
|
+
const iconSizes = {
|
|
652
|
+
xs: 5,
|
|
653
|
+
sm: 6,
|
|
654
|
+
md: 8,
|
|
655
|
+
lg: 10,
|
|
656
|
+
xl: 12
|
|
657
|
+
};
|
|
646
658
|
return {
|
|
659
|
+
icon: {
|
|
660
|
+
width: theme2.fn.size({ sizes: iconSizes, size }),
|
|
661
|
+
height: theme2.fn.size({ sizes: iconSizes, size }),
|
|
662
|
+
top: `calc(50% - ${theme2.fn.size({ sizes: iconSizes, size }) / 2}px)`,
|
|
663
|
+
left: `calc(50% - ${theme2.fn.size({ sizes: iconSizes, size }) / 2}px)`
|
|
664
|
+
},
|
|
665
|
+
label: {
|
|
666
|
+
lineHeight: `${theme2.fn.size({ sizes, size })}px`
|
|
667
|
+
},
|
|
647
668
|
radio: {
|
|
669
|
+
width: theme2.fn.size({ sizes, size }),
|
|
670
|
+
height: theme2.fn.size({ sizes, size }),
|
|
671
|
+
borderRadius: theme2.fn.size({ sizes, size }),
|
|
648
672
|
borderColor: theme2.colors[color][6],
|
|
649
673
|
"&:checked:not(:disabled)": {
|
|
650
674
|
background: theme2.colors[color][shade],
|
|
@@ -664,21 +688,6 @@ const theme = {
|
|
|
664
688
|
}
|
|
665
689
|
};
|
|
666
690
|
}
|
|
667
|
-
},
|
|
668
|
-
RadioGroup: {
|
|
669
|
-
defaultProps: {
|
|
670
|
-
size: "xs",
|
|
671
|
-
labelProps: {
|
|
672
|
-
size: "sm"
|
|
673
|
-
},
|
|
674
|
-
descriptionProps: {
|
|
675
|
-
size: "sm"
|
|
676
|
-
},
|
|
677
|
-
errorProps: {
|
|
678
|
-
size: "sm",
|
|
679
|
-
mt: 4
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
691
|
}
|
|
683
692
|
}
|
|
684
693
|
};
|