From 3fc392fcec4dce94bbc73aa523e64a4aa3f9d3f0 Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Sat, 19 Sep 2026 10:55:19 -0700
Subject: [PATCH] fix(ui): use defined status and interaction color tokens

---
 .../browser-session/browser-downloads.tsx           | 13 ++++++-------
 apps/sim/app/workspace/[workspaceId]/home/home.tsx  |  2 +-
 .../execution-snapshot/execution-snapshot.tsx       |  2 +-
 .../workflow-mcp-servers/workflow-mcp-servers.tsx   |  2 +-
 .../import-progress-menu/import-progress-menu.tsx   |  2 +-
 .../emcn/src/components/tab-strip/tab-strip.tsx     |  2 +-
 6 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
index 2690ae9f639..ed3ae9e2eb1 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
@@ -134,21 +134,20 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
           size='sm'
           aria-label={label}
           title={label}
-          className={cn(
-            'relative size-[30px] shrink-0 overflow-hidden p-0',
-            hasUnviewedCompletion && 'text-[var(--brand-primary)]'
-          )}
+          className='relative size-[30px] shrink-0 overflow-hidden p-0'
           onClick={() => setHasUnviewedCompletion(false)}
         >
           {hasActiveDownloads ? (
-            <Loader animate className='size-[14px] text-[var(--brand-primary)]' />
+            <Loader animate className='size-[14px] text-[var(--brand-blue)]' />
           ) : completionAnimationVersion > 0 ? (
             <CircleCheck
               key={completionAnimationVersion}
               className='zoom-in-50 size-[14px] animate-in text-[var(--badge-success-text)] duration-150 motion-reduce:animate-none'
             />
           ) : (
-            <Download className='size-[14px]' />
+            <Download
+              className={cn('size-[14px]', hasUnviewedCompletion && 'text-[var(--brand-blue)]')}
+            />
           )}
           {hasActiveDownloads && aggregatePercent !== null && (
             <span
@@ -156,7 +155,7 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
               className='absolute inset-x-1.5 bottom-1 h-0.5 overflow-hidden rounded-full bg-[var(--surface-6)]'
             >
               <span
-                className='block h-full rounded-full bg-[var(--brand-primary)] transition-[width] duration-150'
+                className='block h-full rounded-full bg-[var(--brand-blue)] transition-[width] duration-150'
                 style={{ width: `${aggregatePercent}%` }}
               />
             </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 56846b001d5..be6316624d4 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -787,7 +787,7 @@ function HomeContent({ chatId, userName, userId }: HomeProps) {
             {isResourceCollapsed && resourceActivityIds.size > 0 && (
               <span
                 aria-hidden='true'
-                className='-top-0.5 -right-0.5 absolute size-1.5 rounded-full bg-[var(--brand-primary)]'
+                className='-top-0.5 -right-0.5 absolute size-1.5 rounded-full bg-[var(--brand-blue)]'
               />
             )}
           </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
index 08d8c4095f2..14b5357d18a 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
@@ -135,7 +135,7 @@ export function ExecutionSnapshot({
           className={cn('flex flex-col items-center justify-center gap-4 p-8', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-3 text-[var(--text-warning)]'>
+          <div className='flex items-center gap-3 text-[var(--warning)]'>
             <CircleAlert className='size-[20px]' />
             <span className='text-base'>Logged State Not Found</span>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index 8e60c534209..c0bbd87f022 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -612,7 +612,7 @@ function ServerDetailView({
                       {activeConfigTab === 'cursor' && (
                         <a
                           href={getCursorInstallUrl(server.isPublic, server.name)}
-                          className='absolute top-1.5 right-2 inline-flex rounded-md bg-[var(--surface-5)] ring-[length:var(--border-width)] ring-[var(--border-1)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+                          className='absolute top-1.5 right-2 inline-flex rounded-md bg-[var(--surface-5)] ring-[length:var(--border-width)] ring-[var(--border-1)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--selection)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
                         >
                           <img
                             src='https://cursor.com/deeplink/mcp-install-dark.svg'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx
index 33efeb839b7..070ec159db8 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx
@@ -93,7 +93,7 @@ export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuP
                 isReadyExport ? (
                   <button
                     type='button'
-                    className='text-[var(--brand-primary)] hover-hover:underline'
+                    className='text-[var(--selection)] hover-hover:underline'
                     onClick={() => download(row)}
                   >
                     Download
diff --git a/packages/emcn/src/components/tab-strip/tab-strip.tsx b/packages/emcn/src/components/tab-strip/tab-strip.tsx
index ac8e2256fd0..466e17a1a08 100644
--- a/packages/emcn/src/components/tab-strip/tab-strip.tsx
+++ b/packages/emcn/src/components/tab-strip/tab-strip.tsx
@@ -461,7 +461,7 @@ const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
             {tab.attention && !tab.active && (
               <span
                 className={cn(
-                  'size-1.5 shrink-0 rounded-full bg-[var(--brand-primary)]',
+                  'size-1.5 shrink-0 rounded-full bg-[var(--brand-blue)]',
                   tab.pinned && 'absolute right-1 bottom-1'
                 )}
                 aria-label='Background activity'