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

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.20
4
+
5
+ ### Minor Changes
6
+
7
+ - Update badge styles
8
+
3
9
  ## 2.0.0-beta.19
4
10
 
5
11
  ### Minor Changes
@@ -512,15 +512,38 @@ const theme = {
512
512
  },
513
513
  Badge: {
514
514
  styles(theme2, params) {
515
+ const color = params.color ?? theme2.primaryColor;
516
+ const mainShade = color.includes("carbon") ? 9 : 7;
517
+ const sizes = {
518
+ xs: 11,
519
+ sm: 12,
520
+ md: 13,
521
+ lg: 14,
522
+ xl: 16
523
+ };
515
524
  const styles = {
516
525
  dot: {
517
526
  border: "none",
518
527
  textTransform: "capitalize",
519
- fontWeight: 500
528
+ fontWeight: 500,
529
+ fontSize: theme2.fn.size({ sizes, size: params.size }),
530
+ backgroundColor: "transparent",
531
+ color: theme2.fn.themeColor(theme2.primaryColor, 9),
532
+ "&:before": {
533
+ backgroundColor: theme2.fn.themeColor(color, 7)
534
+ }
520
535
  },
521
536
  outline: {
522
- color: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 8),
523
- borderColor: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 4)
537
+ color: theme2.fn.themeColor(color, mainShade),
538
+ borderColor: theme2.fn.themeColor(color, 4)
539
+ },
540
+ light: {
541
+ backgroundColor: theme2.fn.themeColor(color, 1),
542
+ color: theme2.fn.themeColor(color, mainShade)
543
+ },
544
+ filled: {
545
+ backgroundColor: theme2.fn.themeColor(color, mainShade),
546
+ color: theme2.white
524
547
  }
525
548
  };
526
549
  return {
@@ -510,15 +510,38 @@ const theme = {
510
510
  },
511
511
  Badge: {
512
512
  styles(theme2, params) {
513
+ const color = params.color ?? theme2.primaryColor;
514
+ const mainShade = color.includes("carbon") ? 9 : 7;
515
+ const sizes = {
516
+ xs: 11,
517
+ sm: 12,
518
+ md: 13,
519
+ lg: 14,
520
+ xl: 16
521
+ };
513
522
  const styles = {
514
523
  dot: {
515
524
  border: "none",
516
525
  textTransform: "capitalize",
517
- fontWeight: 500
526
+ fontWeight: 500,
527
+ fontSize: theme2.fn.size({ sizes, size: params.size }),
528
+ backgroundColor: "transparent",
529
+ color: theme2.fn.themeColor(theme2.primaryColor, 9),
530
+ "&:before": {
531
+ backgroundColor: theme2.fn.themeColor(color, 7)
532
+ }
518
533
  },
519
534
  outline: {
520
- color: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 8),
521
- borderColor: theme2.fn.themeColor(params.color ?? theme2.primaryColor, 4)
535
+ color: theme2.fn.themeColor(color, mainShade),
536
+ borderColor: theme2.fn.themeColor(color, 4)
537
+ },
538
+ light: {
539
+ backgroundColor: theme2.fn.themeColor(color, 1),
540
+ color: theme2.fn.themeColor(color, mainShade)
541
+ },
542
+ filled: {
543
+ backgroundColor: theme2.fn.themeColor(color, mainShade),
544
+ color: theme2.white
522
545
  }
523
546
  };
524
547
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.19",
3
+ "version": "2.0.0-beta.20",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",