feat: update theme (#4084)

* update theme

* update component styles

* change output node background

* update background for component folderrs

* update astra icon coloring

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

@@ -96,7 +96,7 @@ export default function NodeInputField({
     <div
       ref={ref}
       className={
-        "relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
+        "relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2" +
         ((name === "code" && type === "code") ||
         (name.includes("code") && proxy)
           ? " hidden"

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

@@ -124,7 +124,7 @@ export default function NodeOutputField({
   ) : (
     <div
       ref={ref}
-      className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
+      className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-primary-foreground px-5 py-2"
     >
       <>
         <div className="flex w-full items-center justify-end truncate text-sm">

src/frontend/src/icons/AstraDB/AstraDB.jsx

@@ -7,10 +7,10 @@ const AstraSVG = (props) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <rect width="100%" height="100%" rx="4" fill="white" />
+    <rect width="100%" height="100%" rx="4" fill="backgroundColor" />
     <path
       d="M6.89209 5.76894L5 10.8265H6.56835L8 6.4524L9.43165 10.8265H11L9.10791 5.76894C8.71942 4.76175 7.29496 4.72578 6.89209 5.76894Z"
-      fill="black"
+      fill="currentColor"
     />
   </svg>
 );

src/frontend/src/style/applies.css

@@ -234,11 +234,11 @@
     @apply flex w-full select-none items-center justify-between bg-background py-3 pl-5 pr-3;
   }
   .components-disclosure-arrangement {
-    @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2;
+    @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-primary-foreground px-3 py-2;
   }
   .components-disclosure-arrangement-child {
     /* different color than the non child */
-    @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2;
+    @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-primary-foreground px-3 py-2;
   }
   .components-disclosure-title {
     @apply flex items-center text-sm text-primary;
@@ -324,7 +324,7 @@
     @apply relative flex flex-col justify-center bg-background transition-all;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center gap-2 border-b bg-muted p-5;
+    @apply flex w-full items-center gap-2 border-b p-5;
   }
   .generic-node-title-arrangement {
     @apply flex-max-width items-center truncate;

src/frontend/src/style/index.css

@@ -6,27 +6,34 @@
 
 @layer base {
   :root {
-    --node-selected: 243 75% 59%;
+    /* Zinc Theme Values from shadcn */
     --background: 0 0% 100%; /* hsl(0 0% 100%) */
-    --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    --muted: 210 40% 98%; /* hsl(210 40% 98%) */
-    --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%) */
+    --foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */
     --card: 0 0% 100%; /* hsl(0 0% 100%) */
-    --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
-    --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
-    --primary: 222.2 27% 11.2%; /* hsl(222 27% 18%) */
-    --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 30% 96.1%; /* hsl(210 30% 96%) */
-    --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    --destructive: 0 60% 40%; /* hsl(0 60% 40%) */
-    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+    --card-foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */
+    --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+    --popover-foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */
+    --primary: 240 5.9% 10%; /* hsl(240 5.9% 10%) */
+    --primary-foreground: 0 0% 98%; /* hsl(0 0% 98%) */
+    --secondary: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */
+    --secondary-foreground: 240 5.9% 10%; /* hsl(240 5.9% 10%) */
+    --muted: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */
+    --muted-foreground: 240 3.8% 46.1%; /* hsl(240 3.8% 46.1%) */
+    --accent: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */
+    --accent-foreground: 240 5.9% 10%; /* hsl(240 5.9% 10%) */
+    --destructive: 0 84.2% 60.2%; /* hsl(0 84.2% 60.2%) */
+    --destructive-foreground: 0 0% 98%; /* hsl(0 0% 98%) */
+    --border: 240 5.9% 90%; /* hsl(240 5.9% 90%) */
+    --input: 240 5.9% 90%; /* hsl(240 5.9% 90%) */
+    --ring: 240 5.9% 10%; /* hsl(240 5.9% 10%) */
     --radius: 0.5rem;
-    --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
+    --chart-1: 12 76% 61%; /* hsl(12 76% 61%) */
+    --chart-2: 173 58% 39%; /* hsl(173 58% 39%) */
+    --chart-3: 197 37% 24%; /* hsl(197 37% 24%) */
+    --chart-4: 43 74% 66%; /* hsl(43 74% 66%) */
+    --chart-5: 27 87% 67%; /* hsl(27 87% 67%) */
+
+    --node-selected: 243 75% 59%;
     --round-btn-shadow: #00000063;
     --ice: #31a3cc;
     --selected: #2196f3;
@@ -85,6 +92,32 @@
   }
 
   .dark {
+    /* Zinc Theme Values from shadcn */
+    --background: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
+    --foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
+    --card: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
+    --card-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
+    --popover: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */
+    --popover-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
+    --primary: 0 0% 98%; /* hsl(0, 0%, 98%) */
+    --primary-foreground: 240 5.9% 10%; /* hsl(240, 5.9%, 10%) */
+    --secondary: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
+    --secondary-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
+    --muted: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
+    --muted-foreground: 240 5% 64.9%; /* hsl(240, 5%, 64.9%) */
+    --accent: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
+    --accent-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
+    --destructive: 0 62.8% 30.6%; /* hsl(0, 62.8%, 30.6%) */
+    --destructive-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */
+    --border: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
+    --input: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */
+    --ring: 240 4.9% 83.9%; /* hsl(240, 4.9%, 83.9%) */
+    --chart-1: 220 70% 50%; /* hsl(220, 70%, 50%) */
+    --chart-2: 160 60% 45%; /* hsl(160, 60%, 45%) */
+    --chart-3: 30 80% 55%; /* hsl(30, 80%, 55%) */
+    --chart-4: 280 65% 60%; /* hsl(280, 65%, 60%) */
+    --chart-5: 340 75% 55%; /* hsl(340, 75%, 55%) */
+
     --note-default: #0f172a;
     --note-indigo: #312e81;
     --note-emerald: #064e3b;
@@ -99,44 +132,15 @@
     --note-red-opacity: #7f1d1d80;
 
     --node-selected: 234 89% 74%;
-    --background: 224 28% 7.5%; /* hsl(224 10% 7.5%) */
-    --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
+
     --ice: #60a5fa;
     --hover: #1a202e;
     --disabled-run: #6366f1;
     --selected: #0369a1;
 
-    --muted: 223 27% 11%; /* hsl(223 27% 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 25% 15.5%; /* hsl(224 71% 4%) */
-    --card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */
-
-    --border: 216 24% 17%; /* hsl(216 34% 17%) */
-    --input: 216 24% 17%; /* hsl(216 34% 17%) */
-
-    --primary: 210 20% 80%; /* hsl(210 20% 80%) */
-    --primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */
-
-    --secondary: 222.2 30.4% 7.2%; /* hsl(222 47% 11%) */
-    --secondary-foreground: 210 40% 80%; /* hsl(210 40% 80%) */
-
-    --accent: 216 24% 20%; /* hsl(216 34% 17%) */
-    --accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */
-
-    --destructive: 0 60% 25%; /* hsl(0 60% 25%) */
-    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
     --filter-foreground: #eef2ff;
     --filter-background: #4e46e599;
 
-    --ring: 216 24% 30%; /* hsl(216 24% 30%) */
-
-    --radius: 0.5rem;
-
     --round-btn-shadow: #00000063;
 
     --success-background: #022c22;