watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 14:17:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Migrate old CSS variables to new react-zen design system.
Some checks are pending
Node.js CI / build (push) Waiting to run
Details

Browse source 
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>
This commit is contained in:
Mike Cao 2026-02-06 11:47:53 -08:00
parent b9eb5f9800
commit c479a20cc0
3 changed files with 19 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.module.css
View file

@ -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;
}

2
src/app/global.css
View file

@ -21,6 +21,6 @@ html[style*="padding-right"] {
a,
a:active,
a:hover {
color: var(--text-base);
color: var(--text-primary);
text-decoration: none;
}

4
src/styles/variables.css
View file

@ -1,4 +0,0 @@
html body {
--primary-color: #147af3;
--primary-font-color: var(--light-color);
}