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

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 +6 -0
  2. package/dist/theme/theme.cjs +40 -29
  3. package/dist/theme/theme.js +40 -29
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.18
4
+
5
+ ### Minor Changes
6
+
7
+ - Update Menu/Checkbox/Badge/Paper style
8
+
3
9
  ## 2.0.0-beta.17
4
10
 
5
11
  ### Patch Changes
package/dist/theme/theme.cjs CHANGED
@@ -298,22 +298,15 @@ const theme = {
298
298
  item: {
299
299
  transition: "background 150ms ease-in-out",
300
300
  color: theme2.colors.carbon[8],
301
- "&[data-hovered], &:hover": {
302
- color: theme2.colors.carbon[8],
303
- backgroundColor: theme2.colors.carbon[3],
301
+ "&:hover": {
302
+ backgroundColor: theme2.colors.carbon[2],
304
303
  textDecoration: "none"
305
304
  },
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],
305
+ "&:disabled": {
306
+ color: theme2.colors.carbon[5],
314
307
  userSelect: "none",
315
308
  cursor: "not-allowed",
316
- "&[data-hovered], &:hover": {
309
+ "&:hover": {
317
310
  color: theme2.colors.carbon[6],
318
311
  backgroundColor: "transparent"
319
312
  }
@@ -515,24 +508,46 @@ const theme = {
515
508
  },
516
509
  Badge: {
517
510
  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
- }
511
+ const color = params.color ?? theme2.primaryColor;
512
+ const styles = {
513
+ dot: {
514
+ border: "none",
515
+ textTransform: "capitalize",
516
+ fontWeight: 500
517
+ },
518
+ outline: {
519
+ color: theme2.colors[color][8],
520
+ borderColor: theme2.colors[color][4]
521
+ }
522
+ };
523
+ return {
524
+ root: {
525
+ ...styles[params.variant]
526
+ }
527
+ };
529
528
  }
530
529
  },
531
530
  Checkbox: {
532
- styles() {
531
+ styles(theme2, params) {
532
+ const color = params.color ?? theme2.primaryColor;
533
533
  return {
534
534
  input: {
535
- borderRadius: 4
535
+ borderRadius: 4,
536
+ borderColor: theme2.colors[color][6],
537
+ "&:checked:not(:disabled)": {
538
+ backgroundColor: theme2.colors[color][9],
539
+ borderColor: theme2.colors[color][9]
540
+ },
541
+ "&:disabled:checked": {
542
+ backgroundColor: theme2.colors.carbon[6],
543
+ borderColor: theme2.colors.carbon[6]
544
+ }
545
+ },
546
+ label: {
547
+ color: theme2.colors[color][8],
548
+ "&[data-disabled]": {
549
+ color: theme2.colors.carbon[6]
550
+ }
536
551
  }
537
552
  };
538
553
  }
@@ -560,10 +575,6 @@ const theme = {
560
575
  }
561
576
  },
562
577
  Paper: {
563
- defaultProps: {
564
- shadow: "xs",
565
- withBorder: true
566
- },
567
578
  styles: (theme2, params) => {
568
579
  return {
569
580
  root: {
package/dist/theme/theme.js CHANGED
@@ -296,22 +296,15 @@ const theme = {
296
296
  item: {
297
297
  transition: "background 150ms ease-in-out",
298
298
  color: theme2.colors.carbon[8],
299
- "&[data-hovered], &:hover": {
300
- color: theme2.colors.carbon[8],
301
- backgroundColor: theme2.colors.carbon[3],
299
+ "&:hover": {
300
+ backgroundColor: theme2.colors.carbon[2],
302
301
  textDecoration: "none"
303
302
  },
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],
303
+ "&:disabled": {
304
+ color: theme2.colors.carbon[5],
312
305
  userSelect: "none",
313
306
  cursor: "not-allowed",
314
- "&[data-hovered], &:hover": {
307
+ "&:hover": {
315
308
  color: theme2.colors.carbon[6],
316
309
  backgroundColor: "transparent"
317
310
  }
@@ -513,24 +506,46 @@ const theme = {
513
506
  },
514
507
  Badge: {
515
508
  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
- }
509
+ const color = params.color ?? theme2.primaryColor;
510
+ const styles = {
511
+ dot: {
512
+ border: "none",
513
+ textTransform: "capitalize",
514
+ fontWeight: 500
515
+ },
516
+ outline: {
517
+ color: theme2.colors[color][8],
518
+ borderColor: theme2.colors[color][4]
519
+ }
520
+ };
521
+ return {
522
+ root: {
523
+ ...styles[params.variant]
524
+ }
525
+ };
527
526
  }
528
527
  },
529
528
  Checkbox: {
530
- styles() {
529
+ styles(theme2, params) {
530
+ const color = params.color ?? theme2.primaryColor;
531
531
  return {
532
532
  input: {
533
- borderRadius: 4
533
+ borderRadius: 4,
534
+ borderColor: theme2.colors[color][6],
535
+ "&:checked:not(:disabled)": {
536
+ backgroundColor: theme2.colors[color][9],
537
+ borderColor: theme2.colors[color][9]
538
+ },
539
+ "&:disabled:checked": {
540
+ backgroundColor: theme2.colors.carbon[6],
541
+ borderColor: theme2.colors.carbon[6]
542
+ }
543
+ },
544
+ label: {
545
+ color: theme2.colors[color][8],
546
+ "&[data-disabled]": {
547
+ color: theme2.colors.carbon[6]
548
+ }
534
549
  }
535
550
  };
536
551
  }
@@ -558,10 +573,6 @@ const theme = {
558
573
  }
559
574
  },
560
575
  Paper: {
561
- defaultProps: {
562
- shadow: "xs",
563
- withBorder: true
564
- },
565
576
  styles: (theme2, params) => {
566
577
  return {
567
578
  root: {
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.18",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",