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 {
   * {

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))",
         },