Skip to content

Commit 0ceece4

Browse files
anlyyaoanlyyao
authored
style: add font token (#4061)
* style: add font token * style: use font token * docs: update css vars * fix: fix spelling error * style: use rpx unit * fix: fix cr * chore: @xx-icon-font-size changed to @xx-icon-size
1 parent b964eb6 commit 0ceece4

File tree

132 files changed

+522
-850
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+522
-850
lines changed

‎packages/components/action-sheet/README.en-US.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ Name | Default Value | Description
5454
--td-action-sheet-cancel-height | 96rpx | -
5555
--td-action-sheet-color | @text-color-primary | -
5656
--td-action-sheet-description-color | @text-color-placeholder | -
57+
--td-action-sheet-description-font | @font-body-medium | -
5758
--td-action-sheet-gap-color | @bg-color-page | -
5859
--td-action-sheet-list-item-disabled-color | @text-color-disabled | -
5960
--td-action-sheet-list-item-height | 112rpx | -

‎packages/components/action-sheet/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ t-class-content | 内容样式类
142142
--td-action-sheet-cancel-height | 96rpx | -
143143
--td-action-sheet-color | @text-color-primary | -
144144
--td-action-sheet-description-color | @text-color-placeholder | -
145+
--td-action-sheet-description-font | @font-body-medium | -
145146
--td-action-sheet-gap-color | @bg-color-page | -
146147
--td-action-sheet-list-item-disabled-color | @text-color-disabled | -
147148
--td-action-sheet-list-item-height | 112rpx | -

‎packages/components/action-sheet/action-sheet.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@action-sheet-gap-color: var(--td-action-sheet-gap-color, @bg-color-page);
99
@action-sheet-color: var(--td-action-sheet-color, @text-color-primary);
1010
@action-sheet-border-radius: var(--td-action-sheet-border-radius, @radius-extraLarge);
11+
@action-sheet-description-font: var(--td-action-sheet-description-font, @font-body-medium);
1112
@action-sheet-description-color: var(--td-action-sheet-description-color, @text-color-placeholder);
1213
@action-sheet-text-align: var(--td-action-sheet-text-align, center);
1314
@action-sheet-cancel-height: var(--td-action-sheet-cancel-height, 96rpx);
@@ -52,8 +53,7 @@
5253

5354
&__description {
5455
color: @action-sheet-description-color;
55-
line-height: 44rpx;
56-
font-size: 28rpx;
56+
font: @action-sheet-description-font;
5757
text-align: @action-sheet-text-align;
5858
padding: 24rpx 32rpx;
5959

‎packages/components/back-top/back-top.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@backtop: ~'@{prefix}-back-top';
44
@back-top-text-font-size: @font-size;
55
@back-top-text-line-height: 24rpx;
6-
@back-top-icon-font-size: 44rpx;
6+
@back-top-icon-size: 44rpx;
77
@back-top-round-width: 96rpx;
88
@back-top-half-round-width: 120rpx;
99
@back-top-half-round-height: 80rpx;
@@ -74,6 +74,7 @@
7474
&__text--round-dark,
7575
&__text--half-round,
7676
&__text--half-round-dark {
77+
font-weight: 600;
7778
font-size: @back-top-text-font-size;
7879
line-height: @back-top-text-line-height;
7980
}
@@ -92,6 +93,6 @@
9293
display: flex;
9394
justify-content: center;
9495
align-items: center;
95-
font-size: @back-top-icon-font-size;
96+
font-size: @back-top-icon-size;
9697
}
9798
}

‎packages/components/badge/README.en-US.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,8 @@ Name | Default Value | Description
4646
--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
4747
--td-badge-content-text-color | @text-color-primary | -
4848
--td-badge-dot-size | 16rpx | -
49-
--td-badge-font-size | @font-size-xs | -
50-
--td-badge-font-weight | 600 | -
51-
--td-badge-large-font-size | @font-size-s | -
49+
--td-badge-font | @font-mark-extraSmall | -
50+
--td-badge-large-font | @font-mark-small | -
5251
--td-badge-large-height | 40rpx | -
5352
--td-badge-large-padding | 10rpx | -
5453
--td-badge-text-color | @text-color-anti | -

‎packages/components/badge/README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,8 @@ t-class-count | 计数样式类
8787
--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
8888
--td-badge-content-text-color | @text-color-primary | -
8989
--td-badge-dot-size | 16rpx | -
90-
--td-badge-font-size | @font-size-xs | -
91-
--td-badge-font-weight | 600 | -
92-
--td-badge-large-font-size | @font-size-s | -
90+
--td-badge-font | @font-mark-extraSmall | -
91+
--td-badge-large-font | @font-mark-small | -
9392
--td-badge-large-height | 40rpx | -
9493
--td-badge-large-padding | 10rpx | -
9594
--td-badge-text-color | @text-color-anti | -

‎packages/components/badge/badge.less‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33
@badge-text-color: var(--td-badge-text-color, @text-color-anti);
44
@badge-content-text-color: var(--td-badge-content-text-color, @text-color-primary);
55
@badge-color: var(--td-badge-bg-color, @error-color);
6-
@badge-font-size: var(--td-badge-font-size, @font-size-xs);
6+
@badge-font: var(--td-badge-font, @font-mark-extraSmall);
77
@badge-basic-height: var(--td-badge-basic-height, 32rpx);
88
@badge-basic-width: var(--td-badge-basic-width, 32rpx);
99
@badge-basic-padding: var(--td-badge-basic-padding, 8rpx);
10-
@badge-font-weight: var(--td-badge-font-weight, 600);
1110
@badge-border-radius: var(--td-badge-border-radius, 4rpx);
1211
@border-bubble-border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
1312
@badge-dot-size: var(--td-badge-dot-size, 16rpx);
1413

1514
// large
16-
@badge-large-font-size: var(--td-badge-large-font-size, @font-size-s);
15+
@badge-large-font: var(--td-badge-large-font, @font-mark-small);
1716
@badge-large-height: var(--td-badge-large-height, 40rpx);
1817
@badge-large-padding: var(--td-badge-large-padding, 10rpx);
1918

@@ -25,13 +24,11 @@
2524
&--basic {
2625
z-index: 100;
2726
padding: 0 @badge-basic-padding;
28-
font-size: @badge-font-size;
27+
font: @badge-font;
2928
color: @badge-text-color;
3029
background-color: @badge-color;
3130
text-align: center;
3231
height: @badge-basic-height;
33-
line-height: @badge-basic-height;
34-
font-weight: @badge-font-weight;
3532
border-radius: @badge-border-radius;
3633
}
3734

@@ -96,10 +93,9 @@
9693

9794
// size
9895
&--large {
99-
font-size: @badge-large-font-size;
96+
font: @badge-large-font;
10097
height: @badge-large-height;
10198
min-width: @badge-large-height;
102-
line-height: @badge-large-height;
10399
padding: 0 @badge-large-padding;
104100
}
105101

@@ -117,7 +113,7 @@
117113

118114
&__content-text {
119115
display: block;
120-
line-height: 48rpx;
116+
font: @font-body-large;
121117
color: @badge-content-text-color;
122118
}
123119
}

‎packages/components/button/README.en-US.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ Name | Default Value | Description
176176
--td-button-default-text-active-bg-color | @bg-color-container-active | -
177177
--td-button-extra-small-font-size | @font-size-base | -
178178
--td-button-extra-small-height | 56rpx | -
179-
--td-button-extra-small-icon-font-size | 36rpx | -
179+
--td-button-extra-small-icon-size | 36rpx | -
180180
--td-button-extra-small-padding-horizontal | 16rpx | -
181181
--td-button-font-weight | 600 | -
182182
--td-button-ghost-border-color | @button-ghost-color | -
@@ -193,7 +193,7 @@ Name | Default Value | Description
193193
--td-button-icon-spacer | @spacer | -
194194
--td-button-large-font-size | @font-size-m | -
195195
--td-button-large-height | 96rpx | -
196-
--td-button-large-icon-font-size | 48rpx | -
196+
--td-button-large-icon-size | 48rpx | -
197197
--td-button-large-padding-horizontal | 40rpx | -
198198
--td-button-light-active-bg-color | @brand-color-light-active | -
199199
--td-button-light-active-border-color | @brand-color-light-active | -
@@ -213,7 +213,7 @@ Name | Default Value | Description
213213
--td-button-light-text-color | @brand-color | -
214214
--td-button-medium-font-size | @font-size-m | -
215215
--td-button-medium-height | 80rpx | -
216-
--td-button-medium-icon-font-size | 40rpx | -
216+
--td-button-medium-icon-size | 40rpx | -
217217
--td-button-medium-padding-horizontal | 32rpx | -
218218
--td-button-primary-active-bg-color | @brand-color-active | -
219219
--td-button-primary-active-border-color | @brand-color-active | -
@@ -236,5 +236,5 @@ Name | Default Value | Description
236236
--td-button-primary-text-disabled-color | @brand-color-disabled | -
237237
--td-button-small-font-size | @font-size-base | -
238238
--td-button-small-height | 64rpx | -
239-
--td-button-small-icon-font-size | 36rpx | -
239+
--td-button-small-icon-size | 36rpx | -
240240
--td-button-small-padding-horizontal | 24rpx | -

‎packages/components/button/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ t-class-loading | 加载样式类
178178
--td-button-default-text-active-bg-color | @bg-color-container-active | -
179179
--td-button-extra-small-font-size | @font-size-base | -
180180
--td-button-extra-small-height | 56rpx | -
181-
--td-button-extra-small-icon-font-size | 36rpx | -
181+
--td-button-extra-small-icon-size | 36rpx | -
182182
--td-button-extra-small-padding-horizontal | 16rpx | -
183183
--td-button-font-weight | 600 | -
184184
--td-button-ghost-border-color | @button-ghost-color | -
@@ -195,7 +195,7 @@ t-class-loading | 加载样式类
195195
--td-button-icon-spacer | @spacer | -
196196
--td-button-large-font-size | @font-size-m | -
197197
--td-button-large-height | 96rpx | -
198-
--td-button-large-icon-font-size | 48rpx | -
198+
--td-button-large-icon-size | 48rpx | -
199199
--td-button-large-padding-horizontal | 40rpx | -
200200
--td-button-light-active-bg-color | @brand-color-light-active | -
201201
--td-button-light-active-border-color | @brand-color-light-active | -
@@ -215,7 +215,7 @@ t-class-loading | 加载样式类
215215
--td-button-light-text-color | @brand-color | -
216216
--td-button-medium-font-size | @font-size-m | -
217217
--td-button-medium-height | 80rpx | -
218-
--td-button-medium-icon-font-size | 40rpx | -
218+
--td-button-medium-icon-size | 40rpx | -
219219
--td-button-medium-padding-horizontal | 32rpx | -
220220
--td-button-primary-active-bg-color | @brand-color-active | -
221221
--td-button-primary-active-border-color | @brand-color-active | -
@@ -238,5 +238,5 @@ t-class-loading | 加载样式类
238238
--td-button-primary-text-disabled-color | @brand-color-disabled | -
239239
--td-button-small-font-size | @font-size-base | -
240240
--td-button-small-height | 64rpx | -
241-
--td-button-small-icon-font-size | 36rpx | -
241+
--td-button-small-icon-size | 36rpx | -
242242
--td-button-small-padding-horizontal | 24rpx | -

‎packages/components/button/button.less‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@
2525
@button-large-padding-horizontal: var(--td-button-large-padding-horizontal, 40rpx);
2626

2727
// 图标大小
28-
@button-extra-small-icon-font-size: var(--td-button-extra-small-icon-font-size, 36rpx);
29-
@button-small-icon-font-size: var(--td-button-small-icon-font-size, 36rpx);
30-
@button-medium-icon-font-size: var(--td-button-medium-icon-font-size, 40rpx);
31-
@button-large-icon-font-size: var(--td-button-large-icon-font-size, 48rpx);
28+
@button-extra-small-icon-size: var(--td-button-extra-small-icon-size, 36rpx);
29+
@button-small-icon-size: var(--td-button-small-icon-size, 36rpx);
30+
@button-medium-icon-size: var(--td-button-medium-icon-size, 40rpx);
31+
@button-large-icon-size: var(--td-button-large-icon-size, 48rpx);
3232

3333
// default
3434
@button-default-color: var(--td-button-default-color, @text-color-primary);
@@ -131,7 +131,7 @@
131131
@fontSize: 'button-@{size}-font-size';
132132
@padding: 'button-@{size}-padding-horizontal';
133133
@height: 'button-@{size}-height';
134-
@iconSize: 'button-@{size}-icon-font-size';
134+
@iconSize: 'button-@{size}-icon-size';
135135

136136
.@{button}--size-@{size} {
137137
font-size: @@fontSize;

0 commit comments

Comments
 (0)