fix(frontend): update the globals.css file with new colors from figma (#69)

Camillebzd · web-flow · commit d5a2ec9e8eac · 2026-01-16T21:08:41.000+05:30
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -12,6 +12,7 @@
 @theme inline {
   /* Core semantic colors - reference CSS variables */
   --color-background: var(--background);
+  --color-background-secondary: var(--background-secondary);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
@@ -127,10 +128,10 @@
   --color-tracker-active: #836ef9;
 
   /* Block state colors */
-  --color-block-proposed: #d4631f;
-  --color-block-voted: #8b68d9;
-  --color-block-finalized: #4680d6;
-  --color-block-verified: #2aad7c;
+  --color-block-proposed: #342b6f;
+  --color-block-voted: #6e54ff;
+  --color-block-finalized: #2dd4bf;
+  --color-block-verified: #22c55e;
 
   /* Swap provider and transfer colors */
   --color-purple-primary: #836ef9;
@@ -142,7 +143,7 @@
   --color-blue-primary: #0066ff;
 
   /* UI component colors */
-  --color-text-muted: #a0a0b0;
+  --color-text-muted: #52525e;
   --color-text-muted-darker: #6a6a7a;
   --color-bg-card-dark: #454150;
   --color-bg-card-darker: #696274;
@@ -284,6 +285,8 @@
   --accent-foreground-dark: var(--color-zinc-50);
   --background-light: var(--color-base-white);
   --background-dark: var(--color-brand-monad-off-black-700-dark-bg);
+  --background-secondary-light: var(--color-zinc-50);
+  --background-secondary-dark: #18181b;
   --border-light: var(--color-zinc-200);
   --border-dark: var(--color-zinc-800);
   --card-light: var(--color-base-white);
@@ -413,21 +416,23 @@
   --toast-error-bg-dark: hsla(0, 84%, 60%, 0.1);
 
   /* Tooltip colors */
-  --tooltip-bg: #0e0e1a;
-  --tooltip-border: #2a2a4a;
+  --tooltip-bg: #18181b;
+  --tooltip-border: #e5e5e5;
   --tooltip-text: #ffffff;
-  --tooltip-text-secondary: #8888a0;
+  --tooltip-text-secondary: #a8a3b8;
   --tooltip-text-accent: #9c6ef8;
-  --tooltip-separator: #2c2735;
+  --tooltip-separator: #27272a;
 
   /* Bubble map colors */
-  --color-bubble-map-color-1: #b63537;
-  --color-bubble-map-color-2: #c88328;
-  --color-bubble-map-color-3: #509e68;
+  --color-bubble-map-color-1: #d33636;
+  --color-bubble-map-color-2: #d34936;
+  --color-bubble-map-color-3: #d38736;
+  --color-bubble-map-color-4: #afa10d;
+  --color-bubble-map-color-5: #67ae11;
 
   /* Text colors */
   --text-secondary-light: var(--color-neutral-500);
-  --text-secondary-dark: var(--color-zinc-400);
+  --text-secondary-dark: #a8a3b8;
   --text-tertiary-light: var(--color-neutral-400);
   --text-tertiary-dark: #65656f;
   --text-disabled-light: var(--color-neutral-200);
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -28,13 +28,9 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark">
       <body
-        className={cn(
-          brittiSans.variable,
-          robotoMono.variable,
-          'antialiased bg-zinc-950',
-        )}
+        className={cn(brittiSans.variable, robotoMono.variable, 'antialiased')}
       >
         <Providers>{children}</Providers>
         <Analytics />
