From 46edb4ce70d704c22bb14bc0983866ab047b01f6 Mon Sep 17 00:00:00 2001
From: Array <array@posthog.com>
Date: Wed, 8 Apr 2026 14:22:14 +0000
Subject: [PATCH] fix(code): use accent colors in ActionSelector for theme
 consistency

Replace hardcoded --blue-* CSS variables with --accent-* in ActionSelector,
OptionRow, and StepTabs. In light mode the accent resolves to the PostHog
orange scale, matching the rest of the app instead of clashing with the
warm sage/olive gray palette.

Generated-By: PostHog Code
Task-Id: 8aff4e4e-76da-4a19-b02a-f5ff885e4b6f
---
 .../action-selector/ActionSelector.tsx        |  6 +++---
 .../components/action-selector/OptionRow.tsx  | 20 +++++++++----------
 .../components/action-selector/StepTabs.tsx   |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/code/src/renderer/components/action-selector/ActionSelector.tsx b/apps/code/src/renderer/components/action-selector/ActionSelector.tsx
index 3ad45068d..116232de4 100644
--- a/apps/code/src/renderer/components/action-selector/ActionSelector.tsx
+++ b/apps/code/src/renderer/components/action-selector/ActionSelector.tsx
@@ -214,8 +214,8 @@ export function ActionSelector({
       }}
       style={{
         outline: "none",
-        border: "1px solid var(--blue-11)",
-        background: "var(--blue-1)",
+        border: "1px solid var(--accent-11)",
+        background: "var(--accent-1)",
         borderRadius: "var(--radius-3)",
       }}
     >
@@ -230,7 +230,7 @@ export function ActionSelector({
         )}
 
         {title && (
-          <Text size="1" weight="medium" className="text-blue-11" title={title}>
+          <Text size="1" weight="medium" className="text-accent-11" title={title}>
             {compactHomePath(title)}
           </Text>
         )}
diff --git a/apps/code/src/renderer/components/action-selector/OptionRow.tsx b/apps/code/src/renderer/components/action-selector/OptionRow.tsx
index d2ab70741..b40914458 100644
--- a/apps/code/src/renderer/components/action-selector/OptionRow.tsx
+++ b/apps/code/src/renderer/components/action-selector/OptionRow.tsx
@@ -78,10 +78,10 @@ export function OptionRow({
               ? "var(--gray-6)"
               : "var(--gray-3)"
             : isSelected
-              ? "var(--blue-8)"
+              ? "var(--accent-8)"
               : isHovered
-                ? "var(--blue-4)"
-                : "var(--blue-3)",
+                ? "var(--accent-4)"
+                : "var(--accent-3)",
           display: "inline-flex",
           height: "28px",
         }}
@@ -93,7 +93,7 @@ export function OptionRow({
             isSelected
               ? isCancel
                 ? "text-gray-12"
-                : "text-blue-12"
+                : "text-accent-12"
               : "text-gray-12"
           }
         >
@@ -124,9 +124,9 @@ export function OptionRow({
 
     const displayText = compactHomePath(option.label);
     const textClass = isSelected
-      ? "text-blue-11"
+      ? "text-accent-11"
       : isHovered
-        ? "text-blue-11"
+        ? "text-accent-11"
         : "text-gray-12";
 
     return (
@@ -154,7 +154,7 @@ export function OptionRow({
         userSelect: "none",
         borderRadius: "var(--radius-2)",
         background: isSelected
-          ? "var(--blue-3)"
+          ? "var(--accent-3)"
           : isHovered
             ? "var(--gray-a3)"
             : "transparent",
@@ -171,7 +171,7 @@ export function OptionRow({
       >
         <Text
           size="1"
-          className={isSelected ? "text-blue-11" : "text-gray-11"}
+          className={isSelected ? "text-accent-11" : "text-gray-11"}
           style={{ width: "1ch", flexShrink: 0, lineHeight: "16px" }}
         >
           {isSelected ? "›" : ""}
@@ -180,9 +180,9 @@ export function OptionRow({
           size="1"
           className={
             isSelected
-              ? "text-blue-11"
+              ? "text-accent-11"
               : isHovered
-                ? "text-blue-11"
+                ? "text-accent-11"
                 : "text-gray-11"
           }
           style={{
diff --git a/apps/code/src/renderer/components/action-selector/StepTabs.tsx b/apps/code/src/renderer/components/action-selector/StepTabs.tsx
index b8125501c..cc39d5ef1 100644
--- a/apps/code/src/renderer/components/action-selector/StepTabs.tsx
+++ b/apps/code/src/renderer/components/action-selector/StepTabs.tsx
@@ -33,7 +33,7 @@ export function StepTabs({
             onClick={() => onStepClick(i)}
             style={{
               borderRadius: "var(--radius-2)",
-              background: isCurrent ? "var(--blue-3)" : "transparent",
+              background: isCurrent ? "var(--accent-3)" : "transparent",
               cursor: "pointer",
             }}
           >
@@ -42,7 +42,7 @@ export function StepTabs({
               weight={isCurrent ? "medium" : "regular"}
               className={
                 isCurrent
-                  ? "text-blue-11"
+                  ? "text-accent-11"
                   : isCompleted
                     ? "text-green-11"
                     : "text-gray-11"