feat: update token (#36095)

* feat: update token

* feat: update token

* fix: override ts definition

* fix: rename token

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,

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

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;

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

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;

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

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 type { FullToken, GenerateStyle } from '../../_util/theme';
-import { resetComponent, genComponentStyleHook, mergeToken } 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 => {
+export default genComponentStyleHook(
-  const {
+  'Avatar',
-    colorPlaceholder,
+  token => {
-    colorTextLightSolid,
+    const {
-    colorBg,
+      colorTextLightSolid,
 
-    controlHeight,
+      controlHeight,
-    controlHeightLG,
+      controlHeightLG,
-    controlHeightSM,
+      controlHeightSM,
 
-    fontSize,
+      fontSize,
-    fontSizeLG,
+      fontSizeLG,
-    fontSizeXL,
+      fontSizeXL,
-    fontSizeHeading3,
+      fontSizeHeading3,
 
-    marginXS,
+      marginXS,
-  } = token;
+      bgColor,
+    } = token;
 
-  const avatarToken = mergeToken<AvatarToken>(token, {
+    const avatarToken = mergeToken<AvatarToken>(token, {
-    avatarBg: colorPlaceholder,
+      avatarBg: bgColor,
-    avatarColor: colorTextLightSolid,
+      avatarColor: colorTextLightSolid,
 
-    avatarSizeBase: controlHeight,
+      avatarSizeBase: controlHeight,
-    avatarSizeLG: controlHeightLG,
+      avatarSizeLG: controlHeightLG,
-    avatarSizeSM: controlHeightSM,
+      avatarSizeSM: controlHeightSM,
 
-    avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
+      avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
-    avatarFontSizeLG: fontSizeHeading3,
+      avatarFontSizeLG: fontSizeHeading3,
-    avatarFontSizeSM: fontSize,
+      avatarFontSizeSM: fontSize,
-    avatarBorderRadius: token.radiusBase,
+      avatarBorderRadius: token.radiusBase,
-    avatarGroupBorderColor: colorBg,
+      avatarGroupOverlapping: marginXS,
-    avatarGroupOverlapping: marginXS,
+      avatarGroupSpace: marginXS,
-    avatarGroupSpace: marginXS,
+    });
-  });
 
-  return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
+    return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
-});
+  },
+  token => ({
+    groupBorderColor: '#fff',
+    bgColor: token.colorTextPlaceholder,
+  }),
+);

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 type { FullToken, GenerateStyle, PresetColorType } from '../../_util/theme';
-import { resetComponent, PresetColors, genComponentStyleHook, mergeToken } 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`]: {

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 { FullToken, GenerateStyle } from '../../_util/theme';
-import type { GenerateStyle, FullToken } 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(),
     };
   },
 );

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;

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

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

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

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

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

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

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

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

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

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

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,

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,

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 => {
+export default genComponentStyleHook(
-  const rateToken = mergeToken<RateToken>(token, {
+  'Rate',
-    rateStarColor: token.yellow,
+  token => {
-    rateStarSize: token.controlHeightLG * 0.5,
+    const rateToken = mergeToken<RateToken>(token, {
-    rateStarHoverScale: 'scale(1.1)',
+      rateStarColor: token.yellow,
-  });
+      rateStarSize: token.controlHeightLG * 0.5,
-  return [genRateStyle(rateToken)];
+      rateStarHoverScale: 'scale(1.1)',
-});
+    });
+    return [genRateStyle(rateToken)];
+  },
+  token => ({
+    defaultColor: token.colorSplit,
+  }),
+);

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,
+      color: token.labelColor,
-      backgroundColor: token.segmentedBg,
+      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 => {
+export default genComponentStyleHook(
-  const {
+  'Segmented',
-    colorBgComponentSecondary,
+  token => {
-    colorBgComponent,
+    const { lineWidthBold, controlLineWidth } = token;
-    colorTextSecondary,
-    colorText,
-    lineWidthBold,
-    controlLineWidth,
-  } = token;
 
-  const segmentedSelectedItemBoxShadow = [
+    const segmentedSelectedItemBoxShadow = [
-    `0 2px 8px -2px ${new TinyColor('#000').setAlpha(0.05).toRgbString()}`,
+      `0 2px 8px -2px ${new TinyColor('#000').setAlpha(0.05).toRgbString()}`,
-    `0 1px 4px -1px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
+      `0 1px 4px -1px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
-    `0 0 1px 0 ${new TinyColor('#000').setAlpha(0.08).toRgbString()}`,
+      `0 0 1px 0 ${new TinyColor('#000').setAlpha(0.08).toRgbString()}`,
-  ].join(',');
+    ].join(',');
 
-  const segmentedToken = mergeToken<SegmentedToken>(token, {
+    const segmentedToken = mergeToken<SegmentedToken>(token, {
-    segmentedSelectedItemBoxShadow,
+      segmentedSelectedItemBoxShadow,
-
+      segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
-    segmentedBg: colorBgComponentSecondary,
+      segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
-    segmentedHoverBg: new TinyColor(colorBgComponentSecondary).darken(2).toRgbString(),
+      segmentedContainerPadding: lineWidthBold,
-    segmentedSelectedBg: colorBgComponent,
+    });
-    segmentedLabelColor: colorTextSecondary,
+    return [genSegmentedStyle(segmentedToken)];
-    segmentedLabelHoverColor: colorText,
+  },
-    segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
+  {
-    segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
+    bgColor: new TinyColor('#000').setAlpha(0.04).toRgbString(),
-    segmentedContainerPadding: lineWidthBold,
+    bgColorHover: new TinyColor('#000').setAlpha(0.06).toRgbString(),
-  });
+    bgColorSelected: '#fff',
-  return [genSegmentedStyle(segmentedToken)];
+    labelColor: new TinyColor('#000').setAlpha(0.65).toRgbString(),
-});
+    labelColorHover: '#262626',
+  },
+);

components/select/style/dropdown.tsx

@@ -1,14 +1,14 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../_util/theme';
+import type { SelectToken } from '.';
-import { resetComponent } from '../../_util/theme';
 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,

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 type { FullToken, GenerateStyle } from '../../_util/theme';
-import { resetComponent, resetIcon, genComponentStyleHook, mergeToken } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, resetComponent, resetIcon } from '../../_util/theme';
-import genSingleStyle from './single';
-import genMultipleStyle from './multiple';
 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',

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 ==========================

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,
+  position: 'relative',
-  backgroundSize: '400% 100%',
+  overflow: 'hidden',
-  animationName: skeletonClsLoading,
+  background: 'transparent',
-  animationDuration: token.skeletonLoadingMotionDuration,
+  '&::after': {
-  animationTimingFunction: 'ease',
+    position: 'absolute',
-  animationIterationCount: 'infinite',
+    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 => ({

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 { TinyColor } from '@ctrl/tinycolor';
-import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
+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 } =
+  const {
-    token;
+    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),

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

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 => {
+export default genComponentStyleHook(
-  const {
+  'Table',
-    controlItemBgActive,
+  token => {
-    controlItemBgActiveHover,
+    const {
-    colorPlaceholder,
+      controlItemBgActive,
-    colorTextHeading,
+      controlItemBgActiveHover,
-    colorSplit,
+      colorTextPlaceholder,
-    fontSize,
+      colorTextHeading,
-    padding,
+      colorSplit,
-    paddingXS,
+      fontSize,
-    paddingSM,
+      padding,
-    controlHeight,
+      paddingXS,
-    colorBgComponentSecondary,
+      paddingSM,
-    colorAction,
+      controlHeight,
-    colorActionHover,
+      colorBgComponentSecondary,
-    colorLoadingOpacity,
+      colorAction,
-    colorBgComponent,
+      colorActionHover,
-    colorBgContainer,
+      opacityLoading,
-    radiusBase,
+      colorBgComponent,
-  } = token;
+      colorBgContainer,
+      radiusBase,
+      headerHoverBgColor,
+      headerSortActiveBgColor,
+    } = token;
 
-  const baseColorAction = new TinyColor(colorAction);
+    const baseColorAction = new TinyColor(colorAction);
-  const baseColorActionHover = new TinyColor(colorActionHover);
+    const baseColorActionHover = new TinyColor(colorActionHover);
 
-  const tableSelectedRowBg = controlItemBgActive;
+    const tableSelectedRowBg = controlItemBgActive;
-  const zIndexTableFixed: number = 2;
+    const zIndexTableFixed: number = 2;
 
-  const tableToken = mergeToken<TableToken>(token, {
+    const tableToken = mergeToken<TableToken>(token, {
-    tableFontSize: fontSize,
+      tableFontSize: fontSize,
-    tableBg: colorBgComponent,
+      tableBg: colorBgComponent,
-    tableRadius: radiusBase,
+      tableRadius: radiusBase,
 
-    tablePaddingVertical: padding,
+      tablePaddingVertical: padding,
-    tablePaddingHorizontal: padding,
+      tablePaddingHorizontal: padding,
-    tablePaddingVerticalMiddle: paddingSM,
+      tablePaddingVerticalMiddle: paddingSM,
-    tablePaddingHorizontalMiddle: paddingXS,
+      tablePaddingHorizontalMiddle: paddingXS,
-    tablePaddingVerticalSmall: paddingXS,
+      tablePaddingVerticalSmall: paddingXS,
-    tablePaddingHorizontalSmall: paddingXS,
+      tablePaddingHorizontalSmall: paddingXS,
-    tableBorderColor: colorSplit,
+      tableBorderColor: colorSplit,
-    tableHeaderTextColor: colorTextHeading,
+      tableHeaderTextColor: colorTextHeading,
-    tableHeaderBg: colorBgComponentSecondary,
+      tableHeaderBg: colorBgComponentSecondary,
-    tableFooterTextColor: colorTextHeading,
+      tableFooterTextColor: colorTextHeading,
-    tableFooterBg: colorBgComponentSecondary,
+      tableFooterBg: colorBgComponentSecondary,
-    tableHeaderCellSplitColor: colorSplit,
+      tableHeaderCellSplitColor: colorSplit,
-    tableHeaderSortBg: colorBgContainer,
+      tableHeaderSortBg: headerSortActiveBgColor,
-    tableHeaderSortHoverBg: colorBgContainer,
+      tableHeaderSortHoverBg: headerHoverBgColor,
-    tableHeaderIconColor: baseColorAction
+      tableHeaderIconColor: baseColorAction
-      .clone()
+        .clone()
-      .setAlpha(baseColorAction.getAlpha() * colorLoadingOpacity)
+        .setAlpha(baseColorAction.getAlpha() * opacityLoading)
-      .toRgbString(),
+        .toRgbString(),
-    tableHeaderIconColorHover: baseColorActionHover
+      tableHeaderIconColorHover: baseColorActionHover
-      .clone()
+        .clone()
-      .setAlpha(baseColorActionHover.getAlpha() * colorLoadingOpacity)
+        .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
-      .toRgbString(),
+        .toRgbString(),
-    tableBodySortBg: colorBgComponentSecondary,
+      tableBodySortBg: colorBgComponentSecondary,
-    tableFixedHeaderSortActiveBg: colorBgContainer,
+      tableFixedHeaderSortActiveBg: colorBgContainer,
-    tableHeaderFilterActiveBg: colorBgContainer,
+      tableHeaderFilterActiveBg: headerHoverBgColor,
-    tableFilterDropdownBg: colorBgComponent,
+      tableFilterDropdownBg: colorBgComponent,
-    tableRowHoverBg: colorBgComponentSecondary,
+      tableRowHoverBg: colorBgComponentSecondary,
-    tableSelectedRowBg,
+      tableSelectedRowBg,
-    tableSelectedRowHoverBg: controlItemBgActiveHover,
+      tableSelectedRowHoverBg: controlItemBgActiveHover,
-    zIndexTableFixed,
+      zIndexTableFixed,
-    zIndexTableSticky: zIndexTableFixed + 1,
+      zIndexTableSticky: zIndexTableFixed + 1,
-    tableFontSizeMiddle: fontSize,
+      tableFontSizeMiddle: fontSize,
-    tableFontSizeSmall: fontSize,
+      tableFontSizeSmall: fontSize,
-    tableSelectionColumnWidth: controlHeight,
+      tableSelectionColumnWidth: controlHeight,
-    tableExpandIconBg: colorBgComponent,
+      tableExpandIconBg: colorBgComponent,
-    tableExpandedRowBg: colorBgComponentSecondary,
+      tableExpandedRowBg: colorBgComponentSecondary,
 
-    // Dropdown
+      // Dropdown
-    tableFilterDropdownWidth: 120,
+      tableFilterDropdownWidth: 120,
-    tableFilterDropdownHeight: 264,
+      tableFilterDropdownHeight: 264,
-    tableFilterDropdownSearchWidth: 140,
+      tableFilterDropdownSearchWidth: 140,
 
-    // Virtual Scroll Bar
+      // Virtual Scroll Bar
-    tableScrollThumbSize: 8, // Mac scroll bar size
+      tableScrollThumbSize: 8, // Mac scroll bar size
-    tableScrollThumbBg: colorPlaceholder,
+      tableScrollThumbBg: colorTextPlaceholder,
-    tableScrollThumbBgHover: colorTextHeading,
+      tableScrollThumbBgHover: colorTextHeading,
-    tableScrollBg: colorSplit,
+      tableScrollBg: colorSplit,
-  });
+    });
 
-  return [
+    return [
-    genTableStyle(tableToken),
+      genTableStyle(tableToken),
-    genPaginationStyle(tableToken),
+      genPaginationStyle(tableToken),
-    genSummaryStyle(tableToken),
+      genSummaryStyle(tableToken),
-    genSorterStyle(tableToken),
+      genSorterStyle(tableToken),
-    genFilterStyle(tableToken),
+      genFilterStyle(tableToken),
-    genBorderedStyle(tableToken),
+      genBorderedStyle(tableToken),
-    genRadiusStyle(tableToken),
+      genRadiusStyle(tableToken),
-    genExpandStyle(tableToken),
+      genExpandStyle(tableToken),
-    genSummaryStyle(tableToken),
+      genSummaryStyle(tableToken),
-    genEmptyStyle(tableToken),
+      genEmptyStyle(tableToken),
-    genSelectionStyle(tableToken),
+      genSelectionStyle(tableToken),
-    genFixedStyle(tableToken),
+      genFixedStyle(tableToken),
-    genStickyStyle(tableToken),
+      genStickyStyle(tableToken),
-    genEllipsisStyle(tableToken),
+      genEllipsisStyle(tableToken),
-    genSizeStyle(tableToken),
+      genSizeStyle(tableToken),
-    genRtlStyle(tableToken),
+      genRtlStyle(tableToken),
-  ];
+    ];
-});
+  },
+  {
+    headerHoverBgColor: 'rgba(0, 0, 0, 0.04)',
+    headerSortActiveBgColor: 'rgba(0, 0, 0, 0.04)',
+  },
+);

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

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 { radiusBase, colorTextLightSolid, colorBgDefault } = token;
-
-      const tooltipBg = colorBgContainerWeak;
 
       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(),
     }),
   );
 

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