refactor: Button use full token & remove all withPrefixCls & support overrides (#34690)

* chore: init

* chore: button token

* chore: rm all withPrefixCls

* feat: overrides work

* feat: theme can be nest

* test: Update snapshot

* fix: memo logic

components/_util/theme/index.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
+import { CSSInterpolation, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
-  CSSInterpolation,
-  CSSObject,
-  Theme,
-  useCacheToken,
-  useStyleRegister,
-} from '@ant-design/cssinjs';
 import defaultSeedToken, { derivative as defaultDerivative } from './themes/default';
 import version from '../../version';
 import { resetComponent, resetIcon, clearFix } from './util';
@@ -21,7 +15,7 @@ import {
   slideRightIn,
   slideRightOut,
 } from './util/slide';
-import { PresetColors } from './interface';
+import { GlobalToken, PresetColors } from './interface';
 import type {
   SeedToken,
   DerivativeToken,
@@ -69,7 +63,7 @@ export const DesignTokenContext = React.createContext<{
 });
 
 // ================================== Hook ==================================
-export function useToken(): [Theme<SeedToken, DerivativeToken>, AliasToken, string] {
+export function useToken(): [Theme<SeedToken, DerivativeToken>, GlobalToken, string] {
   const {
     token: rootDesignToken,
     theme = defaultTheme,
@@ -79,7 +73,7 @@ export function useToken(): [Theme<SeedToken, DerivativeToken>, AliasToken, stri
 
   const salt = `${version}-${hashed || ''}`;
 
-  const [token, hashId] = useCacheToken<AliasToken, SeedToken>(
+  const [token, hashId] = useCacheToken<GlobalToken, SeedToken>(
     theme,
     [defaultSeedToken, rootDesignToken],
     {
@@ -98,16 +92,3 @@ export type GenerateStyle<ComponentToken extends object, ReturnType = CSSInterpo
   token: ComponentToken,
   hashId?: string,
 ) => ReturnType;
-
-// ================================== Util ==================================
-export function withPrefix(
-  style: CSSObject,
-  prefixCls: string,
-  additionalClsList: string[] = [],
-): CSSObject {
-  const fullClsList = [prefixCls, ...additionalClsList].filter(cls => cls).map(cls => `.${cls}`);
-
-  return {
-    [fullClsList.join('')]: style,
-  };
-}

components/_util/theme/interface.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ComponentToken as ButtonComponentToken } from '../../button/style';
 
 export const PresetColors = [
   'blue',
@@ -27,10 +28,15 @@ export type ColorPalettes = {
 };
 
 export interface OverrideToken {
-  derivative: Partial<DerivativeToken & AliasToken>;
+  derivative?: Partial<DerivativeToken & AliasToken>;
-  [componentName: string]: object; // FIXME: tmp of component token
+
+  // Customize component
+  button?: ButtonComponentToken;
 }
 
+/** Final token which contains the components level override */
+export type GlobalToken = AliasToken & Omit<OverrideToken, 'derivative'>;
+
 // ======================================================================
 // ==                            Seed Token                            ==
 // ======================================================================
@@ -91,6 +97,9 @@ export interface SeedToken extends PresetColorType {
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
 export interface DerivativeToken extends SeedToken, ColorPalettes {
   // Color
+  /** Used for DefaultButton, Switch which has default outline */
+  colorDefaultOutline: string;
+
   colorPrimaryHover: string;
   colorPrimaryActive: string;
   colorPrimaryOutline: string;
@@ -162,8 +171,18 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
 // ======================================================================
 // ==                           Alias Token                            ==
 // ======================================================================
+// FIXME: DerivativeToken should part pick
+type OmitDerivativeKey =
+  | 'colorText2'
+  | 'colorTextBelow'
+  | 'colorTextBelow2'
+  | 'colorTextBelow3'
+  | 'colorBg2'
+  | 'colorBgBelow'
+  | 'colorBgBelow2';
+
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
-export interface AliasToken extends DerivativeToken {
+export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
   // Font
   fontSizeSM: number;
   fontSize: number;

components/_util/theme/themes/default.ts

@@ -64,6 +64,10 @@ export function derivative(token: SeedToken): DerivativeToken {
 
   const fontSizes = getFontSizes(fontSizeBase);
 
+  const colorBg2 = new TinyColor({ h: 0, s: 0, v: 98 }).toHexString();
+  const colorBgBelow = new TinyColor({ h: 0, s: 0, v: 98 }).toHexString();
+  const colorBgBelow2 = new TinyColor({ h: 0, s: 0, v: 96 }).toHexString();
+
   return {
     ...token,
     ...colorPalettes,
@@ -96,9 +100,11 @@ export function derivative(token: SeedToken): DerivativeToken {
     radiusXL: radiusBase * 4,
 
     // color
-    colorBg2: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
+    colorBg2,
-    colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
+    colorBgBelow,
-    colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
+    colorBgBelow2,
+
+    colorDefaultOutline: colorBgBelow2,
 
     colorPrimaryActive: primaryColors[6],
     colorPrimaryHover: primaryColors[4],

components/button/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -128,6 +128,38 @@ Array [
 ]
 `;
 
+exports[`renders ./components/button/demo/debug-token.md extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn ant-btn-text"
+      type="button"
+    >
+      <span>
+        Text 1
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-text"
+      type="button"
+    >
+      <span>
+        Text 2
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/button/demo/disabled.md extend context correctly 1`] = `
 Array [
   <button

components/button/__tests__/__snapshots__/demo.test.ts.snap

@@ -128,6 +128,38 @@ Array [
 ]
 `;
 
+exports[`renders ./components/button/demo/debug-token.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <button
+      class="ant-btn ant-btn-text"
+      type="button"
+    >
+      <span>
+        Text 1
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-text"
+      type="button"
+    >
+      <span>
+        Text 2
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
 Array [
   <button

components/button/demo/debug-token.md

@@ -0,0 +1,42 @@
+---
+order: 999
+title:
+  zh-CN: 覆盖组件样式
+  en-US: Override Component Style
+debug: true
+---
+
+```tsx
+import { Button, ConfigProvider, Space } from 'antd';
+
+ReactDOM.render(
+  <ConfigProvider
+    theme={{
+      override: {
+        button: {
+          colorBgTextHover: 'red',
+          colorBgTextActive: 'blue',
+        },
+      },
+    }}
+  >
+    <Space>
+      <Button type="text">Text 1</Button>
+
+      <ConfigProvider
+        theme={{
+          override: {
+            button: {
+              colorBgTextHover: 'orange',
+              colorBgTextActive: 'blue',
+            },
+          },
+        }}
+      >
+        <Button type="text">Text 2</Button>
+      </ConfigProvider>
+    </Space>
+  </ConfigProvider>,
+  mountNode,
+);
+```

components/button/style/index.tsx

@@ -2,48 +2,61 @@
 import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import {
-  DerivativeToken,
+  AliasToken,
   UseComponentStyleResult,
   useStyleRegister,
   useToken,
-  withPrefix,
+  GenerateStyle,
 } from '../../_util/theme';
 
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  colorBgTextHover: string;
+  colorBgTextActive: string;
+}
+
+interface ButtonToken extends AliasToken, ComponentToken {
+  btnCls: string;
+  iconPrefixCls: string;
+}
+
 // ============================== Shared ==============================
-const genSharedButtonStyle = (
+const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
-  prefixCls: string,
+  const { btnCls, iconPrefixCls } = token;
-  iconPrefixCls: string,
-  token: DerivativeToken,
-): CSSObject => ({
-  outline: 'none',
-  position: 'relative',
-  display: 'inline-block',
-  fontWeight: 400,
-  whiteSpace: 'nowrap',
-  textAlign: 'center',
-  backgroundImage: 'none',
-  backgroundColor: 'transparent',
-  border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
-  cursor: 'pointer',
-  transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
-  userSelect: 'none',
-  touchAction: 'manipulation',
-  lineHeight: token.lineHeight,
-  color: token.colorText,
 
-  '> span': {
+  return {
-    display: 'inline-block',
+    [btnCls]: {
-  },
+      outline: 'none',
+      position: 'relative',
+      display: 'inline-block',
+      fontWeight: 400,
+      whiteSpace: 'nowrap',
+      textAlign: 'center',
+      backgroundImage: 'none',
+      backgroundColor: 'transparent',
+      border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
+      cursor: 'pointer',
+      transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+      userSelect: 'none',
+      touchAction: 'manipulation',
+      lineHeight: token.lineHeight,
+      color: token.colorText,
 
-  // Leave a space between icon and text.
+      '> span': {
-  [`> .${iconPrefixCls} + span, > span + .${iconPrefixCls}`]: {
+        display: 'inline-block',
-    marginInlineStart: token.marginXS,
+      },
-  },
 
-  [`&.${prefixCls}-block`]: {
+      // Leave a space between icon and text.
-    width: '100%',
+      [`> .${iconPrefixCls} + span, > span + .${iconPrefixCls}`]: {
-  },
+        marginInlineStart: token.marginXS,
-});
+      },
+
+      [`&${btnCls}-block`]: {
+        width: '100%',
+      },
+    },
+  };
+};
 
 const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
   '&:not(:disabled)': {
@@ -53,14 +66,14 @@ const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject
 });
 
 // ============================== Shape ===============================
-const genCircleButtonStyle = (token: DerivativeToken): CSSObject => ({
+const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
   minWidth: token.controlHeight,
   paddingInlineStart: 0,
   paddingInlineEnd: 0,
   borderRadius: '50%',
 });
 
-const genRoundButtonStyle = (token: DerivativeToken): CSSObject => ({
+const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
   borderRadius: token.controlHeight,
   paddingInlineStart: token.controlHeight / 2,
   paddingInlineEnd: token.controlHeight / 2,
@@ -69,16 +82,17 @@ const genRoundButtonStyle = (token: DerivativeToken): CSSObject => ({
 
 // =============================== Type ===============================
 const genGhostButtonStyle = (
-  prefixCls: string,
+  btnCls: string,
   textColor: string | false,
   borderColor: string | false,
   textColorDisabled: string | false,
   borderColorDisabled: string | false,
 ): CSSObject => ({
-  [`&.${prefixCls}-background-ghost`]: {
+  [`&${btnCls}-background-ghost`]: {
     color: textColor || undefined,
     backgroundColor: 'transparent',
     borderColor: borderColor || undefined,
+    boxShadow: 'none',
 
     '&:disabled': {
       cursor: 'not-allowed',
@@ -88,7 +102,7 @@ const genGhostButtonStyle = (
   },
 });
 
-const genSolidDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
+const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
   '&:disabled': {
     cursor: 'not-allowed',
     borderColor: token.colorBorder,
@@ -98,13 +112,13 @@ const genSolidDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
   },
 });
 
-const genSolidButtonStyle = (token: DerivativeToken): CSSObject => ({
+const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
   borderRadius: token.controlRadius,
 
   ...genSolidDisabledButtonStyle(token),
 });
 
-const genPureDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
+const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
   '&:disabled': {
     cursor: 'not-allowed',
     color: token.colorTextDisabled,
@@ -112,13 +126,13 @@ const genPureDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
 });
 
 // Type: Default
-const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
+const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
   ...genSolidButtonStyle(token),
 
   backgroundColor: token.colorBgComponent,
   borderColor: token.colorBorder,
 
-  boxShadow: '0 2px 0 rgba(0, 0, 0, 0.015)',
+  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorDefaultOutline}`,
 
   ...genHoverActiveButtonStyle(
     {
@@ -132,14 +146,14 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
   ),
 
   ...genGhostButtonStyle(
-    prefixCls,
+    token.btnCls,
     token.colorBgComponent,
     token.colorBgComponent,
     token.colorTextDisabled,
     token.colorBorder,
   ),
 
-  [`&.${prefixCls}-dangerous`]: {
+  [`&${token.btnCls}-dangerous`]: {
     color: token.colorError,
     borderColor: token.colorError,
 
@@ -155,7 +169,7 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
     ),
 
     ...genGhostButtonStyle(
-      prefixCls,
+      token.btnCls,
       token.colorError,
       token.colorError,
       token.colorTextDisabled,
@@ -166,13 +180,13 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
 });
 
 // Type: Primary
-const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
+const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
   ...genSolidButtonStyle(token),
 
   color: '#FFF',
   backgroundColor: token.colorPrimary,
 
-  boxShadow: '0 2px 0 rgba(0, 0, 0, 0.045)',
+  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorPrimaryOutline}`,
 
   ...genHoverActiveButtonStyle(
     {
@@ -184,15 +198,16 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
   ),
 
   ...genGhostButtonStyle(
-    prefixCls,
+    token.btnCls,
     token.colorPrimary,
     token.colorPrimary,
     token.colorTextDisabled,
     token.colorBorder,
   ),
 
-  [`&.${prefixCls}-dangerous`]: {
+  [`&${token.btnCls}-dangerous`]: {
     backgroundColor: token.colorError,
+    boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
 
     ...genHoverActiveButtonStyle(
       {
@@ -204,7 +219,7 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
     ),
 
     ...genGhostButtonStyle(
-      prefixCls,
+      token.btnCls,
       token.colorError,
       token.colorError,
       token.colorTextDisabled,
@@ -215,14 +230,14 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
 });
 
 // Type: Dashed
-const genDashedButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
+const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
-  ...genDefaultButtonStyle(prefixCls, token),
+  ...genDefaultButtonStyle(token),
 
   borderStyle: 'dashed',
 });
 
 // Type: Link
-const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
+const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
   color: token.colorLink,
 
   ...genHoverActiveButtonStyle(
@@ -236,7 +251,7 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec
 
   ...genPureDisabledButtonStyle(token),
 
-  [`&.${prefixCls}-dangerous`]: {
+  [`&${token.btnCls}-dangerous`]: {
     color: token.colorError,
 
     ...genHoverActiveButtonStyle(
@@ -253,59 +268,55 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec
 });
 
 // Type: Text
-const genTextButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => {
+const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
-  const backgroundColor = new TinyColor({ r: 0, g: 0, b: 0, a: 0.018 });
+  borderRadius: token.controlRadius,
 
-  return {
+  ...genHoverActiveButtonStyle(
-    ...genHoverActiveButtonStyle(
+    {
-      {
+      backgroundColor: token.colorBgTextHover,
-        backgroundColor: backgroundColor.toRgbString(),
+    },
-      },
+    {
-      {
+      backgroundColor: token.colorBgTextActive,
-        backgroundColor: backgroundColor
+    },
-          .clone()
+  ),
-          .setAlpha(backgroundColor.getAlpha() * 1.5)
+
-          .toRgbString(),
+  ...genPureDisabledButtonStyle(token),
-      },
+
-    ),
+  [`&${token.btnCls}-dangerous`]: {
+    color: token.colorError,
 
     ...genPureDisabledButtonStyle(token),
+  },
+});
 
-    [`&.${prefixCls}-dangerous`]: {
+const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
-      color: token.colorError,
+  const { btnCls } = token;
 
-      ...genPureDisabledButtonStyle(token),
+  return {
-    },
+    [`${btnCls}-default`]: genDefaultButtonStyle(token),
+    [`${btnCls}-primary`]: genPrimaryButtonStyle(token),
+    [`${btnCls}-dashed`]: genDashedButtonStyle(token),
+    [`${btnCls}-link`]: genLinkButtonStyle(token),
+    [`${btnCls}-text`]: genTextButtonStyle(token),
   };
 };
 
-const genTypeButtonStyle = (prefixCls: string, token: DerivativeToken): CSSInterpolation => [
-  withPrefix(genDefaultButtonStyle(prefixCls, token), `${prefixCls}-default`, []),
-  withPrefix(genPrimaryButtonStyle(prefixCls, token), `${prefixCls}-primary`, []),
-  withPrefix(genDashedButtonStyle(prefixCls, token), `${prefixCls}-dashed`, []),
-  withPrefix(genLinkButtonStyle(prefixCls, token), `${prefixCls}-link`, []),
-  withPrefix(genTextButtonStyle(prefixCls, token), `${prefixCls}-text`, []),
-];
-
 // =============================== Size ===============================
-const genSizeButtonStyle = (
+const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSSInterpolation => {
-  prefixCls: string,
+  const { btnCls, iconPrefixCls } = token;
-  iconPrefixCls: string,
+
-  sizePrefixCls: string,
-  token: DerivativeToken,
-): CSSInterpolation => {
   const paddingVertical = Math.max(
     0,
     (token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.controlLineWidth,
   );
   const paddingHorizontal = token.padding - token.controlLineWidth;
 
-  const iconOnlyCls = `.${prefixCls}-icon-only`;
+  const iconOnlyCls = `${btnCls}-icon-only`;
 
   return [
     // Size
-    withPrefix(
+    {
-      {
+      [`${btnCls}${sizePrefixCls}`]: {
         fontSize: token.fontSize,
         height: token.controlHeight,
         padding: `${paddingVertical}px ${paddingHorizontal}px`,
@@ -321,61 +332,51 @@ const genSizeButtonStyle = (
         },
 
         // Loading
-        [`&.${prefixCls}-loading`]: {
+        [`&${btnCls}-loading`]: {
           opacity: 0.65,
           cursor: 'default',
         },
 
-        [`.${prefixCls}-loading-icon`]: {
+        [`${btnCls}-loading-icon`]: {
           transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
         },
 
-        [`&:not(${iconOnlyCls}) .${prefixCls}-loading-icon > .${iconPrefixCls}`]: {
+        [`&:not(${iconOnlyCls}) ${btnCls}-loading-icon > .${iconPrefixCls}`]: {
           marginInlineEnd: token.marginXS,
         },
       },
-      prefixCls,
+    },
-      [sizePrefixCls],
-    ),
 
     // Shape - patch prefixCls again to override solid border radius style
-    withPrefix(genCircleButtonStyle(token), `${prefixCls}-circle`, [prefixCls, sizePrefixCls]),
+    {
-    withPrefix(genRoundButtonStyle(token), `${prefixCls}-round`, [prefixCls, sizePrefixCls]),
+      [`${btnCls}${btnCls}-circle${sizePrefixCls}`]: genCircleButtonStyle(token),
+    },
+    {
+      [`${btnCls}${btnCls}-round${sizePrefixCls}`]: genRoundButtonStyle(token),
+    },
   ];
 };
 
-const genSizeBaseButtonStyle = (
+const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token);
-  prefixCls: string,
-  iconPrefixCls: string,
-  token: DerivativeToken,
-): CSSInterpolation => genSizeButtonStyle(prefixCls, iconPrefixCls, '', token);
 
-const genSizeSmallButtonStyle = (
+const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
-  prefixCls: string,
+  const largeToken: ButtonToken = {
-  iconPrefixCls: string,
-  token: DerivativeToken,
-): CSSInterpolation => {
-  const largeToken: DerivativeToken = {
     ...token,
     controlHeight: token.controlHeightSM,
     padding: token.paddingXS,
   };
 
-  return genSizeButtonStyle(prefixCls, iconPrefixCls, `${prefixCls}-sm`, largeToken);
+  return genSizeButtonStyle(largeToken, `${token.btnCls}-sm`);
 };
 
-const genSizeLargeButtonStyle = (
+const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
-  prefixCls: string,
+  const largeToken: ButtonToken = {
-  iconPrefixCls: string,
-  token: DerivativeToken,
-): CSSInterpolation => {
-  const largeToken: DerivativeToken = {
     ...token,
     controlHeight: token.controlHeightLG,
     fontSize: token.fontSizeLG,
   };
 
-  return genSizeButtonStyle(prefixCls, iconPrefixCls, `${prefixCls}-lg`, largeToken);
+  return genSizeButtonStyle(largeToken, `${token.btnCls}-lg`);
 };
 
 // ============================== Export ==============================
@@ -386,18 +387,41 @@ export default function useStyle(
   const [theme, token, hashId] = useToken();
 
   return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
-      // Shared
+      const { colorText, button = {} } = token;
-      withPrefix(genSharedButtonStyle(prefixCls, iconPrefixCls, token), prefixCls),
+      const textColor = new TinyColor(colorText);
 
-      // Size
+      const buttonToken: ButtonToken = {
-      genSizeSmallButtonStyle(prefixCls, iconPrefixCls, token),
+        ...token,
-      genSizeBaseButtonStyle(prefixCls, iconPrefixCls, token),
+        colorBgTextHover: textColor
-      genSizeLargeButtonStyle(prefixCls, iconPrefixCls, token),
+          .clone()
+          .setAlpha(textColor.getAlpha() * 0.02)
+          .toRgbString(),
+        colorBgTextActive: textColor
+          .clone()
+          .setAlpha(textColor.getAlpha() * 0.03)
+          .toRgbString(),
 
-      // Group (type, ghost, danger, disabled, loading)
+        iconPrefixCls,
-      genTypeButtonStyle(prefixCls, token),
+        btnCls: `.${prefixCls}`,
-    ]),
+
+        // Override by developer
+        ...button,
+      };
+
+      return [
+        // Shared
+        genSharedButtonStyle(buttonToken),
+
+        // Size
+        genSizeSmallButtonStyle(buttonToken),
+        genSizeBaseButtonStyle(buttonToken),
+        genSizeLargeButtonStyle(buttonToken),
+
+        // Group (type, ghost, danger, disabled, loading)
+        genTypeButtonStyle(buttonToken),
+      ];
+    }),
     hashId,
   ];
 }

components/config-provider/context.tsx

@@ -3,6 +3,8 @@ import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
 import { Locale } from '../locale-provider';
 import { SizeType } from './SizeContext';
 import { RequiredMark } from '../form/Form';
+import type { SeedToken } from '../_util/theme';
+import type { OverrideToken } from '../_util/theme/interface';
 
 export const defaultIconPrefixCls = 'anticon';
 
@@ -21,6 +23,12 @@ export interface CSPConfig {
 
 export type DirectionType = 'ltr' | 'rtl' | undefined;
 
+export interface ThemeConfig {
+  token?: Partial<SeedToken>;
+  override?: OverrideToken;
+  hashed?: boolean;
+}
+
 export interface ConfigConsumerProps {
   getTargetContainer?: () => HTMLElement;
   getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
@@ -47,6 +55,7 @@ export interface ConfigConsumerProps {
     requiredMark?: RequiredMark;
     colon?: boolean;
   };
+  theme?: ThemeConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

components/config-provider/hooks/useTheme.ts

@@ -0,0 +1,55 @@
+import useMemo from 'rc-util/lib/hooks/useMemo';
+import shallowEqual from 'shallowequal';
+import type { OverrideToken } from '../../_util/theme/interface';
+import type { ThemeConfig } from '../context';
+
+export default function useTheme(
+  theme?: ThemeConfig,
+  parentTheme?: ThemeConfig,
+): ThemeConfig | undefined {
+  const themeConfig = theme || {};
+  const parentThemeConfig = parentTheme || {};
+
+  const mergedTheme = useMemo<ThemeConfig | undefined>(
+    () => {
+      if (!theme) {
+        return parentTheme;
+      }
+
+      // Override
+      const mergedOverride = {
+        ...parentThemeConfig.override,
+      };
+
+      Object.keys(theme.override || {}).forEach((componentName: keyof OverrideToken) => {
+        mergedOverride[componentName] = {
+          ...mergedOverride[componentName],
+          ...theme.override![componentName],
+        } as any;
+      });
+
+      // Base token
+      const merged = {
+        ...parentThemeConfig,
+        ...themeConfig,
+
+        token: {
+          ...parentThemeConfig.token,
+          ...themeConfig.token,
+        },
+        override: mergedOverride,
+      };
+
+      return merged;
+    },
+    [themeConfig, parentThemeConfig],
+    (prev, next) =>
+      prev.some((prevTheme, index) => {
+        const nextTheme = next[index];
+
+        return !shallowEqual(prevTheme, nextTheme);
+      }),
+  );
+
+  return mergedTheme;
+}

components/config-provider/index.tsx

@@ -6,22 +6,16 @@ import useMemo from 'rc-util/lib/hooks/useMemo';
 import { RenderEmptyHandler } from './renderEmpty';
 import LocaleProvider, { ANT_MARK, Locale } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import {
+import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
-  ConfigConsumer,
+import type { CSPConfig, DirectionType, ConfigConsumerProps, Theme, ThemeConfig } from './context';
-  ConfigContext,
-  CSPConfig,
-  DirectionType,
-  ConfigConsumerProps,
-  Theme,
-  defaultIconPrefixCls,
-} from './context';
 import SizeContext, { SizeContextProvider, SizeType } from './SizeContext';
 import message from '../message';
 import notification from '../notification';
 import { RequiredMark } from '../form/Form';
 import { registerTheme } from './cssVariables';
 import defaultLocale from '../locale/default';
-import { SeedToken, DesignTokenContext, useToken } from '../_util/theme';
+import { DesignTokenContext, useToken } from '../_util/theme';
+import useTheme from './hooks/useTheme';
 import defaultSeedToken from '../_util/theme/themes/default';
 
 export {
@@ -83,10 +77,7 @@ export interface ConfigProviderProps {
   };
   virtual?: boolean;
   dropdownMatchSelectWidth?: boolean;
-  theme?: {
+  theme?: ThemeConfig;
-    token?: Partial<SeedToken>;
-    hashed?: boolean;
-  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -166,7 +157,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
     legacyLocale,
     parentContext,
     iconPrefixCls,
-    theme = {},
+    theme,
   } = props;
 
   const getPrefixCls = React.useCallback(
@@ -182,6 +173,8 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
     [parentContext.getPrefixCls, props.prefixCls],
   );
 
+  const mergedTheme = useTheme(theme, parentContext.theme);
+
   const config = {
     ...parentContext,
     csp,
@@ -192,6 +185,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
     virtual,
     dropdownMatchSelectWidth,
     getPrefixCls,
+    theme: mergedTheme,
   };
 
   // Pass the props used by `useContext` directly with child component.
@@ -257,19 +251,19 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
   }
 
   // ================================ Dynamic theme ================================
-  // FIXME: Multiple theme support for pass Theme & override
   const memoTheme = React.useMemo(
     () => ({
+      ...mergedTheme,
+
       token: {
         ...defaultSeedToken,
-        ...theme?.token,
+        ...mergedTheme?.token,
       },
-      hashed: theme?.hashed,
     }),
-    [theme?.token, theme?.hashed],
+    [mergedTheme],
   );
 
-  if (theme?.token || theme?.hashed) {
+  if (theme) {
     childNode = (
       <DesignTokenContext.Provider value={memoTheme}>{childNode}</DesignTokenContext.Provider>
     );

components/switch/style/index.tsx

@@ -170,7 +170,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
 
       '&:focus-visible': {
         outline: 0,
-        boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorBgComponentDisabled}`,
+        boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorDefaultOutline}`,
       },
 
       [`&${token.switchCls}-checked:focus-visible`]: {

package.json

@@ -155,7 +155,8 @@
     "rc-trigger": "^5.2.10",
     "rc-upload": "~4.3.0",
     "rc-util": "^5.19.3",
-    "scroll-into-view-if-needed": "^2.2.25"
+    "scroll-into-view-if-needed": "^2.2.25",
+    "shallowequal": "^1.1.0"
   },
   "devDependencies": {
     "@ant-design/bisheng-plugin": "^3.0.1",
@@ -180,6 +181,7 @@
     "@types/react-copy-to-clipboard": "^5.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-window": "^1.8.2",
+    "@types/shallowequal": "^1.1.1",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",

site/theme/template/Layout/DynamicTheme/index.tsx

@@ -5,6 +5,7 @@ import { useIntl } from 'react-intl';
 import { BugOutlined, EyeOutlined } from '@ant-design/icons';
 import { SeedToken } from '../../../../../components/_util/theme';
 import defaultSeedToken from '../../../../../components/_util/theme/themes/default';
+import { PresetColors } from '../../../../../components/_util/theme/interface';
 import Preview from './Preview';
 
 export interface ThemeConfigProps {
@@ -70,6 +71,10 @@ export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps
           autoComplete="off"
         >
           {keys.map((key: keyof typeof defaultToken) => {
+            if (PresetColors.includes(key as any)) {
+              return null;
+            }
+
             const originValue = defaultToken[key];
             const originValueType = typeof originValue;