@tidbcloud/uikit 2.0.0-beta.18 → 2.0.0-beta.20

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 (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/theme/colors.cjs +2 -2
  3. package/dist/theme/colors.js +2 -2
  4. package/dist/theme/theme.cjs +61 -34
  5. package/dist/theme/theme.js +61 -34
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.20
4
+
5
+ ### Minor Changes
6
+
7
+ - Update badge styles
8
+
9
+ ## 2.0.0-beta.19
10
+
11
+ ### Minor Changes
12
+
13
+ - Adjust theme colors in components
14
+
3
15
  ## 2.0.0-beta.18
4
16
 
5
17
  ### Minor Changes
package/dist/theme/colors.cjs CHANGED
@@ -2,8 +2,8 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const carbon = [
4
4
  "#FFFFFF",
5
- "#F9FAFB",
6
- "#F3F5F7",
5
+ "#FBFDFD",
6
+ "#F5F8FA",
7
7
  "#EDF0F1",
8
8
  "#E3E8EA",
9
9
  "#C8CED0",
package/dist/theme/colors.js CHANGED
@@ -1,7 +1,7 @@
1
1
  const carbon = [
2
2
  "#FFFFFF",
3
- "#F9FAFB",
4
- "#F3F5F7",
3
+ "#FBFDFD",
4
+ "#F5F8FA",
5
5
  "#EDF0F1",
6
6
  "#E3E8EA",
7
7
  "#C8CED0",
package/dist/theme/theme.cjs CHANGED
@@ -6,25 +6,29 @@ const font = require("./font.cjs");
6
6
  const react = require("@emotion/react");
7
7
  const Colors = Object.keys(colors);
8
8
  const getButtonStyles = (theme2, params) => {
9
+ var _a;
10
+ let color = ((_a = params.color) == null ? void 0 : _a.includes(".")) ? params.color.split(".")[0] : params.color;
9
11
  const getFilledStyles = () => {
10
- const color = params.color || theme2.primaryColor;
11
- const bgColor = theme2.colors[params.color || theme2.primaryColor];
12
- const bgColorShade = color === "carbon" ? 9 : theme2.fn.primaryShade();
13
- const hoverBgColorShade = color === "carbon" ? bgColorShade - 1 : bgColorShade + 1;
12
+ color = color || theme2.primaryColor;
13
+ const bgColorShade = color.includes("carbon") ? 9 : theme2.fn.primaryShade();
14
+ const hoverBgColorShade = color.includes("carbon") ? bgColorShade - 1 : bgColorShade + 1;
15
+ const bgColor = theme2.fn.themeColor(color, bgColorShade);
16
+ const bgHoverColor = theme2.fn.themeColor(color, hoverBgColorShade);
14
17
  return {
15
18
  color: theme2.white,
16
- backgroundColor: bgColor[bgColorShade],
19
+ backgroundColor: bgColor,
17
20
  ...theme2.fn.hover({
18
- backgroundColor: bgColor[hoverBgColorShade]
21
+ backgroundColor: bgHoverColor
19
22
  }),
20
23
  "&:disabled": {
21
24
  color: theme2.white,
22
- backgroundColor: bgColor[5]
25
+ backgroundColor: theme2.fn.themeColor(color, 5)
23
26
  }
24
27
  };
25
28
  };
26
29
  const getLightStyles = () => {
27
- const mainColor = theme2.colors[params.color || "peacock"];
30
+ color = color || "peacock";
31
+ const mainColor = theme2.colors[color];
28
32
  const fontColorShade = 7;
29
33
  const bgColorShade = 1;
30
34
  const borderColorShade = 4;
@@ -47,10 +51,10 @@ const getButtonStyles = (theme2, params) => {
47
51
  };
48
52
  };
49
53
  const getDefaultStyles = () => {
50
- const color = params.color || theme2.primaryColor;
54
+ color = color || theme2.primaryColor;
51
55
  const mainColor = theme2.colors[color];
52
56
  const fontColorShade = color === "carbon" ? 8 : 7;
53
- const bgColorShade = 1;
57
+ const bgColorShade = 2;
54
58
  const borderColorShade = color === "carbon" ? 5 : 4;
55
59
  return {
56
60
  color: mainColor[fontColorShade],
@@ -69,13 +73,13 @@ const getButtonStyles = (theme2, params) => {
69
73
  };
70
74
  };
71
75
  const getSubtleStyles = () => {
72
- const color = params.color || "peacock";
76
+ color = color || "peacock";
73
77
  const mainColor = theme2.colors[color];
74
78
  const fontColorShade = 7;
75
79
  const bgColorShade = 1;
76
80
  return {
77
81
  color: mainColor[fontColorShade],
78
- backgroundColor: theme2.white,
82
+ backgroundColor: "transparent",
79
83
  ...theme2.fn.hover({
80
84
  color: mainColor[fontColorShade + 1],
81
85
  backgroundColor: mainColor[bgColorShade + 1]
@@ -298,11 +302,11 @@ const theme = {
298
302
  item: {
299
303
  transition: "background 150ms ease-in-out",
300
304
  color: theme2.colors.carbon[8],
301
- "&:hover": {
305
+ "&:hover, &[data-hovered]": {
302
306
  backgroundColor: theme2.colors.carbon[2],
303
307
  textDecoration: "none"
304
308
  },
305
- "&:disabled": {
309
+ "&:disabled, &[data-disabled]": {
306
310
  color: theme2.colors.carbon[5],
307
311
  userSelect: "none",
308
312
  cursor: "not-allowed",
@@ -321,26 +325,26 @@ const theme = {
321
325
  fw: 500
322
326
  },
323
327
  styles: (theme2, params) => {
324
- const color = params.color || theme2.primaryColor;
328
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
325
329
  const rootStyles = {
326
330
  light: {
327
- color: theme2.colors[color][8],
331
+ color: withThemeColor(8),
328
332
  "&:hover": {
329
- color: theme2.colors[color][8],
330
- backgroundColor: theme2.colors[color][2]
333
+ color: withThemeColor(8),
334
+ backgroundColor: withThemeColor(2)
331
335
  },
332
336
  "&:active": {
333
- color: theme2.colors[color][8],
334
- backgroundColor: theme2.colors[color][4]
337
+ color: withThemeColor(8),
338
+ backgroundColor: withThemeColor(4)
335
339
  },
336
340
  "&[data-active]": {
337
- color: theme2.colors[color][9],
338
- backgroundColor: theme2.colors[color][4],
341
+ color: withThemeColor(9),
342
+ backgroundColor: withThemeColor(4),
339
343
  "&:hover": {
340
- backgroundColor: theme2.colors[color][4]
344
+ backgroundColor: withThemeColor(4)
341
345
  },
342
346
  "&:active": {
343
- backgroundColor: theme2.colors[color][4]
347
+ backgroundColor: withThemeColor(4)
344
348
  }
345
349
  }
346
350
  }
@@ -509,15 +513,37 @@ const theme = {
509
513
  Badge: {
510
514
  styles(theme2, params) {
511
515
  const color = params.color ?? theme2.primaryColor;
516
+ const mainShade = color.includes("carbon") ? 9 : 7;
517
+ const sizes = {
518
+ xs: 11,
519
+ sm: 12,
520
+ md: 13,
521
+ lg: 14,
522
+ xl: 16
523
+ };
512
524
  const styles = {
513
525
  dot: {
514
526
  border: "none",
515
527
  textTransform: "capitalize",
516
- fontWeight: 500
528
+ fontWeight: 500,
529
+ fontSize: theme2.fn.size({ sizes, size: params.size }),
530
+ backgroundColor: "transparent",
531
+ color: theme2.fn.themeColor(theme2.primaryColor, 9),
532
+ "&:before": {
533
+ backgroundColor: theme2.fn.themeColor(color, 7)
534
+ }
517
535
  },
518
536
  outline: {
519
- color: theme2.colors[color][8],
520
- borderColor: theme2.colors[color][4]
537
+ color: theme2.fn.themeColor(color, mainShade),
538
+ borderColor: theme2.fn.themeColor(color, 4)
539
+ },
540
+ light: {
541
+ backgroundColor: theme2.fn.themeColor(color, 1),
542
+ color: theme2.fn.themeColor(color, mainShade)
543
+ },
544
+ filled: {
545
+ backgroundColor: theme2.fn.themeColor(color, mainShade),
546
+ color: theme2.white
521
547
  }
522
548
  };
523
549
  return {
@@ -529,14 +555,14 @@ const theme = {
529
555
  },
530
556
  Checkbox: {
531
557
  styles(theme2, params) {
532
- const color = params.color ?? theme2.primaryColor;
558
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
533
559
  return {
534
560
  input: {
535
561
  borderRadius: 4,
536
- borderColor: theme2.colors[color][6],
562
+ borderColor: withThemeColor(6),
537
563
  "&:checked:not(:disabled)": {
538
- backgroundColor: theme2.colors[color][9],
539
- borderColor: theme2.colors[color][9]
564
+ backgroundColor: withThemeColor(9),
565
+ borderColor: withThemeColor(9)
540
566
  },
541
567
  "&:disabled:checked": {
542
568
  backgroundColor: theme2.colors.carbon[6],
@@ -544,7 +570,7 @@ const theme = {
544
570
  }
545
571
  },
546
572
  label: {
547
- color: theme2.colors[color][8],
573
+ color: withThemeColor(8),
548
574
  "&[data-disabled]": {
549
575
  color: theme2.colors.carbon[6]
550
576
  }
@@ -670,8 +696,9 @@ const theme = {
670
696
  },
671
697
  Radio: {
672
698
  styles(theme2, params) {
673
- const color = params.color ?? "carbon";
674
- const shade = color === "carbon" ? 9 : 7;
699
+ var _a;
700
+ const color = ((_a = params.color) == null ? void 0 : _a.includes(".")) ? params.color.split(".")[0] : params.color ?? "carbon";
701
+ const shade = color.includes("carbon") ? 9 : 7;
675
702
  const size = params.size ?? "sm";
676
703
  const sizes = {
677
704
  xs: 14,
package/dist/theme/theme.js CHANGED
@@ -4,25 +4,29 @@ import { FONT_FAMILY } from "./font.js";
4
4
  import { keyframes } from "@emotion/react";
5
5
  const Colors = Object.keys(colors);
6
6
  const getButtonStyles = (theme2, params) => {
7
+ var _a;
8
+ let color = ((_a = params.color) == null ? void 0 : _a.includes(".")) ? params.color.split(".")[0] : params.color;
7
9
  const getFilledStyles = () => {
8
- const color = params.color || theme2.primaryColor;
9
- const bgColor = theme2.colors[params.color || theme2.primaryColor];
10
- const bgColorShade = color === "carbon" ? 9 : theme2.fn.primaryShade();
11
- const hoverBgColorShade = color === "carbon" ? bgColorShade - 1 : bgColorShade + 1;
10
+ color = color || theme2.primaryColor;
11
+ const bgColorShade = color.includes("carbon") ? 9 : theme2.fn.primaryShade();
12
+ const hoverBgColorShade = color.includes("carbon") ? bgColorShade - 1 : bgColorShade + 1;
13
+ const bgColor = theme2.fn.themeColor(color, bgColorShade);
14
+ const bgHoverColor = theme2.fn.themeColor(color, hoverBgColorShade);
12
15
  return {
13
16
  color: theme2.white,
14
- backgroundColor: bgColor[bgColorShade],
17
+ backgroundColor: bgColor,
15
18
  ...theme2.fn.hover({
16
- backgroundColor: bgColor[hoverBgColorShade]
19
+ backgroundColor: bgHoverColor
17
20
  }),
18
21
  "&:disabled": {
19
22
  color: theme2.white,
20
- backgroundColor: bgColor[5]
23
+ backgroundColor: theme2.fn.themeColor(color, 5)
21
24
  }
22
25
  };
23
26
  };
24
27
  const getLightStyles = () => {
25
- const mainColor = theme2.colors[params.color || "peacock"];
28
+ color = color || "peacock";
29
+ const mainColor = theme2.colors[color];
26
30
  const fontColorShade = 7;
27
31
  const bgColorShade = 1;
28
32
  const borderColorShade = 4;
@@ -45,10 +49,10 @@ const getButtonStyles = (theme2, params) => {
45
49
  };
46
50
  };
47
51
  const getDefaultStyles = () => {
48
- const color = params.color || theme2.primaryColor;
52
+ color = color || theme2.primaryColor;
49
53
  const mainColor = theme2.colors[color];
50
54
  const fontColorShade = color === "carbon" ? 8 : 7;
51
- const bgColorShade = 1;
55
+ const bgColorShade = 2;
52
56
  const borderColorShade = color === "carbon" ? 5 : 4;
53
57
  return {
54
58
  color: mainColor[fontColorShade],
@@ -67,13 +71,13 @@ const getButtonStyles = (theme2, params) => {
67
71
  };
68
72
  };
69
73
  const getSubtleStyles = () => {
70
- const color = params.color || "peacock";
74
+ color = color || "peacock";
71
75
  const mainColor = theme2.colors[color];
72
76
  const fontColorShade = 7;
73
77
  const bgColorShade = 1;
74
78
  return {
75
79
  color: mainColor[fontColorShade],
76
- backgroundColor: theme2.white,
80
+ backgroundColor: "transparent",
77
81
  ...theme2.fn.hover({
78
82
  color: mainColor[fontColorShade + 1],
79
83
  backgroundColor: mainColor[bgColorShade + 1]
@@ -296,11 +300,11 @@ const theme = {
296
300
  item: {
297
301
  transition: "background 150ms ease-in-out",
298
302
  color: theme2.colors.carbon[8],
299
- "&:hover": {
303
+ "&:hover, &[data-hovered]": {
300
304
  backgroundColor: theme2.colors.carbon[2],
301
305
  textDecoration: "none"
302
306
  },
303
- "&:disabled": {
307
+ "&:disabled, &[data-disabled]": {
304
308
  color: theme2.colors.carbon[5],
305
309
  userSelect: "none",
306
310
  cursor: "not-allowed",
@@ -319,26 +323,26 @@ const theme = {
319
323
  fw: 500
320
324
  },
321
325
  styles: (theme2, params) => {
322
- const color = params.color || theme2.primaryColor;
326
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
323
327
  const rootStyles = {
324
328
  light: {
325
- color: theme2.colors[color][8],
329
+ color: withThemeColor(8),
326
330
  "&:hover": {
327
- color: theme2.colors[color][8],
328
- backgroundColor: theme2.colors[color][2]
331
+ color: withThemeColor(8),
332
+ backgroundColor: withThemeColor(2)
329
333
  },
330
334
  "&:active": {
331
- color: theme2.colors[color][8],
332
- backgroundColor: theme2.colors[color][4]
335
+ color: withThemeColor(8),
336
+ backgroundColor: withThemeColor(4)
333
337
  },
334
338
  "&[data-active]": {
335
- color: theme2.colors[color][9],
336
- backgroundColor: theme2.colors[color][4],
339
+ color: withThemeColor(9),
340
+ backgroundColor: withThemeColor(4),
337
341
  "&:hover": {
338
- backgroundColor: theme2.colors[color][4]
342
+ backgroundColor: withThemeColor(4)
339
343
  },
340
344
  "&:active": {
341
- backgroundColor: theme2.colors[color][4]
345
+ backgroundColor: withThemeColor(4)
342
346
  }
343
347
  }
344
348
  }
@@ -507,15 +511,37 @@ const theme = {
507
511
  Badge: {
508
512
  styles(theme2, params) {
509
513
  const color = params.color ?? theme2.primaryColor;
514
+ const mainShade = color.includes("carbon") ? 9 : 7;
515
+ const sizes = {
516
+ xs: 11,
517
+ sm: 12,
518
+ md: 13,
519
+ lg: 14,
520
+ xl: 16
521
+ };
510
522
  const styles = {
511
523
  dot: {
512
524
  border: "none",
513
525
  textTransform: "capitalize",
514
- fontWeight: 500
526
+ fontWeight: 500,
527
+ fontSize: theme2.fn.size({ sizes, size: params.size }),
528
+ backgroundColor: "transparent",
529
+ color: theme2.fn.themeColor(theme2.primaryColor, 9),
530
+ "&:before": {
531
+ backgroundColor: theme2.fn.themeColor(color, 7)
532
+ }
515
533
  },
516
534
  outline: {
517
- color: theme2.colors[color][8],
518
- borderColor: theme2.colors[color][4]
535
+ color: theme2.fn.themeColor(color, mainShade),
536
+ borderColor: theme2.fn.themeColor(color, 4)
537
+ },
538
+ light: {
539
+ backgroundColor: theme2.fn.themeColor(color, 1),
540
+ color: theme2.fn.themeColor(color, mainShade)
541
+ },
542
+ filled: {
543
+ backgroundColor: theme2.fn.themeColor(color, mainShade),
544
+ color: theme2.white
519
545
  }
520
546
  };
521
547
  return {
@@ -527,14 +553,14 @@ const theme = {
527
553
  },
528
554
  Checkbox: {
529
555
  styles(theme2, params) {
530
- const color = params.color ?? theme2.primaryColor;
556
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
531
557
  return {
532
558
  input: {
533
559
  borderRadius: 4,
534
- borderColor: theme2.colors[color][6],
560
+ borderColor: withThemeColor(6),
535
561
  "&:checked:not(:disabled)": {
536
- backgroundColor: theme2.colors[color][9],
537
- borderColor: theme2.colors[color][9]
562
+ backgroundColor: withThemeColor(9),
563
+ borderColor: withThemeColor(9)
538
564
  },
539
565
  "&:disabled:checked": {
540
566
  backgroundColor: theme2.colors.carbon[6],
@@ -542,7 +568,7 @@ const theme = {
542
568
  }
543
569
  },
544
570
  label: {
545
- color: theme2.colors[color][8],
571
+ color: withThemeColor(8),
546
572
  "&[data-disabled]": {
547
573
  color: theme2.colors.carbon[6]
548
574
  }
@@ -668,8 +694,9 @@ const theme = {
668
694
  },
669
695
  Radio: {
670
696
  styles(theme2, params) {
671
- const color = params.color ?? "carbon";
672
- const shade = color === "carbon" ? 9 : 7;
697
+ var _a;
698
+ const color = ((_a = params.color) == null ? void 0 : _a.includes(".")) ? params.color.split(".")[0] : params.color ?? "carbon";
699
+ const shade = color.includes("carbon") ? 9 : 7;
673
700
  const size = params.size ?? "sm";
674
701
  const sizes = {
675
702
  xs: 14,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.18",
3
+ "version": "2.0.0-beta.20",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",