@tidbcloud/uikit 2.0.0-beta.20 → 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.
Files changed (4) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/theme/theme.cjs +137 -10
  3. package/dist/theme/theme.js +137 -10
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.22
4
+
5
+ ### Minor Changes
6
+
7
+ - Update ActionIcon/Tooltip/Modal style set Badge/Alert default to peacock color
8
+
9
+ ## 2.0.0-beta.21
10
+
11
+ ### Minor Changes
12
+
13
+ - Update Badge/Switch style and fix menu data attributes style
14
+
3
15
  ## 2.0.0-beta.20
4
16
 
5
17
  ### Minor Changes
package/dist/theme/theme.cjs CHANGED
@@ -303,14 +303,19 @@ const theme = {
303
303
  transition: "background 150ms ease-in-out",
304
304
  color: theme2.colors.carbon[8],
305
305
  "&:hover, &[data-hovered]": {
306
+ color: theme2.colors.carbon[8],
306
307
  backgroundColor: theme2.colors.carbon[2],
307
308
  textDecoration: "none"
308
309
  },
310
+ "&:active, &[data-active]": {
311
+ color: theme2.colors.carbon[8],
312
+ backgroundColor: theme2.colors.carbon[3]
313
+ },
309
314
  "&:disabled, &[data-disabled]": {
310
315
  color: theme2.colors.carbon[5],
311
316
  userSelect: "none",
312
317
  cursor: "not-allowed",
313
- "&:hover": {
318
+ "&:hover, &[data-hovered]": {
314
319
  color: theme2.colors.carbon[6],
315
320
  backgroundColor: "transparent"
316
321
  }
@@ -405,6 +410,9 @@ const theme = {
405
410
  }
406
411
  },
407
412
  Alert: {
413
+ defaultProps: {
414
+ color: "peacock"
415
+ },
408
416
  styles: (theme2, params) => {
409
417
  return {
410
418
  root: {
@@ -511,6 +519,9 @@ const theme = {
511
519
  }
512
520
  },
513
521
  Badge: {
522
+ defaultProps: {
523
+ color: "peacock"
524
+ },
514
525
  styles(theme2, params) {
515
526
  const color = params.color ?? theme2.primaryColor;
516
527
  const mainShade = color.includes("carbon") ? 9 : 7;
@@ -528,7 +539,7 @@ const theme = {
528
539
  fontWeight: 500,
529
540
  fontSize: theme2.fn.size({ sizes, size: params.size }),
530
541
  backgroundColor: "transparent",
531
- color: theme2.fn.themeColor(theme2.primaryColor, 9),
542
+ color: theme2.fn.themeColor(theme2.primaryColor, 8),
532
543
  "&:before": {
533
544
  backgroundColor: theme2.fn.themeColor(color, 7)
534
545
  }
@@ -635,7 +646,7 @@ const theme = {
635
646
  borderTopRightRadius: theme2.defaultRadius,
636
647
  padding: "16px 16px 16px 24px",
637
648
  margin: 0,
638
- backgroundColor: theme2.colors.carbon[2]
649
+ backgroundColor: theme2.colors.carbon[1]
639
650
  },
640
651
  title: {
641
652
  fontWeight: 700,
@@ -644,7 +655,8 @@ const theme = {
644
655
  color: theme2.colors.carbon[9]
645
656
  },
646
657
  body: {
647
- padding: 24
658
+ padding: 24,
659
+ backgroundColor: theme2.colors.carbon[0]
648
660
  }
649
661
  })
650
662
  },
@@ -679,17 +691,34 @@ const theme = {
679
691
  },
680
692
  Switch: {
681
693
  styles: (theme2, params) => {
682
- const color = params.color ?? theme2.colors.cyan[4];
694
+ const color = params.color ?? theme2.primaryColor;
683
695
  return {
684
696
  root: {
697
+ "& input:checked+.mantine-Switch-track": {
698
+ backgroundColor: theme2.fn.themeColor(color, 9),
699
+ borderColor: theme2.fn.themeColor(color, 9)
700
+ },
701
+ "& input:disabled+.mantine-Switch-track": {
702
+ backgroundColor: theme2.fn.themeColor(color, 4),
703
+ borderColor: theme2.fn.themeColor(color, 4)
704
+ },
685
705
  "& input:disabled:checked+.mantine-Switch-track": {
686
- backgroundColor: color,
687
- borderColor: color
706
+ backgroundColor: theme2.fn.themeColor(color, 7),
707
+ borderColor: theme2.fn.themeColor(color, 7)
708
+ },
709
+ "& input+*>.mantine-Switch-trackLabel": {
710
+ color: theme2.fn.themeColor(color, 8)
688
711
  },
689
- "& input:disabled+*>.mantine-Switch-thumb": {
690
- backgroundColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.carbon[7],
691
- borderColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.carbon[7]
712
+ "& input:checked+*>.mantine-Switch-trackLabel": {
713
+ color: theme2.fn.themeColor(color, 0)
692
714
  }
715
+ },
716
+ track: {
717
+ backgroundColor: theme2.fn.themeColor(color, 5),
718
+ borderColor: theme2.fn.themeColor(color, 5)
719
+ },
720
+ trackLabel: {
721
+ color: theme2.fn.themeColor(color, 8)
693
722
  }
694
723
  };
695
724
  }
@@ -772,6 +801,104 @@ const theme = {
772
801
  }
773
802
  };
774
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
+ }
775
902
  }
776
903
  }
777
904
  };
package/dist/theme/theme.js CHANGED
@@ -301,14 +301,19 @@ const theme = {
301
301
  transition: "background 150ms ease-in-out",
302
302
  color: theme2.colors.carbon[8],
303
303
  "&:hover, &[data-hovered]": {
304
+ color: theme2.colors.carbon[8],
304
305
  backgroundColor: theme2.colors.carbon[2],
305
306
  textDecoration: "none"
306
307
  },
308
+ "&:active, &[data-active]": {
309
+ color: theme2.colors.carbon[8],
310
+ backgroundColor: theme2.colors.carbon[3]
311
+ },
307
312
  "&:disabled, &[data-disabled]": {
308
313
  color: theme2.colors.carbon[5],
309
314
  userSelect: "none",
310
315
  cursor: "not-allowed",
311
- "&:hover": {
316
+ "&:hover, &[data-hovered]": {
312
317
  color: theme2.colors.carbon[6],
313
318
  backgroundColor: "transparent"
314
319
  }
@@ -403,6 +408,9 @@ const theme = {
403
408
  }
404
409
  },
405
410
  Alert: {
411
+ defaultProps: {
412
+ color: "peacock"
413
+ },
406
414
  styles: (theme2, params) => {
407
415
  return {
408
416
  root: {
@@ -509,6 +517,9 @@ const theme = {
509
517
  }
510
518
  },
511
519
  Badge: {
520
+ defaultProps: {
521
+ color: "peacock"
522
+ },
512
523
  styles(theme2, params) {
513
524
  const color = params.color ?? theme2.primaryColor;
514
525
  const mainShade = color.includes("carbon") ? 9 : 7;
@@ -526,7 +537,7 @@ const theme = {
526
537
  fontWeight: 500,
527
538
  fontSize: theme2.fn.size({ sizes, size: params.size }),
528
539
  backgroundColor: "transparent",
529
- color: theme2.fn.themeColor(theme2.primaryColor, 9),
540
+ color: theme2.fn.themeColor(theme2.primaryColor, 8),
530
541
  "&:before": {
531
542
  backgroundColor: theme2.fn.themeColor(color, 7)
532
543
  }
@@ -633,7 +644,7 @@ const theme = {
633
644
  borderTopRightRadius: theme2.defaultRadius,
634
645
  padding: "16px 16px 16px 24px",
635
646
  margin: 0,
636
- backgroundColor: theme2.colors.carbon[2]
647
+ backgroundColor: theme2.colors.carbon[1]
637
648
  },
638
649
  title: {
639
650
  fontWeight: 700,
@@ -642,7 +653,8 @@ const theme = {
642
653
  color: theme2.colors.carbon[9]
643
654
  },
644
655
  body: {
645
- padding: 24
656
+ padding: 24,
657
+ backgroundColor: theme2.colors.carbon[0]
646
658
  }
647
659
  })
648
660
  },
@@ -677,17 +689,34 @@ const theme = {
677
689
  },
678
690
  Switch: {
679
691
  styles: (theme2, params) => {
680
- const color = params.color ?? theme2.colors.cyan[4];
692
+ const color = params.color ?? theme2.primaryColor;
681
693
  return {
682
694
  root: {
695
+ "& input:checked+.mantine-Switch-track": {
696
+ backgroundColor: theme2.fn.themeColor(color, 9),
697
+ borderColor: theme2.fn.themeColor(color, 9)
698
+ },
699
+ "& input:disabled+.mantine-Switch-track": {
700
+ backgroundColor: theme2.fn.themeColor(color, 4),
701
+ borderColor: theme2.fn.themeColor(color, 4)
702
+ },
683
703
  "& input:disabled:checked+.mantine-Switch-track": {
684
- backgroundColor: color,
685
- borderColor: color
704
+ backgroundColor: theme2.fn.themeColor(color, 7),
705
+ borderColor: theme2.fn.themeColor(color, 7)
706
+ },
707
+ "& input+*>.mantine-Switch-trackLabel": {
708
+ color: theme2.fn.themeColor(color, 8)
686
709
  },
687
- "& input:disabled+*>.mantine-Switch-thumb": {
688
- backgroundColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.carbon[7],
689
- borderColor: theme2.colorScheme === "light" ? theme2.white : theme2.colors.carbon[7]
710
+ "& input:checked+*>.mantine-Switch-trackLabel": {
711
+ color: theme2.fn.themeColor(color, 0)
690
712
  }
713
+ },
714
+ track: {
715
+ backgroundColor: theme2.fn.themeColor(color, 5),
716
+ borderColor: theme2.fn.themeColor(color, 5)
717
+ },
718
+ trackLabel: {
719
+ color: theme2.fn.themeColor(color, 8)
691
720
  }
692
721
  };
693
722
  }
@@ -770,6 +799,104 @@ const theme = {
770
799
  }
771
800
  };
772
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
+ }
773
900
  }
774
901
  }
775
902
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.20",
3
+ "version": "2.0.0-beta.22",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",