Skip to content

Commit 6cb0cda

Browse files
zzcrzzcr
authored
refactor(swicth): [switch]refactor switch theme (#2183)
* refactor(swicth): [switch]refactor witch theme * refactor(swicth): [switch]refactor witch theme
1 parent 18c54b2 commit 6cb0cda

File tree

3 files changed

+78
-82
lines changed

3 files changed

+78
-82
lines changed

‎examples/sites/demos/pc/app/switch/basic-usage.spec.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ test('基本用法', async ({ page }) => {
88
const switchBtn = demo.locator('.tiny-switch')
99

1010
await expect(switchBtn).toHaveCSS('background-color', 'rgb(20, 118, 255)')
11-
await expect(switchBtn).toHaveCSS('border-top-color', 'rgb(20, 118, 255)')
1211
await switchBtn.click()
1312
await expect(switchBtn).toHaveCSS('background-color', 'rgb(194, 194, 194)')
14-
await expect(switchBtn).toHaveCSS('border-top-color', 'rgb(194, 194, 194)')
1513
})

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

Lines changed: 38 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,15 @@
1616
@switch-prefix-cls: ~'@{css-prefix}switch';
1717

1818
.@{switch-prefix-cls} {
19-
.component-css-vars-switch();
19+
.inject-Switch-vars();
2020

2121
display: inline-block;
22-
width: var(--ti-switch-width);
23-
height: var(--ti-switch-height);
24-
line-height: calc(var(--ti-switch-height) - var(--ti-switch-border-weight) * 2);
25-
border-radius: var(--ti-switch-border-radius);
22+
width: var(--tv-Switch-width);
23+
height: var(--tv-Switch-height);
24+
line-height: var(--tv-Switch-height);
25+
border-radius: var(--tv-Switch-border-radius);
2626
vertical-align: middle;
27-
border: var(--ti-switch-border-weight) solid var(--ti-switch-off-bg-color);
28-
background-color: var(--ti-switch-off-bg-color);
27+
background-color: var(--tv-Switch-off-bg-color);
2928
position: relative;
3029
cursor: pointer;
3130
outline: none;
@@ -34,103 +33,99 @@
3433
background-color 0.2s ease-in-out;
3534

3635
&:focus-visible {
37-
outline: 2px solid var(--ti-switch-on-bg-color);
36+
outline: 2px solid var(--tv-Switch-on-bg-color);
3837
outline-offset: 1px;
3938
}
4039

4140
& &-inner {
42-
color: var(--ti-switch-text-color);
43-
font-size: var(--ti-switch-inner-font-size);
41+
color: var(--tv-Switch-text-color);
42+
font-size: var(--tv-Switch-inner-font-size);
4443
position: absolute;
4544
}
4645

4746
&__text {
48-
width: var(--ti-switch-text-width);
47+
width: var(--tv-Switch-text-width);
4948
.@{switch-prefix-cls}-inner {
50-
left: calc(var(--ti-switch-dot-size));
51-
width: calc(100% - var(--ti-switch-dot-size));
49+
left: calc(var(--tv-Switch-dot-size));
50+
width: calc(100% - var(--tv-Switch-dot-size));
5251
text-align: center;
5352
overflow: hidden;
5453
}
5554
}
5655

5756
&__on-loading {
58-
font-size: var(--ti-switch-on-loading-font-size);
59-
fill: var(--ti-switch-on-loading-fill);
57+
font-size: var(--tv-Switch-on-loading-font-size);
58+
fill: var(--tv-Switch-on-loading-fill);
6059
}
60+
6161
&__off-loading {
62-
font-size: var(--ti-switch-off-loading-font-size);
63-
fill: var(--ti-switch-off-loading-fill);
62+
font-size: var(--tv-Switch-off-loading-font-size);
63+
fill: var(--tv-Switch-off-loading-fill);
6464
}
65+
6566
&__loading-mini {
66-
font-size: var(--ti-switch-loading-mini-font-size);
67+
font-size: var(--tv-Switch-loading-mini-font-size);
6768
}
6869

6970
&.mini {
70-
width: var(--ti-switch-mini-width);
71-
height: var(--ti-switch-mini-height);
71+
width: var(--tv-Switch-mini-width);
72+
height: var(--tv-Switch-mini-height);
7273
}
7374

7475
&&-checked.disabled,
7576
&.disabled {
7677
cursor: not-allowed;
77-
background: var(--ti-switch-disabled-bg-color);
78-
border-color: var(--ti-switch-disabled-bg-color);
78+
background: var(--tv-Switch-disabled-bg-color);
79+
border-color: var(--tv-Switch-disabled-bg-color);
7980

80-
&::after {
81-
background: var(--ti-switch-disabled-dot-bg-color);
81+
&:after {
8282
cursor: not-allowed;
8383
}
84-
85-
.@{switch-prefix-cls}-inner {
86-
color: var(--ti-switch-disabled-text-color);
87-
}
8884
}
8985

9086
&&-checked.disabled {
91-
background: var(--ti-switch-checked-disabled-bg-color);
92-
border-color: var(--ti-switch-checked-disabled-border-color);
87+
background: var(--tv-Switch-checked-disabled-bg-color);
9388
}
9489

9590
&__button {
9691
display: flex;
9792
justify-content: center;
9893
align-items: center;
9994
content: '';
100-
width: var(--ti-switch-dot-size);
101-
height: var(--ti-switch-dot-size);
95+
width: var(--tv-Switch-dot-size);
96+
height: var(--tv-Switch-dot-size);
10297
border-radius: 50%;
103-
background-color: var(--ti-switch-dot-bg-color);
98+
background-color: var(--tv-Switch-dot-bg-color);
10499
position: absolute;
105-
left: var(--ti-switch-dot-position-left); // smb新增
106-
top: var(--ti-switch-dot-position-top); // smb新增
100+
left: var(--tv-Switch-dot-position-left);
101+
top: var(--tv-Switch-dot-position-top);
107102
cursor: pointer;
108103
transition:
109104
left 0.2s ease-in-out,
110105
width 0.2s ease-in-out;
111106
}
112107

113108
&.mini &__button {
114-
height: var(--ti-switch-mini-button-height);
115-
width: var(--ti-switch-mini-button-width);
116-
}
109+
height: var(--tv-Switch-mini-button-height);
110+
width: var(--tv-Switch-mini-button-width);
111+
}
117112

118113
&&-checked {
119-
border-color: var(--ti-switch-on-bg-color);
120-
background-color: var(--ti-switch-on-bg-color);
114+
background-color: var(--tv-Switch-on-bg-color);
121115

122116
.@{switch-prefix-cls}-inner {
123117
left: 2px;
124-
width: calc(100% - var(--ti-switch-dot-size));
118+
width: calc(100% - var(--tv-Switch-dot-size));
125119
text-align: center;
126120
overflow: hidden;
127121
}
128122
}
129123

130124
&&-checked .@{switch-prefix-cls}__button {
131-
left: calc(100% - var(--ti-switch-dot-offset));
125+
left: calc(100% - var(--tv-Switch-dot-offset));
132126
}
127+
133128
&&-checked&.mini &__button {
134-
left: var(--ti-switch-mini-button-left);
129+
left: var(--tv-Switch-mini-button-left);
135130
}
136131
}

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

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,58 +10,61 @@
1010
*
1111
*/
1212

13-
.component-css-vars-switch() {
13+
.inject-Switch-vars() {
1414
// 开关开启状态背景色
15-
--ti-switch-on-bg-color: var(--ti-common-color-data-1);
15+
--tv-Switch-on-bg-color: var(--tv-color-bg-active-control);
1616
// 开关关闭状态背景色
17-
--ti-switch-off-bg-color: #C2C2C2;
17+
--tv-Switch-off-bg-color: var(--tv-color-bg-control);
1818
// 开关关闭禁用状态背景色
19-
--ti-switch-disabled-bg-color: var(--ti-common-color-bg-dark-disabled);
19+
--tv-Switch-disabled-bg-color: var(--tv-color-bg-disabled-control-unactive);
2020
// 开关开启禁用状态背景色
21-
--ti-switch-checked-disabled-bg-color: var(--ti-common-color-bg-light-emphasize, #beccfa);
22-
// 开关开启禁用状态边框色
23-
--ti-switch-checked-disabled-border-color: var(--ti-common-color-bg-light-emphasize, #beccfa);
21+
--tv-Switch-checked-disabled-bg-color: var(--tv-color-bg-disabled-control-active);
2422
// 开关禁用状态文本色
25-
--ti-switch-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf);
23+
--tv-Switch-disabled-text-color: var(--tv-color-text-disabled);
2624
// 开关禁用状态圆点色
27-
--ti-switch-disabled-dot-bg-color: #ffffff;
25+
--tv-Switch-disabled-dot-bg-color: var(--tv-color-bg-secondary);
2826
// 开关默认圆点色
29-
--ti-switch-dot-bg-color: var(--ti-common-color-light, #fff);
27+
--tv-Switch-dot-bg-color: var(--tv-color-bg-secondary);
3028
// 开关圆点尺寸
31-
--ti-switch-dot-size: var(--ti-common-size-4x, 16px);
29+
--tv-Switch-dot-size: 16px;
3230
// 开关圆点左边距(hide)
33-
--ti-switch-dot-position-left: 2px;
31+
--tv-Switch-dot-position-left: 2px;
3432
// 开关圆点上边距(hide)
35-
--ti-switch-dot-position-top: 2px;
33+
--tv-Switch-dot-position-top: 2px;
3634
// 开关圆点偏移量(hide)
37-
--ti-switch-dot-offset: calc(var(--ti-switch-dot-size) + 2px);
35+
--tv-Switch-dot-offset: calc(var(--tv-Switch-dot-size) + 2px);
3836
// 开关文本色
39-
--ti-switch-text-color: var(--ti-common-color-light, #fff);
37+
--tv-Switch-text-color: var(--tv-color-text-white);
4038
// 默认开关宽度
41-
--ti-switch-width: var(--ti-common-size-10x);
39+
--tv-Switch-width: 40px;
4240
// 开关高度
43-
--ti-switch-height: var(--ti-common-size-5x, 20px);
41+
--tv-Switch-height: 20px;
4442
// 开关圆角
45-
--ti-switch-border-radius: calc(var(--ti-common-border-radius-3) * 2.5);
46-
// 开关边框厚度
47-
--ti-switch-border-weight: 0px;
43+
--tv-Switch-border-radius: 15px;
4844
// 开关字号
49-
--ti-switch-inner-font-size: 12px;
50-
// 开关左侧距离(hide)
51-
--ti-switch-inner-position-left: var(--ti-common-space-4x, 16px);
45+
--tv-Switch-inner-font-size: var(--tv-font-size-sm);
46+
// 开关内部button圆角
47+
--tv-Switch-inner-border-radius: var(--tv-border-radius-round);
5248
// 自定义文本开关宽度
53-
--ti-switch-text-width: calc(var(--ti-common-size-11x, 44px) + 1px);
54-
// mini尺寸
55-
--ti-switch-mini-height: calc(var(--ti-common-size-height-normal)/2);
56-
--ti-switch-mini-width: calc(var(--ti-common-size-width-minor) + 2px);
57-
// mini尺寸button
58-
--ti-switch-mini-button-height: calc(var(--ti-common-size-height-small)/2);
59-
--ti-switch-mini-button-width: calc(var(--ti-common-size-width-mini)/2);
60-
--ti-switch-mini-button-left: calc(var(--ti-common-space-4x) + 2px);
61-
// 加载ICON样式
62-
--ti-switch-on-loading-font-size: var(--ti-common-font-size-0);
63-
--ti-switch-on-loading-fill: var(--ti-common-color-bg-light-emphasize);
64-
--ti-switch-off-loading-font-size: var(--ti-common-font-size-0);
65-
--ti-switch-off-loading-fill: #DBDBDB;
66-
--ti-switch-loading-mini-font-size: 8px;
49+
--tv-Switch-text-width: 46px;
50+
// mini尺寸高度
51+
--tv-Switch-mini-height: 16px;
52+
// mini尺寸宽度
53+
--tv-Switch-mini-width: 32px;
54+
// mini尺寸内部button高度
55+
--tv-Switch-mini-button-height: 12px;
56+
// mini尺寸内部button宽度度
57+
--tv-Switch-mini-button-width: 12px;
58+
// mini尺寸内部button宽度度
59+
--tv-Switch-mini-button-left: 18px;
60+
// 开启loading字体大小
61+
--tv-Switch-on-loading-font-size: var(--tv-font-size-sm);
62+
// 开启loading图标填充色
63+
--tv-Switch-on-loading-fill: var(--tv-color-bg-disabled-control-active);
64+
// 关闭loading字体大小
65+
--tv-Switch-off-loading-font-size: var(--tv-font-size-sm);
66+
// 关闭loading图标填充色
67+
--tv-Switch-off-loading-fill: var(--tv-color-bg-disabled-control-unactive);
68+
// mini尺寸loading大小
69+
--tv-Switch-loading-mini-font-size: 8px;
6770
}

0 commit comments

Comments
 (0)