Skip to content

style(extensions): retune agent filter colors off semantic status hues#72

Merged
RealZST merged 1 commit into
mainfrom
style/agent-filter-colors
May 29, 2026
Merged

style(extensions): retune agent filter colors off semantic status hues#72
RealZST merged 1 commit into
mainfrom
style/agent-filter-colors

Conversation

@RealZST
Copy link
Copy Markdown
Owner

@RealZST RealZST commented May 29, 2026

Reworks the per-agent active-filter colors so they no longer collide with the app's semantic status colors (error-red / disabled-gray), while keeping the native <select> and the filled look.

Why

In the agent filter, two agents' brand tints landed on status hues:

  • Claude Code was hue 25, essentially the app's error-red (hue 27) → a selected Claude Code filter read like an error.
  • Cursor / Codex were flat grays → read like a disabled control.

What changed (--agent-* tokens, both light + dark)

  • claude code: red → orange (hue 60), matching Anthropic's real brand (#D97757), softened to taste
  • codex: neutral gray → indigo (hue 275), sampled from its icon
  • cursor: flat gray → warm charcoal (light) / off-white (dark), with darker text, per Cursor's monochrome brand
  • copilot: arbitrary purple → the official GitHub Copilot violet (hue 296, per brand.github.com)
  • windsurf: lower chroma (was fluorescent)
  • active fill softened /15 → /10

These tokens are only consumed by the agent filter, so nothing else in the app is affected.

Preview

Claude Code

  • Before
    image
  • After
    image

Codex

  • Before
    image
  • After
    image

Cursor

  • Before
    image
  • After
    image

Credit

Addresses the concern raised in #67 by @Orchardxyz — that the colored fills read as error/disabled states. That observation was correct; this solves it via color tuning rather than a control swap, so the filter stays a native <select> consistent with every other filter in the app.

🤖 Generated with Claude Code

Shift each agent's brand color away from error-red / disabled-gray so the
active filter no longer reads as an error or disabled control:
- claude: red (hue 25 ~= error red) -> orange (hue 60), matching the real brand
- codex: neutral gray -> indigo borrowed from its icon
- cursor: flat gray -> warm charcoal (light) / off-white (dark), per its brand
- copilot: arbitrary purple -> official GitHub Copilot violet (hue 296)
- windsurf: lower chroma (less fluorescent)
- soften active fill from /15 to /10

Addresses the concern in #67 by @Orchardxyz (colored fills reading as
error/disabled), keeping the native <select> for consistency with the
app's other filters.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@RealZST RealZST merged commit 509b9d1 into main May 29, 2026
3 checks passed
@RealZST RealZST deleted the style/agent-filter-colors branch May 29, 2026 21:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant