Skip to content

Commit 766f054

Browse files
Youyou-smilesYouyou-smiles
authored
refactor(link): [link] refactor the link theme (#2273)
* refactor(link): [link] refactor the link theme * refactor(link): [link] refactor the theme
1 parent d22c32d commit 766f054

File tree

5 files changed

+109
-111
lines changed

5 files changed

+109
-111
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ test('基础用法', async ({ page }) => {
99
await expect(link.first()).toHaveText('默认链接')
1010
await expect(link.nth(1)).toHaveText('默认链接2')
1111
await link.first().hover()
12-
await expect(link.first()).toHaveCSS('color', 'rgb(82, 110, 204)')
12+
await expect(link.first()).toHaveCSS('color', 'rgb(20, 118, 255)')
1313
})

‎examples/sites/demos/pc/app/link/dynamic-disable.spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,25 @@ test('禁用', async ({ page }) => {
77
let anchor = demo.locator('a').filter({ hasText: '默认链接' })
88
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
99
await anchor.hover()
10-
await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
10+
await expect(anchor).toHaveCSS('color', 'rgb(194, 194, 194)')
1111
anchor = demo.locator('a').filter({ hasText: '主要链接' })
1212
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
1313
await anchor.hover()
14-
await expect(anchor).toHaveCSS('color', 'rgb(160, 207, 255)')
14+
await expect(anchor).toHaveCSS('color', 'rgb(194, 194, 194)')
1515
anchor = demo.locator('a').filter({ hasText: '成功链接' })
1616
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
1717
await anchor.hover()
18-
await expect(anchor).toHaveCSS('color', 'rgb(166, 195, 185)')
18+
await expect(anchor).toHaveCSS('color', 'rgb(194, 194, 194)')
1919
anchor = demo.locator('a').filter({ hasText: '警告链接' })
2020
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
2121
await anchor.hover()
22-
await expect(anchor).toHaveCSS('color', 'rgb(211, 198, 162)')
22+
await expect(anchor).toHaveCSS('color', 'rgb(194, 194, 194)')
2323
anchor = demo.locator('a').filter({ hasText: '危险链接' })
2424
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
2525
await anchor.hover()
26-
await expect(anchor).toHaveCSS('color', 'rgb(216, 186, 181)')
26+
await expect(anchor).toHaveCSS('color', 'rgb(194, 194, 194)')
2727
anchor = demo.locator('a').filter({ hasText: '信息链接' })
2828
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
2929
await anchor.hover()
30-
await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
30+
await expect(anchor).toHaveCSS('color', 'rgb(194, 194, 194)')
3131
})

‎examples/sites/demos/pc/app/link/link-style.spec.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,38 +17,38 @@ test('主题样式', async ({ page }) => {
1717
}, index)
1818

1919
let anchor = demo.locator('a').filter({ hasText: '默认链接' })
20-
await expect(anchor).toHaveCSS('color', 'rgb(37, 43, 58)')
20+
await expect(anchor).toHaveCSS('color', 'rgb(20, 118, 255)')
2121
await anchor.hover()
22-
await expect(await getAfter(1)).toBe('rgb(94, 124, 224)')
23-
await expect(anchor).toHaveCSS('color', 'rgb(82, 110, 204)')
22+
await expect(await getAfter(1)).toBe('rgb(20, 118, 255)')
23+
await expect(anchor).toHaveCSS('color', 'rgb(20, 118, 255)')
2424

2525
anchor = demo.locator('a').filter({ hasText: '主要链接' })
26-
await expect(anchor).toHaveCSS('color', 'rgb(94, 124, 224)')
26+
await expect(anchor).toHaveCSS('color', 'rgb(25, 25, 25)')
2727
await anchor.hover()
28-
await expect(await getAfter(2)).toBe('rgb(94, 124, 224)')
29-
await expect(anchor).toHaveCSS('color', 'rgb(118, 147, 245)')
28+
await expect(await getAfter(2)).toBe('rgb(25, 25, 25)')
29+
await expect(anchor).toHaveCSS('color', 'rgb(25, 25, 25)')
3030

3131
anchor = demo.locator('a').filter({ hasText: '成功链接' })
32-
await expect(anchor).toHaveCSS('color', 'rgb(80, 212, 171)')
32+
await expect(anchor).toHaveCSS('color', 'rgb(92, 179, 0)')
3333
await anchor.hover()
34-
await expect(await getAfter(3)).toBe('rgb(80, 212, 171)')
35-
await expect(anchor).toHaveCSS('color', 'rgb(172, 242, 220)')
34+
await expect(await getAfter(3)).toBe('rgb(92, 179, 0)')
35+
await expect(anchor).toHaveCSS('color', 'rgb(92, 179, 0)')
3636

3737
anchor = demo.locator('a').filter({ hasText: '警告链接' })
38-
await expect(anchor).toHaveCSS('color', 'rgb(250, 152, 65)')
38+
await expect(anchor).toHaveCSS('color', 'rgb(255, 136, 0)')
3939
await anchor.hover()
40-
await expect(await getAfter(4)).toBe('rgb(250, 152, 65)')
41-
await expect(anchor).toHaveCSS('color', 'rgb(250, 194, 10)')
40+
await expect(await getAfter(4)).toBe('rgb(255, 136, 0)')
41+
await expect(anchor).toHaveCSS('color', 'rgb(255, 136, 0)')
4242

4343
anchor = demo.locator('a').filter({ hasText: '危险链接' })
44-
await expect(anchor).toHaveCSS('color', 'rgb(199, 0, 11)')
44+
await expect(anchor).toHaveCSS('color', 'rgb(242, 48, 48)')
4545
await anchor.hover()
46-
await expect(await getAfter(5)).toBe('rgb(199, 0, 11)')
47-
await expect(anchor).toHaveCSS('color', 'rgb(214, 74, 82)')
46+
await expect(await getAfter(5)).toBe('rgb(242, 48, 48)')
47+
await expect(anchor).toHaveCSS('color', 'rgb(242, 48, 48)')
4848

4949
anchor = demo.locator('a').filter({ hasText: '信息链接' })
50-
await expect(anchor).toHaveCSS('color', 'rgb(37, 43, 58)')
50+
await expect(anchor).toHaveCSS('color', 'rgb(20, 118, 255)')
5151
await anchor.hover()
52-
await expect(await getAfter(6)).toBe('rgb(37, 43, 58)')
53-
await expect(anchor).toHaveCSS('color', 'rgb(92, 97, 115)')
52+
await expect(await getAfter(6)).toBe('rgb(20, 118, 255)')
53+
await expect(anchor).toHaveCSS('color', 'rgb(20, 118, 255)')
5454
})

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

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -19,81 +19,81 @@
1919
@svg-cls: ~'@{css-prefix}svg';
2020

2121
.@{link-prefix-cls} {
22-
.component-css-vars-link();
22+
.inject-Link-vars();
2323

2424
vertical-align: middle;
2525
position: relative;
2626
text-decoration: none;
2727
outline: 0;
2828
cursor: pointer;
2929
padding: 0;
30-
font-size: var(--ti-link-font-size);
31-
font-weight: var(--ti-link-font-weight);
30+
font-size: var(--tv-Link-font-size);
31+
font-weight: var(--tv-Link-font-weight);
3232

3333
& .@{svg-cls} {
34-
width: var(--ti-link-svg-width);
35-
height: var(--ti-link-svg-height);
36-
padding-bottom: var(--ti-link-svg-padding-bottom);
34+
width: var(--tv-Link-svg-width);
35+
height: var(--tv-Link-svg-height);
36+
padding-bottom: var(--tv-Link-svg-padding-bottom);
3737
margin-right: 0;
38-
margin-left: var(--ti-link-svg-margin-right);
38+
margin-left: var(--tv-Link-svg-margin-right);
3939
}
4040

4141
& .@{link-svg-prefix-cls} {
42-
margin-right: var(--ti-link-svg-margin-right);
42+
margin-right: var(--tv-Link-svg-margin-right);
4343
margin-left: 0;
4444
}
4545

4646
& .@{link-prefix-cls}__inner .@{svg-cls} {
4747
margin-right: 0;
48-
margin-left: var(--ti-link-svg-margin-right);
48+
margin-left: var(--tv-Link-svg-margin-right);
4949
}
5050

5151
&&--additional {
5252
&:hover {
53-
color: var(--ti-link-default-hover-text-color);
54-
fill: var(--ti-link-default-hover-text-color);
53+
color: var(--tv-Link-default-hover-text-color);
54+
fill: var(--tv-Link-default-hover-text-color);
5555
}
5656

5757
&.is-disabled {
5858
&:hover {
59-
color: var(--ti-link-default-disabled-text-color);
60-
fill: var(--ti-link-default-disabled-text-color);
59+
color: var(--tv-Link-default-disabled-text-color);
60+
fill: var(--tv-Link-default-disabled-text-color);
6161
}
6262
}
6363

6464
&:has(.@{svg-cls}):hover {
65-
font-weight: var(--ti-link-icon-hover-text-weight);
66-
color: var(--ti-link-has-svg-hover-text-color);
67-
fill: var(--ti-link-has-svg-hover-text-color);
65+
font-weight: var(--tv-Link-icon-hover-text-weight);
66+
color: var(--tv-Link-has-svg-hover-text-color);
67+
fill: var(--tv-Link-has-svg-hover-text-color);
6868
}
6969

7070
&:has(.@{svg-cls}).is-disabled {
7171
&:hover {
72-
font-weight: var(--ti-common-font-weight-4);
73-
color: var(--ti-link-default-disabled-text-color);
74-
fill: var(--ti-link-default-disabled-text-color);
72+
font-weight: var(--tv-Link-font-weight);
73+
color: var(--tv-Link-default-disabled-text-color);
74+
fill: var(--tv-Link-default-disabled-text-color);
7575
}
7676
}
7777
}
7878

7979
&.is-underline:hover {
8080
&:after {
8181
content: '';
82-
width: var(--ti-link-only-text-underline-width);
82+
width: 100%;
8383
position: absolute;
8484
left: 0;
8585
height: 0;
8686
bottom: 0;
8787
display: block;
88-
border-bottom: 1px solid var(--ti-link-border-color);
88+
border-bottom: 1px solid var(--tv-Link-border-color);
8989
}
9090

9191
&:has(.@{svg-cls}):after {
92-
width: var(--ti-link-has-icon-underline-width);
92+
width: var(--tv-Link-has-icon-underline-width);
9393
}
9494

9595
&:has(> :first-child:not(.@{link-prefix-cls}__inner)):after {
96-
left: calc(100% - var(--ti-link-has-icon-underline-width));
96+
left: calc(100% - var(--tv-Link-has-icon-underline-width));
9797
}
9898
}
9999

@@ -103,55 +103,55 @@
103103

104104
&&--default {
105105
.link-type(
106-
var(--ti-link-default-text-color),
107-
var(--ti-link-default-border-color),
108-
var(--ti-link-default-hover-text-color),
109-
var(--ti-link-default-disabled-text-color)
106+
var(--tv-Link-default-text-color),
107+
var(--tv-Link-default-border-color),
108+
var(--tv-Link-default-hover-text-color),
109+
var(--tv-Link-default-disabled-text-color)
110110
);
111111
}
112112

113113
&&--primary {
114114
.link-type(
115-
var(--ti-link-primary-text-color),
116-
var(--ti-link-primary-border-color),
117-
var(--ti-link-primary-hover-text-color),
118-
var(--ti-link-primary-disabled-text-color)
115+
var(--tv-Link-primary-text-color),
116+
var(--tv-Link-primary-border-color),
117+
var(--tv-Link-primary-hover-text-color),
118+
var(--tv-Link-primary-disabled-text-color)
119119
);
120120
}
121121

122122
&&--danger {
123123
.link-type(
124-
var(--ti-link-danger-text-color),
125-
var(--ti-link-danger-border-color),
126-
var(--ti-link-danger-hover-text-color),
127-
var(--ti-link-danger-disabled-text-color)
124+
var(--tv-Link-danger-text-color),
125+
var(--tv-Link-danger-border-color),
126+
var(--tv-Link-danger-hover-text-color),
127+
var(--tv-Link-danger-disabled-text-color)
128128
);
129129
}
130130

131131
&&--success {
132132
.link-type(
133-
var(--ti-link-success-text-color),
134-
var(--ti-link-success-border-color),
135-
var(--ti-link-success-hover-text-color),
136-
var(--ti-link-success-disabled-text-color)
133+
var(--tv-Link-success-text-color),
134+
var(--tv-Link-success-border-color),
135+
var(--tv-Link-success-hover-text-color),
136+
var(--tv-Link-success-disabled-text-color)
137137
);
138138
}
139139

140140
&&--warning {
141141
.link-type(
142-
var(--ti-link-warning-text-color),
143-
var(--ti-link-warning-border-color),
144-
var(--ti-link-warning-hover-text-color),
145-
var(--ti-link-warning-disabled-text-color)
142+
var(--tv-Link-warning-text-color),
143+
var(--tv-Link-warning-border-color),
144+
var(--tv-Link-warning-hover-text-color),
145+
var(--tv-Link-warning-disabled-text-color)
146146
);
147147
}
148148

149149
&&--info {
150150
.link-type(
151-
var(--ti-link-info-text-color),
152-
var(--ti-link-info-border-color),
153-
var(--ti-link-info-hover-text-color),
154-
var(--ti-link-info-disabled-text-color)
151+
var(--tv-Link-info-text-color),
152+
var(--tv-Link-info-border-color),
153+
var(--tv-Link-info-hover-text-color),
154+
var(--tv-Link-info-disabled-text-color)
155155
);
156156
}
157157
}

0 commit comments

Comments
 (0)