feat: Update class names and colors in various components

- Update class names and colors in parameterComponent, GenericNode, alertDropDown, error, notice, success, buildTrigger, dropdownComponent, headerComponent, and inputListComponent to improve consistency and visual appeal.

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

@@ -97,7 +97,7 @@ export default function ParameterComponent({
         >
           {React.createElement(nodeIconsLucide[item.family])}
         </div>
-        <span className="ps-2 text-gray-950">
+        <span className="ps-2 text-foreground">
           {nodeNames[item.family] ?? ""}{" "}
           <span className={classNames(left ? "hidden" : "")}>
             {" "}

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

@@ -108,7 +108,7 @@ export default function GenericNode({
                 delayDuration={1500}
                 content={data.node.display_name}
               >
-                <div className="ml-2 truncate text-gray-800">
+                <div className="ml-2 truncate text-primary">
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
@@ -143,7 +143,7 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-red-600 opacity-100"
+                        ? "w-4 h-4 rounded-full bg-status-red opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
                       "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
@@ -159,9 +159,9 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
+                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-ring transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -30,16 +30,16 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400"
+              className="h-5 w-5 text-status-red"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm break-words font-medium text-red-800">
+            <h3 className="text-sm break-words font-medium text-error-foreground">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
-              <div className="mt-2 text-sm text-red-700">
+              <div className="mt-2 text-sm text-error-foreground">
                 <ul className="list-disc space-y-1 pl-5">
                   {dropItem.list.map((item, idx) => (
                     <li className="break-words" key={idx}>
@@ -62,7 +62,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
+                className="inline-flex rounded-md bg-red-50 p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />
@@ -77,19 +77,19 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 "
+              className="h-5 w-5 text-medium-dark-blue"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700">
+            <p className="text-sm text-medium-dark-blue">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-medium-dark-blue hover:text-ring"
                 >
                   Details
                 </Link>
@@ -108,7 +108,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 "
+                className="inline-flex rounded-md bg-blue-50 p-1.5 text-medium-dark-blue "
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />
@@ -123,12 +123,12 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 "
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800">
+            <p className="text-sm font-medium text-success-foreground">
               {dropItem.title}
             </p>
           </div>
@@ -142,7 +142,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 "
+                className="inline-flex rounded-md bg-success-background p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />

src/frontend/src/alerts/error/index.tsx

@@ -44,7 +44,7 @@ export default function ErrorAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400"
+              className="h-5 w-5 text-status-red"
               aria-hidden="true"
             />
           </div>

src/frontend/src/alerts/notice/index.tsx

@@ -41,7 +41,7 @@ export default function NoticeAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 "
+              className="h-5 w-5 text-medium-dark-blue "
               aria-hidden="true"
             />
           </div>

src/frontend/src/alerts/success/index.tsx

@@ -39,7 +39,7 @@ export default function SuccessAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 "
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -174,9 +174,9 @@ export default function BuildTrigger({
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} style={{ color: "#fb923c" }} />
+                <Loading strokeWidth={1.5} className="stroke-build-trigger"/>
               ) : (
-                <Zap className="sh-6 w-6 fill-orange-400 stroke-1 stroke-orange-400" />
+                <Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
               )}
             </div>
           </button>

src/frontend/src/components/dropdownComponent/index.tsx

@@ -47,7 +47,7 @@ export default function Dropdown({
                   }
                 >
                   <ChevronsUpDown
-                    className="h-5 w-5 text-gray-400"
+                    className="h-5 w-5 text-border"
                     aria-hidden="true"
                   />
                 </span>

src/frontend/src/components/headerComponent/index.tsx

@@ -75,7 +75,7 @@ export default function Header() {
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
           >
             <FaGithub className="h-5 w-5 mr-2" />
             Star
@@ -102,7 +102,7 @@ export default function Header() {
 
           <Separator orientation="vertical" />
           <button
-            className="text-gray-600 hover:text-gray-500 "
+            className="text-muted-foreground hover:text-ring "
             onClick={() => {
               setDark(!dark);
             }}

src/frontend/src/components/inputListComponent/index.tsx

@@ -73,7 +73,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <X className="w-4 h-4 hover:text-red-600" />
+              <X className="w-4 h-4 hover:text-status-red" />
             </button>
           )}
         </div>

src/frontend/src/index.css

@@ -3,109 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
-    
-	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-
-	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-    
-	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-    
-	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
-	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-    
-    
-	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-    
-    --radius: 0.5rem;
-    
-    
-    --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
-    
-    --round-btn-shadow: #00000063;
-    
-    --hover-btn-background: #242f47;
-    
-    --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
-    --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
-
-    --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
-    --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
-
-    --status-red: #ef4444; /* tailwind red 500 medium-red*/
-    --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
-    --status-green: #4ade80; /* tailwind green 400 medium-green*/
-
-    --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
-    --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
-
-    /* --high-indigo: #4338ca;  tailwind indigo 700 
-  --medium-indigo: #6366f1;  tailwind indigo 500 
-  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
-  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
-  --medium-emerald: #10b981;  tailwind emerald 500 Unused
-  --medium-dark-green: #166534;  tailwind green 800 Unused
-  --almost-medium-green: #22c55e;  tailwind green 500 Unused
-  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
-  --light-blue: #eff6ff;  tailwind blue 50
-  --dark-blue: #1e3a8a;  tailwind blue 900
-  --medium-blue: #60a5fa;  tailwind blue 400
-  --almost-dark-blue:#3b82f6;  tailwind blue 500
-  --almost-light-blue: #dbeafe;   tailwind blue 100 */
-  }
-
-  .dark {
-    --background: 224 71% 4%; /* hsl(224 71% 4%) */
-    --foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-
-    --muted: 223 47% 11%; /* hsl(223 47% 11%) */
-    --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
-
-    --popover: 224 71% 4%; /* hsl(224 71% 4%) */
-    --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
-    --card: 224 71% 4%; /* hsl(224 71% 4%) */
-    --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-
-    --border: 216 34% 17%; /* hsl(216 34% 17%) */
-    --input: 216 34% 17%; /* hsl(216 34% 17%) */
-
-    --primary: 210 40% 98%; /* hsl(210 40% 98%) */
-    --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
-
-    --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --accent: 216 34% 17%; /* hsl(216 34% 17%) */
-    --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
-    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --ring: 216 34% 17%; /* hsl(216 34% 17%) */
-
-    --radius: 0.5rem;
-
-    --build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
-  }
-}
 
 :root {
   --background: 0 0% 100%; /* hsl(0 0% 100%) */
@@ -145,6 +42,7 @@
 
   --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
   --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+
   --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
   --medium-indigo: #6366f1;  /* tailwind indigo 500 */
   --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
@@ -191,7 +89,7 @@
   --high-indigo: #000000;  /*tailwind indigo 700*/ 
   --medium-indigo: #000000;  /* tailwind indigo 500 */
   --medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
-}
+}}
 
 @layer base {
   * {
@@ -222,4 +120,4 @@ code {
 The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
 .react-flow__pane {
   cursor: default;
-}
+}

src/frontend/src/modals/ApiModal/index.tsx

@@ -88,7 +88,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <Code2
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -90,8 +90,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 "></Variable>
+              <Variable className="w-5 h-5 pe-1 text-muted-foreground stroke-2 "></Variable>
-              <span className="text-sm font-semibold text-gray-800 ">
+              <span className="text-sm font-semibold text-primary ">
                 Parameters
               </span>
             </div>

src/frontend/src/modals/NodeModal/index.tsx

@@ -147,7 +147,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                   <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}

src/frontend/src/modals/chatModal/chatInput/index.tsx

@@ -51,8 +51,8 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black "
+            ? " bg-input text-foreground "
-            : "  bg-background-200 text-black ",
+            : "  bg-background text-foreground ",
           "form-input block w-full custom-scroll rounded-md border-ring  pr-10 sm:text-sm" +
             INPUT_STYLE
         )}
@@ -62,12 +62,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 text-gray-500   animate-pulse"
+              className="h-5 w-5 text-ring   animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <Send
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 "
+              className="h-5 w-5 text-ring hover:text-muted-foreground "
               aria-hidden="true"
             />
           )}

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -61,7 +61,7 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <User2 className="w-6 h-6 -mb-1 text-gray-800 " />
+          <User2 className="w-6 h-6 -mb-1 text-primary " />
         )}
       </div>
       {!chat.isSend ? (
@@ -151,7 +151,7 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-gray-600 ">
+          <div className="text-start inline-block px-3 text-muted-foreground ">
             <span
               className="text-muted-foreground "
               dangerouslySetInnerHTML={{

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>

src/frontend/src/modals/genericModal/index.tsx

@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>

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

@@ -14,8 +14,8 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon size={22} className="text-gray-800 " />
+                <Icon size={22} className="text-primary " />
-                <span className="flex items-center text-sm text-gray-800  font-medium">
+                <span className="flex items-center text-sm text-primary  font-medium">
                   {title}
                 </span>
               </div>

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

@@ -182,11 +182,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-gray-400  border-l-0 rounded-md rounded-l-none border">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-ring  border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-black  w-full pr-1 truncate text-xs">
+                              <span className="text-foreground  w-full pr-1 truncate text-xs">
                                 {data[d][t].display_name}
                               </span>
-                              <Menu className="w-4 h-6  text-gray-400 " />
+                              <Menu className="w-4 h-6  text-ring " />
                             </div>
                           </div>
                         </div>

src/frontend/tailwind.config.js

@@ -164,14 +164,14 @@ module.exports = {
         'dark-gray': "var(--dark-gray)",
         'btn-hover-bg': "var(--hover-btn-background)",
         'btn-shadow': "var(--round-btn-shadow)",
-        buildBackground: "var(--build-background)",
+        'build-background': "var(--build-background)",
-        build: "var(--build-trigger)",
+        'build-trigger': "var(--build-trigger)",
-        border: "hsl(var(--border))",
+        'border': "hsl(var(--border))",
-        input: "hsl(var(--input))",
+        'input': "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
+        'ring': "hsl(var(--ring))",
-        background: "hsl(var(--background))",
+        'background': "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        'foreground': "hsl(var(--foreground))",
-        primary: {
+        'primary': {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
         },