From 315fcca10a826d8aa1cbdffc3ef5b5eb5a1e2f9d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 24 Sep 2026 10:49:04 -0700
Subject: [PATCH] fix(web): web colors come from theme tokens (#13371)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/ChatMarkdown.tsx      |  2 +-
 apps/web/src/components/Icons.tsx             | 85 +++++++++++++++++++
 apps/web/src/components/LegacySidebar.tsx     |  2 +-
 apps/web/src/components/QuitHoldOverlay.tsx   |  2 +-
 apps/web/src/components/Sidebar.tsx           | 18 ++--
 .../ThreadNotificationCoordinator.tsx         | 17 +---
 apps/web/src/components/ThreadSearchMatch.tsx |  2 +-
 apps/web/src/components/chat/ChatComposer.tsx |  2 +-
 .../components/chat/ContextWindowMeter.tsx    |  2 +-
 .../src/components/chat/MessagesTimeline.tsx  | 26 +-----
 apps/web/src/components/chat/ModelListRow.tsx |  2 +-
 .../chat/TerminalContextInlineChip.tsx        |  2 +-
 .../cloud/ConnectCliAuthSurface.tsx           |  2 +-
 .../components/device/DeviceStreamView.tsx    |  4 +-
 .../preview/ThreadPreviewMiniPlayer.tsx       |  6 +-
 .../pullRequest/PullRequestCodeTab.tsx        |  8 +-
 .../pullRequest/PullRequestDetailPanel.tsx    |  2 +-
 .../PullRequestReviewAnnotation.tsx           |  2 +-
 .../pullRequest/PullRequestSummaryTab.tsx     |  2 +-
 .../settings/AddProviderInstanceDialog.tsx    |  2 +-
 .../settings/ConnectionsSettings.tsx          |  2 +-
 .../settings/DiagnosticsSettings.tsx          | 10 +--
 .../settings/ResourceTelemetryDiagnostics.tsx | 48 +++++------
 .../settings/SnapShotSetupDialog.tsx          | 77 ++---------------
 .../sidebar/DesktopUpdateStatusIcon.tsx       |  2 +-
 apps/web/src/components/usage/UsagePage.tsx   |  2 +-
 apps/web/src/routes/_chat.pull-requests.tsx   |  2 +-
 vite.config.ts                                | 12 +++
 28 files changed, 173 insertions(+), 172 deletions(-)

diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index 56d46c010891e77de07897bf98db82f109a0c8ec..8a174852ece262ba5736ac8f09566acbfe256e15 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -308,7 +308,7 @@ function CodexArtifactTemplateCard(props: {
       <div className="flex min-w-0 flex-1 items-center gap-3">
         <span className="relative flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-background text-muted-foreground shadow-xs">
           <Icon aria-hidden className="size-5" />
-          <span className="absolute -right-1 -bottom-1 flex size-4 items-center justify-center rounded-full border border-background bg-fuchsia-500 text-white shadow-xs">
+          <span className="absolute -right-1 -bottom-1 flex size-4 items-center justify-center rounded-full border border-background bg-primary text-primary-foreground shadow-xs">
             <SparklesIcon aria-hidden className="size-2.5" />
           </span>
         </span>
diff --git a/apps/web/src/components/Icons.tsx b/apps/web/src/components/Icons.tsx
index e4d41d53c3a8978c541d03e9ffa9c9a90e03dae2..23b10a36676e7fd6d2e5add3f642376015186026 100644
--- a/apps/web/src/components/Icons.tsx
+++ b/apps/web/src/components/Icons.tsx
@@ -781,3 +781,88 @@ export const ForgejoIcon: Icon = (props) => (
     </g>
   </svg>
 );
+
+// macOS System Settings > Privacy & Security pane marks, so the SnapShot setup
+// step points at the same icon the user is about to look for.
+export const MacScreenRecordingIcon: Icon = (props) => {
+  const gradientId = useId();
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <defs>
+        <linearGradient id={gradientId} x2="0" y2="1">
+          <stop stopColor="#ff6972" />
+          <stop offset="1" stopColor="#ff2938" />
+        </linearGradient>
+      </defs>
+      <rect
+        x="0.5"
+        y="0.5"
+        width="31"
+        height="31"
+        rx="7"
+        fill={`url(#${gradientId})`}
+        stroke="#ffffff40"
+      />
+      <circle cx="16" cy="16" r="10" fill="none" stroke="#fff" strokeWidth="2" />
+      <circle cx="16" cy="16" r="4.5" fill="#fff" />
+    </svg>
+  );
+};
+
+export const MacAccessibilityIcon: Icon = (props) => {
+  const gradientId = useId();
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <defs>
+        <linearGradient id={gradientId} x2="0" y2="1">
+          <stop stopColor="#48b6ff" />
+          <stop offset="1" stopColor="#0085ff" />
+        </linearGradient>
+      </defs>
+      <rect
+        x="0.5"
+        y="0.5"
+        width="31"
+        height="31"
+        rx="7"
+        fill={`url(#${gradientId})`}
+        stroke="#ffffff40"
+      />
+      <circle cx="16" cy="16" r="10" fill="none" stroke="#fff" strokeWidth="1.75" />
+      <circle cx="16" cy="10" r="1.6" fill="#fff" />
+      <path
+        d="m10 13 6 1 6-1M16 14v4m0 0-2.5 6m2.5-6 2.5 6"
+        fill="none"
+        stroke="#fff"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+// Codex's Computer Use app mark, shown on computer-use rows in the work log.
+export const ComputerUseAppIcon: Icon = (props) => {
+  const gradientId = `${useId().replaceAll(":", "")}-computer-use-app-gradient`;
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <defs>
+        <linearGradient id={gradientId} x1="2" y1="2" x2="22" y2="22">
+          <stop offset="0" stopColor="#00dff0" />
+          <stop offset="0.42" stopColor="#3b9cff" />
+          <stop offset="0.72" stopColor="#b044f5" />
+          <stop offset="1" stopColor="#ff78b6" />
+        </linearGradient>
+      </defs>
+      <rect x="1" y="1" width="22" height="22" rx="5" fill={`url(#${gradientId})`} />
+      <path
+        d="m7.2 6.2 10.5 4.1-4.2 2.1-2 4.7z"
+        fill="white"
+        stroke="#315cff"
+        strokeWidth="1.1"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index 82c5af7de136ad50cd4c68d216aa2f15978a19dc..e49ff602a5aab7d9996cc7266da995b24a509bee 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -806,7 +806,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
                   <button
                     type="button"
                     aria-label={`Open localhost:${discoveredPorts[0]?.port ?? ""}`}
-                    className="inline-flex cursor-pointer items-center justify-center text-emerald-600 outline-hidden focus-visible:ring-1 focus-visible:ring-ring dark:text-emerald-400"
+                    className="inline-flex cursor-pointer items-center justify-center text-success-foreground outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
                     onClick={handleOpenDiscoveredPort}
                   />
                 }
diff --git a/apps/web/src/components/QuitHoldOverlay.tsx b/apps/web/src/components/QuitHoldOverlay.tsx
index 2bca40f5b1308427fc1358583ef2096049b6dc24..607baad0c4d780aec7f22f406e0dcd14bbc9e3e5 100644
--- a/apps/web/src/components/QuitHoldOverlay.tsx
+++ b/apps/web/src/components/QuitHoldOverlay.tsx
@@ -48,7 +48,7 @@ export function QuitHoldOverlay() {
       role="status"
       className="pointer-events-none fixed inset-x-0 top-[22%] z-100 flex justify-center"
     >
-      <div className="rounded-full bg-neutral-700/95 px-8 py-4 text-2xl font-bold text-white shadow-xl">
+      <div className="rounded-full bg-foreground/95 px-8 py-4 text-2xl font-bold text-background shadow-xl">
         {message}
       </div>
     </div>
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 12b06d73947601fbca68aab93884188b202a4ddc..a06413fd043bab0b03b042d8de91d443c204ad15 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -414,7 +414,7 @@ function SidebarThreadTooltip({
             </div>
           ) : null}
           {thread.session?.lastError ? (
-            <div className="flex min-w-0 items-center gap-2 text-red-600 dark:text-red-400">
+            <div className="flex min-w-0 items-center gap-2 text-destructive-foreground">
               <CircleAlertIcon className="size-3 shrink-0 stroke-current" />
               <div className="min-w-0 truncate">Error occurred</div>
             </div>
@@ -529,8 +529,8 @@ function SortableThreadRow(props: {
 
 // Unsent work shares one look: the new-thread draft rows and thread rows
 // with unsent composer text both use this tint and pen so they read alike.
-const draftSurfaceClassName = "bg-amber-400/[0.04] hover:bg-amber-400/[0.08]";
-const draftPenClassName = "size-3 shrink-0 text-amber-600 dark:text-amber-300/80";
+const draftSurfaceClassName = "bg-warning/4 hover:bg-warning/8";
+const draftPenClassName = "size-3 shrink-0 text-warning-foreground";
 
 // Structural list items — the section headers and the
 // empty-section placeholders — take part in the sortable list so they shift
@@ -647,7 +647,7 @@ function SidebarSectionHeader(props: {
   const snoozed = props.marker === "snoozed-header";
   const className = cn(
     "flex h-full w-full items-center gap-2 px-2 text-left text-xs font-medium",
-    snoozed ? "text-blue-600 dark:text-blue-400" : "text-sidebar-muted-foreground/60",
+    snoozed ? "text-info-foreground" : "text-sidebar-muted-foreground/60",
     props.dragging && "text-sidebar-foreground/80",
     props.isDropTarget && "text-primary",
   );
@@ -658,7 +658,7 @@ function SidebarSectionHeader(props: {
         aria-hidden
         className={cn(
           "h-px min-w-2 flex-1",
-          snoozed ? "bg-blue-500/20 dark:bg-blue-400/15" : "bg-sidebar-border/60",
+          snoozed ? "bg-info/20" : "bg-sidebar-border/60",
           props.dragging && "bg-sidebar-foreground/25",
           props.isDropTarget && "bg-primary/50",
         )}
@@ -1143,7 +1143,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
           ? {
               label: "Approval",
               icon: "approval" as const,
-              className: "text-amber-700 dark:text-amber-300",
+              className: "text-warning-foreground",
             }
           : status === "input"
             ? {
@@ -1161,7 +1161,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                 ? {
                     label: "Woke",
                     icon: "woke" as const,
-                    className: "text-amber-700 dark:text-amber-300",
+                    className: "text-warning-foreground",
                   }
                 : isUnread
                   ? {
@@ -1629,7 +1629,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                   {variantAction === "unsnooze" && props.snoozeWakeLabelText !== null ? (
                     // Snoozed rows show when they come BACK, not when they were
                     // last touched — the return ticket is the row's whole story.
-                    <span className="text-xs text-blue-600 tabular-nums dark:text-blue-400">
+                    <span className="text-xs text-info-foreground tabular-nums">
                       {props.snoozeWakeLabelText}
                     </span>
                   ) : isWoke ? (
@@ -1642,7 +1642,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                             type="button"
                             aria-label="Dismiss Woke notification"
                             onClick={handleAcknowledgeWokeClick}
-                            className="inline-flex cursor-pointer items-center gap-1 rounded-sm text-xs font-medium text-amber-700 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring dark:text-amber-300"
+                            className="inline-flex cursor-pointer items-center gap-1 rounded-sm text-xs font-medium text-warning-foreground outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
                           >
                             <AlarmClockIcon aria-hidden className="size-3" />
                             <span role="status">Woke</span>
diff --git a/apps/web/src/components/ThreadNotificationCoordinator.tsx b/apps/web/src/components/ThreadNotificationCoordinator.tsx
index 1401965e90c70fea35861197696bd27784bdc612..c4494f866ccb832fae757157966e91b0d72494cb 100644
--- a/apps/web/src/components/ThreadNotificationCoordinator.tsx
+++ b/apps/web/src/components/ThreadNotificationCoordinator.tsx
@@ -164,22 +164,13 @@ function EnvironmentNotifications({
             hideCopyButton: true,
             leadingIcon:
               kind === "completion" ? (
-                <CircleCheckIcon
-                  aria-hidden
-                  className="size-4 text-emerald-700 dark:text-emerald-300"
-                />
+                <CircleCheckIcon aria-hidden className="size-4 text-success-foreground" />
               ) : status === "approval" ? (
-                <ShieldQuestionIcon
-                  aria-hidden
-                  className="size-4 text-amber-700 dark:text-amber-300"
-                />
+                <ShieldQuestionIcon aria-hidden className="size-4 text-warning-foreground" />
               ) : status === "failed" ? (
-                <CircleAlertIcon aria-hidden className="size-4 text-red-700 dark:text-red-300" />
+                <CircleAlertIcon aria-hidden className="size-4 text-destructive-foreground" />
               ) : (
-                <MessageCircleQuestionIcon
-                  aria-hidden
-                  className="size-4 text-indigo-600 dark:text-indigo-300"
-                />
+                <MessageCircleQuestionIcon aria-hidden className="size-4 text-info-foreground" />
               ),
           },
           actionProps: {
diff --git a/apps/web/src/components/ThreadSearchMatch.tsx b/apps/web/src/components/ThreadSearchMatch.tsx
index db2e286ae28d514b2fa6bd29138897b077c74946..a79ab85439876c44a05f1f6943cd9a563d403b73 100644
--- a/apps/web/src/components/ThreadSearchMatch.tsx
+++ b/apps/web/src/components/ThreadSearchMatch.tsx
@@ -57,7 +57,7 @@ export function ThreadSearchMatchExcerpt(props: {
   const isUser = props.match.source === "user";
   return (
     <span className="truncate text-xs text-muted-foreground/85">
-      <span className={isUser ? "text-blue-400" : "text-emerald-400"}>
+      <span className={isUser ? "text-info-foreground" : "text-success-foreground"}>
         {isUser ? "You:" : "Agent:"}
       </span>{" "}
       <HighlightedSearchText text={props.match.snippet} query={props.match.query} />
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 15440c577ef3de8007b207d2e70d838a4afcc9d8..c5d1d01dad60ff986fd233a5a6d9f8e801fb666a 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -6559,7 +6559,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                                     <span
                                       role="img"
                                       aria-label="Draft attachment may not persist"
-                                      className="absolute left-1 top-1 inline-flex items-center justify-center rounded bg-background/85 p-0.5 text-amber-600"
+                                      className="absolute left-1 top-1 inline-flex items-center justify-center rounded bg-background/85 p-0.5 text-warning-foreground"
                                     >
                                       <CircleAlertIcon className="size-3" />
                                     </span>
diff --git a/apps/web/src/components/chat/ContextWindowMeter.tsx b/apps/web/src/components/chat/ContextWindowMeter.tsx
index 8f6b09954d3ab3f499769166f68329c0b1c4ccc7..43d5fb061d4e7d7c7ddfe85e7cdf86e6f6fe2658 100644
--- a/apps/web/src/components/chat/ContextWindowMeter.tsx
+++ b/apps/web/src/components/chat/ContextWindowMeter.tsx
@@ -63,7 +63,7 @@ export function ContextWindowMeter(props: {
                   cy="12"
                   r={radius}
                   fill="none"
-                  stroke="color-mix(in oklab, var(--color-muted-foreground) 24%, transparent)"
+                  className="stroke-muted-foreground/24"
                   strokeWidth="3"
                 />
                 <circle
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 20b8438fbc1c4f3e99fcf3500976feb7bddac2e9..d15e869543d0a5dd5d098ceefbc7cd3125285aa3 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -63,7 +63,6 @@ import {
   use,
   useCallback,
   useEffect,
-  useId,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -256,6 +255,7 @@ import {
   type ReviewCommentContext,
 } from "../../reviewCommentContext";
 import { PullRequestGlyph } from "~/components/pullRequest/pullRequestIcons";
+import { ComputerUseAppIcon } from "~/components/Icons";
 
 // ---------------------------------------------------------------------------
 // Context — shared state consumed by every row component via Context.
@@ -4146,30 +4146,6 @@ function BrowserAppIcon({ className }: { className: string }) {
   );
 }
 
-function ComputerUseAppIcon({ className }: { className: string }) {
-  const gradientId = `${useId().replaceAll(":", "")}-computer-use-app-gradient`;
-  return (
-    <svg viewBox="0 0 24 24" className={className} aria-hidden>
-      <defs>
-        <linearGradient id={gradientId} x1="2" y1="2" x2="22" y2="22">
-          <stop offset="0" stopColor="#00dff0" />
-          <stop offset="0.42" stopColor="#3b9cff" />
-          <stop offset="0.72" stopColor="#b044f5" />
-          <stop offset="1" stopColor="#ff78b6" />
-        </linearGradient>
-      </defs>
-      <rect x="1" y="1" width="22" height="22" rx="5" fill={`url(#${gradientId})`} />
-      <path
-        d="m7.2 6.2 10.5 4.1-4.2 2.1-2 4.7z"
-        fill="white"
-        stroke="#315cff"
-        strokeWidth="1.1"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
 function ToolActivityIconView(props: {
   icon: ToolActivityIcon | undefined;
   fallbackName: WorkEntryIconName;
diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 7206d8b795279ca34cd7ef43cec9390737cfbb02..7e8bdeb24ce82ec657929f8761c7422feda3242f 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -117,7 +117,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
                 <StarIcon
                   className={cn(
                     "size-3.5 sm:size-3",
-                    props.isFavorite && "fill-current text-yellow-500",
+                    props.isFavorite && "fill-current text-warning",
                   )}
                 />
               </Button>
diff --git a/apps/web/src/components/chat/TerminalContextInlineChip.tsx b/apps/web/src/components/chat/TerminalContextInlineChip.tsx
index 8ec06221c6492efbee9037123db9f0f223629f2c..faf5ae3dccbcafa16d449a5afe33a819f98568cb 100644
--- a/apps/web/src/components/chat/TerminalContextInlineChip.tsx
+++ b/apps/web/src/components/chat/TerminalContextInlineChip.tsx
@@ -26,7 +26,7 @@ export function TerminalContextInlineChip(props: TerminalContextInlineChipProps)
       >
         <div className="overflow-hidden rounded-md border border-border/70 bg-background/80">
           <div className="flex items-center gap-2 border-b border-border/70 px-3 py-2">
-            <TerminalIcon className="size-4 shrink-0 text-emerald-500" aria-hidden />
+            <TerminalIcon className="size-4 shrink-0 text-success" aria-hidden />
             <span className="min-w-0 truncate text-sm font-medium text-foreground">
               {terminalLabel}
             </span>
diff --git a/apps/web/src/components/cloud/ConnectCliAuthSurface.tsx b/apps/web/src/components/cloud/ConnectCliAuthSurface.tsx
index afe0dbc31c5eeea7e7e6a54fcee479d17f68d57b..408d2bbe36e095e32997a282c1ce118825a2e9b6 100644
--- a/apps/web/src/components/cloud/ConnectCliAuthSurface.tsx
+++ b/apps/web/src/components/cloud/ConnectCliAuthSurface.tsx
@@ -23,7 +23,7 @@ function ConnectCliAuthMessage({
   return (
     <>
       {eyebrow ? (
-        <p className="text-[10px] font-semibold tracking-[0.18em] text-blue-600 uppercase dark:text-blue-400">
+        <p className="text-[10px] font-semibold tracking-[0.18em] text-primary uppercase">
           {eyebrow}
         </p>
       ) : null}
diff --git a/apps/web/src/components/device/DeviceStreamView.tsx b/apps/web/src/components/device/DeviceStreamView.tsx
index 3e2cd54e3c269f32e97e62a3b783e51dc04cb630..0a4cfb97b1bfcfbb81aba64ab68cfe5c21a5d156 100644
--- a/apps/web/src/components/device/DeviceStreamView.tsx
+++ b/apps/web/src/components/device/DeviceStreamView.tsx
@@ -395,7 +395,7 @@ export function DeviceStreamView(props: {
               {axElements.map((element) => (
                 <div
                   key={element.id}
-                  className="absolute border border-sky-400/80 bg-sky-400/10"
+                  className="absolute border border-info/80 bg-info/10"
                   style={{
                     left: `${element.x * 100}%`,
                     top: `${element.y * 100}%`,
@@ -404,7 +404,7 @@ export function DeviceStreamView(props: {
                   }}
                 >
                   {element.label ? (
-                    <span className="absolute -top-3.5 left-0 max-w-full truncate rounded-sm bg-sky-500 px-1 text-[9px] leading-3.5 text-white">
+                    <span className="absolute -top-3.5 left-0 max-w-full truncate rounded-sm bg-info px-1 text-[9px] leading-3.5 text-white">
                       {element.label}
                     </span>
                   ) : null}
diff --git a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
index 3e42c39715ee7704b5d1d1fcd7eab019b9acd515..0538495da7c4c536778ab89a194cf29842e75cd8 100644
--- a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
+++ b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
@@ -462,7 +462,9 @@ function MiniPlayerShell({
               <span
                 className={cn(
                   "block size-2 rounded-full shadow-sm ring-1 ring-background/70",
-                  recording ? "bg-red-500 motion-safe:animate-status-pulse" : "bg-foreground/25",
+                  recording
+                    ? "bg-destructive motion-safe:animate-status-pulse"
+                    : "bg-foreground/25",
                 )}
               />
             </div>
@@ -475,7 +477,7 @@ function MiniPlayerShell({
             >
               {recording ? (
                 <span aria-hidden className="flex size-6 shrink-0 items-center justify-center">
-                  <span className="size-2 rounded-full bg-red-500 motion-safe:animate-status-pulse" />
+                  <span className="size-2 rounded-full bg-destructive motion-safe:animate-status-pulse" />
                 </span>
               ) : null}
               <Tooltip>
diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
index 997f2d46f836d45bd8398cbecddf7b933b9f210e..1139b412bde571534a181df61b2d65aa67296134 100644
--- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
@@ -852,7 +852,7 @@ function PullRequestCodeTab({
             />
             {stale ? (
               <Tooltip>
-                <TooltipTrigger render={<span className="text-amber-600 dark:text-amber-500" />}>
+                <TooltipTrigger render={<span className="text-warning-foreground" />}>
                   Changed
                 </TooltipTrigger>
                 <TooltipPopup side="bottom">
@@ -1157,7 +1157,7 @@ function PullRequestCodeTab({
                   <TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
                     <TriangleAlertIcon
                       aria-label="Your ticks could not be read"
-                      className="size-3.5 text-amber-600 dark:text-amber-500"
+                      className="size-3.5 text-warning-foreground"
                     />
                   </TooltipTrigger>
                   <TooltipPopup side="bottom">
@@ -1171,7 +1171,7 @@ function PullRequestCodeTab({
                   <TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
                     <TriangleAlertIcon
                       aria-label="This count covers only part of the change"
-                      className="size-3.5 text-amber-600 dark:text-amber-500"
+                      className="size-3.5 text-warning-foreground"
                     />
                   </TooltipTrigger>
                   <TooltipPopup side="bottom">
@@ -1187,7 +1187,7 @@ function PullRequestCodeTab({
               <TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
                 <TriangleAlertIcon
                   aria-label="Some of this diff was not shown"
-                  className="size-3.5 text-amber-600 dark:text-amber-500"
+                  className="size-3.5 text-warning-foreground"
                 />
               </TooltipTrigger>
               <TooltipPopup side="bottom">
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index de2ee18f9d9978dd44db893a420db8b9e8190c1c..e8507ae3cfe669ea829943faa99b63ceac0b142b 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -379,7 +379,7 @@ function PullRequestBaseFreshnessWarning({
             type="button"
             aria-label={summary}
             className={cn(
-              "inline-flex min-w-0 shrink-0 cursor-help items-center gap-1 rounded-sm text-amber-600 outline-none focus-visible:ring-2 focus-visible:ring-ring dark:text-amber-400/90",
+              "inline-flex min-w-0 shrink-0 cursor-help items-center gap-1 rounded-sm text-warning-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
               className,
             )}
           />
diff --git a/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx b/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
index 11acd48a4c105df8be4799e9794fe0b06d5d5e9b..1ba8ccba3780709db94e93d6856e0b1999346d0b 100644
--- a/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
@@ -220,7 +220,7 @@ export function ReviewThreadCard({
     >
       <div className="flex items-center gap-2 text-xs text-muted-foreground">
         {thread.isResolved ? (
-          <CheckCircle2Icon className="size-3.5 text-emerald-600 dark:text-emerald-500" />
+          <CheckCircle2Icon className="size-3.5 text-success-foreground" />
         ) : (
           <CircleIcon className="size-3.5" />
         )}
diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index 33b9a42c6ce061641f5f80d3193f8e58496e89de..100a0f5737b998bdecbf4526fa853235ffb1fc2d 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -943,7 +943,7 @@ export function PullRequestSummaryTab({
         ) : (
           <>
             {detail.commentsTruncated ? (
-              <p className="mb-2 rounded-md border border-amber-500/30 bg-amber-500/5 px-2 py-1.5 text-xs">
+              <p className="mb-2 rounded-md border border-warning/30 bg-warning-surface px-2 py-1.5 text-xs">
                 This conversation is longer than this page reads in one go. The most recent{" "}
                 {detail.comments.length} are here; open it on the host to read the rest.
               </p>
diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
index f912f5f68d652e0fde6d33dad28762bdb8fbb41c..806a887822fcded149fe4c6fd8bd9a5dc4e9d967 100644
--- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
@@ -259,7 +259,7 @@ export function AddProviderInstanceDialog({
                   <RadioPrimitive.Root
                     key={option.value}
                     value={option.value}
-                    className="relative flex cursor-pointer items-center gap-3 rounded-lg bg-card px-3 py-3 text-left text-muted-foreground outline-none ring-1 ring-black/5 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-ring data-checked:bg-primary/8 data-checked:text-foreground data-checked:ring-2 data-checked:ring-primary data-checked:hover:bg-primary/8 dark:bg-white/3 dark:ring-white/5 dark:hover:bg-white/5 dark:data-checked:bg-primary/15 dark:data-checked:ring-primary dark:data-checked:hover:bg-primary/15"
+                    className="relative flex cursor-pointer items-center gap-3 rounded-lg bg-card px-3 py-3 text-left text-muted-foreground outline-none ring-1 ring-black/5 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring data-checked:bg-primary/8 data-checked:text-foreground data-checked:ring-2 data-checked:ring-primary data-checked:hover:bg-primary/8 dark:bg-white/3 dark:ring-white/5 dark:hover:bg-white/5 dark:data-checked:bg-primary/15 dark:data-checked:ring-primary dark:data-checked:hover:bg-primary/15"
                   >
                     <IconComponent className="size-4 shrink-0" aria-hidden />
                     <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index defd65cbf6b913d26173d4086b200542db3bb9d1..6455831ccb046100e5a2b8269a18b3347169b811 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -756,7 +756,7 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
           <div className="flex min-h-5 items-center gap-1.5">
             <ConnectionStatusDot
               tooltipText={`Link created at ${formatAccessTimestamp(pairingLink.createdAt)}`}
-              dotClassName="bg-amber-400"
+              dotClassName="bg-warning"
             />
             <h3 className="text-sm font-medium text-foreground">{primaryLabel}</h3>
           </div>
diff --git a/apps/web/src/components/settings/DiagnosticsSettings.tsx b/apps/web/src/components/settings/DiagnosticsSettings.tsx
index 15ad85bbb1a76a048785d6fc3479f67f52841d64..17555540145a7de8a89efaad4c405be4972b4ef8 100644
--- a/apps/web/src/components/settings/DiagnosticsSettings.tsx
+++ b/apps/web/src/components/settings/DiagnosticsSettings.tsx
@@ -116,7 +116,7 @@ function StatBlock({
       <div
         className={cn(
           "mt-1 truncate font-mono text-lg font-semibold tabular-nums text-foreground",
-          tone === "warning" && "text-amber-600 dark:text-amber-400",
+          tone === "warning" && "text-warning-foreground",
           tone === "danger" && "text-destructive",
         )}
       >
@@ -287,7 +287,7 @@ function ProcessNameCell({
       ) : (
         <span className="size-5 shrink-0" aria-hidden="true" />
       )}
-      <span className="size-1.5 shrink-0 rounded-full bg-emerald-500/80" />
+      <span className="size-1.5 shrink-0 rounded-full bg-success/80" />
       <Tooltip>
         <TooltipTrigger
           render={<span className="min-w-0 truncate font-medium text-foreground">{name}</span>}
@@ -465,7 +465,7 @@ function ResourceHistoryProcessNameCell({
       <span
         className={cn(
           "size-1.5 shrink-0 rounded-full",
-          process.isServerRoot ? "bg-amber-500/90" : "bg-emerald-500/80",
+          process.isServerRoot ? "bg-warning/90" : "bg-success/80",
         )}
       />
       <Tooltip>
@@ -1100,9 +1100,7 @@ export function DiagnosticsSettingsPanel() {
               <div
                 className={cn(
                   "flex items-start gap-2",
-                  traceDiagnosticsPartialFailure
-                    ? "text-amber-600 dark:text-amber-400"
-                    : "text-destructive",
+                  traceDiagnosticsPartialFailure ? "text-warning-foreground" : "text-destructive",
                 )}
               >
                 <AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0" />
diff --git a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
index aa125e0efd4d4fd161f78f7f81084a6fc59eea3d..2fabb2417890a72d3f0414a3a20434440e33950e 100644
--- a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
+++ b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
@@ -142,10 +142,10 @@ function categoryLabel(category: ResourceTelemetryProcessCategory): string {
 }
 
 function categoryDotClass(category: ResourceTelemetryProcessCategory): string {
-  if (category === "resource-monitor") return "bg-amber-500";
-  if (category.startsWith("electron-")) return "bg-sky-500";
+  if (category === "resource-monitor") return "bg-warning";
+  if (category.startsWith("electron-")) return "bg-info";
   if (category === "server") return "bg-violet-500";
-  return "bg-emerald-500";
+  return "bg-success";
 }
 
 function ioSemanticsLabel(semantics: ResourceTelemetryIoSemantics): string {
@@ -196,10 +196,8 @@ function SourceStatusBadge({
       className={cn(
         "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.08em]",
         tone === "neutral" && "border-border/70 bg-muted/45 text-muted-foreground",
-        tone === "default" &&
-          "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
-        tone === "warning" &&
-          "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+        tone === "default" && "border-success/25 bg-success/10 text-success-foreground",
+        tone === "warning" && "border-warning/30 bg-warning/10 text-warning-foreground",
         tone === "danger" && "border-destructive/30 bg-destructive/10 text-destructive",
       )}
     >
@@ -207,8 +205,8 @@ function SourceStatusBadge({
         className={cn(
           "size-1.5 rounded-full",
           tone === "neutral" && "bg-muted-foreground/55",
-          tone === "default" && "bg-emerald-500",
-          tone === "warning" && "bg-amber-500",
+          tone === "default" && "bg-success",
+          tone === "warning" && "bg-warning",
           tone === "danger" && "bg-destructive",
         )}
       />
@@ -258,7 +256,7 @@ function IconStat({
       <div
         className={cn(
           "mt-2.5 truncate font-mono text-2xl font-semibold tracking-[-0.05em] tabular-nums text-foreground",
-          tone === "warning" && "text-amber-600 dark:text-amber-300",
+          tone === "warning" && "text-warning-foreground",
           tone === "danger" && "text-destructive",
         )}
       >
@@ -412,10 +410,10 @@ function ResourceHistoryChart({
           <span className="h-1.5 w-3 rounded-full bg-foreground/70" /> CPU average
         </span>
         <span className="inline-flex items-center gap-1.5">
-          <span className="h-1.5 w-3 rounded-full bg-sky-500/70" /> I/O reads
+          <span className="h-1.5 w-3 rounded-full bg-info/70" /> I/O reads
         </span>
         <span className="inline-flex items-center gap-1.5">
-          <span className="h-1.5 w-3 rounded-full bg-amber-500/80" /> I/O writes
+          <span className="h-1.5 w-3 rounded-full bg-warning/80" /> I/O writes
         </span>
       </div>
       <div className="flex h-32 items-end gap-1 overflow-hidden rounded-lg border border-border/40 bg-muted/8 px-2 pt-3 pb-2">
@@ -445,11 +443,11 @@ function ResourceHistoryChart({
                       style={{ height: `${cpuHeight}%` }}
                     />
                     <span
-                      className="block rounded-t-sm bg-sky-500/70"
+                      className="block rounded-t-sm bg-info/70"
                       style={{ height: `${readHeight}%` }}
                     />
                     <span
-                      className="block rounded-t-sm bg-amber-500/80"
+                      className="block rounded-t-sm bg-warning/80"
                       style={{ height: `${writeHeight}%` }}
                     />
                   </div>
@@ -632,10 +630,10 @@ function ProcessTable({
                 <td className="px-3 py-2 text-right font-mono tabular-nums">
                   {formatBytes(process.residentBytes)}
                 </td>
-                <td className="px-3 py-2 text-right font-mono tabular-nums text-sky-700 dark:text-sky-300">
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-info-foreground">
                   {formatRate(process.ioReadBytesPerSecond)}
                 </td>
-                <td className="px-3 py-2 text-right font-mono tabular-nums text-amber-700 dark:text-amber-300">
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-warning-foreground">
                   {formatRate(process.ioWriteBytesPerSecond)}
                 </td>
                 <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
@@ -740,10 +738,10 @@ function HistoryProcessTable({
                 <td className="px-3 py-2 text-right font-mono tabular-nums">
                   {formatBytes(process.peakRssBytes)}
                 </td>
-                <td className="px-3 py-2 text-right font-mono tabular-nums text-sky-700 dark:text-sky-300">
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-info-foreground">
                   {formatBytes(process.ioReadBytes)}
                 </td>
-                <td className="px-3 py-2 text-right font-mono tabular-nums text-amber-700 dark:text-amber-300">
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-warning-foreground">
                   {formatBytes(process.ioWriteBytes)}
                 </td>
                 <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
@@ -797,10 +795,10 @@ function AttributionTable({ entries }: { entries: ReadonlyArray<ResourceAttribut
                 {entry.component}
               </td>
               <td className="truncate px-3 py-2 text-muted-foreground">{entry.operation}</td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-sky-700 dark:text-sky-300">
+              <td className="px-3 py-2 text-right font-mono tabular-nums text-info-foreground">
                 {formatBytes(entry.logicalReadBytes)}
               </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-amber-700 dark:text-amber-300">
+              <td className="px-3 py-2 text-right font-mono tabular-nums text-warning-foreground">
                 {formatBytes(entry.logicalWriteBytes)}
               </td>
               <td className="px-3 py-2 text-right font-mono tabular-nums">{entry.count}</td>
@@ -997,7 +995,7 @@ export function ResourceTelemetryDiagnostics({
               </p>
             </div>
             <div className="flex items-center gap-2 text-[10px] text-muted-foreground/65">
-              <span className="size-1.5 rounded-full bg-emerald-500" />
+              <span className="size-1.5 rounded-full bg-success" />
               Sampling every {snapshot ? formatSampleInterval(snapshot.sampleIntervalMs) : "..."}
             </div>
           </div>
@@ -1063,17 +1061,17 @@ export function ResourceTelemetryDiagnostics({
             <div className="grid border-t border-border/60 bg-muted/10 md:grid-cols-3">
               <AggregateCard
                 label="Backend + agents"
-                accentClass="bg-emerald-500/80"
+                accentClass="bg-success/80"
                 aggregate={snapshot.groups.backend}
               />
               <AggregateCard
                 label="Desktop"
-                accentClass="bg-sky-500/80"
+                accentClass="bg-info/80"
                 aggregate={snapshot.groups.electron}
               />
               <AggregateCard
                 label="Monitor overhead"
-                accentClass="bg-amber-500/80"
+                accentClass="bg-warning/80"
                 aggregate={snapshot.groups.monitor}
               />
             </div>
@@ -1186,7 +1184,7 @@ export function ResourceTelemetryDiagnostics({
                   value={String(snapshot.health.inaccessibleProcessCount)}
                   valueClassName={
                     snapshot.health.inaccessibleProcessCount > 0
-                      ? "text-amber-600 dark:text-amber-300"
+                      ? "text-warning-foreground"
                       : undefined
                   }
                 />
diff --git a/apps/web/src/components/settings/SnapShotSetupDialog.tsx b/apps/web/src/components/settings/SnapShotSetupDialog.tsx
index f0adbcc40cf18dd815bf523766014a2282c985dc..c5ba97cedd978dd372bb120139eecdbfd8109b21 100644
--- a/apps/web/src/components/settings/SnapShotSetupDialog.tsx
+++ b/apps/web/src/components/settings/SnapShotSetupDialog.tsx
@@ -5,7 +5,8 @@ import {
   type DesktopSnapShotSetupAction,
   type DesktopSnapShotState,
 } from "@t3tools/contracts";
-import { useId, useState, type ReactNode } from "react";
+import { useState, type ReactNode } from "react";
+import { MacAccessibilityIcon, MacScreenRecordingIcon } from "../Icons";
 import { CaptureShortcutConfig } from "./CaptureShortcutConfig";
 import { Button } from "../ui/button";
 import { Dialog, DialogDescription } from "../ui/dialog";
@@ -61,72 +62,6 @@ const GNOME_ACCESS_COPY = {
   },
 };
 
-function ScreenRecordingIcon() {
-  const gradientId = useId();
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      className="size-8 shrink-0 drop-shadow-[0_1px_1px_#0005]"
-      aria-hidden="true"
-    >
-      <defs>
-        <linearGradient id={gradientId} x2="0" y2="1">
-          <stop stopColor="#ff6972" />
-          <stop offset="1" stopColor="#ff2938" />
-        </linearGradient>
-      </defs>
-      <rect
-        x="0.5"
-        y="0.5"
-        width="31"
-        height="31"
-        rx="7"
-        fill={`url(#${gradientId})`}
-        stroke="#ffffff40"
-      />
-      <circle cx="16" cy="16" r="10" fill="none" stroke="#fff" strokeWidth="2" />
-      <circle cx="16" cy="16" r="4.5" fill="#fff" />
-    </svg>
-  );
-}
-
-function AccessibilityPermissionIcon() {
-  const gradientId = useId();
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      className="size-8 shrink-0 drop-shadow-[0_1px_1px_#0005]"
-      aria-hidden="true"
-    >
-      <defs>
-        <linearGradient id={gradientId} x2="0" y2="1">
-          <stop stopColor="#48b6ff" />
-          <stop offset="1" stopColor="#0085ff" />
-        </linearGradient>
-      </defs>
-      <rect
-        x="0.5"
-        y="0.5"
-        width="31"
-        height="31"
-        rx="7"
-        fill={`url(#${gradientId})`}
-        stroke="#ffffff40"
-      />
-      <circle cx="16" cy="16" r="10" fill="none" stroke="#fff" strokeWidth="1.75" />
-      <circle cx="16" cy="10" r="1.6" fill="#fff" />
-      <path
-        d="m10 13 6 1 6-1M16 14v4m0 0-2.5 6m2.5-6 2.5 6"
-        fill="none"
-        stroke="#fff"
-        strokeWidth="1.6"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
 export function SnapShotSetupDialog({
   state,
   initialStep,
@@ -333,7 +268,9 @@ export function SnapShotSetupDialog({
                     permissions={[
                       {
                         id: "screenRecording",
-                        icon: <ScreenRecordingIcon />,
+                        icon: (
+                          <MacScreenRecordingIcon className="size-8 shrink-0 drop-shadow-[0_1px_1px_#0005]" />
+                        ),
                         title: "Screen Recording",
                         description: "Capture the window you're using.",
                         granted: macPermissions.screenRecording,
@@ -341,7 +278,9 @@ export function SnapShotSetupDialog({
                       },
                       {
                         id: "accessibility",
-                        icon: <AccessibilityPermissionIcon />,
+                        icon: (
+                          <MacAccessibilityIcon className="size-8 shrink-0 drop-shadow-[0_1px_1px_#0005]" />
+                        ),
                         title: "Accessibility",
                         description: includeAccessibility
                           ? "Include text and controls from the captured app."
diff --git a/apps/web/src/components/sidebar/DesktopUpdateStatusIcon.tsx b/apps/web/src/components/sidebar/DesktopUpdateStatusIcon.tsx
index 833559e1cc2778b342cd66916841bc30c9afa1f1..04ee884bbf6c2a9cd7088b6d5c0651ad2dd98ac3 100644
--- a/apps/web/src/components/sidebar/DesktopUpdateStatusIcon.tsx
+++ b/apps/web/src/components/sidebar/DesktopUpdateStatusIcon.tsx
@@ -67,7 +67,7 @@ function DesktopUpdateDownloadingIcon({ percent }: { readonly percent: number |
           cy="16"
           r={DOWNLOAD_PROGRESS_RADIUS}
           fill="none"
-          stroke="color-mix(in srgb, currentColor 22%, transparent)"
+          className="stroke-current/22"
           strokeWidth="1.5"
         />
         <circle
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 397d31ab2072ec7908a9392a270f6fb9b2c03619..bfbd5ae155a718cc367387a486372f04a8441c52 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -753,7 +753,7 @@ function UsageEnvironmentFilter({
               </>
             ) : showUsageStatus && hasIssue ? (
               <CircleAlertIcon
-                className="size-3.5 text-amber-600 dark:text-amber-400"
+                className="size-3.5 text-warning-foreground"
                 aria-label="Some environments could not report usage"
               />
             ) : (
diff --git a/apps/web/src/routes/_chat.pull-requests.tsx b/apps/web/src/routes/_chat.pull-requests.tsx
index 7b3d4d4418dd64f8e6f3ca6422a1d3f7110eacaa..87439e8a4bc9c6e619476f84126388b454953577 100644
--- a/apps/web/src/routes/_chat.pull-requests.tsx
+++ b/apps/web/src/routes/_chat.pull-requests.tsx
@@ -1819,7 +1819,7 @@ function PullRequestsRouteView() {
       )}
 
       {listQuery.error && shownCount > 0 ? (
-        <div className="flex items-center justify-between gap-3 rounded-lg border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs">
+        <div className="flex items-center justify-between gap-3 rounded-lg border border-warning/30 bg-warning-surface px-3 py-2 text-xs">
           <span>{listQuery.error} Showing the last pull requests loaded.</span>
           <Button size="xs" variant="outline" onClick={() => listQuery.refresh()}>
             Retry
diff --git a/vite.config.ts b/vite.config.ts
index cee554c5b6db9a30f96360c75264fd392683769d..3493e29201a1def36cd1666b634ee931d7a90763 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -203,6 +203,18 @@ export default defineConfig({
         files: ["apps/web/src/**"],
         rules: { "shadcn/no-unknown-classes": "error" },
       },
+      {
+        // Colors come from theme tokens so status tones follow custom themes. components/ui
+        // has no findings and stays covered too.
+        files: ["apps/web/src/**"],
+        rules: { "shadcn/no-raw-colors": "error" },
+      },
+      {
+        // Third-party marks (brand logos, the macOS permission panes, Codex's Computer Use
+        // mark) must keep their exact colors, so the files that hold them are exempt.
+        files: ["apps/web/src/components/Icons.tsx", "apps/web/src/components/JetBrainsIcons.tsx"],
+        rules: { "shadcn/no-raw-colors": "off" },
+      },
       {
         // components/ui exports own their look. App code picks a variant or size instead
         // of restyling with className; layout classes (width, flex, margin, position) stay
-- 
2.54.0