Migrate UI styles to Zen theme tokens and preserve brand colors

src/app/(main)/SideNav.tsx

@@ -71,7 +71,7 @@ export function SideNav(props: any) {
   return (
     <Column
       {...props}
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       border
       borderRadius
       padding="2"

src/app/(main)/boards/BoardEntityBadge.tsx

@@ -13,7 +13,7 @@ export function BoardEntityBadge({
   domain?: string;
 }) {
   return (
-    <Row padding borderRadius="full" backgroundColor="surface-base" border gap="2">
+    <Row padding borderRadius="full" backgroundColor="surface" border gap="2">
       <Icon>
         {type === 'pixel' ? <Grid2x2 /> : type === 'link' ? <Link /> : <Favicon domain={domain} />}
       </Icon>

src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css

@@ -12,7 +12,7 @@
 .railDivider {
   width: 1px;
   height: 100%;
-  background: var(--zen-gray-300, #d1d5db);
+  background: var(--zen-palette-300, #d1d5db);
   justify-self: center;
 }
 
@@ -74,7 +74,7 @@
 .mobileSelectedPageButton {
   width: 100%;
   text-align: left;
-  border: 1px solid var(--zen-border-default);
+  border: 1px solid var(--zen-border);
   background: var(--zen-surface-raised);
   border-radius: 8px;
   padding: 10px 12px;
@@ -109,7 +109,7 @@
   padding: 4px 10px;
   border-radius: 999px;
   background: var(--zen-surface-raised);
-  border: 1px solid var(--zen-border-default);
+  border: 1px solid var(--zen-border);
   white-space: nowrap;
 }
 
@@ -175,7 +175,7 @@
 .canvas {
   position: relative;
   overflow: hidden;
-  border: 1px solid var(--zen-border-default);
+  border: 1px solid var(--zen-border);
   border-radius: 8px;
   background: var(--zen-surface-sunken);
   flex: 0 0 auto;
@@ -224,7 +224,7 @@
   width: 100%;
   height: 100%;
   border: 0;
-  background: var(--zen-surface-base);
+  background: var(--zen-surface);
   overflow: hidden;
   pointer-events: none;
 }

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

@@ -43,7 +43,7 @@
 
 .dropoff {
   font-weight: 600;
-  color: var(--zen-text-muted);
+  color: var(--zen-fg-muted);
   background: var(--zen-surface-sunken);
   padding: 4px 8px;
   border-radius: 5px;
@@ -58,7 +58,7 @@
   height: 50px;
   font-size: 16px;
   font-weight: 700;
-  color: var(--zen-surface-base);
+  color: var(--zen-surface);
   background: var(--zen-surface-inverted);
   z-index: 1;
   margin: 0 auto 20px;
@@ -100,22 +100,22 @@
 }
 
 .node.selected {
-  color: var(--zen-surface-base);
+  color: var(--zen-surface);
   background: var(--zen-surface-inverted);
 }
 
 .node.active {
-  color: var(--zen-primary-foreground);
+  color: var(--zen-primary-fg);
   background: var(--zen-primary);
 }
 
 .node.selected .count {
-  color: var(--zen-surface-base);
+  color: var(--zen-surface);
   background: var(--zen-surface-inverted);
 }
 
 .node.selected.active .count {
-  color: var(--zen-primary-foreground);
+  color: var(--zen-primary-fg);
   background: var(--zen-primary);
 }
 
@@ -212,7 +212,7 @@
   position: absolute;
   border-radius: 100%;
   border: 3px solid var(--journey-line-color);
-  background: var(--zen-surface-base);
+  background: var(--zen-surface);
   width: 14px;
   height: 14px;
 }

src/app/(main)/websites/[websiteId]/(reports)/performance/Performance.module.css

@@ -1,3 +1,3 @@
 .sampleCount {
-  color: var(--zen-text-muted);
+  color: var(--zen-fg-muted);
 }

src/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayer.tsx

@@ -29,8 +29,8 @@ export function ReplayPlayer({ events }: { events: any[] }) {
   const playerRef = useRef<any>(null);
   const [playerError, setPlayerError] = useState(false);
   const [availableWidth, setAvailableWidth] = useState(0);
-  const [viewportHeight, setViewportHeight] = useState(
-    () => (typeof window !== 'undefined' ? window.innerHeight : 0),
+  const [viewportHeight, setViewportHeight] = useState(() =>
+    typeof window !== 'undefined' ? window.innerHeight : 0,
   );
   const { isMobile, isPhone } = useMobile();
   const replayEvents = useMemo(() => getReplayPlayerEvents(events), [events]);
@@ -42,9 +42,7 @@ export function ReplayPlayer({ events }: { events: any[] }) {
   const replayAspectRatio = replayViewport
     ? replayViewport.height / replayViewport.width
     : DEFAULT_REPLAY_ASPECT_RATIO;
-  const isPortraitReplay = replayViewport
-    ? replayViewport.height > replayViewport.width
-    : false;
+  const isPortraitReplay = replayViewport ? replayViewport.height > replayViewport.width : false;
   const fittedAspectRatio = isPortraitReplay
     ? Math.min(Math.max(replayAspectRatio, DEFAULT_REPLAY_ASPECT_RATIO), 2.25)
     : Math.min(Math.max(replayAspectRatio, DEFAULT_REPLAY_ASPECT_RATIO), 1.5);
@@ -161,7 +159,10 @@ export function ReplayPlayer({ events }: { events: any[] }) {
 
   return (
     <Column alignItems="center" width="100%">
-      <div ref={playerWrapperRef} style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+      <div
+        ref={playerWrapperRef}
+        style={{ width: '100%', display: 'flex', justifyContent: 'center' }}
+      >
         <div
           style={{
             width: playerWidth,
@@ -169,7 +170,7 @@ export function ReplayPlayer({ events }: { events: any[] }) {
             height: showUnavailable ? playerHeight : playerOuterHeight,
             overflow: 'hidden',
             borderRadius: '8px',
-            border: '1px solid var(--zen-border-default)',
+            border: '1px solid var(--zen-border)',
             background: 'var(--zen-surface-sunken)',
           }}
         >

src/app/global.css

@@ -1,19 +1,34 @@
 :root {
   --zen-font-family: var(--font-inter), sans-serif;
+}
+
+/* Preserve the brand accent when Zen applies its light or dark theme tokens. */
+:root,
+[data-theme="light"],
+[data-theme="dark"],
+.dark {
   --zen-primary: oklch(62.3% 0.214 259.815);
-  --zen-primary-foreground: oklch(98.5% 0 0);
+  --zen-primary-fg: oklch(98.5% 0 0);
+}
+
+/* Zen's rem-based typography and spacing assume the browser's default root size. */
+html {
+  font-size: 100%;
 }
 
 html,
 body {
   font-family: var(--zen-font-family), sans-serif;
-  font-size: 14px;
-  color: var(--zen-text-primary);
+  color: var(--zen-fg);
   background-color: var(--zen-surface-raised);
   width: 100%;
   min-height: 100vh;
 }
 
+body {
+  font-size: 0.875rem;
+}
+
 html[style*="padding-right"] {
   padding-right: 0 !important;
 }
@@ -29,11 +44,11 @@ textarea:is(:-webkit-autofill, :autofill):focus,
 select:is(:-webkit-autofill, :autofill),
 select:is(:-webkit-autofill, :autofill):hover,
 select:is(:-webkit-autofill, :autofill):focus {
-  color: var(--zen-text-primary) !important;
-  caret-color: var(--zen-text-primary);
-  box-shadow: 0 0 0 1000px var(--zen-surface-base) inset !important;
-  -webkit-box-shadow: 0 0 0 1000px var(--zen-surface-base) inset !important;
-  -webkit-text-fill-color: var(--zen-text-primary) !important;
+  color: var(--zen-fg) !important;
+  caret-color: var(--zen-fg);
+  box-shadow: 0 0 0 1000px var(--zen-surface) inset !important;
+  -webkit-box-shadow: 0 0 0 1000px var(--zen-surface) inset !important;
+  -webkit-text-fill-color: var(--zen-fg) !important;
   transition:
     background-color 5000s ease-in-out 0s,
     color 5000s ease-in-out 0s;

src/components/common/Badge.module.css

@@ -47,12 +47,12 @@
 }
 
 .gray {
-  color: var(--zen-text-muted);
+  color: var(--zen-fg-muted);
   background: var(--zen-surface-sunken);
 }
 
 .gray .dot {
-  background: var(--zen-text-muted);
+  background: var(--zen-fg-muted);
 }
 
 :global([data-theme="dark"]) .good {

src/components/common/OverlayScrollArea.module.css

@@ -1,7 +1,7 @@
 .root {
-  --overlay-scrollbar-track: var(--zen-gray-50);
-  --overlay-scrollbar-thumb: var(--zen-gray-300);
-  --overlay-scrollbar-thumb-hover: var(--zen-gray-400);
+  --overlay-scrollbar-track: var(--zen-palette-50);
+  --overlay-scrollbar-thumb: var(--zen-palette-300);
+  --overlay-scrollbar-thumb-hover: var(--zen-palette-400);
   --overlay-scrollbar-viewport-padding-right: 0px;
   --overlay-scrollbar-vertical-margin-right: 2px;
 }
@@ -44,8 +44,8 @@
   content: "";
 }
 
-[data-theme='dark'] .root {
-  --overlay-scrollbar-track: var(--zen-gray-800);
-  --overlay-scrollbar-thumb: var(--zen-gray-600);
-  --overlay-scrollbar-thumb-hover: var(--zen-gray-500);
+[data-theme="dark"] .root {
+  --overlay-scrollbar-track: var(--zen-palette-800);
+  --overlay-scrollbar-thumb: var(--zen-palette-600);
+  --overlay-scrollbar-thumb-hover: var(--zen-palette-500);
 }

src/components/common/Panel.tsx

@@ -54,7 +54,7 @@ export function Panel({
       paddingX={{ base: '3', md: '6' }}
       border
       borderRadius
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       position="relative"
       gap
       {...props}

src/components/common/SortableLabel.tsx

@@ -18,7 +18,7 @@ export function SortableLabel({ label, sortKey, defaultDirection = 'asc' }: Sort
   const isActive = query.orderBy === sortKey;
   const isDescending = query.sortDescending === 'true';
   const direction = isActive ? (isDescending ? 'desc' : 'asc') : undefined;
-  const activeColor = 'var(--zen-text-primary)';
+  const activeColor = 'var(--zen-fg)';
 
   const getNextDirection = (): SortDirection => {
     if (!isActive) {
@@ -55,7 +55,7 @@ export function SortableLabel({ label, sortKey, defaultDirection = 'asc' }: Sort
           flexDirection: 'column',
           gap: 0,
           lineHeight: 0,
-          color: 'var(--zen-text-muted)',
+          color: 'var(--zen-fg-muted)',
           opacity: 0.8,
         }}
       >

src/components/metrics/ChangeLabel.tsx

@@ -12,7 +12,7 @@ const STYLES = {
     background: `var(--zen-status-error-bg)`,
   },
   neutral: {
-    color: `var(--zen-text-muted)`,
+    color: `var(--zen-fg-muted)`,
     background: `var(--zen-surface-raised)`,
   },
 };

src/components/metrics/MetricCard.tsx

@@ -51,7 +51,7 @@ export const MetricCard = ({
       paddingX="6"
       paddingY="4"
       borderRadius
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       border
       gap="4"
     >

src/components/metrics/PerformanceCard.module.css

@@ -3,9 +3,9 @@
 }
 
 .card:hover {
-  box-shadow: 0 0 0 1px var(--zen-text-primary);
+  box-shadow: 0 0 0 1px var(--zen-fg);
 }
 
 .card.selected {
-  box-shadow: 0 0 0 1px var(--zen-text-primary);
+  box-shadow: 0 0 0 1px var(--zen-fg);
 }

src/components/metrics/PerformanceCard.tsx

@@ -61,7 +61,7 @@ export const PerformanceCard = ({
       paddingX="6"
       paddingY="4"
       borderRadius
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       border
       gap="4"
       onClick={onClick}

src/components/property-data/PropertyDateChart.tsx

@@ -55,7 +55,7 @@ function InsightCard({ label, value, hint }: { label: string; value: string; hin
       paddingX="6"
       paddingY="4"
       borderRadius
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       border
       gap="2"
       height="100%"

src/components/share/SharedSharesTable.tsx

@@ -5,7 +5,7 @@ import { useConfig, useMessages, useMobile } from '@/components/hooks';
 import { ExternalLink } from '@/components/icons';
 
 const desktopGridTemplateColumns = 'minmax(180px, 1fr) minmax(0, 2fr) auto';
-const rowBorder = '1px solid var(--zen-border-default)';
+const rowBorder = '1px solid var(--zen-border)';
 
 export interface ShareRow {
   id: string;