fix: statistic token (#34962)

* fix: statistic token

* fix: all components token

* test: fix lint

* chore: code clean

* Revert "chore: code clean"

This reverts commit 2c0e7d6ba3.

components/_util/theme/util/genComponentStyleHook.ts

@@ -42,7 +42,7 @@ function genComponentStyleHook<ComponentName extends OverrideComponent>(
         const { token: proxyToken, flush } = statisticToken(token);
 
         const defaultComponentToken =
-          typeof getDefaultToken === 'function' ? getDefaultToken(token) : getDefaultToken;
+          typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
         const overrideComponentToken = token[component] as any;
 
         // Only merge token specified in interface

components/affix/style/index.tsx

@@ -1,6 +1,6 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
+import { GenerateStyle, genComponentStyleHook, FullToken, mergeToken } from '../../_util/theme';
 
 interface AffixToken extends FullToken<'Affix'> {
   zIndexAffix: number;
@@ -20,9 +20,8 @@ const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Affix', token => {
-  const affixToken: AffixToken = {
-    ...token,
+  const affixToken = mergeToken<AffixToken>(token, {
     zIndexAffix: token.zIndexBase + 10,
-  };
+  });
   return [genSharedAffixStyle(affixToken)];
 });

components/alert/style/index.tsx

@@ -4,7 +4,13 @@
 // deps-lint-skip-all
 import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 
-import { resetComponent, GenerateStyle, FullToken, genComponentStyleHook } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  FullToken,
+  genComponentStyleHook,
+  mergeToken,
+} from '../../_util/theme';
 
 // FIXME: missing token
 type AlertToken = FullToken<'Alert'> & {
@@ -242,50 +248,14 @@ export default genComponentStyleHook('Alert', token => {
   const alertWithDescriptionPaddingVertical = token.padding - 1;
   const alertWithDescriptionNoIconPaddingVertical = token.padding - 1;
 
-  const alertToken: AlertToken = {
-    ...token,
+  const alertToken = mergeToken<AlertToken>(token, {
     alertMessageColor,
     alertCloseColor,
     alertCloseHoverColor,
     alertWithDescriptionIconSize,
     alertWithDescriptionPaddingVertical,
     alertWithDescriptionNoIconPaddingVertical,
-  };
+  });
 
   return [genAlertStyle(alertToken)];
 });
-
-// export default function useStyle(
-//   prefixCls: string,
-//   iconPrefixCls: string,
-// ): UseComponentStyleResult {
-//   const [theme, token, hashId] = useToken();
-//
-//   const alertCls = `.${prefixCls}`;
-//
-//   const alertMessageColor = token.colorTextHeading;
-//   const alertCloseColor = token.colorAction;
-//   const alertCloseHoverColor = token.colorActionHover;
-//   // FIXME
-//   const alertWithDescriptionIconSize = 24;
-//   const alertWithDescriptionPaddingVertical = token.padding - 1;
-//   const alertWithDescriptionNoIconPaddingVertical = token.padding - 1;
-//
-//   const alertToken: AlertToken = {
-//     ...token,
-//     componentCls: alertCls,
-//     alertMessageColor,
-//     alertCloseColor,
-//     alertCloseHoverColor,
-//     alertWithDescriptionIconSize,
-//     alertWithDescriptionPaddingVertical,
-//     alertWithDescriptionNoIconPaddingVertical,
-//   };
-//
-//   return [
-//     useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
-//       genAlertStyle(alertToken),
-//     ]),
-//     hashId,
-//   ];
-// }

components/avatar/style/index.tsx

@@ -7,7 +7,13 @@
 
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { GenerateStyle, resetComponent, FullToken, genComponentStyleHook } from '../../_util/theme';
+import {
+  GenerateStyle,
+  resetComponent,
+  FullToken,
+  genComponentStyleHook,
+  mergeToken,
+} from '../../_util/theme';
 
 type AvatarToken = FullToken<'Avatar'> & {
   avatarBg: string;
@@ -134,8 +140,7 @@ const genGroupStyle: GenerateStyle<AvatarToken> = token => {
 };
 
 export default genComponentStyleHook('Avatar', token => {
-  const avatarToken: AvatarToken = {
-    ...token,
+  const avatarToken = mergeToken<AvatarToken>(token, {
     // FIXME
     avatarBg: '#ccc',
     // FIXME
@@ -152,7 +157,7 @@ export default genComponentStyleHook('Avatar', token => {
     avatarGroupBorderColor: '#fff',
     avatarGroupOverlapping: -8,
     avatarGroupSpace: 3,
-  };
+  });
 
   return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
 });

components/badge/style/index.tsx

@@ -7,6 +7,7 @@ import {
   PresetColorType,
   genComponentStyleHook,
   FullToken,
+  mergeToken,
 } from '../../_util/theme';
 
 interface BadgeToken extends FullToken<'Badge'> {
@@ -332,8 +333,7 @@ export default genComponentStyleHook('Badge', (token, { hashId }) => {
   const badgeFontSizeSm = token.fontSizeSM;
   const badgeStatusSize = 6; // FIXME: hard code
 
-  const badgeToken: BadgeToken = {
-    ...token,
+  const badgeToken = mergeToken<BadgeToken>(token, {
     badgeZIndex,
     badgeHeight,
     badgeTextColor,
@@ -344,7 +344,7 @@ export default genComponentStyleHook('Badge', (token, { hashId }) => {
     badgeDotSize,
     badgeFontSizeSm,
     badgeStatusSize,
-  };
+  });
 
   return [genSharedBadgeStyle(badgeToken, hashId), { display: 'none' }];
 });

components/carousel/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
-import { resetComponent, GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  genComponentStyleHook,
+  FullToken,
+  mergeToken,
+} from '../../_util/theme';
 
 interface CarouselToken extends FullToken<'Carousel'> {
   carouselDotWidth: CSSObject['width'];
@@ -322,13 +328,12 @@ const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Carousel', token => {
-  const carouselToken: CarouselToken = {
-    ...token,
+  const carouselToken = mergeToken<CarouselToken>(token, {
     // FIXME
     carouselDotWidth: 16,
     carouselDotHeight: 3,
     carouselDotActiveWidth: 24,
-  };
+  });
   return [
     genCarouselStyle(carouselToken),
     genCarouselVerticalStyle(carouselToken),

components/checkbox/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
 import { Keyframes } from '@ant-design/cssinjs';
-import { resetComponent, GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  genComponentStyleHook,
+  FullToken,
+  mergeToken,
+} from '../../_util/theme';
 
 interface CheckboxToken extends FullToken<'Checkbox'> {
   checkboxCls: string;
@@ -236,10 +242,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
 
 // ============================== Export ==============================
 export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>, hashId: string) {
-  const checkboxToken: CheckboxToken = {
-    ...token,
+  const checkboxToken: CheckboxToken = mergeToken<CheckboxToken>(token, {
     checkboxCls: `.${prefixCls}`,
-  };
+  });
 
   return [genCheckboxStyle(checkboxToken, hashId), antCheckboxEffect];
 }

components/descriptions/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { FullToken, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme';
+import {
+  FullToken,
+  genComponentStyleHook,
+  GenerateStyle,
+  mergeToken,
+  resetComponent,
+} from '../../_util/theme';
 
 interface DescriptionsToken extends FullToken<'Descriptions'> {
   descriptionsTitleMarginBottom: number;
@@ -206,8 +212,7 @@ export default genComponentStyleHook('Descriptions', token => {
   const descriptionsItemLabelColonMarginRight = 8;
   const descriptionsItemLabelColonMarginLeft = 2;
 
-  const descriptionToken: DescriptionsToken = {
-    ...token,
+  const descriptionToken = mergeToken<DescriptionsToken>(token, {
     descriptionsBg,
     descriptionsTitleMarginBottom,
     descriptionsExtraColor,
@@ -218,7 +223,7 @@ export default genComponentStyleHook('Descriptions', token => {
     descriptionsMiddlePadding,
     descriptionsItemLabelColonMarginRight,
     descriptionsItemLabelColonMarginLeft,
-  };
+  });
 
   return [genDescriptionStyles(descriptionToken)];
 });

components/divider/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { resetComponent, GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  genComponentStyleHook,
+  FullToken,
+  mergeToken,
+} from '../../_util/theme';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -153,12 +159,11 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 export default genComponentStyleHook(
   'Divider',
   token => {
-    const dividerToken: DividerToken = {
-      ...token,
+    const dividerToken = mergeToken<DividerToken>(token, {
       dividerVerticalGutterMargin: token.marginSM,
       dividerHorizontalWithTextGutterMargin: token.margin,
       dividerHorizontalGutterMargin: token.marginLG,
-    };
+    });
     return [genSharedDividerStyle(dividerToken)];
   },
   {

components/drawer/style/index.tsx

@@ -1,7 +1,7 @@
 // deps-lint-skip-all
 import { CSSObject, Keyframes } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { FullToken, genComponentStyleHook, GenerateStyle } from '../../_util/theme';
+import { FullToken, genComponentStyleHook, GenerateStyle, mergeToken } from '../../_util/theme';
 
 export interface DrawerToken extends FullToken<'Drawer'> {
   drawerHeaderCloseSize: number;
@@ -286,8 +286,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Drawer', (token, { hashId }) => {
-  const drawerToken: DrawerToken = {
-    ...token,
+  const drawerToken = mergeToken<DrawerToken>(token, {
     black: '#000', // FIXME: hard code
     white: '#fff', // FIXME: hard code
     drawerHeaderCloseSize: 56, // FIXME: hard code
@@ -309,7 +308,7 @@ export default genComponentStyleHook('Drawer', (token, { hashId }) => {
     textColorSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: hard code
     borderStyle: 'solid', // FIXME: hard code
     motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code
-  };
+  });
 
   return [genBaseStyle(drawerToken, hashId), genDrawerStyle(drawerToken)];
 });

components/empty/style/index.tsx

@@ -6,6 +6,8 @@ import {
   useToken,
   UseComponentStyleResult,
   GenerateStyle,
+  mergeToken,
+  statisticToken,
 } from '../../_util/theme';
 
 /** Component only token. Which will handle additional calculation of alias token */
@@ -148,13 +150,12 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
 
   return [
     useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
-      const { Empty } = token;
+      const { token: proxyToken, flush } = statisticToken(token);
+      const { Empty } = proxyToken;
 
       const emptyFontSize = token.fontSizeBase;
 
-      const emptyToken: EmptyToken = {
-        ...token,
-
+      const emptyToken = mergeToken<EmptyToken>(proxyToken, {
         emptyCls: `.${prefixCls}`,
         emptyImgCls: `.${prefixCls}-img`,
 
@@ -162,9 +163,11 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
         white: '#fff',
 
         ...Empty,
-      };
+      });
 
-      return [genSharedEmptyStyle(emptyToken), genEmptyImgStyle(emptyToken)];
+      const style = [genSharedEmptyStyle(emptyToken), genEmptyImgStyle(emptyToken)];
+      flush('Empty');
+      return style;
     }),
     hashId,
   ];

components/form/style/index.tsx

@@ -1,7 +1,7 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { AliasToken, FullToken, GenerateStyle } from '../../_util/theme';
-import { genComponentStyleHook, resetComponent } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 
 interface FormToken extends FullToken<'Form'> {
   formItemCls: string;
@@ -522,11 +522,10 @@ const genVerticalStyle: GenerateStyle<FormToken> = token => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
-  const formToken: FormToken = {
-    ...token,
+  const formToken = mergeToken<FormToken>(token, {
     formItemCls: `${token.componentCls}-item`,
     rootPrefixCls,
-  };
+  });
 
   return [
     genFormStyle(formToken),

components/grid/style/index.tsx

@@ -3,7 +3,7 @@
 
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { GenerateStyle, FullToken, genComponentStyleHook } from '../../_util/theme';
+import { GenerateStyle, FullToken, genComponentStyleHook, mergeToken } from '../../_util/theme';
 
 interface GridRowToken extends FullToken<'Grid'> {}
 
@@ -152,10 +152,9 @@ const genGridMediaStyle = (
 export const useRowStyle = genComponentStyleHook('Grid', token => [genGridRowStyle(token)]);
 
 export const useColStyle = genComponentStyleHook('Grid', token => {
-  const gridToken: GridColToken = {
-    ...token,
+  const gridToken: GridColToken = mergeToken<GridColToken>(token, {
     gridColumns: 24, // FIXME: hardcode in v4
-  };
+  });
 
   const gridMediaSizesMap = {
     '-sm': gridToken.screenSMMin,

components/image/style/index.tsx

@@ -1,7 +1,13 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { FullToken, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme';
+import {
+  FullToken,
+  genComponentStyleHook,
+  GenerateStyle,
+  mergeToken,
+  resetComponent,
+} from '../../_util/theme';
 
 export interface ImageToken extends FullToken<'Image'> {
   previewPrefixCls: string;
@@ -285,8 +291,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Image', (token, { hashId }) => {
-  const imageToken: ImageToken = {
-    ...token,
+  const imageToken = mergeToken<ImageToken>(token, {
     previewPrefixCls: `${token.componentCls}-preview`,
 
     white: '#fff', // FIXME: hard code
@@ -309,7 +314,7 @@ export default genComponentStyleHook('Image', (token, { hashId }) => {
     zIndexImage: 1080, // FIXME: hard code in v4
     zIndexModalMask: 1000, // FIXME: hard code in v4
     motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code in v4
-  };
+  });
 
   return [genImageStyle(imageToken, hashId)];
 });

components/input/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { clearFix, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme';
+import {
+  clearFix,
+  genComponentStyleHook,
+  GenerateStyle,
+  mergeToken,
+  resetComponent,
+} from '../../_util/theme';
 import type { FullToken } from '../../_util/theme';
 import type { GlobalToken } from '../../_util/theme/interface';
 
@@ -50,7 +56,7 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
   opacity: 1,
 
   '&:hover': {
-    ...genHoverStyle({ ...token, inputBorderHoverColor: token.colorBorder }),
+    ...genHoverStyle(mergeToken<InputToken>(token, { inputBorderHoverColor: token.colorBorder })),
   },
 });
 
@@ -77,12 +83,13 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
       },
 
       '&:focus, &-focused': {
-        ...genActiveStyle({
-          ...token,
-          inputBorderActiveColor: colorError,
-          inputBorderHoverColor: colorError,
-          colorPrimaryOutline: colorErrorOutline,
-        }),
+        ...genActiveStyle(
+          mergeToken<InputToken>(token, {
+            inputBorderActiveColor: colorError,
+            inputBorderHoverColor: colorError,
+            colorPrimaryOutline: colorErrorOutline,
+          }),
+        ),
       },
 
       [`.${prefixCls}-prefix`]: {
@@ -95,12 +102,13 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
       },
 
       '&:focus, &-focused': {
-        ...genActiveStyle({
-          ...token,
-          inputBorderActiveColor: colorWarning,
-          inputBorderHoverColor: colorWarning,
-          colorPrimaryOutline: colorWarningOutline,
-        }),
+        ...genActiveStyle(
+          mergeToken<InputToken>(token, {
+            inputBorderActiveColor: colorWarning,
+            inputBorderHoverColor: colorWarning,
+            colorPrimaryOutline: colorWarningOutline,
+          }),
+        ),
       },
 
       [`.${prefixCls}-prefix`]: {
@@ -769,8 +777,8 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
 };
 
 export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): InputToken<T> {
-  return {
-    ...token,
+  // @ts-ignore
+  return mergeToken<InputToken<T>>(token, {
     inputAffixPadding: token.paddingXXS,
     inputPaddingVertical: Math.max(
       Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
@@ -789,7 +797,7 @@ export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): I
     inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth,
     inputBorderHoverColor: token.colorPrimaryHover,
     inputBorderActiveColor: token.colorPrimaryHover,
-  };
+  });
 }
 
 const genTextAreaStyle: GenerateStyle<InputToken> = token => {

components/list/style/index.tsx

@@ -1,7 +1,14 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { GenerateStyle, resetComponent, FullToken, genComponentStyleHook } from '../../_util/theme';
+import {
+  GenerateStyle,
+  resetComponent,
+  FullToken,
+  genComponentStyleHook,
+  mergeToken,
+  DerivativeToken,
+} from '../../_util/theme';
 
 interface ListToken extends FullToken<'List'> {
   minHeight: number;
@@ -147,12 +154,13 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
 
   return {
     [`${componentCls}`]: {
-      ...resetComponent({
-        ...token,
-        colorText,
-        fontSize: fontSizeBase,
-        lineHeight: lineHeightBase,
-      }),
+      ...resetComponent(
+        mergeToken<DerivativeToken>(token, {
+          colorText,
+          fontSize: fontSizeBase,
+          lineHeight: lineHeightBase,
+        }),
+      ),
       position: 'relative',
       '*': {
         outline: 'none',
@@ -371,8 +379,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('List', (token, { hashId }) => {
-  const listToken: ListToken = {
-    ...token,
+  const listToken = mergeToken<ListToken>(token, {
     listBorderedCls: `${token.componentCls}-bordered`,
     antPrefix: '.ant', // FIXME: hard code in v4
     minHeight: 40, // FIXME: hard code in v4,
@@ -397,7 +404,7 @@ export default genComponentStyleHook('List', (token, { hashId }) => {
 
     lineHeightBase: 1.5715, // FIXME: hard code in v4,
     lineHeight: 1.5,
-  };
+  });
 
   return [
     genBaseStyle(listToken, hashId),

components/pagination/style/index.tsx

@@ -7,7 +7,7 @@ import {
   genInputSmallStyle,
   type InputToken,
 } from '../../input/style';
-import { resetComponent, genComponentStyleHook } from '../../_util/theme';
+import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
 import type { GenerateStyle, FullToken } from '../../_util/theme';
 
 interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
@@ -564,22 +564,24 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Pagination', token => {
-  const paginationToken: PaginationToken = {
-    ...token,
-    // FIXME: missing token
-    paginationItemSize: token.controlHeight,
-    paginationFontFamily: token.fontFamily,
-    paginationItemBg: token.colorBgComponent,
-    paginationItemBgActive: token.colorBgComponent,
-    paginationFontWeightActive: 500,
-    paginationItemSizeSM: 24,
-    paginationItemInputBg: token.colorBgComponent,
-    paginationMiniOptionsSizeChangerTop: 0,
-    paginationItemDisabledBgActive: new TinyColor('#000').tint(90).toString(), // tint(@black, 90%)
-    paginationItemDisabledColorActive: token.colorTextDisabled,
-    paginationItemLinkBg: token.colorBgComponent,
-    inputOutlineOffset: '0 0',
-    ...initInputToken(token),
-  };
+  const paginationToken = mergeToken<PaginationToken>(
+    token,
+    {
+      // FIXME: missing token
+      paginationItemSize: token.controlHeight,
+      paginationFontFamily: token.fontFamily,
+      paginationItemBg: token.colorBgComponent,
+      paginationItemBgActive: token.colorBgComponent,
+      paginationFontWeightActive: 500,
+      paginationItemSizeSM: 24,
+      paginationItemInputBg: token.colorBgComponent,
+      paginationMiniOptionsSizeChangerTop: 0,
+      paginationItemDisabledBgActive: new TinyColor('#000').tint(90).toString(), // tint(@black, 90%)
+      paginationItemDisabledColorActive: token.colorTextDisabled,
+      paginationItemLinkBg: token.colorBgComponent,
+      inputOutlineOffset: '0 0',
+    },
+    initInputToken(token),
+  );
   return [genPaginationStyle(paginationToken)];
 });

components/popover/style/index.tsx

@@ -15,6 +15,7 @@ import {
   roundedArrow,
   FullToken,
   genComponentStyleHook,
+  mergeToken,
 } from '../../_util/theme';
 
 // FIXME
@@ -352,8 +353,7 @@ export default genComponentStyleHook('Popover', token => {
   // FIXME
   const popoverArrowWidth = 8 * Math.sqrt(2);
 
-  const popoverToken: PopoverToken = {
-    ...token,
+  const popoverToken = mergeToken<PopoverToken>(token, {
     popoverBg,
     popoverColor: token.colorText,
     // FIXME
@@ -368,7 +368,7 @@ export default genComponentStyleHook('Popover', token => {
     // FIXME
     popoverArrowOffsetVertical: 12,
     popoverArrowOffsetHorizontal: 16,
-  };
+  });
 
   return [genBaseStyle(popoverToken), genPlacementStyle(popoverToken), genColorStyle(popoverToken)];
 });

components/rate/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { resetComponent, GenerateStyle, FullToken, genComponentStyleHook } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  FullToken,
+  genComponentStyleHook,
+  mergeToken,
+} from '../../_util/theme';
 
 interface RateToken extends FullToken<'Rate'> {
   rateStarColor: string;
@@ -119,12 +125,11 @@ const genRateStyle: GenerateStyle<RateToken> = token => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Rate', token => {
-  const rateToken: RateToken = {
-    ...token,
+  const rateToken = mergeToken<RateToken>(token, {
     // FIXME: missing token
     rateStarColor: '#fadb14', // @yellow-6
     rateStarSize: 20, // fixed-value
     rateStarHoverScale: 'scale(1.1)', // fixed-value
-  };
+  });
   return [genRateStyle(rateToken)];
 });

components/result/style/index.tsx

@@ -1,6 +1,6 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
+import { GenerateStyle, genComponentStyleHook, FullToken, mergeToken } from '../../_util/theme';
 
 interface ResultToken extends FullToken<'Result'> {
   resultTitleFontSize: number;
@@ -126,8 +126,7 @@ export default genComponentStyleHook('Result', token => {
   const resultSuccessIconColor = token.colorSuccess;
   const resultWarningIconColor = token.colorWarning;
 
-  const resultToken: ResultToken = {
-    ...token,
+  const resultToken = mergeToken<ResultToken>(token, {
     resultTitleFontSize,
     resultSubtitleFontSize,
     resultIconFontSize,
@@ -136,7 +135,7 @@ export default genComponentStyleHook('Result', token => {
     resultErrorIconColor,
     resultSuccessIconColor,
     resultWarningIconColor,
-  };
+  });
 
   return [getStyle(resultToken)];
 });

components/select/style/index.tsx

@@ -12,6 +12,7 @@ import {
   GenerateStyle,
   genComponentStyleHook,
   FullToken,
+  mergeToken,
 } from '../../_util/theme';
 import genSingleStyle from './single';
 import genMultipleStyle from './multiple';
@@ -304,27 +305,27 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
     // =====================================================
     // ==                     Status                      ==
     // =====================================================
-    genStatusStyle(componentCls, {
-      ...token,
-      borderHoverColor: token.colorPrimaryHover,
-      outlineColor: token.colorPrimaryOutline,
-    }),
+    genStatusStyle(
+      componentCls,
+      mergeToken<any>(token, {
+        borderHoverColor: token.colorPrimaryHover,
+        outlineColor: token.colorPrimaryOutline,
+      }),
+    ),
     genStatusStyle(
       `${componentCls}-status-error`,
-      {
-        ...token,
+      mergeToken<any>(token, {
         borderHoverColor: token.colorErrorHover,
         outlineColor: token.colorErrorOutline,
-      },
+      }),
       true,
     ),
     genStatusStyle(
       `${componentCls}-status-warning`,
-      {
-        ...token,
+      mergeToken<any>(token, {
         borderHoverColor: token.colorWarningHover,
         outlineColor: token.colorWarningOutline,
-      },
+      }),
       true,
     ),
   ];
@@ -334,11 +335,10 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
 export default genComponentStyleHook(
   'Select',
   (token, { rootPrefixCls, hashId }) => {
-    const selectToken: SelectToken = {
-      ...token,
+    const selectToken: SelectToken = mergeToken<SelectToken>(token, {
       rootPrefixCls,
       inputPaddingHorizontalBase: token.controlPaddingHorizontal - 1,
-    };
+    });
 
     return [genSelectStyle(selectToken, hashId)];
   },

components/select/style/multiple.tsx

@@ -1,6 +1,6 @@
 import { CSSObject, CSSInterpolation } from '@ant-design/cssinjs';
 import type { SelectToken } from '.';
-import { resetIcon } from '../../_util/theme';
+import { mergeToken, resetIcon } from '../../_util/theme';
 
 const FIXED_ITEM_MARGIN = 2;
 
@@ -192,11 +192,10 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
   const { componentCls } = token;
 
-  const smallToken: SelectToken = {
-    ...token,
+  const smallToken = mergeToken<SelectToken>(token, {
     controlHeight: token.controlHeightSM,
     controlHeightSM: token.controlHeightXS,
-  };
+  });
   const [, smSelectItemMargin] = getSelectItemStyle(token);
 
   return [
@@ -223,12 +222,11 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
     // ======================== Large ========================
     // Shared
     genSizeStyle(
-      {
-        ...token,
+      mergeToken<any>(token, {
         fontSize: token.fontSizeLG,
         controlHeight: token.controlHeightLG,
         controlHeightSM: token.controlHeight,
-      },
+      }),
       'lg',
     ),
   ];

components/select/style/single.tsx

@@ -1,4 +1,5 @@
 import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import { mergeToken } from '../../_util/theme';
 import type { SelectToken } from '.';
 
 function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
@@ -137,10 +138,9 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
     // ======================== Small ========================
     // Shared
     genSizeStyle(
-      {
-        ...token,
+      mergeToken<any>(token, {
         controlHeight: token.controlHeightSM,
-      },
+      }),
       'sm',
     ),
 
@@ -176,11 +176,10 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
     // ======================== Large ========================
     // Shared
     genSizeStyle(
-      {
-        ...token,
+      mergeToken<any>(token, {
         controlHeight: token.controlHeightLG,
         fontSize: token.fontSizeLG,
-      },
+      }),
       'lg',
     ),
   ];

components/skeleton/style/index.tsx

@@ -1,7 +1,7 @@
 // deps-lint-skip-all
 import { CSSObject, Keyframes } from '@ant-design/cssinjs';
 
-import { GenerateStyle, FullToken, genComponentStyleHook } from '../../_util/theme';
+import { GenerateStyle, FullToken, genComponentStyleHook, mergeToken } from '../../_util/theme';
 
 const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
   '0%': {
@@ -344,8 +344,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken, hashId
 export default genComponentStyleHook('Skeleton', (token, { hashId }) => {
   const { componentCls } = token;
 
-  const skeletonToken: SkeletonToken = {
-    ...token,
+  const skeletonToken = mergeToken<SkeletonToken>(token, {
     skeletonAvatarCls: `${componentCls}-avatar`,
     skeletonTitleCls: `${componentCls}-title`,
     skeletonParagraphCls: `${componentCls}-paragraph`,
@@ -361,6 +360,6 @@ export default genComponentStyleHook('Skeleton', (token, { hashId }) => {
     skeletonParagraphLiHeight: 16, // FIXME: hard code in v4
     skeletonParagraphMarginTop: 28, // FIXME: hard code in v4
     borderRadius: 100, // FIXME: hard code in v4
-  };
+  });
   return [genBaseStyle(skeletonToken, hashId)];
 });

components/slider/style/index.tsx

@@ -7,7 +7,13 @@
 // deps-lint-skip-all
 import * as React from 'react';
 import { CSSObject } from '@ant-design/cssinjs';
-import { GenerateStyle, resetComponent, FullToken, genComponentStyleHook } from '../../_util/theme';
+import {
+  GenerateStyle,
+  resetComponent,
+  FullToken,
+  genComponentStyleHook,
+  mergeToken,
+} from '../../_util/theme';
 
 // Direction naming standard:
 // Horizontal base:
@@ -277,12 +283,11 @@ const genVerticalStyle: GenerateStyle<SliderToken> = token => {
 export default genComponentStyleHook(
   'Slider',
   (token, { hashId }) => {
-    const sliderToken: SliderToken = {
-      ...token,
+    const sliderToken = mergeToken<SliderToken>(token, {
       marginPart: (token.controlHeight - token.controlSize) / 2,
       marginFull: token.controlSize / 2,
       marginPartWithMark: token.controlHeightLG - token.controlSize,
-    };
+    });
     return [
       genBaseStyle(sliderToken, hashId),
       genHorizontalStyle(sliderToken),

components/spin/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
 import { CSSObject, Keyframes } from '@ant-design/cssinjs';
-import { resetComponent, GenerateStyle, FullToken, genComponentStyleHook } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  FullToken,
+  genComponentStyleHook,
+  mergeToken,
+} from '../../_util/theme';
 
 interface SpinToken extends FullToken<'Spin'> {
   spinDotDefault: string;
@@ -216,12 +222,11 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Spin', (token, { hashId }) => {
-  const spinToken: SpinToken = {
-    ...token,
+  const spinToken = mergeToken<SpinToken>(token, {
     spinDotDefault: token.colorTextSecondary,
     spinDotSize: 20, // FIXME: hard code in v4
     spinDotSizeSM: 14, // FIXME: hard code in v4
     spinDotSizeLG: 32, // FIXME: hard code in v4
-  };
+  });
   return [genSpinStyle(spinToken, hashId)];
 });

components/statistic/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import { resetComponent, GenerateStyle, FullToken, genComponentStyleHook } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  FullToken,
+  genComponentStyleHook,
+  mergeToken,
+} from '../../_util/theme';
 
 interface StatisticToken extends FullToken<'Statistic'> {
   statisticTitleFontSize: number;
@@ -39,11 +45,10 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Statistic', token => {
-  const statisticToken: StatisticToken = {
-    ...token,
+  const statisticToken = mergeToken<StatisticToken>(token, {
     statisticTitleFontSize: token.fontSize,
     statisticContentFontSize: 24, // FIXME: hard code
     statisticFontFamily: token.fontFamily,
-  };
+  });
   return [genStatisticStyle(statisticToken)];
 });

components/switch/style/index.tsx

@@ -1,7 +1,13 @@
 // deps-lint-skip-all
 import { TinyColor } from '@ctrl/tinycolor';
 import { CSSObject } from '@ant-design/cssinjs';
-import { resetComponent, GenerateStyle, FullToken, genComponentStyleHook } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  FullToken,
+  genComponentStyleHook,
+  mergeToken,
+} from '../../_util/theme';
 
 interface SwitchToken extends FullToken<'Switch'> {
   switchMinWidth: number;
@@ -211,8 +217,7 @@ export default genComponentStyleHook('Switch', token => {
   const switchHeight = 22;
   const switchHeightSM = 16;
 
-  const switchToken: SwitchToken = {
-    ...token,
+  const switchToken = mergeToken<SwitchToken>(token, {
     // FIXME: missing token
     switchMinWidth: 44,
     switchHeight,
@@ -230,7 +235,7 @@ export default genComponentStyleHook('Switch', token => {
     switchInnerMarginMinSM: Math.ceil(switchHeight * 0.3),
     switchInnerMarginMaxSM: Math.ceil(switchHeight * 1.1),
     switchPinSizeSM: switchHeightSM - 4,
-  };
+  });
 
   return [genSwitchStyle(switchToken)];
 });

components/tabs/style/index.tsx

@@ -2,7 +2,13 @@
 import { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 
-import { resetComponent, GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
+import {
+  resetComponent,
+  GenerateStyle,
+  genComponentStyleHook,
+  FullToken,
+  mergeToken,
+} from '../../_util/theme';
 
 interface TabsToken extends FullToken<'Tabs'> {
   tabsCardHorizontalPadding: string;
@@ -855,9 +861,7 @@ export default genComponentStyleHook('Tabs', token => {
   const paddingMD = 16; // FIXME: hardcode in v4
   const tabsCardHeight = 40; // FIXME: hardcode in v4
 
-  const tabsToken: TabsToken = {
-    ...token,
-
+  const tabsToken = mergeToken<TabsToken>(token, {
     marginMD: 16, // FIXME: hardcode in v4
     paddingMD, // FIXME: hardcode in v4
     tabsHoverColor: '#40a9ff', // FIXME: hardcode in v4, primary-5
@@ -878,7 +882,7 @@ export default genComponentStyleHook('Tabs', token => {
     disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // FIXME: hardcode in v4
     boxShadowColor: new TinyColor('rgba(0, 0, 0, 0.15)').setAlpha(0.08).toRgbString(), // FIXME: hardcode in v4
     borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), // FIXME: hardcode in v4
-  };
+  });
 
   return [
     genSizeStyle(tabsToken),

components/tag/style/index.tsx

@@ -7,6 +7,7 @@ import {
   PresetColors,
   FullToken,
   genComponentStyleHook,
+  mergeToken,
 } from '../../_util/theme';
 
 interface TagToken extends FullToken<'Tag'> {
@@ -150,13 +151,12 @@ export default genComponentStyleHook('Tag', token => {
   const tagDefaultBg = token.colorBgComponentSecondary;
   const tagDefaultColor = token.colorText;
 
-  const tagToken = {
-    ...token,
+  const tagToken = mergeToken<TagToken>(token, {
     tagFontSize,
     tagLineHeight,
     tagDefaultBg,
     tagDefaultColor,
-  };
+  });
 
   return [
     genBaseStyle(tagToken),

components/tree-select/style/index.tsx

@@ -7,7 +7,7 @@
 // import '../../empty/style';
 
 // deps-lint-skip-all
-import { GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
+import { GenerateStyle, genComponentStyleHook, FullToken, mergeToken } from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { genTreeStyle } from '../../tree/style';
 
@@ -70,10 +70,9 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
 // ============================== Export ==============================
 export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
   return genComponentStyleHook('TreeSelect', (token, { hashId }) => {
-    const treeSelectToken: TreeSelectToken = {
-      ...token,
+    const treeSelectToken = mergeToken<TreeSelectToken>(token, {
       treePrefixCls,
-    };
+    });
     return [genBaseStyle(treeSelectToken, hashId)];
   })(prefixCls);
 }

components/tree/style/index.tsx

@@ -3,7 +3,12 @@
 
 // deps-lint-skip-all
 import { CSSObject, CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
-import { DerivativeToken, resetComponent, genComponentStyleHook } from '../../_util/theme';
+import {
+  DerivativeToken,
+  resetComponent,
+  genComponentStyleHook,
+  mergeToken,
+} from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 
 // ============================ Keyframes =============================
@@ -448,13 +453,12 @@ export const genTreeStyle = (
   const treeNodePadding = token.paddingXS / 2;
   const treeTitleHeight = token.controlHeightSM;
 
-  const treeToken = {
-    ...token,
+  const treeToken = mergeToken<TreeToken>(token, {
     treeCls,
     treeNodeCls,
     treeNodePadding,
     treeTitleHeight,
-  };
+  });
 
   return [
     // Basic

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import * as React from 'react';
-import { Table, Space, TableProps, ConfigProvider, Select, Row, Col } from 'antd';
+import { Table, Space, TableProps, ConfigProvider, Select, Row, Col, Alert } from 'antd';
 import { statistic } from '../../../../../components/_util/theme/util/statistic';
 
 const columns: TableProps<{ name: string; value: any }>['columns'] = [
@@ -102,6 +102,14 @@ export default () => {
           allowClear
         />
       </Col>
+      {filteredTokenList.length === tokenList.length && (
+        <Col span={24}>
+          <Alert
+            type="error"
+            message="Tokens here maybe a mistake because all tokens are listed. Please check if you are using deconstruction in this component."
+          />
+        </Col>
+      )}
       <Col span={24}>
         <Table
           dataSource={filteredTokenList}