From 192eeeb7d2c321c934e42e8aced0d87a9d81d85b Mon Sep 17 00:00:00 2001
From: Maksym Yezhov <maxim.ezhov@shopify.com>
Date: Mon, 23 Feb 2026 12:17:46 -0800
Subject: [PATCH] fake: vibrant color schema

---
 src/components/layout/AppFooter.tsx         |   2 +-
 src/components/layout/AppMenu.tsx           |  12 +-
 src/components/shared/ImportPipeline.tsx    |   7 +-
 src/components/shared/NewPipelineButton.tsx |   1 +
 src/styles/global.css                       | 164 +++++++++++---------
 5 files changed, 103 insertions(+), 83 deletions(-)

diff --git a/src/components/layout/AppFooter.tsx b/src/components/layout/AppFooter.tsx
index d391411c6..901a955c9 100644
--- a/src/components/layout/AppFooter.tsx
+++ b/src/components/layout/AppFooter.tsx
@@ -14,7 +14,7 @@ import {
 function AppFooter() {
   return (
     <footer
-      className="footer w-full px-4 text-center bg-gray-50"
+      className="footer w-full px-4 text-center bg-footer text-footer-foreground"
       style={{ height: `${BOTTOM_FOOTER_HEIGHT}px` }}
     >
       <InlineStack className="w-full" align="space-between">
diff --git a/src/components/layout/AppMenu.tsx b/src/components/layout/AppMenu.tsx
index 95fe99450..6a6714ab7 100644
--- a/src/components/layout/AppMenu.tsx
+++ b/src/components/layout/AppMenu.tsx
@@ -42,7 +42,7 @@ const AppMenu = () => {
 
   return (
     <div
-      className="w-full bg-stone-900 px-3 py-2.5 md:px-4"
+      className="w-full bg-header text-header-foreground px-3 py-2.5 md:px-4"
       style={{ height: `${TOP_NAV_HEIGHT}px` }}
     >
       <InlineStack align="space-between" wrap="nowrap">
@@ -56,7 +56,7 @@ const AppMenu = () => {
           </Link>
 
           {title && (
-            <CopyText className="text-white text-md font-bold truncate max-w-32 sm:max-w-48 md:max-w-64 lg:max-w-md">
+            <CopyText className="text-header-foreground text-md font-bold truncate max-w-32 sm:max-w-48 md:max-w-64 lg:max-w-md">
               {title}
             </CopyText>
           )}
@@ -84,7 +84,7 @@ const AppMenu = () => {
               <Button
                 variant="ghost"
                 size="icon"
-                className="md:hidden text-white hover:bg-stone-800"
+                className="md:hidden text-header-foreground hover:bg-header/80"
                 aria-label="Open menu"
               >
                 <Menu className="h-5 w-5" />
@@ -92,10 +92,12 @@ const AppMenu = () => {
             </SheetTrigger>
             <SheetContent
               side="right"
-              className="w-fit bg-stone-900 border-stone-700 px-4"
+              className="w-fit bg-header border-header/50 px-4"
             >
               <SheetHeader>
-                <SheetTitle className="text-white">Actions</SheetTitle>
+                <SheetTitle className="text-header-foreground">
+                  Actions
+                </SheetTitle>
               </SheetHeader>
               <BlockStack gap="3" className="mt-6">
                 <ImportPipeline />
diff --git a/src/components/shared/ImportPipeline.tsx b/src/components/shared/ImportPipeline.tsx
index 1c5f80863..dff6af937 100644
--- a/src/components/shared/ImportPipeline.tsx
+++ b/src/components/shared/ImportPipeline.tsx
@@ -123,7 +123,12 @@ const ImportPipeline = ({ triggerComponent }: ImportPipelineProps) => {
   const ButtonComponent = triggerComponent ? (
     triggerComponent
   ) : (
-    <Button variant="secondary">Import Pipeline</Button>
+    <Button
+      variant="secondary"
+      className="border border-header-foreground/30 bg-transparent text-header-foreground hover:bg-header-foreground/10"
+    >
+      Import Pipeline
+    </Button>
   );
 
   return (
diff --git a/src/components/shared/NewPipelineButton.tsx b/src/components/shared/NewPipelineButton.tsx
index fc1eb3ef8..f5c98a477 100644
--- a/src/components/shared/NewPipelineButton.tsx
+++ b/src/components/shared/NewPipelineButton.tsx
@@ -43,6 +43,7 @@ const NewPipelineButton = () => {
       variant="outline"
       onClick={handleCreate}
       data-testid="new-pipeline-button"
+      className="border-header-foreground/30 bg-transparent text-header-foreground hover:bg-header-foreground/10 hover:text-header-foreground"
     >
       New Pipeline
     </Button>
diff --git a/src/styles/global.css b/src/styles/global.css
index 8b0983ba0..07ea70411 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -19,88 +19,96 @@ code {
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(0.985 0.005 260);
+  --foreground: oklch(0.2 0.02 260);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.2 0.02 260);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --warning: oklch(0.85 0.2 50);
-  --warning-foreground: oklch(0.145 0 0);
-  --success: oklch(0.7 0.18 140);
-  --success-foreground: oklch(0.145 0 0);
-  --info: oklch(0.6 0.13 235);
-  --info-foreground: oklch(0.145 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --popover-foreground: oklch(0.2 0.02 260);
+  --primary: oklch(0.55 0.25 265);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.94 0.03 200);
+  --secondary-foreground: oklch(0.3 0.05 260);
+  --muted: oklch(0.95 0.015 260);
+  --muted-foreground: oklch(0.5 0.03 260);
+  --accent: oklch(0.65 0.22 330);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.6 0.28 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --warning: oklch(0.8 0.18 75);
+  --warning-foreground: oklch(0.2 0 0);
+  --success: oklch(0.65 0.22 150);
+  --success-foreground: oklch(0.98 0 0);
+  --info: oklch(0.6 0.18 240);
+  --info-foreground: oklch(0.98 0 0);
+  --border: oklch(0.88 0.02 260);
+  --input: oklch(0.92 0.015 260);
+  --ring: oklch(0.55 0.25 265);
+  --chart-1: oklch(0.65 0.28 25);
+  --chart-2: oklch(0.6 0.22 150);
+  --chart-3: oklch(0.55 0.25 265);
+  --chart-4: oklch(0.75 0.2 75);
+  --chart-5: oklch(0.65 0.22 330);
   --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --edge-selected: #5b2ef4;
+  --sidebar: oklch(0.98 0.01 260);
+  --sidebar-foreground: oklch(0.2 0.02 260);
+  --sidebar-primary: oklch(0.55 0.25 265);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.92 0.04 265);
+  --sidebar-accent-foreground: oklch(0.3 0.05 260);
+  --sidebar-border: oklch(0.88 0.02 260);
+  --sidebar-ring: oklch(0.55 0.25 265);
+  --edge-selected: oklch(0.55 0.28 290);
+  --header: oklch(0.35 0.15 265);
+  --header-foreground: oklch(0.98 0 0);
+  --footer: oklch(0.96 0.02 200);
+  --footer-foreground: oklch(0.35 0.05 260);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --warning: oklch(0.85 0.2 50);
-  --warning-foreground: oklch(0.145 0 0);
-  --success: oklch(0.7 0.18 140);
-  --success-foreground: oklch(0.145 0 0);
-  --info: oklch(0.6 0.13 235);
-  --info-foreground: oklch(0.145 0 0);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-  --edge-selected: #5b2ef4;
+  --background: oklch(0.15 0.02 265);
+  --foreground: oklch(0.95 0.01 260);
+  --card: oklch(0.18 0.025 265);
+  --card-foreground: oklch(0.95 0.01 260);
+  --popover: oklch(0.2 0.03 265);
+  --popover-foreground: oklch(0.95 0.01 260);
+  --primary: oklch(0.7 0.22 265);
+  --primary-foreground: oklch(0.15 0.02 265);
+  --secondary: oklch(0.28 0.04 265);
+  --secondary-foreground: oklch(0.92 0.01 260);
+  --muted: oklch(0.25 0.03 265);
+  --muted-foreground: oklch(0.65 0.04 260);
+  --accent: oklch(0.72 0.2 330);
+  --accent-foreground: oklch(0.15 0.02 265);
+  --destructive: oklch(0.65 0.28 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --warning: oklch(0.82 0.18 75);
+  --warning-foreground: oklch(0.15 0 0);
+  --success: oklch(0.7 0.22 150);
+  --success-foreground: oklch(0.15 0 0);
+  --info: oklch(0.7 0.18 240);
+  --info-foreground: oklch(0.15 0 0);
+  --border: oklch(0.32 0.04 265);
+  --input: oklch(0.28 0.03 265);
+  --ring: oklch(0.7 0.22 265);
+  --chart-1: oklch(0.7 0.28 25);
+  --chart-2: oklch(0.7 0.22 150);
+  --chart-3: oklch(0.7 0.22 265);
+  --chart-4: oklch(0.8 0.2 75);
+  --chart-5: oklch(0.72 0.2 330);
+  --sidebar: oklch(0.18 0.025 265);
+  --sidebar-foreground: oklch(0.95 0.01 260);
+  --sidebar-primary: oklch(0.7 0.22 265);
+  --sidebar-primary-foreground: oklch(0.15 0.02 265);
+  --sidebar-accent: oklch(0.28 0.05 265);
+  --sidebar-accent-foreground: oklch(0.92 0.01 260);
+  --sidebar-border: oklch(0.32 0.04 265);
+  --sidebar-ring: oklch(0.7 0.22 265);
+  --edge-selected: oklch(0.7 0.28 290);
+  --header: oklch(0.22 0.08 265);
+  --header-foreground: oklch(0.95 0.01 260);
+  --footer: oklch(0.2 0.04 265);
+  --footer-foreground: oklch(0.8 0.03 260);
 }
 
 @theme inline {
@@ -147,6 +155,10 @@ code {
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-edge-selected: var(--edge-selected);
+  --color-header: var(--header);
+  --color-header-foreground: var(--header-foreground);
+  --color-footer: var(--footer);
+  --color-footer-foreground: var(--footer-foreground);
 
   /* Custom animations */
   --animate-revert-copied: revert-copied 0.5s ease-in-out forwards;