fix: replace bg-accent with neutral backgrounds on code/kbd elements

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>
This commit is contained in:
chihlasm
2026-03-24 05:45:58 +00:00
parent 8e7f13d2f8
commit c5bf0ad00e
7 changed files with 15 additions and 15 deletions

View File

@@ -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>