From c479a20cc042404847dc57a8f3742efa88b196d4 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 6 Feb 2026 11:47:53 -0800
Subject: [PATCH] Migrate old CSS variables to new react-zen design system.

Journey component, global.css, and variables.css all referenced old
CSS custom properties (--base-color-*, --primary-color, --text-base)
that no longer exist in @umami/react-zen. Mapped them to the new
variable names and removed the dead variables.css file.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../(reports)/journeys/Journey.module.css     | 36 +++++++++----------
 src/app/global.css                            |  2 +-
 src/styles/variables.css                      |  4 ---
 3 files changed, 19 insertions(+), 23 deletions(-)
 delete mode 100644 src/styles/variables.css

diff --git a/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css b/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css
index 63643f137..ec6a2bd55 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css
+++ b/src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css
@@ -3,9 +3,9 @@
   height: 100%;
   position: relative;
 
-  --journey-line-color: var(--base-color-6);
-  --journey-active-color: var(--primary-color);
-  --journey-faded-color: var(--base-color-3);
+  --journey-line-color: var(--border-strong);
+  --journey-active-color: var(--primary);
+  --journey-faded-color: var(--interactive-bg);
 }
 
 .view {
@@ -43,8 +43,8 @@
 
 .dropoff {
   font-weight: 600;
-  color: var(--font-color-muted);
-  background: var(--base-color-2);
+  color: var(--text-muted);
+  background: var(--surface-sunken);
   padding: 4px 8px;
   border-radius: 5px;
 }
@@ -58,8 +58,8 @@
   height: 50px;
   font-size: 16px;
   font-weight: 700;
-  color: var(--base-color-1);
-  background: var(--base-color-12);
+  color: var(--surface-base);
+  background: var(--surface-inverted);
   z-index: 1;
   margin: 0 auto 20px;
 }
@@ -84,7 +84,7 @@
   position: relative;
   cursor: pointer;
   padding: 10px 20px;
-  background: var(--base-color-3);
+  background: var(--interactive-bg);
   border-radius: 5px;
   display: flex;
   align-items: center;
@@ -96,27 +96,27 @@
 }
 
 .node:hover:not(.selected) {
-  background: var(--base-color-4);
+  background: var(--interactive-bg-hover);
 }
 
 .node.selected {
-  color: var(--base-color-1);
-  background: var(--base-color-12);
+  color: var(--surface-base);
+  background: var(--surface-inverted);
 }
 
 .node.active {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+  color: var(--primary-foreground);
+  background: var(--primary);
 }
 
 .node.selected .count {
-  color: var(--base-color-1);
-  background: var(--base-color-12);
+  color: var(--surface-base);
+  background: var(--surface-inverted);
 }
 
 .node.selected.active .count {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+  color: var(--primary-foreground);
+  background: var(--primary);
 }
 
 .name {
@@ -212,7 +212,7 @@
   position: absolute;
   border-radius: 100%;
   border: 3px solid var(--journey-line-color);
-  background: var(--base-color-1);
+  background: var(--surface-base);
   width: 14px;
   height: 14px;
 }
diff --git a/src/app/global.css b/src/app/global.css
index 3fa31b1fc..c647726f6 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -21,6 +21,6 @@ html[style*="padding-right"] {
 a,
 a:active,
 a:hover {
-  color: var(--text-base);
+  color: var(--text-primary);
   text-decoration: none;
 }
diff --git a/src/styles/variables.css b/src/styles/variables.css
deleted file mode 100644
index f7ebb0281..000000000
--- a/src/styles/variables.css
+++ /dev/null
@@ -1,4 +0,0 @@
-html body {
-  --primary-color: #147af3;
-  --primary-font-color: var(--light-color);
-}