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

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%; height: 100%;
position: relative; position: relative;
--journey-line-color: var(--base-color-6); --journey-line-color: var(--border-strong);
--journey-active-color: var(--primary-color); --journey-active-color: var(--primary);
--journey-faded-color: var(--base-color-3); --journey-faded-color: var(--interactive-bg);
} }
.view { .view {
@ -43,8 +43,8 @@
.dropoff { .dropoff {
font-weight: 600; font-weight: 600;
color: var(--font-color-muted); color: var(--text-muted);
background: var(--base-color-2); background: var(--surface-sunken);
padding: 4px 8px; padding: 4px 8px;
border-radius: 5px; border-radius: 5px;
} }
@ -58,8 +58,8 @@
height: 50px; height: 50px;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: var(--base-color-1); color: var(--surface-base);
background: var(--base-color-12); background: var(--surface-inverted);
z-index: 1; z-index: 1;
margin: 0 auto 20px; margin: 0 auto 20px;
} }
@ -84,7 +84,7 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 10px 20px; padding: 10px 20px;
background: var(--base-color-3); background: var(--interactive-bg);
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -96,27 +96,27 @@
} }
.node:hover:not(.selected) { .node:hover:not(.selected) {
background: var(--base-color-4); background: var(--interactive-bg-hover);
} }
.node.selected { .node.selected {
color: var(--base-color-1); color: var(--surface-base);
background: var(--base-color-12); background: var(--surface-inverted);
} }
.node.active { .node.active {
color: var(--primary-font-color); color: var(--primary-foreground);
background: var(--primary-color); background: var(--primary);
} }
.node.selected .count { .node.selected .count {
color: var(--base-color-1); color: var(--surface-base);
background: var(--base-color-12); background: var(--surface-inverted);
} }
.node.selected.active .count { .node.selected.active .count {
color: var(--primary-font-color); color: var(--primary-foreground);
background: var(--primary-color); background: var(--primary);
} }
.name { .name {
@ -212,7 +212,7 @@
position: absolute; position: absolute;
border-radius: 100%; border-radius: 100%;
border: 3px solid var(--journey-line-color); border: 3px solid var(--journey-line-color);
background: var(--base-color-1); background: var(--surface-base);
width: 14px; width: 14px;
height: 14px; height: 14px;
} }

2
src/app/global.css
View file

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