@tidbcloud/uikit 2.0.0-beta.16 → 2.0.0-beta.18
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/biz/Table/ProTable/ProTable.cjs +5 -1
- package/dist/biz/Table/ProTable/ProTable.js +5 -1
- package/dist/theme/theme.cjs +57 -31
- package/dist/theme/theme.js +57 -31
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -37,6 +37,7 @@ const ProTable = ({
|
|
|
37
37
|
sx: (theme2) => ({
|
|
38
38
|
backgroundColor: "inherit",
|
|
39
39
|
borderRadius: withBorder ? theme2.defaultRadius : 0,
|
|
40
|
+
borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
|
|
40
41
|
overflow: "hidden",
|
|
41
42
|
transition: "none",
|
|
42
43
|
"& ::-webkit-scrollbar": enableStickyHeader ? {
|
|
@@ -60,7 +61,7 @@ const ProTable = ({
|
|
|
60
61
|
boxShadow: "none",
|
|
61
62
|
th: {
|
|
62
63
|
color: theme.colors.carbon[7],
|
|
63
|
-
backgroundColor: theme.colors.carbon[
|
|
64
|
+
backgroundColor: theme.colors.carbon[2],
|
|
64
65
|
fontWeight: 500
|
|
65
66
|
}
|
|
66
67
|
}
|
|
@@ -70,6 +71,9 @@ const ProTable = ({
|
|
|
70
71
|
transition: "none",
|
|
71
72
|
backgroundColor: theme.colors.carbon[0],
|
|
72
73
|
color: theme.colors.carbon[8],
|
|
74
|
+
td: {
|
|
75
|
+
borderColor: theme.colors.carbon[2]
|
|
76
|
+
},
|
|
73
77
|
":last-of-type": {
|
|
74
78
|
td: {
|
|
75
79
|
borderBottom: "none"
|
|
@@ -35,6 +35,7 @@ const ProTable = ({
|
|
|
35
35
|
sx: (theme2) => ({
|
|
36
36
|
backgroundColor: "inherit",
|
|
37
37
|
borderRadius: withBorder ? theme2.defaultRadius : 0,
|
|
38
|
+
borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
|
|
38
39
|
overflow: "hidden",
|
|
39
40
|
transition: "none",
|
|
40
41
|
"& ::-webkit-scrollbar": enableStickyHeader ? {
|
|
@@ -58,7 +59,7 @@ const ProTable = ({
|
|
|
58
59
|
boxShadow: "none",
|
|
59
60
|
th: {
|
|
60
61
|
color: theme.colors.carbon[7],
|
|
61
|
-
backgroundColor: theme.colors.carbon[
|
|
62
|
+
backgroundColor: theme.colors.carbon[2],
|
|
62
63
|
fontWeight: 500
|
|
63
64
|
}
|
|
64
65
|
}
|
|
@@ -68,6 +69,9 @@ const ProTable = ({
|
|
|
68
69
|
transition: "none",
|
|
69
70
|
backgroundColor: theme.colors.carbon[0],
|
|
70
71
|
color: theme.colors.carbon[8],
|
|
72
|
+
td: {
|
|
73
|
+
borderColor: theme.colors.carbon[2]
|
|
74
|
+
},
|
|
71
75
|
":last-of-type": {
|
|
72
76
|
td: {
|
|
73
77
|
borderBottom: "none"
|
package/dist/theme/theme.cjs
CHANGED
|
@@ -298,22 +298,15 @@ const theme = {
|
|
|
298
298
|
item: {
|
|
299
299
|
transition: "background 150ms ease-in-out",
|
|
300
300
|
color: theme2.colors.carbon[8],
|
|
301
|
-
"
|
|
302
|
-
|
|
303
|
-
backgroundColor: theme2.colors.carbon[3],
|
|
301
|
+
"&:hover": {
|
|
302
|
+
backgroundColor: theme2.colors.carbon[2],
|
|
304
303
|
textDecoration: "none"
|
|
305
304
|
},
|
|
306
|
-
"
|
|
307
|
-
color: theme2.colors.
|
|
308
|
-
"&:hover": {
|
|
309
|
-
backgroundColor: theme2.colors.carbon[3]
|
|
310
|
-
}
|
|
311
|
-
},
|
|
312
|
-
"&[data-disabled]": {
|
|
313
|
-
color: theme2.colors.carbon[6],
|
|
305
|
+
"&:disabled": {
|
|
306
|
+
color: theme2.colors.carbon[5],
|
|
314
307
|
userSelect: "none",
|
|
315
308
|
cursor: "not-allowed",
|
|
316
|
-
"
|
|
309
|
+
"&:hover": {
|
|
317
310
|
color: theme2.colors.carbon[6],
|
|
318
311
|
backgroundColor: "transparent"
|
|
319
312
|
}
|
|
@@ -515,24 +508,46 @@ const theme = {
|
|
|
515
508
|
},
|
|
516
509
|
Badge: {
|
|
517
510
|
styles(theme2, params) {
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
511
|
+
const color = params.color ?? theme2.primaryColor;
|
|
512
|
+
const styles = {
|
|
513
|
+
dot: {
|
|
514
|
+
border: "none",
|
|
515
|
+
textTransform: "capitalize",
|
|
516
|
+
fontWeight: 500
|
|
517
|
+
},
|
|
518
|
+
outline: {
|
|
519
|
+
color: theme2.colors[color][8],
|
|
520
|
+
borderColor: theme2.colors[color][4]
|
|
521
|
+
}
|
|
522
|
+
};
|
|
523
|
+
return {
|
|
524
|
+
root: {
|
|
525
|
+
...styles[params.variant]
|
|
526
|
+
}
|
|
527
|
+
};
|
|
529
528
|
}
|
|
530
529
|
},
|
|
531
530
|
Checkbox: {
|
|
532
|
-
styles() {
|
|
531
|
+
styles(theme2, params) {
|
|
532
|
+
const color = params.color ?? theme2.primaryColor;
|
|
533
533
|
return {
|
|
534
534
|
input: {
|
|
535
|
-
borderRadius: 4
|
|
535
|
+
borderRadius: 4,
|
|
536
|
+
borderColor: theme2.colors[color][6],
|
|
537
|
+
"&:checked:not(:disabled)": {
|
|
538
|
+
backgroundColor: theme2.colors[color][9],
|
|
539
|
+
borderColor: theme2.colors[color][9]
|
|
540
|
+
},
|
|
541
|
+
"&:disabled:checked": {
|
|
542
|
+
backgroundColor: theme2.colors.carbon[6],
|
|
543
|
+
borderColor: theme2.colors.carbon[6]
|
|
544
|
+
}
|
|
545
|
+
},
|
|
546
|
+
label: {
|
|
547
|
+
color: theme2.colors[color][8],
|
|
548
|
+
"&[data-disabled]": {
|
|
549
|
+
color: theme2.colors.carbon[6]
|
|
550
|
+
}
|
|
536
551
|
}
|
|
537
552
|
};
|
|
538
553
|
}
|
|
@@ -551,12 +566,23 @@ const theme = {
|
|
|
551
566
|
shadow: "xs",
|
|
552
567
|
withBorder: true
|
|
553
568
|
},
|
|
554
|
-
styles: (theme2
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
569
|
+
styles: (theme2) => {
|
|
570
|
+
return {
|
|
571
|
+
root: {
|
|
572
|
+
backgroundColor: theme2.colors.carbon[0]
|
|
573
|
+
}
|
|
574
|
+
};
|
|
575
|
+
}
|
|
576
|
+
},
|
|
577
|
+
Paper: {
|
|
578
|
+
styles: (theme2, params) => {
|
|
579
|
+
return {
|
|
580
|
+
root: {
|
|
581
|
+
backgroundColor: theme2.colors.carbon[0],
|
|
582
|
+
borderColor: params.withBorder ? theme2.colors.carbon[3] : "transparent"
|
|
583
|
+
}
|
|
584
|
+
};
|
|
585
|
+
}
|
|
560
586
|
},
|
|
561
587
|
Drawer: {
|
|
562
588
|
defaultProps: (theme2) => ({
|
package/dist/theme/theme.js
CHANGED
|
@@ -296,22 +296,15 @@ const theme = {
|
|
|
296
296
|
item: {
|
|
297
297
|
transition: "background 150ms ease-in-out",
|
|
298
298
|
color: theme2.colors.carbon[8],
|
|
299
|
-
"
|
|
300
|
-
|
|
301
|
-
backgroundColor: theme2.colors.carbon[3],
|
|
299
|
+
"&:hover": {
|
|
300
|
+
backgroundColor: theme2.colors.carbon[2],
|
|
302
301
|
textDecoration: "none"
|
|
303
302
|
},
|
|
304
|
-
"
|
|
305
|
-
color: theme2.colors.
|
|
306
|
-
"&:hover": {
|
|
307
|
-
backgroundColor: theme2.colors.carbon[3]
|
|
308
|
-
}
|
|
309
|
-
},
|
|
310
|
-
"&[data-disabled]": {
|
|
311
|
-
color: theme2.colors.carbon[6],
|
|
303
|
+
"&:disabled": {
|
|
304
|
+
color: theme2.colors.carbon[5],
|
|
312
305
|
userSelect: "none",
|
|
313
306
|
cursor: "not-allowed",
|
|
314
|
-
"
|
|
307
|
+
"&:hover": {
|
|
315
308
|
color: theme2.colors.carbon[6],
|
|
316
309
|
backgroundColor: "transparent"
|
|
317
310
|
}
|
|
@@ -513,24 +506,46 @@ const theme = {
|
|
|
513
506
|
},
|
|
514
507
|
Badge: {
|
|
515
508
|
styles(theme2, params) {
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
509
|
+
const color = params.color ?? theme2.primaryColor;
|
|
510
|
+
const styles = {
|
|
511
|
+
dot: {
|
|
512
|
+
border: "none",
|
|
513
|
+
textTransform: "capitalize",
|
|
514
|
+
fontWeight: 500
|
|
515
|
+
},
|
|
516
|
+
outline: {
|
|
517
|
+
color: theme2.colors[color][8],
|
|
518
|
+
borderColor: theme2.colors[color][4]
|
|
519
|
+
}
|
|
520
|
+
};
|
|
521
|
+
return {
|
|
522
|
+
root: {
|
|
523
|
+
...styles[params.variant]
|
|
524
|
+
}
|
|
525
|
+
};
|
|
527
526
|
}
|
|
528
527
|
},
|
|
529
528
|
Checkbox: {
|
|
530
|
-
styles() {
|
|
529
|
+
styles(theme2, params) {
|
|
530
|
+
const color = params.color ?? theme2.primaryColor;
|
|
531
531
|
return {
|
|
532
532
|
input: {
|
|
533
|
-
borderRadius: 4
|
|
533
|
+
borderRadius: 4,
|
|
534
|
+
borderColor: theme2.colors[color][6],
|
|
535
|
+
"&:checked:not(:disabled)": {
|
|
536
|
+
backgroundColor: theme2.colors[color][9],
|
|
537
|
+
borderColor: theme2.colors[color][9]
|
|
538
|
+
},
|
|
539
|
+
"&:disabled:checked": {
|
|
540
|
+
backgroundColor: theme2.colors.carbon[6],
|
|
541
|
+
borderColor: theme2.colors.carbon[6]
|
|
542
|
+
}
|
|
543
|
+
},
|
|
544
|
+
label: {
|
|
545
|
+
color: theme2.colors[color][8],
|
|
546
|
+
"&[data-disabled]": {
|
|
547
|
+
color: theme2.colors.carbon[6]
|
|
548
|
+
}
|
|
534
549
|
}
|
|
535
550
|
};
|
|
536
551
|
}
|
|
@@ -549,12 +564,23 @@ const theme = {
|
|
|
549
564
|
shadow: "xs",
|
|
550
565
|
withBorder: true
|
|
551
566
|
},
|
|
552
|
-
styles: (theme2
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
567
|
+
styles: (theme2) => {
|
|
568
|
+
return {
|
|
569
|
+
root: {
|
|
570
|
+
backgroundColor: theme2.colors.carbon[0]
|
|
571
|
+
}
|
|
572
|
+
};
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
Paper: {
|
|
576
|
+
styles: (theme2, params) => {
|
|
577
|
+
return {
|
|
578
|
+
root: {
|
|
579
|
+
backgroundColor: theme2.colors.carbon[0],
|
|
580
|
+
borderColor: params.withBorder ? theme2.colors.carbon[3] : "transparent"
|
|
581
|
+
}
|
|
582
|
+
};
|
|
583
|
+
}
|
|
558
584
|
},
|
|
559
585
|
Drawer: {
|
|
560
586
|
defaultProps: (theme2) => ({
|