@tidbcloud/uikit 2.0.0-beta.14 → 2.0.0-beta.16

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 +39 -10
  3. package/dist/theme/theme.js +39 -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.16
4
+
5
+ ### Patch Changes
6
+
7
+ - adjust color and backgroundColor for NavLink
8
+
9
+ ## 2.0.0-beta.15
10
+
11
+ ### Minor Changes
12
+
13
+ - Update NavLink/SegmentedControl/Tabs style
14
+
3
15
  ## 2.0.0-beta.14
4
16
 
5
17
  ### Minor Changes
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[color][8],
331
335
  "&:hover": {
332
- color: theme2.colors.carbon[8],
333
- backgroundColor: theme2.colors.carbon[3]
336
+ color: theme2.colors[color][8],
337
+ backgroundColor: theme2.colors[color][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
  }
@@ -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[color][8],
329
333
  "&:hover": {
330
- color: theme2.colors.carbon[8],
331
- backgroundColor: theme2.colors.carbon[3]
334
+ color: theme2.colors[color][8],
335
+ backgroundColor: theme2.colors[color][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
  }
@@ -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.14",
3
+ "version": "2.0.0-beta.16",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",