@tidbcloud/uikit 2.0.0-beta.17 → 2.0.0-beta.19

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 +68 -53
  5. package/dist/theme/theme.js +68 -53
  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.19
4
+
5
+ ### Minor Changes
6
+
7
+ - Adjust theme colors in components
8
+
9
+ ## 2.0.0-beta.18
10
+
11
+ ### Minor Changes
12
+
13
+ - Update Menu/Checkbox/Badge/Paper style
14
+
3
15
  ## 2.0.0-beta.17
4
16
 
5
17
  ### Patch 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,22 +302,15 @@ const theme = {
298
302
  item: {
299
303
  transition: "background 150ms ease-in-out",
300
304
  color: theme2.colors.carbon[8],
301
- "&[data-hovered], &:hover": {
302
- color: theme2.colors.carbon[8],
303
- backgroundColor: theme2.colors.carbon[3],
305
+ "&:hover, &[data-hovered]": {
306
+ backgroundColor: theme2.colors.carbon[2],
304
307
  textDecoration: "none"
305
308
  },
306
- "&[data-active]": {
307
- color: theme2.colors.sky[7],
308
- "&:hover": {
309
- backgroundColor: theme2.colors.carbon[3]
310
- }
311
- },
312
- "&[data-disabled]": {
313
- color: theme2.colors.carbon[6],
309
+ "&:disabled, &[data-disabled]": {
310
+ color: theme2.colors.carbon[5],
314
311
  userSelect: "none",
315
312
  cursor: "not-allowed",
316
- "&[data-hovered], &:hover": {
313
+ "&:hover": {
317
314
  color: theme2.colors.carbon[6],
318
315
  backgroundColor: "transparent"
319
316
  }
@@ -328,26 +325,26 @@ const theme = {
328
325
  fw: 500
329
326
  },
330
327
  styles: (theme2, params) => {
331
- const color = params.color || theme2.primaryColor;
328
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
332
329
  const rootStyles = {
333
330
  light: {
334
- color: theme2.colors[color][8],
331
+ color: withThemeColor(8),
335
332
  "&:hover": {
336
- color: theme2.colors[color][8],
337
- backgroundColor: theme2.colors[color][2]
333
+ color: withThemeColor(8),
334
+ backgroundColor: withThemeColor(2)
338
335
  },
339
336
  "&:active": {
340
- color: theme2.colors[color][8],
341
- backgroundColor: theme2.colors[color][4]
337
+ color: withThemeColor(8),
338
+ backgroundColor: withThemeColor(4)
342
339
  },
343
340
  "&[data-active]": {
344
- color: theme2.colors[color][9],
345
- backgroundColor: theme2.colors[color][4],
341
+ color: withThemeColor(9),
342
+ backgroundColor: withThemeColor(4),
346
343
  "&:hover": {
347
- backgroundColor: theme2.colors[color][4]
344
+ backgroundColor: withThemeColor(4)
348
345
  },
349
346
  "&:active": {
350
- backgroundColor: theme2.colors[color][4]
347
+ backgroundColor: withThemeColor(4)
351
348
  }
352
349
  }
353
350
  }
@@ -515,24 +512,45 @@ const theme = {
515
512
  },
516
513
  Badge: {
517
514
  styles(theme2, params) {
518
- if (params.variant === "dot") {
519
- return {
520
- root: {
521
- border: "none",
522
- textTransform: "capitalize",
523
- fontWeight: 500
524
- }
525
- };
526
- } else {
527
- return { root: {} };
528
- }
515
+ const styles = {
516
+ dot: {
517
+ border: "none",
518
+ textTransform: "capitalize",
519
+ fontWeight: 500
520
+ },
521
+ outline: {
522
+ color: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 8),
523
+ borderColor: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 4)
524
+ }
525
+ };
526
+ return {
527
+ root: {
528
+ ...styles[params.variant]
529
+ }
530
+ };
529
531
  }
530
532
  },
531
533
  Checkbox: {
532
- styles() {
534
+ styles(theme2, params) {
535
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
533
536
  return {
534
537
  input: {
535
- borderRadius: 4
538
+ borderRadius: 4,
539
+ borderColor: withThemeColor(6),
540
+ "&:checked:not(:disabled)": {
541
+ backgroundColor: withThemeColor(9),
542
+ borderColor: withThemeColor(9)
543
+ },
544
+ "&:disabled:checked": {
545
+ backgroundColor: theme2.colors.carbon[6],
546
+ borderColor: theme2.colors.carbon[6]
547
+ }
548
+ },
549
+ label: {
550
+ color: withThemeColor(8),
551
+ "&[data-disabled]": {
552
+ color: theme2.colors.carbon[6]
553
+ }
536
554
  }
537
555
  };
538
556
  }
@@ -560,10 +578,6 @@ const theme = {
560
578
  }
561
579
  },
562
580
  Paper: {
563
- defaultProps: {
564
- shadow: "xs",
565
- withBorder: true
566
- },
567
581
  styles: (theme2, params) => {
568
582
  return {
569
583
  root: {
@@ -659,8 +673,9 @@ const theme = {
659
673
  },
660
674
  Radio: {
661
675
  styles(theme2, params) {
662
- const color = params.color ?? "carbon";
663
- const shade = color === "carbon" ? 9 : 7;
676
+ var _a;
677
+ const color = ((_a = params.color) == null ? void 0 : _a.includes(".")) ? params.color.split(".")[0] : params.color ?? "carbon";
678
+ const shade = color.includes("carbon") ? 9 : 7;
664
679
  const size = params.size ?? "sm";
665
680
  const sizes = {
666
681
  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,22 +300,15 @@ const theme = {
296
300
  item: {
297
301
  transition: "background 150ms ease-in-out",
298
302
  color: theme2.colors.carbon[8],
299
- "&[data-hovered], &:hover": {
300
- color: theme2.colors.carbon[8],
301
- backgroundColor: theme2.colors.carbon[3],
303
+ "&:hover, &[data-hovered]": {
304
+ backgroundColor: theme2.colors.carbon[2],
302
305
  textDecoration: "none"
303
306
  },
304
- "&[data-active]": {
305
- color: theme2.colors.sky[7],
306
- "&:hover": {
307
- backgroundColor: theme2.colors.carbon[3]
308
- }
309
- },
310
- "&[data-disabled]": {
311
- color: theme2.colors.carbon[6],
307
+ "&:disabled, &[data-disabled]": {
308
+ color: theme2.colors.carbon[5],
312
309
  userSelect: "none",
313
310
  cursor: "not-allowed",
314
- "&[data-hovered], &:hover": {
311
+ "&:hover": {
315
312
  color: theme2.colors.carbon[6],
316
313
  backgroundColor: "transparent"
317
314
  }
@@ -326,26 +323,26 @@ const theme = {
326
323
  fw: 500
327
324
  },
328
325
  styles: (theme2, params) => {
329
- const color = params.color || theme2.primaryColor;
326
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
330
327
  const rootStyles = {
331
328
  light: {
332
- color: theme2.colors[color][8],
329
+ color: withThemeColor(8),
333
330
  "&:hover": {
334
- color: theme2.colors[color][8],
335
- backgroundColor: theme2.colors[color][2]
331
+ color: withThemeColor(8),
332
+ backgroundColor: withThemeColor(2)
336
333
  },
337
334
  "&:active": {
338
- color: theme2.colors[color][8],
339
- backgroundColor: theme2.colors[color][4]
335
+ color: withThemeColor(8),
336
+ backgroundColor: withThemeColor(4)
340
337
  },
341
338
  "&[data-active]": {
342
- color: theme2.colors[color][9],
343
- backgroundColor: theme2.colors[color][4],
339
+ color: withThemeColor(9),
340
+ backgroundColor: withThemeColor(4),
344
341
  "&:hover": {
345
- backgroundColor: theme2.colors[color][4]
342
+ backgroundColor: withThemeColor(4)
346
343
  },
347
344
  "&:active": {
348
- backgroundColor: theme2.colors[color][4]
345
+ backgroundColor: withThemeColor(4)
349
346
  }
350
347
  }
351
348
  }
@@ -513,24 +510,45 @@ const theme = {
513
510
  },
514
511
  Badge: {
515
512
  styles(theme2, params) {
516
- if (params.variant === "dot") {
517
- return {
518
- root: {
519
- border: "none",
520
- textTransform: "capitalize",
521
- fontWeight: 500
522
- }
523
- };
524
- } else {
525
- return { root: {} };
526
- }
513
+ const styles = {
514
+ dot: {
515
+ border: "none",
516
+ textTransform: "capitalize",
517
+ fontWeight: 500
518
+ },
519
+ outline: {
520
+ color: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 8),
521
+ borderColor: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 4)
522
+ }
523
+ };
524
+ return {
525
+ root: {
526
+ ...styles[params.variant]
527
+ }
528
+ };
527
529
  }
528
530
  },
529
531
  Checkbox: {
530
- styles() {
532
+ styles(theme2, params) {
533
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
531
534
  return {
532
535
  input: {
533
- borderRadius: 4
536
+ borderRadius: 4,
537
+ borderColor: withThemeColor(6),
538
+ "&:checked:not(:disabled)": {
539
+ backgroundColor: withThemeColor(9),
540
+ borderColor: withThemeColor(9)
541
+ },
542
+ "&:disabled:checked": {
543
+ backgroundColor: theme2.colors.carbon[6],
544
+ borderColor: theme2.colors.carbon[6]
545
+ }
546
+ },
547
+ label: {
548
+ color: withThemeColor(8),
549
+ "&[data-disabled]": {
550
+ color: theme2.colors.carbon[6]
551
+ }
534
552
  }
535
553
  };
536
554
  }
@@ -558,10 +576,6 @@ const theme = {
558
576
  }
559
577
  },
560
578
  Paper: {
561
- defaultProps: {
562
- shadow: "xs",
563
- withBorder: true
564
- },
565
579
  styles: (theme2, params) => {
566
580
  return {
567
581
  root: {
@@ -657,8 +671,9 @@ const theme = {
657
671
  },
658
672
  Radio: {
659
673
  styles(theme2, params) {
660
- const color = params.color ?? "carbon";
661
- const shade = color === "carbon" ? 9 : 7;
674
+ var _a;
675
+ const color = ((_a = params.color) == null ? void 0 : _a.includes(".")) ? params.color.split(".")[0] : params.color ?? "carbon";
676
+ const shade = color.includes("carbon") ? 9 : 7;
662
677
  const size = params.size ?? "sm";
663
678
  const sizes = {
664
679
  xs: 14,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.17",
3
+ "version": "2.0.0-beta.19",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",