feat: update token (#36095)

* feat: update token * feat: update token * fix: override ts definition * fix: rename token
2025-01-18 06:03:38 +08:00 · 2022-06-17 18:47:47 +08:00 · 2022-06-17 18:47:47 +08:00 · 5639e1a5ba
commit 5639e1a5ba
parent 711601e93e
34 changed files with 357 additions and 300 deletions
--- a/components/_util/theme/index.tsx
+++ b/components/_util/theme/index.tsx
@ -1,5 +1,6 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
+import type { DeepPartial } from 'antd/es/_util/type';
 import React from 'react';
 import version from '../../version';
 import type {
@ -51,7 +52,7 @@ const defaultTheme = new Theme(defaultDerivative);
 export const DesignTokenContext = React.createContext<{
  token: Partial<SeedToken>;
  theme?: Theme<SeedToken, DerivativeToken>;
-  override?: OverrideToken;
+  override?: DeepPartial<OverrideToken>;
  hashed?: string | boolean;
 }>({
  token: defaultSeedToken,
--- a/components/_util/theme/interface.ts
+++ b/components/_util/theme/interface.ts
@ -25,6 +25,7 @@ import type { ComponentToken as PopconfirmComponentToken } from '../../popconfir
 import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
 import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
 import type { ComponentToken as RadioComponentToken } from '../../radio/style';
+import type { ComponentToken as RateComponentToken } from '../../rate/style';
 import type { ComponentToken as ResultComponentToken } from '../../result/style';
 import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
 import type { ComponentToken as SelectComponentToken } from '../../select/style';
@ -33,6 +34,7 @@ import type { ComponentToken as SliderComponentToken } from '../../slider/style'
 import type { ComponentToken as SpaceComponentToken } from '../../space/style';
 import type { ComponentToken as SpinComponentToken } from '../../spin/style';
 import type { ComponentToken as StepsComponentToken } from '../../steps/style';
+import type { ComponentToken as TableComponentToken } from '../../table/style';
 import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
 import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
 import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
@ -102,7 +104,7 @@ export interface OverrideToken {
  Pagination?: {};
  Popover?: PopoverComponentToken;
  Popconfirm?: PopconfirmComponentToken;
-  Rate?: {};
+  Rate?: RateComponentToken;
  Radio?: RadioComponentToken;
  Result?: ResultComponentToken;
  Segmented?: SegmentedComponentToken;
@ -127,7 +129,7 @@ export interface OverrideToken {
  Message?: MessageComponentToken;
  Upload?: UploadComponentToken;
  Tooltip?: TooltipComponentToken;
-  Table?: {};
+  Table?: TableComponentToken;
  Space?: SpaceComponentToken;
  Progress?: ProgressComponentToken;
 }
@ -192,7 +194,7 @@ export interface SeedToken extends PresetColorType {

  // Image
  /** Define default Image opacity. Useful when in dark-like theme */
-  imgOpacity: number;
+  opacityImage: number;
 }

 // ======================================================================
@ -208,6 +210,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
  colorPrimaryActive: string;
  colorPrimaryOutline: string;
  colorPrimarySecondary: string; // primary[2]
+  colorPrimaryBorderHover: string;

  colorSuccessSecondary: string;
  colorBgSuccess: string; // success[0]
@ -336,13 +339,14 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
  colorTextSecondary: string;
  colorTextDisabled: string;
  /** Placeholder text color */
-  colorPlaceholder: string;
+  colorTextPlaceholder: string;
  colorTextHeading: 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;
+  colorActionTmp: string;

  colorLink: string;
  colorLinkHover: string;
@ -353,10 +357,11 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
  colorBgComponent: string;
  colorBgComponentSecondary: string;
  colorBgComponentDisabled: string;
-  colorBgContainerWeak: string;
+  colorBgElevated: string;
+  colorBgComponentTmp: string;

  // =============== Legacy: should be remove ===============
-  colorLoadingOpacity: number;
+  opacityLoading: number;

  padding: number;
  margin: number;
@ -404,6 +409,6 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {

  motionEaseOut: string;

-  colorPopupBg: string;
+  controlMaskBg: string;
  colorBorderSecondary: string;
 }
--- a/components/_util/theme/themes/default.ts
+++ b/components/_util/theme/themes/default.ts
@ -2,7 +2,7 @@

 import { generate } from '@ant-design/colors';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { PresetColorType, SeedToken, DerivativeToken, ColorPalettes } from '../interface';
+import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../interface';
 import { getFontSizes } from './shared';

 const defaultPresetColors: PresetColorType = {
@ -115,6 +115,7 @@ export function derivative(token: SeedToken): DerivativeToken {
    colorPrimaryHover: primaryColors[4],
    colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
    colorPrimarySecondary: primaryColors[2],
+    colorPrimaryBorderHover: primaryColors[3],

    colorSuccessSecondary: successColors[2],
    colorBgSuccess: successColors[0],
@ -204,7 +205,7 @@ const seedToken: SeedToken = {
  zIndexPopupBase: 1000,

  // Image
-  imgOpacity: 1,
+  opacityImage: 1,
 };

 export default seedToken;
--- a/components/_util/theme/util/alias.ts
+++ b/components/_util/theme/util/alias.ts
@ -42,7 +42,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    // Colors
    colorTextSecondary: mergedToken.colorTextBelow,
    colorTextDisabled: mergedToken.colorTextBelow2,
-    colorPlaceholder: mergedToken.colorTextBelow2,
+    colorTextPlaceholder: mergedToken.colorTextBelow2,
    colorTextHeading: mergedToken.colorText,

    colorBgContainer: mergedToken.colorBgBelow2,
@ -50,6 +50,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    colorBgComponent: mergedToken.colorBg,
    colorBgComponentSecondary: mergedToken.colorBg2,
    colorBgComponentDisabled: mergedToken.colorBgBelow2,
+    colorBgElevated: mergedToken.colorBg,
+    colorBgComponentTmp: mergedToken.colorBgBelow2,

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

    colorAction: mergedToken.colorTextBelow,
    colorActionHover: mergedToken.colorText,
+    colorActionTmp: mergedToken.colorTextBelow2,

    // Font
    fontSizeSM,
@ -97,7 +100,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    controlItemBgActiveHover: new TinyColor(primaryColors[0]).darken(2).toRgbString(),
    controlItemBgActiveDisabled: new TinyColor('#000').tint(90).toRgbString(),
    fontWeightStrong: 600,
-    colorBgContainerWeak: new TinyColor('#000').setAlpha(0.75).toRgbString(),

    // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
    // FIXME: Handle this when derivative is ready
@ -105,7 +107,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    // warningColors,
    // errorColors,

-    colorLoadingOpacity: 0.65,
+    opacityLoading: 0.65,

    colorSuccessSecondary: successColors[2],
    colorWarningSecondary: warningColors[2],
@ -162,7 +164,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken

    motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',

-    colorPopupBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+    controlMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
    colorBorderSecondary: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),

    // Override AliasToken
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@ -11,3 +11,9 @@ export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer

 /** https://github.com/Microsoft/TypeScript/issues/29729 */
 export type LiteralUnion<T extends U, U> = T | (U & {});
+
+export type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
--- a/components/anchor/style/index.tsx
+++ b/components/anchor/style/index.tsx
@ -45,7 +45,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
            width: lineWidthBold,
            height: '100%',
            margin: '0 auto',
-            backgroundColor: token.colorBorderSecondary,
+            backgroundColor: token.colorSplit,
            content: '" "',
          },
        },
--- a/components/avatar/style/index.tsx
+++ b/components/avatar/style/index.tsx
@ -1,9 +1,13 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle, FullToken } from '../../_util/theme';
-import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';

-export interface ComponentToken {}
+export interface ComponentToken {
+  // FIXME: should be removed
+  groupBorderColor: string;
+  bgColor: string;
+}

 type AvatarToken = FullToken<'Avatar'> & {
  avatarBg: string;
@ -15,7 +19,6 @@ type AvatarToken = FullToken<'Avatar'> & {
  avatarFontSizeLG: number;
  avatarFontSizeSM: number;
  avatarBorderRadius: number;
-  avatarGroupBorderColor: string;
  avatarGroupOverlapping: number;
  avatarGroupSpace: number;
 };
@ -108,14 +111,14 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
 };

 const genGroupStyle: GenerateStyle<AvatarToken> = token => {
-  const { componentCls, avatarGroupBorderColor, avatarGroupOverlapping, avatarGroupSpace } = token;
+  const { componentCls, groupBorderColor, avatarGroupOverlapping, avatarGroupSpace } = token;

  return {
    [`${componentCls}-group`]: {
      display: 'inline-flex',

      [`${componentCls}`]: {
-        borderColor: avatarGroupBorderColor,
+        borderColor: groupBorderColor,

        [`&:not(:first-child)`]: {
          marginInlineStart: -avatarGroupOverlapping,
@ -131,40 +134,45 @@ const genGroupStyle: GenerateStyle<AvatarToken> = token => {
  };
 };

-export default genComponentStyleHook('Avatar', token => {
-  const {
-    colorPlaceholder,
-    colorTextLightSolid,
-    colorBg,
+export default genComponentStyleHook(
+  'Avatar',
+  token => {
+    const {
+      colorTextLightSolid,

-    controlHeight,
-    controlHeightLG,
-    controlHeightSM,
+      controlHeight,
+      controlHeightLG,
+      controlHeightSM,

-    fontSize,
-    fontSizeLG,
-    fontSizeXL,
-    fontSizeHeading3,
+      fontSize,
+      fontSizeLG,
+      fontSizeXL,
+      fontSizeHeading3,

-    marginXS,
-  } = token;
+      marginXS,
+      bgColor,
+    } = token;

-  const avatarToken = mergeToken<AvatarToken>(token, {
-    avatarBg: colorPlaceholder,
-    avatarColor: colorTextLightSolid,
+    const avatarToken = mergeToken<AvatarToken>(token, {
+      avatarBg: bgColor,
+      avatarColor: colorTextLightSolid,

-    avatarSizeBase: controlHeight,
-    avatarSizeLG: controlHeightLG,
-    avatarSizeSM: controlHeightSM,
+      avatarSizeBase: controlHeight,
+      avatarSizeLG: controlHeightLG,
+      avatarSizeSM: controlHeightSM,

-    avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
-    avatarFontSizeLG: fontSizeHeading3,
-    avatarFontSizeSM: fontSize,
-    avatarBorderRadius: token.radiusBase,
-    avatarGroupBorderColor: colorBg,
-    avatarGroupOverlapping: marginXS,
-    avatarGroupSpace: marginXS,
-  });
+      avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
+      avatarFontSizeLG: fontSizeHeading3,
+      avatarFontSizeSM: fontSize,
+      avatarBorderRadius: token.radiusBase,
+      avatarGroupOverlapping: marginXS,
+      avatarGroupSpace: marginXS,
+    });

-  return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
-});
+    return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
+  },
+  token => ({
+    groupBorderColor: '#fff',
+    bgColor: token.colorTextPlaceholder,
+  }),
+);
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@ -1,8 +1,8 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { GenerateStyle, PresetColorType, FullToken } from '../../_util/theme';
-import { resetComponent, PresetColors, genComponentStyleHook, mergeToken } from '../../_util/theme';
+import type { FullToken, GenerateStyle, PresetColorType } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, PresetColors, resetComponent } from '../../_util/theme';

 interface BadgeToken extends FullToken<'Badge'> {
  badgeFontHeight: number;
@ -195,7 +195,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
          },
        },
        [`${componentCls}-status-default`]: {
-          backgroundColor: token.colorPlaceholder,
+          backgroundColor: token.colorTextPlaceholder,
        },

        [`${componentCls}-status-error`]: {
--- a/components/button/style/index.tsx
+++ b/components/button/style/index.tsx
@ -1,14 +1,16 @@
 // deps-lint-skip-all
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { mergeToken, genComponentStyleHook } from '../../_util/theme';
-import type { GenerateStyle, FullToken } from '../../_util/theme';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken } from '../../_util/theme';
 import genGroupStyle from './group';

 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
  colorBgTextHover: string;
  colorBgTextActive: string;
+  // FIXME: should be removed
+  colorOutlineDefault: string;
 }

 export interface ButtonToken extends FullToken<'Button'> {}
@ -87,6 +89,10 @@ const genGhostButtonStyle = (
    borderColor: borderColor || undefined,
    boxShadow: 'none',

+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+
    '&:disabled': {
      cursor: 'not-allowed',
      color: textColorDisabled || undefined,
@ -326,7 +332,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS

        // Loading
        [`&${componentCls}-loading`]: {
-          opacity: token.colorLoadingOpacity,
+          opacity: token.opacityLoading,
          cursor: 'default',
        },

@ -401,6 +407,7 @@ export default genComponentStyleHook(
        .clone()
        .setAlpha(textColor.getAlpha() * 0.03)
        .toRgbString(),
+      colorOutlineDefault: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
    };
  },
 );
--- a/components/cascader/style/index.tsx
+++ b/components/cascader/style/index.tsx
@ -1,16 +1,7 @@
-// import '../../style/index.less';
-// import './index.less';
-
-// // style dependencies
-// import '../../empty/style';
-// import '../../select/style';
-
-// // deps-lint-skip: form
-
 // deps-lint-skip-all
-import { genComponentStyleHook } from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
-import type { GenerateStyle, FullToken } from '../../_util/theme';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook } from '../../_util/theme';

 export interface ComponentToken {
  controlWidth: number;
--- a/components/config-provider/context.tsx
+++ b/components/config-provider/context.tsx
@ -1,8 +1,9 @@
+import type { DeepPartial } from 'antd/es/_util/type';
 import * as React from 'react';
-import type { SeedToken } from '../_util/theme';
-import type { OverrideToken } from '../_util/theme/interface';
 import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale-provider';
+import type { SeedToken } from '../_util/theme';
+import type { OverrideToken } from '../_util/theme/interface';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import type { SizeType } from './SizeContext';

@ -25,7 +26,7 @@ export type DirectionType = 'ltr' | 'rtl' | undefined;

 export interface ThemeConfig {
  token?: Partial<SeedToken>;
-  override?: OverrideToken;
+  override?: DeepPartial<OverrideToken>;
  hashed?: boolean;
 }

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

        '&-placeholder': {
          '> input': {
-            color: token.colorPlaceholder,
+            color: token.colorTextPlaceholder,
          },
        },
      },
@ -1140,7 +1140,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
        [`${componentCls}-panel-container`]: {
          overflow: 'hidden',
          verticalAlign: 'top',
-          background: token.colorBgComponent,
+          background: token.colorBgElevated,
          borderRadius: token.radiusBase,
          boxShadow: token.boxShadow,
          transition: `margin ${token.motionDurationSlow}`,
--- a/components/drawer/style/index.tsx
+++ b/components/drawer/style/index.tsx
@ -57,7 +57,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
          position: 'relative',
          zIndex: 1,
          overflow: 'auto',
-          backgroundColor: token.colorBgComponent,
+          backgroundColor: token.colorBgElevated,
          backgroundClip: `padding-box`,
          border: 0,
          [`${componentCls}-wrapper-body`]: {
@ -72,7 +72,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
              justifyContent: 'space-between',
              padding: `${padding}px ${paddingLG}px`,
              color: colorText,
-              background: token.colorBgComponent,
+              background: token.colorBgElevated,
              borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
              borderRadius: `${radiusBase}px ${radiusBase}px 0 0`,

@ -140,7 +140,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject
        insetInlineStart: 0,
        width: '100%',
        height: 0,
-        backgroundColor: token.colorPopupBg,
+        backgroundColor: token.controlMaskBg,
        opacity: 0,
        transition: `opacity ${motionDurationSlow} linear, height 0s ease ${motionDurationSlow}`,
        pointerEvents: 'none',
--- a/components/dropdown/style/button.tsx
+++ b/components/dropdown/style/button.tsx
@ -1,8 +1,8 @@
-import type { GenerateStyle } from '../../_util/theme';
 import type { DropdownToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';

 const genButtonStyle: GenerateStyle<DropdownToken> = token => {
-  const { componentCls, antCls, paddingXS, colorLoadingOpacity } = token;
+  const { componentCls, antCls, paddingXS, opacityLoading } = token;

  return {
    [`${componentCls}-button`]: {
@ -12,7 +12,7 @@ const genButtonStyle: GenerateStyle<DropdownToken> = token => {
        [`&-loading, &-loading + ${antCls}-btn`]: {
          cursor: 'default',
          pointerEvents: 'none',
-          opacity: colorLoadingOpacity,
+          opacity: opacityLoading,
        },

        [`&:last-child:not(:first-child):not(${antCls}-btn-icon-only)`]: {
--- a/components/empty/style/index.tsx
+++ b/components/empty/style/index.tsx
@ -1,7 +1,7 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
 import { genComponentStyleHook, mergeToken } from '../../_util/theme';
-import type { GenerateStyle, FullToken } from '../../_util/theme';

 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {}
@ -28,7 +28,7 @@ const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
      [`${componentCls}-image`]: {
        height: token.emptyImgHeight,
        marginBottom: marginXS,
-        opacity: token.imgOpacity,
+        opacity: token.opacityImage,

        img: {
          height: '100%',
--- a/components/input-number/style/index.tsx
+++ b/components/input-number/style/index.tsx
@ -1,6 +1,4 @@
 // deps-lint-skip-all
-import type { FullToken, GenerateStyle } from '../../_util/theme';
-import { genComponentStyleHook, resetComponent, resetIcon } from '../../_util/theme';
 import type { InputToken } from '../../input/style';
 import {
  genActiveStyle,
@ -12,6 +10,8 @@ import {
  genStatusStyle,
  initInputToken,
 } from '../../input/style';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, resetComponent, resetIcon } from '../../_util/theme';

 export interface ComponentToken {
  controlWidth: number;
@ -135,7 +135,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
            outline: 0,
            transition: `all ${motionDurationSlow} linear`,
            appearance: 'textfield',
-            ...genPlaceholderStyle(token.colorPlaceholder),
+            ...genPlaceholderStyle(token.colorTextPlaceholder),

            '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button':
              {
--- a/components/input/style/index.tsx
+++ b/components/input/style/index.tsx
@ -1,7 +1,7 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 import type { GlobalToken } from '../../_util/theme/interface';

 export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
@ -128,7 +128,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
  borderColor: token.colorBorder,
  borderRadius: token.controlRadius,
  transition: `all ${token.motionDurationSlow}`,
-  ...genPlaceholderStyle(token.colorPlaceholder),
+  ...genPlaceholderStyle(token.colorTextPlaceholder),

  '&:hover': {
    ...genHoverStyle(token),
@ -515,7 +515,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
    // ========================= Input =========================
    [`.${prefixCls}-clear-icon`]: {
      margin: 0,
-      color: token.colorTextDisabled,
+      color: token.colorActionTmp,
      fontSize: token.fontSizeIcon,
      verticalAlign: -1,
      // https://github.com/ant-design/ant-design/pull/18151
--- a/components/mentions/style/index.tsx
+++ b/components/mentions/style/index.tsx
@ -1,6 +1,4 @@
 // deps-lint-skip-all
-import type { FullToken, GenerateStyle } from '../../_util/theme';
-import { genComponentStyleHook, resetComponent } from '../../_util/theme';
 import type { InputToken } from '../../input/style';
 import {
  genActiveStyle,
@ -10,6 +8,8 @@ import {
  genStatusStyle,
  initInputToken,
 } from '../../input/style';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, resetComponent } from '../../_util/theme';

 export interface ComponentToken {
  zIndexPopup: number;
@ -109,7 +109,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
        border: 'none',
        outline: 'none',
        resize: 'none',
-        ...genPlaceholderStyle(token.colorPlaceholder),
+        backgroundColor: 'inherit',
+        ...genPlaceholderStyle(token.colorTextPlaceholder),
      },

      [`${componentCls}-measure`]: {
--- a/components/message/style/index.tsx
+++ b/components/message/style/index.tsx
@ -20,7 +20,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
    componentCls,
    iconCls,
    boxShadow,
-    colorBgComponent,
+    colorBgElevated,
    colorSuccess,
    colorError,
    colorWarning,
@ -126,7 +126,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
        [`${componentCls}-notice-content`]: {
          display: 'inline-block',
          padding: messageNoticeContentPadding,
-          background: colorBgComponent,
+          background: colorBgElevated,
          borderRadius: radiusBase,
          boxShadow,
          pointerEvents: 'all',
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@ -60,7 +60,7 @@ export function modalMask(componentCls: string, token: TokenWithCommonCls<AliasT
      ...box('fixed'),
      zIndex: token.zIndexPopupBase,
      height: '100%',
-      backgroundColor: token.colorPopupBg,
+      backgroundColor: token.controlMaskBg,

      [`${componentCls}-hidden`]: {
        display: 'none',
@ -347,7 +347,7 @@ export default genComponentStyleHook('Modal', token => {

  const modalToken = mergeToken<ModalToken>(token, {
    modalBodyPadding: token.paddingLG,
-    modalHeaderBg: token.colorBgComponent,
+    modalHeaderBg: token.colorBgElevated,
    modalHeaderPadding: `${headerPaddingVertical}px ${token.paddingLG}px`,
    modalHeaderBorderWidth: token.controlLineWidth,
    modalHeaderBorderStyle: token.controlLineType,
@ -355,7 +355,7 @@ export default genComponentStyleHook('Modal', token => {
    modalHeaderTitleFontSize: headerFontSize,
    modalHeaderBorderColorSplit: token.colorSplit,
    modalHeaderCloseSize: headerLineHeight * headerFontSize + headerPaddingVertical * 2,
-    modalContentBg: token.colorBgComponent,
+    modalContentBg: token.colorBgElevated,
    modalHeadingColor: token.colorTextHeading,
    modalCloseColor: token.colorTextSecondary,
    modalFooterBg: 'transparent',
--- a/components/notification/style/index.tsx
+++ b/components/notification/style/index.tsx
@ -14,7 +14,6 @@ export interface NotificationToken extends FullToken<'Notification'> {
  notificationBg: string;
  notificationPaddingVertical: number;
  notificationPaddingHorizontal: number;
-  popoverBackground: string;
  notificationPadding: string;
  notificationMarginBottom: number;
  notificationMarginEdge: number;
@ -251,17 +250,15 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
 export default genComponentStyleHook(
  'Notification',
  token => {
-    const { colorBgComponent } = token;
    const notificationPaddingVertical = token.padding;
    const notificationPaddingHorizontal = token.paddingLG;

    const notificationToken = mergeToken<NotificationToken>(token, {
      // default.less variables
-      notificationBg: colorBgComponent,
+      notificationBg: token.colorBgElevated,
      notificationPaddingVertical,
      notificationPaddingHorizontal,
      // index.less variables
-      popoverBackground: colorBgComponent,
      notificationPadding: `${notificationPaddingVertical}px ${notificationPaddingHorizontal}px`,
      notificationMarginBottom: token.margin,
      notificationMarginEdge: token.marginLG,
--- a/components/popover/style/index.tsx
+++ b/components/popover/style/index.tsx
@ -2,10 +2,10 @@
 import type { FullToken, GenerateStyle, PresetColorType } from '../../_util/theme';
 import {
  genComponentStyleHook,
+  getArrowStyle,
  mergeToken,
  PresetColors,
  resetComponent,
-  getArrowStyle,
 } from '../../_util/theme';

 export interface ComponentToken {
@ -123,11 +123,11 @@ const genColorStyle: GenerateStyle<PopoverToken> = token => {
 export default genComponentStyleHook(
  'Popover',
  token => {
-    const { colorBgComponent, controlHeight, fontSize, lineHeight, lineWidth } = token;
+    const { controlHeight, fontSize, lineHeight, lineWidth, colorBgElevated } = token;
    const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight);

    const popoverToken = mergeToken<PopoverToken>(token, {
-      popoverBg: colorBgComponent,
+      popoverBg: colorBgElevated,
      popoverColor: token.colorText,
      popoverTitlePaddingBlockTop: titlePaddingBlockDist / 2,
      popoverTitlePaddingBlockBottom: titlePaddingBlockDist / 2 - lineWidth,
--- a/components/rate/style/index.tsx
+++ b/components/rate/style/index.tsx
@ -3,6 +3,10 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../_util/theme';
 import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';

+export type ComponentToken = {
+  defaultColor: string;
+};
+
 interface RateToken extends FullToken<'Rate'> {
  rateStarColor: string;
  rateStarSize: number;
@ -35,13 +39,13 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
        },

        '&:focus-visible': {
-          outline: `${token.lineWidth} dashed ${token.colorSplit}`,
+          outline: `${token.lineWidth}px dashed ${token.rateStarColor}`,
          transform: token.rateStarHoverScale,
        },
      },

      '&-first, &-second': {
-        color: token.colorSplit,
+        color: token.defaultColor,
        transition: `all ${token.motionDurationSlow}`,
        userSelect: 'none',

@ -119,11 +123,17 @@ const genRateStyle: GenerateStyle<RateToken> = token => {
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Rate', token => {
-  const rateToken = mergeToken<RateToken>(token, {
-    rateStarColor: token.yellow,
-    rateStarSize: token.controlHeightLG * 0.5,
-    rateStarHoverScale: 'scale(1.1)',
-  });
-  return [genRateStyle(rateToken)];
-});
+export default genComponentStyleHook(
+  'Rate',
+  token => {
+    const rateToken = mergeToken<RateToken>(token, {
+      rateStarColor: token.yellow,
+      rateStarSize: token.controlHeightLG * 0.5,
+      rateStarHoverScale: 'scale(1.1)',
+    });
+    return [genRateStyle(rateToken)];
+  },
+  token => ({
+    defaultColor: token.colorSplit,
+  }),
+);
--- a/components/segmented/style/index.tsx
+++ b/components/segmented/style/index.tsx
@ -4,14 +4,16 @@ import { TinyColor } from '@ctrl/tinycolor';
 import type { FullToken, GenerateStyle } from '../../_util/theme';
 import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';

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

 interface SegmentedToken extends FullToken<'Segmented'> {
-  segmentedBg: string;
-  segmentedHoverBg: string;
-  segmentedSelectedBg: string;
-  segmentedLabelColor: string;
-  segmentedLabelHoverColor: string;
  segmentedPaddingHorizontal: number;
  segmentedPaddingHorizontalSM: number;
  segmentedContainerPadding: number;
@ -30,7 +32,7 @@ function segmentedDisabledItem(cls: string, token: SegmentedToken): CSSObject {

 function getSegmentedItemSelectedStyle(token: SegmentedToken): CSSObject {
  return {
-    backgroundColor: token.segmentedSelectedBg,
+    backgroundColor: token.bgColorSelected,
    borderRadius: token.controlRadius,
    boxShadow: token.segmentedSelectedItemBoxShadow,
  };
@ -54,8 +56,8 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)

      display: 'inline-block',
      padding: token.segmentedContainerPadding,
-      color: token.segmentedLabelColor,
-      backgroundColor: token.segmentedBg,
+      color: token.labelColor,
+      backgroundColor: token.bgColor,
      borderRadius: token.radiusBase,
      transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,

@ -75,7 +77,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
      // hover/focus styles
      [`&:not(${componentCls}-disabled)`]: {
        '&:hover, &:focus': {
-          backgroundColor: token.segmentedHoverBg,
+          backgroundColor: token.bgColorHover,
        },
      },

@ -98,11 +100,11 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)

        '&-selected': {
          ...getSegmentedItemSelectedStyle(token),
-          color: token.segmentedLabelHoverColor,
+          color: token.labelColorHover,
        },

        '&:hover, &:focus': {
-          color: token.segmentedLabelHoverColor,
+          color: token.labelColorHover,
        },

        '&-label': {
@ -168,33 +170,30 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Segmented', token => {
-  const {
-    colorBgComponentSecondary,
-    colorBgComponent,
-    colorTextSecondary,
-    colorText,
-    lineWidthBold,
-    controlLineWidth,
-  } = token;
+export default genComponentStyleHook(
+  'Segmented',
+  token => {
+    const { lineWidthBold, controlLineWidth } = token;

-  const segmentedSelectedItemBoxShadow = [
-    `0 2px 8px -2px ${new TinyColor('#000').setAlpha(0.05).toRgbString()}`,
-    `0 1px 4px -1px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
-    `0 0 1px 0 ${new TinyColor('#000').setAlpha(0.08).toRgbString()}`,
-  ].join(',');
+    const segmentedSelectedItemBoxShadow = [
+      `0 2px 8px -2px ${new TinyColor('#000').setAlpha(0.05).toRgbString()}`,
+      `0 1px 4px -1px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
+      `0 0 1px 0 ${new TinyColor('#000').setAlpha(0.08).toRgbString()}`,
+    ].join(',');

-  const segmentedToken = mergeToken<SegmentedToken>(token, {
-    segmentedSelectedItemBoxShadow,
-
-    segmentedBg: colorBgComponentSecondary,
-    segmentedHoverBg: new TinyColor(colorBgComponentSecondary).darken(2).toRgbString(),
-    segmentedSelectedBg: colorBgComponent,
-    segmentedLabelColor: colorTextSecondary,
-    segmentedLabelHoverColor: colorText,
-    segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
-    segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
-    segmentedContainerPadding: lineWidthBold,
-  });
-  return [genSegmentedStyle(segmentedToken)];
-});
+    const segmentedToken = mergeToken<SegmentedToken>(token, {
+      segmentedSelectedItemBoxShadow,
+      segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
+      segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
+      segmentedContainerPadding: lineWidthBold,
+    });
+    return [genSegmentedStyle(segmentedToken)];
+  },
+  {
+    bgColor: new TinyColor('#000').setAlpha(0.04).toRgbString(),
+    bgColorHover: new TinyColor('#000').setAlpha(0.06).toRgbString(),
+    bgColorSelected: '#fff',
+    labelColor: new TinyColor('#000').setAlpha(0.65).toRgbString(),
+    labelColorHover: '#262626',
+  },
+);
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@ -1,14 +1,14 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
-import { resetComponent } from '../../_util/theme';
+import type { SelectToken } from '.';
 import {
  initSlideMotion,
-  slideUpIn,
-  slideUpOut,
  slideDownIn,
  slideDownOut,
+  slideUpIn,
+  slideUpOut,
 } from '../../style/motion';
-import type { SelectToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';
+import { resetComponent } from '../../_util/theme';

 const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
  const { controlPaddingHorizontal } = token;
@ -49,7 +49,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
        // https://github.com/ant-design/ant-design/issues/11456
        // https://github.com/ant-design/ant-design/issues/11843
        fontVariant: 'initial',
-        backgroundColor: token.colorBgComponent,
+        backgroundColor: token.colorBgElevated,
        borderRadius: token.controlRadius,
        outline: 'none',
        boxShadow: token.boxShadow,
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -6,11 +6,11 @@ import '../../empty/style';

 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle, FullToken } from '../../_util/theme';
-import { resetComponent, resetIcon, genComponentStyleHook, mergeToken } from '../../_util/theme';
-import genSingleStyle from './single';
-import genMultipleStyle from './multiple';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, resetComponent, resetIcon } from '../../_util/theme';
 import genDropdownStyle from './dropdown';
+import genMultipleStyle from './multiple';
+import genSingleStyle from './single';

 export interface ComponentToken {
  zIndexPopup: number;
@ -158,7 +158,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
      [`${componentCls}-selection-placeholder`]: {
        flex: 1,
        overflow: 'hidden',
-        color: token.colorPlaceholder,
+        color: token.colorTextPlaceholder,
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        pointerEvents: 'none',
--- a/components/select/style/single.tsx
+++ b/components/select/style/single.tsx
@ -1,6 +1,6 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import { mergeToken } from '../../_util/theme';
 import type { SelectToken } from '.';
+import { mergeToken } from '../../_util/theme';

 function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
  const { componentCls, inputPaddingHorizontalBase } = token;
@ -78,7 +78,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {

      // Opacity selection if open
      [`&${componentCls}-open ${componentCls}-selection-item`]: {
-        color: token.colorPlaceholder,
+        color: token.colorTextPlaceholder,
      },

      // ========================== Input ==========================
--- a/components/skeleton/style/index.tsx
+++ b/components/skeleton/style/index.tsx
@ -13,10 +13,10 @@ export type ComponentToken = {

 const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
  '0%': {
-    backgroundPosition: '100% 50%',
+    transform: 'translateX(-37.5%)',
  },
  '100%': {
-    backgroundPosition: '0 50%',
+    transform: 'translateX(37.5%)',
  },
 });

@ -48,12 +48,22 @@ const genSkeletonElementAvatarSize = (size: number): CSSObject => ({
 });

 const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
-  background: token.skeletonLoadingBackground,
-  backgroundSize: '400% 100%',
-  animationName: skeletonClsLoading,
-  animationDuration: token.skeletonLoadingMotionDuration,
-  animationTimingFunction: 'ease',
-  animationIterationCount: 'infinite',
+  position: 'relative',
+  overflow: 'hidden',
+  background: 'transparent',
+  '&::after': {
+    position: 'absolute',
+    top: 0,
+    insetInlineEnd: '-150%',
+    bottom: 0,
+    insetInlineStart: '-150%',
+    background: token.skeletonLoadingBackground,
+    animationName: skeletonClsLoading,
+    animationDuration: token.skeletonLoadingMotionDuration,
+    animationTimingFunction: 'ease',
+    animationIterationCount: 'infinite',
+    content: '""',
+  },
 });

 const genSkeletonElementInputSize = (size: number): CSSObject => ({
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@ -1,14 +1,9 @@
-// import '../../style/index.less';
-// import './index.less';
-
-// // style dependencies
-// import '../../tooltip/style';
-
 // deps-lint-skip-all
-import type * as React from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle, FullToken } from '../../_util/theme';
-import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
+import { TinyColor } from '@ctrl/tinycolor';
+import type * as React from 'react';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';

 // Direction naming standard:
 // Horizontal base:
@ -28,12 +23,20 @@ interface SliderToken extends FullToken<'Slider'> {
  marginFull: number;
  marginPart: number;
  marginPartWithMark: number;
+  handleFocusShadow: string;
 }

 // =============================== Base ===============================
 const genBaseStyle: GenerateStyle<SliderToken> = token => {
-  const { componentCls, controlSize, dotSize, marginFull, marginPart, colorBgContainerSecondary } =
-    token;
+  const {
+    componentCls,
+    controlSize,
+    dotSize,
+    marginFull,
+    marginPart,
+    colorBgContainerSecondary,
+    antCls,
+  } = token;

  return {
    [componentCls]: {
@ -86,17 +89,9 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {

        '&:focus': {
          borderColor: token.colorPrimaryHover,
-          boxShadow: 'none',
+          outline: 'none',
+          boxShadow: token.handleFocusShadow,
        },
-
-        '&:focus-visible': {
-          boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimarySecondary}`,
-        },
-
-        // Seems useless?
-        //     &.@{ant-prefix}-tooltip-open {
-        //       border-color: @slider-handle-color-tooltip-open;
-        //     }
      },

      '&:hover': {
@ -105,13 +100,17 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
        },

        [`${componentCls}-track`]: {
-          backgroundColor: token.colorPrimaryHover,
+          backgroundColor: token.colorPrimaryBorderHover,
        },

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

+        [`${componentCls}-handle${antCls}-tooltip-open`]: {
+          borderColor: token.colorPrimary,
+        },
+
        // We use below style instead
        //     ${sliderCls}-handle:not(.@{ant-prefix}-tooltip-open) {
        //       border-color: @slider-handle-color-hover;
@ -282,6 +281,9 @@ export default genComponentStyleHook(
      marginPart: (token.controlHeight - token.controlSize) / 2,
      marginFull: token.controlSize / 2,
      marginPartWithMark: token.controlHeightLG - token.controlSize,
+      handleFocusShadow: `0 0 0 5px ${new TinyColor(token.colorPrimary)
+        .setAlpha(0.12)
+        .toRgbString()}`,
    });
    return [
      genBaseStyle(sliderToken),
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@ -219,7 +219,7 @@ export default genComponentStyleHook('Switch', token => {
    switchHeight,
    switchDuration: token.motionDurationMid,
    switchColor: token.colorPrimary,
-    switchDisabledOpacity: token.colorLoadingOpacity,
+    switchDisabledOpacity: token.opacityLoading,
    switchInnerMarginMin: switchPinSize / 2,
    switchInnerMarginMax: switchPinSize + switchPadding + token.paddingXXS,
    switchPadding,
@ -232,7 +232,7 @@ export default genComponentStyleHook('Switch', token => {
    switchPinSizeSM,
    switchHandleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
    switchLoadingIconSize: token.fontSizeIcon * 0.75,
-    switchLoadingIconColor: `rgba(0, 0, 0, ${token.colorLoadingOpacity})`,
+    switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`,
    switchHandleActiveInset: '-30%',
  });

--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@ -18,6 +18,12 @@ import genSorterStyle from './sorter';
 import genStickyStyle from './sticky';
 import genSummaryStyle from './summary';

+export interface ComponentToken {
+  // FIXME: need to be removed
+  headerHoverBgColor: string;
+  headerSortActiveBgColor: string;
+}
+
 export interface TableToken extends FullToken<'Table'> {
  tableFontSize: number;
  tableBg: string;
@ -216,103 +222,112 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Table', token => {
-  const {
-    controlItemBgActive,
-    controlItemBgActiveHover,
-    colorPlaceholder,
-    colorTextHeading,
-    colorSplit,
-    fontSize,
-    padding,
-    paddingXS,
-    paddingSM,
-    controlHeight,
-    colorBgComponentSecondary,
-    colorAction,
-    colorActionHover,
-    colorLoadingOpacity,
-    colorBgComponent,
-    colorBgContainer,
-    radiusBase,
-  } = token;
+export default genComponentStyleHook(
+  'Table',
+  token => {
+    const {
+      controlItemBgActive,
+      controlItemBgActiveHover,
+      colorTextPlaceholder,
+      colorTextHeading,
+      colorSplit,
+      fontSize,
+      padding,
+      paddingXS,
+      paddingSM,
+      controlHeight,
+      colorBgComponentSecondary,
+      colorAction,
+      colorActionHover,
+      opacityLoading,
+      colorBgComponent,
+      colorBgContainer,
+      radiusBase,
+      headerHoverBgColor,
+      headerSortActiveBgColor,
+    } = token;

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

-  const tableSelectedRowBg = controlItemBgActive;
-  const zIndexTableFixed: number = 2;
+    const tableSelectedRowBg = controlItemBgActive;
+    const zIndexTableFixed: number = 2;

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

-    tablePaddingVertical: padding,
-    tablePaddingHorizontal: padding,
-    tablePaddingVerticalMiddle: paddingSM,
-    tablePaddingHorizontalMiddle: paddingXS,
-    tablePaddingVerticalSmall: paddingXS,
-    tablePaddingHorizontalSmall: paddingXS,
-    tableBorderColor: colorSplit,
-    tableHeaderTextColor: colorTextHeading,
-    tableHeaderBg: colorBgComponentSecondary,
-    tableFooterTextColor: colorTextHeading,
-    tableFooterBg: colorBgComponentSecondary,
-    tableHeaderCellSplitColor: colorSplit,
-    tableHeaderSortBg: colorBgContainer,
-    tableHeaderSortHoverBg: colorBgContainer,
-    tableHeaderIconColor: baseColorAction
-      .clone()
-      .setAlpha(baseColorAction.getAlpha() * colorLoadingOpacity)
-      .toRgbString(),
-    tableHeaderIconColorHover: baseColorActionHover
-      .clone()
-      .setAlpha(baseColorActionHover.getAlpha() * colorLoadingOpacity)
-      .toRgbString(),
-    tableBodySortBg: colorBgComponentSecondary,
-    tableFixedHeaderSortActiveBg: colorBgContainer,
-    tableHeaderFilterActiveBg: colorBgContainer,
-    tableFilterDropdownBg: colorBgComponent,
-    tableRowHoverBg: colorBgComponentSecondary,
-    tableSelectedRowBg,
-    tableSelectedRowHoverBg: controlItemBgActiveHover,
-    zIndexTableFixed,
-    zIndexTableSticky: zIndexTableFixed + 1,
-    tableFontSizeMiddle: fontSize,
-    tableFontSizeSmall: fontSize,
-    tableSelectionColumnWidth: controlHeight,
-    tableExpandIconBg: colorBgComponent,
-    tableExpandedRowBg: colorBgComponentSecondary,
+      tablePaddingVertical: padding,
+      tablePaddingHorizontal: padding,
+      tablePaddingVerticalMiddle: paddingSM,
+      tablePaddingHorizontalMiddle: paddingXS,
+      tablePaddingVerticalSmall: paddingXS,
+      tablePaddingHorizontalSmall: paddingXS,
+      tableBorderColor: colorSplit,
+      tableHeaderTextColor: colorTextHeading,
+      tableHeaderBg: colorBgComponentSecondary,
+      tableFooterTextColor: colorTextHeading,
+      tableFooterBg: colorBgComponentSecondary,
+      tableHeaderCellSplitColor: colorSplit,
+      tableHeaderSortBg: headerSortActiveBgColor,
+      tableHeaderSortHoverBg: headerHoverBgColor,
+      tableHeaderIconColor: baseColorAction
+        .clone()
+        .setAlpha(baseColorAction.getAlpha() * opacityLoading)
+        .toRgbString(),
+      tableHeaderIconColorHover: baseColorActionHover
+        .clone()
+        .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
+        .toRgbString(),
+      tableBodySortBg: colorBgComponentSecondary,
+      tableFixedHeaderSortActiveBg: colorBgContainer,
+      tableHeaderFilterActiveBg: headerHoverBgColor,
+      tableFilterDropdownBg: colorBgComponent,
+      tableRowHoverBg: colorBgComponentSecondary,
+      tableSelectedRowBg,
+      tableSelectedRowHoverBg: controlItemBgActiveHover,
+      zIndexTableFixed,
+      zIndexTableSticky: zIndexTableFixed + 1,
+      tableFontSizeMiddle: fontSize,
+      tableFontSizeSmall: fontSize,
+      tableSelectionColumnWidth: controlHeight,
+      tableExpandIconBg: colorBgComponent,
+      tableExpandedRowBg: colorBgComponentSecondary,

-    // Dropdown
-    tableFilterDropdownWidth: 120,
-    tableFilterDropdownHeight: 264,
-    tableFilterDropdownSearchWidth: 140,
+      // Dropdown
+      tableFilterDropdownWidth: 120,
+      tableFilterDropdownHeight: 264,
+      tableFilterDropdownSearchWidth: 140,

-    // Virtual Scroll Bar
-    tableScrollThumbSize: 8, // Mac scroll bar size
-    tableScrollThumbBg: colorPlaceholder,
-    tableScrollThumbBgHover: colorTextHeading,
-    tableScrollBg: colorSplit,
-  });
+      // Virtual Scroll Bar
+      tableScrollThumbSize: 8, // Mac scroll bar size
+      tableScrollThumbBg: colorTextPlaceholder,
+      tableScrollThumbBgHover: colorTextHeading,
+      tableScrollBg: colorSplit,
+    });

-  return [
-    genTableStyle(tableToken),
-    genPaginationStyle(tableToken),
-    genSummaryStyle(tableToken),
-    genSorterStyle(tableToken),
-    genFilterStyle(tableToken),
-    genBorderedStyle(tableToken),
-    genRadiusStyle(tableToken),
-    genExpandStyle(tableToken),
-    genSummaryStyle(tableToken),
-    genEmptyStyle(tableToken),
-    genSelectionStyle(tableToken),
-    genFixedStyle(tableToken),
-    genStickyStyle(tableToken),
-    genEllipsisStyle(tableToken),
-    genSizeStyle(tableToken),
-    genRtlStyle(tableToken),
-  ];
-});
+    return [
+      genTableStyle(tableToken),
+      genPaginationStyle(tableToken),
+      genSummaryStyle(tableToken),
+      genSorterStyle(tableToken),
+      genFilterStyle(tableToken),
+      genBorderedStyle(tableToken),
+      genRadiusStyle(tableToken),
+      genExpandStyle(tableToken),
+      genSummaryStyle(tableToken),
+      genEmptyStyle(tableToken),
+      genSelectionStyle(tableToken),
+      genFixedStyle(tableToken),
+      genStickyStyle(tableToken),
+      genEllipsisStyle(tableToken),
+      genSizeStyle(tableToken),
+      genRtlStyle(tableToken),
+    ];
+  },
+  {
+    headerHoverBgColor: 'rgba(0, 0, 0, 0.04)',
+    headerSortActiveBgColor: 'rgba(0, 0, 0, 0.04)',
+  },
+);
--- a/components/table/style/sticky.tsx
+++ b/components/table/style/sticky.tsx
@ -5,7 +5,7 @@ import type { TableToken } from './index';
 const genStickyStyle: GenerateStyle<TableToken, CSSObject> = token => {
  const {
    componentCls,
-    colorLoadingOpacity,
+    opacityLoading,
    tableScrollThumbBg,
    tableScrollThumbBgHover,
    tableScrollThumbSize,
@ -31,7 +31,7 @@ const genStickyStyle: GenerateStyle<TableToken, CSSObject> = token => {
          alignItems: 'center',
          background: tableScrollBg,
          borderTop: tableBorder,
-          opacity: colorLoadingOpacity,
+          opacity: opacityLoading,

          '&:hover': {
            transformOrigin: 'center bottom',
--- a/components/tooltip/style/index.tsx
+++ b/components/tooltip/style/index.tsx
@ -1,5 +1,6 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
+import { TinyColor } from '@ctrl/tinycolor';
 import type {
  FullToken,
  GenerateStyle,
@ -8,14 +9,15 @@ import type {
 } from '../../_util/theme';
 import {
  genComponentStyleHook,
+  getArrowStyle,
  mergeToken,
  PresetColors,
  resetComponent,
-  getArrowStyle,
 } from '../../_util/theme';

 export interface ComponentToken {
  zIndexPopup: number;
+  colorBgDefault: string;
 }

 interface TooltipToken extends FullToken<'Tooltip'> {
@ -118,22 +120,21 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        return [];
      }

-      const { radiusBase, colorTextLightSolid, colorBgContainerWeak } = token;
-
-      const tooltipBg = colorBgContainerWeak;
+      const { radiusBase, colorTextLightSolid, colorBgDefault } = token;

      const TooltipToken = mergeToken<TooltipToken>(token, {
        // default variables
        tooltipMaxWidth: 250,
        tooltipColor: colorTextLightSolid,
-        tooltipBg,
        tooltipBorderRadius: radiusBase,
+        tooltipBg: colorBgDefault,
      });

      return [genTooltipStyle(TooltipToken)];
    },
    ({ zIndexPopupBase }) => ({
      zIndexPopup: zIndexPopupBase + 70,
+      colorBgDefault: new TinyColor('#000').setAlpha(0.75).toRgbString(),
    }),
  );

--- a/components/upload/style/picture.tsx
+++ b/components/upload/style/picture.tsx
@ -1,7 +1,7 @@
 import { TinyColor } from '@ctrl/tinycolor';
-import { clearFix } from '../../_util/theme';
-import type { GenerateStyle } from '../../_util/theme';
 import type { UploadToken } from '.';
+import type { GenerateStyle } from '../../_util/theme';
+import { clearFix } from '../../_util/theme';

 const genPictureStyle: GenerateStyle<UploadToken> = token => {
  const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset } = token;
@ -142,7 +142,7 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = token => {
            zIndex: 1,
            width: `calc(100% - ${token.paddingXS * 2}px)`,
            height: `calc(100% - ${token.paddingXS * 2}px)`,
-            backgroundColor: token.colorPopupBg,
+            backgroundColor: token.controlMaskBg,
            opacity: 0,
            transition: `all ${token.motionDurationSlow}`,
            content: '" "',