Skip to content

Commit 376516b

Browse files
liweijie0812tdesign-bot
liweijie0812
and
tdesign-bot
authored
feat(button): support custom button font-family (#4501)
* feat(button): support custom button font-family * docs: update css var * chore: fix cr, remove line-height * chore: stash changelog [ci skip] --------- Co-authored-by: tdesign-bot <tdesign@tencent.com>
1 parent 589d153 commit 376516b

8 files changed

Lines changed: 40 additions & 43 deletions

File tree

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -178,11 +178,10 @@ Name | Default Value | Description
178178
--td-button-default-outline-color | @text-color-primary | -
179179
--td-button-default-outline-disabled-color | @component-border | -
180180
--td-button-default-text-active-bg-color | @bg-color-container-active | -
181-
--td-button-extra-small-font-size | @font-size-base | -
181+
--td-button-extra-small-font | @font-mark-medium | -
182182
--td-button-extra-small-height | 56rpx | -
183183
--td-button-extra-small-icon-size | 36rpx | -
184184
--td-button-extra-small-padding-horizontal | 16rpx | -
185-
--td-button-font-weight | 600 | -
186185
--td-button-ghost-border-color | @button-ghost-color | -
187186
--td-button-ghost-color | @text-color-anti | -
188187
--td-button-ghost-danger-border-color | @error-color | -
@@ -195,7 +194,7 @@ Name | Default Value | Description
195194
--td-button-ghost-primary-hover-color | @brand-color-active | -
196195
--td-button-icon-border-radius | 8rpx | -
197196
--td-button-icon-spacer | @spacer | -
198-
--td-button-large-font-size | @font-size-m | -
197+
--td-button-large-font | @font-mark-large | -
199198
--td-button-large-height | 96rpx | -
200199
--td-button-large-icon-size | 48rpx | -
201200
--td-button-large-padding-horizontal | 40rpx | -
@@ -215,7 +214,7 @@ Name | Default Value | Description
215214
--td-button-light-outline-disabled-color | @brand-color-disabled | -
216215
--td-button-light-text-active-bg-color | @bg-color-container-active | -
217216
--td-button-light-text-color | @brand-color | -
218-
--td-button-medium-font-size | @font-size-m | -
217+
--td-button-medium-font | @font-mark-large | -
219218
--td-button-medium-height | 80rpx | -
220219
--td-button-medium-icon-size | 40rpx | -
221220
--td-button-medium-padding-horizontal | 32rpx | -
@@ -238,7 +237,7 @@ Name | Default Value | Description
238237
--td-button-primary-text-active-bg-color | @bg-color-container-active | -
239238
--td-button-primary-text-color | @brand-color | -
240239
--td-button-primary-text-disabled-color | @brand-color-disabled | -
241-
--td-button-small-font-size | @font-size-base | -
240+
--td-button-small-font | @font-mark-medium | -
242241
--td-button-small-height | 64rpx | -
243242
--td-button-small-icon-size | 36rpx | -
244243
--td-button-small-padding-horizontal | 24rpx | -

‎packages/components/button/README.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -180,11 +180,10 @@ t-class-loading | 加载样式类
180180
--td-button-default-outline-color | @text-color-primary | -
181181
--td-button-default-outline-disabled-color | @component-border | -
182182
--td-button-default-text-active-bg-color | @bg-color-container-active | -
183-
--td-button-extra-small-font-size | @font-size-base | -
183+
--td-button-extra-small-font | @font-mark-medium | -
184184
--td-button-extra-small-height | 56rpx | -
185185
--td-button-extra-small-icon-size | 36rpx | -
186186
--td-button-extra-small-padding-horizontal | 16rpx | -
187-
--td-button-font-weight | 600 | -
188187
--td-button-ghost-border-color | @button-ghost-color | -
189188
--td-button-ghost-color | @text-color-anti | -
190189
--td-button-ghost-danger-border-color | @error-color | -
@@ -197,7 +196,7 @@ t-class-loading | 加载样式类
197196
--td-button-ghost-primary-hover-color | @brand-color-active | -
198197
--td-button-icon-border-radius | 8rpx | -
199198
--td-button-icon-spacer | @spacer | -
200-
--td-button-large-font-size | @font-size-m | -
199+
--td-button-large-font | @font-mark-large | -
201200
--td-button-large-height | 96rpx | -
202201
--td-button-large-icon-size | 48rpx | -
203202
--td-button-large-padding-horizontal | 40rpx | -
@@ -217,7 +216,7 @@ t-class-loading | 加载样式类
217216
--td-button-light-outline-disabled-color | @brand-color-disabled | -
218217
--td-button-light-text-active-bg-color | @bg-color-container-active | -
219218
--td-button-light-text-color | @brand-color | -
220-
--td-button-medium-font-size | @font-size-m | -
219+
--td-button-medium-font | @font-mark-large | -
221220
--td-button-medium-height | 80rpx | -
222221
--td-button-medium-icon-size | 40rpx | -
223222
--td-button-medium-padding-horizontal | 32rpx | -
@@ -240,7 +239,7 @@ t-class-loading | 加载样式类
240239
--td-button-primary-text-active-bg-color | @bg-color-container-active | -
241240
--td-button-primary-text-color | @brand-color | -
242241
--td-button-primary-text-disabled-color | @brand-color-disabled | -
243-
--td-button-small-font-size | @font-size-base | -
242+
--td-button-small-font | @font-mark-medium | -
244243
--td-button-small-height | 64rpx | -
245244
--td-button-small-icon-size | 36rpx | -
246245
--td-button-small-padding-horizontal | 24rpx | -

‎packages/components/button/button.less‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22

33
@button-border-width: var(--td-button-border-width, 4rpx);
44
@button-border-radius: var(--td-button-border-radius, @radius-default);
5-
@button-font-weight: var(--td-button-font-weight, 600);
65

7-
@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base);
8-
@button-small-font-size: var(--td-button-small-font-size, @font-size-base);
9-
@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m);
10-
@button-large-font-size: var(--td-button-large-font-size, @font-size-m);
6+
@button-extra-small-font: var(--td-button-extra-small-font, @font-mark-medium);
7+
@button-small-font: var(--td-button-small-font, @font-mark-medium);
8+
@button-medium-font: var(--td-button-medium-font, @font-mark-large);
9+
@button-large-font: var(--td-button-large-font, @font-mark-large);
1110

1211
@button-extra-small-height: var(--td-button-extra-small-height, 56rpx);
1312
@button-small-height: var(--td-button-small-height, 64rpx);
@@ -128,17 +127,16 @@
128127
@button: ~'@{prefix}-button';
129128

130129
.button-size(@size) {
131-
@fontSize: 'button-@{size}-font-size';
130+
@font: 'button-@{size}-font';
132131
@padding: 'button-@{size}-padding-horizontal';
133132
@height: 'button-@{size}-height';
134133
@iconSize: 'button-@{size}-icon-size';
135134

136135
.@{button}--size-@{size} {
137-
font-size: @@fontSize;
136+
font: @@font;
138137
padding-left: @@padding;
139138
padding-right: @@padding;
140139
height: @@height;
141-
line-height: @@height;
142140

143141
& .@{button}__icon {
144142
font-size: @@iconSize;
@@ -251,11 +249,6 @@
251249
touch-action: manipulation;
252250
border-radius: @button-border-radius;
253251
outline: none;
254-
font-family:
255-
PingFang SC,
256-
Microsoft YaHei,
257-
Arial Regular;
258-
font-weight: @button-font-weight;
259252
vertical-align: top;
260253
box-sizing: border-box;
261254

‎packages/tdesign-miniprogram/.changelog/pr-4501.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
pr_number: 4501
3+
contributor: liweijie0812
4+
---
5+
6+
- fix(Button): ⚠️ `--td-button-xx-font-size` 系列变更为 `--td-button-xx-font`；⚠️ 移除 `--td-button-font-weight`，请改用 `--td-button-xx-font`，或者[组件库级别的 css var ](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/style/theme/_font.less)调整字号、行高、字重、字体等文本样式 @liweijie0812 ([#4501](https://github.com/Tencent/tdesign-miniprogram/pull/4501))

‎packages/tdesign-uniapp/.changelog/pr-4501.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
pr_number: 4501
3+
contributor: liweijie0812
4+
---
5+
6+
- fix(Button): ⚠️ `--td-button-xx-font-size` 系列变更为 `--td-button-xx-font`；⚠️ 移除 `--td-button-font-weight`，请改用 `--td-button-xx-font`，或者[组件库级别的 css var ](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/style/theme/_font.less)调整字号、行高、字重、字体等文本样式 @liweijie0812 ([#4501](https://github.com/Tencent/tdesign-miniprogram/pull/4501))

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -175,11 +175,10 @@ Name | Default Value | Description
175175
--td-button-default-outline-color | @text-color-primary | -
176176
--td-button-default-outline-disabled-color | @component-border | -
177177
--td-button-default-text-active-bg-color | @bg-color-container-active | -
178-
--td-button-extra-small-font-size | @font-size-base | -
178+
--td-button-extra-small-font | @font-mark-medium | -
179179
--td-button-extra-small-height | 56rpx | -
180180
--td-button-extra-small-icon-size | 36rpx | -
181181
--td-button-extra-small-padding-horizontal | 16rpx | -
182-
--td-button-font-weight | 600 | -
183182
--td-button-ghost-border-color | @button-ghost-color | -
184183
--td-button-ghost-color | @text-color-anti | -
185184
--td-button-ghost-danger-border-color | @error-color | -
@@ -192,7 +191,7 @@ Name | Default Value | Description
192191
--td-button-ghost-primary-hover-color | @brand-color-active | -
193192
--td-button-icon-border-radius | 8rpx | -
194193
--td-button-icon-spacer | @spacer | -
195-
--td-button-large-font-size | @font-size-m | -
194+
--td-button-large-font | @font-mark-large | -
196195
--td-button-large-height | 96rpx | -
197196
--td-button-large-icon-size | 48rpx | -
198197
--td-button-large-padding-horizontal | 40rpx | -
@@ -212,7 +211,7 @@ Name | Default Value | Description
212211
--td-button-light-outline-disabled-color | @brand-color-disabled | -
213212
--td-button-light-text-active-bg-color | @bg-color-container-active | -
214213
--td-button-light-text-color | @brand-color | -
215-
--td-button-medium-font-size | @font-size-m | -
214+
--td-button-medium-font | @font-mark-large | -
216215
--td-button-medium-height | 80rpx | -
217216
--td-button-medium-icon-size | 40rpx | -
218217
--td-button-medium-padding-horizontal | 32rpx | -
@@ -235,7 +234,7 @@ Name | Default Value | Description
235234
--td-button-primary-text-active-bg-color | @bg-color-container-active | -
236235
--td-button-primary-text-color | @brand-color | -
237236
--td-button-primary-text-disabled-color | @brand-color-disabled | -
238-
--td-button-small-font-size | @font-size-base | -
237+
--td-button-small-font | @font-mark-medium | -
239238
--td-button-small-height | 64rpx | -
240239
--td-button-small-icon-size | 36rpx | -
241240
--td-button-small-padding-horizontal | 24rpx | -

‎packages/uniapp-components/button/README.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -168,11 +168,10 @@ t-class-loading | 加载样式类
168168
--td-button-default-outline-color | @text-color-primary | -
169169
--td-button-default-outline-disabled-color | @component-border | -
170170
--td-button-default-text-active-bg-color | @bg-color-container-active | -
171-
--td-button-extra-small-font-size | @font-size-base | -
171+
--td-button-extra-small-font | @font-mark-medium | -
172172
--td-button-extra-small-height | 56rpx | -
173173
--td-button-extra-small-icon-size | 36rpx | -
174174
--td-button-extra-small-padding-horizontal | 16rpx | -
175-
--td-button-font-weight | 600 | -
176175
--td-button-ghost-border-color | @button-ghost-color | -
177176
--td-button-ghost-color | @text-color-anti | -
178177
--td-button-ghost-danger-border-color | @error-color | -
@@ -185,7 +184,7 @@ t-class-loading | 加载样式类
185184
--td-button-ghost-primary-hover-color | @brand-color-active | -
186185
--td-button-icon-border-radius | 8rpx | -
187186
--td-button-icon-spacer | @spacer | -
188-
--td-button-large-font-size | @font-size-m | -
187+
--td-button-large-font | @font-mark-large | -
189188
--td-button-large-height | 96rpx | -
190189
--td-button-large-icon-size | 48rpx | -
191190
--td-button-large-padding-horizontal | 40rpx | -
@@ -205,7 +204,7 @@ t-class-loading | 加载样式类
205204
--td-button-light-outline-disabled-color | @brand-color-disabled | -
206205
--td-button-light-text-active-bg-color | @bg-color-container-active | -
207206
--td-button-light-text-color | @brand-color | -
208-
--td-button-medium-font-size | @font-size-m | -
207+
--td-button-medium-font | @font-mark-large | -
209208
--td-button-medium-height | 80rpx | -
210209
--td-button-medium-icon-size | 40rpx | -
211210
--td-button-medium-padding-horizontal | 32rpx | -
@@ -228,7 +227,7 @@ t-class-loading | 加载样式类
228227
--td-button-primary-text-active-bg-color | @bg-color-container-active | -
229228
--td-button-primary-text-color | @brand-color | -
230229
--td-button-primary-text-disabled-color | @brand-color-disabled | -
231-
--td-button-small-font-size | @font-size-base | -
230+
--td-button-small-font | @font-mark-medium | -
232231
--td-button-small-height | 64rpx | -
233232
--td-button-small-icon-size | 36rpx | -
234233
--td-button-small-padding-horizontal | 24rpx | -

‎packages/uniapp-components/button/button.less‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22

33
@button-border-width: var(--td-button-border-width, 4rpx);
44
@button-border-radius: var(--td-button-border-radius, @radius-default);
5-
@button-font-weight: var(--td-button-font-weight, 600);
65

7-
@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base);
8-
@button-small-font-size: var(--td-button-small-font-size, @font-size-base);
9-
@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m);
10-
@button-large-font-size: var(--td-button-large-font-size, @font-size-m);
6+
@button-extra-small-font: var(--td-button-extra-small-font, @font-mark-medium);
7+
@button-small-font: var(--td-button-small-font, @font-mark-medium);
8+
@button-medium-font: var(--td-button-medium-font, @font-mark-large);
9+
@button-large-font: var(--td-button-large-font, @font-mark-large);
1110

1211
@button-extra-small-height: var(--td-button-extra-small-height, 56rpx);
1312
@button-small-height: var(--td-button-small-height, 64rpx);
@@ -128,17 +127,16 @@
128127
@button: ~'@{prefix}-button';
129128

130129
.button-size(@size) {
131-
@fontSize: 'button-@{size}-font-size';
130+
@font: 'button-@{size}-font';
132131
@padding: 'button-@{size}-padding-horizontal';
133132
@height: 'button-@{size}-height';
134133
@iconSize: 'button-@{size}-icon-size';
135134

136135
.@{button}--size-@{size} {
137-
font-size: @@fontSize;
136+
font: @@font;
138137
padding-left: @@padding;
139138
padding-right: @@padding;
140139
height: @@height;
141-
line-height: @@height;
142140

143141
& .@{button}__icon {
144142
font-size: @@iconSize;
@@ -251,8 +249,6 @@
251249
touch-action: manipulation;
252250
border-radius: @button-border-radius;
253251
outline: none;
254-
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
255-
font-weight: @button-font-weight;
256252
vertical-align: top;
257253
box-sizing: border-box;
258254

0 commit comments

Comments
 (0)