mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity
34af3ec550
ant-design/docs/react/migrate-less-variables.en-US.md
MadCcc 34af3ec550
feat: component token rename (#42184) 
* feat: component token naming rules

* dcos: update

* feat: modal token rename

* feat: rename result token

* feat: statsitic token rename

* feat: steps token remane

* chore: update snapshot

* chore: fix lint

* feat: semantic part component

* revert: button & notification

* revert: files

* chore: code clean
2023-05-09 19:24:50 +08:00

5.7 KiB
Raw Blame History

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

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

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

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 -

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