From 4c6e90622788e71179cdc3c7ea44277f1d94c41d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 11 Jun 2026 11:49:05 +0800 Subject: [PATCH 1/2] feat(button): support custom button font-family --- packages/components/button/button.less | 17 ++++++----------- packages/uniapp-components/button/button.less | 14 ++++++-------- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/packages/components/button/button.less b/packages/components/button/button.less index c3733b9400..f5dc952846 100644 --- a/packages/components/button/button.less +++ b/packages/components/button/button.less @@ -4,10 +4,10 @@ @button-border-radius: var(--td-button-border-radius, @radius-default); @button-font-weight: var(--td-button-font-weight, 600); -@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base); -@button-small-font-size: var(--td-button-small-font-size, @font-size-base); -@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m); -@button-large-font-size: var(--td-button-large-font-size, @font-size-m); +@button-extra-small-font: var(--td-button-extra-small-font, @font-mark-medium); +@button-small-font: var(--td-button-small-font, @font-mark-medium); +@button-medium-font: var(--td-button-medium-font, @font-mark-large); +@button-large-font: var(--td-button-large-font, @font-mark-large); @button-extra-small-height: var(--td-button-extra-small-height, 56rpx); @button-small-height: var(--td-button-small-height, 64rpx); @@ -128,13 +128,13 @@ @button: ~'@{prefix}-button'; .button-size(@size) { - @fontSize: 'button-@{size}-font-size'; + @font: 'button-@{size}-font'; @padding: 'button-@{size}-padding-horizontal'; @height: 'button-@{size}-height'; @iconSize: 'button-@{size}-icon-size'; .@{button}--size-@{size} { - font-size: @@fontSize; + font: @@font; padding-left: @@padding; padding-right: @@padding; height: @@height; @@ -251,11 +251,6 @@ touch-action: manipulation; border-radius: @button-border-radius; outline: none; - font-family: - PingFang SC, - Microsoft YaHei, - Arial Regular; - font-weight: @button-font-weight; vertical-align: top; box-sizing: border-box; diff --git a/packages/uniapp-components/button/button.less b/packages/uniapp-components/button/button.less index 8bba090d45..f5dc952846 100644 --- a/packages/uniapp-components/button/button.less +++ b/packages/uniapp-components/button/button.less @@ -4,10 +4,10 @@ @button-border-radius: var(--td-button-border-radius, @radius-default); @button-font-weight: var(--td-button-font-weight, 600); -@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base); -@button-small-font-size: var(--td-button-small-font-size, @font-size-base); -@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m); -@button-large-font-size: var(--td-button-large-font-size, @font-size-m); +@button-extra-small-font: var(--td-button-extra-small-font, @font-mark-medium); +@button-small-font: var(--td-button-small-font, @font-mark-medium); +@button-medium-font: var(--td-button-medium-font, @font-mark-large); +@button-large-font: var(--td-button-large-font, @font-mark-large); @button-extra-small-height: var(--td-button-extra-small-height, 56rpx); @button-small-height: var(--td-button-small-height, 64rpx); @@ -128,13 +128,13 @@ @button: ~'@{prefix}-button'; .button-size(@size) { - @fontSize: 'button-@{size}-font-size'; + @font: 'button-@{size}-font'; @padding: 'button-@{size}-padding-horizontal'; @height: 'button-@{size}-height'; @iconSize: 'button-@{size}-icon-size'; .@{button}--size-@{size} { - font-size: @@fontSize; + font: @@font; padding-left: @@padding; padding-right: @@padding; height: @@height; @@ -251,8 +251,6 @@ touch-action: manipulation; border-radius: @button-border-radius; outline: none; - font-family: PingFang SC, Microsoft YaHei, Arial Regular; - font-weight: @button-font-weight; vertical-align: top; box-sizing: border-box; From 8b8e848c33e0e0e29737053629b4a165b9349621 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 11 Jun 2026 11:51:29 +0800 Subject: [PATCH 2/2] docs: update css var --- packages/components/button/README.en-US.md | 9 ++++----- packages/components/button/README.md | 9 ++++----- packages/components/button/button.less | 1 - packages/uniapp-components/button/README.en-US.md | 11 +++++------ packages/uniapp-components/button/README.md | 11 +++++------ packages/uniapp-components/button/button.less | 1 - 6 files changed, 18 insertions(+), 24 deletions(-) diff --git a/packages/components/button/README.en-US.md b/packages/components/button/README.en-US.md index dda91741b5..6661a174a3 100644 --- a/packages/components/button/README.en-US.md +++ b/packages/components/button/README.en-US.md @@ -178,11 +178,10 @@ Name | Default Value | Description --td-button-default-outline-color | @text-color-primary | - --td-button-default-outline-disabled-color | @component-border | - --td-button-default-text-active-bg-color | @bg-color-container-active | - ---td-button-extra-small-font-size | @font-size-base | - +--td-button-extra-small-font | @font-mark-medium | - --td-button-extra-small-height | 56rpx | - --td-button-extra-small-icon-size | 36rpx | - --td-button-extra-small-padding-horizontal | 16rpx | - ---td-button-font-weight | 600 | - --td-button-ghost-border-color | @button-ghost-color | - --td-button-ghost-color | @text-color-anti | - --td-button-ghost-danger-border-color | @error-color | - @@ -195,7 +194,7 @@ Name | Default Value | Description --td-button-ghost-primary-hover-color | @brand-color-active | - --td-button-icon-border-radius | 8rpx | - --td-button-icon-spacer | @spacer | - ---td-button-large-font-size | @font-size-m | - +--td-button-large-font | @font-mark-large | - --td-button-large-height | 96rpx | - --td-button-large-icon-size | 48rpx | - --td-button-large-padding-horizontal | 40rpx | - @@ -215,7 +214,7 @@ Name | Default Value | Description --td-button-light-outline-disabled-color | @brand-color-disabled | - --td-button-light-text-active-bg-color | @bg-color-container-active | - --td-button-light-text-color | @brand-color | - ---td-button-medium-font-size | @font-size-m | - +--td-button-medium-font | @font-mark-large | - --td-button-medium-height | 80rpx | - --td-button-medium-icon-size | 40rpx | - --td-button-medium-padding-horizontal | 32rpx | - @@ -238,7 +237,7 @@ Name | Default Value | Description --td-button-primary-text-active-bg-color | @bg-color-container-active | - --td-button-primary-text-color | @brand-color | - --td-button-primary-text-disabled-color | @brand-color-disabled | - ---td-button-small-font-size | @font-size-base | - +--td-button-small-font | @font-mark-medium | - --td-button-small-height | 64rpx | - --td-button-small-icon-size | 36rpx | - --td-button-small-padding-horizontal | 24rpx | - diff --git a/packages/components/button/README.md b/packages/components/button/README.md index 2dd324a17e..81969c29c6 100644 --- a/packages/components/button/README.md +++ b/packages/components/button/README.md @@ -180,11 +180,10 @@ t-class-loading | 加载样式类 --td-button-default-outline-color | @text-color-primary | - --td-button-default-outline-disabled-color | @component-border | - --td-button-default-text-active-bg-color | @bg-color-container-active | - ---td-button-extra-small-font-size | @font-size-base | - +--td-button-extra-small-font | @font-mark-medium | - --td-button-extra-small-height | 56rpx | - --td-button-extra-small-icon-size | 36rpx | - --td-button-extra-small-padding-horizontal | 16rpx | - ---td-button-font-weight | 600 | - --td-button-ghost-border-color | @button-ghost-color | - --td-button-ghost-color | @text-color-anti | - --td-button-ghost-danger-border-color | @error-color | - @@ -197,7 +196,7 @@ t-class-loading | 加载样式类 --td-button-ghost-primary-hover-color | @brand-color-active | - --td-button-icon-border-radius | 8rpx | - --td-button-icon-spacer | @spacer | - ---td-button-large-font-size | @font-size-m | - +--td-button-large-font | @font-mark-large | - --td-button-large-height | 96rpx | - --td-button-large-icon-size | 48rpx | - --td-button-large-padding-horizontal | 40rpx | - @@ -217,7 +216,7 @@ t-class-loading | 加载样式类 --td-button-light-outline-disabled-color | @brand-color-disabled | - --td-button-light-text-active-bg-color | @bg-color-container-active | - --td-button-light-text-color | @brand-color | - ---td-button-medium-font-size | @font-size-m | - +--td-button-medium-font | @font-mark-large | - --td-button-medium-height | 80rpx | - --td-button-medium-icon-size | 40rpx | - --td-button-medium-padding-horizontal | 32rpx | - @@ -240,7 +239,7 @@ t-class-loading | 加载样式类 --td-button-primary-text-active-bg-color | @bg-color-container-active | - --td-button-primary-text-color | @brand-color | - --td-button-primary-text-disabled-color | @brand-color-disabled | - ---td-button-small-font-size | @font-size-base | - +--td-button-small-font | @font-mark-medium | - --td-button-small-height | 64rpx | - --td-button-small-icon-size | 36rpx | - --td-button-small-padding-horizontal | 24rpx | - diff --git a/packages/components/button/button.less b/packages/components/button/button.less index f5dc952846..1eed518461 100644 --- a/packages/components/button/button.less +++ b/packages/components/button/button.less @@ -2,7 +2,6 @@ @button-border-width: var(--td-button-border-width, 4rpx); @button-border-radius: var(--td-button-border-radius, @radius-default); -@button-font-weight: var(--td-button-font-weight, 600); @button-extra-small-font: var(--td-button-extra-small-font, @font-mark-medium); @button-small-font: var(--td-button-small-font, @font-mark-medium); diff --git a/packages/uniapp-components/button/README.en-US.md b/packages/uniapp-components/button/README.en-US.md index 807f2972c6..5d1459db55 100644 --- a/packages/uniapp-components/button/README.en-US.md +++ b/packages/uniapp-components/button/README.en-US.md @@ -138,7 +138,7 @@ t-class-loading | class name of loading ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. -Name | Default Value | Description +Name | Default Value | Description -- | -- | -- --td-button-border-radius | @radius-default | - --td-button-border-width | 4rpx | - @@ -175,11 +175,10 @@ Name | Default Value | Description --td-button-default-outline-color | @text-color-primary | - --td-button-default-outline-disabled-color | @component-border | - --td-button-default-text-active-bg-color | @bg-color-container-active | - ---td-button-extra-small-font-size | @font-size-base | - +--td-button-extra-small-font | @font-mark-medium | - --td-button-extra-small-height | 56rpx | - --td-button-extra-small-icon-size | 36rpx | - --td-button-extra-small-padding-horizontal | 16rpx | - ---td-button-font-weight | 600 | - --td-button-ghost-border-color | @button-ghost-color | - --td-button-ghost-color | @text-color-anti | - --td-button-ghost-danger-border-color | @error-color | - @@ -192,7 +191,7 @@ Name | Default Value | Description --td-button-ghost-primary-hover-color | @brand-color-active | - --td-button-icon-border-radius | 8rpx | - --td-button-icon-spacer | @spacer | - ---td-button-large-font-size | @font-size-m | - +--td-button-large-font | @font-mark-large | - --td-button-large-height | 96rpx | - --td-button-large-icon-size | 48rpx | - --td-button-large-padding-horizontal | 40rpx | - @@ -212,7 +211,7 @@ Name | Default Value | Description --td-button-light-outline-disabled-color | @brand-color-disabled | - --td-button-light-text-active-bg-color | @bg-color-container-active | - --td-button-light-text-color | @brand-color | - ---td-button-medium-font-size | @font-size-m | - +--td-button-medium-font | @font-mark-large | - --td-button-medium-height | 80rpx | - --td-button-medium-icon-size | 40rpx | - --td-button-medium-padding-horizontal | 32rpx | - @@ -235,7 +234,7 @@ Name | Default Value | Description --td-button-primary-text-active-bg-color | @bg-color-container-active | - --td-button-primary-text-color | @brand-color | - --td-button-primary-text-disabled-color | @brand-color-disabled | - ---td-button-small-font-size | @font-size-base | - +--td-button-small-font | @font-mark-medium | - --td-button-small-height | 64rpx | - --td-button-small-icon-size | 36rpx | - --td-button-small-padding-horizontal | 24rpx | - diff --git a/packages/uniapp-components/button/README.md b/packages/uniapp-components/button/README.md index 2fa20250ff..bd70f046b3 100644 --- a/packages/uniapp-components/button/README.md +++ b/packages/uniapp-components/button/README.md @@ -131,7 +131,7 @@ t-class-loading | 加载样式类 ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 -名称 | 默认值 | 描述 +名称 | 默认值 | 描述 -- | -- | -- --td-button-border-radius | @radius-default | - --td-button-border-width | 4rpx | - @@ -168,11 +168,10 @@ t-class-loading | 加载样式类 --td-button-default-outline-color | @text-color-primary | - --td-button-default-outline-disabled-color | @component-border | - --td-button-default-text-active-bg-color | @bg-color-container-active | - ---td-button-extra-small-font-size | @font-size-base | - +--td-button-extra-small-font | @font-mark-medium | - --td-button-extra-small-height | 56rpx | - --td-button-extra-small-icon-size | 36rpx | - --td-button-extra-small-padding-horizontal | 16rpx | - ---td-button-font-weight | 600 | - --td-button-ghost-border-color | @button-ghost-color | - --td-button-ghost-color | @text-color-anti | - --td-button-ghost-danger-border-color | @error-color | - @@ -185,7 +184,7 @@ t-class-loading | 加载样式类 --td-button-ghost-primary-hover-color | @brand-color-active | - --td-button-icon-border-radius | 8rpx | - --td-button-icon-spacer | @spacer | - ---td-button-large-font-size | @font-size-m | - +--td-button-large-font | @font-mark-large | - --td-button-large-height | 96rpx | - --td-button-large-icon-size | 48rpx | - --td-button-large-padding-horizontal | 40rpx | - @@ -205,7 +204,7 @@ t-class-loading | 加载样式类 --td-button-light-outline-disabled-color | @brand-color-disabled | - --td-button-light-text-active-bg-color | @bg-color-container-active | - --td-button-light-text-color | @brand-color | - ---td-button-medium-font-size | @font-size-m | - +--td-button-medium-font | @font-mark-large | - --td-button-medium-height | 80rpx | - --td-button-medium-icon-size | 40rpx | - --td-button-medium-padding-horizontal | 32rpx | - @@ -228,7 +227,7 @@ t-class-loading | 加载样式类 --td-button-primary-text-active-bg-color | @bg-color-container-active | - --td-button-primary-text-color | @brand-color | - --td-button-primary-text-disabled-color | @brand-color-disabled | - ---td-button-small-font-size | @font-size-base | - +--td-button-small-font | @font-mark-medium | - --td-button-small-height | 64rpx | - --td-button-small-icon-size | 36rpx | - --td-button-small-padding-horizontal | 24rpx | - diff --git a/packages/uniapp-components/button/button.less b/packages/uniapp-components/button/button.less index f5dc952846..1eed518461 100644 --- a/packages/uniapp-components/button/button.less +++ b/packages/uniapp-components/button/button.less @@ -2,7 +2,6 @@ @button-border-width: var(--td-button-border-width, 4rpx); @button-border-radius: var(--td-button-border-radius, @radius-default); -@button-font-weight: var(--td-button-font-weight, 600); @button-extra-small-font: var(--td-button-extra-small-font, @font-mark-medium); @button-small-font: var(--td-button-small-font, @font-mark-medium);