@tidbcloud/uikit 2.0.0-beta.91 → 2.0.0-beta.92
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/theme/theme.cjs +65 -41
- package/dist/theme/theme.js +65 -41
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/theme/theme.cjs
CHANGED
|
@@ -15,35 +15,67 @@ const Colors = Object.keys(colors);
|
|
|
15
15
|
function themeColor(theme2, color, shade) {
|
|
16
16
|
return getThemeColor.getThemeColor([color, shade].join("."), theme2);
|
|
17
17
|
}
|
|
18
|
+
const InputSizes = {
|
|
19
|
+
xl: 48,
|
|
20
|
+
lg: 44,
|
|
21
|
+
md: 40,
|
|
22
|
+
sm: 32,
|
|
23
|
+
xs: 28
|
|
24
|
+
};
|
|
25
|
+
const InputFontSizes = {
|
|
26
|
+
xl: 16,
|
|
27
|
+
lg: 14,
|
|
28
|
+
md: 14,
|
|
29
|
+
sm: 13,
|
|
30
|
+
xs: 12
|
|
31
|
+
};
|
|
18
32
|
function getInputStyles(theme2, props) {
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
lg: 14,
|
|
29
|
-
md: 14,
|
|
30
|
-
sm: 13,
|
|
31
|
-
xs: 12
|
|
32
|
-
};
|
|
33
|
-
const size = sizes[props.size ?? "md"];
|
|
34
|
-
const inputFontSize = fontSizes[props.size ?? "md"];
|
|
35
|
-
const inputSize = {
|
|
36
|
-
height: size,
|
|
37
|
-
minHeight: size,
|
|
38
|
-
lineHeight: `${size - 2}px`,
|
|
39
|
-
fontSize: inputFontSize
|
|
40
|
-
};
|
|
41
|
-
const passwordInnerInputSize = {
|
|
33
|
+
const size = InputSizes[props.size ?? "md"];
|
|
34
|
+
const inputFontSize = InputFontSizes[props.size ?? "md"];
|
|
35
|
+
const inputSize = size ? {
|
|
36
|
+
"--input-size": `${size}px`,
|
|
37
|
+
"--input-height": `${size}px`,
|
|
38
|
+
"--input-line-height": `${size - 2}px`,
|
|
39
|
+
"--input-fz": `${inputFontSize}px`
|
|
40
|
+
} : {};
|
|
41
|
+
const passwordInnerInputSize = size ? {
|
|
42
42
|
height: size - 2,
|
|
43
43
|
minHeight: size - 2,
|
|
44
44
|
lineHeight: `${size - 2}px`,
|
|
45
45
|
fontSize: inputFontSize
|
|
46
|
-
};
|
|
46
|
+
} : {};
|
|
47
|
+
if (props.variant === "unstyled") {
|
|
48
|
+
return {
|
|
49
|
+
input: {
|
|
50
|
+
"&:not(.mantine-Textarea-input)": {
|
|
51
|
+
...inputSize
|
|
52
|
+
},
|
|
53
|
+
"& .mantine-PasswordInput-innerInput": {
|
|
54
|
+
...passwordInnerInputSize
|
|
55
|
+
},
|
|
56
|
+
"&::placeholder": {
|
|
57
|
+
color: themeColor(theme2, "carbon", 6)
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
if (props.variant === "filled") {
|
|
63
|
+
return {
|
|
64
|
+
input: {
|
|
65
|
+
"--input-bg": themeColor(theme2, "carbon", 3),
|
|
66
|
+
"--input-bd-focus": themeColor(theme2, "carbon", 9),
|
|
67
|
+
"&:not(.mantine-Textarea-input)": {
|
|
68
|
+
...inputSize
|
|
69
|
+
},
|
|
70
|
+
"& .mantine-PasswordInput-innerInput": {
|
|
71
|
+
...passwordInnerInputSize
|
|
72
|
+
},
|
|
73
|
+
"&::placeholder": {
|
|
74
|
+
color: themeColor(theme2, "carbon", 6)
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
}
|
|
47
79
|
return {
|
|
48
80
|
label: {
|
|
49
81
|
color: themeColor(theme2, "carbon", 8),
|
|
@@ -56,10 +88,12 @@ function getInputStyles(theme2, props) {
|
|
|
56
88
|
fontSize: 12
|
|
57
89
|
},
|
|
58
90
|
input: {
|
|
59
|
-
...inputSize,
|
|
60
91
|
color: theme2.colors.carbon[8],
|
|
61
92
|
border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
|
|
62
93
|
backgroundColor: themeColor(theme2, "carbon", 0),
|
|
94
|
+
"&:not(.mantine-Textarea-input)": {
|
|
95
|
+
...inputSize
|
|
96
|
+
},
|
|
63
97
|
"&:hover": {
|
|
64
98
|
borderColor: themeColor(theme2, "carbon", 5)
|
|
65
99
|
},
|
|
@@ -100,13 +134,16 @@ function getInputStyles(theme2, props) {
|
|
|
100
134
|
borderColor: themeColor(theme2, "red", 4)
|
|
101
135
|
},
|
|
102
136
|
"&::placeholder": {
|
|
103
|
-
color: themeColor(theme2, "carbon",
|
|
137
|
+
color: themeColor(theme2, "carbon", 2)
|
|
104
138
|
}
|
|
105
139
|
}
|
|
106
140
|
}
|
|
107
141
|
},
|
|
108
142
|
section: {
|
|
109
|
-
overflow: "hidden"
|
|
143
|
+
overflow: "hidden",
|
|
144
|
+
"& .mantine-PasswordInput-visibilityToggle svg": {
|
|
145
|
+
color: themeColor(theme2, "carbon", 6)
|
|
146
|
+
}
|
|
110
147
|
}
|
|
111
148
|
};
|
|
112
149
|
}
|
|
@@ -514,8 +551,6 @@ const theme = createTheme.createTheme({
|
|
|
514
551
|
withCheckIcon: false
|
|
515
552
|
},
|
|
516
553
|
styles: (theme2, props) => {
|
|
517
|
-
const styles = getInputStyles(theme2, { size: props.size });
|
|
518
|
-
const height = styles.input.height;
|
|
519
554
|
return {
|
|
520
555
|
label: {
|
|
521
556
|
lineHeight: "20px",
|
|
@@ -525,8 +560,6 @@ const theme = createTheme.createTheme({
|
|
|
525
560
|
color: themeColor(theme2, "carbon", 7)
|
|
526
561
|
},
|
|
527
562
|
input: {
|
|
528
|
-
height,
|
|
529
|
-
minHeight: height,
|
|
530
563
|
color: themeColor(theme2, "carbon", 8),
|
|
531
564
|
...props.variant === "unstyled" && {
|
|
532
565
|
border: "none",
|
|
@@ -573,8 +606,6 @@ const theme = createTheme.createTheme({
|
|
|
573
606
|
withCheckIcon: false
|
|
574
607
|
},
|
|
575
608
|
styles: (theme2, props) => {
|
|
576
|
-
const styles = getInputStyles(theme2, { size: props.size });
|
|
577
|
-
const inputHeight = styles.input.height;
|
|
578
609
|
return {
|
|
579
610
|
label: {
|
|
580
611
|
fontSize: 14,
|
|
@@ -589,9 +620,6 @@ const theme = createTheme.createTheme({
|
|
|
589
620
|
color: themeColor(theme2, "carbon", 6)
|
|
590
621
|
}
|
|
591
622
|
},
|
|
592
|
-
wrapper: {
|
|
593
|
-
height: inputHeight + 2
|
|
594
|
-
},
|
|
595
623
|
pill: {
|
|
596
624
|
backgroundColor: themeColor(theme2, "carbon", 3),
|
|
597
625
|
color: themeColor(theme2, "carbon", 8),
|
|
@@ -636,11 +664,7 @@ const theme = createTheme.createTheme({
|
|
|
636
664
|
styles: getInputStyles
|
|
637
665
|
},
|
|
638
666
|
Textarea: {
|
|
639
|
-
styles:
|
|
640
|
-
const styles = getInputStyles(theme2, props);
|
|
641
|
-
styles.input.height = void 0;
|
|
642
|
-
return styles;
|
|
643
|
-
}
|
|
667
|
+
styles: getInputStyles
|
|
644
668
|
},
|
|
645
669
|
Badge: {
|
|
646
670
|
defaultProps: {
|
package/dist/theme/theme.js
CHANGED
|
@@ -13,35 +13,67 @@ const Colors = Object.keys(colors);
|
|
|
13
13
|
function themeColor(theme2, color, shade) {
|
|
14
14
|
return getThemeColor([color, shade].join("."), theme2);
|
|
15
15
|
}
|
|
16
|
+
const InputSizes = {
|
|
17
|
+
xl: 48,
|
|
18
|
+
lg: 44,
|
|
19
|
+
md: 40,
|
|
20
|
+
sm: 32,
|
|
21
|
+
xs: 28
|
|
22
|
+
};
|
|
23
|
+
const InputFontSizes = {
|
|
24
|
+
xl: 16,
|
|
25
|
+
lg: 14,
|
|
26
|
+
md: 14,
|
|
27
|
+
sm: 13,
|
|
28
|
+
xs: 12
|
|
29
|
+
};
|
|
16
30
|
function getInputStyles(theme2, props) {
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
lg: 14,
|
|
27
|
-
md: 14,
|
|
28
|
-
sm: 13,
|
|
29
|
-
xs: 12
|
|
30
|
-
};
|
|
31
|
-
const size = sizes[props.size ?? "md"];
|
|
32
|
-
const inputFontSize = fontSizes[props.size ?? "md"];
|
|
33
|
-
const inputSize = {
|
|
34
|
-
height: size,
|
|
35
|
-
minHeight: size,
|
|
36
|
-
lineHeight: `${size - 2}px`,
|
|
37
|
-
fontSize: inputFontSize
|
|
38
|
-
};
|
|
39
|
-
const passwordInnerInputSize = {
|
|
31
|
+
const size = InputSizes[props.size ?? "md"];
|
|
32
|
+
const inputFontSize = InputFontSizes[props.size ?? "md"];
|
|
33
|
+
const inputSize = size ? {
|
|
34
|
+
"--input-size": `${size}px`,
|
|
35
|
+
"--input-height": `${size}px`,
|
|
36
|
+
"--input-line-height": `${size - 2}px`,
|
|
37
|
+
"--input-fz": `${inputFontSize}px`
|
|
38
|
+
} : {};
|
|
39
|
+
const passwordInnerInputSize = size ? {
|
|
40
40
|
height: size - 2,
|
|
41
41
|
minHeight: size - 2,
|
|
42
42
|
lineHeight: `${size - 2}px`,
|
|
43
43
|
fontSize: inputFontSize
|
|
44
|
-
};
|
|
44
|
+
} : {};
|
|
45
|
+
if (props.variant === "unstyled") {
|
|
46
|
+
return {
|
|
47
|
+
input: {
|
|
48
|
+
"&:not(.mantine-Textarea-input)": {
|
|
49
|
+
...inputSize
|
|
50
|
+
},
|
|
51
|
+
"& .mantine-PasswordInput-innerInput": {
|
|
52
|
+
...passwordInnerInputSize
|
|
53
|
+
},
|
|
54
|
+
"&::placeholder": {
|
|
55
|
+
color: themeColor(theme2, "carbon", 6)
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
if (props.variant === "filled") {
|
|
61
|
+
return {
|
|
62
|
+
input: {
|
|
63
|
+
"--input-bg": themeColor(theme2, "carbon", 3),
|
|
64
|
+
"--input-bd-focus": themeColor(theme2, "carbon", 9),
|
|
65
|
+
"&:not(.mantine-Textarea-input)": {
|
|
66
|
+
...inputSize
|
|
67
|
+
},
|
|
68
|
+
"& .mantine-PasswordInput-innerInput": {
|
|
69
|
+
...passwordInnerInputSize
|
|
70
|
+
},
|
|
71
|
+
"&::placeholder": {
|
|
72
|
+
color: themeColor(theme2, "carbon", 6)
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
}
|
|
45
77
|
return {
|
|
46
78
|
label: {
|
|
47
79
|
color: themeColor(theme2, "carbon", 8),
|
|
@@ -54,10 +86,12 @@ function getInputStyles(theme2, props) {
|
|
|
54
86
|
fontSize: 12
|
|
55
87
|
},
|
|
56
88
|
input: {
|
|
57
|
-
...inputSize,
|
|
58
89
|
color: theme2.colors.carbon[8],
|
|
59
90
|
border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
|
|
60
91
|
backgroundColor: themeColor(theme2, "carbon", 0),
|
|
92
|
+
"&:not(.mantine-Textarea-input)": {
|
|
93
|
+
...inputSize
|
|
94
|
+
},
|
|
61
95
|
"&:hover": {
|
|
62
96
|
borderColor: themeColor(theme2, "carbon", 5)
|
|
63
97
|
},
|
|
@@ -98,13 +132,16 @@ function getInputStyles(theme2, props) {
|
|
|
98
132
|
borderColor: themeColor(theme2, "red", 4)
|
|
99
133
|
},
|
|
100
134
|
"&::placeholder": {
|
|
101
|
-
color: themeColor(theme2, "carbon",
|
|
135
|
+
color: themeColor(theme2, "carbon", 2)
|
|
102
136
|
}
|
|
103
137
|
}
|
|
104
138
|
}
|
|
105
139
|
},
|
|
106
140
|
section: {
|
|
107
|
-
overflow: "hidden"
|
|
141
|
+
overflow: "hidden",
|
|
142
|
+
"& .mantine-PasswordInput-visibilityToggle svg": {
|
|
143
|
+
color: themeColor(theme2, "carbon", 6)
|
|
144
|
+
}
|
|
108
145
|
}
|
|
109
146
|
};
|
|
110
147
|
}
|
|
@@ -512,8 +549,6 @@ const theme = createTheme({
|
|
|
512
549
|
withCheckIcon: false
|
|
513
550
|
},
|
|
514
551
|
styles: (theme2, props) => {
|
|
515
|
-
const styles = getInputStyles(theme2, { size: props.size });
|
|
516
|
-
const height = styles.input.height;
|
|
517
552
|
return {
|
|
518
553
|
label: {
|
|
519
554
|
lineHeight: "20px",
|
|
@@ -523,8 +558,6 @@ const theme = createTheme({
|
|
|
523
558
|
color: themeColor(theme2, "carbon", 7)
|
|
524
559
|
},
|
|
525
560
|
input: {
|
|
526
|
-
height,
|
|
527
|
-
minHeight: height,
|
|
528
561
|
color: themeColor(theme2, "carbon", 8),
|
|
529
562
|
...props.variant === "unstyled" && {
|
|
530
563
|
border: "none",
|
|
@@ -571,8 +604,6 @@ const theme = createTheme({
|
|
|
571
604
|
withCheckIcon: false
|
|
572
605
|
},
|
|
573
606
|
styles: (theme2, props) => {
|
|
574
|
-
const styles = getInputStyles(theme2, { size: props.size });
|
|
575
|
-
const inputHeight = styles.input.height;
|
|
576
607
|
return {
|
|
577
608
|
label: {
|
|
578
609
|
fontSize: 14,
|
|
@@ -587,9 +618,6 @@ const theme = createTheme({
|
|
|
587
618
|
color: themeColor(theme2, "carbon", 6)
|
|
588
619
|
}
|
|
589
620
|
},
|
|
590
|
-
wrapper: {
|
|
591
|
-
height: inputHeight + 2
|
|
592
|
-
},
|
|
593
621
|
pill: {
|
|
594
622
|
backgroundColor: themeColor(theme2, "carbon", 3),
|
|
595
623
|
color: themeColor(theme2, "carbon", 8),
|
|
@@ -634,11 +662,7 @@ const theme = createTheme({
|
|
|
634
662
|
styles: getInputStyles
|
|
635
663
|
},
|
|
636
664
|
Textarea: {
|
|
637
|
-
styles:
|
|
638
|
-
const styles = getInputStyles(theme2, props);
|
|
639
|
-
styles.input.height = void 0;
|
|
640
|
-
return styles;
|
|
641
|
-
}
|
|
665
|
+
styles: getInputStyles
|
|
642
666
|
},
|
|
643
667
|
Badge: {
|
|
644
668
|
defaultProps: {
|