@tidbcloud/uikit 2.0.0-beta.26 → 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 +12 -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 +72 -33
- package/dist/theme/theme.js +72 -33
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @tidbcloud/uikit
|
|
2
2
|
|
|
3
|
+
## 2.0.0-beta.28
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Update Input/Select/PhoneInput styles
|
|
8
|
+
|
|
9
|
+
## 2.0.0-beta.27
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- Update stepper styles and set dot badge to font weight 400
|
|
14
|
+
|
|
3
15
|
## 2.0.0-beta.26
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -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
|
};
|
|
@@ -369,42 +400,41 @@ const theme = {
|
|
|
369
400
|
},
|
|
370
401
|
Stepper: {
|
|
371
402
|
styles: (theme2, params) => {
|
|
372
|
-
const
|
|
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
|
-
});
|
|
403
|
+
const color = params.color || theme2.primaryColor;
|
|
382
404
|
return {
|
|
383
405
|
stepIcon: {
|
|
384
|
-
backgroundColor: theme2.
|
|
385
|
-
borderColor: theme2.
|
|
386
|
-
color: theme2.
|
|
406
|
+
backgroundColor: theme2.fn.themeColor(color, 0),
|
|
407
|
+
borderColor: theme2.fn.themeColor(color, 4),
|
|
408
|
+
color: theme2.fn.themeColor(color, 7),
|
|
387
409
|
"&[data-progress]": {
|
|
388
|
-
backgroundColor:
|
|
389
|
-
color:
|
|
410
|
+
backgroundColor: theme2.fn.themeColor(color, 9),
|
|
411
|
+
color: theme2.fn.themeColor(color, 0),
|
|
412
|
+
borderColor: theme2.fn.themeColor(color, 9)
|
|
390
413
|
},
|
|
391
414
|
"&[data-completed]": {
|
|
392
|
-
backgroundColor:
|
|
393
|
-
color:
|
|
415
|
+
backgroundColor: theme2.fn.themeColor(color, 3),
|
|
416
|
+
color: theme2.fn.themeColor(color, 9),
|
|
417
|
+
borderColor: theme2.fn.themeColor(color, 9)
|
|
394
418
|
}
|
|
395
419
|
},
|
|
396
420
|
stepCompletedIcon: {
|
|
397
|
-
color:
|
|
421
|
+
color: theme2.fn.themeColor(color, 9),
|
|
398
422
|
"> svg": {
|
|
399
423
|
width: 14,
|
|
400
424
|
height: 14
|
|
401
425
|
}
|
|
402
426
|
},
|
|
403
427
|
separator: {
|
|
404
|
-
|
|
428
|
+
backgroundColor: theme2.fn.themeColor(color, 4)
|
|
429
|
+
},
|
|
430
|
+
separatorActive: {
|
|
431
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
405
432
|
},
|
|
406
433
|
verticalSeparator: {
|
|
407
|
-
|
|
434
|
+
backgroundColor: theme2.fn.themeColor(color, 4)
|
|
435
|
+
},
|
|
436
|
+
verticalSeparatorActive: {
|
|
437
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
408
438
|
}
|
|
409
439
|
};
|
|
410
440
|
}
|
|
@@ -445,8 +475,7 @@ const theme = {
|
|
|
445
475
|
const diffSizeStyles = {
|
|
446
476
|
sm: {
|
|
447
477
|
label: {
|
|
448
|
-
lineHeight: "20px"
|
|
449
|
-
marginBottom: 8
|
|
478
|
+
lineHeight: "20px"
|
|
450
479
|
},
|
|
451
480
|
input: {
|
|
452
481
|
height: 40,
|
|
@@ -457,13 +486,15 @@ const theme = {
|
|
|
457
486
|
};
|
|
458
487
|
const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
|
|
459
488
|
return {
|
|
460
|
-
label:
|
|
489
|
+
label: {
|
|
490
|
+
...matches.label
|
|
491
|
+
},
|
|
492
|
+
description: {
|
|
493
|
+
color: theme2.colors.carbon[6]
|
|
494
|
+
},
|
|
461
495
|
input: {
|
|
462
496
|
...matches.input,
|
|
463
|
-
color: theme2.colors.carbon[8]
|
|
464
|
-
"&:disabled": {
|
|
465
|
-
opacity: 1
|
|
466
|
-
}
|
|
497
|
+
color: theme2.colors.carbon[8]
|
|
467
498
|
},
|
|
468
499
|
item: {
|
|
469
500
|
transition: "background 150ms ease-in-out",
|
|
@@ -479,6 +510,11 @@ const theme = {
|
|
|
479
510
|
backgroundColor: theme2.colors.carbon[3]
|
|
480
511
|
}
|
|
481
512
|
}
|
|
513
|
+
},
|
|
514
|
+
rightSection: {
|
|
515
|
+
"& [data-chevron]": {
|
|
516
|
+
color: `${theme2.colors.carbon[7]} !important`
|
|
517
|
+
}
|
|
482
518
|
}
|
|
483
519
|
};
|
|
484
520
|
}
|
|
@@ -502,6 +538,9 @@ const theme = {
|
|
|
502
538
|
};
|
|
503
539
|
}
|
|
504
540
|
},
|
|
541
|
+
Input: {
|
|
542
|
+
styles: getInputStyles
|
|
543
|
+
},
|
|
505
544
|
TextInput: {
|
|
506
545
|
styles: getInputStyles
|
|
507
546
|
},
|
|
@@ -536,7 +575,7 @@ const theme = {
|
|
|
536
575
|
dot: {
|
|
537
576
|
border: "none",
|
|
538
577
|
textTransform: "capitalize",
|
|
539
|
-
fontWeight:
|
|
578
|
+
fontWeight: 400,
|
|
540
579
|
fontSize: theme2.fn.size({ sizes, size: params.size }),
|
|
541
580
|
backgroundColor: "transparent",
|
|
542
581
|
color: theme2.fn.themeColor(theme2.primaryColor, 8),
|
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
|
};
|
|
@@ -367,42 +398,41 @@ const theme = {
|
|
|
367
398
|
},
|
|
368
399
|
Stepper: {
|
|
369
400
|
styles: (theme2, params) => {
|
|
370
|
-
const
|
|
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
|
-
});
|
|
401
|
+
const color = params.color || theme2.primaryColor;
|
|
380
402
|
return {
|
|
381
403
|
stepIcon: {
|
|
382
|
-
backgroundColor: theme2.
|
|
383
|
-
borderColor: theme2.
|
|
384
|
-
color: theme2.
|
|
404
|
+
backgroundColor: theme2.fn.themeColor(color, 0),
|
|
405
|
+
borderColor: theme2.fn.themeColor(color, 4),
|
|
406
|
+
color: theme2.fn.themeColor(color, 7),
|
|
385
407
|
"&[data-progress]": {
|
|
386
|
-
backgroundColor:
|
|
387
|
-
color:
|
|
408
|
+
backgroundColor: theme2.fn.themeColor(color, 9),
|
|
409
|
+
color: theme2.fn.themeColor(color, 0),
|
|
410
|
+
borderColor: theme2.fn.themeColor(color, 9)
|
|
388
411
|
},
|
|
389
412
|
"&[data-completed]": {
|
|
390
|
-
backgroundColor:
|
|
391
|
-
color:
|
|
413
|
+
backgroundColor: theme2.fn.themeColor(color, 3),
|
|
414
|
+
color: theme2.fn.themeColor(color, 9),
|
|
415
|
+
borderColor: theme2.fn.themeColor(color, 9)
|
|
392
416
|
}
|
|
393
417
|
},
|
|
394
418
|
stepCompletedIcon: {
|
|
395
|
-
color:
|
|
419
|
+
color: theme2.fn.themeColor(color, 9),
|
|
396
420
|
"> svg": {
|
|
397
421
|
width: 14,
|
|
398
422
|
height: 14
|
|
399
423
|
}
|
|
400
424
|
},
|
|
401
425
|
separator: {
|
|
402
|
-
|
|
426
|
+
backgroundColor: theme2.fn.themeColor(color, 4)
|
|
427
|
+
},
|
|
428
|
+
separatorActive: {
|
|
429
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
403
430
|
},
|
|
404
431
|
verticalSeparator: {
|
|
405
|
-
|
|
432
|
+
backgroundColor: theme2.fn.themeColor(color, 4)
|
|
433
|
+
},
|
|
434
|
+
verticalSeparatorActive: {
|
|
435
|
+
backgroundColor: theme2.fn.themeColor(color, 9)
|
|
406
436
|
}
|
|
407
437
|
};
|
|
408
438
|
}
|
|
@@ -443,8 +473,7 @@ const theme = {
|
|
|
443
473
|
const diffSizeStyles = {
|
|
444
474
|
sm: {
|
|
445
475
|
label: {
|
|
446
|
-
lineHeight: "20px"
|
|
447
|
-
marginBottom: 8
|
|
476
|
+
lineHeight: "20px"
|
|
448
477
|
},
|
|
449
478
|
input: {
|
|
450
479
|
height: 40,
|
|
@@ -455,13 +484,15 @@ const theme = {
|
|
|
455
484
|
};
|
|
456
485
|
const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
|
|
457
486
|
return {
|
|
458
|
-
label:
|
|
487
|
+
label: {
|
|
488
|
+
...matches.label
|
|
489
|
+
},
|
|
490
|
+
description: {
|
|
491
|
+
color: theme2.colors.carbon[6]
|
|
492
|
+
},
|
|
459
493
|
input: {
|
|
460
494
|
...matches.input,
|
|
461
|
-
color: theme2.colors.carbon[8]
|
|
462
|
-
"&:disabled": {
|
|
463
|
-
opacity: 1
|
|
464
|
-
}
|
|
495
|
+
color: theme2.colors.carbon[8]
|
|
465
496
|
},
|
|
466
497
|
item: {
|
|
467
498
|
transition: "background 150ms ease-in-out",
|
|
@@ -477,6 +508,11 @@ const theme = {
|
|
|
477
508
|
backgroundColor: theme2.colors.carbon[3]
|
|
478
509
|
}
|
|
479
510
|
}
|
|
511
|
+
},
|
|
512
|
+
rightSection: {
|
|
513
|
+
"& [data-chevron]": {
|
|
514
|
+
color: `${theme2.colors.carbon[7]} !important`
|
|
515
|
+
}
|
|
480
516
|
}
|
|
481
517
|
};
|
|
482
518
|
}
|
|
@@ -500,6 +536,9 @@ const theme = {
|
|
|
500
536
|
};
|
|
501
537
|
}
|
|
502
538
|
},
|
|
539
|
+
Input: {
|
|
540
|
+
styles: getInputStyles
|
|
541
|
+
},
|
|
503
542
|
TextInput: {
|
|
504
543
|
styles: getInputStyles
|
|
505
544
|
},
|
|
@@ -534,7 +573,7 @@ const theme = {
|
|
|
534
573
|
dot: {
|
|
535
574
|
border: "none",
|
|
536
575
|
textTransform: "capitalize",
|
|
537
|
-
fontWeight:
|
|
576
|
+
fontWeight: 400,
|
|
538
577
|
fontSize: theme2.fn.size({ sizes, size: params.size }),
|
|
539
578
|
backgroundColor: "transparent",
|
|
540
579
|
color: theme2.fn.themeColor(theme2.primaryColor, 8),
|