@tidbcloud/uikit 2.0.0-beta.18 → 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 +6 -0
  2. package/dist/theme/colors.cjs +2 -2
  3. package/dist/theme/colors.js +2 -2
  4. package/dist/theme/theme.cjs +38 -34
  5. package/dist/theme/theme.js +38 -34
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.19
4
+
5
+ ### Minor Changes
6
+
7
+ - Adjust theme colors in components
8
+
3
9
  ## 2.0.0-beta.18
4
10
 
5
11
  ### 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
  }
@@ -508,7 +512,6 @@ const theme = {
508
512
  },
509
513
  Badge: {
510
514
  styles(theme2, params) {
511
- const color = params.color ?? theme2.primaryColor;
512
515
  const styles = {
513
516
  dot: {
514
517
  border: "none",
@@ -516,8 +519,8 @@ const theme = {
516
519
  fontWeight: 500
517
520
  },
518
521
  outline: {
519
- color: theme2.colors[color][8],
520
- borderColor: theme2.colors[color][4]
522
+ color: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 8),
523
+ borderColor: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 4)
521
524
  }
522
525
  };
523
526
  return {
@@ -529,14 +532,14 @@ const theme = {
529
532
  },
530
533
  Checkbox: {
531
534
  styles(theme2, params) {
532
- const color = params.color ?? theme2.primaryColor;
535
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
533
536
  return {
534
537
  input: {
535
538
  borderRadius: 4,
536
- borderColor: theme2.colors[color][6],
539
+ borderColor: withThemeColor(6),
537
540
  "&:checked:not(:disabled)": {
538
- backgroundColor: theme2.colors[color][9],
539
- borderColor: theme2.colors[color][9]
541
+ backgroundColor: withThemeColor(9),
542
+ borderColor: withThemeColor(9)
540
543
  },
541
544
  "&:disabled:checked": {
542
545
  backgroundColor: theme2.colors.carbon[6],
@@ -544,7 +547,7 @@ const theme = {
544
547
  }
545
548
  },
546
549
  label: {
547
- color: theme2.colors[color][8],
550
+ color: withThemeColor(8),
548
551
  "&[data-disabled]": {
549
552
  color: theme2.colors.carbon[6]
550
553
  }
@@ -670,8 +673,9 @@ const theme = {
670
673
  },
671
674
  Radio: {
672
675
  styles(theme2, params) {
673
- const color = params.color ?? "carbon";
674
- 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;
675
679
  const size = params.size ?? "sm";
676
680
  const sizes = {
677
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,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
  }
@@ -506,7 +510,6 @@ const theme = {
506
510
  },
507
511
  Badge: {
508
512
  styles(theme2, params) {
509
- const color = params.color ?? theme2.primaryColor;
510
513
  const styles = {
511
514
  dot: {
512
515
  border: "none",
@@ -514,8 +517,8 @@ const theme = {
514
517
  fontWeight: 500
515
518
  },
516
519
  outline: {
517
- color: theme2.colors[color][8],
518
- borderColor: theme2.colors[color][4]
520
+ color: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 8),
521
+ borderColor: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 4)
519
522
  }
520
523
  };
521
524
  return {
@@ -527,14 +530,14 @@ const theme = {
527
530
  },
528
531
  Checkbox: {
529
532
  styles(theme2, params) {
530
- const color = params.color ?? theme2.primaryColor;
533
+ const withThemeColor = (shade) => theme2.fn.themeColor(params.color ?? theme2.primaryColor, shade);
531
534
  return {
532
535
  input: {
533
536
  borderRadius: 4,
534
- borderColor: theme2.colors[color][6],
537
+ borderColor: withThemeColor(6),
535
538
  "&:checked:not(:disabled)": {
536
- backgroundColor: theme2.colors[color][9],
537
- borderColor: theme2.colors[color][9]
539
+ backgroundColor: withThemeColor(9),
540
+ borderColor: withThemeColor(9)
538
541
  },
539
542
  "&:disabled:checked": {
540
543
  backgroundColor: theme2.colors.carbon[6],
@@ -542,7 +545,7 @@ const theme = {
542
545
  }
543
546
  },
544
547
  label: {
545
- color: theme2.colors[color][8],
548
+ color: withThemeColor(8),
546
549
  "&[data-disabled]": {
547
550
  color: theme2.colors.carbon[6]
548
551
  }
@@ -668,8 +671,9 @@ const theme = {
668
671
  },
669
672
  Radio: {
670
673
  styles(theme2, params) {
671
- const color = params.color ?? "carbon";
672
- 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;
673
677
  const size = params.size ?? "sm";
674
678
  const sizes = {
675
679
  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.19",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",