refactor: token update (#36279)

* refactor: token update * chore: add js doc * test: fix lint * test: update test
2025-01-18 06:03:38 +08:00 · 2022-06-28 20:33:01 +08:00 · 2022-06-28 20:33:01 +08:00 · 8e4f1c6836
commit 8e4f1c6836
parent b4d9e8c4af
47 changed files with 177 additions and 173 deletions
--- a/components/alert/style/index.tsx
+++ b/components/alert/style/index.tsx
@ -128,19 +128,19 @@ export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
    componentCls,

    colorSuccess,
-    colorSuccessSecondary,
+    colorSuccessBorder,
    colorSuccessBg,

    colorWarning,
-    colorWarningSecondary,
+    colorWarningBorder,
    colorWarningBg,

    colorError,
-    colorErrorSecondary,
+    colorErrorBorder,
    colorErrorBg,

    colorInfo,
-    colorInfoSecondary,
+    colorInfoBorder,
    colorInfoBg,
  } = token;

@ -148,21 +148,21 @@ export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
    [componentCls]: {
      '&-success': genAlertTypeStyle(
        colorSuccessBg,
-        colorSuccessSecondary,
+        colorSuccessBorder,
        colorSuccess,
        token,
        componentCls,
      ),
-      '&-info': genAlertTypeStyle(colorInfoBg, colorInfoSecondary, colorInfo, token, componentCls),
+      '&-info': genAlertTypeStyle(colorInfoBg, colorInfoBorder, colorInfo, token, componentCls),
      '&-warning': genAlertTypeStyle(
        colorWarningBg,
-        colorWarningSecondary,
+        colorWarningBorder,
        colorWarning,
        token,
        componentCls,
      ),
      '&-error': {
-        ...genAlertTypeStyle(colorErrorBg, colorErrorSecondary, colorError, token, componentCls),
+        ...genAlertTypeStyle(colorErrorBg, colorErrorBorder, colorError, token, componentCls),
        [`${componentCls}-description > pre`]: {
          margin: 0,
          padding: 0,
--- a/components/anchor/style/index.tsx
+++ b/components/anchor/style/index.tsx
@ -59,7 +59,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
          display: 'none',
          width: anchorBallSize,
          height: anchorBallSize,
-          backgroundColor: token.colorBgComponent,
+          backgroundColor: token.colorBgContainer,
          border: `${lineWidthBold}px solid ${token.colorPrimary}`,
          borderRadius: anchorBallSize,
          transform: 'translateX(-50%)',
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@ -323,7 +323,7 @@ export default genComponentStyleHook('Badge', token => {
  const badgeShadowSize = controlLineWidth;
  const badgeZIndex = 'auto';
  const badgeHeight = badgeFontHeight - 2 * badgeShadowSize;
-  const badgeTextColor = token.colorBgComponent;
+  const badgeTextColor = token.colorBgContainer;
  const badgeFontWeight = 'normal';
  const badgeFontSize = fontSizeSM;
  const badgeColor = token.colorError;
--- a/components/button/style/index.tsx
+++ b/components/button/style/index.tsx
@ -105,7 +105,7 @@ const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
    cursor: 'not-allowed',
    borderColor: token.colorBorder,
    color: token.colorTextDisabled,
-    backgroundColor: token.colorBgComponentDisabled,
+    backgroundColor: token.colorBgContainerDisabled,
    boxShadow: 'none',
  },
 });
@ -127,7 +127,7 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
 const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
  ...genSolidButtonStyle(token),

-  backgroundColor: token.colorBgComponent,
+  backgroundColor: token.colorBgContainer,
  borderColor: token.colorBorder,

  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorDefaultOutline}`,
@ -145,8 +145,8 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({

  ...genGhostButtonStyle(
    token.componentCls,
-    token.colorBgComponent,
-    token.colorBgComponent,
+    token.colorBgContainer,
+    token.colorBgContainer,
    token.colorTextDisabled,
    token.colorBorder,
  ),
--- a/components/calendar/style/index.tsx
+++ b/components/calendar/style/index.tsx
@ -198,8 +198,8 @@ export default genComponentStyleHook(
      {
        calendarCls,
        pickerCellInnerCls: `${token.componentCls}-cell-inner`,
-        calendarFullBg: token.colorBgComponent,
-        calendarFullPanelBg: token.colorBgComponent,
+        calendarFullBg: token.colorBgContainer,
+        calendarFullPanelBg: token.colorBgContainer,
        calendarItemActiveBg: token.controlItemBgActive,
        dateValueHeight: token.controlHeightSM,
        weekHeight: token.controlHeightSM * 0.75,
--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@ -111,7 +111,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
    margin: 0,
    padding: 0,
    listStyle: 'none',
-    background: token.colorBgComponent,
+    background: token.colorBgContainer,
    borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${colorBorderSecondary}`,
    display: 'flex',
    ...clearFix(),
@ -193,12 +193,12 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({

 // ============================== Inner ==============================
 const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
-  const { componentCls, cardPaddingBase, colorBgComponentSecondary, cardInnerHeadPadding } = token;
+  const { componentCls, cardPaddingBase, colorBgContainerSecondary, cardInnerHeadPadding } = token;

  return {
    [`${componentCls}-head`]: {
      padding: `0 ${cardPaddingBase}px`,
-      background: colorBgComponentSecondary,
+      background: colorBgContainerSecondary,

      '&-title': {
        padding: `${cardInnerHeadPadding}px 0`,
@ -245,7 +245,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
      ...resetComponent(token),

      position: 'relative',
-      background: token.colorBgComponent,
+      background: token.colorBgContainer,
      borderRadius: token.radiusBase,

      [`${componentCls}-head`]: genCardHeadStyle(token),
--- a/components/carousel/style/index.tsx
+++ b/components/carousel/style/index.tsx
@ -210,7 +210,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = token => {
            padding: 0,
            color: 'transparent',
            fontSize: 0,
-            background: token.colorBgComponent,
+            background: token.colorBgContainer,
            border: 0,
            borderRadius: 1,
            outline: 'none',
@ -227,7 +227,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = token => {
            width: token.dotWidthActive,

            '& button': {
-              background: token.colorBgComponent,
+              background: token.colorBgContainer,
              opacity: 1,
            },

--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@ -98,7 +98,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
          width: token.checkboxSize,
          height: token.checkboxSize,
          direction: 'ltr',
-          backgroundColor: token.colorBgComponent,
+          backgroundColor: token.colorBgContainer,
          border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
          borderRadius: token.controlRadius,
          borderCollapse: 'separate',
@ -111,7 +111,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
            display: 'table',
            width: (token.checkboxSize / 14) * 5,
            height: (token.checkboxSize / 14) * 8,
-            border: `${token.lineWidthBold}px solid ${token.colorBgComponent}`,
+            border: `${token.lineWidthBold}px solid ${token.colorBgContainer}`,
            borderTop: 0,
            borderInlineStart: 0,
            transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
@ -220,7 +220,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {

        // Wrapper > Checkbox > inner
        [`${checkboxCls}-inner`]: {
-          background: token.colorBgComponentDisabled,
+          background: token.colorBgContainerDisabled,
          borderColor: token.colorBorder,

          '&:after': {
--- a/components/collapse/style/index.tsx
+++ b/components/collapse/style/index.tsx
@ -233,9 +233,9 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {

 export default genComponentStyleHook('Collapse', token => {
  const collapseToken = mergeToken<CollapseToken>(token, {
-    collapseContentBg: token.colorBgComponent,
+    collapseContentBg: token.colorBgContainer,
    collapseContentPadding: token.padding,
-    collapseHeaderBg: token.colorBgComponentSecondary,
+    collapseHeaderBg: token.colorBgContainerSecondary,
    collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
    collapsePanelBorderRadius: token.radiusBase,
  });
--- a/components/config-provider/tests/theme.test.tsx
+++ b/components/config-provider/tests/theme.test.tsx
@ -67,7 +67,7 @@ describe('ConfigProvider.Theme', () => {
        <Demo />
      </ConfigProvider>,
    );
-    expect(tokenRef?.colorBgComponent).toBe('#141414');
+    expect(tokenRef?.colorBgContainer).toBe('#141414');
  });

  it('overriding component token should work', () => {
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@ -240,7 +240,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
      },

      '&::before': {
-        background: token.colorBgComponentDisabled,
+        background: token.colorBgContainerDisabled,
      },
    },
    [`&-disabled:is(&-today) ${pickerCellInnerCls}::before`]: {
@ -263,7 +263,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
        display: 'inline-flex',
        flexDirection: 'column',
        textAlign: 'center',
-        background: token.colorBgComponent,
+        background: token.colorBgContainer,
        border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
        borderRadius: token.radiusBase,
        outline: 'none',
@ -779,7 +779,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {
    [componentCls]: {
      '&-status-error&': {
        '&, &:not([disabled]):hover': {
-          backgroundColor: token.colorBgComponent,
+          backgroundColor: token.colorBgContainer,
          borderColor: token.colorError,
        },

@ -796,7 +796,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {

      '&-status-warning&': {
        '&, &:not([disabled]):hover': {
-          backgroundColor: token.colorBgComponent,
+          backgroundColor: token.colorBgContainer,
          borderColor: token.colorWarning,
        },

@ -824,7 +824,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
      position: 'relative',
      display: 'inline-flex',
      alignItems: 'center',
-      background: token.colorBgComponent,
+      background: token.colorBgContainer,
      border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
      borderRadius: token.radiusBase,
      transition: `border ${token.motionDurationSlow}, box-shadow ${token.motionDurationSlow}`,
@ -838,7 +838,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
      },

      '&&-disabled': {
-        background: token.colorBgComponentDisabled,
+        background: token.colorBgContainerDisabled,
        borderColor: token.colorBorder,
        cursor: 'not-allowed',

@ -941,7 +941,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
        insetInlineEnd: 0,
        color: token.colorTextDisabled,
        lineHeight: 1,
-        background: token.colorBgComponent,
+        background: token.colorBgContainer,
        transform: 'translateY(-50%)',
        cursor: 'pointer',
        opacity: 0,
@ -1111,7 +1111,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
          [`${componentCls}-preset > ${antCls}-tag-blue`]: {
            color: token.colorPrimary,
            background: token.controlItemBgActive,
-            borderColor: token.colorPrimarySecondary,
+            borderColor: token.colorPrimaryBorder,
            cursor: 'pointer',
          },

@ -1131,7 +1131,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
          width: token.sizePopupArrow,
          height: token.sizePopupArrow,
          marginInlineStart: token.inputPaddingHorizontal * 1.5,
-          background: `linear-gradient(135deg, transparent 40%, ${token.colorBgComponent} 40%)`, // Use linear-gradient to prevent arrow from covering text
+          background: `linear-gradient(135deg, transparent 40%, ${token.colorBgContainer} 40%)`, // Use linear-gradient to prevent arrow from covering text
          boxShadow: token.boxShadowPopoverArrowBottom,
          transition: `left ${token.motionDurationSlow} ease-out`,
          ...roundedArrow(token.sizePopupArrow, 5, token.colorBgElevated),
--- a/components/descriptions/style/index.tsx
+++ b/components/descriptions/style/index.tsx
@ -184,7 +184,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token: Descripti
 };
 // ============================== Export ==============================
 export default genComponentStyleHook('Descriptions', token => {
-  const descriptionsBg = token.colorBgComponentSecondary;
+  const descriptionsBg = token.colorBgContainerSecondary;
  const descriptionsTitleMarginBottom = token.fontSizeSM * token.lineHeightSM;
  const descriptionsExtraColor = token.colorText;
  const descriptionsSmallPadding = `${token.paddingXS}px ${token.padding}px`;
--- a/components/image/style/index.tsx
+++ b/components/image/style/index.tsx
@ -221,7 +221,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
        verticalAlign: 'middle',
      },
      [`${componentCls}-img-placeholder`]: {
-        backgroundColor: token.colorBgComponentDisabled,
+        backgroundColor: token.colorBgContainerDisabled,
        backgroundImage:
          "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
        backgroundRepeat: 'no-repeat',
--- a/components/input-number/style/index.tsx
+++ b/components/input-number/style/index.tsx
@ -39,7 +39,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
    controlHeight,
    inputPaddingHorizontal,
    motionDurationSlow,
-    colorBgComponent,
+    colorBgContainer,
    motionDurationMid,
    colorTextDisabled,
    controlWidth,
@ -162,7 +162,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
          insetInlineEnd: 0,
          width: token.handleWidth,
          height: '100%',
-          background: colorBgComponent,
+          background: colorBgContainer,
          borderStartStartRadius: 0,
          borderStartEndRadius: controlRadius,
          borderEndEndRadius: controlRadius,
@ -204,7 +204,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
          borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
          transition: `all ${motionDurationFast} linear`,
          '&:active': {
-            background: token.colorBgComponentSecondary,
+            background: token.colorBgContainerSecondary,
          },

          // Hover
--- a/components/input/style/index.tsx
+++ b/components/input/style/index.tsx
@ -43,7 +43,7 @@ export const genActiveStyle = (token: InputToken) => ({

 export const genDisabledStyle = (token: InputToken): CSSObject => ({
  color: token.colorTextDisabled,
-  backgroundColor: token.colorBgComponentDisabled,
+  backgroundColor: token.colorBgContainerDisabled,
  borderColor: token.colorBorder,
  boxShadow: 'none',
  cursor: 'not-allowed',
@ -121,7 +121,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
  color: token.colorText,
  fontSize: token.fontSize,
  lineHeight: token.lineHeight,
-  backgroundColor: token.colorBgComponent,
+  backgroundColor: token.colorBgContainer,
  backgroundImage: 'none',
  borderWidth: token.controlLineWidth,
  borderStyle: token.controlLineType,
@ -247,7 +247,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
        fontWeight: 'normal',
        fontSize: token.fontSize,
        textAlign: 'center',
-        backgroundColor: token.colorBgComponentSecondary,
+        backgroundColor: token.colorBgContainerSecondary,
        border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
        borderRadius: token.controlRadius,
        transition: `all ${token.motionDurationSlow}`,
@ -515,7 +515,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
    // ========================= Input =========================
    [`.${prefixCls}-clear-icon`]: {
      margin: 0,
-      color: token.colorActionTmp,
+      color: token.colorAction,
      fontSize: token.fontSizeIcon,
      verticalAlign: -1,
      // https://github.com/ant-design/ant-design/pull/18151
--- a/components/layout/style/light.ts
+++ b/components/layout/style/light.ts
@ -3,20 +3,20 @@ import type { LayoutToken } from '.';
 import type { GenerateStyle } from '../../theme';

 const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
-  const { componentCls, colorBgComponent, colorBgBody, colorText } = token;
+  const { componentCls, colorBgContainer, colorBgBody, colorText } = token;

  return {
    [`${componentCls}-sider-light`]: {
-      background: colorBgComponent,
+      background: colorBgContainer,

      [`${componentCls}-sider-trigger`]: {
        color: colorText,
-        background: colorBgComponent,
+        background: colorBgContainer,
      },

      [`${componentCls}-sider-zero-width-trigger`]: {
        color: colorText,
-        background: colorBgComponent,
+        background: colorBgContainer,
        border: `1px solid ${colorBgBody}`, // Safe to modify to any other color
        borderInlineStart: 0,
      },
--- a/components/mentions/style/index.tsx
+++ b/components/mentions/style/index.tsx
@ -32,7 +32,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
    inputPaddingHorizontal,
    inputPaddingVertical,
    fontSize,
-    colorBgComponent,
+    colorBgContainer,
    controlRadius,
    boxShadow,
  } = token;
@ -141,7 +141,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
        boxSizing: 'border-box',
        fontSize,
        fontVariant: 'initial',
-        backgroundColor: colorBgComponent,
+        backgroundColor: colorBgContainer,
        borderRadius: controlRadius,
        outline: 'none',
        boxShadow,
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@ -407,8 +407,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        colorText,
        colorTextLightSolid,
        colorTextSecondary,
-        colorBgComponent,
-        colorBgComponentSecondary,
+        colorBgContainer,
+        colorBgContainerSecondary,
        controlHeightLG,
        fontSize,
        controlItemBgActive,
@ -434,8 +434,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        themeColorTextHover: colorPrimary,
        themeColorTextSecondary: colorTextSecondary,
        themeColorTextSelect: colorPrimary,
-        themeColorBg: colorBgComponent,
-        themeColorBgSecondary: colorBgComponentSecondary,
+        themeColorBg: colorBgContainer,
+        themeColorBgSecondary: colorBgContainerSecondary,
        themeColorBgActive: controlItemBgActive,
        themeColorBgSelect: controlItemBgActive,
        themeInkBarWidth: lineWidthBold + lineWidth,
--- a/components/pagination/style/index.tsx
+++ b/components/pagination/style/index.tsx
@ -61,7 +61,7 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
      cursor: 'not-allowed',

      [`${componentCls}-item`]: {
-        background: token.colorBgComponentDisabled,
+        background: token.colorBgContainerDisabled,
        borderColor: token.colorBorder,
        cursor: 'not-allowed',

@ -83,7 +83,7 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to

      [`${componentCls}-item-link`]: {
        color: token.colorTextDisabled,
-        background: token.colorBgComponentDisabled,
+        background: token.colorBgContainerDisabled,
        borderColor: token.colorBorder,
        cursor: 'not-allowed',

@ -227,7 +227,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke

        '&[disabled]': {
          color: token.colorTextDisabled,
-          background: token.colorBgComponentDisabled,
+          background: token.colorBgContainerDisabled,
          borderColor: token.colorBorder,
          cursor: 'not-allowed',
        },
@ -557,15 +557,15 @@ export default genComponentStyleHook('Pagination', token => {
    {
      paginationItemSize: token.controlHeight,
      paginationFontFamily: token.fontFamily,
-      paginationItemBg: token.colorBgComponent,
-      paginationItemBgActive: token.colorBgComponent,
+      paginationItemBg: token.colorBgContainer,
+      paginationItemBgActive: token.colorBgContainer,
      paginationFontWeightActive: token.fontWeightStrong,
      paginationItemSizeSM: token.controlHeightSM,
-      paginationItemInputBg: token.colorBgComponent,
+      paginationItemInputBg: token.colorBgContainer,
      paginationMiniOptionsSizeChangerTop: 0,
      paginationItemDisabledBgActive: token.controlItemBgActiveDisabled,
      paginationItemDisabledColorActive: token.colorTextDisabled,
-      paginationItemLinkBg: token.colorBgComponent,
+      paginationItemLinkBg: token.colorBgContainer,
      inputOutlineOffset: '0 0',
      paginationMiniOptionsMarginInlineStart: token.marginXXS / 2,
      paginationMiniQuickJumperInputWidth: token.controlHeightLG * 1.1,
--- a/components/progress/style/index.tsx
+++ b/components/progress/style/index.tsx
@ -113,7 +113,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token: ProgressToken) => {
        [`${progressCls}-bg::before`]: {
          position: 'absolute',
          inset: 0,
-          background: token.colorBgComponent,
+          background: token.colorBgContainer,
          borderRadius: token.progressLineRadius,
          opacity: 0,
          animationName: antProgressActive,
@ -259,7 +259,7 @@ export default genComponentStyleHook('Progress', token => {
    progressLineRadius: 100, // magic for capsule shape, should be a very large number
    progressInfoTextColor: token.colorText,
    progressDefaultColor: token.colorInfo,
-    progressRemainingColor: token.colorBgComponentTmp,
+    progressRemainingColor: token.colorBgContent,
    progressStepMarginInlineEnd,
    progressStepMinWidth: progressStepMarginInlineEnd,
    progressActiveMotionDuration: '2.4s',
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@ -77,7 +77,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
    colorBorder,
    controlLineWidth,
    radioDotSize,
-    colorBgComponentDisabled,
+    colorBgContainerDisabled,
    colorTextDisabled,
    paddingXS,
    radioDotDisabledColor,
@ -213,7 +213,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
        cursor: 'not-allowed',

        [radioInnerPrefixCls]: {
-          backgroundColor: colorBgComponentDisabled,
+          backgroundColor: colorBgContainerDisabled,
          borderColor: colorBorder,
          cursor: 'not-allowed',

@ -265,7 +265,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
    radioButtonActiveColor,
    radioSolidCheckedColor,
    colorTextDisabled,
-    colorBgComponentDisabled,
+    colorBgContainerDisabled,
    radioDisabledButtonCheckedColor,
    radioDisabledButtonCheckedBg,
  } = token;
@ -430,13 +430,13 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {

      '&-disabled': {
        color: colorTextDisabled,
-        backgroundColor: colorBgComponentDisabled,
+        backgroundColor: colorBgContainerDisabled,
        borderColor: colorBorder,
        cursor: 'not-allowed',

        '&:first-child, &:hover': {
          color: colorTextDisabled,
-          backgroundColor: colorBgComponentDisabled,
+          backgroundColor: colorBgContainerDisabled,
          borderColor: colorBorder,
        },
      },
@ -456,10 +456,10 @@ export default genComponentStyleHook('Radio', token => {
  const {
    padding,
    controlLineWidth,
-    colorBgComponentDisabled,
+    colorBgContainerDisabled,
    paddingXXS,
    colorTextDisabled,
-    colorBgComponent,
+    colorBgContainer,
    fontSize,
    lineHeight,
    fontSizeLG,
@ -497,14 +497,14 @@ export default genComponentStyleHook('Radio', token => {
    radioDotSize,
    radioDotColor,
    radioDotDisabledColor: colorTextDisabled,
-    radioSolidCheckedColor: colorBgComponent,
-    radioButtonBg: colorBgComponent,
-    radioButtonCheckedBg: colorBgComponent,
+    radioSolidCheckedColor: colorBgContainer,
+    radioButtonBg: colorBgContainer,
+    radioButtonCheckedBg: colorBgContainer,
    radioButtonColor,
    radioButtonHoverColor,
    radioButtonActiveColor,
    radioButtonPaddingHorizontal,
-    radioDisabledButtonCheckedBg: colorBgComponentDisabled,
+    radioDisabledButtonCheckedBg: colorBgContainerDisabled,
    radioDisabledButtonCheckedColor,
    radioWrapperMarginRight,
  });
--- a/components/result/style/index.tsx
+++ b/components/result/style/index.tsx
@ -80,7 +80,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
    [`${componentCls} ${componentCls}-content`]: {
      marginTop: paddingLG,
      padding: `${paddingLG}px ${padding * 2.5}px`,
-      backgroundColor: token.colorBgComponentSecondary,
+      backgroundColor: token.colorBgContainerSecondary,
    },

    [`${componentCls} ${componentCls}-extra`]: {
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@ -133,7 +133,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
            },
            '&-disabled': {
              [`&${selectItemCls}-option-selected`]: {
-                backgroundColor: token.colorBgComponentDisabled,
+                backgroundColor: token.colorBgContainerDisabled,
              },

              color: token.colorTextDisabled,
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -27,7 +27,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {

  return {
    position: 'relative',
-    backgroundColor: token.colorBgComponent,
+    backgroundColor: token.colorBgContainer,
    border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
    borderRadius: token.controlRadius,
    transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
@ -46,11 +46,11 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {

    [`${componentCls}-disabled&`]: {
      color: token.colorTextDisabled,
-      background: token.colorBgComponentDisabled,
+      background: token.colorBgContainerDisabled,
      cursor: 'not-allowed',

      [`${componentCls}-multiple&`]: {
-        background: token.colorBgComponentDisabled,
+        background: token.colorBgContainerDisabled,
      },

      input: {
@ -220,7 +220,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
        lineHeight: 1,
        textAlign: 'center',
        textTransform: 'none',
-        background: token.colorBgComponent,
+        background: token.colorBgContainer,
        cursor: 'pointer',
        opacity: 0,
        transition: `color ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`,
--- a/components/select/style/multiple.tsx
+++ b/components/select/style/multiple.tsx
@ -61,7 +61,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        },

        [`${componentCls}-disabled&`]: {
-          background: token.colorBgComponentDisabled,
+          background: token.colorBgContainerDisabled,
          cursor: 'not-allowed',
        },

@ -92,7 +92,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        marginTop: FIXED_ITEM_MARGIN,
        marginBottom: FIXED_ITEM_MARGIN,
        lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`,
-        background: token.colorBgComponentTmp,
+        background: token.colorBgContent,
        border: `${token.controlLineWidth}px solid ${token.colorSplit}`,
        borderRadius: token.controlRadius,
        cursor: 'default',
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@ -34,7 +34,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
    dotSize,
    marginFull,
    marginPart,
-    colorBgContainerSecondary,
+    colorBgContentHover,
    antCls,
  } = token;

@ -55,14 +55,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {

      [`${componentCls}-rail`]: {
        position: 'absolute',
-        backgroundColor: token.colorBgComponentTmp,
+        backgroundColor: token.colorBgContent,
        borderRadius: token.controlRadius,
        transition: `background-color ${token.motionDurationSlow}`,
      },

      [`${componentCls}-track`]: {
        position: 'absolute',
-        backgroundColor: token.colorPrimarySecondary,
+        backgroundColor: token.colorPrimaryBorder,
        borderRadius: token.controlRadius,
        transition: `background-color ${token.motionDurationSlow}`,
      },
@ -71,8 +71,8 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
        position: 'absolute',
        width: token.handleSize,
        height: token.handleSize,
-        backgroundColor: token.colorBgComponent,
-        border: `${token.lineHandleWidth}px solid ${token.colorPrimarySecondary}`,
+        backgroundColor: token.colorBgContainer,
+        border: `${token.lineHandleWidth}px solid ${token.colorPrimaryBorder}`,
        borderRadius: '50%',
        boxShadow: 'none',
        cursor: 'pointer',
@ -96,7 +96,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {

      '&:hover': {
        [`${componentCls}-rail`]: {
-          backgroundColor: colorBgContainerSecondary,
+          backgroundColor: colorBgContentHover,
        },

        [`${componentCls}-track`]: {
@ -104,7 +104,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
        },

        [`${componentCls}-dot`]: {
-          borderColor: colorBgContainerSecondary,
+          borderColor: colorBgContentHover,
        },

        [`${componentCls}-handle${antCls}-tooltip-open`]: {
@ -153,14 +153,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
        position: 'absolute',
        width: dotSize,
        height: dotSize,
-        backgroundColor: token.colorBgComponent,
+        backgroundColor: token.colorBgContainer,
        border: `${token.lineHandleWidth}px solid ${token.colorSplit}`,
        borderRadius: '50%',
        cursor: 'pointer',
        transition: `border-color ${token.motionDurationSlow}`,

        '&-active': {
-          borderColor: token.colorPrimarySecondary,
+          borderColor: token.colorPrimaryBorder,
        },
      },

@ -168,7 +168,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
        cursor: 'not-allowed',

        [`${componentCls}-rail`]: {
-          backgroundColor: `${token.colorBgComponentTmp} !important`,
+          backgroundColor: `${token.colorBgContent} !important`,
        },

        [`${componentCls}-track`]: {
@ -179,7 +179,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
          ${componentCls}-handle,
          ${componentCls}-dot
        `]: {
-          backgroundColor: token.colorBgComponent,
+          backgroundColor: token.colorBgContainer,
          borderColor: `${token.colorTextDisabled} !important`,
          boxShadow: 'none',
          cursor: 'not-allowed',
--- a/components/spin/style/index.tsx
+++ b/components/spin/style/index.tsx
@ -64,7 +64,7 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
          top: '50%',
          width: '100%',
          paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2,
-          textShadow: `0 1px 2px ${token.colorBgComponent}`, // FIXME: shadow
+          textShadow: `0 1px 2px ${token.colorBgContainer}`, // FIXME: shadow
        },

        [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
@ -109,7 +109,7 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
          zIndex: 10,
          width: '100%',
          height: '100%',
-          background: token.colorBgComponent,
+          background: token.colorBgContainer,
          opacity: 0,
          transition: `all ${token.motionDurationSlow}`,
          content: '""',
--- a/components/steps/style/index.tsx
+++ b/components/steps/style/index.tsx
@ -66,7 +66,7 @@ const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken):
  const tailColorKey: keyof StepsToken = `${status}TailColor`;
  return {
    [`${prefix}-${status} ${prefix}-icon`]: {
-      backgroundColor: token.colorBgComponent,
+      backgroundColor: token.colorBgContainer,
      borderColor: token[iconColorKey],
      [`> ${token.componentCls}-icon`]: {
        color: token[iconColorKey],
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@ -152,7 +152,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
      height: token.switchHeight,
      lineHeight: `${token.switchHeight}px`,
      verticalAlign: 'middle',
-      backgroundImage: `linear-gradient(to right, ${token.colorTextDisabled}, ${token.colorTextDisabled}), linear-gradient(to right, ${token.colorBgComponent}, ${token.colorBgComponent})`,
+      backgroundImage: `linear-gradient(to right, ${token.colorTextDisabled}, ${token.colorTextDisabled}), linear-gradient(to right, ${token.colorBgContainer}, ${token.colorBgContainer})`,
      border: '0',
      borderRadius: 100,
      cursor: 'pointer',
@ -224,7 +224,7 @@ export default genComponentStyleHook('Switch', token => {
    switchInnerMarginMax: switchPinSize + switchPadding + token.paddingXXS,
    switchPadding,
    switchPinSize,
-    switchBg: token.colorBgComponent,
+    switchBg: token.colorBgContainer,
    switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2,
    switchHeightSM,
    switchInnerMarginMinSM: switchPinSizeSM / 2,
--- a/components/table/style/empty.tsx
+++ b/components/table/style/empty.tsx
@ -12,7 +12,7 @@ const genEmptyStyle: GenerateStyle<TableToken, CSSObject> = token => {
        color: token.colorTextDisabled,

        '&:hover > td': {
-          background: token.colorBgComponent,
+          background: token.colorBgContainer,
        },
      },
    },
--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@ -233,12 +233,12 @@ export default genComponentStyleHook('Table', token => {
    paddingXS,
    paddingSM,
    controlHeight,
-    colorBgComponentSecondary,
+    colorBgContainerSecondary,
    colorAction,
    colorActionHover,
    opacityLoading,
-    colorBgComponent,
-    colorBgComponentTmp,
+    colorBgContainer,
+    colorBgContent,
    radiusBase,
    bgColors,
    textColors,
@ -253,7 +253,7 @@ export default genComponentStyleHook('Table', token => {

  const tableToken = mergeToken<TableToken>(token, {
    tableFontSize: fontSize,
-    tableBg: colorBgComponent,
+    tableBg: colorBgContainer,
    tableRadius: radiusBase,

    tablePaddingVertical: padding,
@ -264,9 +264,9 @@ export default genComponentStyleHook('Table', token => {
    tablePaddingHorizontalSmall: paddingXS,
    tableBorderColor: colorSplit,
    tableHeaderTextColor: colorTextHeading,
-    tableHeaderBg: colorBgComponentSecondary,
+    tableHeaderBg: colorBgContainerSecondary,
    tableFooterTextColor: colorTextHeading,
-    tableFooterBg: colorBgComponentSecondary,
+    tableFooterBg: colorBgContainerSecondary,
    tableHeaderCellSplitColor: colorSplit,
    tableHeaderSortBg: bgColors['15'],
    tableHeaderSortHoverBg: textColors['12'],
@ -278,11 +278,11 @@ export default genComponentStyleHook('Table', token => {
      .clone()
      .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
      .toRgbString(),
-    tableBodySortBg: colorBgComponentSecondary,
-    tableFixedHeaderSortActiveBg: colorBgComponentTmp,
+    tableBodySortBg: colorBgContainerSecondary,
+    tableFixedHeaderSortActiveBg: colorBgContent,
    tableHeaderFilterActiveBg: textColors['12'],
-    tableFilterDropdownBg: colorBgComponent,
-    tableRowHoverBg: colorBgComponentSecondary,
+    tableFilterDropdownBg: colorBgContainer,
+    tableRowHoverBg: colorBgContainerSecondary,
    tableSelectedRowBg,
    tableSelectedRowHoverBg: controlItemBgActiveHover,
    zIndexTableFixed,
@ -290,9 +290,9 @@ export default genComponentStyleHook('Table', token => {
    tableFontSizeMiddle: fontSize,
    tableFontSizeSmall: fontSize,
    tableSelectionColumnWidth: controlHeight,
-    tableExpandIconBg: colorBgComponent,
+    tableExpandIconBg: colorBgContainer,
    tableExpandColumnWidth: checkboxSize + 2 * token.padding,
-    tableExpandedRowBg: colorBgComponentSecondary,
+    tableExpandedRowBg: colorBgContainerSecondary,

    // Dropdown
    tableFilterDropdownWidth: 120,
--- a/components/table/style/sticky.tsx
+++ b/components/table/style/sticky.tsx
@ -19,7 +19,7 @@ const genStickyStyle: GenerateStyle<TableToken, CSSObject> = token => {
        '&-holder': {
          position: 'sticky',
          zIndex: zIndexTableSticky,
-          background: token.colorBgComponent,
+          background: token.colorBgContainer,
        },

        '&-scroll': {
--- a/components/tabs/style/index.tsx
+++ b/components/tabs/style/index.tsx
@ -43,7 +43,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>

        [`${componentCls}-tab-active`]: {
          color: token.colorPrimary,
-          background: token.colorBgComponent,
+          background: token.colorBgContainer,
        },

        [`${componentCls}-ink-bar`]: {
@ -70,7 +70,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
          },

          [`${componentCls}-tab-active`]: {
-            borderBottomColor: token.colorBgComponent,
+            borderBottomColor: token.colorBgContainer,
          },
        },
      },
@ -82,7 +82,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
          },

          [`${componentCls}-tab-active`]: {
-            borderTopColor: token.colorBgComponent,
+            borderTopColor: token.colorBgContainer,
          },
        },
      },
@ -108,7 +108,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
          [`${componentCls}-tab-active`]: {
            borderRightColor: {
              _skip_check_: true,
-              value: token.colorBgComponent,
+              value: token.colorBgContainer,
            },
          },
        },
@ -126,7 +126,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
          [`${componentCls}-tab-active`]: {
            borderLeftColor: {
              _skip_check_: true,
-              value: token.colorBgComponent,
+              value: token.colorBgContainer,
            },
          },
        },
@ -165,7 +165,7 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
          value: 'left',
        },
        listStyleType: 'none',
-        backgroundColor: token.colorBgComponent,
+        backgroundColor: token.colorBgContainer,
        backgroundClip: 'padding-box',
        borderRadius: token.radiusBase,
        outline: 'none',
@ -854,7 +854,7 @@ export default genComponentStyleHook(
      tabsCardHeight,
      tabsCardGutter: token.marginXXS / 2,
      tabsHorizontalGutter: token.marginXL,
-      tabsCardHeadBackground: token.colorBgComponentSecondary,
+      tabsCardHeadBackground: token.colorBgContainerSecondary,
      dropdownEdgeChildVerticalPadding: token.paddingXXS,
      tabsActiveTextShadow: '0 0 0.25px currentcolor',
      tabsDropdownHeight: 200,
--- a/components/tag/style/index.tsx
+++ b/components/tag/style/index.tsx
@ -26,7 +26,7 @@ const genTagStatusStyle = (
    [`${token.componentCls}-${status}`]: {
      color: token[`color${cssVariableType}`],
      background: token[`color${capitalizedCssVariableType}Bg`],
-      borderColor: token[`color${capitalizedCssVariableType}Secondary`],
+      borderColor: token[`color${capitalizedCssVariableType}Border`],
    },
  };
 };
@ -146,7 +146,7 @@ export default genComponentStyleHook('Tag', token => {

  const tagFontSize = token.fontSizeSM;
  const tagLineHeight = tagHeight - controlLineWidth * 2;
-  const tagDefaultBg = token.colorBgComponentSecondary;
+  const tagDefaultBg = token.colorBgContainerSecondary;
  const tagDefaultColor = token.colorText;

  const tagToken = mergeToken<TagToken>(token, {
--- a/components/theme/interface.ts
+++ b/components/theme/interface.ts
@ -214,29 +214,38 @@ export interface MapToken extends SeedToken, ColorPalettes {
  colorPrimaryHover: string;
  colorPrimaryActive: string;
  colorPrimaryOutline: string;
-  colorPrimarySecondary: string; // primary[2]
+  colorPrimaryBorder: string; // primary[2]
  colorPrimaryBorderHover: string;

-  colorSuccessSecondary: string;
+  colorSuccessBorder: string;
  colorSuccessBg: string; // success[0]

  colorWarningHover: string;
  colorWarningActive: string;
  colorWarningOutline: string;
-  colorWarningSecondary: string;
+  colorWarningBorder: string;
  colorWarningBg: string;

  colorErrorHover: string;
  colorErrorActive: string;
  colorErrorOutline: string;
-  colorErrorSecondary: string;
+  colorErrorBorder: string;
  colorErrorBg: string;

-  colorInfoSecondary: string;
+  colorInfoBorder: string;
  colorInfoBg: string;

  colorHighlight: string;

+  /** Color of layout background */
+  colorBgLayout: string;
+  colorBgContent: string;
+  colorBgContentHover: string;
+  /** Color of popup background */
+  colorBgElevated: string;
+  /** Color of component background */
+  colorBgContainer: string;
+
  // Font
  fontSizes: number[];
  lineHeights: number[];
@ -336,19 +345,13 @@ export interface AliasToken extends MapToken {
  colorAction: string;
  /** Weak action hover color. Such as `allowClear` or Alert close button */
  colorActionHover: string;
-  colorActionTmp: string;

  colorLink: string;
  colorLinkHover: string;
  colorLinkActive: string;

-  colorBgContainer: string;
  colorBgContainerSecondary: string;
-  colorBgComponent: string;
-  colorBgComponentSecondary: string;
-  colorBgComponentDisabled: string;
-  colorBgElevated: string;
-  colorBgComponentTmp: string;
+  colorBgContainerDisabled: string;

  // =============== Legacy: should be remove ===============
  opacityLoading: number;
--- a/components/theme/themes/IPalettes.ts
+++ b/components/theme/themes/IPalettes.ts
@ -1,6 +1,5 @@
 export interface TextAlphaPalettes {
  85: string;
-  75: string;
  65: string;
  45: string;
  30: string;
--- a/components/theme/themes/dark/index.ts
+++ b/components/theme/themes/dark/index.ts
@ -90,29 +90,35 @@ export default function derivative(token: SeedToken): MapToken {
    colorPrimaryActive: primaryColors[6],
    colorPrimaryHover: primaryColors[4],
    colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
-    colorPrimarySecondary: primaryColors[2],
+    colorPrimaryBorder: primaryColors[2],
    colorPrimaryBorderHover: primaryColors[3],

-    colorSuccessSecondary: successColors[2],
+    colorSuccessBorder: successColors[2],
    colorSuccessBg: successColors[0],

    colorErrorActive: errorColors[6],
    colorErrorHover: errorColors[4],
    colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
-    colorErrorSecondary: errorColors[2],
+    colorErrorBorder: errorColors[2],
    colorErrorBg: errorColors[0],

    colorWarningActive: warningColors[6],
    colorWarningHover: warningColors[4],
    colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
-    colorWarningSecondary: warningColors[2],
+    colorWarningBorder: warningColors[2],
    colorWarningBg: warningColors[0],

-    colorInfoSecondary: infoColors[2],
+    colorInfoBorder: infoColors[2],
    colorInfoBg: infoColors[0],

    colorHighlight: errorColors[4],

+    colorBgLayout: bgColors['0'],
+    colorBgContentHover: bgColors['26'],
+    colorBgContainer: bgColors['8'],
+    colorBgElevated: bgColors['12'],
+    colorBgContent: bgColors['15'],
+
    // control
    controlHeightSM: controlHeight * 0.75,
    controlHeightXS: controlHeight * 0.5,
--- a/components/theme/themes/dark/palettes.ts
+++ b/components/theme/themes/dark/palettes.ts
@ -18,7 +18,6 @@ export function generateBgPalettes(bgBaseColor: string): BgPalettes {
 export function generateTextAlphaPalettes(textBaseColor: string): TextAlphaPalettes {
  return {
    85: getAlphaColor(textBaseColor, 0.85),
-    75: getAlphaColor(textBaseColor, 0.75), // 目前只有 Color Action 用了
    'light-75': getAlphaColor(textBaseColor, 0.75),
    65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
    45: getAlphaColor(textBaseColor, 0.45),
--- a/components/theme/themes/default/index.ts
+++ b/components/theme/themes/default/index.ts
@ -92,29 +92,35 @@ export default function derivative(token: SeedToken): MapToken {
    colorPrimaryActive: primaryColors[6],
    colorPrimaryHover: primaryColors[4],
    colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
-    colorPrimarySecondary: primaryColors[2],
+    colorPrimaryBorder: primaryColors[2],
    colorPrimaryBorderHover: primaryColors[3],

-    colorSuccessSecondary: successColors[2],
+    colorSuccessBorder: successColors[2],
    colorSuccessBg: successColors[0],

    colorErrorActive: errorColors[6],
    colorErrorHover: errorColors[4],
    colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
-    colorErrorSecondary: errorColors[2],
+    colorErrorBorder: errorColors[2],
    colorErrorBg: errorColors[0],

    colorWarningActive: warningColors[6],
    colorWarningHover: warningColors[4],
    colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
-    colorWarningSecondary: warningColors[2],
+    colorWarningBorder: warningColors[2],
    colorWarningBg: warningColors[0],

-    colorInfoSecondary: infoColors[2],
+    colorInfoBorder: infoColors[2],
    colorInfoBg: infoColors[0],

    colorHighlight: errorColors[4],

+    colorBgLayout: bgColors['0'],
+    colorBgContentHover: bgColors['26'],
+    colorBgContainer: bgColors['8'],
+    colorBgElevated: bgColors['12'],
+    colorBgContent: bgColors['15'],
+
    // control
    controlHeightSM: controlHeight * 0.75,
    controlHeightXS: controlHeight * 0.5,
--- a/components/theme/themes/default/palettes.ts
+++ b/components/theme/themes/default/palettes.ts
@ -19,7 +19,6 @@ export function generateTextAlphaPalettes(textBaseColor: string): TextAlphaPalet
  return {
    85: getAlphaColor(textBaseColor, 0.85),
    'light-75': getAlphaColor(textBaseColor, 0.75), // 目前只有 Popover 用了
-    75: getAlphaColor(textBaseColor, 0.85), // 目前只有 Color Action 用了
    65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
    45: getAlphaColor(textBaseColor, 0.45),
    30: getAlphaColor(textBaseColor, 0.25),
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@ -48,17 +48,10 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    colorTextPlaceholder: textColors['25'],
    colorTextHeading: textColors['85'],

-    colorBgContainer: bgColors['0'],
-    colorBgContainerSecondary: bgColors['26'],
-    colorBgComponent: bgColors['8'],
    // TODO：Menu 用了这个 感觉命名有问题
    // TODO：能不能用透明色？用透明色会造成重叠后变亮的问题，是不是得用实色？
-    colorBgComponentSecondary: textColors['4'],
-    colorBgComponentDisabled: textColors['8'],
-    // 浮窗等组件的背景色 token
-    colorBgElevated: bgColors['12'],
-    // TODO: Slider 和 Progress 需要一个名字
-    colorBgComponentTmp: bgColors['15'],
+    colorBgContainerSecondary: textColors['4'],
+    colorBgContainerDisabled: textColors['8'],

    colorLink: mergedToken.colorPrimary,
    colorLinkHover: primaryColors[4],
@ -66,8 +59,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken

    // TODO: 确认 Action 的色彩关系
    colorAction: textColors['45'],
-    colorActionHover: textColors['75'],
-    colorActionTmp: textColors['30'],
+    colorActionHover: textColors['85'],

    // Split
    colorBorder: bgColors['26'],
@ -125,10 +117,10 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken

    opacityLoading: 0.65,

-    colorSuccessSecondary: successColors[2],
-    colorWarningSecondary: warningColors[2],
-    colorErrorSecondary: errorColors[2],
-    colorInfoSecondary: infoColors[2],
+    colorSuccessBorder: successColors[2],
+    colorWarningBorder: warningColors[2],
+    colorErrorBorder: errorColors[2],
+    colorInfoBorder: infoColors[2],

    linkDecoration: 'none',
    linkHoverDecoration: 'none',
--- a/components/timeline/style/index.tsx
+++ b/components/timeline/style/index.tsx
@ -52,7 +52,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = token => {
          position: 'absolute',
          width: token.timeLineItemHeadSize,
          height: token.timeLineItemHeadSize,
-          backgroundColor: token.colorBgComponent,
+          backgroundColor: token.colorBgContainer,
          border: `${token.radiusBase}px ${token.lineType} transparent`,
          borderRadius: '50%',

--- a/components/transfer/style/index.tsx
+++ b/components/transfer/style/index.tsx
@ -142,7 +142,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
        transferHeaderVerticalPadding - controlLineWidth
      }px ${paddingSM}px ${transferHeaderVerticalPadding}px`,
      color: token.colorText,
-      background: token.colorBgComponent,
+      background: token.colorBgContainer,
      borderBottom: `${controlLineWidth}px ${controlLineType} ${colorSplit}`,
      borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,

@ -305,7 +305,7 @@ const genTransferStyle: GenerateStyle<TransferToken> = (token: TransferToken): C

      [`${componentCls}-disabled`]: {
        [`${componentCls}-list`]: {
-          background: token.colorBgComponentDisabled,
+          background: token.colorBgContainerDisabled,
        },
      },

--- a/components/tree-select/style/index.tsx
+++ b/components/tree-select/style/index.tsx
@ -26,7 +26,7 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = token => {
        // ====================== Tree ======================
        genTreeStyle(
          treePrefixCls,
-          mergeToken<AliasToken>(token, { colorBgComponent: colorBgElevated }),
+          mergeToken<AliasToken>(token, { colorBgContainer: colorBgElevated }),
        ),
        {
          [treeCls]: {
--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@ -73,7 +73,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
  return {
    [treeCls]: {
      ...resetComponent(token),
-      background: token.colorBgComponent,
+      background: token.colorBgContainer,
      borderRadius: token.controlRadius,
      transition: `background-color ${token.motionDurationSlow}`,

@ -255,7 +255,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
      // >>> Title
      // add `${treeCls}-checkbox + span` to cover checkbox `${checkboxCls} + span`
      [`
-        ${treeCls}-node-content-wrapper, 
+        ${treeCls}-node-content-wrapper,
        ${treeCls}-checkbox + span
      `]: {
        display: 'flex',
@ -341,7 +341,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>

        // ============== Cover Background ==============
        [`${treeCls}-switcher`]: {
-          background: token.colorBgComponent,
+          background: token.colorBgContainer,

          '&-line-icon': {
            // https://github.com/ant-design/ant-design/issues/32813
--- a/components/upload/style/dragger.tsx
+++ b/components/upload/style/dragger.tsx
@ -11,7 +11,7 @@ const genDraggerStyle: GenerateStyle<UploadToken> = token => {
        width: '100%',
        height: '100%',
        textAlign: 'center',
-        background: token.colorBgComponentSecondary,
+        background: token.colorBgContainerSecondary,
        border: `${token.controlLineWidth}px dashed ${token.colorBorder}`,
        borderRadius: token.radiusBase,
        cursor: 'pointer',
--- a/components/upload/style/picture.tsx
+++ b/components/upload/style/picture.tsx
@ -99,7 +99,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = token => {
        marginBottom: token.marginXS,
        textAlign: 'center',
        verticalAlign: 'top',
-        backgroundColor: token.colorBgComponentSecondary,
+        backgroundColor: token.colorBgContainerSecondary,
        border: `${token.controlLineWidth}px dashed ${token.colorBorder}`,
        borderRadius: token.radiusBase,
        cursor: 'pointer',
@ -206,7 +206,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = token => {

        [`${itemCls}-uploading`]: {
          [`&${itemCls}`]: {
-            backgroundColor: token.colorBgComponentSecondary,
+            backgroundColor: token.colorBgContainerSecondary,
          },

          [`&::before, ${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {