@tidbcloud/uikit 2.2.2 → 2.2.4
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 +12 -0
- package/dist/theme/theme.cjs +26 -1
- package/dist/theme/theme.mjs +26 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @tidbcloud/uikit
|
|
2
2
|
|
|
3
|
+
## 2.2.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix(theme): Remove unnecessary borderColor from disabled state button styling ([#501](https://github.com/tidbcloud/tidbcloud-uikit/pull/501))
|
|
8
|
+
|
|
9
|
+
## 2.2.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- fix(theme): Enhance Radio and Radio.Indicator styling ([#497](https://github.com/tidbcloud/tidbcloud-uikit/pull/497))
|
|
14
|
+
|
|
3
15
|
## 2.2.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/theme/theme.cjs
CHANGED
|
@@ -244,7 +244,6 @@ const theme = createTheme.createTheme({
|
|
|
244
244
|
},
|
|
245
245
|
"&:disabled, &[data-disabled]": {
|
|
246
246
|
color: themeColor(theme2, "carbon", 6),
|
|
247
|
-
borderColor: themeColor(theme2, "carbon", borderColorShade + 1),
|
|
248
247
|
backgroundColor: themeColor(theme2, "carbon", 2)
|
|
249
248
|
}
|
|
250
249
|
};
|
|
@@ -918,6 +917,7 @@ const theme = createTheme.createTheme({
|
|
|
918
917
|
transform: "var(--radio-icon-transform, scale(0.2))"
|
|
919
918
|
},
|
|
920
919
|
radio: {
|
|
920
|
+
borderColor: themeColor(theme2, "carbon", 6),
|
|
921
921
|
"&:disabled:not(:checked)": {
|
|
922
922
|
background: themeColor(theme2, "carbon", 4),
|
|
923
923
|
borderColor: themeColor(theme2, "carbon", 6),
|
|
@@ -933,6 +933,31 @@ const theme = createTheme.createTheme({
|
|
|
933
933
|
};
|
|
934
934
|
}
|
|
935
935
|
},
|
|
936
|
+
RadioIndicator: {
|
|
937
|
+
styles: (theme2, props) => {
|
|
938
|
+
var _a;
|
|
939
|
+
const color = ((_a = props.color) == null ? void 0 : _a.includes(".")) ? props.color.split(".")[0] : props.color ?? "carbon";
|
|
940
|
+
const shade = color.includes("carbon") ? 9 : 7;
|
|
941
|
+
return {
|
|
942
|
+
indicator: {
|
|
943
|
+
"--radio-color": themeColor(theme2, color, shade) + " !important",
|
|
944
|
+
"--radio-icon-color": props.variant === "outline" ? themeColor(theme2, color, shade) : theme2.white + " !important",
|
|
945
|
+
borderColor: themeColor(theme2, "carbon", 6),
|
|
946
|
+
"&[data-disabled]:not([data-checked])": {
|
|
947
|
+
background: themeColor(theme2, "carbon", 4),
|
|
948
|
+
borderColor: themeColor(theme2, "carbon", 6),
|
|
949
|
+
cursor: "not-allowed"
|
|
950
|
+
},
|
|
951
|
+
"&[data-disabled][data-checked]": {
|
|
952
|
+
color: themeColor(theme2, "carbon", 2),
|
|
953
|
+
background: themeColor(theme2, "carbon", 6),
|
|
954
|
+
borderColor: themeColor(theme2, "carbon", 6),
|
|
955
|
+
cursor: "not-allowed"
|
|
956
|
+
}
|
|
957
|
+
}
|
|
958
|
+
};
|
|
959
|
+
}
|
|
960
|
+
},
|
|
936
961
|
SegmentedControl: {
|
|
937
962
|
styles: (theme2) => {
|
|
938
963
|
return {
|
package/dist/theme/theme.mjs
CHANGED
|
@@ -242,7 +242,6 @@ const theme = createTheme({
|
|
|
242
242
|
},
|
|
243
243
|
"&:disabled, &[data-disabled]": {
|
|
244
244
|
color: themeColor(theme2, "carbon", 6),
|
|
245
|
-
borderColor: themeColor(theme2, "carbon", borderColorShade + 1),
|
|
246
245
|
backgroundColor: themeColor(theme2, "carbon", 2)
|
|
247
246
|
}
|
|
248
247
|
};
|
|
@@ -916,6 +915,7 @@ const theme = createTheme({
|
|
|
916
915
|
transform: "var(--radio-icon-transform, scale(0.2))"
|
|
917
916
|
},
|
|
918
917
|
radio: {
|
|
918
|
+
borderColor: themeColor(theme2, "carbon", 6),
|
|
919
919
|
"&:disabled:not(:checked)": {
|
|
920
920
|
background: themeColor(theme2, "carbon", 4),
|
|
921
921
|
borderColor: themeColor(theme2, "carbon", 6),
|
|
@@ -931,6 +931,31 @@ const theme = createTheme({
|
|
|
931
931
|
};
|
|
932
932
|
}
|
|
933
933
|
},
|
|
934
|
+
RadioIndicator: {
|
|
935
|
+
styles: (theme2, props) => {
|
|
936
|
+
var _a;
|
|
937
|
+
const color = ((_a = props.color) == null ? void 0 : _a.includes(".")) ? props.color.split(".")[0] : props.color ?? "carbon";
|
|
938
|
+
const shade = color.includes("carbon") ? 9 : 7;
|
|
939
|
+
return {
|
|
940
|
+
indicator: {
|
|
941
|
+
"--radio-color": themeColor(theme2, color, shade) + " !important",
|
|
942
|
+
"--radio-icon-color": props.variant === "outline" ? themeColor(theme2, color, shade) : theme2.white + " !important",
|
|
943
|
+
borderColor: themeColor(theme2, "carbon", 6),
|
|
944
|
+
"&[data-disabled]:not([data-checked])": {
|
|
945
|
+
background: themeColor(theme2, "carbon", 4),
|
|
946
|
+
borderColor: themeColor(theme2, "carbon", 6),
|
|
947
|
+
cursor: "not-allowed"
|
|
948
|
+
},
|
|
949
|
+
"&[data-disabled][data-checked]": {
|
|
950
|
+
color: themeColor(theme2, "carbon", 2),
|
|
951
|
+
background: themeColor(theme2, "carbon", 6),
|
|
952
|
+
borderColor: themeColor(theme2, "carbon", 6),
|
|
953
|
+
cursor: "not-allowed"
|
|
954
|
+
}
|
|
955
|
+
}
|
|
956
|
+
};
|
|
957
|
+
}
|
|
958
|
+
},
|
|
934
959
|
SegmentedControl: {
|
|
935
960
|
styles: (theme2) => {
|
|
936
961
|
return {
|