feat: Add DataFrame color mapping and rose variables (#5587)

📝 (index.css): add new color variables for datatype rose and its foreground to improve design consistency
📝 (styleUtils.ts): add DataFrame color to nodeColorsName object for better visualization of dataframes in the frontend

src/frontend/src/style/index.css

@@ -114,6 +114,9 @@
     --datatype-pink: 327.3 73.3% 97.1%;
     --datatype-pink-foreground: 333.3 71.4% 50.6%;
 
+    --datatype-rose: 346.8 77.2% 49.8%;
+    --datatype-rose-foreground: 355.6 100% 94.7%;
+
     --datatype-yellow: 40.6 96.1% 40.4%;
     --datatype-yellow-foreground: 54.9 96.7% 88%;
 
@@ -278,6 +281,9 @@
     --datatype-pink: 327.4 87.1% 81.8%;
     --datatype-pink-foreground: 333.3 71.4% 50.6%;
 
+    --datatype-rose: 352.6 95.7% 81.8%;
+    --datatype-rose-foreground: 346.8 77.2% 49.8%;
+
     --datatype-yellow: 50.4 97.8% 63.5%;
     --datatype-yellow-foreground: 40.6 96.1% 40.4%;
 

src/frontend/src/utils/styleUtils.ts

@@ -478,6 +478,7 @@ export const nodeColorsName: { [char: string]: string } = {
   BaseChatMemory: "cyan",
   BaseChatMessageHistory: "orange",
   Memory: "orange",
+  DataFrame: "rose",
 };
 
 export const SIDEBAR_CATEGORIES = [