ant-design/docs/react/migrate-less-variables.en-US.md
MadCcc 030f38594c
feat: cascader token (#44261)
* feat: cascader token

* docs: en
2023-08-17 15:03:23 +08:00

34 KiB
Raw Blame History

group order title
title
Migration
1 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.

How to use Component Token

We could configure global token and component token for each component through the theme property of ConfigProvider.

import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      components: {
        Radio: {
          colorPrimary: '#00b96b',
        },
        Checkbox: {
          colorPrimary: '#ff4d4f',
        },
      },
    }}
  >
    <Radio>Radio</Radio>
    <Checkbox>Checkbox</Checkbox>
  </ConfigProvider>
);

export default App;

Component Token

Alert

Less variables Component Token Note
@alert-success-border-color colorSuccessBorder Global token
@alert-success-bg-color colorSuccessBg Global token
@alert-success-icon-color colorSuccess Global token
@alert-info-border-color colorInfoBorder Global token
@alert-info-bg-color colorInfoBg Global token
@alert-info-icon-color colorInfo Global token
@alert-warning-border-color colorWarningBorder Global token
@alert-warning-bg-color colorWarningBg Global token
@alert-warning-icon-color colorWarning Global token
@alert-error-border-color colorErrorBorder Global token
@alert-error-bg-color colorErrorBg Global token
@alert-error-icon-color colorError Global token
@alert-message-color colorTextHeading Global token
@alert-text-color colorText Global Token
@alert-close-color colorIcon Global token
@alert-close-hover-color colorIconHover Global token
@alert-padding-vertical defaultPadding Control the whole padding
@alert-padding-horizontal defaultPadding Control the whole padding
@alert-no-icon-padding-vertical - Deprecated
@alert-with-description-no-icon-padding-vertical withDescriptionPadding Control the whole padding
@alert-with-description-padding-vertical withDescriptionPadding Control the whole padding
@alert-with-description-padding withDescriptionPadding Control the whole padding
@alert-icon-top - Deprecated
@alert-with-description-icon-size withDescriptionIconSize -

Anchor

Less variables Component Token Note
@anchor-bg '-' Can be modified directly by className or style
@anchor-border-color colorSplit GlobalToken
@anchor-link-top linkPaddingBlock -
@anchor-link-left linkPaddingInlineStart -
@anchor-link-padding - ${linkPaddingBlock}px ${linkPaddingInlineStart}px

Avatar

Less variables Component Token Note
@avatar-size-base containerSize -
@avatar-size-lg containerSizeLG -
@avatar-size-sm containerSizeSM -
@avatar-font-size-base textFontSize -
@avatar-font-size-lg textFontSizeLG -
@avatar-font-size-sm textFontSizeSM -
@avatar-bg - Can be directly overridden by className or style
@avatar-color colorTextLightSolid Global Token
@avatar-border-radius borderRadius Global Token
@avatar-group-overlapping - Deprecated for style change
@avatar-group-space groupSpace -
@avatar-group-border-color colorBorderBg Global Token

Badge

Less variables Component Token Note
@zindex-badge indicatorZIndex -
@badge-height indicatorHeight -
@badge-height-sm indicatorHeightSM -
@badge-dot-size dotSize -
@badge-font-size textFontSize -
@badge-font-size-sm textFontSizeSM -
@badge-font-weight textFontWeight -
@badge-status-size statusSize -
@badge-text-color colorBgContainer Global Token
@badge-color colorError Global Token

BreadCrumb

Less variables Component Token Note
@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 -

Button

Less variables Component Token Note
@btn-font-weight fontWeight -
@btn-border-radius-base borderRadius Global Token
@btn-border-radius-sm borderRadisuSM Global Token
@btn-border-width lineWidth Global Token
@btn-border-style lineStyle Global Token
@btn-shadow defaultShadow -
@btn-primary-shadow primaryShadow -
@btn-text-shadow - Deprecated for no text-shadow any more
@btn-primary-color primaryColor -
@btn-primary-bg colorPrimary Global Token
@btn-default-color colorText Global Token
@btn-default-bg colorBgContainer Global Token
@btn-default-border colorBorder Global Token
@btn-danger-color dangerColor -
@btn-danger-bg colorError Global Token
@btn-danger-border colorError Global Token
@btn-disable-color colorTextDisabled Global Token
@btn-disable-bg colorBgContainerDisabled Global Token
@btn-disable-border borderColorDisabled -
@btn-default-ghost-color defaultGhostColor -
@btn-default-ghost-bg ghostBg -
@btn-default-ghost-border defaultGhostBorderColor -
@btn-font-size-lg fontSizeLG Global Token
@btn-font-size-sm fontSizeSM Global Token
@btn-padding-horizontal-base paddingInline -
@btn-padding-horizontal-lg paddingInlineLG -
@btn-padding-horizontal-sm paddingInlineSM -
@btn-height-base controlHeight Global Token
@btn-height-lg controlHeightLG Global Token
@btn-height-sm controlHeightSM Global Token
@btn-line-height lineHeight Global Token
@btn-circle-size controlHeight Global Token
@btn-circle-size-lg controlHeightLG Global Token
@btn-circle-size-sm controlHeightSM Global Token
@btn-square-size controlHeight Global Token
@btn-square-size-lg controlHeightLG Global Token
@btn-square-size-sm controlHeightSM Global Token
@btn-square-only-icon-size onlyIconSize -
@btn-square-only-icon-size-sm onlyIconSizeSM -
@btn-square-only-icon-size-lg onlyIconSizeLG -
@btn-group-border groupBorderColor -
@btn-link-hover-bg linkHoverBg -
@btn-text-hover-bg textHoverBg -

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 -

Card

Less variables Component Token Note
@card-head-color colorTextHeading Global Token
@card-head-background headerBg -
@card-head-font-size headerFontSize -
@card-head-font-size-sm headerFontSizeSM -
@card-head-padding - Deprecated
@card-head-padding-sm - Deprecated
@card-head-height headerHeight -
@card-head-height-sm headerHeightSM -
@card-inner-head-padding - Deprecated
@card-padding-base cardPaddingBase -
@card-padding-base-sm cardPaddingBaseSm -
@card-actions-background actionsBackground -
@card-actions-li-margin actionsLiMargin -
@card-skeleton-bg - Deprecated in favor of internal Skeleton
@card-background colorBgContainer Global Token
@card-shadow - Could be modified by className or style directly
@card-radius borderRadiusLG Global Token
@card-head-tabs-margin-bottom tabsMarginBottom -
@card-head-extra-color extraColor -
Less variables Component Token Note
@carousel-dot-width dotWidth -
@carousel-dot-height dotHeight -
@carousel-dot-active-width dotActiveWidth -

Cascader

Less variables Component Token Note
@cascader-bg - Deprecated
@cascader-item-selected-bg optionSelectedBg -
@cascader-menu-bg - Deprecated
@cascader-menu-border-color-split colorSplit Global Token
@cascader-dropdown-vertical-padding optionPadding -
@cascader-dropdown-edge-child-vertical-padding menuPadding -
@cascader-dropdown-font-size - Deprecated
@cascader-dropdown-line-height lineHeight Global Token

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

Collapse

Less variables Component Token Note
@collapse-header-padding headerPadding -
@collapse-header-padding-extra - Depreacated
@collapse-header-bg headerBg -
@collapse-content-padding contentPadding -
@collapse-content-bg contentBg -
@collapse-header-arrow-left - Deprecated

Descriptions

Less variables Component Token Note
@descriptions-bg labelBg -
@descriptions-title-margin-bottom titleMarginBottom -
@descriptions-default-padding paddingpaddingLG GlobalToken, used as ${token.padding}px ${token.paddingLG}px
@descriptions-middle-padding paddingSMpaddingLG GlobalToken, used as ${token.paddingSM}px ${token.paddingLG}px
@descriptions-small-padding paddingXSpadding 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 -

Divider

Less variables Component Token Note
--- --- ---
@divider-text-padding textPaddingInline -
@divider-orientation-margin orientationMargin -
@divider-color colorSplit Global Token
@divider-vertical-gutter verticalMarginInline -

Drawer

Less variables Component Token Note
@drawer-bg colorBgElevated GlobalToken
@drawer-header-padding paddingpaddingLG 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

Dropdown

Less variables Component Token Note
@dropdown-selected-color colorPrimary -
@dropdown-menu-submenu-disabled-bg colorBgElevated GlobalToken
@dropdown-selected-bg controlItemBgActive GlobalToken

Empty

Less variables Component Token Note
@empty-font-size fontSize GlobalToken

Image

Less variables Component Token Note
@image-size-base - Deprecated for not used
@image-font-size-base - Deprecated for not used
@image-bg colorFillTertiary GlobalToken
@image-color colorTextLightSolid GlobalToken
@image-preview-operation-size previewOperationSize -
@image-preview-operation-color previewOperationColor -
@image-preview-operation-disabled-color previewOperationColorDisabled -

Layout

Less variables Component Token Note
@layout-body-background bodyBg -
@layout-header-background headerBg -
@layout-header-height headerHeight -
@layout-header-padding headerPadding -
@layout-header-color headerColor -
@layout-footer-padding footerPadding -
@layout-footer-background footerBg -
@layout-sider-background siderBg -
@layout-trigger-height triggerHeight -
@layout-trigger-background triggerBg -
@layout-trigger-color triggerColor -
@layout-zero-trigger-width zeroTriggerWidth -
@layout-zero-trigger-height zeroTriggerHeight -
@layout-sider-background-light lightSiderBg -
@layout-trigger-background-light lightTriggerBg -
@layout-trigger-color-light lightTriggerColor -

List

Less variables Component Token Note
@list-header-background headerBg -
@list-footer-background footerBg -
@list-empty-text-padding emptyTextPadding -
@list-item-padding itemPadding -
@list-item-padding-sm itemPaddingSM -
@list-item-padding-lg itemPaddingLG -
@list-item-meta-margin-bottom metaMarginBottom -
@list-item-meta-avatar-margin-right avatarMarginRight -
@list-item-meta-title-margin-bottom titleMarginBottom -
@list-customize-card-bg - Deprecated for style change
@list-item-meta-description-font-size descriptionFontSize -

Mentions

Less variables Component Token Note
@mentions-dropdown-bg colorBgElevated GlobalToken
@mentions-dropdown-menu-item-hover-bg - Deprecated

Menu

Less variables Component Token Note
@menu-inline-toplevel-item-height itemHeight Same as @menu-item-height
@menu-item-height itemHeight -
@menu-item-group-height groupTitleLineHeight -
@menu-collapsed-width collapsedWidth -
@menu-bg itemBg -
@menu-popup-bg popupBg -
@menu-item-color itemColor -
@menu-inline-submenu-bg subMenuItemBg -
@menu-highlight-color itemSelectedColor -
@menu-highlight-danger-color dangerItemSelectedColor -
@menu-item-active-bg itemActiveBg -
@menu-item-active-danger-bg dangerItemActiveBg -
@menu-item-active-border-width activeBarBorderWidth -
@menu-item-group-title-color groupTitleColor -
@menu-item-vertical-margin itemMarginBlock -
@menu-item-font-size fontSize Global Token
@menu-item-boundary-margin - Deprecated in favor of new style, use itemMarginBlock instead
@menu-item-padding-horizontal itemPaddingInline -
@menu-item-padding - Depreacated, use itemPaddingInline and itemHeight instead
@menu-horizontal-line-height horizontalLineHeight -
@menu-icon-margin-right iconMarginInlineEnd -
@menu-icon-size iconSize -
@menu-icon-size-lg horizontalLineHeight -
@menu-dark-color darkItemColor -
@menu-dark-danger-color darkDangerItemColor -
@menu-dark-bg darkItemBg -
@menu-dark-arrow-color - Deprecated, and same as text color
@menu-dark-inline-submenu-bg darkSubMenuItemBg -
@menu-dark-highlight-color darkItemSelectedColor -
@menu-dark-item-active-bg darkItemSelectedBg -
@menu-dark-item-active-danger-bg darkDangerItemSelectedBg -
@menu-dark-selected-item-icon-color - Deprecated, same as darkItemSelectedColor
@menu-dark-selected-item-text-color - Deprecated, same as darkItemSelectedColor
@menu-dark-item-hover-bg darkItemHoverBg -

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

Pagination

Less variables Component Token Note
@pagination-item-bg itemBg -
@pagination-item-size itemSize -
@pagination-item-size-sm itemSizeSM -
@pagination-font-family fontFamily GlobalToken
@pagination-font-weight-active fontWeightStrong GlobalToken
@pagination-item-bg-active itemActiveBg -
@pagination-item-link-bg itemLinkBg -
@pagination-item-disabled-color-active itemDisabledColorActive -
@pagination-item-disabled-bg-active itemDisabledBgActive -
@pagination-item-input-bg itemInputBg -
@pagination-mini-options-size-changer-top miniOptionsSizeChangerTop -

Popover>

Less variables Component Token Note
@popover-bg colorBgContainer -
@popover-color colorText GlobalToken
@popover-min-width minWidth -
@popover-min-height - Deprecated for style change
@popover-arrow-width sizePopupArrow GlobalToken
@popover-arrow-color - Deprecated for style change
@popover-arrow-outer-color - Deprecated for style change
@popover-distance marginXXS Global Token
@popover-padding-horizontal - Deprecated for style change

Progress

Less variables Component Token Note
@progress-default-color defaultColor -
@progress-remaining-color remainingColor -
@progress-info-text-color colorText Global Token
@progress-text-color circleTextColor -
@progress-radius lineBorderRadius -
@progress-steps-item-bg remainingColor -
@progress-text-font-size fontSizeSM Global Token
@progress-circle-text-font-size circleTextFontSize -

Radio

Less variables Component Token Note
@radio-size radioSize -
@radio-top - Deprecated
@radio-border-width lineWidth Global Token
@radio-dot-size dotSize -
@radio-dot-color - Deprecated
@radio-dot-disabled-color dotColorDisabled -
@radio-solid-checked-color buttonSolidCheckedColor -
@radio-button-bg buttonBg -
@radio-button-checked-bg buttonCheckedBg -
@radio-button-color buttonColor -
@radio-button-hover-color colorPrimaryHover Global Token
@radio-button-active-color colorPrimaryActive Global Token
@radio-button-padding-horizontal buttonPaddingInline -
@radio-disabled-button-checked-bg buttonCheckdBgDisabled -
@radio-disabled-button-checked-color buttonCheckdColorDisabled -
@radio-wrapper-margin-right wrapperMarginInlineEnd -

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 -

Select

Less variables Component Token Note
@select-border-color colorBorder Global Token
@select-item-selected-color optionSelectedColor -
@select-item-selected-font-weight optionSelectedFontWeight -
@select-dropdown-bg colorBgElevated Global Token
@select-item-selected-bg optionSelectedBg -
@select-item-active-bg optionActiveBg -
@select-dropdown-vertical-padding optionPadding Control the whole padding
@select-dropdown-font-size optionFontSize -
@select-dropdown-line-height optionLineHeight -
@select-dropdown-height optionHeight -
@select-background selectorBg -
@select-clear-background clearBg -
@select-selection-item-bg multipleItemBg -
@select-selection-item-border-color multipleItemBorderColor -
@select-single-item-height-lg singleItemHeightLG -
@select-multiple-item-height multipleItemHeight -
@select-multiple-item-height-lg multipleItemHeightLG -
@select-multiple-item-spacing-half - Deprecated
@select-multiple-disabled-background multipleSelectorBgDisabled -
@select-multiple-item-disabled-color multipleItemColorDisabled -
@select-multiple-item-disabled-border-color multipleItemBorderColorDisabled -

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 - Deprecated for style change

Slider

Less variables Component Token Note
@slider-margin - Could be customized with className or style
@slider-rail-background-color railBg -
@slider-rail-background-color-hover railHoverBg -
@slider-track-background-color trackBg -
@slider-track-background-color-hover trackHoverBg -
@slider-handle-border-width handleLineWidth -
@slider-handle-background-color - Deprecated
@slider-handle-color handleColor -
@slider-handle-color-hover handleActiveColor -
@slider-handle-color-focus handleActiveColor -
@slider-handle-color-focus-shadow - Deprecated
@slider-handle-color-tooltip-open handleActiveColor -
@slider-handle-size handleSize -
@slider-handle-margin-top - Deprecated
@slider-handle-margin-left - Deprecated
@slider-handle-shadow - Deprecated
@slider-dot-border-color dotBorderColor -
@slider-dot-border-color-active dotActiveBorderColor -
@slider-disabled-color trackBgDisabled -
@slider-disabled-background-color - Deprecated

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

Switch

Less variables Component Token Note
@switch-height trackHeight -
@switch-sm-height trackHeightSM -
@switch-min-width trackMinWidth -
@switch-sm-min-width trackMinWidthSM -
@switch-disabled-opacity opacityLoading Global Token
@switch-color colorPrimary Global Token
@switch-bg handleBg -
@switch-shadow-color handleShadow Control box-shadow, not only shadow color
@switch-padding trackPadding -
@switch-inner-margin-min innerMinMargin -
@switch-inner-margin-max innerMaxMargin -
@switch-sm-inner-margin-min innerMinMarginSM -
@switch-sm-inner-margin-max innerMaxMarginSM -

Table

Less variables Component Token Note
@table-bg colorBgContainer Global Token
@table-header-bg headerBg -
@table-header-color headerColor -
@table-header-sort-bg headerSortActiveBg -
@table-body-sort-bg bodySortActiveBg -
@table-row-hover-bg rowHoverBg -
@table-selected-row-color colorText Global Token
@table-selected-row-bg rowSelectedBg -
@table-body-selected-sort-bg - Deprecated, same as rowSelectedBg
@table-selected-row-hover-bg rowSelectedHoverBg -
@table-expanded-row-bg rowExpandedBg -
@table-padding-vertical cellPaddingBlock -
@table-padding-horizontal cellPaddingInline -
@table-padding-vertical-md cellPaddingBlockMD -
@table-padding-horizontal-md cellPaddingInlineMD -
@table-padding-vertical-sm cellPaddingBlockSM -
@table-padding-horizontal-sm cellPaddingInlineSM -
@table-border-color borderColor -
@table-border-radius-base headerBorderRadius -
@table-footer-bg footerBg -
@table-footer-color footerColor -
@table-header-bg-sm - Deprecated, same as headerBg
@table-font-size cellFontSize -
@table-font-size-md cellFontSizeMD -
@table-font-size-sm cellFontSizeSM -
@table-header-cell-split-color headerSplitColor -
@table-header-sort-active-bg headerSortHoverBg Misused in v4, and used as hover bg actually
@table-fixed-header-sort-active-bg fixedHeaderSortActiveBg -
@table-header-filter-active-bg headerFilterHoverBg -
@table-filter-btns-bg - Deprecated, same as filterDropdownBg
@table-filter-dropdown-bg filterDropdownBg -
@table-expand-icon-bg expandIconBg -
@table-selection-column-width selectionColumnWidth -
@table-sticky-scroll-bar-bg stickyScrollBarBg -
@table-sticky-scroll-bar-radius stickyScrollBarBorderRadius -

Tabs

Less variables Component Token Note
@tabs-card-head-background cardBg -
@tabs-card-height cardHeight -
@tabs-card-active-color itemSelectedColor -
@tabs-card-horizontal-padding cardPadding -
@tabs-card-horizontal-padding-sm cardPaddingSM -
@tabs-card-horizontal-padding-lg cardPaddingLG -
@tabs-title-font-size titleFontSize -
@tabs-title-font-size-lg titleFontSizeLG -
@tabs-title-font-size-sm titleFontSizeSM -
@tabs-ink-bar-color inkBarColor -
@tabs-bar-margin horizontalMargin -
@tabs-horizontal-gutter horizontalItemGutter -
@tabs-horizontal-margin horizontalItemMargin -
@tabs-horizontal-margin-rtl horizontalItemMarginRTL -
@tabs-horizontal-padding horizontalItemPadding -
@tabs-horizontal-padding-lg horizontalItemPaddingLG -
@tabs-horizontal-padding-sm horizontalItemPaddingSM -
@tabs-vertical-padding verticalItemPadding -
@tabs-vertical-margin verticalItemMargin -
@tabs-scrolling-size - Deprecated
@tabs-highlight-color itemSelectedColor -
@tabs-hover-color itemHoverColor -
@tabs-active-color itemActiveColor -
@tabs-card-gutter cardGutter -
@tabs-card-tab-active-border-top - Deprecated

Tag

Less variables Component Token Note
@tag-border-radius borderRadiusSM Global Token
@tag-default-bg defaultBg -
@tag-default-color defaultColor -
@tag-font-size fontSizeSM Global Token
@tag-line-height lineHeightSM Global Token

Timeline

Less variables Component Token Note
@timeline-width tailWidth tailWidth is a number without units, @timeline-width with units
@timeline-color tailColor -
@timeline-dot-border-width dotBorderWidth -
@timeline-dot-color - Deprecated
@timeline-dot-bg dotBg -
@timeline-item-padding-bottom itemPaddingBottom -

Tooltip

Less variables Component Token Note
@tooltip-max-width - Can be directly modified by className or style
@tooltip-color colorTextLightSolid Global Token
@tooltip-bg colorBgSpotlight Global Token
@tooltip-arrow-width sizePopupArrow Global Token
@tooltip-distance marginXXS Global Token
@tooltip-arrow-color - same as @tooltip-bgDeprecated
@tooltip-border-radius borderRadius Global Token

Transfer

Less variables Component Token Note
@transfer-header-height headerHeight -
@transfer-item-height itemHeight -
@transfer-disabled-bg colorBgContainerDisabled Global Token
@transfer-list-height listHeight -
@transfer-item-hover-bg controlItemBgHover Global Token
@transfer-item-selected-hover-bg controlItemBgActiveHover Global Token
@transfer-item-padding-vertical itemPaddingBlock -
@transfer-list-search-icon-top - Deprecated

Typography

Less variables Component Token Note
@typography-title-font-weight fontWeightStrong Global Token
@typography-title-margin-top titleMarginTop -
@typography-title-margin-bottom titleMarginBottom -

Upload

Less variables Component Token Note
@upload-actions-color actionsColor -