Skip to content

Commit edd4a31

Browse files
uyarnuyarn
authored
refactor: remove deprecated less variables (#195)
* feat: upgrade tdesign-vue to 0.50.1 * refactor: remove deprecated variables
1 parent 3eb4c38 commit edd4a31

File tree

21 files changed

+72
-117
lines changed

21 files changed

+72
-117
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"nprogress": "^0.2.0",
2525
"qrcode.vue": "^1.7.0",
2626
"tdesign-icons-vue": "^0.1.0",
27-
"tdesign-vue": "^0.50.0",
27+
"tdesign-vue": "^0.50.1",
2828
"tvision-color": "~1.4.0",
2929
"typescript": "^4.2.4",
3030
"vue": "~2.6.14",

‎src/components/result/index.vue

+4-7
Original file line numberDiff line numberDiff line change
@@ -102,20 +102,17 @@ export default Vue.extend({
102102
}
103103
104104
&-title {
105-
font-style: normal;
105+
color: var(--td-text-color-primary);
106+
font: var(--td-font-title-large);
106107
font-weight: 500;
108+
font-style: normal;
107109
margin-top: 8px;
108-
color: var(--td-text-color-primary);
109-
font-size: @font-size-xl;
110-
line-height: @text-line-height-xl;
111110
}
112111
113112
&-tip {
114113
margin: 8px 0 32px;
115-
font-size: @font-size-base;
114+
font: var(--td-font-body-medium);
116115
color: var(--td-text-color-secondary);
117-
line-height: @text-line-height-base;
118116
}
119117
}
120-
121118
</style>

‎src/components/thumbnail/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default Vue.extend({
3838
}
3939
4040
&-circle {
41-
border-radius: @border-radius-50;
41+
border-radius: var(--td-radius-circle);
4242
}
4343
4444
&-layout {

‎src/config/color.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,17 @@ export const defaultDarkColor = [
2626

2727
export const COLOR_TOKEN: ColorSeries = {
2828
DEFAULT: {
29-
'--td-brand-color': '#0052D9',
30-
'--td-brand-color-1': '#e0ebff',
31-
'--td-brand-color-2': '#c0d8ff',
32-
'--td-brand-color-3': '#a1c4ff',
33-
'--td-brand-color-4': '#81b1ff',
34-
'--td-brand-color-5': '#5f9bff',
35-
'--td-brand-color-6': '#3d87ff',
36-
'--td-brand-color-7': '#176eff',
37-
'--td-brand-color-8': '#0052D9',
38-
'--td-brand-color-9': '#0048cd',
39-
'--td-brand-color-10': '#0035b5',
29+
'--td-brand-color': '#0052d9',
30+
'--td-brand-color-1': '#f2f3ff',
31+
'--td-brand-color-2': '#d9e1ff',
32+
'--td-brand-color-3': '#b5c7ff',
33+
'--td-brand-color-4': '#8eabff',
34+
'--td-brand-color-5': '#618dff',
35+
'--td-brand-color-6': '#366ef4',
36+
'--td-brand-color-7': '#0052d9',
37+
'--td-brand-color-8': '#003cab',
38+
'--td-brand-color-9': '#002a7c',
39+
'--td-brand-color-10': '#001a57',
4040
},
4141

4242
CYAN: {

‎src/layouts/components/Notice.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export default Vue.extend({
164164
overflow: hidden;
165165
width: 100%;
166166
padding: 16px 24px;
167-
border-radius: @border-radius;
167+
border-radius: var(--td-radius-default);
168168
font-size: 14px;
169169
color: var(--td-text-color-primary);
170170
line-height: 22px;
@@ -175,7 +175,7 @@ export default Vue.extend({
175175
background: var(--td-bg-color-container-hover);
176176
177177
.msg-content {
178-
color: var(--td-brand-color-8);
178+
color: var(--td-brand-color);
179179
}
180180
181181
.t-list-item__action {

‎src/layouts/setting.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ export default {
357357
height: 100%;
358358
max-height: 78px;
359359
padding: 8px;
360-
border-radius: @border-radius;
360+
border-radius: var(--td-radius-default);
361361
border: 2px solid var(--td-component-border);
362362
height: auto;
363363

‎src/pages/detail/base/index.less

+5-6
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,10 @@
2525

2626
h1 {
2727
width: 200px;
28-
font-weight: normal;
29-
font-size: @font-size-base;
28+
font: var(--td-font-body-medium);
3029
color: var(--td-text-color-secondary);
30+
font-weight: normal;
3131
text-align: left;
32-
line-height: 22px;
3332

3433
@media (max-width: @screen-sm-max) {
3534
width: 100px;
@@ -51,7 +50,7 @@
5150
display: inline-block;
5251
width: 8px;
5352
height: 8px;
54-
border-radius: @border-radius-50;
53+
border-radius: var(--td-radius-circle);
5554
background: var(--td-success-color-5);
5655
}
5756

@@ -91,7 +90,7 @@
9190
display: inline-block;
9291
width: 8px;
9392
height: 8px;
94-
border-radius: @border-radius-50;
93+
border-radius: var(--td-radius-circle);
9594
background: var(--td-success-color-5);
9695
}
9796

@@ -100,7 +99,7 @@
10099
}
101100

102101
.blue {
103-
color: var(--td-brand-color-8);
102+
color: var(--td-brand-color);
104103
}
105104
}
106105
}

‎src/pages/detail/secondary/index.less

+4-5
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
.secondary-notification {
44
background-color: var(--td-bg-color-container);
5-
border-radius: @border-radius;
6-
padding: @spacer-3 @spacer-4;
5+
border-radius: var(--td-radius-default);
6+
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingTB-xxl);
77

88
.t-tabs__content {
99
padding-top: 0;
@@ -36,16 +36,15 @@
3636
}
3737

3838
.t-tag.t-size-s {
39-
margin-right: @spacer-1;
39+
margin-right: var(--td-comp-margin-s);
4040
margin-left: 0;
4141
}
4242
}
4343

4444
.content {
45-
font-size: 14px;
4645
color: var(--td-text-color-placeholder);
46+
font: var(--td-font-body-medium);
4747
text-align: left;
48-
line-height: 22px;
4948
overflow: hidden;
5049
text-overflow: ellipsis;
5150
white-space: nowrap;

‎src/pages/list/base/index.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ export default Vue.extend({
252252
253253
.selected-count {
254254
display: inline-block;
255-
margin-left: 8px;
255+
margin-left: var(--td-comp-margin-s);
256256
color: var(--td-text-color-secondary);
257257
}
258258
}
@@ -262,6 +262,6 @@ export default Vue.extend({
262262
}
263263
264264
.t-button + .t-button {
265-
margin-left: @spacer;
266-
}
265+
margin-left: var(--td-comp-margin-s);
266+
}
267267
</style>

‎src/pages/list/components/CommonTable.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ export default {
285285
.list-common-table {
286286
background-color: var(--td-bg-color-container);
287287
padding: 30px 32px;
288-
border-radius: @border-radius;
288+
border-radius: var(--td-radius-default);
289289
}
290290
291291
.form-item-content {
@@ -308,6 +308,6 @@ export default {
308308
}
309309
}
310310
.t-button + .t-button {
311-
margin-left: @spacer;
312-
}
311+
margin-left: var(--td-comp-margin-s);
312+
}
313313
</style>

‎src/pages/list/tree/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export default {
150150
151151
.table-tree-container {
152152
background-color: var(--td-bg-color-container);
153-
border-radius: @border-radius;
153+
border-radius: var(--td-radius-default);
154154
155155
.t-tree {
156156
margin-top: 24px;

‎src/pages/login/components/components-header.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default {
3838
@import '@/style/variables.less';
3939
4040
.login-header {
41-
height: 64px;
41+
height: var(--td-comp-size-xxxl);
4242
padding: 0 24px;
4343
display: flex;
4444
justify-content: space-between;
@@ -48,7 +48,7 @@ export default {
4848
4949
.logo {
5050
width: 188px;
51-
height: 64px;
51+
height: var(--td-comp-size-xxxl);
5252
}
5353
5454
.operations-container {

‎src/pages/login/index.less

+2-2
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153

154154
.tip {
155155
font-size: 14px;
156-
color: var(--td-brand-color-8);
156+
color: var(--td-brand-color);
157157
cursor: pointer;
158158
display: inline-flex;
159159
align-items: center;
@@ -183,7 +183,7 @@
183183
.tip {
184184
float: right;
185185
font-size: 14px;
186-
color: var(--td-brand-color-8);
186+
color: var(--td-brand-color);
187187
}
188188
}
189189

‎src/pages/result/fail/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default {
5151
line-height: 22px;
5252
}
5353
.t-button + .t-button {
54-
margin-left: @spacer;
55-
}
54+
margin-left: var(--td-comp-margin-s);
55+
}
5656
}
5757
</style>

‎src/pages/result/network-error/index.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@ export default {
1919
@import '@/style/variables.less';
2020
2121
.t-button + .t-button {
22-
margin-left: @spacer;
23-
}
24-
</style>
22+
margin-left: var(--td-comp-margin-s);
23+
}
24+
</style>

‎src/pages/result/success/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,6 @@ export default {
5454
}
5555
5656
.t-button + .t-button {
57-
margin-left: @spacer;
58-
}
57+
margin-left: var(--td-comp-margin-s);
58+
}
5959
</style>

‎src/pages/user/index.less

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
background: var(--td-bg-color-container);
1313
color: var(--td-text-color-primary);
1414
text-align: left;
15-
border-radius: @border-radius;
15+
border-radius: var(--td-radius-default);
1616
display: flex;
1717
justify-content: space-between;
1818
align-items: center;
@@ -37,7 +37,7 @@
3737
.contract {
3838
width: 340px;
3939
height: 88px;
40-
border-radius: @border-radius;
40+
border-radius: var(--td-radius-default);
4141
margin: 8px 0;
4242

4343
&-title {
@@ -68,7 +68,7 @@
6868
.user-intro {
6969
padding: 32px 24px;
7070
background: var(--td-brand-color);
71-
border-radius: @border-radius;
71+
border-radius: var(--td-radius-default);
7272
color: var(--td-text-color-primary);
7373

7474
.name {
@@ -109,7 +109,7 @@
109109

110110
.product-container {
111111
margin-top: 16px;
112-
border-radius: @border-radius;
112+
border-radius: var(--td-radius-default);
113113

114114
.content {
115115
width: 100%;
@@ -124,7 +124,7 @@
124124
.content-container {
125125
margin-top: 16px;
126126
background: var(--td-bg-color-container);
127-
border-radius: @border-radius;
127+
border-radius: var(--td-radius-default);
128128
}
129129

130130
.user-team {

‎src/style/layout.less

+5-5
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
}
6767

6868
&-content-layout {
69-
padding: @spacer-3;
69+
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
7070
}
7171

7272
&-layout {
@@ -80,7 +80,7 @@
8080
z-index: 100;
8181
}
8282
&-tabs-nav + .@{starter-prefix}-content-layout {
83-
padding-top: @spacer-3;
83+
padding-top: var(--td-comp-paddingTB-xl);
8484
}
8585

8686
&::-webkit-scrollbar {
@@ -98,7 +98,7 @@
9898

9999
&-footer-layout {
100100
padding: 0;
101-
margin-bottom: @spacer-2;
101+
margin-bottom: var(--td-comp-margin-l);
102102
}
103103

104104
// slideBar
@@ -164,7 +164,7 @@
164164

165165
&-logo-normal {
166166
color: var(--td-brand-color);
167-
font-size: @font-size-l;
167+
font: var(--td-font-body-large);
168168
transition: all 0.3s;
169169
}
170170
}
@@ -191,7 +191,7 @@
191191
.logo-container {
192192
cursor: pointer;
193193
display: inline-flex;
194-
height: 64px;
194+
height: var(--td-comp-size-xxxl);
195195
margin-left: 24px;
196196
}
197197

‎src/style/reset.less

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
body {
22
color: var(--td-text-color-secondary);
3-
font-family: -apple-system, BlinkMacSystemFont, @font-family;
4-
font-size: @font-size-base;
5-
line-height: 1.5;
3+
font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, Arial Regular;
4+
font: var(--td-font-body-medium);
65
-webkit-font-smoothing: antialiased;
76
padding: 0;
87
margin: 0;
98
}
109

1110
pre {
12-
font-family: @font-family;
11+
font-family: var(--td-font-family);
1312
}
1413

1514
ul,
@@ -41,7 +40,7 @@ p {
4140
a {
4241
color: var(--td-brand-color);
4342
text-decoration: none;
44-
margin-right: @spacer-3;
43+
margin-right: var(--td-comp-margin-xxl);
4544
cursor: pointer;
4645
transition: color @anim-duration-base @anim-time-fn-easing;
4746

0 commit comments

Comments
 (0)