refactor: color map token (#36285)

* refactor: map token

* fix: remove colorBase in maptoken

* chore: interface

* feat: genCommonMapToken

components/theme/interface.ts

@@ -202,18 +202,13 @@ export interface SeedToken extends PresetColorType {
   opacityImage: number;
 }
 
-// ======================================================================
+export interface ColorMapToken {
-// ==                         Map Token                         ==
-// ======================================================================
-// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
-export interface MapToken extends SeedToken, ColorPalettes {
   // Color
   /** Used for DefaultButton, Switch which has default outline */
   colorDefaultOutline: string;
 
   colorPrimaryHover: string;
   colorPrimaryActive: string;
-  colorPrimaryOutline: string;
   colorPrimaryBorder: string; // primary[2]
   colorPrimaryBorderHover: string;
 
@@ -222,13 +217,11 @@ export interface MapToken extends SeedToken, ColorPalettes {
 
   colorWarningHover: string;
   colorWarningActive: string;
-  colorWarningOutline: string;
   colorWarningBorder: string;
   colorWarningBg: string;
 
   colorErrorHover: string;
   colorErrorActive: string;
-  colorErrorOutline: string;
   colorErrorBorder: string;
   colorErrorBg: string;
 
@@ -245,7 +238,32 @@ export interface MapToken extends SeedToken, ColorPalettes {
   colorBgElevated: string;
   /** Color of component background */
   colorBgContainer: string;
+  colorBgContainerSecondary: string;
+  colorBgContainerDisabled: string;
 
+  colorBorder: string;
+  colorBorderSecondary: string;
+  colorSplit: string;
+
+  // Color
+  colorText: string;
+  colorTextSecondary: string;
+  colorTextDisabled: string;
+  /** Placeholder text color */
+  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;
+
+  colorLink: string;
+  colorLinkHover: string;
+  colorLinkActive: string;
+}
+
+export interface CommonMapToken {
   // Font
   fontSizes: number[];
   lineHeights: number[];
@@ -281,6 +299,16 @@ export interface MapToken extends SeedToken, ColorPalettes {
   controlHeightXS: number;
   controlHeightSM: number;
   controlHeightLG: number;
+}
+
+// ======================================================================
+// ==                         Map Token                         ==
+// ======================================================================
+// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
+export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, CommonMapToken {
+  colorPrimaryOutline: string;
+  colorWarningOutline: string;
+  colorErrorOutline: string;
 
   // Map Token
   bgColors: BgPalettes;
@@ -332,27 +360,6 @@ export interface AliasToken extends MapToken {
   controlInteractiveSize: number;
   controlItemBgActiveDisabled: string; // Note. It also is a color
 
-  // Color
-  colorBorder: string;
-  colorSplit: string;
-  colorTextSecondary: string;
-  colorTextDisabled: string;
-  /** Placeholder text color */
-  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;
-
-  colorLink: string;
-  colorLinkHover: string;
-  colorLinkActive: string;
-
-  colorBgContainerSecondary: string;
-  colorBgContainerDisabled: string;
-
   // =============== Legacy: should be remove ===============
   opacityLoading: number;
 
@@ -401,7 +408,6 @@ export interface AliasToken extends MapToken {
   screenXXLMax: number;
 
   controlMaskBg: string;
-  colorBorderSecondary: string;
 
   // FIXME: component box-shadow, should be removed
   boxShadowPopoverArrow: string;

components/theme/themes/IPalettes.ts

@@ -1,3 +1,42 @@
+export interface PrimaryPalettes {
+  0: string;
+  1: string;
+  2: string;
+  3: string;
+  4: string;
+  5: string;
+  6: string;
+  7: string;
+}
+
+export interface SuccessPalettes {
+  1: string;
+  3: string;
+  6: string;
+}
+
+export interface WarningPalettes {
+  1: string;
+  3: string;
+  5: string;
+  6: string;
+  7: string;
+}
+
+export interface ErrorPalettes {
+  1: string;
+  3: string;
+  5: string;
+  6: string;
+  7: string;
+}
+
+export interface InfoPalettes {
+  1: string;
+  3: string;
+  6: string;
+}
+
 export interface TextAlphaPalettes {
   85: string;
   65: string;
@@ -16,6 +55,7 @@ export interface TextAlphaPalettes {
   // 文本 hover 色
   3: string;
 }
+
 export interface BgPalettes {
   // 作为比较重的描边或者填充内容
   26: string;

components/theme/themes/dark/index.ts

@@ -2,27 +2,20 @@ import { generate } from '@ant-design/colors';
 import { TinyColor } from '@ctrl/tinycolor';
 import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
 import { defaultPresetColors } from '../seed';
-import { getFontSizes } from '../shared';
+import genColorMapToken from '../shared/genColorMapToken';
-import { generateBgPalettes, generateTextAlphaPalettes } from './palettes';
+import genCommonMapToken from '../shared/genCommonMapToken';
+import {
+  generateBgPalettes,
+  generateErrorPalettes,
+  generateInfoPalettes,
+  generatePrimaryPalettes,
+  generateSuccessPalettes,
+  generateTextAlphaPalettes,
+  generateWarningPalettes,
+} from './palettes';
 
 export default function derivative(token: SeedToken): MapToken {
-  const {
+  const { colorPrimary, colorSuccess, colorWarning, colorError, colorInfo } = token;
-    colorPrimary,
-    colorSuccess,
-    colorWarning,
-    colorError,
-    colorInfo,
-    motionUnit,
-    motionBase,
-    fontSizeBase,
-    sizeUnit,
-    sizeBaseStep,
-    gridUnit,
-    gridBaseStep,
-    radiusBase,
-    controlHeight,
-    lineWidth,
-  } = token;
 
   const colorPalettes = Object.keys(defaultPresetColors)
     .map((colorKey: keyof PresetColorType) => {
@@ -41,88 +34,34 @@ export default function derivative(token: SeedToken): MapToken {
       return prev;
     }, {} as ColorPalettes);
 
-  const primaryColors = generate(colorPrimary, { theme: 'dark' });
+  const primaryColors = generatePrimaryPalettes(colorPrimary);
-  const successColors = generate(colorSuccess, { theme: 'dark' });
+  const successColors = generateSuccessPalettes(colorSuccess);
-  const warningColors = generate(colorWarning, { theme: 'dark' });
+  const warningColors = generateWarningPalettes(colorWarning);
-  const errorColors = generate(colorError, { theme: 'dark' });
+  const errorColors = generateErrorPalettes(colorError);
-  const infoColors = generate(colorInfo, { theme: 'dark' });
+  const infoColors = generateInfoPalettes(colorInfo);
   const bgColors = generateBgPalettes('#000');
   const textColors = generateTextAlphaPalettes('#fff');
 
-  const fontSizes = getFontSizes(fontSizeBase);
-
   return {
     ...token,
     ...colorPalettes,
 
-    // motion
+    // Colors
-    motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`,
+    ...genColorMapToken({
-    motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
+      primaryPalettes: primaryColors,
-    motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
+      successPalettes: successColors,
+      warningPalettes: warningColors,
+      errorPalettes: errorColors,
+      infoPalettes: infoColors,
+      bgPalettes: bgColors,
+      textAlphaPalettes: textColors,
+    }),
 
-    // font
-    fontSizes: fontSizes.map(fs => fs.size),
-    lineHeights: fontSizes.map(fs => fs.lineHeight),
-
-    // size
-    sizeSpaceSM: sizeUnit * (sizeBaseStep - 1),
-    sizeSpace: sizeUnit * sizeBaseStep,
-    sizeSpaceXS: sizeUnit * (sizeBaseStep - 2),
-    sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3),
-
-    // grid
-    gridSpaceSM: gridUnit * (gridBaseStep - 1),
-    gridSpaceBase: gridUnit * gridBaseStep,
-    gridSpaceLG: gridUnit * (gridBaseStep + 1),
-    gridSpaceXL: gridUnit * (gridBaseStep + 2),
-    gridSpaceXXL: gridUnit * (gridBaseStep + 5),
-
-    // line
-    lineWidthBold: lineWidth + 1,
-
-    // radius
-    radiusSM: radiusBase / 2,
-    radiusLG: radiusBase * 2,
-    radiusXL: radiusBase * 4,
-
-    colorDefaultOutline: textColors['4'],
-
-    colorPrimaryActive: primaryColors[6],
-    colorPrimaryHover: primaryColors[4],
     colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
-    colorPrimaryBorder: primaryColors[2],
-    colorPrimaryBorderHover: primaryColors[3],
-
-    colorSuccessBorder: successColors[2],
-    colorSuccessBg: successColors[0],
-
-    colorErrorActive: errorColors[6],
-    colorErrorHover: errorColors[4],
     colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
-    colorErrorBorder: errorColors[2],
-    colorErrorBg: errorColors[0],
-
-    colorWarningActive: warningColors[6],
-    colorWarningHover: warningColors[4],
     colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
-    colorWarningBorder: warningColors[2],
-    colorWarningBg: warningColors[0],
 
-    colorInfoBorder: infoColors[2],
+    ...genCommonMapToken(token),
-    colorInfoBg: infoColors[0],
-
-    colorHighlight: errorColors[4],
-
-    colorBgLayout: bgColors['0'],
-    colorBgContentHover: bgColors['26'],
-    colorBgContainer: bgColors['8'],
-    colorBgElevated: bgColors['12'],
-    colorBgContent: bgColors['15'],
-
-    // control
-    controlHeightSM: controlHeight * 0.75,
-    controlHeightXS: controlHeight * 0.5,
-    controlHeightLG: controlHeight * 1.25,
 
     // map token
     bgColors,

components/theme/themes/dark/palettes.ts

@@ -1,6 +1,69 @@
-import type { BgPalettes, TextAlphaPalettes } from '../IPalettes';
+import { generate } from '@ant-design/colors';
+import type {
+  BgPalettes,
+  ErrorPalettes,
+  InfoPalettes,
+  PrimaryPalettes,
+  SuccessPalettes,
+  TextAlphaPalettes,
+  WarningPalettes,
+} from '../IPalettes';
 import { getAlphaColor, getSolidColor } from './colorAlgorithm';
 
+export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalettes {
+  const primaryColors = generate(primaryBaseColor, { theme: 'dark' });
+  return {
+    0: '#0e161f',
+    1: primaryColors[0],
+    2: primaryColors[1],
+    3: primaryColors[2],
+    4: primaryColors[3],
+    5: primaryColors[4],
+    6: primaryColors[5],
+    7: primaryColors[6],
+  };
+}
+
+export function generateSuccessPalettes(successBaseColor: string): SuccessPalettes {
+  const successColors = generate(successBaseColor, { theme: 'dark' });
+  return {
+    1: successColors[0],
+    3: successColors[2],
+    6: successColors[5],
+  };
+}
+
+export function generateErrorPalettes(errorBaseColor: string): ErrorPalettes {
+  const errorColors = generate(errorBaseColor, { theme: 'dark' });
+  return {
+    1: errorColors[0],
+    3: errorColors[2],
+    5: errorColors[4],
+    6: errorColors[5],
+    7: errorColors[6],
+  };
+}
+
+export function generateWarningPalettes(warningBaseColor: string): WarningPalettes {
+  const warningColors = generate(warningBaseColor, { theme: 'dark' });
+  return {
+    1: warningColors[0],
+    3: warningColors[2],
+    5: warningColors[4],
+    6: warningColors[5],
+    7: warningColors[6],
+  };
+}
+
+export function generateInfoPalettes(infoBaseColor: string): InfoPalettes {
+  const infoColors = generate(infoBaseColor, { theme: 'dark' });
+  return {
+    1: infoColors[0],
+    3: infoColors[2],
+    6: infoColors[5],
+  };
+}
+
 export function generateBgPalettes(bgBaseColor: string): BgPalettes {
   return {
     'light-2': getSolidColor(bgBaseColor, 2),

components/theme/themes/default/index.ts

@@ -2,28 +2,20 @@ import { generate } from '@ant-design/colors';
 import { TinyColor } from '@ctrl/tinycolor';
 import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
 import { defaultPresetColors } from '../seed';
-import { getFontSizes } from '../shared';
+import genColorMapToken from '../shared/genColorMapToken';
-import { generateBgPalettes, generateTextAlphaPalettes } from './palettes';
+import genCommonMapToken from '../shared/genCommonMapToken';
+import {
+  generateBgPalettes,
+  generateErrorPalettes,
+  generateInfoPalettes,
+  generatePrimaryPalettes,
+  generateSuccessPalettes,
+  generateTextAlphaPalettes,
+  generateWarningPalettes,
+} from './palettes';
 
 export default function derivative(token: SeedToken): MapToken {
-  const {
+  const { colorPrimary, colorSuccess, colorWarning, colorError, colorInfo, colorBg } = token;
-    colorPrimary,
-    colorSuccess,
-    colorWarning,
-    colorError,
-    colorInfo,
-    colorBg,
-    motionUnit,
-    motionBase,
-    fontSizeBase,
-    sizeUnit,
-    sizeBaseStep,
-    gridUnit,
-    gridBaseStep,
-    radiusBase,
-    controlHeight,
-    lineWidth,
-  } = token;
 
   const colorPalettes = Object.keys(defaultPresetColors)
     .map((colorKey: keyof PresetColorType) => {
@@ -42,91 +34,35 @@ export default function derivative(token: SeedToken): MapToken {
       return prev;
     }, {} as ColorPalettes);
 
-  const primaryColors = generate(colorPrimary);
+  const primaryColors = generatePrimaryPalettes(colorPrimary);
-  const successColors = generate(colorSuccess);
+  const successColors = generateSuccessPalettes(colorSuccess);
-  const warningColors = generate(colorWarning);
+  const warningColors = generateWarningPalettes(colorWarning);
-  const errorColors = generate(colorError);
+  const errorColors = generateErrorPalettes(colorError);
-  const infoColors = generate(colorInfo);
+  const infoColors = generateInfoPalettes(colorInfo);
   const bgColors = generateBgPalettes(colorBg);
-  // FIXME: need seedToken '#000'
   const textColors = generateTextAlphaPalettes('#000');
 
-  const fontSizes = getFontSizes(fontSizeBase);
-
   return {
     ...token,
     ...colorPalettes,
 
-    // motion
+    // Colors
-    motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`,
+    ...genColorMapToken({
-    motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
+      primaryPalettes: primaryColors,
-    motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
+      successPalettes: successColors,
-
+      warningPalettes: warningColors,
-    // font
+      errorPalettes: errorColors,
-    fontSizes: fontSizes.map(fs => fs.size),
+      infoPalettes: infoColors,
-    lineHeights: fontSizes.map(fs => fs.lineHeight),
+      bgPalettes: bgColors,
-
+      textAlphaPalettes: textColors,
-    // size
+    }),
-    sizeSpaceSM: sizeUnit * (sizeBaseStep - 1),
-    sizeSpace: sizeUnit * sizeBaseStep,
-    sizeSpaceXS: sizeUnit * (sizeBaseStep - 2),
-    sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3),
-
-    // grid
-    gridSpaceSM: gridUnit * (gridBaseStep - 1),
-    gridSpaceBase: gridUnit * gridBaseStep,
-    gridSpaceLG: gridUnit * (gridBaseStep + 1),
-    gridSpaceXL: gridUnit * (gridBaseStep + 2),
-    gridSpaceXXL: gridUnit * (gridBaseStep + 5),
-
-    // line
-    lineWidthBold: lineWidth + 1,
-
-    // radius
-    radiusSM: radiusBase / 2,
-    radiusLG: radiusBase * 2,
-    radiusXL: radiusBase * 4,
-
-    colorDefaultOutline: textColors['4'],
-
-    colorPrimaryActive: primaryColors[6],
-    colorPrimaryHover: primaryColors[4],
     colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
-    colorPrimaryBorder: primaryColors[2],
-    colorPrimaryBorderHover: primaryColors[3],
-
-    colorSuccessBorder: successColors[2],
-    colorSuccessBg: successColors[0],
-
-    colorErrorActive: errorColors[6],
-    colorErrorHover: errorColors[4],
     colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
-    colorErrorBorder: errorColors[2],
-    colorErrorBg: errorColors[0],
-
-    colorWarningActive: warningColors[6],
-    colorWarningHover: warningColors[4],
     colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
-    colorWarningBorder: warningColors[2],
-    colorWarningBg: warningColors[0],
 
-    colorInfoBorder: infoColors[2],
+    ...genCommonMapToken(token),
-    colorInfoBg: infoColors[0],
 
-    colorHighlight: errorColors[4],
+    // FIXME: should be removed
-
-    colorBgLayout: bgColors['0'],
-    colorBgContentHover: bgColors['26'],
-    colorBgContainer: bgColors['8'],
-    colorBgElevated: bgColors['12'],
-    colorBgContent: bgColors['15'],
-
-    // control
-    controlHeightSM: controlHeight * 0.75,
-    controlHeightXS: controlHeight * 0.5,
-    controlHeightLG: controlHeight * 1.25,
-
-    // map token
     bgColors,
     textColors,
   };

components/theme/themes/default/palettes.ts

@@ -1,6 +1,69 @@
-import type { BgPalettes, TextAlphaPalettes } from '../IPalettes';
+import { generate } from '@ant-design/colors';
+import type {
+  BgPalettes,
+  ErrorPalettes,
+  InfoPalettes,
+  PrimaryPalettes,
+  SuccessPalettes,
+  TextAlphaPalettes,
+  WarningPalettes,
+} from '../IPalettes';
 import { getAlphaColor, getSolidColor } from './colorAlgorithm';
 
+export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalettes {
+  const primaryColors = generate(primaryBaseColor);
+  return {
+    0: '#0e161f',
+    1: primaryColors[0],
+    2: primaryColors[1],
+    3: primaryColors[2],
+    4: primaryColors[3],
+    5: primaryColors[4],
+    6: primaryColors[5],
+    7: primaryColors[6],
+  };
+}
+
+export function generateSuccessPalettes(successBaseColor: string): SuccessPalettes {
+  const successColors = generate(successBaseColor);
+  return {
+    1: successColors[0],
+    3: successColors[2],
+    6: successColors[5],
+  };
+}
+
+export function generateErrorPalettes(errorBaseColor: string): ErrorPalettes {
+  const errorColors = generate(errorBaseColor);
+  return {
+    1: errorColors[0],
+    3: errorColors[2],
+    5: errorColors[4],
+    6: errorColors[5],
+    7: errorColors[6],
+  };
+}
+
+export function generateWarningPalettes(warningBaseColor: string): WarningPalettes {
+  const warningColors = generate(warningBaseColor);
+  return {
+    1: warningColors[0],
+    3: warningColors[2],
+    5: warningColors[4],
+    6: warningColors[5],
+    7: warningColors[6],
+  };
+}
+
+export function generateInfoPalettes(infoBaseColor: string): InfoPalettes {
+  const infoColors = generate(infoBaseColor);
+  return {
+    1: infoColors[0],
+    3: infoColors[2],
+    6: infoColors[5],
+  };
+}
+
 export function generateBgPalettes(bgBaseColor: string): BgPalettes {
   return {
     26: getSolidColor(bgBaseColor, 15),

components/theme/themes/shared/genColorMapToken.ts

@@ -0,0 +1,86 @@
+import type { ColorMapToken } from '../../interface';
+import type {
+  BgPalettes,
+  ErrorPalettes,
+  InfoPalettes,
+  PrimaryPalettes,
+  SuccessPalettes,
+  TextAlphaPalettes,
+  WarningPalettes,
+} from '../IPalettes';
+
+interface PaletteSheets {
+  primaryPalettes: PrimaryPalettes;
+  successPalettes: SuccessPalettes;
+  errorPalettes: ErrorPalettes;
+  warningPalettes: WarningPalettes;
+  infoPalettes: InfoPalettes;
+  textAlphaPalettes: TextAlphaPalettes;
+  bgPalettes: BgPalettes;
+}
+
+export default function genColorMapToken({
+  primaryPalettes,
+  successPalettes,
+  errorPalettes,
+  warningPalettes,
+  infoPalettes,
+  textAlphaPalettes,
+  bgPalettes,
+}: PaletteSheets): ColorMapToken {
+  return {
+    colorPrimaryHover: primaryPalettes['5'],
+    colorPrimaryActive: primaryPalettes['7'],
+    colorPrimaryBorder: primaryPalettes['3'],
+    colorPrimaryBorderHover: primaryPalettes['4'],
+
+    colorSuccessBg: successPalettes['1'],
+    colorSuccessBorder: successPalettes['3'],
+
+    colorErrorBg: errorPalettes['1'],
+    colorErrorBorder: errorPalettes['3'],
+    colorErrorHover: errorPalettes['5'],
+    colorErrorActive: errorPalettes['7'],
+
+    colorWarningBg: warningPalettes['1'],
+    colorWarningBorder: warningPalettes['3'],
+    colorWarningHover: warningPalettes['5'],
+    colorWarningActive: warningPalettes['7'],
+
+    colorInfoBg: infoPalettes['1'],
+    colorInfoBorder: infoPalettes['3'],
+
+    colorLink: primaryPalettes['6'],
+    colorLinkHover: primaryPalettes['5'],
+    colorLinkActive: primaryPalettes['7'],
+
+    colorDefaultOutline: textAlphaPalettes['4'],
+
+    // ============== Background ============== //
+    colorBgLayout: bgPalettes['0'],
+    colorBgElevated: bgPalettes['12'],
+    colorBgContainer: bgPalettes['8'],
+    colorBgContainerSecondary: textAlphaPalettes['4'],
+    colorBgContainerDisabled: textAlphaPalettes['8'],
+    colorBgContent: bgPalettes['15'],
+    colorBgContentHover: bgPalettes['26'],
+
+    // ============== Split ============== //
+    colorBorder: bgPalettes['26'],
+    colorBorderSecondary: bgPalettes['19'],
+    colorSplit: textAlphaPalettes['12'],
+
+    // ============== Text ============== //
+    colorText: textAlphaPalettes['85'],
+    colorTextHeading: textAlphaPalettes['85'],
+    colorTextSecondary: textAlphaPalettes['45'],
+    // TODO: 这个 30 估计要改成 25
+    colorTextDisabled: textAlphaPalettes['30'],
+    colorTextPlaceholder: textAlphaPalettes['25'],
+
+    colorAction: textAlphaPalettes['45'],
+    colorActionHover: textAlphaPalettes['85'],
+
+    colorHighlight: errorPalettes['5'],
+  };
+}

components/theme/themes/shared/genCommonMapToken.ts

@@ -0,0 +1,56 @@
+import type { CommonMapToken, SeedToken } from '../../interface';
+import genFontSizes from './genFontSizes';
+
+export default function genCommonMapToken(token: SeedToken): CommonMapToken {
+  const {
+    motionUnit,
+    motionBase,
+    fontSizeBase,
+    sizeUnit,
+    sizeBaseStep,
+    gridUnit,
+    gridBaseStep,
+    radiusBase,
+    controlHeight,
+    lineWidth,
+  } = token;
+
+  const fontSizes = genFontSizes(fontSizeBase);
+
+  return {
+    // motion
+    motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`,
+    motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
+    motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
+
+    // font
+    fontSizes: fontSizes.map(fs => fs.size),
+    lineHeights: fontSizes.map(fs => fs.lineHeight),
+
+    // size
+    sizeSpaceSM: sizeUnit * (sizeBaseStep - 1),
+    sizeSpace: sizeUnit * sizeBaseStep,
+    sizeSpaceXS: sizeUnit * (sizeBaseStep - 2),
+    sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3),
+
+    // grid
+    gridSpaceSM: gridUnit * (gridBaseStep - 1),
+    gridSpaceBase: gridUnit * gridBaseStep,
+    gridSpaceLG: gridUnit * (gridBaseStep + 1),
+    gridSpaceXL: gridUnit * (gridBaseStep + 2),
+    gridSpaceXXL: gridUnit * (gridBaseStep + 5),
+
+    // line
+    lineWidthBold: lineWidth + 1,
+
+    // radius
+    radiusSM: radiusBase / 2,
+    radiusLG: radiusBase * 2,
+    radiusXL: radiusBase * 4,
+
+    // control
+    controlHeightSM: controlHeight * 0.75,
+    controlHeightXS: controlHeight * 0.5,
+    controlHeightLG: controlHeight * 1.25,
+  };
+}

components/theme/themes/shared/genFontSizes.ts

@@ -1,7 +1,5 @@
-/* eslint-disable import/prefer-default-export */
-
 // https://zhuanlan.zhihu.com/p/32746810
-export function getFontSizes(base: number) {
+export default function getFontSizes(base: number) {
   const fontSizes = new Array(10).fill(null).map((_, index) => {
     const i = index - 1;
     const baseSize = base * 2.71828 ** (i / 5);

components/theme/util/alias.ts

@@ -18,7 +18,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     ...derivative,
   };
 
-  const { fontSizes, lineHeights, textColors, bgColors } = mergedToken;
+  const { fontSizes, lineHeights, textColors } = mergedToken;
 
   // FIXME: tmp
   const primaryColors = generate(mergedToken.colorPrimary);
@@ -39,34 +39,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
   const aliasToken: AliasToken = {
     ...mergedToken,
 
-    // Colors
-    colorText: textColors['85'],
-    // TODO: 只有 Slider 用了，感觉命名有问题
-    colorTextSecondary: textColors['45'],
-    // TODO: 这个 30 估计要改成 25
-    colorTextDisabled: textColors['30'],
-    colorTextPlaceholder: textColors['25'],
-    colorTextHeading: textColors['85'],
-
-    // TODO：Menu 用了这个 感觉命名有问题
-    // TODO：能不能用透明色？用透明色会造成重叠后变亮的问题，是不是得用实色？
-    colorBgContainerSecondary: textColors['4'],
-    colorBgContainerDisabled: textColors['8'],
-
-    colorLink: mergedToken.colorPrimary,
-    colorLinkHover: primaryColors[4],
-    colorLinkActive: primaryColors[6],
-
-    // TODO: 确认 Action 的色彩关系
-    colorAction: textColors['45'],
-    colorActionHover: textColors['85'],
-
-    // Split
-    colorBorder: bgColors['26'],
-    // TODO：Secondary 在纯实色背景下的颜色和 Split 是一样的
-    colorBorderSecondary: bgColors['19'],
-    colorSplit: textColors['12'],
-
     // Font
     fontSizeSM,
     fontSize: fontSizes[1],
@@ -110,11 +82,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     fontWeightStrong: 600,
 
     // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
-    // FIXME: Handle this when derivative is ready
-    // primaryColors,
-    // warningColors,
-    // errorColors,
-
     opacityLoading: 0.65,
 
     colorSuccessBorder: successColors[2],