Skip to content

Commit fa1ef8b

Browse files
zzcrzzcr
authored
refactor(theme): [ip-address] refactor ip-address theme vars (#2222)
* refactor(theme): [ip-address] refactor ip-address theme vars * refactor(theme): [ip-address] refactor ip-address theme vars
1 parent 8928877 commit fa1ef8b

File tree

3 files changed

+67
-70
lines changed

3 files changed

+67
-70
lines changed

‎examples/sites/demos/pc/app/ip-address/size.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ test('ipAddress 输入框大小', async ({ page }) => {
77
const demo = page.locator('#size')
88
const ipAddress = demo.locator('.tiny-ip-address__input')
99

10-
await expect(ipAddress.first()).toHaveCSS('height', '42px')
10+
await expect(ipAddress.first()).toHaveCSS('height', '40px')
1111
await expect(ipAddress.nth(1)).toHaveCSS('height', '32px')
1212
await expect(ipAddress.nth(2)).toHaveCSS('height', '28px')
1313
await expect(ipAddress.nth(3)).toHaveCSS('height', '24px')

‎packages/theme/src/ip-address/index.less

Lines changed: 39 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
@ip-address-prefix-cls: ~'@{css-prefix}ip-address';
1919

2020
.@{ip-address-prefix-cls} {
21-
.component-css-vars-ip-address();
21+
.inject-IpAddress-vars();
2222

23-
width: var(--ti-ip-address-normal-width);
23+
width: var(--tv-IpAddress-normal-width);
2424
max-width: 100%;
2525
outline: 0;
2626
display: inline-table;
@@ -30,11 +30,11 @@
3030
&__input {
3131
position: relative;
3232
width: 100%;
33-
border: 1px solid var(--ti-ip-address-normal-border-color);
34-
color: var(--ti-ip-address-normal-text-color);
35-
border-radius: var(--ti-ip-address-border-radius);
36-
background: var(--ti-ip-address-normal-bg-color);
37-
font-size: var(--ti-ip-address-font-size);
33+
border: 1px solid var(--tv-IpAddress-normal-border-color);
34+
color: var(--tv-IpAddress-normal-text-color);
35+
border-radius: var(--tv-IpAddress-border-radius);
36+
background: var(--tv-IpAddress-normal-bg-color);
37+
font-size: var(--tv-IpAddress-font-size);
3838
display: flex;
3939
align-items: center;
4040
justify-content: center;
@@ -44,22 +44,22 @@
4444
transition: border 0.3s;
4545
outline: 0;
4646
box-sizing: border-box;
47-
.input-readonly(@color: var(--ti-ip-address-border-color-hover));
48-
.placeholder(@color: var(--ti-ip-address-normal-disabled-text-color)); //placeholder属性兼容处理
47+
.input-readonly(@color: var(--tv-IpAddress-border-color-hover));
48+
.placeholder(@color: var(--tv-IpAddress-normal-disabled-text-color)); //placeholder属性兼容处理
4949

5050
&:hover {
5151
cursor: pointer;
52-
border: 1px solid var(--ti-ip-address-border-color-hover);
53-
color: var(--ti-ip-address-normal-text-color);
54-
.placeholder(@color: var(--ti-ip-address-normal-disabled-text-color));
52+
border: 1px solid var(--tv-IpAddress-border-color-hover);
53+
color: var(--tv-IpAddress-normal-text-color);
54+
.placeholder(@color: var(--tv-IpAddress-normal-disabled-text-color));
5555
}
5656

5757
&:focus,
5858
&:active,
5959
&.active,
6060
&[active] {
61-
border: 1px solid var(--ti-ip-address-border-color-focus);
62-
color: var(--ti-ip-address-normal-text-color);
61+
border: 1px solid var(--tv-IpAddress-border-color-focus);
62+
color: var(--tv-IpAddress-normal-text-color);
6363
}
6464

6565
&:focus {
@@ -70,13 +70,13 @@
7070
&[disabled] {
7171
cursor: not-allowed;
7272
pointer-events: none;
73-
border: 1px solid var(--ti-ip-address-disabled-border-color);
74-
color: var(--ti-ip-address-normal-disabled-text-color);
75-
background: var(--ti-ip-address-disabled-bg-color);
73+
border: 1px solid var(--tv-IpAddress-disabled-border-color);
74+
color: var(--tv-IpAddress-normal-disabled-text-color);
75+
background: var(--tv-IpAddress-disabled-bg-color);
7676
box-shadow: none;
7777

7878
.@{css-prefix}svg {
79-
fill: var(--ti-ip-address-normal-disabled-text-color);
79+
fill: var(--tv-IpAddress-normal-disabled-text-color);
8080
}
8181
}
8282

@@ -87,77 +87,75 @@
8787
align-items: center;
8888

8989
> input {
90-
font-size: var(--ti-ip-address-font-size);
90+
font-size: var(--tv-IpAddress-font-size);
9191
border: none;
9292
text-align: center;
9393
outline: none;
9494
background: none;
95-
color: var(--ti-ip-address-normal-text-color);
96-
font-family: var(--ti-ip-address-normal-font-family);
97-
width: var(--ti-ip-address-input-width);
95+
color: var(--tv-IpAddress-normal-text-color);
96+
font-family: var(--tv-IpAddress-normal-font-family);
97+
width: var(--tv-IpAddress-input-width);
9898
float: left;
9999
padding: 0;
100100

101101
&:focus,
102102
&:active,
103103
&.active,
104104
&[active] {
105-
color: var(--ti-ip-address-normal-text-color);
105+
color: var(--tv-IpAddress-normal-text-color);
106106
}
107107

108108
&:hover {
109109
cursor: pointer;
110-
color: var(--ti-ip-address-normal-text-color);
110+
color: var(--tv-IpAddress-normal-text-color);
111111
}
112112

113113
&.disabled,
114114
&[disabled] {
115-
color: var(--ti-ip-address-normal-disabled-text-color);
115+
color: var(--tv-IpAddress-normal-disabled-text-color);
116116
}
117117
}
118118

119119
svg {
120120
vertical-align: middle;
121-
fill: var(--ti-ip-address-icon-color);
122-
width: var(--ti-ip-address-icon-size);
123-
height: var(--ti-ip-address-icon-size);
121+
fill: var(--tv-IpAddress-icon-color);
122+
width: var(--tv-IpAddress-icon-size);
123+
height: var(--tv-IpAddress-icon-size);
124124
}
125125

126126
&:last-child {
127-
margin-right: var(--ti-ip-address-padding-horizontal);
127+
margin-right: var(--tv-IpAddress-padding-x);
128+
128129
> svg {
129130
display: none;
130131
}
131132
}
132133

133134
&:first-child {
134-
margin-left: var(--ti-ip-address-padding-horizontal);
135+
margin-left: var(--tv-IpAddress-padding-x);
135136
}
136137
}
137138

138139
&__ipv6-delimiter {
139-
width: var(--ti-ip-address-icon-width);
140+
width: var(--tv-IpAddress-icon-width);
140141
text-align: center;
141-
margin: 0 var(--ti-ip-address-ipv6-delimiter-margin-right);
142+
margin: 0 var(--tv-IpAddress-ipv6-delimiter-margin-right);
142143
}
144+
143145
&.medium li input {
144-
height: var(--ti--ip--address-medium-height);
145-
line-height: var(--ti--ip--address-medium-line-height);
146+
height: var(--tv-IpAddress-medium-height);
146147
}
147148

148149
&.default li input {
149-
height: var(--ti--ip--address-default-height);
150-
line-height: var(--ti--ip--address-default-line-height);
150+
height: var(--tv-IpAddress-default-height);
151151
}
152152

153153
&.small li input {
154-
height: var(--ti--ip--address-small-height);
155-
line-height: var(--ti--ip--address-small-line-height);
154+
height: var(--tv-IpAddress-small-height);
156155
}
157156

158157
&.mini li input {
159-
height: var(--ti--ip--address-mini-height);
160-
line-height: var(--ti--ip--address-mini-line-height);
161-
}
158+
height: var(--tv-IpAddress-mini-height);
159+
}
162160
}
163161
}

‎packages/theme/src/ip-address/vars.less

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,49 @@
1010
*
1111
*/
1212

13-
.component-css-vars-ip-address() {
13+
.inject-IpAddress-vars() {
1414
// IP地址输入框高度
15-
--ti-ip-address-normal-height: var(--ti-common-size-8x, 32px);
15+
--tv-IpAddress-normal-height: var(--tv-size-height-md);
1616
// IP地址输入框宽度
17-
--ti-ip-address-normal-width: calc(var(--ti-common-size-base, 4px) * 45.5);
17+
--tv-IpAddress-normal-width: 182px;
1818
// IP地址输入框默认水平内边距
19-
--ti-ip-address-padding-horizontal: var(--ti-common-space-3x, 12px);
19+
--tv-IpAddress-padding-x: var(--tv-space-lg);
2020
// Ip6单个内容左margin
21-
--ti-ip-address-ipv6-delimiter-margin-right: var(--ti-common-space-base, 4px);
21+
--tv-IpAddress-ipv6-delimiter-margin-right: var(--tv-space-sm);
2222
// IP地址输入框默认文本色
23-
--ti-ip-address-normal-text-color: var(--ti-common-color-info-normal, #191919);
23+
--tv-IpAddress-normal-text-color: var(--tv-color-text);
2424
// IP地址输入框图标文本色
25-
--ti-ip-address-icon-color: var(--ti-common-color-info-normal, #191919);
25+
--tv-IpAddress-icon-color: var(--tv-color-icon);
2626
// IP地址输入框图标尺寸
27-
--ti-ip-address-icon-size: calc(var(--ti-common-size-base, 4px) * 2.5);
27+
--tv-IpAddress-icon-size: 10px;
2828
// IP地址输入框禁用文本色
29-
--ti-ip-address-normal-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
29+
--tv-IpAddress-normal-disabled-text-color: var(--tv-color-text-disabled);
3030
// IP地址输入框默认边框色
31-
--ti-ip-address-normal-border-color: var(--ti-common-color-line-normal, #c2c2c2);
31+
--tv-IpAddress-normal-border-color: var(--tv-color-border);
3232
// IP地址输入框默认背景色
33-
--ti-ip-address-normal-bg-color: var(--ti-common-color-light, #ffffff);
33+
--tv-IpAddress-normal-bg-color: var(--tv-color-bg-secondary);
3434
// IP地址输入框圆角
35-
--ti-ip-address-border-radius: var(--ti-common-border-radius-normal, 6px);
35+
--tv-IpAddress-border-radius: var(--tv-border-radius-md);
3636
// IP地址输入框字号
37-
--ti-ip-address-font-size: var(--ti-common-font-size-1, 14px);
37+
--tv-IpAddress-font-size: var(--tv-font-size-md);
3838
// IP地址输入框字族
39-
--ti-ip-address-normal-font-family: "Manrop","Manrope-Medium";
39+
--tv-IpAddress-normal-font-family: var(--tv-font-family-1);
4040
// IP地址输入框聚焦边框色
41-
--ti-ip-address-border-color-focus: var(--ti-common-color-line-active, #191919);
41+
--tv-IpAddress-border-color-focus: var(--tv-color-border-active);
4242
// IP地址输入框悬浮边框色
43-
--ti-ip-address-border-color-hover: var(--ti-common-color-line-hover, #191919);
43+
--tv-IpAddress-border-color-hover: var(--tv-color-border-hover);
4444
// IP地址输入框禁用背景色
45-
--ti-ip-address-disabled-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
45+
--tv-IpAddress-disabled-bg-color: var(--tv-color-bg-disabled);
4646
// IP地址输入框禁用边框色
47-
--ti-ip-address-disabled-border-color: var(--ti-common-color-line-disabled, #dbdbdb);
47+
--tv-IpAddress-disabled-border-color: var(--tv-color-border-disabled);
4848
// Ip地址输入框item宽度
49-
--ti-ip-address-input-width: var(--ti-common-size-8x, 32px);
50-
// 尺寸 高度及行高
51-
--ti--ip--address-medium-height: calc(var(--ti-common-size-height-medium));
52-
--ti--ip--address-medium-line-height: calc(var(--ti-common-line-height-5, 36px) + 2px);
53-
--ti--ip--address-default-height: calc(var(--ti-common-size-height-normal, 32px) - 2px);
54-
--ti--ip--address-default-line-height: var(--ti-common-line-height-4, 30px);
55-
--ti--ip--address-small-height: calc(var(--ti-common-size-height-minor, 30px) - 4px);
56-
--ti--ip--address-small-line-height: calc(var(--ti-common-line-height-3, 28px) - 2px);
57-
--ti--ip--address-mini-height: calc(var(--ti-common-size-height-mini, 24px) - 2px);
58-
--ti--ip--address-mini-line-height: calc(var(--ti-common-line-height-2, 24px) - 2px);
49+
--tv-IpAddress-input-width: 32px;
50+
// 大尺寸高度
51+
--tv-IpAddress-medium-height: calc(var(--tv-size-height-lg) - 2px);
52+
// 默认尺寸高度
53+
--tv-IpAddress-default-height: calc(var(--tv-size-height-md) - 2px);
54+
// 小尺寸高度
55+
--tv-IpAddress-small-height: calc(var(--tv-size-height-sm) - 2px);
56+
// 超小尺寸高度
57+
--tv-IpAddress-mini-height: calc(var(--tv-size-height-xs) - 2px);
5958
}

0 commit comments

Comments
 (0)