@tidbcloud/uikit 2.0.0-beta.13 → 2.0.0-beta.15

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/biz/Table/ProTable/ProTable.cjs +22 -15
  3. package/dist/biz/Table/ProTable/ProTable.js +22 -15
  4. package/dist/theme/theme.cjs +40 -11
  5. package/dist/theme/theme.js +40 -11
  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.15
4
+
5
+ ### Minor Changes
6
+
7
+ - Update NavLink/SegmentedControl/Tabs style
8
+
9
+ ## 2.0.0-beta.14
10
+
11
+ ### Minor Changes
12
+
13
+ - update ProTable style
14
+
3
15
  ## 2.0.0-beta.13
4
16
 
5
17
  ### Patch Changes
package/dist/biz/Table/ProTable/ProTable.cjs CHANGED
@@ -7,6 +7,7 @@ const ArrowUp = require("../../../icons/react/ArrowUp.cjs");
7
7
  const SwitchVertical02 = require("../../../icons/react/SwitchVertical02.cjs");
8
8
  const TablePagination = require("../TablePagination.cjs");
9
9
  const helpers = require("./helpers.cjs");
10
+ const MantineProvider = require("../../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.cjs");
10
11
  const Box = require("../../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
11
12
  const ProTable = ({
12
13
  mantineTableProps = {},
@@ -28,13 +29,14 @@ const ProTable = ({
28
29
  state,
29
30
  ...rest
30
31
  }) => {
32
+ const theme = MantineProvider.useMantineTheme();
31
33
  const mPaperProps = helpers.mergeMProps(
32
34
  {
33
35
  shadow: "none",
34
36
  withBorder,
35
- sx: (theme) => ({
37
+ sx: (theme2) => ({
36
38
  backgroundColor: "inherit",
37
- borderRadius: withBorder ? theme.defaultRadius : 0,
39
+ borderRadius: withBorder ? theme2.defaultRadius : 0,
38
40
  overflow: "hidden",
39
41
  transition: "none",
40
42
  "& ::-webkit-scrollbar": enableStickyHeader ? {
@@ -55,18 +57,23 @@ const ProTable = ({
55
57
  color: "inherit",
56
58
  thead: {
57
59
  tr: {
58
- boxShadow: "none"
60
+ boxShadow: "none",
61
+ th: {
62
+ color: theme.colors.carbon[7],
63
+ backgroundColor: theme.colors.carbon[1],
64
+ fontWeight: 500
65
+ }
59
66
  }
60
67
  },
61
- "thead th": {
62
- backgroundColor: "inherit"
63
- },
64
- tr: {
65
- transition: "none",
66
- backgroundColor: "inherit",
67
- ":last-of-type": {
68
- td: {
69
- borderBottom: "none"
68
+ tbody: {
69
+ tr: {
70
+ transition: "none",
71
+ backgroundColor: theme.colors.carbon[0],
72
+ color: theme.colors.carbon[8],
73
+ ":last-of-type": {
74
+ td: {
75
+ borderBottom: "none"
76
+ }
70
77
  }
71
78
  }
72
79
  }
@@ -89,11 +96,11 @@ const ProTable = ({
89
96
  }, mantineTableBodyProps);
90
97
  const mBottomToolbarProps = helpers.mergeMProps(
91
98
  {
92
- sx: (theme) => ({
99
+ sx: (theme2) => ({
93
100
  backgroundColor: "inherit",
94
101
  transition: "none",
95
- borderBottomLeftRadius: withBorder ? theme.defaultRadius : void 0,
96
- borderBottomRightRadius: withBorder ? theme.defaultRadius : void 0
102
+ borderBottomLeftRadius: withBorder ? theme2.defaultRadius : void 0,
103
+ borderBottomRightRadius: withBorder ? theme2.defaultRadius : void 0
97
104
  })
98
105
  },
99
106
  mantineBottomToolbarProps
package/dist/biz/Table/ProTable/ProTable.js CHANGED
@@ -5,6 +5,7 @@ import IconArrowUp from "../../../icons/react/ArrowUp.js";
5
5
  import IconSwitchVertical02 from "../../../icons/react/SwitchVertical02.js";
6
6
  import { TablePagination } from "../TablePagination.js";
7
7
  import { mergeMProps } from "./helpers.js";
8
+ import { useMantineTheme } from "../../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.js";
8
9
  import { Box } from "../../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
9
10
  const ProTable = ({
10
11
  mantineTableProps = {},
@@ -26,13 +27,14 @@ const ProTable = ({
26
27
  state,
27
28
  ...rest
28
29
  }) => {
30
+ const theme = useMantineTheme();
29
31
  const mPaperProps = mergeMProps(
30
32
  {
31
33
  shadow: "none",
32
34
  withBorder,
33
- sx: (theme) => ({
35
+ sx: (theme2) => ({
34
36
  backgroundColor: "inherit",
35
- borderRadius: withBorder ? theme.defaultRadius : 0,
37
+ borderRadius: withBorder ? theme2.defaultRadius : 0,
36
38
  overflow: "hidden",
37
39
  transition: "none",
38
40
  "& ::-webkit-scrollbar": enableStickyHeader ? {
@@ -53,18 +55,23 @@ const ProTable = ({
53
55
  color: "inherit",
54
56
  thead: {
55
57
  tr: {
56
- boxShadow: "none"
58
+ boxShadow: "none",
59
+ th: {
60
+ color: theme.colors.carbon[7],
61
+ backgroundColor: theme.colors.carbon[1],
62
+ fontWeight: 500
63
+ }
57
64
  }
58
65
  },
59
- "thead th": {
60
- backgroundColor: "inherit"
61
- },
62
- tr: {
63
- transition: "none",
64
- backgroundColor: "inherit",
65
- ":last-of-type": {
66
- td: {
67
- borderBottom: "none"
66
+ tbody: {
67
+ tr: {
68
+ transition: "none",
69
+ backgroundColor: theme.colors.carbon[0],
70
+ color: theme.colors.carbon[8],
71
+ ":last-of-type": {
72
+ td: {
73
+ borderBottom: "none"
74
+ }
68
75
  }
69
76
  }
70
77
  }
@@ -87,11 +94,11 @@ const ProTable = ({
87
94
  }, mantineTableBodyProps);
88
95
  const mBottomToolbarProps = mergeMProps(
89
96
  {
90
- sx: (theme) => ({
97
+ sx: (theme2) => ({
91
98
  backgroundColor: "inherit",
92
99
  transition: "none",
93
- borderBottomLeftRadius: withBorder ? theme.defaultRadius : void 0,
94
- borderBottomRightRadius: withBorder ? theme.defaultRadius : void 0
100
+ borderBottomLeftRadius: withBorder ? theme2.defaultRadius : void 0,
101
+ borderBottomRightRadius: withBorder ? theme2.defaultRadius : void 0
95
102
  })
96
103
  },
97
104
  mantineBottomToolbarProps
package/dist/theme/theme.cjs CHANGED
@@ -257,8 +257,11 @@ const theme = {
257
257
  fontWeight: 600,
258
258
  paddingLeft: 0,
259
259
  paddingRight: 0,
260
- "&[data-active]": {},
260
+ "&[data-active]": {
261
+ color: theme2.colors.carbon[9]
262
+ },
261
263
  "&:hover": {
264
+ color: theme2.colors.carbon[9],
262
265
  background: "transparent",
263
266
  borderColor: "transparent"
264
267
  },
@@ -325,25 +328,26 @@ const theme = {
325
328
  fw: 500
326
329
  },
327
330
  styles: (theme2, params) => {
331
+ const color = params.color || theme2.primaryColor;
328
332
  const rootStyles = {
329
333
  light: {
330
- color: theme2.colors.carbon[8],
334
+ color: theme2.colors.carbon[7],
331
335
  "&:hover": {
332
- color: theme2.colors.carbon[8],
333
- backgroundColor: theme2.colors.carbon[3]
336
+ color: theme2.colors.carbon[7],
337
+ backgroundColor: theme2.colors.carbon[2]
334
338
  },
335
339
  "&:active": {
336
- color: theme2.colors.carbon[8],
337
- backgroundColor: theme2.colors.carbon[4]
340
+ color: theme2.colors[color][8],
341
+ backgroundColor: theme2.colors[color][4]
338
342
  },
339
343
  "&[data-active]": {
340
- color: theme2.colors.peacock[7],
341
- backgroundColor: theme2.colors.peacock[2],
344
+ color: theme2.colors[color][9],
345
+ backgroundColor: theme2.colors[color][4],
342
346
  "&:hover": {
343
- backgroundColor: theme2.colors.peacock[2]
347
+ backgroundColor: theme2.colors[color][4]
344
348
  },
345
349
  "&:active": {
346
- backgroundColor: theme2.colors.peacock[2]
350
+ backgroundColor: theme2.colors[color][4]
347
351
  }
348
352
  }
349
353
  }
@@ -549,7 +553,7 @@ const theme = {
549
553
  },
550
554
  styles: (theme2, params) => ({
551
555
  root: {
552
- backgroundColor: theme2.colorScheme === "dark" ? theme2.colors.carbon[1] : theme2.white,
556
+ backgroundColor: theme2.colors.carbon[0],
553
557
  border: params.withBorder ? `1px solid ${theme2.colors.carbon[3]}` : void 0
554
558
  }
555
559
  })
@@ -690,6 +694,31 @@ const theme = {
690
694
  }
691
695
  };
692
696
  }
697
+ },
698
+ SegmentedControl: {
699
+ styles: (theme2) => {
700
+ return {
701
+ root: {
702
+ backgroundColor: theme2.colors.carbon[4]
703
+ },
704
+ active: {
705
+ borderRadius: 6,
706
+ backgroundColor: theme2.colors.carbon[0]
707
+ },
708
+ labelActive: {
709
+ color: `${theme2.colors.carbon[9]} !important`
710
+ },
711
+ label: {
712
+ color: `${theme2.colors.carbon[7]} !important`
713
+ },
714
+ disabled: {
715
+ color: `${theme2.colors.carbon[6]} !important`
716
+ },
717
+ control: {
718
+ borderColor: `${theme2.colors.carbon[5]} !important`
719
+ }
720
+ };
721
+ }
693
722
  }
694
723
  }
695
724
  };
package/dist/theme/theme.js CHANGED
@@ -255,8 +255,11 @@ const theme = {
255
255
  fontWeight: 600,
256
256
  paddingLeft: 0,
257
257
  paddingRight: 0,
258
- "&[data-active]": {},
258
+ "&[data-active]": {
259
+ color: theme2.colors.carbon[9]
260
+ },
259
261
  "&:hover": {
262
+ color: theme2.colors.carbon[9],
260
263
  background: "transparent",
261
264
  borderColor: "transparent"
262
265
  },
@@ -323,25 +326,26 @@ const theme = {
323
326
  fw: 500
324
327
  },
325
328
  styles: (theme2, params) => {
329
+ const color = params.color || theme2.primaryColor;
326
330
  const rootStyles = {
327
331
  light: {
328
- color: theme2.colors.carbon[8],
332
+ color: theme2.colors.carbon[7],
329
333
  "&:hover": {
330
- color: theme2.colors.carbon[8],
331
- backgroundColor: theme2.colors.carbon[3]
334
+ color: theme2.colors.carbon[7],
335
+ backgroundColor: theme2.colors.carbon[2]
332
336
  },
333
337
  "&:active": {
334
- color: theme2.colors.carbon[8],
335
- backgroundColor: theme2.colors.carbon[4]
338
+ color: theme2.colors[color][8],
339
+ backgroundColor: theme2.colors[color][4]
336
340
  },
337
341
  "&[data-active]": {
338
- color: theme2.colors.peacock[7],
339
- backgroundColor: theme2.colors.peacock[2],
342
+ color: theme2.colors[color][9],
343
+ backgroundColor: theme2.colors[color][4],
340
344
  "&:hover": {
341
- backgroundColor: theme2.colors.peacock[2]
345
+ backgroundColor: theme2.colors[color][4]
342
346
  },
343
347
  "&:active": {
344
- backgroundColor: theme2.colors.peacock[2]
348
+ backgroundColor: theme2.colors[color][4]
345
349
  }
346
350
  }
347
351
  }
@@ -547,7 +551,7 @@ const theme = {
547
551
  },
548
552
  styles: (theme2, params) => ({
549
553
  root: {
550
- backgroundColor: theme2.colorScheme === "dark" ? theme2.colors.carbon[1] : theme2.white,
554
+ backgroundColor: theme2.colors.carbon[0],
551
555
  border: params.withBorder ? `1px solid ${theme2.colors.carbon[3]}` : void 0
552
556
  }
553
557
  })
@@ -688,6 +692,31 @@ const theme = {
688
692
  }
689
693
  };
690
694
  }
695
+ },
696
+ SegmentedControl: {
697
+ styles: (theme2) => {
698
+ return {
699
+ root: {
700
+ backgroundColor: theme2.colors.carbon[4]
701
+ },
702
+ active: {
703
+ borderRadius: 6,
704
+ backgroundColor: theme2.colors.carbon[0]
705
+ },
706
+ labelActive: {
707
+ color: `${theme2.colors.carbon[9]} !important`
708
+ },
709
+ label: {
710
+ color: `${theme2.colors.carbon[7]} !important`
711
+ },
712
+ disabled: {
713
+ color: `${theme2.colors.carbon[6]} !important`
714
+ },
715
+ control: {
716
+ borderColor: `${theme2.colors.carbon[5]} !important`
717
+ }
718
+ };
719
+ }
691
720
  }
692
721
  }
693
722
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.13",
3
+ "version": "2.0.0-beta.15",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",