style: use font token

src/action-sheet/action-sheet.en-US.md

@@ -33,6 +33,7 @@ Name | Default Value | Description
 --td-action-sheet-cancel-height | 48px | -
 --td-action-sheet-color | @text-color-primary | -
 --td-action-sheet-description-color | @text-color-placeholder | -
+--td-action-sheet-description-font | @font-body-medium | -
 --td-action-sheet-dot-active-color | @brand-color | -
 --td-action-sheet-dot-color | @text-color-disabled | -
 --td-action-sheet-dot-size | 8px | -

src/action-sheet/action-sheet.md

@@ -33,6 +33,7 @@ onSelected | Function |  | TS 类型：`(selected: ActionSheetItem \| string, in
 --td-action-sheet-cancel-height | 48px | -
 --td-action-sheet-color | @text-color-primary | -
 --td-action-sheet-description-color | @text-color-placeholder | -
+--td-action-sheet-description-font | @font-body-medium | -
 --td-action-sheet-dot-active-color | @brand-color | -
 --td-action-sheet-dot-color | @text-color-disabled | -
 --td-action-sheet-dot-size | 8px | -

src/badge/badge.en-US.md

@@ -32,9 +32,8 @@ Name | Default Value | Description
 --td-badge-border-radius | 2px | -
 --td-badge-bubble-border-radius | 10px 10px 10px 1px | -
 --td-badge-dot-size | 8px | -
---td-badge-font-size | @font-size-xs | -
---td-badge-font-weight | 600 | -
---td-badge-large-font-size | @font-size-s | -
+--td-badge-font | @font-mark-extraSmall | -
+--td-badge-large-font | @font-mark-small | -
 --td-badge-large-height | 20px | -
 --td-badge-large-padding | 5px | -
 --td-badge-text-color | @font-white-1 | -

src/badge/badge.md

@@ -31,9 +31,8 @@ size | String | medium | 尺寸。可选项：medium/large | N
 --td-badge-border-radius | 2px | -
 --td-badge-bubble-border-radius | 10px 10px 10px 1px | -
 --td-badge-dot-size | 8px | -
---td-badge-font-size | @font-size-xs | -
---td-badge-font-weight | 600 | -
---td-badge-large-font-size | @font-size-s | -
+--td-badge-font | @font-mark-extraSmall | -
+--td-badge-large-font | @font-mark-small | -
 --td-badge-large-height | 20px | -
 --td-badge-large-padding | 5px | -
 --td-badge-text-color | @font-white-1 | -

src/button/button.en-US.md

@@ -63,7 +63,7 @@ Name | Default Value | Description
 --td-button-default-text-active-bg-color | @bg-color-container-active | -
 --td-button-extra-small-font-size | @font-size-base | -
 --td-button-extra-small-height | 28px | -
---td-button-extra-small-icon-font-size | 18px | -
+--td-button-extra-small-icon-size | 18px | -
 --td-button-extra-small-padding-horizontal | 8px | -
 --td-button-font-weight | 600 | -
 --td-button-ghost-border-color | @button-ghost-color | -
@@ -80,7 +80,7 @@ Name | Default Value | Description
 --td-button-icon-spacer | @spacer | -
 --td-button-large-font-size | @font-size-m | -
 --td-button-large-height | 48px | -
---td-button-large-icon-font-size | 24px | -
+--td-button-large-icon-size | 24px | -
 --td-button-large-padding-horizontal | 20px | -
 --td-button-light-active-bg-color | @brand-color-light-active | -
 --td-button-light-active-border-color | @brand-color-light-active | -
@@ -100,7 +100,7 @@ Name | Default Value | Description
 --td-button-light-text-color | @brand-color | -
 --td-button-medium-font-size | @font-size-m | -
 --td-button-medium-height | 40px | -
---td-button-medium-icon-font-size | 20px | -
+--td-button-medium-icon-size | 20px | -
 --td-button-medium-padding-horizontal | 16px | -
 --td-button-primary-active-bg-color | @brand-color-active | -
 --td-button-primary-active-border-color | @brand-color-active | -
@@ -120,5 +120,5 @@ Name | Default Value | Description
 --td-button-primary-text-disabled-color | @brand-color-disabled | -
 --td-button-small-font-size | @font-size-base | -
 --td-button-small-height | 32px | -
---td-button-small-icon-font-size | 18px | -
+--td-button-small-icon-size | 18px | -
 --td-button-small-padding-horizontal | 12px | -

src/button/button.md

@@ -63,7 +63,7 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触
 --td-button-default-text-active-bg-color | @bg-color-container-active | -
 --td-button-extra-small-font-size | @font-size-base | -
 --td-button-extra-small-height | 28px | -
---td-button-extra-small-icon-font-size | 18px | -
+--td-button-extra-small-icon-size | 18px | -
 --td-button-extra-small-padding-horizontal | 8px | -
 --td-button-font-weight | 600 | -
 --td-button-ghost-border-color | @button-ghost-color | -
@@ -80,7 +80,7 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触
 --td-button-icon-spacer | @spacer | -
 --td-button-large-font-size | @font-size-m | -
 --td-button-large-height | 48px | -
---td-button-large-icon-font-size | 24px | -
+--td-button-large-icon-size | 24px | -
 --td-button-large-padding-horizontal | 20px | -
 --td-button-light-active-bg-color | @brand-color-light-active | -
 --td-button-light-active-border-color | @brand-color-light-active | -
@@ -100,7 +100,7 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触
 --td-button-light-text-color | @brand-color | -
 --td-button-medium-font-size | @font-size-m | -
 --td-button-medium-height | 40px | -
---td-button-medium-icon-font-size | 20px | -
+--td-button-medium-icon-size | 20px | -
 --td-button-medium-padding-horizontal | 16px | -
 --td-button-primary-active-bg-color | @brand-color-active | -
 --td-button-primary-active-border-color | @brand-color-active | -
@@ -120,5 +120,5 @@ onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触
 --td-button-primary-text-disabled-color | @brand-color-disabled | -
 --td-button-small-font-size | @font-size-base | -
 --td-button-small-height | 32px | -
---td-button-small-icon-font-size | 18px | -
+--td-button-small-icon-size | 18px | -
 --td-button-small-padding-horizontal | 12px | -

src/calendar/calendar.en-US.md

@@ -47,4 +47,4 @@ Name | Default Value | Description
 --td-calendar-switch-mode-icon-color | @text-color-secondary | -
 --td-calendar-switch-mode-icon-disabled-color | @text-color-disabled | -
 --td-calendar-title-color | @text-color-primary | -
---td-calendar-title-font-size | 18px | -
+--td-calendar-title-font | @font-title-large | -

src/calendar/calendar.md

@@ -47,4 +47,4 @@ onSelect | Function |  | TS 类型：`(value: Date) => void`<br/>点击日期时
 --td-calendar-switch-mode-icon-color | @text-color-secondary | -
 --td-calendar-switch-mode-icon-disabled-color | @text-color-disabled | -
 --td-calendar-title-color | @text-color-primary | -
---td-calendar-title-font-size | 18px | -
+--td-calendar-title-font | @font-title-large | -

src/cascader/cascader.en-US.md

@@ -30,14 +30,15 @@ onPick | Function |  | Typescript：`(value: string \| number, index: number) =>
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-cascader-disabled-color | @text-color-disabled | -
---td-cascader-options-title-color | @text-color-placeholder | -
---td-cascader-step-arrow-color | @text-color-placeholder | -
 --td-cascader-active-color | @brand-color | -
 --td-cascader-bg-color | @bg-color-container | -
 --td-cascader-border-color | @component-stroke | -
+--td-cascader-disabled-color | @text-color-disabled | -
 --td-cascader-options-height | 320px | -
+--td-cascader-options-title-color | @text-color-placeholder | -
+--td-cascader-step-arrow-color | @text-color-placeholder | -
 --td-cascader-step-dot-size | 8px | -
 --td-cascader-step-height | 44px | -
 --td-cascader-title-color | @text-color-primary | -
---td-cascader-title-font-size | 18px | -
+--td-cascader-title-font | @font-title-large | -
+--td-cascader-title-padding | @spacer-2 | -

src/cascader/cascader.md

@@ -71,14 +71,15 @@ onPick | Function |  | TS 类型：`(value: string \| number, index: number) =>
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-cascader-disabled-color | @text-color-disabled | -
---td-cascader-options-title-color | @text-color-placeholder | -
---td-cascader-step-arrow-color | @text-color-placeholder | -
 --td-cascader-active-color | @brand-color | -
 --td-cascader-bg-color | @bg-color-container | -
 --td-cascader-border-color | @component-stroke | -
+--td-cascader-disabled-color | @text-color-disabled | -
 --td-cascader-options-height | 320px | -
+--td-cascader-options-title-color | @text-color-placeholder | -
+--td-cascader-step-arrow-color | @text-color-placeholder | -
 --td-cascader-step-dot-size | 8px | -
 --td-cascader-step-height | 44px | -
 --td-cascader-title-color | @text-color-primary | -
---td-cascader-title-font-size | 18px | -
+--td-cascader-title-font | @font-title-large | -
+--td-cascader-title-padding | @spacer-2 | -

src/cell/cell.en-US.md

@@ -42,8 +42,7 @@ Name | Default Value | Description
 --td-cell-border-color | @component-stroke | -
 --td-cell-border-right-space | 0 | -
 --td-cell-description-color | @text-color-secondary | -
---td-cell-description-font-size | @font-size-base | -
---td-cell-description-line-height | 22px | -
+--td-cell-description-font | @font-body-medium | -
 --td-cell-group-border-color | @border-color | -
 --td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
 --td-cell-group-title-color | @text-color-placeholder | -
@@ -56,14 +55,13 @@ Name | Default Value | Description
 --td-cell-image-height | 48px | -
 --td-cell-image-width | 48px | -
 --td-cell-left-icon-color | @brand-color | -
---td-cell-left-icon-font-size | 24px | -
---td-cell-line-height | 24px | -
+--td-cell-left-icon-size | 24px | -
 --td-cell-note-color | @text-color-placeholder | -
---td-cell-note-font-size | @font-size-m | -
+--td-cell-note-font | @font-body-medium | -
 --td-cell-required-color | @error-color-6 | -
---td-cell-required-font-size | @font-size-m | -
+--td-cell-required-font | @font-body-medium | -
 --td-cell-right-icon-color | @text-color-placeholder | -
---td-cell-right-icon-font-size | 24px | -
+--td-cell-right-icon-size | 24px | -
 --td-cell-title-color | @text-color-primary | -
---td-cell-title-font-size | @font-size-m | -
+--td-cell-title-font | @font-body-large | -
 --td-cell-vertical-padding | 16px | -

src/cell/cell.md

@@ -42,8 +42,7 @@ title | String | - | 单元格组标题 | N
 --td-cell-border-color | @component-stroke | -
 --td-cell-border-right-space | 0 | -
 --td-cell-description-color | @text-color-secondary | -
---td-cell-description-font-size | @font-size-base | -
---td-cell-description-line-height | 22px | -
+--td-cell-description-font | @font-body-medium | -
 --td-cell-group-border-color | @border-color | -
 --td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
 --td-cell-group-title-color | @text-color-placeholder | -
@@ -56,14 +55,13 @@ title | String | - | 单元格组标题 | N
 --td-cell-image-height | 48px | -
 --td-cell-image-width | 48px | -
 --td-cell-left-icon-color | @brand-color | -
---td-cell-left-icon-font-size | 24px | -
---td-cell-line-height | 24px | -
+--td-cell-left-icon-size | 24px | -
 --td-cell-note-color | @text-color-placeholder | -
---td-cell-note-font-size | @font-size-m | -
+--td-cell-note-font | @font-body-medium | -
 --td-cell-required-color | @error-color-6 | -
---td-cell-required-font-size | @font-size-m | -
+--td-cell-required-font | @font-body-medium | -
 --td-cell-right-icon-color | @text-color-placeholder | -
---td-cell-right-icon-font-size | 24px | -
+--td-cell-right-icon-size | 24px | -
 --td-cell-title-color | @text-color-primary | -
---td-cell-title-font-size | @font-size-m | -
+--td-cell-title-font | @font-body-large | -
 --td-cell-vertical-padding | 16px | -

src/checkbox/checkbox.en-US.md

@@ -55,8 +55,7 @@ Name | Default Value | Description
 --td-checkbox-border-color | @component-stroke | -
 --td-checkbox-description-color | @text-color-secondary | -
 --td-checkbox-description-disabled-color | @text-color-disabled | -
---td-checkbox-description-line-height | 22px | -
---td-checkbox-font-size | 16px | -
+--td-checkbox-description-font | @font-body-medium | -
 --td-checkbox-icon-checked-color | @brand-color | -
 --td-checkbox-icon-color | var(--td-border-level-2-color, @gray-color-4) | -
 --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
@@ -67,5 +66,6 @@ Name | Default Value | Description
 --td-checkbox-tag-bg-color | @bg-color-component | -
 --td-checkbox-title-color | @text-color-primary | -
 --td-checkbox-title-disabled-color | @text-color-disabled | -
+--td-checkbox-title-font | @font-body-large | -
 --td-checkbox-title-line-height | 24px | -
---td-checkbox-vertical-padding | 16px | -
+--td-checkbox-vertical-padding | @spacer-2 | -

src/checkbox/checkbox.md

@@ -55,8 +55,7 @@ onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeCon
 --td-checkbox-border-color | @component-stroke | -
 --td-checkbox-description-color | @text-color-secondary | -
 --td-checkbox-description-disabled-color | @text-color-disabled | -
---td-checkbox-description-line-height | 22px | -
---td-checkbox-font-size | 16px | -
+--td-checkbox-description-font | @font-body-medium | -
 --td-checkbox-icon-checked-color | @brand-color | -
 --td-checkbox-icon-color | var(--td-border-level-2-color, @gray-color-4) | -
 --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
@@ -67,5 +66,6 @@ onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeCon
 --td-checkbox-tag-bg-color | @bg-color-component | -
 --td-checkbox-title-color | @text-color-primary | -
 --td-checkbox-title-disabled-color | @text-color-disabled | -
+--td-checkbox-title-font | @font-body-large | -
 --td-checkbox-title-line-height | 24px | -
---td-checkbox-vertical-padding | 16px | -
+--td-checkbox-vertical-padding | @spacer-2 | -

src/collapse/collapse.en-US.md

@@ -42,13 +42,12 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description 
 -- | -- | --
 --td-collapse-border-color | @border-color | -
---td-collapse-content-font-size | @font-size-base | -
---td-collapse-content-line-height | 1.5 | -
+--td-collapse-content-font | @font-body-medium | -
 --td-collapse-content-padding | 16px | -
 --td-collapse-content-text-color | @text-color-primary | -
---td-collapse-extra-font-size | @font-size-m | -
+--td-collapse-extra-font | @font-body-large | -
 --td-collapse-header-text-color | @text-color-primary | -
 --td-collapse-header-text-disabled-color | @text-color-disabled | -
 --td-collapse-icon-color | @text-color-placeholder | -
 --td-collapse-panel-bg-color | @bg-color-container | -
---td-collapse-title-font-size | @font-size-m | -
+--td-collapse-title-font | @font-body-large | -

src/collapse/collapse.md

@@ -42,13 +42,12 @@ value | String / Number | - | 当前面板唯一标识，如果值为空则取
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-collapse-border-color | @border-color | -
---td-collapse-content-font-size | @font-size-base | -
---td-collapse-content-line-height | 1.5 | -
+--td-collapse-content-font | @font-body-medium | -
 --td-collapse-content-padding | 16px | -
 --td-collapse-content-text-color | @text-color-primary | -
---td-collapse-extra-font-size | @font-size-m | -
+--td-collapse-extra-font | @font-body-large | -
 --td-collapse-header-text-color | @text-color-primary | -
 --td-collapse-header-text-disabled-color | @text-color-disabled | -
 --td-collapse-icon-color | @text-color-placeholder | -
 --td-collapse-panel-bg-color | @bg-color-container | -
---td-collapse-title-font-size | @font-size-m | -
+--td-collapse-title-font | @font-body-large | -

src/color-picker/color-picker.en-US.md

@@ -25,14 +25,12 @@ onPaletteBarChange | Function |  | Typescript：`(context: { color: ColorObject
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-color-picker-background | #fff | -
---td-color-picker-border-radius-circle | 50% | -
 --td-color-picker-format-background-color | @gray-color-1 | -
 --td-color-picker-gradient-preview-height | 28px | -
 --td-color-picker-gradient-preview-radius | 3px | -
 --td-color-picker-gradient-preview-width | 28px | -
 --td-color-picker-input-format-margin-left | 24px | -
---td-color-picker-margin | 12px | -
+--td-color-picker-panel-background | @bg-color-container | -
 --td-color-picker-panel-padding | 16px | -
 --td-color-picker-panel-radius | 12px | -
 --td-color-picker-panel-width | 375px | -
@@ -45,8 +43,8 @@ Name | Default Value | Description
 --td-color-picker-slider-thumb-transform-x | -9px | -
 --td-color-picker-slider-wrapper-padding | 0 9px | -
 --td-color-picker-swatch-active | rgba(0, 0, 0, 20%) | -
---td-color-picker-swatch-border-radius | 3px | -
+--td-color-picker-swatch-border-radius | @radius-small | -
 --td-color-picker-swatch-height | 24px | -
 --td-color-picker-swatch-padding | 0 | -
 --td-color-picker-swatch-width | 24px | -
---td-color-picker-swatches-title-font | 16px | -
+--td-color-picker-swatches-title-font | @font-title-medium | -

src/color-picker/color-picker.md

@@ -25,14 +25,12 @@ onPaletteBarChange | Function |  | TS 类型：`(context: { color: ColorObject }
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-color-picker-background | #fff | -
---td-color-picker-border-radius-circle | 50% | -
 --td-color-picker-format-background-color | @gray-color-1 | -
 --td-color-picker-gradient-preview-height | 28px | -
 --td-color-picker-gradient-preview-radius | 3px | -
 --td-color-picker-gradient-preview-width | 28px | -
 --td-color-picker-input-format-margin-left | 24px | -
---td-color-picker-margin | 12px | -
+--td-color-picker-panel-background | @bg-color-container | -
 --td-color-picker-panel-padding | 16px | -
 --td-color-picker-panel-radius | 12px | -
 --td-color-picker-panel-width | 375px | -
@@ -45,8 +43,8 @@ onPaletteBarChange | Function |  | TS 类型：`(context: { color: ColorObject }
 --td-color-picker-slider-thumb-transform-x | -9px | -
 --td-color-picker-slider-wrapper-padding | 0 9px | -
 --td-color-picker-swatch-active | rgba(0, 0, 0, 20%) | -
---td-color-picker-swatch-border-radius | 3px | -
+--td-color-picker-swatch-border-radius | @radius-small | -
 --td-color-picker-swatch-height | 24px | -
 --td-color-picker-swatch-padding | 0 | -
 --td-color-picker-swatch-width | 24px | -
---td-color-picker-swatches-title-font | 16px | -
+--td-color-picker-swatches-title-font | @font-title-medium | -

src/dialog/dialog.en-US.md

@@ -76,11 +76,9 @@ Name | Default Value | Description
 --td-dialog-body-max-height | 456px | -
 --td-dialog-border-radius | @radius-extraLarge | -
 --td-dialog-close-color | @text-color-placeholder | -
---td-dialog-close-font-size | 22px | -
+--td-dialog-close-icon-size | 22px | -
 --td-dialog-content-color | @text-color-secondary | -
---td-dialog-content-font-size | 16px | -
---td-dialog-content-line-height | 24px | -
+--td-dialog-content-font | @font-body-large | -
 --td-dialog-title-color | @text-color-primary | -
---td-dialog-title-font-size | 18px | -
---td-dialog-title-line-height | 26px | -
+--td-dialog-title-font | @font-title-large | -
 --td-dialog-width | 311px | -

src/dialog/dialog.md

@@ -76,11 +76,9 @@ options | Object | - | TS 类型：`Omit<DialogOptions, 'cancelBtn'>`
 --td-dialog-body-max-height | 456px | -
 --td-dialog-border-radius | @radius-extraLarge | -
 --td-dialog-close-color | @text-color-placeholder | -
---td-dialog-close-font-size | 22px | -
+--td-dialog-close-icon-size | 22px | -
 --td-dialog-content-color | @text-color-secondary | -
---td-dialog-content-font-size | 16px | -
---td-dialog-content-line-height | 24px | -
+--td-dialog-content-font | @font-body-large | -
 --td-dialog-title-color | @text-color-primary | -
---td-dialog-title-font-size | 18px | -
---td-dialog-title-line-height | 26px | -
+--td-dialog-title-font | @font-title-large | -
 --td-dialog-width | 311px | -

src/divider/divider.en-US.md

@@ -19,8 +19,11 @@ layout | String | horizontal | options: horizontal/vertical | N
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
+--td-divider-border-width | 1px | -
 --td-divider-color | @bg-color-component | -
 --td-divider-content-color | @text-color-placeholder | -
---td-divider-content-font-size | 12px | -
---td-divider-content-line-height | 20px | -
+--td-divider-content-font | @font-body-small | -
 --td-divider-content-line-style | solid | -
+--td-divider-content-margin | @spacer-1 | -
+--td-divider-horizontal-margin | 10px | -
+--td-divider-vertical-margin | @spacer | -