generate unique id for numeric variable

Author: spartan-vutrannguyen

apps/studio/src/lib/editor/engine/theme/index.ts

@@ -9,6 +9,7 @@ import { makeAutoObservable } from 'mobx';
 import colors from 'tailwindcss/colors';
 import type { EditorEngine } from '..';
 import { camelCase } from 'lodash';
+import { customAlphabet } from 'nanoid/non-secure';
 
 interface ColorValue {
     value: string;
@@ -451,9 +452,10 @@ export class ThemeManager {
                     throw new Error('Color not found');
                 }
                 // If the color name is a number, we need to add a suffix to the new color name
+                const randomId = customAlphabet('0123456789', 5)();
                 const newName = isNaN(Number(colorName))
                     ? `${colorName}Copy`
-                    : `${colorName}${group.length + 1}`;
+                    : `${colorName}${randomId}`;
 
                 const color = Color.from(
                     theme === Theme.DARK

apps/studio/src/routes/editor/LayersPanel/BrandTab/ColorPanel/ColorPalletGroup.tsx

@@ -125,7 +125,9 @@ export const BrandPalletGroup = ({
     };
 
     const generateUniqueColorName = () => {
-        const randomId = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 5)();
+        const randomIdText = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 5)();
+        const randomIdNumber = customAlphabet('0123456789', 5)();
+        const randomId = isNaN(Number(title)) ? randomIdText : randomIdNumber;
         return `${title} ${randomId}`;
     };