refactor: token update (#36637)

* refactor: token update * refactor: token * chore: error color * fix: menu danger
2024-11-24 02:59:58 +08:00 · 2022-07-21 17:00:42 +08:00 · 2022-07-21 17:00:42 +08:00 · 1ad0553249
commit 1ad0553249
parent 45ea8e0a5c
37 changed files with 301 additions and 359 deletions
--- a/components/alert/style/index.tsx
+++ b/components/alert/style/index.tsx
@ -179,8 +179,8 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
    motionDurationSlow: duration,
    marginXS,
    fontSizeIcon,
-    colorAction,
-    colorActionHover,
+    colorIcon,
+    colorIconHover,
  } = token;

  return {
@ -201,19 +201,19 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
        cursor: 'pointer',

        [`${iconCls}-close`]: {
-          color: colorAction,
+          color: colorIcon,
          transition: `color ${duration}`,
          '&:hover': {
-            color: colorActionHover,
+            color: colorIconHover,
          },
        },
      },

      '&-close-text': {
-        color: colorAction,
+        color: colorIcon,
        transition: `color ${duration}`,
        '&:hover': {
-          color: colorActionHover,
+          color: colorIconHover,
        },
      },
    },
--- a/components/button/style/index.tsx
+++ b/components/button/style/index.tsx
@ -183,7 +183,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
  color: token.colorTextLightSolid,
  backgroundColor: token.colorPrimary,

-  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorPrimaryOutline}`,
+  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,

  ...genHoverActiveButtonStyle(
    {
@ -376,11 +376,11 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {

 // ============================== Export ==============================
 export default genComponentStyleHook('Button', token => {
-  const { buttonColorBgTextHover, buttonColorBgTextActive, controlTmpOutline } = token;
+  const { controlTmpOutline, colorTextQuaternary, colorTextTertiary } = token;

  const buttonToken = mergeToken<ButtonToken>(token, {
-    colorBgTextHover: buttonColorBgTextHover,
-    colorBgTextActive: buttonColorBgTextActive,
+    colorBgTextHover: colorTextQuaternary,
+    colorBgTextActive: colorTextTertiary,
    colorOutlineDefault: controlTmpOutline,
  });

--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@ -193,12 +193,12 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({

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

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

      '&-title': {
        padding: `${cardInnerHeadPadding}px 0`,
--- a/components/collapse/style/index.tsx
+++ b/components/collapse/style/index.tsx
@ -238,7 +238,7 @@ export default genComponentStyleHook('Collapse', token => {
  const collapseToken = mergeToken<CollapseToken>(token, {
    collapseContentBg: token.colorBgContainer,
    collapseContentPadding: token.padding,
-    collapseHeaderBg: token.colorBgContainerSecondary,
+    collapseHeaderBg: token.colorFillAlter,
    collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
    collapsePanelBorderRadius: token.radiusBase,
  });
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@ -315,7 +315,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {

        button: {
          padding: 0,
-          color: token.colorAction,
+          color: token.colorIcon,
          lineHeight: `${token.pickerTextHeight}px`,
          background: 'transparent',
          border: 0,
@ -328,7 +328,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
          fontSize: token.fontSize,

          '&:hover': {
-            color: token.colorActionHover,
+            color: token.colorIconHover,
          },
        },

@ -788,7 +788,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {
            mergeToken<PickerToken>(token, {
              inputBorderActiveColor: token.colorError,
              inputBorderHoverColor: token.colorError,
-              colorPrimaryOutline: token.colorErrorOutline,
+              controlOutline: token.colorErrorOutline,
            }),
          ),
        },
@ -809,7 +809,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {
            mergeToken<PickerToken>(token, {
              inputBorderActiveColor: token.colorWarning,
              inputBorderHoverColor: token.colorWarning,
-              colorPrimaryOutline: token.colorWarningOutline,
+              controlOutline: token.colorWarningOutline,
            }),
          ),
        },
--- 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.colorBgContainerSecondary;
+  const descriptionsBg = token.colorFillAlter;
  const descriptionsTitleMarginBottom = token.fontSizeSM * token.lineHeightSM;
  const descriptionsExtraColor = token.colorText;
  const descriptionsSmallPadding = `${token.paddingXS}px ${token.padding}px`;
--- a/components/drawer/style/index.tsx
+++ b/components/drawer/style/index.tsx
@ -87,7 +87,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
                [`${componentCls}-close`]: {
                  display: 'inline-block',
                  marginInlineEnd: token.marginSM,
-                  color: token.colorAction,
+                  color: token.colorIcon,
                  fontWeight: token.fontWeightStrong,
                  fontSize: fontSizeLG,
                  fontStyle: 'normal',
@ -103,7 +103,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
                  textRendering: 'auto',

                  [`&:focus, &:hover`]: {
-                    color: token.colorActionHover,
+                    color: token.colorIconHover,
                    textDecoration: 'none',
                  },
                },
--- a/components/form/style/index.tsx
+++ b/components/form/style/index.tsx
@ -55,7 +55,7 @@ const resetForm = (token: AliasToken): CSSObject => ({
  input[type='radio']:focus,
  input[type='checkbox']:focus`]: {
    outline: 0,
-    boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
+    boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
  },

  // Adjust output element
--- a/components/input-number/style/index.tsx
+++ b/components/input-number/style/index.tsx
@ -204,7 +204,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
          borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
          transition: `all ${motionDurationFast} linear`,
          '&:active': {
-            background: token.colorBgContainerSecondary,
+            background: token.colorFillAlter,
          },

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

 export const genActiveStyle = (token: InputToken) => ({
  borderColor: token.inputBorderHoverColor,
-  boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
+  boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
  borderInlineEndWidth: token.controlLineWidth,
  outline: 0,
 });
@ -81,7 +81,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
          mergeToken<InputToken>(token, {
            inputBorderActiveColor: colorError,
            inputBorderHoverColor: colorError,
-            colorPrimaryOutline: colorErrorOutline,
+            controlOutline: colorErrorOutline,
          }),
        ),
      },
@ -100,7 +100,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
          mergeToken<InputToken>(token, {
            inputBorderActiveColor: colorWarning,
            inputBorderHoverColor: colorWarning,
-            colorPrimaryOutline: colorWarningOutline,
+            controlOutline: colorWarningOutline,
          }),
        ),
      },
@ -247,7 +247,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
        fontWeight: 'normal',
        fontSize: token.fontSize,
        textAlign: 'center',
-        backgroundColor: token.colorBgContainerSecondary,
+        backgroundColor: token.colorFillAlter,
        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.colorAction,
+      color: token.colorIcon,
      fontSize: token.fontSizeIcon,
      verticalAlign: -1,
      // https://github.com/ant-design/ant-design/pull/18151
@ -561,8 +561,8 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
    inputAffixPadding,
    colorTextSecondary,
    motionDurationSlow,
-    colorAction,
-    colorActionHover,
+    colorIcon,
+    colorIconHover,
    iconCls,
  } = token;

@ -637,12 +637,12 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {

      // password
      [`${iconCls}.${prefixCls}-password-icon`]: {
-        color: colorAction,
+        color: colorIcon,
        cursor: 'pointer',
        transition: `all ${motionDurationSlow}`,

        '&:hover': {
-          color: colorActionHover,
+          color: colorIconHover,
        },
      },

--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@ -72,7 +72,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
    lineHeight,
    paddingXS,
    padding,
-    colorBorderSecondary,
+    colorSplit,
    lineWidth,
    iconCls,
    zIndexPopup,
@ -182,7 +182,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
        [`${componentCls}-item-divider`]: {
          overflow: 'hidden',
          lineHeight: 0,
-          borderColor: colorBorderSecondary,
+          borderColor: colorSplit,
          borderStyle: lineType,
          borderTopWidth: lineWidth,
          marginBlock: lineWidth,
@ -398,12 +398,12 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        colorError,
        colorTextDisabled,
        colorErrorHover,
-        colorErrorOutline,
+        colorErrorBg,
        colorText,
        colorTextLightSolid,
        colorTextSecondary,
        colorBgContainer,
-        colorBgContainerSecondary,
+        colorFillAlter,
        controlHeightLG,
        fontSize,
        controlItemBgActive,
@ -430,7 +430,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        themeColorTextSecondary: colorTextSecondary,
        themeColorTextSelect: colorPrimary,
        themeColorBg: colorBgContainer,
-        themeColorBgSecondary: colorBgContainerSecondary,
+        themeColorBgSecondary: colorFillAlter,
        themeColorBgActive: controlItemBgActive,
        themeColorBgSelect: controlItemBgActive,
        themeInkBarWidth: lineWidthBold + lineWidth,
@ -444,8 +444,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        themeColorDangerText: colorError,
        themeColorDangerTextHover: colorError,
        themeColorDangerTextSelect: colorError,
-        themeColorDangerBgActive: colorErrorOutline,
-        themeColorDangerBgSelect: colorErrorOutline,
+        themeColorDangerBgActive: colorErrorBg,
+        themeColorDangerBgSelect: colorErrorBg,
      });

      const menuDarkToken = mergeToken<MenuThemeToken>(menuToken, {
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@ -368,7 +368,7 @@ export default genComponentStyleHook('Modal', token => {
    modalFooterPaddingHorizontal: token.padding,
    modalFooterBorderWidth: token.controlLineWidth,
    modalConfirmTitleFontSize: token.fontSizeLG,
-    modalIconHoverColor: token.colorActionHover,
+    modalIconHoverColor: token.colorIconHover,
    modalConfirmIconSize: token.fontSize * token.lineHeight,
  });
  return [
--- a/components/notification/style/index.tsx
+++ b/components/notification/style/index.tsx
@ -222,11 +222,11 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
          position: 'absolute',
          top: token.notificationPaddingVertical,
          insetInlineEnd: token.notificationPaddingHorizontal,
-          color: token.colorAction,
+          color: token.colorIcon,
          outline: 'none',

          '&:hover': {
-            color: token.colorActionHover,
+            color: token.colorIconHover,
          },
        },

--- a/components/pagination/style/index.tsx
+++ b/components/pagination/style/index.tsx
@ -222,7 +222,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke

        '&:focus': {
          borderColor: token.colorPrimaryHover,
-          boxShadow: `${token.inputOutlineOffset} 0 ${token.controlOutlineWidth} ${token.colorPrimaryOutline}`,
+          boxShadow: `${token.inputOutlineOffset} 0 ${token.controlOutlineWidth} ${token.controlOutline}`,
        },

        '&[disabled]': {
--- a/components/progress/style/index.tsx
+++ b/components/progress/style/index.tsx
@ -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.colorBgContent,
+    progressRemainingColor: token.colorFillSecondary,
    progressStepMarginInlineEnd,
    progressStepMinWidth: progressStepMarginInlineEnd,
    progressActiveMotionDuration: '2.4s',
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@ -463,7 +463,7 @@ export default genComponentStyleHook('Radio', token => {
    fontSize,
    lineHeight,
    fontSizeLG,
-    colorPrimaryOutline,
+    controlOutline,
    colorPrimaryHover,
    colorPrimaryActive,
    colorText,
@ -473,7 +473,7 @@ export default genComponentStyleHook('Radio', token => {
  } = token;

  // Radio
-  const radioFocusShadow = `0 0 0 ${controlOutlineWidth}px ${colorPrimaryOutline}`;
+  const radioFocusShadow = `0 0 0 ${controlOutlineWidth}px ${controlOutline}`;
  const radioButtonFocusShadow = radioFocusShadow;

  const radioSize = fontSizeLG;
--- a/components/rate/style/index.tsx
+++ b/components/rate/style/index.tsx
@ -123,13 +123,13 @@ const genRateStyle: GenerateStyle<RateToken> = token => {

 // ============================== Export ==============================
 export default genComponentStyleHook('Rate', token => {
-  const { colorBgFillTmp } = token;
+  const { colorFillContent } = token;

  const rateToken = mergeToken<RateToken>(token, {
    rateStarColor: token['yellow-6'],
    rateStarSize: token.controlHeightLG * 0.5,
    rateStarHoverScale: 'scale(1.1)',
-    defaultColor: colorBgFillTmp,
+    defaultColor: colorFillContent,
  });
  return [genRateStyle(rateToken)];
 });
--- a/components/result/style/index.tsx
+++ b/components/result/style/index.tsx
@ -79,7 +79,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
    [`${componentCls} ${componentCls}-content`]: {
      marginTop: paddingLG,
      padding: `${paddingLG}px ${padding * 2.5}px`,
-      backgroundColor: token.colorBgContainerSecondary,
+      backgroundColor: token.colorFillAlter,
    },

    [`${componentCls} ${componentCls}-extra`]: {
--- a/components/segmented/style/index.tsx
+++ b/components/segmented/style/index.tsx
@ -3,12 +3,7 @@ import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
 import { resetComponent } from '../../style';

-export interface ComponentToken {
-  // FIXME: need to be removed
-  bgColor: string;
-  bgColorHover: string;
-  bgColorSelected: string;
-}
+export interface ComponentToken {}

 interface SegmentedToken extends FullToken<'Segmented'> {
  segmentedPaddingHorizontal: number;
@ -16,6 +11,9 @@ interface SegmentedToken extends FullToken<'Segmented'> {
  segmentedContainerPadding: number;
  labelColor: string;
  labelColorHover: string;
+  bgColor: string;
+  bgColorHover: string;
+  bgColorSelected: string;
 }

 // ============================== Mixins ==============================
@ -168,23 +166,26 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
 };

 // ============================== Export ==============================
-export default genComponentStyleHook(
-  'Segmented',
-  token => {
-    const { lineWidthBold, controlLineWidth, colorTextLabel, colorText } = token;
+export default genComponentStyleHook('Segmented', token => {
+  const {
+    lineWidthBold,
+    controlLineWidth,
+    colorTextLabel,
+    colorText,
+    colorFillSecondary,
+    colorFill,
+    colorBgContainer,
+  } = token;

-    const segmentedToken = mergeToken<SegmentedToken>(token, {
-      segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
-      segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
-      segmentedContainerPadding: lineWidthBold,
-      labelColor: colorTextLabel,
-      labelColorHover: colorText,
-    });
-    return [genSegmentedStyle(segmentedToken)];
-  },
-  ({ segmentedBgColor, segmentedBgColorActive, segmentedBgColorHover }) => ({
-    bgColor: segmentedBgColor,
-    bgColorHover: segmentedBgColorHover,
-    bgColorSelected: segmentedBgColorActive,
-  }),
-);
+  const segmentedToken = mergeToken<SegmentedToken>(token, {
+    segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
+    segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
+    segmentedContainerPadding: lineWidthBold,
+    labelColor: colorTextLabel,
+    labelColorHover: colorText,
+    bgColor: colorFillSecondary,
+    bgColorHover: colorFill,
+    bgColorSelected: colorBgContainer,
+  });
+  return [genSegmentedStyle(segmentedToken)];
+});
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -297,7 +297,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = token => {
      componentCls,
      mergeToken<any>(token, {
        borderHoverColor: token.colorPrimaryHover,
-        outlineColor: token.colorPrimaryOutline,
+        outlineColor: token.controlOutline,
      }),
    ),
    genStatusStyle(
--- a/components/select/style/multiple.tsx
+++ b/components/select/style/multiple.tsx
@ -93,7 +93,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        marginTop: FIXED_ITEM_MARGIN,
        marginBottom: FIXED_ITEM_MARGIN,
        lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`,
-        background: token.colorBgContent,
+        background: token.colorFillSecondary,
        border: `${token.controlLineWidth}px solid ${token.colorSplit}`,
        borderRadius: token.controlRadius,
        cursor: 'default',
@ -122,7 +122,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
          ...resetIcon(),

          display: 'inline-block',
-          color: token.colorAction,
+          color: token.colorIcon,
          fontWeight: 'bold',
          fontSize: 10,
          lineHeight: 'inherit',
@ -133,7 +133,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
          },

          '&:hover': {
-            color: token.colorActionHover,
+            color: token.colorIconHover,
          },
        },
      },
--- a/components/skeleton/style/index.tsx
+++ b/components/skeleton/style/index.tsx
@ -363,10 +363,10 @@ export default genComponentStyleHook(
    return [genBaseStyle(skeletonToken)];
  },
  token => {
-    const { colorBgFillTmp, colorTextPlaceholder } = token;
+    const { colorFillContent, colorTextPlaceholder } = token;

    return {
-      color: colorBgFillTmp,
+      color: colorFillContent,
      colorGradientEnd: colorTextPlaceholder,
    };
  },
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@ -34,7 +34,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
    dotSize,
    marginFull,
    marginPart,
-    colorBgContentHover,
+    colorFillContentHover,
    antCls,
  } = token;

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

      [`${componentCls}-rail`]: {
        position: 'absolute',
-        backgroundColor: token.colorBgContent,
+        backgroundColor: token.colorFillSecondary,
        borderRadius: token.controlRadius,
        transition: `background-color ${token.motionDurationSlow}`,
      },
@ -96,7 +96,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {

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

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

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

        [`${componentCls}-handle${antCls}-tooltip-open`]: {
@ -168,7 +168,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
        cursor: 'not-allowed',

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

        [`${componentCls}-track`]: {
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@ -165,7 +165,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
      },

      [`&${token.componentCls}-checked:focus-visible`]: {
-        boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
+        boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
      },

      '&:focus:hover': {
--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@ -233,19 +233,19 @@ export default genComponentStyleHook('Table', token => {
    paddingXS,
    paddingSM,
    controlHeight,
-    colorBgContainerSecondary,
-    colorAction,
-    colorActionHover,
+    colorFillAlter,
+    colorIcon,
+    colorIconHover,
    opacityLoading,
    colorBgContainer,
-    colorBgContent,
+    colorFillSecondary,
    radiusBase,
-    colorBgFillTmp,
+    colorFillContent,
    controlInteractiveSize: checkboxSize,
  } = token;

-  const baseColorAction = new TinyColor(colorAction);
-  const baseColorActionHover = new TinyColor(colorActionHover);
+  const baseColorAction = new TinyColor(colorIcon);
+  const baseColorActionHover = new TinyColor(colorIconHover);

  const tableSelectedRowBg = controlItemBgActive;
  const zIndexTableFixed: number = 2;
@ -263,12 +263,12 @@ export default genComponentStyleHook('Table', token => {
    tablePaddingHorizontalSmall: paddingXS,
    tableBorderColor: colorSplit,
    tableHeaderTextColor: colorTextHeading,
-    tableHeaderBg: colorBgContainerSecondary,
+    tableHeaderBg: colorFillAlter,
    tableFooterTextColor: colorTextHeading,
-    tableFooterBg: colorBgContainerSecondary,
+    tableFooterBg: colorFillAlter,
    tableHeaderCellSplitColor: colorSplit,
-    tableHeaderSortBg: colorBgContent,
-    tableHeaderSortHoverBg: colorBgFillTmp,
+    tableHeaderSortBg: colorFillSecondary,
+    tableHeaderSortHoverBg: colorFillContent,
    tableHeaderIconColor: baseColorAction
      .clone()
      .setAlpha(baseColorAction.getAlpha() * opacityLoading)
@ -277,11 +277,11 @@ export default genComponentStyleHook('Table', token => {
      .clone()
      .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
      .toRgbString(),
-    tableBodySortBg: colorBgContainerSecondary,
-    tableFixedHeaderSortActiveBg: colorBgContent,
-    tableHeaderFilterActiveBg: colorBgFillTmp,
+    tableBodySortBg: colorFillAlter,
+    tableFixedHeaderSortActiveBg: colorFillSecondary,
+    tableHeaderFilterActiveBg: colorFillContent,
    tableFilterDropdownBg: colorBgContainer,
-    tableRowHoverBg: colorBgContainerSecondary,
+    tableRowHoverBg: colorFillAlter,
    tableSelectedRowBg,
    tableSelectedRowHoverBg: controlItemBgActiveHover,
    zIndexTableFixed,
@ -291,7 +291,7 @@ export default genComponentStyleHook('Table', token => {
    tableSelectionColumnWidth: controlHeight,
    tableExpandIconBg: colorBgContainer,
    tableExpandColumnWidth: checkboxSize + 2 * token.padding,
-    tableExpandedRowBg: colorBgContainerSecondary,
+    tableExpandedRowBg: colorFillAlter,

    // Dropdown
    tableFilterDropdownWidth: 120,
--- a/components/tabs/style/index.tsx
+++ b/components/tabs/style/index.tsx
@ -854,7 +854,7 @@ export default genComponentStyleHook(
      tabsCardHeight,
      tabsCardGutter: token.marginXXS / 2,
      tabsHorizontalGutter: token.marginXL,
-      tabsCardHeadBackground: token.colorBgContainerSecondary,
+      tabsCardHeadBackground: token.colorFillAlter,
      dropdownEdgeChildVerticalPadding: token.paddingXXS,
      tabsActiveTextShadow: '0 0 0.25px currentcolor',
      tabsDropdownHeight: 200,
--- a/components/tag/style/index.tsx
+++ b/components/tag/style/index.tsx
@ -147,7 +147,7 @@ export default genComponentStyleHook('Tag', token => {

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

  const tagToken = mergeToken<TagToken>(token, {
--- a/components/theme/interface.ts
+++ b/components/theme/interface.ts
@ -204,16 +204,39 @@ export interface SeedToken extends PresetColorType {
  opacityImage: number;
 }

-export interface ColorMapToken {
+export interface TextMapToken {
+  colorText: string;
+  colorTextSecondary: string;
+  colorTextTertiary: string;
+  colorTextQuaternary: string;
+}
+
+export interface BgMapToken {
+  // 作为比较重的描边或者填充内容
+  colorFill: string;
+  // 表达 选中态，或者作为弱一级的实色 border
+  colorFillSecondary: string;
+  // 另外一种 hover 色 或者禁用的背景色
+  // 用于表达选中态或用于与区分 BgComponent 区分
+  colorFillTertiary: string;
+  colorFillQuaternary: string;
+  // Container 类型
+  colorBgContainer: string;
+  colorBgElevated: string;
+  colorBgLayout: string;
+}
+
+export interface ColorMapToken extends BgMapToken, TextMapToken {
  // Color
-  colorPrimary: string;
-  colorPrimaryHover: string;
-  colorPrimaryBg: string;
-  colorPrimaryBgHover: string;
-  colorPrimaryActive: string;
-  colorPrimaryBorder: string; // primary[2]
-  colorPrimaryBorderHover: string;
-  colorPrimaryOutline: string;
+  colorPrimaryBg: string; // 1
+  colorPrimaryBgHover: string; // 2
+  colorPrimaryBorder: string; // 3
+  colorPrimaryBorderHover: string; // 4
+  colorPrimaryHover: string; // 5
+  colorPrimary: string; // 6
+  colorPrimaryActive: string; // 7
+  colorPrimaryText: string; // 8
+  colorPrimaryTextHover: string; // 9

  colorSuccess: string;
  colorSuccessBorder: string;
@ -224,63 +247,16 @@ export interface ColorMapToken {
  colorWarningActive: string;
  colorWarningBorder: string;
  colorWarningBg: string;
-  colorWarningOutline: string;

  colorError: string;
  colorErrorHover: string;
  colorErrorActive: string;
  colorErrorBorder: string;
  colorErrorBg: string;
-  colorErrorOutline: string;

  colorInfo: string;
  colorInfoBorder: string;
  colorInfoBg: string;
-
-  /** Color of layout background */
-  colorBgLayout: string;
-  colorBgContent: string;
-  /** Color of popup background */
-  colorBgElevated: string;
-  /** Color of component background */
-  colorBgContainer: string;
-
-  colorBgContentHover: string;
-  colorBgContainerSecondary: string;
-  colorBgContainerDisabled: string;
-
-  colorBorder: string;
-  colorBorderBg: string;
-  colorBorderSecondary: string;
-  colorSplit: string;
-
-  // Color
-  colorText: string;
-  colorTextSecondary: string;
-  colorTextDisabled: string;
-  colorTextHeading: string;
-  colorTextLabel: string;
-
-  /** Weak action. Such as `allowClear` or Alert close button */
-  colorAction: string;
-  /** Weak action hover color. Such as `allowClear` or Alert close button */
-  colorActionHover: string;
-
-  colorLink: string;
-  colorLinkHover: string;
-  colorLinkActive: string;
-
-  colorBgMask: string;
-  colorBgItemHover: string;
-  colorBgFillTmp: string;
-  colorBgTooltipTmp: string;
-
-  // FIXME: should be removed
-  buttonColorBgTextHover: string;
-  buttonColorBgTextActive: string;
-  segmentedBgColor: string;
-  segmentedBgColorHover: string;
-  segmentedBgColorActive: string;
 }

 export interface CommonMapToken {
@ -332,11 +308,43 @@ export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, Commo
 // ======================================================================
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
 export interface AliasToken extends MapToken {
-  /** Placeholder text color */
+  // Background
+  colorFillSecondary: string;
+  colorFillContentHover: string;
+  colorFillAlter: string;
+  colorBgContainerDisabled: string;
+
+  colorBgMask: string;
+  colorBgSpotlight: string;
+  colorFillContent: string;
+
+  // Border
+  colorBorder: string;
+  colorBorderBg: string;
+  colorBorderSecondary: string;
+  colorSplit: string;
+
+  // Text
  colorTextPlaceholder: string;
+  colorTextDisabled: string;
+  colorTextHeading: string;
+  colorTextLabel: string;
+
+  /** Weak action. Such as `allowClear` or Alert close button */
+  colorIcon: string;
+  /** Weak action hover color. Such as `allowClear` or Alert close button */
+  colorIconHover: string;
+
+  colorLink: string;
+  colorLinkHover: string;
+  colorLinkActive: string;

  colorHighlight: string;

+  controlOutline: string;
+  colorWarningOutline: string;
+  colorErrorOutline: string;
+
  // Font
  fontSizeSM: number;
  fontSize: number;
--- a/components/theme/themes/IPalettes.ts
+++ b/components/theme/themes/IPalettes.ts
@ -1,5 +1,6 @@
+import type { BgMapToken, TextMapToken } from 'antd/es/theme/interface';
+
 export interface PrimaryPalettes {
-  0: string;
  1: string;
  2: string;
  3: string;
@ -7,6 +8,8 @@ export interface PrimaryPalettes {
  5: string;
  6: string;
  7: string;
+  8: string;
+  9: string;
 }

 export interface SuccessPalettes {
@ -37,50 +40,10 @@ export interface InfoPalettes {
  6: string;
 }

-export interface TextAlphaPalettes {
-  85: string;
-  65: string;
-  45: string;
-  30: string;
-  25: string;
-  // FIXME: 只有 Popover 用了
-  'light-75': string;
-
-  // 从 12 往下基本上就是偏背景和装饰性元素了
-  12: string;
-  // 另外一种 hover 色 或者禁用的背景色
-  8: string;
-  // 不透明度叠加色或文本色强化
-  4: string;
-  // 文本 hover 色
-  3: string;
-}
-
-export interface BgPalettes {
-  // 作为比较重的描边或者填充内容
-  26: string;
-  // 表达 选中态，或者作为弱一级的实色 border
-  19: string;
-  // 用于表达选中态或用于与区分 component 区分
-  15: string;
-  // 8 是卡片容器底色
-  8: string;
-  // Container 类型
-  // 12 是 elevated 模式
-  12: string;
-  // 0 是 base 模式
-  0: string;
-  // FIXME: 亮色需要额外增加的色彩序列
-  'light-12'?: string;
-  'light-2'?: string;
-  'light-10'?: string;
-  base: string;
-}
-
 export type GeneratePrimaryPalettes = (primaryBaseColor: string) => PrimaryPalettes;
 export type GenerateSuccessPalettes = (successBaseColor: string) => SuccessPalettes;
 export type GenerateWarningPalettes = (warningBaseColor: string) => WarningPalettes;
 export type GenerateErrorPalettes = (errorBaseColor: string) => ErrorPalettes;
 export type GenerateInfoPalettes = (infoBaseColor: string) => InfoPalettes;
-export type GenerateTextAlphaPalettes = (textBaseColor: string) => TextAlphaPalettes;
-export type GenerateBgPalettes = (bgBaseColor: string) => BgPalettes;
+export type GenerateTextAlphaPalettes = (textBaseColor: string) => TextMapToken;
+export type GenerateBgPalettes = (bgBaseColor: string, textBaseColor: string) => BgMapToken;
--- a/components/theme/themes/dark/palettes.ts
+++ b/components/theme/themes/dark/palettes.ts
@ -1,19 +1,18 @@
 import { generate } from '@ant-design/colors';
 import type {
-  BgPalettes,
-  ErrorPalettes,
-  InfoPalettes,
-  PrimaryPalettes,
-  SuccessPalettes,
-  TextAlphaPalettes,
-  WarningPalettes,
+  GenerateBgPalettes,
+  GenerateErrorPalettes,
+  GenerateInfoPalettes,
+  GeneratePrimaryPalettes,
+  GenerateSuccessPalettes,
+  GenerateTextAlphaPalettes,
+  GenerateWarningPalettes,
 } from '../IPalettes';
 import { getAlphaColor, getSolidColor } from './colorAlgorithm';

-export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalettes {
+export const generatePrimaryPalettes: GeneratePrimaryPalettes = (primaryBaseColor: string) => {
  const primaryColors = generate(primaryBaseColor, { theme: 'dark' });
  return {
-    0: '#0e161f',
    1: primaryColors[0],
    2: primaryColors[1],
    3: primaryColors[2],
@ -21,19 +20,21 @@ export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalett
    5: primaryColors[4],
    6: primaryColors[5],
    7: primaryColors[6],
+    8: primaryColors[7],
+    9: primaryColors[8],
  };
-}
+};

-export function generateSuccessPalettes(successBaseColor: string): SuccessPalettes {
+export const generateSuccessPalettes: GenerateSuccessPalettes = (successBaseColor: string) => {
  const successColors = generate(successBaseColor, { theme: 'dark' });
  return {
    1: successColors[0],
    3: successColors[2],
    6: successColors[5],
  };
-}
+};

-export function generateErrorPalettes(errorBaseColor: string): ErrorPalettes {
+export const generateErrorPalettes: GenerateErrorPalettes = (errorBaseColor: string) => {
  const errorColors = generate(errorBaseColor, { theme: 'dark' });
  return {
    1: errorColors[0],
@ -42,9 +43,9 @@ export function generateErrorPalettes(errorBaseColor: string): ErrorPalettes {
    6: errorColors[5],
    7: errorColors[6],
  };
-}
+};

-export function generateWarningPalettes(warningBaseColor: string): WarningPalettes {
+export const generateWarningPalettes: GenerateWarningPalettes = (warningBaseColor: string) => {
  const warningColors = generate(warningBaseColor, { theme: 'dark' });
  return {
    1: warningColors[0],
@ -53,44 +54,34 @@ export function generateWarningPalettes(warningBaseColor: string): WarningPalett
    6: warningColors[5],
    7: warningColors[6],
  };
-}
+};

-export function generateInfoPalettes(infoBaseColor: string): InfoPalettes {
+export const generateInfoPalettes: GenerateInfoPalettes = (infoBaseColor: string) => {
  const infoColors = generate(infoBaseColor, { theme: 'dark' });
  return {
    1: infoColors[0],
    3: infoColors[2],
    6: infoColors[5],
  };
-}
+};

-export function generateBgPalettes(bgBaseColor: string): BgPalettes {
-  return {
-    'light-2': getSolidColor(bgBaseColor, 2),
-    'light-10': getSolidColor(bgBaseColor, 10),
-    'light-12': getSolidColor(bgBaseColor, 12),
-    26: getSolidColor(bgBaseColor, 26),
-    19: getSolidColor(bgBaseColor, 19),
-    15: getSolidColor(bgBaseColor, 15),
-    12: getSolidColor(bgBaseColor, 12),
-    8: getSolidColor(bgBaseColor, 8),
-    0: getSolidColor(bgBaseColor, 0),
-    base: getSolidColor(bgBaseColor, 0),
-  };
-}
+export const generateBgPalettes: GenerateBgPalettes = (
+  bgBaseColor: string,
+  textBaseColor: string,
+) => ({
+  colorFill: getAlphaColor(textBaseColor, 18),
+  colorFillSecondary: getAlphaColor(textBaseColor, 12),
+  colorFillTertiary: getAlphaColor(textBaseColor, 8),
+  colorFillQuaternary: getAlphaColor(textBaseColor, 4),

-export function generateTextAlphaPalettes(textBaseColor: string): TextAlphaPalettes {
-  return {
-    85: getAlphaColor(textBaseColor, 0.85),
-    'light-75': getAlphaColor(textBaseColor, 0.75),
-    65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
-    45: getAlphaColor(textBaseColor, 0.45),
-    30: getAlphaColor(textBaseColor, 0.3),
-    25: getAlphaColor(textBaseColor, 0.25),
-    // 从 12 往下基本上就是偏背景和装饰性元素了
-    12: getAlphaColor(textBaseColor, 0.12),
-    8: getAlphaColor(textBaseColor, 0.08),
-    4: getAlphaColor(textBaseColor, 0.04),
-    3: getAlphaColor(textBaseColor, 0.03),
-  };
-}
+  colorBgElevated: getSolidColor(bgBaseColor, 12),
+  colorBgContainer: getSolidColor(bgBaseColor, 8),
+  colorBgLayout: getSolidColor(bgBaseColor, 0),
+});
+
+export const generateTextAlphaPalettes: GenerateTextAlphaPalettes = (textBaseColor: string) => ({
+  colorText: getAlphaColor(textBaseColor, 0.85),
+  colorTextSecondary: getAlphaColor(textBaseColor, 0.65),
+  colorTextTertiary: getAlphaColor(textBaseColor, 0.45),
+  colorTextQuaternary: getAlphaColor(textBaseColor, 0.25),
+});
--- a/components/theme/themes/default/palettes.ts
+++ b/components/theme/themes/default/palettes.ts
@ -13,7 +13,6 @@ import { getAlphaColor, getSolidColor } from './colorAlgorithm';
 export const generatePrimaryPalettes: GeneratePrimaryPalettes = (primaryBaseColor: string) => {
  const primaryColors = generate(primaryBaseColor);
  return {
-    0: primaryBaseColor,
    1: primaryColors[0],
    2: primaryColors[1],
    3: primaryColors[2],
@ -21,6 +20,8 @@ export const generatePrimaryPalettes: GeneratePrimaryPalettes = (primaryBaseColo
    5: primaryColors[4],
    6: primaryColors[5],
    7: primaryColors[6],
+    8: primaryColors[7],
+    9: primaryColors[8],
  };
 };

@ -64,29 +65,23 @@ export const generateInfoPalettes: GenerateInfoPalettes = (infoBaseColor: string
  };
 };

-export const generateBgPalettes: GenerateBgPalettes = (bgBaseColor: string) => ({
-  26: getSolidColor(bgBaseColor, 15),
-  'light-2': getSolidColor(bgBaseColor, 2),
-  'light-10': getSolidColor(bgBaseColor, 10),
-  'light-12': getSolidColor(bgBaseColor, 12),
-  19: getSolidColor(bgBaseColor, 6),
-  15: getSolidColor(bgBaseColor, 4),
-  12: getSolidColor(bgBaseColor, 0),
-  8: getSolidColor(bgBaseColor, 0),
-  0: getSolidColor(bgBaseColor, 4),
-  base: getSolidColor(bgBaseColor, 0),
+export const generateBgPalettes: GenerateBgPalettes = (
+  bgBaseColor: string,
+  textBaseColor: string,
+) => ({
+  colorFill: getAlphaColor(textBaseColor, 0.06),
+  colorFillSecondary: getAlphaColor(textBaseColor, 0.04),
+  colorFillTertiary: getAlphaColor(textBaseColor, 0.03),
+  colorFillQuaternary: getAlphaColor(textBaseColor, 0.02),
+
+  colorBgLayout: getSolidColor(bgBaseColor, 4),
+  colorBgContainer: getSolidColor(bgBaseColor, 0),
+  colorBgElevated: getSolidColor(bgBaseColor, 0),
 });

 export const generateTextAlphaPalettes: GenerateTextAlphaPalettes = (textBaseColor: string) => ({
-  85: getAlphaColor(textBaseColor, 0.85),
-  'light-75': getAlphaColor(textBaseColor, 0.75), // 目前只有 Popover 用了
-  65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
-  45: getAlphaColor(textBaseColor, 0.45),
-  30: getAlphaColor(textBaseColor, 0.25),
-  25: getAlphaColor(textBaseColor, 0.25),
-  // 从 12 往下基本上就是偏背景和装饰性元素了
-  12: getAlphaColor(textBaseColor, 0.06), // 主要是 Split
-  8: getAlphaColor(textBaseColor, 0.04),
-  4: getAlphaColor(textBaseColor, 0.03),
-  3: getAlphaColor(textBaseColor, 0.02),
+  colorText: getAlphaColor(textBaseColor, 0.85),
+  colorTextSecondary: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
+  colorTextTertiary: getAlphaColor(textBaseColor, 0.45),
+  colorTextQuaternary: getAlphaColor(textBaseColor, 0.25),
 });
--- a/components/theme/themes/shared/genColorMapToken.ts
+++ b/components/theme/themes/shared/genColorMapToken.ts
@ -1,4 +1,3 @@
-import { TinyColor } from '@ctrl/tinycolor';
 import type { ColorMapToken, SeedToken } from '../../interface';
 import type {
  GenerateBgPalettes,
@ -47,86 +46,41 @@ export default function genColorMapToken(
  const warningColors = generateWarningPalettes(colorWarningBase);
  const errorColors = generateErrorPalettes(colorErrorBase);
  const infoColors = generateInfoPalettes(colorInfoBase);
-  const bgColors = generateBgPalettes(colorBgBase);
+  const bgColors = generateBgPalettes(colorBgBase, colorTextBase);
  const textColors = generateTextAlphaPalettes(colorTextBase);

-  const colorPrimary = primaryColors['6'];
-  const colorError = errorColors['5'];
-  const colorWarning = warningColors['6'];
-  const colorSuccess = successColors['6'];
-  const colorInfo = infoColors['6'];
-
  return {
-    colorPrimary,
-    colorPrimaryHover: primaryColors['5'],
-    colorPrimaryBg: primaryColors['1'],
-    colorPrimaryBgHover: primaryColors['0'],
-    colorPrimaryActive: primaryColors['7'],
-    colorPrimaryBorder: primaryColors['3'],
-    colorPrimaryBorderHover: primaryColors['4'],
-    colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
+    ...bgColors,
+    ...textColors,

-    colorSuccess,
-    colorSuccessBg: successColors['1'],
-    colorSuccessBorder: successColors['3'],
+    colorPrimaryBg: primaryColors[1],
+    colorPrimaryBgHover: primaryColors[2],
+    colorPrimaryBorder: primaryColors[3],
+    colorPrimaryBorderHover: primaryColors[4],
+    colorPrimaryHover: primaryColors[5],
+    colorPrimary: primaryColors[6],
+    colorPrimaryActive: primaryColors[7],
+    colorPrimaryText: primaryColors[8],
+    colorPrimaryTextHover: primaryColors[9],

-    colorError,
-    colorErrorBg: errorColors['1'],
-    colorErrorBorder: errorColors['3'],
-    colorErrorHover: errorColors['5'],
-    colorErrorActive: errorColors['7'],
-    colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
+    colorSuccessBg: successColors[1],
+    colorSuccessBorder: successColors[3],
+    colorSuccess: successColors[6],

-    colorWarning,
-    colorWarningBg: warningColors['1'],
-    colorWarningBorder: warningColors['3'],
-    colorWarningHover: warningColors['5'],
-    colorWarningActive: warningColors['7'],
-    colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
+    colorErrorBg: errorColors[1],
+    colorErrorBorder: errorColors[3],
+    colorErrorHover: errorColors[5],
+    colorError: errorColors[6],
+    colorErrorActive: errorColors[7],

-    colorInfo,
-    colorInfoBg: infoColors['1'],
-    colorInfoBorder: infoColors['3'],
+    colorWarningBg: warningColors[1],
+    colorWarningBorder: warningColors[3],
+    colorWarningHover: warningColors[5],
+    colorWarning: warningColors[6],
+    colorWarningActive: warningColors[7],

-    colorLink: primaryColors['6'],
-    colorLinkHover: primaryColors['5'],
-    colorLinkActive: primaryColors['7'],
-
-    // ============== Background ============== //
-    colorBgLayout: bgColors['0'],
-    colorBgElevated: bgColors['12'],
-    colorBgContainer: bgColors['8'],
-    colorBgContent: bgColors['15'],
-
-    colorBgContentHover: bgColors['26'],
-    colorBgContainerSecondary: textColors['4'],
-    colorBgContainerDisabled: textColors['8'],
-
-    colorBgMask: textColors['45'],
-    colorBgItemHover: textColors['8'],
-    colorBgFillTmp: textColors['12'],
-    colorBgTooltipTmp: textColors['85'],
-
-    // ============== Split ============== //
-    colorBorder: bgColors['26'],
-    colorBorderSecondary: bgColors['19'],
-    colorBorderBg: bgColors.base,
-    colorSplit: textColors['12'],
-
-    // ============== Text ============== //
-    colorText: textColors['85'],
-    colorTextHeading: textColors['85'],
-    colorTextSecondary: textColors['45'],
-    colorTextDisabled: textColors['25'],
-    colorTextLabel: textColors['65'],
-
-    colorAction: textColors['45'],
-    colorActionHover: textColors['85'],
-
-    buttonColorBgTextHover: textColors['3'],
-    buttonColorBgTextActive: textColors['4'],
-    segmentedBgColor: textColors['8'],
-    segmentedBgColorHover: textColors['12'],
-    segmentedBgColorActive: bgColors['8'],
+    colorInfoBg: infoColors[1],
+    colorInfoBorder: infoColors[3],
+    colorInfo: infoColors[6],
  };
 }
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@ -31,9 +31,38 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
  const aliasToken: AliasToken = {
    ...mergedToken,

-    colorTextPlaceholder: mergedToken.colorTextDisabled,
+    colorLink: mergedToken.colorPrimary,
+    colorLinkHover: mergedToken.colorPrimaryHover,
+    colorLinkActive: mergedToken.colorPrimaryActive,
+
+    // ============== Background ============== //
+    colorFillContent: mergedToken.colorFillSecondary,
+    colorFillContentHover: mergedToken.colorFill,
+    colorFillAlter: mergedToken.colorFillQuaternary,
+    colorBgContainerDisabled: mergedToken.colorFillTertiary,
+
+    colorBgMask: mergedToken.colorTextTertiary,
+    colorBgSpotlight: mergedToken.colorText,
+
+    // ============== Split ============== //
+    colorBorderBg: mergedToken.colorBgLayout,
+    colorBorder: mergedToken.colorFill,
+    colorBorderSecondary: mergedToken.colorFillSecondary,
+    colorSplit: mergedToken.colorFillSecondary,
+
+    // ============== Text ============== //
+    colorTextPlaceholder: mergedToken.colorTextQuaternary,
+    colorTextDisabled: mergedToken.colorTextQuaternary,
+    colorTextHeading: mergedToken.colorText,
+    colorTextLabel: mergedToken.colorTextSecondary,
    colorHighlight: mergedToken.colorError,

+    colorIcon: mergedToken.colorTextTertiary,
+    colorIconHover: mergedToken.colorText,
+
+    colorErrorOutline: mergedToken.colorErrorBg,
+    colorWarningOutline: mergedToken.colorWarningBg,
+
    // Font
    fontSizeSM,
    fontSize: fontSizes[1],
@ -62,13 +91,16 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    // Checkbox size and expand icon size
    controlInteractiveSize: mergedToken.controlHeight / 2,

-    controlItemBgHover: mergedToken.colorBgItemHover,
+    controlItemBgHover: mergedToken.colorFillTertiary,
    controlItemBgActive: mergedToken.colorPrimaryBg,
    controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
-    controlItemBgActiveDisabled: mergedToken.colorTextDisabled,
+    controlItemBgActiveDisabled: mergedToken.colorTextQuaternary,
+    controlTmpOutline: mergedToken.colorFillQuaternary,
+    controlOutline: mergedToken.colorPrimaryBg,

    controlLineType: mergedToken.lineType,
    controlRadius: mergedToken.radiusBase,
+
    fontWeightStrong: 600,

    opacityLoading: 0.65,
@ -121,8 +153,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    screenXXLMin: screenXXL,
    screenXXLMax: screenXXL - 1,

-    controlTmpOutline: mergedToken.colorBgContainerSecondary,
-
    // FIXME: component box-shadow, should be removed
    boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
    boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`,
--- a/components/tooltip/style/index.tsx
+++ b/components/tooltip/style/index.tsx
@ -135,9 +135,9 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul

      return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
    },
-    ({ zIndexPopupBase, colorBgTooltipTmp }) => ({
+    ({ zIndexPopupBase, colorBgSpotlight }) => ({
      zIndexPopup: zIndexPopupBase + 70,
-      colorBgDefault: colorBgTooltipTmp,
+      colorBgDefault: colorBgSpotlight,
    }),
  );

--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@ -89,7 +89,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
      },

      '&-focused:not(:hover):not(&-active-focused)': {
-        background: token.colorPrimaryOutline,
+        background: token.controlOutline,
      },

      // =================== Virtual List ===================
@ -282,7 +282,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
        },

        [`&${treeCls}-node-selected`]: {
-          backgroundColor: token.colorPrimaryOutline,
+          backgroundColor: token.controlOutline,
        },

        // Icon
--- 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.colorBgContainerSecondary,
+        background: token.colorFillAlter,
        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.colorBgContainerSecondary,
+        backgroundColor: token.colorFillAlter,
        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.colorBgContainerSecondary,
+            backgroundColor: token.colorFillAlter,
          },

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