perf: optimize interface color matching

packages/@core/shared/toolkit/package.json

@@ -36,14 +36,14 @@
     }
   },
   "dependencies": {
-    "@ant-design/colors": "^7.1.0",
     "@ctrl/tinycolor": "^4.1.0",
     "@vue/shared": "^3.4.31",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",
     "lodash.clonedeep": "^4.5.0",
     "nprogress": "^0.2.0",
-    "tailwind-merge": "^2.4.0"
+    "tailwind-merge": "^2.4.0",
+    "theme-colors": "^0.1.0"
   },
   "devDependencies": {
     "@types/lodash.clonedeep": "^4.5.9",

packages/@core/shared/toolkit/src/colorful/generator.ts

@@ -1,35 +1,34 @@
-import { generate } from '@ant-design/colors';
+import { TinyColor } from '@ctrl/tinycolor';
+import { getColors } from 'theme-colors';
 
 import { convertToHslCssVar } from './convert';
 
-export * from '@ant-design/colors';
-
-interface Opts {
-  backgroundColor?: string;
-  theme?: 'dark' | 'default';
-}
-
 interface ColorItem {
   alias?: string;
   color: string;
   name: string;
 }
 
-function generatorColorVariables(colorItems: ColorItem[], opts?: Opts) {
+function generatorColorVariables(colorItems: ColorItem[]) {
   const colorVariables: Record<string, string> = {};
 
   colorItems.forEach(({ alias, color, name }) => {
     if (color) {
-      const colors = generate(color, opts);
-      let mainColor = colors[5];
-      colors.forEach((colorValue, colorIndex) => {
+      const colorsMap = getColors(new TinyColor(color).toHexString());
+      let mainColor = colorsMap['500'];
+
+      const colorKeys = Object.keys(colorsMap);
+
+      colorKeys.forEach((key) => {
+        const colorValue = colorsMap[key];
+
         const hslColor = convertToHslCssVar(colorValue);
-        colorVariables[`--${name}-${colorIndex + 1}00`] = hslColor;
+        colorVariables[`--${name}-${key}`] = hslColor;
         if (alias) {
-          colorVariables[`--${alias}-${colorIndex + 1}00`] = hslColor;
+          colorVariables[`--${alias}-${key}`] = hslColor;
         }
 
-        if (colorIndex === 5) {
+        if (key === '500') {
           mainColor = hslColor;
         }
       });
@@ -38,7 +37,6 @@ function generatorColorVariables(colorItems: ColorItem[], opts?: Opts) {
       }
     }
   });
-
   return colorVariables;
 }