refactor: update DataFrame color to pink (#5613)

📝 (index.css): update color variables in index.css for better consistency and readability
♻️ (styleUtils.ts): refactor nodeColorsName object in styleUtils.ts to use more descriptive color names for better clarity and maintainability

src/frontend/src/style/index.css

@@ -111,8 +111,8 @@
     --smooth-red: 0 93.3% 94.1%;
     --radius: 0.5rem;
 
-    --datatype-pink: 327.3 73.3% 97.1%;
+    --datatype-pink: 333.3 71.4% 50.6%;
-    --datatype-pink-foreground: 333.3 71.4% 50.6%;
+    --datatype-pink-foreground: 325.7 77.8% 94.7%;
 
     --datatype-rose: 346.8 77.2% 49.8%;
     --datatype-rose-foreground: 355.6 100% 94.7%;

src/frontend/src/utils/styleUtils.ts

@@ -452,13 +452,13 @@ export const nodeColorsName: { [char: string]: string } = {
   vectorsearch: "yellow",
   textsplitters: "fuchsia",
   toolkits: "red",
-  wrappers: "pink",
+  wrappers: "rose",
   notion: "slate",
   Notion: "slate",
   AssemblyAI: "blue",
   assemblyai: "blue",
   helpers: "cyan",
-  prototypes: "pink",
+  prototypes: "rose",
   astra_assistants: "indigo",
   langchain_utilities: "sky",
   output_parsers: "yellow",
@@ -479,7 +479,7 @@ export const nodeColorsName: { [char: string]: string } = {
   BaseChatMemory: "cyan",
   BaseChatMessageHistory: "orange",
   Memory: "orange",
-  DataFrame: "rose",
+  DataFrame: "pink",
 };
 
 export const SIDEBAR_CATEGORIES = [