refactor: token udpate (#36892)

2025-01-18 06:03:38 +08:00 · 2022-08-04 16:16:50 +08:00 · 2022-08-04 16:16:50 +08:00 · ec3444a407
commit ec3444a407
parent 3ffd58b2ae
31 changed files with 90 additions and 78 deletions
--- a/components/back-top/style/index.tsx
+++ b/components/back-top/style/index.tsx
@ -92,14 +92,14 @@ export default genComponentStyleHook<'BackTop'>(
  token => {
    const {
      fontSizeHeading3,
-      colorTextSecondary,
+      colorTextDescription,
      colorTextLightSolid,
      colorText,
      controlHeightLG,
    } = token;

    const backTopToken = mergeToken<BackTopToken>(token, {
-      backTopBackground: colorTextSecondary,
+      backTopBackground: colorTextDescription,
      backTopColor: colorTextLightSolid,
      backTopHoverBackground: colorText,
      backTopFontSize: fontSizeHeading3,
--- a/components/breadcrumb/style/index.tsx
+++ b/components/breadcrumb/style/index.tsx
@ -87,14 +87,14 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
 // ============================== Export ==============================
 export default genComponentStyleHook('Breadcrumb', token => {
  const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
-    breadcrumbBaseColor: token.colorTextSecondary,
+    breadcrumbBaseColor: token.colorTextDescription,
    breadcrumbFontSize: token.fontSizeBase,
    breadcrumbIconFontSize: token.fontSizeBase,
-    breadcrumbLinkColor: token.colorTextSecondary,
+    breadcrumbLinkColor: token.colorTextDescription,
    breadcrumbLinkColorHover: token.colorText,
    breadcrumbLastItemColor: token.colorText,
    breadcrumbSeparatorMargin: token.paddingXS,
-    breadcrumbSeparatorColor: token.colorTextSecondary,
+    breadcrumbSeparatorColor: token.colorTextDescription,
  });

  return [genBreadcrumbStyle(BreadcrumbToken)];
--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@ -118,7 +118,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {

    '& > li': {
      margin: cardActionsLiMargin,
-      color: token.colorTextSecondary,
+      color: token.colorTextDescription,
      textAlign: 'center',

      '> span': {
@ -137,7 +137,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
        [`a:not(${componentCls}-btn), > ${iconCls}`]: {
          display: 'inline-block',
          width: '100%',
-          color: token.colorTextSecondary,
+          color: token.colorTextDescription,
          lineHeight: `${token.fontSize * token.lineHeight}px`,
          transition: `color ${token.motionDurationSlow}`,

@ -187,7 +187,7 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
  },

  '&-description': {
-    color: token.colorTextSecondary,
+    color: token.colorTextDescription,
  },
 });

--- a/components/cascader/style/index.tsx
+++ b/components/cascader/style/index.tsx
@ -123,7 +123,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {

                [iconCls]: {
                  marginInlineStart: token.paddingXXS,
-                  color: token.colorTextSecondary,
+                  color: token.colorTextDescription,
                  fontSize: token.fontSizeIcon,
                },

--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@ -960,7 +960,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
        },

        '&:hover': {
-          color: token.colorTextSecondary,
+          color: token.colorTextDescription,
        },
      },

@ -975,7 +975,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
        cursor: 'default',

        [`${componentCls}-focused &`]: {
-          color: token.colorTextSecondary,
+          color: token.colorTextDescription,
        },

        [`${componentCls}-range-separator &`]: {
--- a/components/dropdown/style/index.tsx
+++ b/components/dropdown/style/index.tsx
@ -267,7 +267,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {

          [`${menuCls}-item-group-title`]: {
            padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
-            color: token.colorTextSecondary,
+            color: token.colorTextDescription,
            transition: `all ${motionDurationSlow}`,
          },

@ -365,7 +365,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {

              [`${componentCls}-menu-submenu-arrow-icon`]: {
                marginInlineEnd: '0 !important',
-                color: token.colorTextSecondary,
+                color: token.colorTextDescription,
                fontSize: fontSizeIcon,
                fontStyle: 'normal',
              },
--- a/components/form/style/index.tsx
+++ b/components/form/style/index.tsx
@ -15,7 +15,7 @@ const resetForm = (token: AliasToken): CSSObject => ({
    width: '100%',
    marginBottom: token.marginLG,
    padding: 0,
-    color: token.colorTextSecondary,
+    color: token.colorTextDescription,
    fontSize: token.fontSizeLG,
    lineHeight: 'inherit',
    border: 0,
@ -191,7 +191,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
          [`${formItemCls}-optional`]: {
            display: 'inline-block',
            marginInlineStart: token.marginXXS,
-            color: token.colorTextSecondary,
+            color: token.colorTextDescription,

            [`${componentCls}-hide-required-mark &`]: {
              display: 'none',
@ -200,7 +200,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {

          // Optional mark
          [`${formItemCls}-tooltip`]: {
-            color: token.colorTextSecondary,
+            color: token.colorTextDescription,
            cursor: 'help',
            writingMode: 'horizontal-tb',
            marginInlineStart: token.marginXXS,
@ -252,7 +252,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
      [formItemCls]: {
        '&-explain, &-extra': {
          clear: 'both',
-          color: token.colorTextSecondary,
+          color: token.colorTextDescription,
          fontSize: token.fontSize,
          lineHeight: token.lineHeight,
          transition: `color ${token.motionDurationMid} ${token.motionEaseOut}`, // sync input color transition
--- a/components/input-number/style/index.tsx
+++ b/components/input-number/style/index.tsx
@ -33,7 +33,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
    controlHeightSM,
    colorError,
    inputPaddingHorizontalSM,
-    colorTextSecondary,
+    colorTextDescription,
    motionDurationFast,
    colorPrimary,
    controlHeight,
@ -196,7 +196,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
        [`${componentCls}-handler`]: {
          height: '50%',
          overflow: 'hidden',
-          color: colorTextSecondary,
+          color: colorTextDescription,
          fontWeight: 'bold',
          lineHeight: 0,
          textAlign: 'center',
@ -222,7 +222,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
          '&-up-inner, &-down-inner': {
            ...resetIcon(),

-            color: colorTextSecondary,
+            color: colorTextDescription,
            transition: `all ${motionDurationFast} linear`,
            userSelect: 'none',
          },
--- a/components/input/style/index.tsx
+++ b/components/input/style/index.tsx
@ -524,7 +524,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
      transition: `color ${token.motionDurationSlow}`,

      '&:hover': {
-        color: token.colorTextSecondary,
+        color: token.colorTextDescription,
      },

      '&:active': {
@ -559,7 +559,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
  const {
    prefixCls,
    inputAffixPadding,
-    colorTextSecondary,
+    colorTextDescription,
    motionDurationSlow,
    colorIcon,
    colorIconHover,
@ -617,7 +617,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
        },

        '&-show-count-suffix': {
-          color: colorTextSecondary,
+          color: colorTextDescription,
        },

        '&-show-count-has-suffix': {
@ -735,7 +735,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
          },

          [`${searchPrefixCls}-button:not(.ant-btn-primary)`]: {
-            color: token.colorTextSecondary,
+            color: token.colorTextDescription,

            '&.ant-btn-loading::before': {
              insetInlineStart: 0,
@ -834,7 +834,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
          position: 'absolute',
          bottom: 0,
          insetInlineEnd: 0,
-          color: token.colorTextSecondary,
+          color: token.colorTextDescription,
          whiteSpace: 'nowrap',
          content: 'attr(data-count)',
          pointerEvents: 'none',
--- a/components/list/style/index.tsx
+++ b/components/list/style/index.tsx
@ -117,7 +117,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
    paddingXS,
    margin,
    colorText,
-    colorTextSecondary,
+    colorTextDescription,
    motionDurationSlow,
    lineWidth,
  } = token;
@ -194,7 +194,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
          },

          [`${componentCls}-item-meta-description`]: {
-            color: colorTextSecondary,
+            color: colorTextDescription,
            fontSize: token.fontSize,
            lineHeight: token.lineHeight,
          },
@ -211,7 +211,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
            position: 'relative',
            display: 'inline-block',
            padding: `0 ${paddingXS}px`,
-            color: colorTextSecondary,
+            color: colorTextDescription,
            fontSize: token.fontSize,
            lineHeight: token.lineHeight,
            textAlign: 'center',
@ -235,7 +235,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {

      [`${componentCls}-empty`]: {
        padding: `${padding}px 0`,
-        color: colorTextSecondary,
+        color: colorTextDescription,
        fontSize: token.fontSizeSM,
        textAlign: 'center',
      },
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@ -45,7 +45,7 @@ const ThemedMenu = forwardRef<MenuRef, MenuProps>(({ theme = 'light', ...rest },
    menu: menuRef.current,
  }));

-  const { colorTextLightSolid, colorTextSecondary, colorPrimary, colorError, colorErrorHover } =
+  const { colorTextLightSolid, colorTextDescription, colorPrimary, colorError, colorErrorHover } =
    token;

  const darkThemeToken = useMemo<Partial<ComponentToken>>(() => {
@ -53,7 +53,7 @@ const ThemedMenu = forwardRef<MenuRef, MenuProps>(({ theme = 'light', ...rest },
      return {
        colorItemText: new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
        colorItemTextHover: colorTextLightSolid,
-        colorGroupTitle: colorTextSecondary,
+        colorGroupTitle: colorTextDescription,
        colorItemTextSelected: colorTextLightSolid,
        colorItemBg: '#001529',
        colorSubItemBg: '#000c17',
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@ -444,7 +444,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        colorTextDisabled,
        colorErrorBg,
        colorText,
-        colorTextSecondary,
+        colorTextDescription,
        colorBgContainer,
        colorFillAlter,
        controlItemBgActive,
@ -458,7 +458,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        radiusItem: 0,
        colorItemText: colorText,
        colorItemTextHover: colorPrimary,
-        colorGroupTitle: colorTextSecondary,
+        colorGroupTitle: colorTextDescription,
        colorItemTextSelected: colorPrimary,
        colorItemBg: colorBgContainer,
        colorSubItemBg: colorFillAlter,
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@ -360,7 +360,7 @@ export default genComponentStyleHook('Modal', token => {
    modalHeaderCloseSize: headerLineHeight * headerFontSize + headerPaddingVertical * 2,
    modalContentBg: token.colorBgElevated,
    modalHeadingColor: token.colorTextHeading,
-    modalCloseColor: token.colorTextSecondary,
+    modalCloseColor: token.colorTextDescription,
    modalFooterBg: 'transparent',
    modalFooterBorderColorSplit: token.colorSplit,
    modalFooterBorderStyle: token.controlLineType,
--- a/components/result/style/index.tsx
+++ b/components/result/style/index.tsx
@ -70,7 +70,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
    },

    [`${componentCls} ${componentCls}-subtitle`]: {
-      color: token.colorTextSecondary,
+      color: token.colorTextDescription,
      fontSize: token.resultSubtitleFontSize,
      lineHeight,
      textAlign: 'center',
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@ -98,7 +98,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {

          // =========== Group ============
          '&-group': {
-            color: token.colorTextSecondary,
+            color: token.colorTextDescription,
            fontSize: token.fontSizeSM,
            cursor: 'default',
          },
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -225,7 +225,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
        },

        '&:hover': {
-          color: token.colorTextSecondary,
+          color: token.colorTextDescription,
        },
      },

--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@ -132,7 +132,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
      [`${componentCls}-mark-text`]: {
        position: 'absolute',
        display: 'inline-block',
-        color: token.colorTextSecondary,
+        color: token.colorTextDescription,
        textAlign: 'center',
        wordBreak: 'keep-all',
        cursor: 'pointer',
--- a/components/spin/style/index.tsx
+++ b/components/spin/style/index.tsx
@ -228,7 +228,7 @@ export default genComponentStyleHook(
  'Spin',
  token => {
    const spinToken = mergeToken<SpinToken>(token, {
-      spinDotDefault: token.colorTextSecondary,
+      spinDotDefault: token.colorTextDescription,
      spinDotSize: token.controlHeightLG / 2,
      spinDotSizeSM: token.controlHeightLG * 0.35,
      spinDotSizeLG: token.controlHeight,
--- a/components/statistic/style/index.tsx
+++ b/components/statistic/style/index.tsx
@ -14,7 +14,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
    componentCls,
    marginXXS,
    padding,
-    colorTextSecondary,
+    colorTextDescription,
    statisticTitleFontSize,
    colorTextHeading,
    statisticContentFontSize,
@ -26,7 +26,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
      ...resetComponent(token),
      [`${componentCls}-title`]: {
        marginBottom: marginXXS,
-        color: colorTextSecondary,
+        color: colorTextDescription,
        fontSize: statisticTitleFontSize,
      },

--- a/components/steps/style/index.tsx
+++ b/components/steps/style/index.tsx
@ -176,12 +176,12 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
    [`${stepsItemCls}-subtitle`]: {
      display: 'inline',
      marginInlineStart: token.marginXS,
-      color: token.colorTextSecondary,
+      color: token.colorTextDescription,
      fontWeight: 'normal',
      fontSize: token.fontSizeBase,
    },
    [`${stepsItemCls}-description`]: {
-      color: token.colorTextSecondary,
+      color: token.colorTextDescription,
      fontSize: token.fontSizeBase,
    },
    ...genStepsItemStatusStyle(StepItemStatusEnum.wait, token),
@ -332,12 +332,12 @@ export default genComponentStyleHook(
      processDescriptionColor: token.colorText,
      processIconTextColor: token.colorTextLightSolid,
      waitIconColor: token.colorTextDisabled,
-      waitTitleColor: token.colorTextSecondary,
-      waitDescriptionColor: token.colorTextSecondary,
+      waitTitleColor: token.colorTextDescription,
+      waitDescriptionColor: token.colorTextDescription,
      waitTailColor: processTailColor,
      finishIconColor: processIconColor,
      finishTitleColor: token.colorText,
-      finishDescriptionColor: token.colorTextSecondary,
+      finishDescriptionColor: token.colorTextDescription,
      finishTailColor: token.colorPrimary,
      errorIconColor: token.colorError,
      errorTitleColor: token.colorError,
--- a/components/steps/style/small.ts
+++ b/components/steps/style/small.ts
@ -9,7 +9,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
    // stepsSmallIconMargin,
    fontSizeSM,
    fontSizeBase,
-    colorTextSecondary,
+    colorTextDescription,
  } = token;

  return {
@ -43,7 +43,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
        },
      },
      [`${componentCls}-item-description`]: {
-        color: colorTextSecondary,
+        color: colorTextDescription,
        fontSize: fontSizeBase,
      },
      [`${componentCls}-item-tail`]: {
--- a/components/table/style/filter.tsx
+++ b/components/table/style/filter.tsx
@ -21,7 +21,7 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
    tablePaddingHorizontal,
    radiusBase,
    motionDurationSlow,
-    colorTextSecondary,
+    colorTextDescription,
    colorPrimary,
    colorPrimaryActive,
    tableHeaderFilterActiveBg,
@ -58,7 +58,7 @@ const genFilterStyle: GenerateStyle<TableToken> = token => {
          transition: `all ${motionDurationSlow}`,

          '&:hover': {
-            color: colorTextSecondary,
+            color: colorTextDescription,
            background: tableHeaderFilterActiveBg,
          },

--- a/components/tabs/style/index.tsx
+++ b/components/tabs/style/index.tsx
@ -198,7 +198,7 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
              _skip_check_: true,
              value: token.marginSM,
            },
-            color: token.colorTextSecondary,
+            color: token.colorTextDescription,
            fontSize: token.fontSizeSM,
            background: 'transparent',
            border: 0,
@ -533,7 +533,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
          _skip_check_: true,
          value: token.marginXS,
        },
-        color: token.colorTextSecondary,
+        color: token.colorTextDescription,
        fontSize: token.fontSizeSM,
        background: 'transparent',
        border: 'none',
--- a/components/tag/style/index.tsx
+++ b/components/tag/style/index.tsx
@ -88,7 +88,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {

      [`${token.componentCls}-close-icon`]: {
        marginInlineStart: iconMarginInline,
-        color: token.colorTextSecondary,
+        color: token.colorTextDescription,
        fontSize: token.tagIconSize,
        cursor: 'pointer',
        transition: `all ${token.motionDurationSlow}`,
--- a/components/theme/interface.ts
+++ b/components/theme/interface.ts
@ -241,8 +241,9 @@ export interface ColorMapToken extends BgMapToken, TextMapToken {
  colorPrimaryHover: string; // 5
  colorPrimary: string; // 6
  colorPrimaryActive: string; // 7
-  colorPrimaryText: string; // 8
-  colorPrimaryTextHover: string; // 9
+  colorPrimaryTextHover: string; // 8
+  colorPrimaryText: string; // 9
+  colorPrimaryTextActive: string; // 10

  // Success
  colorSuccessBg: string; // 1
@ -252,8 +253,9 @@ export interface ColorMapToken extends BgMapToken, TextMapToken {
  colorSuccessHover: string; // 5
  colorSuccess: string; // 6
  colorSuccessActive: string; // 7
-  colorSuccessText: string; // 8
-  colorSuccessTextHover: string; // 9
+  colorSuccessTextHover: string; // 8
+  colorSuccessText: string; // 9
+  colorSuccessTextActive: string; // 10

  // Warning
  colorWarningBg: string; // 1
@ -263,8 +265,9 @@ export interface ColorMapToken extends BgMapToken, TextMapToken {
  colorWarningHover: string; // 5
  colorWarning: string; // 6
  colorWarningActive: string; // 7
-  colorWarningText: string; // 8
-  colorWarningTextHover: string; // 9
+  colorWarningTextHover: string; // 8
+  colorWarningText: string; // 9
+  colorWarningTextActive: string; // 10

  // Error
  colorErrorBg: string; // 1
@ -274,8 +277,9 @@ export interface ColorMapToken extends BgMapToken, TextMapToken {
  colorErrorHover: string; // 5
  colorError: string; // 6
  colorErrorActive: string; // 7
-  colorErrorText: string; // 8
-  colorErrorTextHover: string; // 9
+  colorErrorTextHover: string; // 8
+  colorErrorText: string; // 9
+  colorErrorTextActive: string; // 10

  // Info
  colorInfoBg: string; // 1
@ -285,8 +289,9 @@ export interface ColorMapToken extends BgMapToken, TextMapToken {
  colorInfoHover: string; // 5
  colorInfo: string; // 6
  colorInfoActive: string; // 7
-  colorInfoText: string; // 8
-  colorInfoTextHover: string; // 9
+  colorInfoTextHover: string; // 8
+  colorInfoText: string; // 9
+  colorInfoTextActive: string; // 10

  colorBgMask: string;
  colorBgSpotlight: string;
@ -356,6 +361,7 @@ export interface AliasToken extends MapToken {
  colorTextDisabled: string;
  colorTextHeading: string;
  colorTextLabel: string;
+  colorTextDescription: string;

  /** Weak action. Such as `allowClear` or Alert close button */
  colorIcon: string;
--- a/components/theme/themes/shared/genColorMapToken.ts
+++ b/components/theme/themes/shared/genColorMapToken.ts
@ -45,8 +45,9 @@ export default function genColorMapToken(
    colorPrimaryHover: primaryColors[5],
    colorPrimary: primaryColors[6],
    colorPrimaryActive: primaryColors[7],
-    colorPrimaryText: primaryColors[6],
    colorPrimaryTextHover: primaryColors[5],
+    colorPrimaryText: primaryColors[6],
+    colorPrimaryTextActive: primaryColors[7],

    colorSuccessBg: successColors[1],
    colorSuccessBgHover: successColors[2],
@ -55,8 +56,9 @@ export default function genColorMapToken(
    colorSuccessHover: successColors[5],
    colorSuccess: successColors[6],
    colorSuccessActive: successColors[7],
-    colorSuccessText: successColors[8],
-    colorSuccessTextHover: successColors[9],
+    colorSuccessTextHover: successColors[5],
+    colorSuccessText: successColors[6],
+    colorSuccessTextActive: successColors[7],

    colorErrorBg: errorColors[1],
    colorErrorBgHover: errorColors[2],
@ -65,8 +67,9 @@ export default function genColorMapToken(
    colorErrorHover: errorColors[5],
    colorError: errorColors[6],
    colorErrorActive: errorColors[7],
-    colorErrorText: errorColors[8],
-    colorErrorTextHover: errorColors[9],
+    colorErrorTextHover: errorColors[5],
+    colorErrorText: errorColors[6],
+    colorErrorTextActive: errorColors[7],

    colorWarningBg: warningColors[1],
    colorWarningBgHover: warningColors[2],
@ -75,8 +78,9 @@ export default function genColorMapToken(
    colorWarningHover: warningColors[5],
    colorWarning: warningColors[6],
    colorWarningActive: warningColors[7],
-    colorWarningText: warningColors[8],
-    colorWarningTextHover: warningColors[9],
+    colorWarningTextHover: warningColors[5],
+    colorWarningText: warningColors[6],
+    colorWarningTextActive: warningColors[7],

    colorInfoBg: infoColors[1],
    colorInfoBgHover: infoColors[2],
@ -85,8 +89,9 @@ export default function genColorMapToken(
    colorInfoHover: infoColors[5],
    colorInfo: infoColors[6],
    colorInfoActive: infoColors[7],
-    colorInfoText: infoColors[8],
-    colorInfoTextHover: infoColors[9],
+    colorInfoTextHover: infoColors[5],
+    colorInfoText: infoColors[6],
+    colorInfoTextActive: infoColors[7],

    colorBgMask: textColors.colorTextTertiary,
    colorBgSpotlight: new TinyColor('#000').setAlpha(0.85).toRgbString(),
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@ -42,13 +42,14 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    colorBgContainerDisabled: mergedToken.colorFillTertiary,

    // ============== Split ============== //
-    colorBorderBg: mergedToken.colorBgLayout,
+    colorBorderBg: mergedToken.colorBgContainer,

    // ============== Text ============== //
    colorTextPlaceholder: mergedToken.colorTextQuaternary,
    colorTextDisabled: mergedToken.colorTextQuaternary,
    colorTextHeading: mergedToken.colorText,
    colorTextLabel: mergedToken.colorTextSecondary,
+    colorTextDescription: mergedToken.colorTextSecondary,
    colorHighlight: mergedToken.colorError,

    colorIcon: mergedToken.colorTextTertiary,
--- a/components/typography/style/index.tsx
+++ b/components/typography/style/index.tsx
@ -26,7 +26,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
      color: token.colorText,
      overflowWrap: 'break-word',
      '&&-secondary': {
-        color: token.colorTextSecondary,
+        color: token.colorTextDescription,
      },

      '&&-success': {
--- a/components/typography/style/mixins.tsx
+++ b/components/typography/style/mixins.tsx
@ -202,7 +202,7 @@ export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = toke
        position: 'absolute',
        insetInlineEnd: token.marginXS + 2,
        insetBlockEnd: token.marginXS,
-        color: token.colorTextSecondary,
+        color: token.colorTextDescription,
        // default style
        fontWeight: 'normal',
        fontSize: token.fontSize,
--- a/components/upload/style/dragger.tsx
+++ b/components/upload/style/dragger.tsx
@ -53,7 +53,7 @@ const genDraggerStyle: GenerateStyle<UploadToken> = token => {
        },

        [`p${componentCls}-hint`]: {
-          color: token.colorTextSecondary,
+          color: token.colorTextDescription,
          fontSize: token.fontSizeBase,
        },

--- a/components/upload/style/list.tsx
+++ b/components/upload/style/list.tsx
@ -61,7 +61,7 @@ const genListStyle: GenerateStyle<UploadToken> = token => {
            },

            [iconCls]: {
-              color: token.colorTextSecondary,
+              color: token.colorTextDescription,
              transition: `all ${token.motionDurationSlow}`,
            },

@ -71,7 +71,7 @@ const genListStyle: GenerateStyle<UploadToken> = token => {
          },

          [`${componentCls}-icon ${iconCls}`]: {
-            color: token.colorTextSecondary,
+            color: token.colorTextDescription,
            fontSize: fontSizeBase,
          },