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

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 (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/biz/PhoneInput/index.cjs +31 -19
  3. package/dist/biz/PhoneInput/index.js +31 -19
  4. package/dist/biz/PhoneInput/styles.cjs +13 -13
  5. package/dist/biz/PhoneInput/styles.js +13 -13
  6. package/dist/primitive/TextInput/TextInput.cjs +1 -1
  7. package/dist/primitive/TextInput/TextInput.js +1 -1
  8. package/dist/theme/theme.cjs +58 -13
  9. package/dist/theme/theme.js +58 -13
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.29
4
+
5
+ ### Minor Changes
6
+
7
+ - Update Button padding and font weight, TextInput description use color carbon.7
8
+
9
+ ## 2.0.0-beta.28
10
+
11
+ ### Minor Changes
12
+
13
+ - Update Input/Select/PhoneInput styles
14
+
3
15
  ## 2.0.0-beta.27
4
16
 
5
17
  ### Minor Changes
package/dist/biz/PhoneInput/index.cjs CHANGED
@@ -7,6 +7,7 @@ const styles$1 = require("../../utils/styles.cjs");
7
7
  const styles = require("./styles.cjs");
8
8
  const useInputProps = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Input/use-input-props.cjs");
9
9
  const Input = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Input/Input.cjs");
10
+ const MantineProvider = require("../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.cjs");
10
11
  const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
11
12
  const ReactPhoneInput = ReactPhoneInput2.default ? ReactPhoneInput2.default : ReactPhoneInput2;
12
13
  const PhoneInput = (props) => {
@@ -28,26 +29,37 @@ const PhoneInput = (props) => {
28
29
  ...rest
29
30
  } = props;
30
31
  const [isPhoneInputFocus, setIsPhoneInputFocus] = React.useState(false);
31
- return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Input.Input.Wrapper, { ...wrapperProps, styles: styles$1.mergeStylesList([wrapperProps.styles, { label: { marginBottom: 8 } }]), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
32
- ReactPhoneInput,
32
+ const theme = MantineProvider.useMantineTheme();
33
+ return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
34
+ Input.Input.Wrapper,
33
35
  {
34
- value,
35
- inputClass: cx(inputClass),
36
- buttonClass: cx(classes.dropdownButton, buttonClass),
37
- containerClass: cx(classes.container, containerClass),
38
- disableDropdown: true,
39
- dropdownClass: cx(dropdownClass),
40
- searchClass: cx(searchClass),
41
- placeholder,
42
- specialLabel: "",
43
- country: showContryCodeAfterFocus && isPhoneInputFocus ? country.toLowerCase() : void 0,
44
- onFocus: (e, data) => {
45
- setIsPhoneInputFocus(true);
46
- onFocus == null ? void 0 : onFocus(e, data);
47
- },
48
- masks: { cn: "..........." },
49
- ...rest
36
+ ...wrapperProps,
37
+ styles: styles$1.mergeStylesList([
38
+ wrapperProps.styles,
39
+ { label: { color: theme.colors.carbon[8] }, description: { color: theme.colors.carbon[6] } }
40
+ ]),
41
+ children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
42
+ ReactPhoneInput,
43
+ {
44
+ value,
45
+ inputClass: cx(inputClass),
46
+ buttonClass: cx(classes.dropdownButton, buttonClass),
47
+ containerClass: cx(classes.container, containerClass),
48
+ disableDropdown: true,
49
+ dropdownClass: cx(dropdownClass),
50
+ searchClass: cx(searchClass),
51
+ placeholder,
52
+ specialLabel: "",
53
+ country: showContryCodeAfterFocus && isPhoneInputFocus ? country.toLowerCase() : void 0,
54
+ onFocus: (e, data) => {
55
+ setIsPhoneInputFocus(true);
56
+ onFocus == null ? void 0 : onFocus(e, data);
57
+ },
58
+ masks: { cn: "..........." },
59
+ ...rest
60
+ }
61
+ )
50
62
  }
51
- ) }) });
63
+ ) });
52
64
  };
53
65
  exports.PhoneInput = PhoneInput;
package/dist/biz/PhoneInput/index.js CHANGED
@@ -5,6 +5,7 @@ import { mergeStylesList } from "../../utils/styles.js";
5
5
  import { useStyles } from "./styles.js";
6
6
  import { useInputProps } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Input/use-input-props.js";
7
7
  import { Input } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Input/Input.js";
8
+ import { useMantineTheme } from "../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.js";
8
9
  import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
9
10
  const ReactPhoneInput = ReactPhoneInput2.default ? ReactPhoneInput2.default : ReactPhoneInput2;
10
11
  const PhoneInput = (props) => {
@@ -26,27 +27,38 @@ const PhoneInput = (props) => {
26
27
  ...rest
27
28
  } = props;
28
29
  const [isPhoneInputFocus, setIsPhoneInputFocus] = useState(false);
29
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ...boxProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Input.Wrapper, { ...wrapperProps, styles: mergeStylesList([wrapperProps.styles, { label: { marginBottom: 8 } }]), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
30
- ReactPhoneInput,
30
+ const theme = useMantineTheme();
31
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ...boxProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
32
+ Input.Wrapper,
31
33
  {
32
- value,
33
- inputClass: cx(inputClass),
34
- buttonClass: cx(classes.dropdownButton, buttonClass),
35
- containerClass: cx(classes.container, containerClass),
36
- disableDropdown: true,
37
- dropdownClass: cx(dropdownClass),
38
- searchClass: cx(searchClass),
39
- placeholder,
40
- specialLabel: "",
41
- country: showContryCodeAfterFocus && isPhoneInputFocus ? country.toLowerCase() : void 0,
42
- onFocus: (e, data) => {
43
- setIsPhoneInputFocus(true);
44
- onFocus == null ? void 0 : onFocus(e, data);
45
- },
46
- masks: { cn: "..........." },
47
- ...rest
34
+ ...wrapperProps,
35
+ styles: mergeStylesList([
36
+ wrapperProps.styles,
37
+ { label: { color: theme.colors.carbon[8] }, description: { color: theme.colors.carbon[6] } }
38
+ ]),
39
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(
40
+ ReactPhoneInput,
41
+ {
42
+ value,
43
+ inputClass: cx(inputClass),
44
+ buttonClass: cx(classes.dropdownButton, buttonClass),
45
+ containerClass: cx(classes.container, containerClass),
46
+ disableDropdown: true,
47
+ dropdownClass: cx(dropdownClass),
48
+ searchClass: cx(searchClass),
49
+ placeholder,
50
+ specialLabel: "",
51
+ country: showContryCodeAfterFocus && isPhoneInputFocus ? country.toLowerCase() : void 0,
52
+ onFocus: (e, data) => {
53
+ setIsPhoneInputFocus(true);
54
+ onFocus == null ? void 0 : onFocus(e, data);
55
+ },
56
+ masks: { cn: "..........." },
57
+ ...rest
58
+ }
59
+ )
48
60
  }
49
- ) }) });
61
+ ) });
50
62
  };
51
63
  export {
52
64
  PhoneInput
package/dist/biz/PhoneInput/styles.cjs CHANGED
@@ -2,10 +2,9 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const createStyles = require("../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/tss/create-styles.cjs");
4
4
  const useStyles = createStyles.createStyles((theme, params) => {
5
- const primaryShade = theme.fn.primaryShade();
6
5
  const { hasError } = params;
7
- const invalidColor = theme.colors.red[primaryShade];
8
- const normalColor = theme.colors.cyan[primaryShade];
6
+ const invalidColor = theme.colors.red[4];
7
+ const normalColor = theme.colors.carbon[5];
9
8
  const border = `1px solid ${hasError ? invalidColor : normalColor}`;
10
9
  return {
11
10
  dropdownButton: {
@@ -15,31 +14,32 @@ const useStyles = createStyles.createStyles((theme, params) => {
15
14
  // marginTop: 8,
16
15
  "&.react-tel-input": {
17
16
  ".form-control": {
18
- // see more https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Input/Input.styles.ts#LL40C23-L40C89
19
- backgroundColor: theme.colorScheme === "dark" ? theme.colors.carbon[7] : theme.white,
17
+ backgroundColor: theme.colors.carbon[0],
20
18
  fontSize: 14,
21
- color: theme.colorScheme === "dark" ? theme.colors.carbon[8] : theme.black,
19
+ color: theme.colors.carbon[8],
22
20
  width: "100%",
23
21
  height: 40,
24
22
  minHeight: 40,
25
23
  lineHeight: "38px",
26
24
  borderRadius: theme.defaultRadius,
27
25
  padding: "0 12px",
28
- border: hasError ? `1px solid ${invalidColor}` : `1px solid ${theme.colors.carbon[5]}`,
26
+ border,
29
27
  marginBottom: hasError ? 5 : void 0,
30
28
  outline: "none",
31
29
  "::placeholder": {
32
- ...theme.fn.placeholderStyles(),
33
- ...hasError ? {
34
- opacity: 1,
35
- color: invalidColor
36
- } : void 0
30
+ color: theme.colors.carbon[6]
37
31
  },
38
32
  "&:hover": {
39
33
  border
40
34
  },
41
35
  "&:focus": {
42
- border
36
+ borderColor: hasError ? invalidColor : theme.colors.carbon[9]
37
+ },
38
+ "&:disabled": {
39
+ backgroundColor: theme.colors.carbon[2],
40
+ color: theme.colors.carbon[8],
41
+ cursor: "not-allowed",
42
+ opacity: 1
43
43
  }
44
44
  }
45
45
  }
package/dist/biz/PhoneInput/styles.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import { createStyles } from "../../node_modules/.pnpm/@mantine_styles@5.10.4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/tss/create-styles.js";
2
2
  const useStyles = createStyles((theme, params) => {
3
- const primaryShade = theme.fn.primaryShade();
4
3
  const { hasError } = params;
5
- const invalidColor = theme.colors.red[primaryShade];
6
- const normalColor = theme.colors.cyan[primaryShade];
4
+ const invalidColor = theme.colors.red[4];
5
+ const normalColor = theme.colors.carbon[5];
7
6
  const border = `1px solid ${hasError ? invalidColor : normalColor}`;
8
7
  return {
9
8
  dropdownButton: {
@@ -13,31 +12,32 @@ const useStyles = createStyles((theme, params) => {
13
12
  // marginTop: 8,
14
13
  "&.react-tel-input": {
15
14
  ".form-control": {
16
- // see more https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Input/Input.styles.ts#LL40C23-L40C89
17
- backgroundColor: theme.colorScheme === "dark" ? theme.colors.carbon[7] : theme.white,
15
+ backgroundColor: theme.colors.carbon[0],
18
16
  fontSize: 14,
19
- color: theme.colorScheme === "dark" ? theme.colors.carbon[8] : theme.black,
17
+ color: theme.colors.carbon[8],
20
18
  width: "100%",
21
19
  height: 40,
22
20
  minHeight: 40,
23
21
  lineHeight: "38px",
24
22
  borderRadius: theme.defaultRadius,
25
23
  padding: "0 12px",
26
- border: hasError ? `1px solid ${invalidColor}` : `1px solid ${theme.colors.carbon[5]}`,
24
+ border,
27
25
  marginBottom: hasError ? 5 : void 0,
28
26
  outline: "none",
29
27
  "::placeholder": {
30
- ...theme.fn.placeholderStyles(),
31
- ...hasError ? {
32
- opacity: 1,
33
- color: invalidColor
34
- } : void 0
28
+ color: theme.colors.carbon[6]
35
29
  },
36
30
  "&:hover": {
37
31
  border
38
32
  },
39
33
  "&:focus": {
40
- border
34
+ borderColor: hasError ? invalidColor : theme.colors.carbon[9]
35
+ },
36
+ "&:disabled": {
37
+ backgroundColor: theme.colors.carbon[2],
38
+ color: theme.colors.carbon[8],
39
+ cursor: "not-allowed",
40
+ opacity: 1
41
41
  }
42
42
  }
43
43
  }
package/dist/primitive/TextInput/TextInput.cjs CHANGED
@@ -23,7 +23,7 @@ const TextInput = React.forwardRef((props, ref) => {
23
23
  icon: {
24
24
  position: "relative",
25
25
  width: "fit-content",
26
- border: `1px solid ${theme.colors.carbon[5]}`,
26
+ border: `1px solid ${theme.colors.carbon[4]}`,
27
27
  borderRightWidth: 0,
28
28
  paddingLeft: 12,
29
29
  paddingRight: 12,
package/dist/primitive/TextInput/TextInput.js CHANGED
@@ -21,7 +21,7 @@ const TextInput = forwardRef((props, ref) => {
21
21
  icon: {
22
22
  position: "relative",
23
23
  width: "fit-content",
24
- border: `1px solid ${theme.colors.carbon[5]}`,
24
+ border: `1px solid ${theme.colors.carbon[4]}`,
25
25
  borderRightWidth: 0,
26
26
  paddingLeft: 12,
27
27
  paddingRight: 12,
package/dist/theme/theme.cjs CHANGED
@@ -115,8 +115,13 @@ const getButtonStyles = (theme2, params) => {
115
115
  }
116
116
  };
117
117
  const finalStyles = {
118
+ label: {
119
+ fontWeight: 500,
120
+ fontSize: params.size === "xs" ? 12 : 14
121
+ },
118
122
  root: {
119
- fontWeight: 700,
123
+ paddingLeft: 12,
124
+ paddingRight: 12,
120
125
  ...variantStyles[params.variant],
121
126
  ...sizeStyles[params.size]
122
127
  }
@@ -132,8 +137,7 @@ const getInputStyles = (theme2, params) => {
132
137
  const diffSizeStyles = {
133
138
  sm: {
134
139
  label: {
135
- lineHeight: "20px",
136
- marginBottom: 8
140
+ lineHeight: "20px"
137
141
  },
138
142
  input: {
139
143
  ...inputStyle,
@@ -144,21 +148,53 @@ const getInputStyles = (theme2, params) => {
144
148
  }
145
149
  };
146
150
  const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
151
+ const passwordInputSizeStyles = {
152
+ sm: {
153
+ height: 38,
154
+ lineHeight: "38px"
155
+ }
156
+ };
147
157
  return {
148
- label: matches.label,
158
+ label: {
159
+ ...matches.label,
160
+ color: theme2.colors.carbon[8]
161
+ },
162
+ description: {
163
+ color: theme2.colors.carbon[7]
164
+ },
149
165
  input: {
150
166
  ...matches.input,
151
167
  color: theme2.colors.carbon[8],
168
+ border: `1px solid ${theme2.colors.carbon[5]}`,
169
+ backgroundColor: theme2.colors.carbon[0],
170
+ "&:focus": {
171
+ borderColor: theme2.colors.carbon[9]
172
+ },
152
173
  "&:disabled": {
174
+ backgroundColor: theme2.colors.carbon[2],
175
+ color: theme2.colors.carbon[8],
153
176
  opacity: 1
177
+ },
178
+ "&::placeholder": {
179
+ color: theme2.colors.carbon[6]
180
+ },
181
+ "& .mantine-PasswordInput-innerInput": {
182
+ ...passwordInputSizeStyles[params.size],
183
+ "&::placeholder": {
184
+ color: theme2.colors.carbon[6]
185
+ }
154
186
  }
155
187
  },
156
188
  invalid: {
189
+ borderColor: theme2.colors.red[4],
157
190
  "&:hover": {
158
- borderColor: theme2.colors.red[5]
191
+ borderColor: theme2.colors.red[4]
159
192
  },
160
193
  "&:focus": {
161
- borderColor: theme2.colors.red[5]
194
+ borderColor: theme2.colors.red[4]
195
+ },
196
+ "&::placeholder": {
197
+ color: theme2.colors.carbon[6]
162
198
  }
163
199
  }
164
200
  };
@@ -444,8 +480,7 @@ const theme = {
444
480
  const diffSizeStyles = {
445
481
  sm: {
446
482
  label: {
447
- lineHeight: "20px",
448
- marginBottom: 8
483
+ lineHeight: "20px"
449
484
  },
450
485
  input: {
451
486
  height: 40,
@@ -456,13 +491,15 @@ const theme = {
456
491
  };
457
492
  const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
458
493
  return {
459
- label: matches.label,
494
+ label: {
495
+ ...matches.label
496
+ },
497
+ description: {
498
+ color: theme2.colors.carbon[6]
499
+ },
460
500
  input: {
461
501
  ...matches.input,
462
- color: theme2.colors.carbon[8],
463
- "&:disabled": {
464
- opacity: 1
465
- }
502
+ color: theme2.colors.carbon[8]
466
503
  },
467
504
  item: {
468
505
  transition: "background 150ms ease-in-out",
@@ -478,6 +515,11 @@ const theme = {
478
515
  backgroundColor: theme2.colors.carbon[3]
479
516
  }
480
517
  }
518
+ },
519
+ rightSection: {
520
+ "& [data-chevron]": {
521
+ color: `${theme2.colors.carbon[7]} !important`
522
+ }
481
523
  }
482
524
  };
483
525
  }
@@ -501,6 +543,9 @@ const theme = {
501
543
  };
502
544
  }
503
545
  },
546
+ Input: {
547
+ styles: getInputStyles
548
+ },
504
549
  TextInput: {
505
550
  styles: getInputStyles
506
551
  },
package/dist/theme/theme.js CHANGED
@@ -113,8 +113,13 @@ const getButtonStyles = (theme2, params) => {
113
113
  }
114
114
  };
115
115
  const finalStyles = {
116
+ label: {
117
+ fontWeight: 500,
118
+ fontSize: params.size === "xs" ? 12 : 14
119
+ },
116
120
  root: {
117
- fontWeight: 700,
121
+ paddingLeft: 12,
122
+ paddingRight: 12,
118
123
  ...variantStyles[params.variant],
119
124
  ...sizeStyles[params.size]
120
125
  }
@@ -130,8 +135,7 @@ const getInputStyles = (theme2, params) => {
130
135
  const diffSizeStyles = {
131
136
  sm: {
132
137
  label: {
133
- lineHeight: "20px",
134
- marginBottom: 8
138
+ lineHeight: "20px"
135
139
  },
136
140
  input: {
137
141
  ...inputStyle,
@@ -142,21 +146,53 @@ const getInputStyles = (theme2, params) => {
142
146
  }
143
147
  };
144
148
  const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
149
+ const passwordInputSizeStyles = {
150
+ sm: {
151
+ height: 38,
152
+ lineHeight: "38px"
153
+ }
154
+ };
145
155
  return {
146
- label: matches.label,
156
+ label: {
157
+ ...matches.label,
158
+ color: theme2.colors.carbon[8]
159
+ },
160
+ description: {
161
+ color: theme2.colors.carbon[7]
162
+ },
147
163
  input: {
148
164
  ...matches.input,
149
165
  color: theme2.colors.carbon[8],
166
+ border: `1px solid ${theme2.colors.carbon[5]}`,
167
+ backgroundColor: theme2.colors.carbon[0],
168
+ "&:focus": {
169
+ borderColor: theme2.colors.carbon[9]
170
+ },
150
171
  "&:disabled": {
172
+ backgroundColor: theme2.colors.carbon[2],
173
+ color: theme2.colors.carbon[8],
151
174
  opacity: 1
175
+ },
176
+ "&::placeholder": {
177
+ color: theme2.colors.carbon[6]
178
+ },
179
+ "& .mantine-PasswordInput-innerInput": {
180
+ ...passwordInputSizeStyles[params.size],
181
+ "&::placeholder": {
182
+ color: theme2.colors.carbon[6]
183
+ }
152
184
  }
153
185
  },
154
186
  invalid: {
187
+ borderColor: theme2.colors.red[4],
155
188
  "&:hover": {
156
- borderColor: theme2.colors.red[5]
189
+ borderColor: theme2.colors.red[4]
157
190
  },
158
191
  "&:focus": {
159
- borderColor: theme2.colors.red[5]
192
+ borderColor: theme2.colors.red[4]
193
+ },
194
+ "&::placeholder": {
195
+ color: theme2.colors.carbon[6]
160
196
  }
161
197
  }
162
198
  };
@@ -442,8 +478,7 @@ const theme = {
442
478
  const diffSizeStyles = {
443
479
  sm: {
444
480
  label: {
445
- lineHeight: "20px",
446
- marginBottom: 8
481
+ lineHeight: "20px"
447
482
  },
448
483
  input: {
449
484
  height: 40,
@@ -454,13 +489,15 @@ const theme = {
454
489
  };
455
490
  const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
456
491
  return {
457
- label: matches.label,
492
+ label: {
493
+ ...matches.label
494
+ },
495
+ description: {
496
+ color: theme2.colors.carbon[6]
497
+ },
458
498
  input: {
459
499
  ...matches.input,
460
- color: theme2.colors.carbon[8],
461
- "&:disabled": {
462
- opacity: 1
463
- }
500
+ color: theme2.colors.carbon[8]
464
501
  },
465
502
  item: {
466
503
  transition: "background 150ms ease-in-out",
@@ -476,6 +513,11 @@ const theme = {
476
513
  backgroundColor: theme2.colors.carbon[3]
477
514
  }
478
515
  }
516
+ },
517
+ rightSection: {
518
+ "& [data-chevron]": {
519
+ color: `${theme2.colors.carbon[7]} !important`
520
+ }
479
521
  }
480
522
  };
481
523
  }
@@ -499,6 +541,9 @@ const theme = {
499
541
  };
500
542
  }
501
543
  },
544
+ Input: {
545
+ styles: getInputStyles
546
+ },
502
547
  TextInput: {
503
548
  styles: getInputStyles
504
549
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.27",
3
+ "version": "2.0.0-beta.29",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",