mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
3bfb7ac2a0
* feat: less to component token for Typography * feat: add titleFontWeight token * feat: add debug demo * chore: rename token * chore: rename demo name * chore: rename titleFontWeight --------- Co-authored-by: zhangjianxiong <zhangjx@tsintergy.com> Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: lijianan <574980606@qq.com>
9.5 KiB
9.5 KiB
| order | title |
|---|---|
| 9 | Migrate Less variables to Component Token |
This document contains the correspondence between all the less variables related to components in version 4.x and the Component Token in version 5.x. If you are upgrading from version 4.x to version 5.x, you can quickly find the corresponding Component Token through this comparison table.
Component Token
BreadCrumb 面包屑
| Less 变量 | Component Token | 备注 |
|---|---|---|
@breadcrumb-base-color |
itemColor |
- |
@breadcrumb-last-item-color |
lastItemColor |
- |
@breadcrumb-font-size |
fontSize |
GlobalToken |
@breadcrumb-icon-font-size |
iconFontSize |
- |
@breadcrumb-link-color |
linkColor |
- |
@breadcrumb-link-color-hover |
linkHoverColor |
- |
@breadcrumb-separator-color |
separatorColor |
- |
@breadcrumb-separator-margin |
separatorMargin |
- |
Calendar
| Less variables | Component Token | Note |
|---|---|---|
@calendar-bg |
- | Deprecated for style change |
@calendar-input-bg |
- | Deprecated for style change |
@calendar-border-color |
- | Deprecated for style change |
@calendar-item-active-bg |
itemActiveBg |
- |
@calendar-column-active-bg |
- | Deprecated for style change |
@calendar-full-bg |
fullBg |
- |
@calendar-full-panel-bg |
fullPanelBg |
- |
Checkbox
| Less variables | Component Token | Note |
|---|---|---|
@checkbox-size |
controlInteractiveSize |
GlobalToken |
@checkbox-color |
colorPrimary |
- |
@checkbox-check-color |
colorWhite |
- |
@checkbox-check-bg |
- | colorPrimary |
@checkbox-border-width |
lineWidth |
- |
@checkbox-border-radius |
borderRadiusSM |
- |
@checkbox-group-item-margin-right |
- | Deprecated for style change |
Descriptions
| Less variables | Component Token | Note |
|---|---|---|
@descriptions-bg |
labelBg |
- |
@descriptions-title-margin-bottom |
titleMarginBottom |
- |
@descriptions-default-padding |
padding、paddingLG |
GlobalToken, used as ${token.padding}px ${token.paddingLG}px |
@descriptions-middle-padding |
paddingSM、paddingLG |
GlobalToken, used as ${token.paddingSM}px ${token.paddingLG}px |
@descriptions-small-padding |
paddingXS、padding |
GlobalToken, used as ${token.paddingXS}px ${token.padding}px |
@descriptions-item-padding-bottom |
itemPaddingBottom |
- |
@descriptions-item-trailing-colon |
- | Deprecated for style change |
@descriptions-item-label-colon-margin-right |
colonMarginRight |
- |
@descriptions-item-label-colon-margin-left |
colonMarginLeft |
- |
@descriptions-extra-color |
extraColor |
- |
Drawer
| Less variables | Component Token | Note |
|---|---|---|
@drawer-bg |
colorBgElevated |
GlobalToken |
@drawer-header-padding |
padding、paddingLG |
GlobalToken, used as ${padding}px ${paddingLG}px |
@drawer-title-font-size |
fontSizeLG |
GlobalToken |
@drawer-title-line-height |
lineHeightLG |
GlobalToken |
@drawer-body-padding |
paddingLG |
GlobalToken |
@drawer-footer-padding-vertical |
footerPaddingBlock |
footerPaddingBlock is a number without units, @drawer-footer-padding-vertical with units |
@drawer-footer-padding-horizontal |
footerPaddingInline |
footerPaddingInline is a number without units, @drawer-footer-padding-horizontal with units |
Empty
| Less variables | Component Token | Note |
|---|---|---|
@empty-font-size |
fontSize |
GlobalToken |
Message
| Less variables | Component Token | Note |
|---|---|---|
@zindex-message |
zIndexPopup |
- |
@message-notice-content-padding |
contentPadding |
- |
@message-notice-content-bg |
contentBg |
- |
Modal
| Less variables | Component Token | Note |
|---|---|---|
@modal-header-padding-vertical |
- | Deprecated for style change |
@modal-header-padding-horizontal |
- | Deprecated for style change |
@modal-body-padding |
- | Deprecated for style change |
@modal-header-bg |
headerBg |
- |
@modal-header-padding |
- | Deprecated for style change |
@modal-header-border-width |
- | Deprecated for style change |
@modal-header-border-style |
- | Deprecated for style change |
@modal-header-title-line-height |
titleLineHeight |
- |
@modal-header-title-font-size |
titleFontSize |
- |
@modal-header-border-color-split |
- | Deprecated for style change |
@modal-header-close-size |
- | Deprecated for style change |
@modal-content-bg |
contentBg |
- |
@modal-heading-color |
titleColor |
- |
@modal-close-color |
colorIcon |
GlobalToken |
@modal-footer-bg |
footerBg |
- |
@modal-footer-border-color-split |
- | Deprecated for style change |
@modal-footer-border-style |
- | Deprecated for style change |
@modal-footer-padding-vertical |
- | Deprecated for style change |
@modal-footer-padding-horizontal |
- | Deprecated for style change |
@modal-footer-border-width |
- | Deprecated for style change |
@modal-mask-bg |
colorBgMask |
GlobalToken |
@modal-confirm-body-padding |
- | Deprecated for style change |
@modal-confirm-title-font-size |
titleFontSize |
- |
@modal-border-radius |
borderRadiusLG |
GlobalToken |
Rate
| Less variables | Component Token | Note |
|---|---|---|
@rate-star-color |
starColor |
- |
@rate-star-bg |
starBg |
- |
@rate-star-size |
starSize |
- |
@rate-star-hover-scale |
starHoverScale |
- |
Result
| Less variables | Component Token | Note |
|---|---|---|
@result-icon-font-size |
iconFontSize |
- |
@result-title-font-size |
titleFontSize |
- |
@result-subtitle-font-size |
subtitleFontSize |
- |
@result-extra-margin |
extraMargin |
- |
Segment
| Less variables | Component Token | Note |
|---|---|---|
@segmented-container-padding |
padding |
- |
@segmented-label-color |
itemColor |
- |
@segmented-hover-bg |
itemHoverBg |
- |
@segmented-bg |
- | Could be customized with className or style |
@segmented-label-hover-color |
itemHoverColor |
- |
@segmented-selected-bg |
itemSelectedBg |
- |
Skeleton
| Less variables | Component Token | Note |
|---|---|---|
@skeleton-block-radius |
blockRadius |
- |
@skeleton-title-height |
titleHeight |
- |
@skeleton-color |
gradientFromColor |
- |
@skeleton-to-color |
gradientToColor |
- |
@skeleton-paragraph-margin-top |
paragraphMarginTop |
- |
@skeleton-paragraph-li-height |
paragraphLiHeight |
- |
@skeleton-paragraph-li-margin-top |
- | 由于样式变化已废弃 |
Statistic
| Less variables | Component Token | Note |
|---|---|---|
@statistic-title-font-size |
titleFontSize |
- |
@statistic-content-font-size |
contentFontSize |
- |
@statistic-font-family |
fontFamily |
GlobalToken |
Step
| Less variables | Component Token | Note |
|---|---|---|
@process-tail-color |
colorSplit |
GlobalToken |
@steps-nav-arrow-color |
navArrowColor |
- |
@steps-background |
colorBgContainer |
- |
@steps-icon-size |
iconSize |
- |
@steps-icon-custom-size |
customIconSize |
- |
@steps-icon-custom-top |
customIconTop |
- |
@steps-icon-custom-font-size |
customIconFontSize |
- |
@steps-icon-top |
iconTop |
- |
@steps-icon-font-size |
iconFontSize |
- |
@steps-icon-margin |
- | Deprecated |
@steps-title-line-height |
titleLineHeight |
- |
@steps-small-icon-size |
iconSizeSM |
- |
@steps-small-icon-margin |
- | Deprecated |
@steps-dot-size |
dotSize |
- |
@steps-dot-top |
- | Deprecated |
@steps-current-dot-size |
dotCurrentSize |
- |
@steps-description-max-width |
descriptionMaxWidth |
- |
@steps-nav-content-max-width |
stepsNavContentMaxWidth |
- |
@steps-vertical-icon-width |
iconSize |
- |
@steps-vertical-tail-width |
- | Deprecated |
@steps-vertical-tail-width-sm |
- | Deprecated |
Typography
| Less variables | Component Token | Note |
|---|---|---|
@typography-title-font-weight |
fontWeightStrong |
Global Token |
@typography-title-margin-top |
titleMarginTop |
- |
@typography-title-margin-bottom |
titleMarginBottom |
- |