ant-design/docs/react/migrate-less-variables.en-US.md

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.

组件变量

Drawer

Less variables	Component Token	Note
@drawer-bg	colorBgElevated	-
@drawer-header-padding	padding、paddingLG	${padding}px ${paddingLG}px
@drawer-title-font-size	fontSizeLG	-
@drawer-title-line-height	lineHeightLG	-
@drawer-body-padding	paddingLG	-
@drawer-footer-padding-vertical	drawerFooterPaddingVertical	drawerFooterPaddingVertical is a number without units, @drawer-footer-padding-vertical with units
@drawer-footer-padding-horizontal	drawerFooterPaddingHorizontal	drawerFooterPaddingHorizontal is a number without units, @drawer-footer-padding-horizontal with units

Message

Less variables	Component Token	Note
@zindex-message	zIndexPopup	-
@message-notice-content-padding	messageNoticeContentPadding	-
@message-notice-content-bg	messageNoticeContentBg	-

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	modalHeaderBg	-
@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	modalHeaderTitleLineHeight	-
@modal-header-title-font-size	modalHeaderTitleFontSize	-
@modal-header-border-color-split	-	Deprecated for style change
@modal-header-close-size	-	Deprecated for style change
@modal-content-bg	modalContentBg	-
@modal-heading-color	modalHeadingColor	-
@modal-close-color	modalCloseIconColor	-
@modal-footer-bg	modalFooterBg	-
@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	-
@modal-confirm-body-padding	-	Deprecated for style change
@modal-confirm-title-font-size	modalHeaderTitleFontSize	-
@modal-border-radius	borderRadiusLG	-

Notification

Less variables	Component Token	Note
@notification-width	width	-
@notification-padding	notificationPadding	-
@notification-padding-vertical	notificationPaddingVertical	-
@notification-padding-horizontal	notificationPaddingHorizontal	-
@notification-margin-bottom	notificationMarginBottom	-
@notification-margin-edge	notificationMarginEdge	-
@notification-bg	notificationBg	-

Result

Less variables	Component Token	Note
@result-icon-font-size	resultIconFontSize	-
@result-title-font-size	resultTitleFontSize	-
@result-subtitle-font-size	resultSubtitleFontSize	-
@result-extra-margin	resultExtraMargin	-

Statistic

Less variables	Component Token	Note
@statistic-title-font-size	statisticTitleFontSize	-
@statistic-content-font-size	statisticContentFontSize	-
@statistic-font-family	statisticFontFamily	-

Step

Less variables	Component Token	Note
@process-tail-color	processTailColor	-
@steps-nav-arrow-color	stepsNavArrowColor	-
@steps-background	-	Deprecated for style change
@steps-icon-size	stepsIconSize	-
@steps-icon-custom-size	stepsIconCustomSize	-
@steps-icon-custom-top	stepsIconCustomTop	-
@steps-icon-custom-font-size	stepsIconCustomFontSize	-
@steps-icon-top	stepsIconTop	-
@steps-icon-font-size	stepsIconFontSize	-
@steps-icon-margin	-	Deprecated for style change
@steps-title-line-height	stepsTitleLineHeight	-
@steps-small-icon-size	stepsSmallIconSize	-
@steps-small-icon-margin	-	Deprecated for style change
@steps-dot-size	stepsDotSize	-
@steps-dot-top	-	Deprecated for style change
@steps-current-dot-size	stepsCurrentDotSize	-
@steps-description-max-width	stepsNavContentMaxWidth	-
@steps-nav-content-max-width	-	Deprecated for style change
@steps-vertical-icon-width	-	Deprecated for style change
@steps-vertical-tail-width	-	Deprecated for style change
@steps-vertical-tail-width-sm	-	Deprecated for style change