@tidbcloud/uikit 2.0.0-beta.26 → 2.0.0-beta.27

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 +20 -21
  3. package/dist/theme/theme.js +20 -21
  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.27
4
+
5
+ ### Minor Changes
6
+
7
+ - Update stepper styles and set dot badge to font weight 400
8
+
3
9
  ## 2.0.0-beta.26
4
10
 
5
11
  ### Patch Changes
package/dist/theme/theme.cjs CHANGED
@@ -369,42 +369,41 @@ const theme = {
369
369
  },
370
370
  Stepper: {
371
371
  styles: (theme2, params) => {
372
- const filledColors = theme2.fn.variant({
373
- variant: "filled",
374
- color: params.color || theme2.primaryColor,
375
- primaryFallback: false
376
- });
377
- const lightColors = theme2.fn.variant({
378
- variant: "light",
379
- color: params.color || theme2.primaryColor,
380
- primaryFallback: false
381
- });
372
+ const color = params.color || theme2.primaryColor;
382
373
  return {
383
374
  stepIcon: {
384
- backgroundColor: theme2.colors.carbon[1],
385
- borderColor: theme2.colors.carbon[4],
386
- color: theme2.colors.carbon[8],
375
+ backgroundColor: theme2.fn.themeColor(color, 0),
376
+ borderColor: theme2.fn.themeColor(color, 4),
377
+ color: theme2.fn.themeColor(color, 7),
387
378
  "&[data-progress]": {
388
- backgroundColor: filledColors.background,
389
- color: filledColors.color
379
+ backgroundColor: theme2.fn.themeColor(color, 9),
380
+ color: theme2.fn.themeColor(color, 0),
381
+ borderColor: theme2.fn.themeColor(color, 9)
390
382
  },
391
383
  "&[data-completed]": {
392
- backgroundColor: lightColors.background,
393
- color: lightColors.color
384
+ backgroundColor: theme2.fn.themeColor(color, 3),
385
+ color: theme2.fn.themeColor(color, 9),
386
+ borderColor: theme2.fn.themeColor(color, 9)
394
387
  }
395
388
  },
396
389
  stepCompletedIcon: {
397
- color: lightColors.color,
390
+ color: theme2.fn.themeColor(color, 9),
398
391
  "> svg": {
399
392
  width: 14,
400
393
  height: 14
401
394
  }
402
395
  },
403
396
  separator: {
404
- borderColor: theme2.colors.carbon[4]
397
+ backgroundColor: theme2.fn.themeColor(color, 4)
398
+ },
399
+ separatorActive: {
400
+ backgroundColor: theme2.fn.themeColor(color, 9)
405
401
  },
406
402
  verticalSeparator: {
407
- borderColor: theme2.colors.carbon[4]
403
+ backgroundColor: theme2.fn.themeColor(color, 4)
404
+ },
405
+ verticalSeparatorActive: {
406
+ backgroundColor: theme2.fn.themeColor(color, 9)
408
407
  }
409
408
  };
410
409
  }
@@ -536,7 +535,7 @@ const theme = {
536
535
  dot: {
537
536
  border: "none",
538
537
  textTransform: "capitalize",
539
- fontWeight: 500,
538
+ fontWeight: 400,
540
539
  fontSize: theme2.fn.size({ sizes, size: params.size }),
541
540
  backgroundColor: "transparent",
542
541
  color: theme2.fn.themeColor(theme2.primaryColor, 8),
package/dist/theme/theme.js CHANGED
@@ -367,42 +367,41 @@ const theme = {
367
367
  },
368
368
  Stepper: {
369
369
  styles: (theme2, params) => {
370
- const filledColors = theme2.fn.variant({
371
- variant: "filled",
372
- color: params.color || theme2.primaryColor,
373
- primaryFallback: false
374
- });
375
- const lightColors = theme2.fn.variant({
376
- variant: "light",
377
- color: params.color || theme2.primaryColor,
378
- primaryFallback: false
379
- });
370
+ const color = params.color || theme2.primaryColor;
380
371
  return {
381
372
  stepIcon: {
382
- backgroundColor: theme2.colors.carbon[1],
383
- borderColor: theme2.colors.carbon[4],
384
- color: theme2.colors.carbon[8],
373
+ backgroundColor: theme2.fn.themeColor(color, 0),
374
+ borderColor: theme2.fn.themeColor(color, 4),
375
+ color: theme2.fn.themeColor(color, 7),
385
376
  "&[data-progress]": {
386
- backgroundColor: filledColors.background,
387
- color: filledColors.color
377
+ backgroundColor: theme2.fn.themeColor(color, 9),
378
+ color: theme2.fn.themeColor(color, 0),
379
+ borderColor: theme2.fn.themeColor(color, 9)
388
380
  },
389
381
  "&[data-completed]": {
390
- backgroundColor: lightColors.background,
391
- color: lightColors.color
382
+ backgroundColor: theme2.fn.themeColor(color, 3),
383
+ color: theme2.fn.themeColor(color, 9),
384
+ borderColor: theme2.fn.themeColor(color, 9)
392
385
  }
393
386
  },
394
387
  stepCompletedIcon: {
395
- color: lightColors.color,
388
+ color: theme2.fn.themeColor(color, 9),
396
389
  "> svg": {
397
390
  width: 14,
398
391
  height: 14
399
392
  }
400
393
  },
401
394
  separator: {
402
- borderColor: theme2.colors.carbon[4]
395
+ backgroundColor: theme2.fn.themeColor(color, 4)
396
+ },
397
+ separatorActive: {
398
+ backgroundColor: theme2.fn.themeColor(color, 9)
403
399
  },
404
400
  verticalSeparator: {
405
- borderColor: theme2.colors.carbon[4]
401
+ backgroundColor: theme2.fn.themeColor(color, 4)
402
+ },
403
+ verticalSeparatorActive: {
404
+ backgroundColor: theme2.fn.themeColor(color, 9)
406
405
  }
407
406
  };
408
407
  }
@@ -534,7 +533,7 @@ const theme = {
534
533
  dot: {
535
534
  border: "none",
536
535
  textTransform: "capitalize",
537
- fontWeight: 500,
536
+ fontWeight: 400,
538
537
  fontSize: theme2.fn.size({ sizes, size: params.size }),
539
538
  backgroundColor: "transparent",
540
539
  color: theme2.fn.themeColor(theme2.primaryColor, 8),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.26",
3
+ "version": "2.0.0-beta.27",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",