Skip to content

Commit b8b2729

Browse files
zzcrzzcr
authored
refactor(theme): [input] refactor textarea theme vars (#2281)
* refactor(theme): [input] refactor textarea theme vars * refactor(theme): [input] refactor textarea theme vars
1 parent a679980 commit b8b2729

File tree

2 files changed

+66
-72
lines changed

2 files changed

+66
-72
lines changed

‎packages/theme/src/textarea/index.less

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@
2020
@input-prefix-cls: ~'@{css-prefix}input';
2121

2222
.@{textarea-prefix-cls} {
23-
.component-css-vars-textarea();
23+
.inject-Textarea-vars();
2424

2525
position: relative;
2626
display: inline-block;
2727
width: 100%;
2828
vertical-align: bottom;
29-
font-size: var(--ti-textarea-font-size);
29+
font-size: var(--tv-Textarea-font-size);
3030

3131
&:before {
3232
content: '';
@@ -37,7 +37,7 @@
3737
top: 1px;
3838
z-index: 1;
3939
background: #fff;
40-
border-radius: var(--ti-textarea-border-radius);
40+
border-radius: var(--tv-Textarea-border-radius);
4141
}
4242

4343
&:after {
@@ -49,95 +49,94 @@
4949
bottom: 1px;
5050
z-index: 1;
5151
background: #fff;
52-
border-radius: var(--ti-textarea-border-radius);
52+
border-radius: var(--tv-Textarea-border-radius);
5353
}
5454

5555
&.is-disabled &__inner {
56-
background-color: var(--ti-textarea-disabled-bg-color);
57-
border-color: var(--ti-textarea-border-color);
58-
color: var(--ti-textarea-disabled-text-color);
56+
background-color: var(--tv-Textarea-disabled-bg-color);
57+
border-color: var(--tv-Textarea-border-color);
58+
color: var(--tv-Textarea-disabled-text-color);
5959
cursor: not-allowed;
60-
.placeholder(@color: var(--ti-textarea-placeholder-text-color));
60+
.placeholder(@color: var(--tv-Textarea-placeholder-text-color));
6161
}
6262

6363
&.is-disabled {
64-
background-color: var(--ti-textarea-disabled-bg-color);
64+
background-color: var(--tv-Textarea-disabled-bg-color);
6565

6666
&:before {
67-
background-color: var(--ti-textarea-disabled-bg-color);
67+
background-color: var(--tv-Textarea-disabled-bg-color);
6868
}
6969

7070
&:after {
71-
background-color: var(--ti-textarea-disabled-bg-color);
71+
background-color: var(--tv-Textarea-disabled-bg-color);
7272
}
7373

7474
&:hover {
75-
border-color: var(--ti-textarea-border-color);
75+
border-color: var(--tv-Textarea-border-color);
7676
}
7777
}
7878

7979
&.is-exceed {
8080
.@{textarea-prefix-cls}__inner {
81-
border-color: var(--ti-textarea-exceed-text-color);
81+
border-color: var(--tv-Textarea-exceed-text-color);
8282
}
8383

8484
.@{input-prefix-cls}__count {
85-
color: var(--ti-textarea-exceed-text-color);
85+
color: var(--tv-Textarea-exceed-text-color);
8686

8787
&-text-length {
88-
color: var(--ti-textarea-exceed-text-color);
88+
color: var(--tv-Textarea-exceed-text-color);
8989
}
9090
}
9191
}
9292

9393
.@{input-prefix-cls}__count {
94-
color: var(--ti-textarea-count-color);
95-
background: var(--ti-textarea-bg-color);
96-
font-size: var(--ti-textarea-count-font-size);
94+
color: var(--tv-Textarea-count-color);
95+
background: var(--tv-Textarea-bg-color);
96+
font-size: var(--tv-Textarea-count-font-size);
9797
text-align: right;
9898
position: absolute;
9999
z-index: 2;
100100
line-height: 1.5;
101-
bottom: var(--ti-textarea-count-bottom);
102-
right: var(--ti-textarea-count-right);
103-
width: var(--ti-textarea-count-width);
104-
border-bottom-left-radius: var(--ti-textarea-count-border-radius);
105-
padding-right: var(--ti-textarea-count-padding-right);
101+
bottom: 1px;
102+
right: var(--tv-Textarea-count-right);
103+
width: calc(100% - 17px);
104+
border-bottom-left-radius: var(--tv-Textarea-count-border-radius);
105+
padding-right: var(--tv-Textarea-count-padding-right);
106106

107107
&-text-length {
108-
color: var(--ti-textarea-count-text-length-color);
108+
color: var(--tv-Textarea-count-text-length-color);
109109
}
110110
}
111111

112112
&__inner {
113113
display: block;
114-
width: var(--ti-textarea-inner-width);
114+
width: 100%;
115115
min-height: 60px;
116-
min-height: calc(var(--ti-textarea-height, 30px) * 2);
117-
color: var(--ti-textarea-text-color);
118-
border: 1px solid var(--ti-textarea-border-color);
119-
border-radius: var(--ti-textarea-border-radius);
120-
background: var(--ti-textarea-bg-color);
121-
padding: var(--ti-textarea-padding-vertical) var(--ti-textarea-padding-horizontal);
122-
padding-bottom: var(--ti-textarea-padding-bottom);
116+
min-height: calc(var(--tv-Textarea-height, 30px) * 2);
117+
color: var(--tv-Textarea-text-color);
118+
border: 1px solid var(--tv-Textarea-border-color);
119+
border-radius: var(--tv-Textarea-border-radius);
120+
background: var(--tv-Textarea-bg-color);
121+
padding: var(--tv-Textarea-padding-y) var(--tv-Textarea-padding-x);
122+
padding-bottom: var(--tv-Textarea-padding-bottom);
123123
line-height: 1.5;
124-
font-size: var(--ti-textarea-font-size);
125-
font-family: var(--ti-textarea-font-family);
124+
font-size: var(--tv-Textarea-font-size);
126125
resize: vertical;
127126
box-sizing: border-box;
128127
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
129-
.placeholder(@color: var(--ti-textarea-placeholder-text-color));
128+
.placeholder(@color: var(--tv-Textarea-placeholder-text-color));
130129

131130
&:hover {
132-
border-color: var(--ti-textarea-inner-hover-border-color);
131+
border-color: var(--tv-Textarea-inner-hover-border-color);
133132
}
134133

135134
&:focus {
136-
border-color: var(--ti-textarea-inner-active-border-color);
135+
border-color: var(--tv-Textarea-inner-active-border-color);
137136
}
138137

139138
.@{textarea-prefix-cls}:has(&:focus) {
140-
border-color: var(--ti-textarea-active-border-color);
139+
border-color: var(--tv-Textarea-active-border-color);
141140
}
142141

143142
&:hover,
@@ -232,6 +231,7 @@
232231
overflow: hidden;
233232
word-wrap: break-word;
234233
white-space: pre-wrap;
234+
line-height: 1.5;
235235

236236
&:before {
237237
content: '';
@@ -243,7 +243,7 @@
243243
.more-btn {
244244
float: right;
245245
clear: both;
246-
color: #1890ff;
246+
color: var(--tv-Textarea-more-btn-text-color);
247247
font-size: 12px;
248248
line-height: 12px;
249249
cursor: pointer;

‎packages/theme/src/textarea/vars.less

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,61 +10,55 @@
1010
*
1111
*/
1212

13-
.component-css-vars-textarea() {
13+
.inject-Textarea-vars() {
1414
// 文本域文本颜色
15-
--ti-textarea-text-color: var(--ti-common-color-text-primary, #191919);
15+
--tv-Textarea-text-color: var(--tv-color-text);
16+
// 文本域超出更多按钮文本颜色
17+
--tv-Textarea-more-btn-text-color: var(--tv-color-text-link);
1618
// 文本域背景颜色
17-
--ti-textarea-bg-color: var(--ti-common-color-icon-white, #fff);
19+
--tv-Textarea-bg-color: var(--tv-color-bg-secondary);
1820
// 文本域字体大小
19-
--ti-textarea-font-size: var(--ti-common-font-size-base, 14px);
21+
--tv-Textarea-font-size: var(--tv-font-size-md);
2022
// 文本域计数器字体大小
21-
--ti-textarea-count-font-size: var(--ti-common-font-size-0, 12px);
23+
--tv-Textarea-count-font-size: var(--tv-font-size-sm);
2224
// 文本域高度
23-
--ti-textarea-height: var(--ti-common-size-height-normal, 32px);
25+
--tv-Textarea-height: var(--tv-size-height-md);
2426
// 文本域边框圆角
25-
--ti-textarea-border-radius: var(--ti-common-border-radius-normal, 6px);
27+
--tv-Textarea-border-radius: var(--tv-border-radius-md);
2628
// 文本域边框色
27-
--ti-textarea-border-color: var(--ti-common-color-line-normal, #c2c2c2);
29+
--tv-Textarea-border-color: var(--tv-color-border);
2830
// 文本域内层hover时显示的边框颜色
29-
--ti-textarea-inner-hover-border-color: var(--ti-common-color-border-hover, #191919);
31+
--tv-Textarea-inner-hover-border-color: var(--tv-color-border-hover);
3032
// 文本域内层active时显示的边框颜色
31-
--ti-textarea-inner-active-border-color: var(--ti-common-color-line-active, #191919);
33+
--tv-Textarea-inner-active-border-color: var(--tv-color-border-active);
3234
// 文本域占位符文本颜色
33-
--ti-textarea-placeholder-text-color: var(--ti-common-color-text-weaken, #808080);
35+
--tv-Textarea-placeholder-text-color: var(--tv-color-text-placeholder);
3436
// 文本域disabled时的文本颜色
35-
--ti-textarea-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
37+
--tv-Textarea-disabled-text-color: var(--tv-color-text-disabled);
3638
// 文本域disabled时的背景颜色
37-
--ti-textarea-disabled-bg-color: #f2f2f2;
39+
--tv-Textarea-disabled-bg-color: var(--tv-color-bg-disabled);
3840
// 文本域exceed时的文本颜色
39-
--ti-textarea-exceed-text-color: #c7000b;
41+
--tv-Textarea-exceed-text-color: var(--tv-color-error-text);
4042
// 计数器的颜色
41-
--ti-textarea-count-color: var(--ti-common-color-text-weaken, #808080);
43+
--tv-Textarea-count-color: var(--tv-color-text-weaken);
4244
// 文本框垂直方向内边距
43-
--ti-textarea-padding-vertical: var(--ti-common-space-2x, 8px);
45+
--tv-Textarea-padding-y: var(--tv-space-md);
4446
// 文本框水平方向内边距
45-
--ti-textarea-padding-horizontal: var(--ti-common-space-3x, 12px);
47+
--tv-Textarea-padding-x: var(--tv-space-lg);
4648
// 文本框右侧内边距
47-
--ti-textarea-padding-right: var(--ti-common-space-base, 4px);
49+
--tv-Textarea-padding-right: var(--tv-space-sm);
4850
// 文本框底部内边距
49-
--ti-textarea-padding-bottom: var(--ti-common-space-4x, 16px);
50-
// 计数器底部距离
51-
--ti-textarea-count-bottom: 1px;
51+
--tv-Textarea-padding-bottom: var(--tv-space-xl);
5252
// 计数器右侧距离
53-
--ti-textarea-count-right: var(--ti-common-font-size-2, 16px);
53+
--tv-Textarea-count-right: var(--tv-space-xl);
5454
// 文本域active时显示的边框颜色
55-
--ti-textarea-active-border-color: var(--ti-common-color-line-active, #191919);
56-
// 计数器宽度
57-
--ti-textarea-count-width: calc(100% - 17px);
58-
// 文本域宽度
59-
--ti-textarea-inner-width: 100%;
55+
--tv-Textarea-active-border-color: var(--tv-color-border-active);
6056
// 计数器圆角
61-
--ti-textarea-count-border-radius: var(--ti-common-border-radius-3, 6px);
57+
--tv-Textarea-count-border-radius: var(--tv-border-radius-md);
6258
// 计数器文本字数颜色
63-
--ti-textarea-count-text-length-color: var(--ti-common-color-text-primary, #191919);
59+
--tv-Textarea-count-text-length-color: var(--tv-color-text);
6460
// 计数器右侧内边距
65-
--ti-textarea-count-padding-right: var(--ti-common-space-base, 4px);
66-
// 文本框字体
67-
--ti-textarea-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei');
61+
--tv-Textarea-count-padding-right: var(--tv-space-sm);
6862
// 计数器行高
69-
--ti-textarea-count-line-height: var(--ti-textarea-count-font-size);
63+
--tv-Textarea-count-line-height: var(--tv-Textarea-count-font-size);
7064
}

0 commit comments

Comments
 (0)