Replace numeric prop values with named react-zen values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(main)/MobileNav.tsx

@@ -38,7 +38,7 @@ export function MobileNav() {
   ];
 
   return (
-    <Grid columns="auto 1fr" flexGrow={1} backgroundColor="3" borderRadius>
+    <Grid columns="auto 1fr" flexGrow={1} backgroundColor="surface-sunken" borderRadius>
       <MobileMenuButton>
         {({ close }) => {
           return (

src/app/(main)/TopNav.tsx

@@ -16,7 +16,12 @@ export function TopNav() {
       style={{ position: 'sticky', top: 0 }}
       zIndex={1}
     >
-      <Row alignItems="center" justifyContent="flex-end" backgroundColor="2" borderRadius>
+      <Row
+        alignItems="center"
+        justifyContent="flex-end"
+        backgroundColor="surface-raised"
+        borderRadius
+      >
         <ThemeButton />
         <LanguageButton />
         <ProfileButton />

src/app/(main)/boards/[boardId]/BoardHeader.tsx

@@ -93,7 +93,7 @@ function BoardEditHeader() {
             autoComplete="off"
             style={{ fontSize: '2rem', fontWeight: 700, width: '100%' }}
           >
-            <Heading size="4">{board?.name}</Heading>
+            <Heading size="xl">{board?.name}</Heading>
           </TextField>
         </Row>
         <Row>

src/app/(main)/links/[linkId]/LinkPanels.tsx

@@ -20,7 +20,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
     <Grid gap="3">
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2">{formatMessage(labels.sources)}</Heading>
+          <Heading size="base">{formatMessage(labels.sources)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@@ -35,7 +35,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
           </Tabs>
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.environment)}</Heading>
+          <Heading size="base">{formatMessage(labels.environment)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@@ -59,7 +59,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
           <WorldMap websiteId={linkId} />
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.location)}</Heading>
+          <Heading size="base">{formatMessage(labels.location)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="country">{formatMessage(labels.countries)}</Tab>

src/app/(main)/pixels/[pixelId]/PixelPanels.tsx

@@ -20,7 +20,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
     <Grid gap="3">
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2">{formatMessage(labels.sources)}</Heading>
+          <Heading size="base">{formatMessage(labels.sources)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@@ -35,7 +35,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
           </Tabs>
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.environment)}</Heading>
+          <Heading size="base">{formatMessage(labels.environment)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@@ -59,7 +59,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
           <WorldMap websiteId={pixelId} />
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.location)}</Heading>
+          <Heading size="base">{formatMessage(labels.location)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="country">{formatMessage(labels.countries)}</Tab>

src/app/(main)/teams/[teamId]/TeamSettings.tsx

@@ -41,7 +41,7 @@ export function TeamSettings({ teamId }: { teamId: string }) {
       </Panel>
       <Panel>
         <Row alignItems="center" justifyContent="space-between">
-          <Heading size="2">{formatMessage(labels.members)}</Heading>
+          <Heading size="base">{formatMessage(labels.members)}</Heading>
           {isAdmin && <TeamsMemberAddButton teamId={teamId} />}
         </Row>
         <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />

src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx

@@ -33,7 +33,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
         <Grid columns="1fr auto" gap>
           <Column gap>
             <Row>
-              <Text size="4" weight="bold">
+              <Text size="lg" weight="bold">
                 {name}
               </Text>
             </Row>
@@ -66,21 +66,21 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
                 <Column alignItems="center" position="relative">
                   <Row
                     borderRadius="full"
-                    backgroundColor="3"
+                    backgroundColor="surface-sunken"
                     width="40px"
                     height="40px"
                     justifyContent="center"
                     alignItems="center"
                     style={{ zIndex: 1 }}
                   >
-                    <Text weight="bold" size="3">
+                    <Text weight="bold" size="base">
                       {index + 1}
                     </Text>
                   </Row>
                   {index > 0 && (
                     <Box
                       position="absolute"
-                      backgroundColor="3"
+                      backgroundColor="surface-sunken"
                       width="2px"
                       height="120px"
                       top="-100%"
@@ -121,7 +121,7 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
                       style={{ width: '100%' }}
                     />
                     <Row minWidth="90px" justifyContent="end">
-                      <Text weight="bold" size="7">
+                      <Text weight="bold" size="4xl">
                         {Math.round(remaining * 100)}%
                       </Text>
                     </Row>

src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx

@@ -42,7 +42,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
           <Grid columns="1fr auto" gap>
             <Column gap>
               <Row>
-                <Text size="4" weight="bold">
+                <Text size="lg" weight="bold">
                   {name}
                 </Text>
               </Row>
@@ -92,7 +92,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
               maxValue={data?.total || 1}
               style={{ width: '100%' }}
             />
-            <Text weight="bold" size="7">
+            <Text weight="bold" size="4xl">
               {data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
             </Text>
           </Row>

src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx

@@ -131,7 +131,7 @@ const Cell = ({ children }: { children: ReactNode }) => {
       alignItems="center"
       width="100px"
       height="100px"
-      backgroundColor="2"
+      backgroundColor="surface-raised"
       borderRadius
     >
       {children}

src/app/(main)/websites/[websiteId]/WebsitePanels.tsx

@@ -21,7 +21,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
     <Grid gap="3">
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2">{formatMessage(labels.pages)}</Heading>
+          <Heading size="base">{formatMessage(labels.pages)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="path">{formatMessage(labels.path)}</Tab>
@@ -40,7 +40,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           </Tabs>
         </Panel>
         <Panel>
-          <Heading size="2">{formatMessage(labels.sources)}</Heading>
+          <Heading size="base">{formatMessage(labels.sources)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
@@ -62,7 +62,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
 
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2">{formatMessage(labels.environment)}</Heading>
+          <Heading size="base">{formatMessage(labels.environment)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@@ -82,7 +82,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
         </Panel>
 
         <Panel>
-          <Heading size="2">{formatMessage(labels.location)}</Heading>
+          <Heading size="base">{formatMessage(labels.location)}</Heading>
           <Tabs>
             <TabList>
               <Tab id="country">{formatMessage(labels.countries)}</Tab>
@@ -108,7 +108,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
         </Panel>
 
         <Panel>
-          <Heading size="2">{formatMessage(labels.traffic)}</Heading>
+          <Heading size="base">{formatMessage(labels.traffic)}</Heading>
           <Row border="bottom" marginBottom="4" />
           <WeeklyTraffic websiteId={websiteId} />
         </Panel>

src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx

@@ -169,7 +169,7 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
         <Grid columns={{ xs: '1fr', lg: '1fr 1fr' }} gap="6" height="100%">
           <Column gap="6">
             <Row alignItems="center" justifyContent="space-between">
-              <Heading size="2">{formatMessage(labels.previous)}</Heading>
+              <Heading size="base">{formatMessage(labels.previous)}</Heading>
               <DateDisplay startDate={startDate} endDate={endDate} />
             </Row>
             <MetricsTable
@@ -183,7 +183,7 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
           </Column>
           <Column border="left" paddingLeft="6" gap="6">
             <Row alignItems="center" justifyContent="space-between">
-              <Heading size="2"> {formatMessage(labels.current)}</Heading>
+              <Heading size="base"> {formatMessage(labels.current)}</Heading>
               <DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />
             </Row>
             <MetricsTable

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -183,7 +183,7 @@ export function RealtimeLog({ data }: { data: any }) {
 
   return (
     <Column gap>
-      <Heading size="2">{formatMessage(labels.activity)}</Heading>
+      <Heading size="base">{formatMessage(labels.activity)}</Heading>
       {isPhone ? (
         <>
           <Row>

src/app/(main)/websites/[websiteId]/sessions/SessionActivity.tsx

@@ -61,7 +61,7 @@ export function SessionActivity({
 
           return (
             <Column key={eventId} gap>
-              {showHeader && <Heading size="1">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
+              {showHeader && <Heading size="sm">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
               <Row alignItems="center" gap="6" height="40px">
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
                   <Text wrap="nowrap">{formatTimezoneDate(createdAt, 'pp')}</Text>

src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx

@@ -17,8 +17,8 @@ export function SessionData({ websiteId, sessionId }: { websiteId: string; sessi
               <Label>{dataKey}</Label>
               <Row alignItems="center" gap>
                 <Text>{stringValue}</Text>
-                <Box paddingY="1" paddingX="2" border borderRadius borderColor="5">
+                <Box paddingY="1" paddingX="2" border borderRadius borderColor="muted">
-                  <Text color="muted" size="1">
+                  <Text color="muted" size="xs">
                     {DATA_TYPES[dataType]}
                   </Text>
                 </Box>

src/app/login/LoginPage.tsx

@@ -4,7 +4,7 @@ import { LoginForm } from './LoginForm';
 
 export function LoginPage() {
   return (
-    <Column alignItems="center" height="100vh" backgroundColor="2" paddingTop="12">
+    <Column alignItems="center" height="100vh" backgroundColor="surface-raised" paddingTop="12">
       <LoginForm />
     </Column>
   );

src/components/charts/ChartTooltip.tsx

@@ -1,4 +1,4 @@
-import { Column, FloatingTooltip, Row, StatusLight } from '@umami/react-zen';
+import { Column, FloatingTooltip, Row, StatusLight, Text } from '@umami/react-zen';
 import type { ReactNode } from 'react';
 
 export function ChartTooltip({
@@ -12,10 +12,18 @@ export function ChartTooltip({
 }) {
   return (
     <FloatingTooltip>
-      <Column gap="3" fontSize="1">
+      <Column
-        {title && <Row alignItems="center">{title}</Row>}
+        gap="3"
+        backgroundColor="surface-inverted"
+        color="inverted"
+        padding="4"
+        borderRadius="md"
+      >
+        {title && <Text size="sm">{title}</Text>}
         <Row alignItems="center">
-          <StatusLight color={color}>{value}</StatusLight>
+          <StatusLight color={color}>
+            <Text size="sm">{value}</Text>
+          </StatusLight>
         </Row>
       </Column>
     </FloatingTooltip>

src/components/common/EmptyPlaceholder.tsx

@@ -12,12 +12,12 @@ export function EmptyPlaceholder({ title, description, icon, children }: EmptyPl
   return (
     <Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%">
       {icon && (
-        <Icon color="10" size="xl">
+        <Icon color="muted" size="xl">
           {icon}
         </Icon>
       )}
       {title && (
-        <Text weight="bold" size="4">
+        <Text weight="bold" size="lg">
           {title}
         </Text>
       )}

src/components/common/SectionHeader.tsx

@@ -19,7 +19,7 @@ export function SectionHeader({
     <Row {...props} justifyContent="space-between" alignItems="center" height="60px">
       <Row gap="3" alignItems="center">
         {icon && <Icon size="md">{icon}</Icon>}
-        {title && <Heading size="3">{title}</Heading>}
+        {title && <Heading size="lg">{title}</Heading>}
         {description && <Text color="muted">{description}</Text>}
       </Row>
       <Row justifyContent="flex-end">{children}</Row>

src/components/input/FilterBar.tsx

@@ -51,7 +51,13 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
   }
 
   return (
-    <Row gap alignItems="center" justifyContent="space-between" padding="2" backgroundColor="3">
+    <Row
+      gap
+      alignItems="center"
+      justifyContent="space-between"
+      padding="2"
+      backgroundColor="surface-sunken"
+    >
       <Row alignItems="center" gap="2" wrap="wrap">
         {segment && !isLoading && (
           <FilterItem
@@ -138,11 +144,11 @@ const FilterItem = ({ name, label, operator, value, onRemove }) => {
     >
       <Row alignItems="center" gap="4">
         <Row alignItems="center" gap="2">
-          <Text color="12" weight="bold">
+          <Text color="primary" weight="bold">
             {label}
           </Text>
-          <Text color="11">{operator}</Text>
+          <Text color="muted">{operator}</Text>
-          <Text color="12" weight="bold">
+          <Text color="primary" weight="bold">
             {value}
           </Text>
         </Row>

src/components/metrics/ActiveUsers.tsx

@@ -30,7 +30,7 @@ export function ActiveUsers({
   return (
     <LinkButton href={`/websites/${websiteId}/realtime`} variant="quiet">
       <StatusLight variant="success">
-        <Text size="2" weight="medium">
+        <Text size="sm" weight="medium">
           {count} {formatMessage(labels.online)}
         </Text>
       </StatusLight>

src/components/metrics/Legend.tsx

@@ -23,7 +23,7 @@ export function Legend({
           <Row key={text} onClick={() => onClick(item)}>
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
               <Text
-                size="2"
+                size="sm"
                 color={hidden ? 'disabled' : undefined}
                 truncate={true}
                 style={{ maxWidth: '300px' }}

src/components/metrics/ListTable.tsx

@@ -133,7 +133,7 @@ const AnimatedRow = ({
           justifyContent="flex-start"
           position="relative"
           border="left"
-          borderColor="8"
+          borderColor="strong"
           color="muted"
           paddingLeft="3"
         >

src/components/metrics/WeeklyTraffic.tsx

@@ -49,7 +49,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
                   });
                   return (
                     <Row key={i} justifyContent="flex-end">
-                      <Text color="muted" size="2">
+                      <Text color="muted" size="sm">
                         {label}
                       </Text>
                     </Row>
@@ -79,7 +79,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
                           <Row
                             alignItems="center"
                             justifyContent="center"
-                            backgroundColor="2"
+                            backgroundColor="surface-raised"
                             width="16px"
                             height="16px"
                             borderRadius="full"