@tidbcloud/uikit 2.2.2 → 2.2.3

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.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(theme): Enhance Radio and Radio.Indicator styling ([#497](https://github.com/tidbcloud/tidbcloud-uikit/pull/497))
8
+
3
9
  ## 2.2.2
4
10
 
5
11
  ### Patch Changes
@@ -918,6 +918,7 @@ const theme = createTheme.createTheme({
918
918
  transform: "var(--radio-icon-transform, scale(0.2))"
919
919
  },
920
920
  radio: {
921
+ borderColor: themeColor(theme2, "carbon", 6),
921
922
  "&:disabled:not(:checked)": {
922
923
  background: themeColor(theme2, "carbon", 4),
923
924
  borderColor: themeColor(theme2, "carbon", 6),
@@ -933,6 +934,31 @@ const theme = createTheme.createTheme({
933
934
  };
934
935
  }
935
936
  },
937
+ RadioIndicator: {
938
+ styles: (theme2, props) => {
939
+ var _a;
940
+ const color = ((_a = props.color) == null ? void 0 : _a.includes(".")) ? props.color.split(".")[0] : props.color ?? "carbon";
941
+ const shade = color.includes("carbon") ? 9 : 7;
942
+ return {
943
+ indicator: {
944
+ "--radio-color": themeColor(theme2, color, shade) + " !important",
945
+ "--radio-icon-color": props.variant === "outline" ? themeColor(theme2, color, shade) : theme2.white + " !important",
946
+ borderColor: themeColor(theme2, "carbon", 6),
947
+ "&[data-disabled]:not([data-checked])": {
948
+ background: themeColor(theme2, "carbon", 4),
949
+ borderColor: themeColor(theme2, "carbon", 6),
950
+ cursor: "not-allowed"
951
+ },
952
+ "&[data-disabled][data-checked]": {
953
+ color: themeColor(theme2, "carbon", 2),
954
+ background: themeColor(theme2, "carbon", 6),
955
+ borderColor: themeColor(theme2, "carbon", 6),
956
+ cursor: "not-allowed"
957
+ }
958
+ }
959
+ };
960
+ }
961
+ },
936
962
  SegmentedControl: {
937
963
  styles: (theme2) => {
938
964
  return {
@@ -916,6 +916,7 @@ const theme = createTheme({
916
916
  transform: "var(--radio-icon-transform, scale(0.2))"
917
917
  },
918
918
  radio: {
919
+ borderColor: themeColor(theme2, "carbon", 6),
919
920
  "&:disabled:not(:checked)": {
920
921
  background: themeColor(theme2, "carbon", 4),
921
922
  borderColor: themeColor(theme2, "carbon", 6),
@@ -931,6 +932,31 @@ const theme = createTheme({
931
932
  };
932
933
  }
933
934
  },
935
+ RadioIndicator: {
936
+ styles: (theme2, props) => {
937
+ var _a;
938
+ const color = ((_a = props.color) == null ? void 0 : _a.includes(".")) ? props.color.split(".")[0] : props.color ?? "carbon";
939
+ const shade = color.includes("carbon") ? 9 : 7;
940
+ return {
941
+ indicator: {
942
+ "--radio-color": themeColor(theme2, color, shade) + " !important",
943
+ "--radio-icon-color": props.variant === "outline" ? themeColor(theme2, color, shade) : theme2.white + " !important",
944
+ borderColor: themeColor(theme2, "carbon", 6),
945
+ "&[data-disabled]:not([data-checked])": {
946
+ background: themeColor(theme2, "carbon", 4),
947
+ borderColor: themeColor(theme2, "carbon", 6),
948
+ cursor: "not-allowed"
949
+ },
950
+ "&[data-disabled][data-checked]": {
951
+ color: themeColor(theme2, "carbon", 2),
952
+ background: themeColor(theme2, "carbon", 6),
953
+ borderColor: themeColor(theme2, "carbon", 6),
954
+ cursor: "not-allowed"
955
+ }
956
+ }
957
+ };
958
+ }
959
+ },
934
960
  SegmentedControl: {
935
961
  styles: (theme2) => {
936
962
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.2.2",
3
+ "version": "2.2.3",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",