Update styling colors to use variable names

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -361,15 +361,15 @@ export default function ParameterComponent({
         >
           {!left && data.node?.pinned  &&
             <div>
-              <IconComponent className="w-5 h-5 text-blue-400" name={"Snowflake"} />
+              <IconComponent className="w-5 h-5 text-ice" name={"Snowflake"} />
             </div>}
           {proxy ? (
             <ShadTooltip content={<span>{proxy.id}</span>}>
-              <span>{title}</span>
+              <span className={!left && data.node?.pinned?" text-ice":""}>{title}</span>
             </ShadTooltip>
           ) : (
-            title
-          )}
+            <span className={!left && data.node?.pinned?" text-ice":""}>{title}</span>
+            )}
           <span className={(info === "" ? "" : "ml-1 ") + " text-status-red"}>
             {required ? " *" : ""}
           </span>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -291,7 +291,7 @@ export default function NodeToolbarComponent({
                 className={cn(
                   "h-4 w-4 transition-all",
                   // TODO UPDATE THIS COLOR TO BE A VARIABLE
-                  pinned ? "animate-wiggle text-blue-400" : ""
+                  pinned ? "animate-wiggle text-ice" : ""
                 )}
               />
             </button>

src/frontend/src/style/index.css

@@ -27,6 +27,7 @@
     --radius: 0.5rem;
     --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
     --round-btn-shadow: #00000063;
+    --ice: #31a3cc;
 
     --error-background: #fef2f2;
     --error-foreground: #991b1b;
@@ -67,6 +68,7 @@
   .dark {
     --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
     --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
+    --ice: #60A5FA;
 
     --muted: 223 27% 11%; /* hsl(223 27% 11%) */
     --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */

src/frontend/tailwind.config.js

@@ -87,6 +87,7 @@ module.exports = {
         "beta-foreground": "var(--beta-foreground)",
         "chat-bot-icon": "var(--chat-bot-icon)",
         "chat-user-icon": "var(--chat-user-icon)",
+        "ice": "var(--ice)",
 
         white: "var(--white)",
         border: "hsl(var(--border))",