@tidbcloud/uikit 2.0.0-beta.21 → 2.0.0-beta.22
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 +6 -0
- package/dist/theme/theme.cjs +107 -2
- package/dist/theme/theme.js +107 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/theme/theme.cjs
CHANGED
|
@@ -410,6 +410,9 @@ const theme = {
|
|
|
410
410
|
}
|
|
411
411
|
},
|
|
412
412
|
Alert: {
|
|
413
|
+
defaultProps: {
|
|
414
|
+
color: "peacock"
|
|
415
|
+
},
|
|
413
416
|
styles: (theme2, params) => {
|
|
414
417
|
return {
|
|
415
418
|
root: {
|
|
@@ -516,6 +519,9 @@ const theme = {
|
|
|
516
519
|
}
|
|
517
520
|
},
|
|
518
521
|
Badge: {
|
|
522
|
+
defaultProps: {
|
|
523
|
+
color: "peacock"
|
|
524
|
+
},
|
|
519
525
|
styles(theme2, params) {
|
|
520
526
|
const color = params.color ?? theme2.primaryColor;
|
|
521
527
|
const mainShade = color.includes("carbon") ? 9 : 7;
|
|
@@ -640,7 +646,7 @@ const theme = {
|
|
|
640
646
|
borderTopRightRadius: theme2.defaultRadius,
|
|
641
647
|
padding: "16px 16px 16px 24px",
|
|
642
648
|
margin: 0,
|
|
643
|
-
backgroundColor: theme2.colors.carbon[
|
|
649
|
+
backgroundColor: theme2.colors.carbon[1]
|
|
644
650
|
},
|
|
645
651
|
title: {
|
|
646
652
|
fontWeight: 700,
|
|
@@ -649,7 +655,8 @@ const theme = {
|
|
|
649
655
|
color: theme2.colors.carbon[9]
|
|
650
656
|
},
|
|
651
657
|
body: {
|
|
652
|
-
padding: 24
|
|
658
|
+
padding: 24,
|
|
659
|
+
backgroundColor: theme2.colors.carbon[0]
|
|
653
660
|
}
|
|
654
661
|
})
|
|
655
662
|
},
|
|
@@ -794,6 +801,104 @@ const theme = {
|
|
|
794
801
|
}
|
|
795
802
|
};
|
|
796
803
|
}
|
|
804
|
+
},
|
|
805
|
+
Tooltip: {
|
|
806
|
+
defaultProps: {
|
|
807
|
+
withArrow: true
|
|
808
|
+
},
|
|
809
|
+
styles(theme2) {
|
|
810
|
+
const styles = {
|
|
811
|
+
dark: {
|
|
812
|
+
backgroundColor: theme2.colors.carbon[8],
|
|
813
|
+
color: theme2.colors.carbon[1]
|
|
814
|
+
},
|
|
815
|
+
light: {
|
|
816
|
+
backgroundColor: theme2.colors.carbon[8],
|
|
817
|
+
color: theme2.colors.carbon[1]
|
|
818
|
+
}
|
|
819
|
+
};
|
|
820
|
+
return {
|
|
821
|
+
tooltip: {
|
|
822
|
+
...styles[theme2.colorScheme]
|
|
823
|
+
}
|
|
824
|
+
};
|
|
825
|
+
}
|
|
826
|
+
},
|
|
827
|
+
ActionIcon: {
|
|
828
|
+
defaultProps: {
|
|
829
|
+
variant: "default",
|
|
830
|
+
color: "carbon"
|
|
831
|
+
},
|
|
832
|
+
styles(theme2, params) {
|
|
833
|
+
const color = params.color ?? theme2.primaryColor;
|
|
834
|
+
const shade = color.includes("carbon") ? 8 : 7;
|
|
835
|
+
const variantStyles = {
|
|
836
|
+
default: {
|
|
837
|
+
color: theme2.fn.themeColor(color, 8),
|
|
838
|
+
backgroundColor: theme2.fn.themeColor(color, 2),
|
|
839
|
+
borderColor: theme2.fn.themeColor(color, 5),
|
|
840
|
+
"&:hover": {
|
|
841
|
+
color: theme2.fn.themeColor(color, 9),
|
|
842
|
+
backgroundColor: theme2.fn.themeColor(color, 2),
|
|
843
|
+
borderColor: theme2.fn.themeColor(color, 6)
|
|
844
|
+
},
|
|
845
|
+
"&:active": {
|
|
846
|
+
color: theme2.fn.themeColor(color, 9),
|
|
847
|
+
backgroundColor: theme2.fn.themeColor(color, 4),
|
|
848
|
+
borderColor: theme2.fn.themeColor(color, 6)
|
|
849
|
+
},
|
|
850
|
+
"&:disabled": {
|
|
851
|
+
color: theme2.fn.themeColor(color, 6),
|
|
852
|
+
backgroundColor: theme2.fn.themeColor(color, 2),
|
|
853
|
+
borderColor: theme2.fn.themeColor(color, 5)
|
|
854
|
+
}
|
|
855
|
+
},
|
|
856
|
+
transparent: {
|
|
857
|
+
backgroundColor: "transparent",
|
|
858
|
+
color: theme2.fn.themeColor(color, shade)
|
|
859
|
+
},
|
|
860
|
+
subtle: {
|
|
861
|
+
backgroundColor: "transparent",
|
|
862
|
+
color: theme2.fn.themeColor(color, 8),
|
|
863
|
+
"&:hover": {
|
|
864
|
+
backgroundColor: theme2.fn.themeColor(color, 2)
|
|
865
|
+
},
|
|
866
|
+
"&:active": {
|
|
867
|
+
backgroundColor: theme2.fn.themeColor(color, 4)
|
|
868
|
+
},
|
|
869
|
+
"&:disabled": {
|
|
870
|
+
color: theme2.fn.themeColor(color, 6)
|
|
871
|
+
}
|
|
872
|
+
},
|
|
873
|
+
outline: {
|
|
874
|
+
backgroundColor: "transparent",
|
|
875
|
+
color: theme2.fn.themeColor(color, shade),
|
|
876
|
+
border: `1px solid ${theme2.fn.themeColor(color, 4)}`,
|
|
877
|
+
"&:hover": {
|
|
878
|
+
backgroundColor: theme2.fn.themeColor(color, 2)
|
|
879
|
+
}
|
|
880
|
+
},
|
|
881
|
+
filled: {
|
|
882
|
+
backgroundColor: theme2.fn.themeColor(color, color.includes("carbon") ? 9 : 7),
|
|
883
|
+
color: theme2.white
|
|
884
|
+
},
|
|
885
|
+
light: {
|
|
886
|
+
backgroundColor: theme2.fn.themeColor(color, 3),
|
|
887
|
+
color: theme2.fn.themeColor(color, 8),
|
|
888
|
+
"&:hover": {
|
|
889
|
+
backgroundColor: theme2.fn.themeColor(color, 4)
|
|
890
|
+
},
|
|
891
|
+
"&:active": {
|
|
892
|
+
backgroundColor: theme2.fn.themeColor(color, 5)
|
|
893
|
+
}
|
|
894
|
+
}
|
|
895
|
+
};
|
|
896
|
+
return {
|
|
897
|
+
root: {
|
|
898
|
+
...variantStyles[params.variant]
|
|
899
|
+
}
|
|
900
|
+
};
|
|
901
|
+
}
|
|
797
902
|
}
|
|
798
903
|
}
|
|
799
904
|
};
|
package/dist/theme/theme.js
CHANGED
|
@@ -408,6 +408,9 @@ const theme = {
|
|
|
408
408
|
}
|
|
409
409
|
},
|
|
410
410
|
Alert: {
|
|
411
|
+
defaultProps: {
|
|
412
|
+
color: "peacock"
|
|
413
|
+
},
|
|
411
414
|
styles: (theme2, params) => {
|
|
412
415
|
return {
|
|
413
416
|
root: {
|
|
@@ -514,6 +517,9 @@ const theme = {
|
|
|
514
517
|
}
|
|
515
518
|
},
|
|
516
519
|
Badge: {
|
|
520
|
+
defaultProps: {
|
|
521
|
+
color: "peacock"
|
|
522
|
+
},
|
|
517
523
|
styles(theme2, params) {
|
|
518
524
|
const color = params.color ?? theme2.primaryColor;
|
|
519
525
|
const mainShade = color.includes("carbon") ? 9 : 7;
|
|
@@ -638,7 +644,7 @@ const theme = {
|
|
|
638
644
|
borderTopRightRadius: theme2.defaultRadius,
|
|
639
645
|
padding: "16px 16px 16px 24px",
|
|
640
646
|
margin: 0,
|
|
641
|
-
backgroundColor: theme2.colors.carbon[
|
|
647
|
+
backgroundColor: theme2.colors.carbon[1]
|
|
642
648
|
},
|
|
643
649
|
title: {
|
|
644
650
|
fontWeight: 700,
|
|
@@ -647,7 +653,8 @@ const theme = {
|
|
|
647
653
|
color: theme2.colors.carbon[9]
|
|
648
654
|
},
|
|
649
655
|
body: {
|
|
650
|
-
padding: 24
|
|
656
|
+
padding: 24,
|
|
657
|
+
backgroundColor: theme2.colors.carbon[0]
|
|
651
658
|
}
|
|
652
659
|
})
|
|
653
660
|
},
|
|
@@ -792,6 +799,104 @@ const theme = {
|
|
|
792
799
|
}
|
|
793
800
|
};
|
|
794
801
|
}
|
|
802
|
+
},
|
|
803
|
+
Tooltip: {
|
|
804
|
+
defaultProps: {
|
|
805
|
+
withArrow: true
|
|
806
|
+
},
|
|
807
|
+
styles(theme2) {
|
|
808
|
+
const styles = {
|
|
809
|
+
dark: {
|
|
810
|
+
backgroundColor: theme2.colors.carbon[8],
|
|
811
|
+
color: theme2.colors.carbon[1]
|
|
812
|
+
},
|
|
813
|
+
light: {
|
|
814
|
+
backgroundColor: theme2.colors.carbon[8],
|
|
815
|
+
color: theme2.colors.carbon[1]
|
|
816
|
+
}
|
|
817
|
+
};
|
|
818
|
+
return {
|
|
819
|
+
tooltip: {
|
|
820
|
+
...styles[theme2.colorScheme]
|
|
821
|
+
}
|
|
822
|
+
};
|
|
823
|
+
}
|
|
824
|
+
},
|
|
825
|
+
ActionIcon: {
|
|
826
|
+
defaultProps: {
|
|
827
|
+
variant: "default",
|
|
828
|
+
color: "carbon"
|
|
829
|
+
},
|
|
830
|
+
styles(theme2, params) {
|
|
831
|
+
const color = params.color ?? theme2.primaryColor;
|
|
832
|
+
const shade = color.includes("carbon") ? 8 : 7;
|
|
833
|
+
const variantStyles = {
|
|
834
|
+
default: {
|
|
835
|
+
color: theme2.fn.themeColor(color, 8),
|
|
836
|
+
backgroundColor: theme2.fn.themeColor(color, 2),
|
|
837
|
+
borderColor: theme2.fn.themeColor(color, 5),
|
|
838
|
+
"&:hover": {
|
|
839
|
+
color: theme2.fn.themeColor(color, 9),
|
|
840
|
+
backgroundColor: theme2.fn.themeColor(color, 2),
|
|
841
|
+
borderColor: theme2.fn.themeColor(color, 6)
|
|
842
|
+
},
|
|
843
|
+
"&:active": {
|
|
844
|
+
color: theme2.fn.themeColor(color, 9),
|
|
845
|
+
backgroundColor: theme2.fn.themeColor(color, 4),
|
|
846
|
+
borderColor: theme2.fn.themeColor(color, 6)
|
|
847
|
+
},
|
|
848
|
+
"&:disabled": {
|
|
849
|
+
color: theme2.fn.themeColor(color, 6),
|
|
850
|
+
backgroundColor: theme2.fn.themeColor(color, 2),
|
|
851
|
+
borderColor: theme2.fn.themeColor(color, 5)
|
|
852
|
+
}
|
|
853
|
+
},
|
|
854
|
+
transparent: {
|
|
855
|
+
backgroundColor: "transparent",
|
|
856
|
+
color: theme2.fn.themeColor(color, shade)
|
|
857
|
+
},
|
|
858
|
+
subtle: {
|
|
859
|
+
backgroundColor: "transparent",
|
|
860
|
+
color: theme2.fn.themeColor(color, 8),
|
|
861
|
+
"&:hover": {
|
|
862
|
+
backgroundColor: theme2.fn.themeColor(color, 2)
|
|
863
|
+
},
|
|
864
|
+
"&:active": {
|
|
865
|
+
backgroundColor: theme2.fn.themeColor(color, 4)
|
|
866
|
+
},
|
|
867
|
+
"&:disabled": {
|
|
868
|
+
color: theme2.fn.themeColor(color, 6)
|
|
869
|
+
}
|
|
870
|
+
},
|
|
871
|
+
outline: {
|
|
872
|
+
backgroundColor: "transparent",
|
|
873
|
+
color: theme2.fn.themeColor(color, shade),
|
|
874
|
+
border: `1px solid ${theme2.fn.themeColor(color, 4)}`,
|
|
875
|
+
"&:hover": {
|
|
876
|
+
backgroundColor: theme2.fn.themeColor(color, 2)
|
|
877
|
+
}
|
|
878
|
+
},
|
|
879
|
+
filled: {
|
|
880
|
+
backgroundColor: theme2.fn.themeColor(color, color.includes("carbon") ? 9 : 7),
|
|
881
|
+
color: theme2.white
|
|
882
|
+
},
|
|
883
|
+
light: {
|
|
884
|
+
backgroundColor: theme2.fn.themeColor(color, 3),
|
|
885
|
+
color: theme2.fn.themeColor(color, 8),
|
|
886
|
+
"&:hover": {
|
|
887
|
+
backgroundColor: theme2.fn.themeColor(color, 4)
|
|
888
|
+
},
|
|
889
|
+
"&:active": {
|
|
890
|
+
backgroundColor: theme2.fn.themeColor(color, 5)
|
|
891
|
+
}
|
|
892
|
+
}
|
|
893
|
+
};
|
|
894
|
+
return {
|
|
895
|
+
root: {
|
|
896
|
+
...variantStyles[params.variant]
|
|
897
|
+
}
|
|
898
|
+
};
|
|
899
|
+
}
|
|
795
900
|
}
|
|
796
901
|
}
|
|
797
902
|
};
|