From c5bf0ad00e49085dbbd86ae66ce772bd1522091f Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Mar 2026 05:45:58 +0000
Subject: [PATCH] fix: replace bg-accent with neutral backgrounds on code/kbd
 elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

bg-accent maps to bright cyan (#22d3ee) in Tailwind v4 — wrong for
code elements and keyboard shortcut badges. This was a recurring issue
across the app where every backticked term glowed cyan.

- Code blocks: bg-accent → bg-code (#14161e)
- Inline code: bg-accent → bg-white/[0.08] (subtle neutral tint)
- Kbd badges: bg-accent → bg-white/[0.08]
- AI chat markdown: same fixes in MarkdownContent.tsx

Cyan remains reserved for interactive elements (buttons, active nav,
links) per the design system.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/procedural-editor/StepEditor.tsx    |  2 +-
 .../src/components/tree-editor/NodeEditorModal.tsx |  2 +-
 .../tree-editor/code-mode/SyntaxHelpPanel.tsx      |  2 +-
 frontend/src/components/ui/MarkdownContent.tsx     |  6 +++---
 frontend/src/pages/MaintenanceFlowDetailPage.tsx   |  2 +-
 frontend/src/pages/TreeNavigationPage.tsx          | 14 +++++++-------
 frontend/src/pages/admin/InviteCodesPage.tsx       |  2 +-
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/procedural-editor/StepEditor.tsx b/frontend/src/components/procedural-editor/StepEditor.tsx
index 1b995d3c..af469402 100644
--- a/frontend/src/components/procedural-editor/StepEditor.tsx
+++ b/frontend/src/components/procedural-editor/StepEditor.tsx
@@ -112,7 +112,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 <button
                   key={v.variable_name}
                   onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
-                  className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-accent hover:text-muted-foreground"
+                  className="rounded bg-white/[0.06] px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-white/[0.10] hover:text-muted-foreground"
                 >
                   {v.variable_name}
                 </button>
diff --git a/frontend/src/components/tree-editor/NodeEditorModal.tsx b/frontend/src/components/tree-editor/NodeEditorModal.tsx
index 43312d96..61c0fdb6 100644
--- a/frontend/src/components/tree-editor/NodeEditorModal.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorModal.tsx
@@ -86,7 +86,7 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
     <Modal isOpen={true} onClose={onClose} title={getTitle()} size="lg" footer={footerContent} allowFullScreen={true}>
       {/* Node ID display */}
       <div className="mb-4 text-xs text-muted-foreground">
-        Node ID: <code className="rounded bg-accent px-1 py-0.5">{node.id}</code>
+        Node ID: <code className="rounded bg-white/[0.08] px-1 py-0.5">{node.id}</code>
       </div>
 
       {/* Validation errors */}
diff --git a/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx b/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
index 77b06cc0..c3033f5b 100644
--- a/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
+++ b/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
@@ -103,7 +103,7 @@ function Row({ label, code }: { label: string; code: string }) {
   return (
     <div className="flex items-center justify-between py-0.5">
       <span className="text-muted-foreground">{label}</span>
-      <code className="rounded bg-accent px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code>
+      <code className="rounded bg-white/[0.08] px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code>
     </div>
   )
 }
diff --git a/frontend/src/components/ui/MarkdownContent.tsx b/frontend/src/components/ui/MarkdownContent.tsx
index ac7596e1..7eefee46 100644
--- a/frontend/src/components/ui/MarkdownContent.tsx
+++ b/frontend/src/components/ui/MarkdownContent.tsx
@@ -43,7 +43,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
             return (
               <code
                 className={cn(
-                  'block rounded bg-accent p-3 font-mono text-sm overflow-x-auto',
+                  'block rounded bg-code p-3 font-mono text-sm text-foreground overflow-x-auto',
                   className
                 )}
                 {...props}
@@ -54,7 +54,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
           }
           return (
             <code
-              className="rounded bg-accent px-1.5 py-0.5 font-mono text-sm"
+              className="rounded bg-white/[0.08] px-1.5 py-0.5 font-mono text-sm text-secondary"
               {...props}
             >
               {children}
@@ -63,7 +63,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         },
         // Style code blocks (pre)
         pre: ({ children }) => (
-          <pre className="mb-3 overflow-x-auto rounded bg-accent p-0 last:mb-0">
+          <pre className="mb-3 overflow-x-auto rounded bg-code p-0 last:mb-0">
             {children}
           </pre>
         ),
diff --git a/frontend/src/pages/MaintenanceFlowDetailPage.tsx b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
index 1d7f41b7..f1aeb5e6 100644
--- a/frontend/src/pages/MaintenanceFlowDetailPage.tsx
+++ b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
@@ -193,7 +193,7 @@ export default function MaintenanceFlowDetailPage() {
                   : <AlertCircle className="h-3 w-3" />}
                 {schedule.is_active ? 'Active' : 'Paused'}
               </span>
-              <code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-foreground">
+              <code className="rounded bg-white/[0.08] px-1.5 py-0.5 text-[0.8125rem] text-foreground">
                 {schedule.cron_expression}
               </code>
               <span className="text-muted-foreground">({schedule.timezone})</span>
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index 6498ca82..643c3c75 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -954,7 +954,7 @@ export function TreeNavigationPage() {
                     <div key={index}>
                       <p className="mb-1 text-xs text-muted-foreground">{cmd.label}</p>
                       <div className="group relative">
-                        <code className="block rounded bg-accent p-2 pr-8 text-sm font-mono">
+                        <code className="block rounded bg-code p-2 pr-8 text-sm font-mono">
                           {cmd.command}
                         </code>
                         <button
@@ -1076,7 +1076,7 @@ export function TreeNavigationPage() {
                 <div className="space-y-1">
                   {currentNode.commands.map((cmd, index) => (
                     <div key={index} className="group relative">
-                      <code className="block rounded bg-accent p-2 pr-8 text-sm font-mono">
+                      <code className="block rounded bg-code p-2 pr-8 text-sm font-mono">
                         {cmd}
                       </code>
                       <button
@@ -1302,23 +1302,23 @@ export function TreeNavigationPage() {
         <div className="space-y-3 text-sm">
           <div className="flex items-center justify-between">
             <span className="text-muted-foreground">Select option</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">1-9</span>
+            <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">1-9</span>
           </div>
           <div className="flex items-center justify-between">
             <span className="text-muted-foreground">Go back</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Esc</span>
+            <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">Esc</span>
           </div>
           <div className="flex items-center justify-between">
             <span className="text-muted-foreground">Continue / Complete</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Enter</span>
+            <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">Enter</span>
           </div>
           <div className="flex items-center justify-between">
             <span className="text-muted-foreground">Focus notes</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Tab</span>
+            <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">Tab</span>
           </div>
           <div className="flex items-center justify-between">
             <span className="text-muted-foreground">Show shortcuts</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">?</span>
+            <span className="rounded bg-white/[0.08] px-2 py-0.5 font-mono text-xs text-foreground">?</span>
           </div>
         </div>
       </Modal>
diff --git a/frontend/src/pages/admin/InviteCodesPage.tsx b/frontend/src/pages/admin/InviteCodesPage.tsx
index 77057a9c..233f82f8 100644
--- a/frontend/src/pages/admin/InviteCodesPage.tsx
+++ b/frontend/src/pages/admin/InviteCodesPage.tsx
@@ -119,7 +119,7 @@ export function InviteCodesPage() {
       key: 'code',
       header: 'Code',
       render: (c) => (
-        <code className="rounded bg-accent px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code>
+        <code className="rounded bg-white/[0.08] px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code>
       ),
     },
     {