@tidbcloud/uikit 2.0.0-beta.27 → 2.0.0-beta.28
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 +6 -0
- package/dist/biz/PhoneInput/index.cjs +31 -19
- package/dist/biz/PhoneInput/index.js +31 -19
- package/dist/biz/PhoneInput/styles.cjs +13 -13
- package/dist/biz/PhoneInput/styles.js +13 -13
- package/dist/primitive/TextInput/TextInput.cjs +1 -1
- package/dist/primitive/TextInput/TextInput.js +1 -1
- package/dist/theme/theme.cjs +52 -12
- package/dist/theme/theme.js +52 -12
- package/package.json +1 -1
package/CHANGELOG.md
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
|
-
|
|
32
|
-
|
|
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
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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;
|
|
@@ -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
|
-
|
|
30
|
-
|
|
30
|
+
const theme = useMantineTheme();
|
|
31
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ...boxProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
32
|
+
Input.Wrapper,
|
|
31
33
|
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
|
@@ -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[
|
|
8
|
-
const normalColor = theme.colors.
|
|
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
|
-
|
|
19
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.carbon[7] : theme.white,
|
|
17
|
+
backgroundColor: theme.colors.carbon[0],
|
|
20
18
|
fontSize: 14,
|
|
21
|
-
color: theme.
|
|
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
|
|
26
|
+
border,
|
|
29
27
|
marginBottom: hasError ? 5 : void 0,
|
|
30
28
|
outline: "none",
|
|
31
29
|
"::placeholder": {
|
|
32
|
-
|
|
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
|
-
|
|
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
|
}
|
|
@@ -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[
|
|
6
|
-
const normalColor = theme.colors.
|
|
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
|
-
|
|
17
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.carbon[7] : theme.white,
|
|
15
|
+
backgroundColor: theme.colors.carbon[0],
|
|
18
16
|
fontSize: 14,
|
|
19
|
-
color: theme.
|
|
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
|
|
24
|
+
border,
|
|
27
25
|
marginBottom: hasError ? 5 : void 0,
|
|
28
26
|
outline: "none",
|
|
29
27
|
"::placeholder": {
|
|
30
|
-
|
|
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
|
-
|
|
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
|
}
|
|
@@ -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[
|
|
26
|
+
border: `1px solid ${theme.colors.carbon[4]}`,
|
|
27
27
|
borderRightWidth: 0,
|
|
28
28
|
paddingLeft: 12,
|
|
29
29
|
paddingRight: 12,
|
|
@@ -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[
|
|
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
|
@@ -132,8 +132,7 @@ const getInputStyles = (theme2, params) => {
|
|
|
132
132
|
const diffSizeStyles = {
|
|
133
133
|
sm: {
|
|
134
134
|
label: {
|
|
135
|
-
lineHeight: "20px"
|
|
136
|
-
marginBottom: 8
|
|
135
|
+
lineHeight: "20px"
|
|
137
136
|
},
|
|
138
137
|
input: {
|
|
139
138
|
...inputStyle,
|
|
@@ -144,21 +143,53 @@ const getInputStyles = (theme2, params) => {
|
|
|
144
143
|
}
|
|
145
144
|
};
|
|
146
145
|
const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
|
|
146
|
+
const passwordInputSizeStyles = {
|
|
147
|
+
sm: {
|
|
148
|
+
height: 38,
|
|
149
|
+
lineHeight: "38px"
|
|
150
|
+
}
|
|
151
|
+
};
|
|
147
152
|
return {
|
|
148
|
-
label:
|
|
153
|
+
label: {
|
|
154
|
+
...matches.label,
|
|
155
|
+
color: theme2.colors.carbon[8]
|
|
156
|
+
},
|
|
157
|
+
description: {
|
|
158
|
+
color: theme2.colors.carbon[6]
|
|
159
|
+
},
|
|
149
160
|
input: {
|
|
150
161
|
...matches.input,
|
|
151
162
|
color: theme2.colors.carbon[8],
|
|
163
|
+
border: `1px solid ${theme2.colors.carbon[5]}`,
|
|
164
|
+
backgroundColor: theme2.colors.carbon[0],
|
|
165
|
+
"&:focus": {
|
|
166
|
+
borderColor: theme2.colors.carbon[9]
|
|
167
|
+
},
|
|
152
168
|
"&:disabled": {
|
|
169
|
+
backgroundColor: theme2.colors.carbon[2],
|
|
170
|
+
color: theme2.colors.carbon[8],
|
|
153
171
|
opacity: 1
|
|
172
|
+
},
|
|
173
|
+
"&::placeholder": {
|
|
174
|
+
color: theme2.colors.carbon[6]
|
|
175
|
+
},
|
|
176
|
+
"& .mantine-PasswordInput-innerInput": {
|
|
177
|
+
...passwordInputSizeStyles[params.size],
|
|
178
|
+
"&::placeholder": {
|
|
179
|
+
color: theme2.colors.carbon[6]
|
|
180
|
+
}
|
|
154
181
|
}
|
|
155
182
|
},
|
|
156
183
|
invalid: {
|
|
184
|
+
borderColor: theme2.colors.red[4],
|
|
157
185
|
"&:hover": {
|
|
158
|
-
borderColor: theme2.colors.red[
|
|
186
|
+
borderColor: theme2.colors.red[4]
|
|
159
187
|
},
|
|
160
188
|
"&:focus": {
|
|
161
|
-
borderColor: theme2.colors.red[
|
|
189
|
+
borderColor: theme2.colors.red[4]
|
|
190
|
+
},
|
|
191
|
+
"&::placeholder": {
|
|
192
|
+
color: theme2.colors.carbon[6]
|
|
162
193
|
}
|
|
163
194
|
}
|
|
164
195
|
};
|
|
@@ -444,8 +475,7 @@ const theme = {
|
|
|
444
475
|
const diffSizeStyles = {
|
|
445
476
|
sm: {
|
|
446
477
|
label: {
|
|
447
|
-
lineHeight: "20px"
|
|
448
|
-
marginBottom: 8
|
|
478
|
+
lineHeight: "20px"
|
|
449
479
|
},
|
|
450
480
|
input: {
|
|
451
481
|
height: 40,
|
|
@@ -456,13 +486,15 @@ const theme = {
|
|
|
456
486
|
};
|
|
457
487
|
const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
|
|
458
488
|
return {
|
|
459
|
-
label:
|
|
489
|
+
label: {
|
|
490
|
+
...matches.label
|
|
491
|
+
},
|
|
492
|
+
description: {
|
|
493
|
+
color: theme2.colors.carbon[6]
|
|
494
|
+
},
|
|
460
495
|
input: {
|
|
461
496
|
...matches.input,
|
|
462
|
-
color: theme2.colors.carbon[8]
|
|
463
|
-
"&:disabled": {
|
|
464
|
-
opacity: 1
|
|
465
|
-
}
|
|
497
|
+
color: theme2.colors.carbon[8]
|
|
466
498
|
},
|
|
467
499
|
item: {
|
|
468
500
|
transition: "background 150ms ease-in-out",
|
|
@@ -478,6 +510,11 @@ const theme = {
|
|
|
478
510
|
backgroundColor: theme2.colors.carbon[3]
|
|
479
511
|
}
|
|
480
512
|
}
|
|
513
|
+
},
|
|
514
|
+
rightSection: {
|
|
515
|
+
"& [data-chevron]": {
|
|
516
|
+
color: `${theme2.colors.carbon[7]} !important`
|
|
517
|
+
}
|
|
481
518
|
}
|
|
482
519
|
};
|
|
483
520
|
}
|
|
@@ -501,6 +538,9 @@ const theme = {
|
|
|
501
538
|
};
|
|
502
539
|
}
|
|
503
540
|
},
|
|
541
|
+
Input: {
|
|
542
|
+
styles: getInputStyles
|
|
543
|
+
},
|
|
504
544
|
TextInput: {
|
|
505
545
|
styles: getInputStyles
|
|
506
546
|
},
|
package/dist/theme/theme.js
CHANGED
|
@@ -130,8 +130,7 @@ const getInputStyles = (theme2, params) => {
|
|
|
130
130
|
const diffSizeStyles = {
|
|
131
131
|
sm: {
|
|
132
132
|
label: {
|
|
133
|
-
lineHeight: "20px"
|
|
134
|
-
marginBottom: 8
|
|
133
|
+
lineHeight: "20px"
|
|
135
134
|
},
|
|
136
135
|
input: {
|
|
137
136
|
...inputStyle,
|
|
@@ -142,21 +141,53 @@ const getInputStyles = (theme2, params) => {
|
|
|
142
141
|
}
|
|
143
142
|
};
|
|
144
143
|
const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
|
|
144
|
+
const passwordInputSizeStyles = {
|
|
145
|
+
sm: {
|
|
146
|
+
height: 38,
|
|
147
|
+
lineHeight: "38px"
|
|
148
|
+
}
|
|
149
|
+
};
|
|
145
150
|
return {
|
|
146
|
-
label:
|
|
151
|
+
label: {
|
|
152
|
+
...matches.label,
|
|
153
|
+
color: theme2.colors.carbon[8]
|
|
154
|
+
},
|
|
155
|
+
description: {
|
|
156
|
+
color: theme2.colors.carbon[6]
|
|
157
|
+
},
|
|
147
158
|
input: {
|
|
148
159
|
...matches.input,
|
|
149
160
|
color: theme2.colors.carbon[8],
|
|
161
|
+
border: `1px solid ${theme2.colors.carbon[5]}`,
|
|
162
|
+
backgroundColor: theme2.colors.carbon[0],
|
|
163
|
+
"&:focus": {
|
|
164
|
+
borderColor: theme2.colors.carbon[9]
|
|
165
|
+
},
|
|
150
166
|
"&:disabled": {
|
|
167
|
+
backgroundColor: theme2.colors.carbon[2],
|
|
168
|
+
color: theme2.colors.carbon[8],
|
|
151
169
|
opacity: 1
|
|
170
|
+
},
|
|
171
|
+
"&::placeholder": {
|
|
172
|
+
color: theme2.colors.carbon[6]
|
|
173
|
+
},
|
|
174
|
+
"& .mantine-PasswordInput-innerInput": {
|
|
175
|
+
...passwordInputSizeStyles[params.size],
|
|
176
|
+
"&::placeholder": {
|
|
177
|
+
color: theme2.colors.carbon[6]
|
|
178
|
+
}
|
|
152
179
|
}
|
|
153
180
|
},
|
|
154
181
|
invalid: {
|
|
182
|
+
borderColor: theme2.colors.red[4],
|
|
155
183
|
"&:hover": {
|
|
156
|
-
borderColor: theme2.colors.red[
|
|
184
|
+
borderColor: theme2.colors.red[4]
|
|
157
185
|
},
|
|
158
186
|
"&:focus": {
|
|
159
|
-
borderColor: theme2.colors.red[
|
|
187
|
+
borderColor: theme2.colors.red[4]
|
|
188
|
+
},
|
|
189
|
+
"&::placeholder": {
|
|
190
|
+
color: theme2.colors.carbon[6]
|
|
160
191
|
}
|
|
161
192
|
}
|
|
162
193
|
};
|
|
@@ -442,8 +473,7 @@ const theme = {
|
|
|
442
473
|
const diffSizeStyles = {
|
|
443
474
|
sm: {
|
|
444
475
|
label: {
|
|
445
|
-
lineHeight: "20px"
|
|
446
|
-
marginBottom: 8
|
|
476
|
+
lineHeight: "20px"
|
|
447
477
|
},
|
|
448
478
|
input: {
|
|
449
479
|
height: 40,
|
|
@@ -454,13 +484,15 @@ const theme = {
|
|
|
454
484
|
};
|
|
455
485
|
const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
|
|
456
486
|
return {
|
|
457
|
-
label:
|
|
487
|
+
label: {
|
|
488
|
+
...matches.label
|
|
489
|
+
},
|
|
490
|
+
description: {
|
|
491
|
+
color: theme2.colors.carbon[6]
|
|
492
|
+
},
|
|
458
493
|
input: {
|
|
459
494
|
...matches.input,
|
|
460
|
-
color: theme2.colors.carbon[8]
|
|
461
|
-
"&:disabled": {
|
|
462
|
-
opacity: 1
|
|
463
|
-
}
|
|
495
|
+
color: theme2.colors.carbon[8]
|
|
464
496
|
},
|
|
465
497
|
item: {
|
|
466
498
|
transition: "background 150ms ease-in-out",
|
|
@@ -476,6 +508,11 @@ const theme = {
|
|
|
476
508
|
backgroundColor: theme2.colors.carbon[3]
|
|
477
509
|
}
|
|
478
510
|
}
|
|
511
|
+
},
|
|
512
|
+
rightSection: {
|
|
513
|
+
"& [data-chevron]": {
|
|
514
|
+
color: `${theme2.colors.carbon[7]} !important`
|
|
515
|
+
}
|
|
479
516
|
}
|
|
480
517
|
};
|
|
481
518
|
}
|
|
@@ -499,6 +536,9 @@ const theme = {
|
|
|
499
536
|
};
|
|
500
537
|
}
|
|
501
538
|
},
|
|
539
|
+
Input: {
|
|
540
|
+
styles: getInputStyles
|
|
541
|
+
},
|
|
502
542
|
TextInput: {
|
|
503
543
|
styles: getInputStyles
|
|
504
544
|
},
|