fix(theme): use pre-compiled color presets to improve runtime performance (#49714)

components/theme/__tests__/token.test.tsx

@@ -56,6 +56,7 @@ describe('Theme', () => {
         theme={{
           token: {
             colorPrimary: '#ff0000',
+            orange: '#ff8800',
           },
         }}
       >
@@ -67,6 +68,8 @@ describe('Theme', () => {
       expect.objectContaining({
         colorPrimary: '#ff0000',
         colorPrimaryHover: '#ff3029', // It's safe to modify if theme logic changed
+        orange6: '#ff8800',
+        orange9: '#8c3d00', // It's safe to modify if theme logic changed
       }),
     );
   });

components/theme/themes/default/index.ts

@@ -1,4 +1,4 @@
-import { generate } from '@ant-design/colors';
+import { generate, presetPalettes, presetPrimaryColors } from '@ant-design/colors';
 
 import type { MapToken, PresetColorType, SeedToken } from '../../interface';
 import { defaultPresetColors } from '../seed';
@@ -10,9 +10,15 @@ import genSizeMapToken from '../shared/genSizeMapToken';
 import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
 
 export default function derivative(token: SeedToken): MapToken {
+  // pink is deprecated name of magenta, keep this for backwards compatibility
+  presetPrimaryColors.pink = presetPrimaryColors.magenta;
+  presetPalettes.pink = presetPalettes.magenta;
   const colorPalettes = Object.keys(defaultPresetColors)
     .map((colorKey) => {
-      const colors = generate(token[colorKey as keyof PresetColorType]);
+      const colors =
+        token[colorKey as keyof PresetColorType] === presetPrimaryColors[colorKey]
+          ? presetPalettes[colorKey]
+          : generate(token[colorKey as keyof PresetColorType]);
       return new Array(10).fill(1).reduce((prev, _, i) => {
         prev[`${colorKey}-${i + 1}`] = colors[i];
         prev[`${colorKey}${i + 1}`] = colors[i];

components/theme/themes/seed.ts

@@ -1,12 +1,15 @@
 import type { PresetColorType, SeedToken } from '../internal';
 
 export const defaultPresetColors: PresetColorType = {
-  blue: '#1677ff',
+  blue: '#1677FF',
   purple: '#722ED1',
   cyan: '#13C2C2',
   green: '#52C41A',
   magenta: '#EB2F96',
-  pink: '#eb2f96',
+  /**
+   * @deprecated Use magenta instead
+   */
+  pink: '#EB2F96',
   red: '#F5222D',
   orange: '#FA8C16',
   yellow: '#FADB14',