Skip to content

Commit c5af3d9

Browse files
zzcrzzcr
committed
refactor(theme): [qr-code,text-popup,watemark,rate] refactor some components theme vars
1 parent 41f9ca8 commit c5af3d9

File tree

21 files changed

+172
-229
lines changed

21 files changed

+172
-229
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,7 @@
376376
--tv-font-weight-bold: 600;
377377

378378
/** 4. 圆角变量 **/
379+
--tv-border-radius-xs: 2px;
379380
--tv-border-radius-sm: 4px;
380381
--tv-border-radius-md: 6px;
381382
--tv-border-radius-lg: 8px;

‎packages/theme/src/bulletin-board/index.less‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,19 @@
1818
@svg-prefix-cls: ~'@{css-prefix}svg';
1919

2020
.@{bulletin-board-prefix-cls} {
21-
.component-css-vars-bulletin-board();
21+
.inject-BulletinBoard-vars();
2222

2323
&__item {
24-
margin-bottom: var(--ti-bulletin-board-item-margin-bottom);
24+
margin-bottom: 24px;
2525

2626
.@{bulletin-board-prefix-cls}__textTitle {
2727
display: block;
28-
color: var(--ti-bulletin-board-item-title-text-color);
29-
margin-bottom: var(--ti-bulletin-board-item-title-text-margin-bottom);
28+
color: var(--tv-BulletinBoard-item-title-text-color);
29+
margin-bottom: 8px;
3030
font-size: var(--ti-common-font-size-base);
3131
white-space: normal;
32-
font-family: Helvetica, Arial, 'microsoft yahei';
3332
line-height: initial;
34-
font-weight: var(--ti-bulletin-board-item-title-font-weight);
33+
font-weight: var(--tv-BulletinBoard-item-title-font-weight);
3534

3635
&,
3736
&:hover {
@@ -40,57 +39,56 @@
4039
}
4140

4241
.@{bulletin-board-prefix-cls}__textDate {
43-
color: var(--ti-bulletin-board-item-date-text-color);
44-
font-size: var(--ti-bulletin-board-item-date-font-size);
42+
color: var(--tv-BulletinBoard-item-date-text-color);
43+
font-size: var(--tv-BulletinBoard-item-date-font-size);
4544
}
4645
}
4746

4847
&__title {
49-
font-size: var(--ti-bulletin-board-title-font-size);
50-
padding: 12px 0px 8px 24px;
51-
color: var(--ti-bulletin-board-title-text-color);
52-
font-weight: var(--ti-bulletin-board-title-font-weight);
48+
font-size: var(--tv-BulletinBoard-title-font-size);
49+
padding: 12px 0 8px 24px;
50+
color: var(--tv-BulletinBoard-title-text-color);
51+
font-weight: var(--tv-BulletinBoard-title-font-weight);
5352
}
5453

5554
&__more {
5655
text-align: right;
5756

5857
& &-link {
59-
color: var(--ti-bulletin-board-more-text-color);
60-
font-size: var(--ti-bulletin-board-more-font-size);
58+
color: var(--tv-BulletinBoard-more-text-color);
59+
font-size: var(--tv-BulletinBoard-more-font-size);
6160
line-height: normal;
6261
display: inline-flex;
6362
justify-content: center;
6463
align-items: center;
6564

6665
.@{svg-prefix-cls} {
67-
fill: var(--ti-bulletin-board-more-text-color);
68-
font-size: var(--ti-bulletin-board-more-icon-font-size);
66+
fill: var(--tv-BulletinBoard-more-icon-color);
67+
font-size: var(--tv-BulletinBoard-more-icon-font-size);
6968
margin-left: 4px;
7069
}
7170

7271
&:hover {
7372
text-decoration: none;
7473

7574
.@{svg-prefix-cls} {
76-
fill: var(--ti-bulletin-board-more-hover-text-color);
75+
fill: var(--tv-BulletinBoard-more-icon-color-hover);
7776
}
7877
}
7978
}
8079
}
8180

8281
&__new {
83-
background-color: var(--ti-bulletin-board-new-bg-color);
84-
color: var(--ti-bulletin-board-new-text-color);
85-
border-radius: var(--ti-bulletin-board-new-border-radius);
86-
padding: 0 var(--ti-bulletin-board-new-padding-left);
87-
margin-left: var(--ti-bulletin-board-new-margin-left);
82+
background-color: var(--tv-BulletinBoard-new-bg-color);
83+
color: var(--tv-BulletinBoard-new-text-color);
84+
border-radius: var(--tv-BulletinBoard-new-border-radius);
85+
padding: 0 4px;
86+
margin-left: 6px;
8887
min-width: 30px;
8988
min-height: 16px;
9089
line-height: 16px;
91-
font-size: var(--ti-bulletin-board-new-font-size);
90+
font-size: var(--tv-BulletinBoard-new-font-size);
9291
display: inline-block;
93-
font-family: var(--ti-bulletin-board-new-font-family);
9492
box-sizing: border-box;
9593
font-weight: 500;
9694
text-align: center;
@@ -143,13 +141,13 @@
143141
.@{tabs-prefix-cls}__item {
144142
line-height: 36px;
145143
height: 36px;
146-
padding: 0 var(--ti-bulletin-board-tabs-item-text-padding-right);
144+
padding: 0;
147145
box-sizing: border-box;
148146
display: inline-block;
149147
list-style: none;
150148
font-size: var(--ti-common-font-size-1);
151149
font-weight: 500;
152-
color: var(--ti-bulletin-board-tabs-item-text-color);
150+
color: var(--tv-BulletinBoard-tabs-item-text-color);
153151
position: relative;
154152

155153
&:focus,
@@ -158,18 +156,16 @@
158156
}
159157

160158
&:hover {
161-
color: var(--ti-bulletin-board-tabs-item-hover-text-color);
162159
cursor: pointer;
163-
font-weight: var(--ti-bulletin-board-tabs-item-hover-text-font-weight);
160+
font-weight: var(--tv-BulletinBoard-tabs-item-hover-text-font-weight);
164161
}
165162

166163
&.is-active {
167-
color: var(--ti-bulletin-board-tabs-item-hover-text-color);
168-
font-weight: var(--ti-bulletin-board-tabs-item-hover-text-font-weight);
164+
font-weight: var(--tv-BulletinBoard-tabs-item-hover-text-font-weight);
169165
}
170166

171167
&.is-disabled {
172-
color: var(--ti-bulletin-board-tabs-item-disabled-text-color);
168+
color: var(--tv-BulletinBoard-tabs-item-disabled-text-color);
173169
cursor: default;
174170
}
175171

@@ -201,15 +197,15 @@
201197
}
202198
}
203199

204-
&::before {
205-
bottom: 0px;
200+
&:before {
201+
bottom: 0;
206202
top: auto !important;
207203
left: auto !important;
208204
}
209205
}
210206

211207
.@{tabs-prefix-cls}__content {
212-
padding: 12px var(--ti-bulletin-board-contentr-padding-right) var(--ti-bulletin-board-contentr-padding-button);
208+
padding: 12px 0 0;
213209
}
214210

215211
&.@{tabs-prefix-cls}--card {
@@ -224,7 +220,7 @@
224220
}
225221

226222
> .@{tabs-prefix-cls}__header {
227-
border-bottom: 1px solid var(--ti-bulletin-board-tabs-header-border-color);
223+
border-bottom: 1px solid var(--tv-BulletinBoard-tabs-header-border-color);
228224

229225
.@{tabs-prefix-cls}__item {
230226
border-bottom: 1px solid transparent;
@@ -249,7 +245,7 @@
249245
content: '';
250246
width: 100%;
251247
height: 3px;
252-
background: var(--ti-bulletin-board-tabs-item-hover-text-color);
248+
background: var(--tv-BulletinBoard-tabs-item-bg-color);
253249
margin-left: -24px;
254250
}
255251
}

‎packages/theme/src/bulletin-board/vars.less‎

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,33 +10,47 @@
1010
*
1111
*/
1212

13-
.component-css-vars-bulletin-board() {
14-
--ti-bulletin-board-title-font-size: var(--ti-common-font-size-3, 18px);
15-
--ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7, bold);
16-
--ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal, #191919);
17-
--ti-bulletin-board-item-title-text-color: var(--ti-common-color-text-primary, #191919);
18-
--ti-bulletin-board-item-title-text-margin-bottom: var(--ti-common-space-2x, 8px);
19-
--ti-bulletin-board-tabs-item-hover-text-font-weight: var(--ti-common-font-weight-bold, 600);
20-
--ti-bulletin-board-item-title-font-weight: var(--ti-common-font-weight-bold, 600);
21-
--ti-bulletin-board-tabs-item-text-padding-right: var(--ti-common-space-0, 0px);
22-
--ti-bulletin-board-contentr-padding-right: var(--ti-common-space-0, 0px);
23-
--ti-bulletin-board-contentr-padding-button: var(--ti-common-space-0, 0px);
24-
--ti-bulletin-board-new-padding-left: var(--ti-common-size-base, 4px);
25-
--ti-bulletin-board-new-margin-left: var(--ti-common-space-6, 6px);
26-
--ti-bulletin-board-new-font-family: PingFangSC ,PingFangSC-Regular;
27-
--ti-bulletin-board-item-margin-bottom: var(--ti-common-space-6x, 24px);
28-
--ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder, #808080);
29-
--ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base, 14px);
30-
--ti-bulletin-board-new-bg-color: var(--ti-common-color-error-border-secondary, #fce3e1);
31-
--ti-bulletin-board-new-text-color: var(--ti-common-color-error-border, #f23030);
32-
--ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-1, 2px);
33-
--ti-bulletin-board-more-text-color: var(--ti-common-color-text-primary, #191919);
34-
--ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
35-
--ti-bulletin-board-more-font-size: var(--ti-common-font-size-base, 14px);
36-
--ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1, 14px);
37-
--ti-bulletin-board-new-font-size: var(--ti-common-font-size-0, 12px);
38-
--ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal, #191919);
39-
--ti-bulletin-board-tabs-item-hover-text-color: var(--ti-common-color-text-primary, #191919);
40-
--ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder, #808080);
41-
--ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border, #999999);
13+
.inject-BulletinBoard-vars() {
14+
// 标题字号
15+
--tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm);
16+
// 标题字重
17+
--tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold);
18+
// 标题文字颜色
19+
--tv-BulletinBoard-title-text-color: var(--tv-color-text);
20+
// 子项文字颜色
21+
--tv-BulletinBoard-item-title-text-color: var(--tv-color-text);
22+
// tabs标题想文字hover字重
23+
--tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold);
24+
// 子项标题文字字重
25+
--tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold);
26+
// 子项日期文字颜色
27+
--tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken);
28+
// 子项日期文字尺寸
29+
--tv-BulletinBoard-item-date-font-size: var(--tv-font-size-md);
30+
// new标签背景颜色
31+
--tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light);
32+
// new标签文字颜色
33+
--tv-BulletinBoard-new-text-color: var(--tv-color-error-text);
34+
// new标签边框圆角
35+
--tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs);
36+
// new标签文字大小
37+
--tv-BulletinBoard-new-font-size: var(--tv-font-size-sm);
38+
// 更多按钮文字颜色
39+
--tv-BulletinBoard-more-text-color: var(--tv-color-text);
40+
// 更多按钮图标颜色
41+
--tv-BulletinBoard-more-icon-color: var(--tv-color-icon);
42+
// 更多按钮图标悬浮颜色
43+
--tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover);
44+
// 更多按钮文字尺寸
45+
--tv-BulletinBoard-more-font-size: var(--tv-font-size-md);
46+
// 更多按钮图标尺寸
47+
--tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-md);
48+
// tabs标签文字颜色
49+
--tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text);
50+
// tabs标签背景颜色
51+
--tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary);
52+
// tabs标签文字禁用颜色
53+
--tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled);
54+
// tabs标签头部边框颜色
55+
--tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border);
4256
}

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

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

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

2424
&__search {
2525
margin-bottom: 12px;
2626
}
2727

2828
&__text,
2929
&__label {
30-
font-size: var(--ti-dept-label-font-size);
31-
color: var(--ti-dept-label-text-color);
32-
font-weight: var(--ti-dept-label-font-weight);
30+
font-size: var(--tv-Dept-label-font-size);
31+
color: var(--tv-Dept-label-text-color);
32+
font-weight: var(--tv-Dept-label-font-weight);
3333
white-space: nowrap;
3434
overflow: hidden;
3535
text-overflow: ellipsis;
@@ -45,11 +45,11 @@
4545
}
4646

4747
&__selected-info {
48-
color: var(--ti-dept-selected-info-text-color);
49-
font-size: var(--ti-dept-label-font-size);
50-
background: var(--ti-dept-selected-info-bg-color);
48+
color: var(--tv-Dept-selected-info-text-color);
49+
font-size: var(--tv-Dept-label-font-size);
50+
background: var(--tv-Dept-selected-info-bg-color);
5151
padding: 5px;
52-
border-radius: var(--ti-dept-selected-info-border-radius);
52+
border-radius: var(--tv-Dept-selected-info-border-radius);
5353
}
5454

5555
&__item {
@@ -75,6 +75,6 @@
7575

7676
.@{input-prefix-cls}__icon {
7777
vertical-align: middle;
78-
fill: var(--ti-dept-selected-info-text-color);
78+
fill: var(--tv-Dept-selected-info-text-color);
7979
}
8080
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
*
1111
*/
1212

13-
.component-css-vars-dept() {
14-
--ti-dept-label-font-size: var(--ti-common-font-size-base, 14px);
15-
--ti-dept-label-text-color: var(--ti-common-color-info-normal, #191919);
16-
--ti-dept-label-font-weight: var(--ti-common-font-weight-7, bold);
17-
--ti-dept-selected-info-text-color: var(--ti-base-color-brand-6, #191919);
18-
--ti-dept-selected-info-bg-color: #f1f1f1;
19-
--ti-dept-selected-info-border-radius: var(--ti-common-border-radius-normal, 6px);
13+
.inject-Dept-vars() {
14+
--tv-Dept-label-font-size: var(--tv-font-size-md);
15+
--tv-Dept-label-text-color: var(--tv-color-text);
16+
--tv-Dept-label-font-weight: var(--tv-font-weight-bold);
17+
--tv-Dept-selected-info-text-color: var(--tv-color-text);
18+
--tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
19+
--tv-Dept-selected-info-border-radius: var(--tv-border-radius-md);
2020
}

‎packages/theme/src/drop-roles/vars.less‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
@svg-prefix-cls: ~'@{css-prefix}svg';
1818

1919
.@{espace-prefix-cls} {
20-
.component-css-vars-espace();
20+
.inject-Espace-vars();
2121

2222
.item-talk,
2323
.item-call,
@@ -26,13 +26,13 @@
2626
line-height: 1;
2727

2828
.@{svg-prefix-cls} {
29-
fill: var(--ti-espace-text-color);
30-
font-size: var(--ti-espace-font-size);
29+
fill: var(--tv-Espace-icon-color);
30+
font-size: var(--tv-Espace-font-size);
3131
}
3232

3333
&:hover {
3434
.@{svg-prefix-cls} {
35-
fill: var(--ti-espace-hover-text-color);
35+
fill: var(--tv-Espace-icon-color-hover);
3636
}
3737
}
3838
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
*
1111
*/
1212

13-
.component-css-vars-espace() {
14-
--ti-espace-font-size: 26px;
15-
--ti-espace-text-color: var(--ti-base-color-brand-6, #191919);
16-
--ti-espace-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
13+
.inject-Espace-vars() {
14+
--tv-Espace-font-size: 26px;
15+
--tv-Espace-icon-color: var(--tv-color-icon);
16+
--tv-Espace-icon-color-hover: var(--tv-color-icon-hover);
1717
}

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

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)