refactor: refactor token types (#36242)

* refactor: refactor token types

* chore: code clean

components/_util/theme/index.tsx

@@ -5,8 +5,8 @@ import version from '../../version';
 import type { DeepPartial } from '../type';
 import type {
   AliasToken,
-  DerivativeToken,
   GlobalToken,
+  MapToken,
   OverrideToken,
   PresetColorType,
   SeedToken,
@@ -50,7 +50,7 @@ export type {
 // ================================ Context =================================
 export const DesignTokenContext = React.createContext<{
   token: Partial<SeedToken>;
-  derivative?: (token: SeedToken) => DerivativeToken;
+  derivative?: (token: SeedToken) => MapToken;
   override?: DeepPartial<OverrideToken>;
   hashed?: string | boolean;
 }>({
@@ -63,7 +63,7 @@ export const DesignTokenContext = React.createContext<{
 const saltPrefix =
   process.env.NODE_ENV === 'production' ? version : `${version}-${new Date().getHours()}`;
 
-export function useToken(): [Theme<SeedToken, DerivativeToken>, GlobalToken, string] {
+export function useToken(): [Theme<SeedToken, MapToken>, GlobalToken, string] {
   const {
     token: rootDesignToken,
     override,

components/_util/theme/interface.ts

@@ -41,6 +41,7 @@ import type { ComponentToken as TooltipComponentToken } from '../../tooltip/styl
 import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
 import type { ComponentToken as UploadComponentToken } from '../../upload/style';
+import type { DeepPartial } from '../type';
 import type { BgPalettes, TextAlphaPalettes } from './themes/IPalettes';
 
 export const PresetColors = [
@@ -69,12 +70,7 @@ export type ColorPalettes = {
   [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
 };
 
-export interface OverrideToken {
-  derivative?: Partial<DerivativeToken>;
-  /** @private Internal Usage */
-  alias?: Partial<AliasToken>;
-
-  // Customize component
+export interface ComponentTokenMap {
   Affix?: {};
   Alert?: AlertComponentToken;
   Anchor?: AnchorComponentToken;
@@ -135,8 +131,14 @@ export interface OverrideToken {
   Progress?: ProgressComponentToken;
 }
 
+export interface OverrideToken extends DeepPartial<ComponentTokenMap> {
+  derivative?: Partial<MapToken>;
+  /** @private Internal Usage */
+  alias?: Partial<AliasToken>;
+}
+
 /** Final token which contains the components level override */
-export type GlobalToken = AliasToken & Omit<OverrideToken, 'derivative' | 'alias'>;
+export type GlobalToken = AliasToken & ComponentTokenMap;
 
 // ======================================================================
 // ==                            Seed Token                            ==
@@ -201,10 +203,10 @@ export interface SeedToken extends PresetColorType {
 }
 
 // ======================================================================
-// ==                         Derivative Token                         ==
+// ==                         Map Token                         ==
 // ======================================================================
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
-export interface DerivativeToken extends SeedToken, ColorPalettes {
+export interface MapToken extends SeedToken, ColorPalettes {
   // Color
   /** Used for DefaultButton, Switch which has default outline */
   colorDefaultOutline: string;
@@ -281,7 +283,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
 // ======================================================================
 // FIXME: DerivativeToken should part pick
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
-export interface AliasToken extends DerivativeToken {
+export interface AliasToken extends MapToken {
   // Font
   fontSizeSM: number;
   fontSize: number;

components/_util/theme/themes/dark/index.ts

@@ -1,11 +1,11 @@
 import { generate } from '@ant-design/colors';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../../interface';
+import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
 import { defaultPresetColors } from '../seed';
 import { getFontSizes } from '../shared';
 import { generateBgPalettes, generateTextAlphaPalettes } from './palettes';
 
-export default function derivative(token: SeedToken): DerivativeToken {
+export default function derivative(token: SeedToken): MapToken {
   const {
     colorPrimary,
     colorSuccess,

components/_util/theme/themes/default/index.ts

@@ -1,11 +1,11 @@
 import { generate } from '@ant-design/colors';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../../interface';
+import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
 import { defaultPresetColors } from '../seed';
 import { getFontSizes } from '../shared';
 import { generateBgPalettes, generateTextAlphaPalettes } from './palettes';
 
-export default function derivative(token: SeedToken): DerivativeToken {
+export default function derivative(token: SeedToken): MapToken {
   const {
     colorPrimary,
     colorSuccess,

components/_util/theme/util/alias.ts

@@ -1,9 +1,9 @@
 import { generate } from '@ant-design/colors';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { AliasToken, DerivativeToken, OverrideToken } from '../interface';
+import type { AliasToken, MapToken, OverrideToken } from '../interface';
 
 /** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
-type RawMergedToken = DerivativeToken & OverrideToken;
+type RawMergedToken = MapToken & OverrideToken;
 
 /**
  * Seed (designer) > Derivative (designer) > Alias (developer).
@@ -178,8 +178,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     screenXXLMin: screenXXL,
     screenXXLMax: screenXXL - 1,
 
-    motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
-
     // FIXME: component box-shadow, should be removed
     boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
     boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`,

components/_util/theme/util/genComponentStyleHook.ts

@@ -5,12 +5,12 @@ import { useContext } from 'react';
 import { ConfigContext } from '../../../config-provider/context';
 import type { UseComponentStyleResult } from '../index';
 import { mergeToken, statisticToken, useToken } from '../index';
-import type { GlobalToken, OverrideToken } from '../interface';
+import type { ComponentTokenMap, GlobalToken } from '../interface';
 
-export type OverrideTokenWithoutDerivative = Omit<OverrideToken, 'derivative' | 'alias'>;
+export type OverrideTokenWithoutDerivative = ComponentTokenMap;
 export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
 export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
-  OverrideToken[ComponentName];
+  ComponentTokenMap[ComponentName];
 
 export interface StyleInfo {
   hashId: string;

components/config-provider/context.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale-provider';
-import type { DerivativeToken, OverrideToken, SeedToken } from '../_util/theme/interface';
-import type { DeepPartial } from '../_util/type';
+import type { MapToken, OverrideToken, SeedToken } from '../_util/theme/interface';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import type { SizeType } from './SizeContext';
 
@@ -25,8 +24,8 @@ export type DirectionType = 'ltr' | 'rtl' | undefined;
 
 export interface ThemeConfig {
   token?: Partial<SeedToken>;
-  override?: DeepPartial<OverrideToken>;
-  derivative?: (token: SeedToken) => DerivativeToken;
+  override?: OverrideToken;
+  derivative?: (token: SeedToken) => MapToken;
   hashed?: boolean;
 }