refactor: token update (#36637)

* refactor: token update

* refactor: token

* chore: error color

* fix: menu danger

components/alert/style/index.tsx

@@ -179,8 +179,8 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
     motionDurationSlow: duration,
     marginXS,
     fontSizeIcon,
-    colorAction,
+    colorIcon,
-    colorActionHover,
+    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,
         },
       },
     },

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,
+    colorBgTextHover: colorTextQuaternary,
-    colorBgTextActive: buttonColorBgTextActive,
+    colorBgTextActive: colorTextTertiary,
     colorOutlineDefault: controlTmpOutline,
   });
 

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`,

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,
   });

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,
             }),
           ),
         },

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`;

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',
                   },
                 },

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

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

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,
+    colorIcon,
-    colorActionHover,
+    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,
         },
       },
 

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,
+        themeColorDangerBgActive: colorErrorBg,
-        themeColorDangerBgSelect: colorErrorOutline,
+        themeColorDangerBgSelect: colorErrorBg,
       });
 
       const menuDarkToken = mergeToken<MenuThemeToken>(menuToken, {

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 [

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,
           },
         },
 

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]': {

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',

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;

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)];
 });

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`]: {

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 {
+export interface ComponentToken {}
-  // FIXME: need to be removed
-  bgColor: string;
-  bgColorHover: string;
-  bgColorSelected: string;
-}
 
 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,10 +166,16 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genComponentStyleHook('Segmented', token => {
-  'Segmented',
+  const {
-  token => {
+    lineWidthBold,
-    const { lineWidthBold, controlLineWidth, colorTextLabel, colorText } = token;
+    controlLineWidth,
+    colorTextLabel,
+    colorText,
+    colorFillSecondary,
+    colorFill,
+    colorBgContainer,
+  } = token;
 
   const segmentedToken = mergeToken<SegmentedToken>(token, {
     segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
@@ -179,12 +183,9 @@ export default genComponentStyleHook(
     segmentedContainerPadding: lineWidthBold,
     labelColor: colorTextLabel,
     labelColorHover: colorText,
+    bgColor: colorFillSecondary,
+    bgColorHover: colorFill,
+    bgColorSelected: colorBgContainer,
   });
   return [genSegmentedStyle(segmentedToken)];
-  },
+});
-  ({ segmentedBgColor, segmentedBgColorActive, segmentedBgColorHover }) => ({
-    bgColor: segmentedBgColor,
-    bgColorHover: segmentedBgColorHover,
-    bgColorSelected: segmentedBgColorActive,
-  }),
-);

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(

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,
           },
         },
       },

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,
     };
   },

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`]: {

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': {

components/table/style/index.tsx

@@ -233,19 +233,19 @@ export default genComponentStyleHook('Table', token => {
     paddingXS,
     paddingSM,
     controlHeight,
-    colorBgContainerSecondary,
+    colorFillAlter,
-    colorAction,
+    colorIcon,
-    colorActionHover,
+    colorIconHover,
     opacityLoading,
     colorBgContainer,
-    colorBgContent,
+    colorFillSecondary,
     radiusBase,
-    colorBgFillTmp,
+    colorFillContent,
     controlInteractiveSize: checkboxSize,
   } = token;
 
-  const baseColorAction = new TinyColor(colorAction);
+  const baseColorAction = new TinyColor(colorIcon);
-  const baseColorActionHover = new TinyColor(colorActionHover);
+  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,
+    tableHeaderSortBg: colorFillSecondary,
-    tableHeaderSortHoverBg: colorBgFillTmp,
+    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,
+    tableBodySortBg: colorFillAlter,
-    tableFixedHeaderSortActiveBg: colorBgContent,
+    tableFixedHeaderSortActiveBg: colorFillSecondary,
-    tableHeaderFilterActiveBg: colorBgFillTmp,
+    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,

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,

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, {

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;
+  colorPrimaryBg: string; // 1
-  colorPrimaryHover: string;
+  colorPrimaryBgHover: string; // 2
-  colorPrimaryBg: string;
+  colorPrimaryBorder: string; // 3
-  colorPrimaryBgHover: string;
+  colorPrimaryBorderHover: string; // 4
-  colorPrimaryActive: string;
+  colorPrimaryHover: string; // 5
-  colorPrimaryBorder: string; // primary[2]
+  colorPrimary: string; // 6
-  colorPrimaryBorderHover: string;
+  colorPrimaryActive: string; // 7
-  colorPrimaryOutline: string;
+  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;

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 GenerateTextAlphaPalettes = (textBaseColor: string) => TextMapToken;
-export type GenerateBgPalettes = (bgBaseColor: string) => BgPalettes;
+export type GenerateBgPalettes = (bgBaseColor: string, textBaseColor: string) => BgMapToken;

components/theme/themes/dark/palettes.ts

@@ -1,19 +1,18 @@
 import { generate } from '@ant-design/colors';
 import type {
-  BgPalettes,
+  GenerateBgPalettes,
-  ErrorPalettes,
+  GenerateErrorPalettes,
-  InfoPalettes,
+  GenerateInfoPalettes,
-  PrimaryPalettes,
+  GeneratePrimaryPalettes,
-  SuccessPalettes,
+  GenerateSuccessPalettes,
-  TextAlphaPalettes,
+  GenerateTextAlphaPalettes,
-  WarningPalettes,
+  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 function generateTextAlphaPalettes(textBaseColor: string): TextAlphaPalettes {
+export const generateBgPalettes: GenerateBgPalettes = (
-  return {
+  bgBaseColor: string,
-    85: getAlphaColor(textBaseColor, 0.85),
+  textBaseColor: string,
-    'light-75': getAlphaColor(textBaseColor, 0.75),
+) => ({
-    65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
+  colorFill: getAlphaColor(textBaseColor, 18),
-    45: getAlphaColor(textBaseColor, 0.45),
+  colorFillSecondary: getAlphaColor(textBaseColor, 12),
-    30: getAlphaColor(textBaseColor, 0.3),
+  colorFillTertiary: getAlphaColor(textBaseColor, 8),
-    25: getAlphaColor(textBaseColor, 0.25),
+  colorFillQuaternary: getAlphaColor(textBaseColor, 4),
-    // 从 12 往下基本上就是偏背景和装饰性元素了
+
-    12: getAlphaColor(textBaseColor, 0.12),
+  colorBgElevated: getSolidColor(bgBaseColor, 12),
-    8: getAlphaColor(textBaseColor, 0.08),
+  colorBgContainer: getSolidColor(bgBaseColor, 8),
-    4: getAlphaColor(textBaseColor, 0.04),
+  colorBgLayout: getSolidColor(bgBaseColor, 0),
-    3: getAlphaColor(textBaseColor, 0.03),
+});
-  };
+
-}
+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),
+});

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) => ({
+export const generateBgPalettes: GenerateBgPalettes = (
-  26: getSolidColor(bgBaseColor, 15),
+  bgBaseColor: string,
-  'light-2': getSolidColor(bgBaseColor, 2),
+  textBaseColor: string,
-  'light-10': getSolidColor(bgBaseColor, 10),
+) => ({
-  'light-12': getSolidColor(bgBaseColor, 12),
+  colorFill: getAlphaColor(textBaseColor, 0.06),
-  19: getSolidColor(bgBaseColor, 6),
+  colorFillSecondary: getAlphaColor(textBaseColor, 0.04),
-  15: getSolidColor(bgBaseColor, 4),
+  colorFillTertiary: getAlphaColor(textBaseColor, 0.03),
-  12: getSolidColor(bgBaseColor, 0),
+  colorFillQuaternary: getAlphaColor(textBaseColor, 0.02),
-  8: getSolidColor(bgBaseColor, 0),
+
-  0: getSolidColor(bgBaseColor, 4),
+  colorBgLayout: getSolidColor(bgBaseColor, 4),
-  base: getSolidColor(bgBaseColor, 0),
+  colorBgContainer: getSolidColor(bgBaseColor, 0),
+  colorBgElevated: getSolidColor(bgBaseColor, 0),
 });
 
 export const generateTextAlphaPalettes: GenerateTextAlphaPalettes = (textBaseColor: string) => ({
-  85: getAlphaColor(textBaseColor, 0.85),
+  colorText: getAlphaColor(textBaseColor, 0.85),
-  'light-75': getAlphaColor(textBaseColor, 0.75), // 目前只有 Popover 用了
+  colorTextSecondary: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
-  65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
+  colorTextTertiary: getAlphaColor(textBaseColor, 0.45),
-  45: getAlphaColor(textBaseColor, 0.45),
+  colorTextQuaternary: getAlphaColor(textBaseColor, 0.25),
-  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),
 });

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,
+    ...bgColors,
-    colorPrimaryHover: primaryColors['5'],
+    ...textColors,
-    colorPrimaryBg: primaryColors['1'],
-    colorPrimaryBgHover: primaryColors['0'],
-    colorPrimaryActive: primaryColors['7'],
-    colorPrimaryBorder: primaryColors['3'],
-    colorPrimaryBorderHover: primaryColors['4'],
-    colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
 
-    colorSuccess,
+    colorPrimaryBg: primaryColors[1],
-    colorSuccessBg: successColors['1'],
+    colorPrimaryBgHover: primaryColors[2],
-    colorSuccessBorder: successColors['3'],
+    colorPrimaryBorder: primaryColors[3],
+    colorPrimaryBorderHover: primaryColors[4],
+    colorPrimaryHover: primaryColors[5],
+    colorPrimary: primaryColors[6],
+    colorPrimaryActive: primaryColors[7],
+    colorPrimaryText: primaryColors[8],
+    colorPrimaryTextHover: primaryColors[9],
 
-    colorError,
+    colorSuccessBg: successColors[1],
-    colorErrorBg: errorColors['1'],
+    colorSuccessBorder: successColors[3],
-    colorErrorBorder: errorColors['3'],
+    colorSuccess: successColors[6],
-    colorErrorHover: errorColors['5'],
-    colorErrorActive: errorColors['7'],
-    colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
 
-    colorWarning,
+    colorErrorBg: errorColors[1],
-    colorWarningBg: warningColors['1'],
+    colorErrorBorder: errorColors[3],
-    colorWarningBorder: warningColors['3'],
+    colorErrorHover: errorColors[5],
-    colorWarningHover: warningColors['5'],
+    colorError: errorColors[6],
-    colorWarningActive: warningColors['7'],
+    colorErrorActive: errorColors[7],
-    colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
 
-    colorInfo,
+    colorWarningBg: warningColors[1],
-    colorInfoBg: infoColors['1'],
+    colorWarningBorder: warningColors[3],
-    colorInfoBorder: infoColors['3'],
+    colorWarningHover: warningColors[5],
+    colorWarning: warningColors[6],
+    colorWarningActive: warningColors[7],
 
-    colorLink: primaryColors['6'],
+    colorInfoBg: infoColors[1],
-    colorLinkHover: primaryColors['5'],
+    colorInfoBorder: infoColors[3],
-    colorLinkActive: primaryColors['7'],
+    colorInfo: infoColors[6],
-
-    // ============== 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'],
   };
 }

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)`,

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,
     }),
   );
 

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

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',

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`]: {