fix(ui): use defined status and interaction color tokens (#8012)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

Author: BillLeoutsakosvl346

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx

@@ -134,29 +134,28 @@ 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
               aria-hidden
               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>

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>

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>

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'

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

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'