Skip to content

fix(site): standardize PR status icon colors to match diff colors#22971

Merged
DanielleMaywood merged 1 commit intomainfrom
dm/standardize-diff-colors
Mar 11, 2026
Merged

fix(site): standardize PR status icon colors to match diff colors#22971
DanielleMaywood merged 1 commit intomainfrom
dm/standardize-diff-colors

Conversation

@DanielleMaywood
Copy link
Contributor

@DanielleMaywood DanielleMaywood commented Mar 11, 2026

Summary

The git PR status icons in the agents sidebar used ad-hoc color values
(text-green-500, text-purple-500, text-content-destructive) that
didn't match the diff file-tree indicators. This PR standardizes all
diff-related colors behind new semantic Tailwind tokens and CSS
variables, following the existing --content-* / --surface-* pattern.

New design tokens

Added to index.css (light + dark) and wired through tailwind.config.js:

Token Light Dark Tailwind class Usage
--git-added 142 72% 29% 142 77% 73% text-git-added File tree labels, PR open icon
--git-deleted 0 74% 42% 0 94% 82% text-git-deleted File tree labels, PR closed icon
--git-modified 17 88% 40% 31 97% 72% text-git-modified File tree labels (M/R)
--git-merged 272 72% 47% 269 97% 85% text-git-merged PR merged icon
--git-added-bright 142 72% 29% 142 71% 45% text-git-added-bright +N stat text
--git-deleted-bright 0 74% 42% 0 91% 71% text-git-deleted-bright −N stat text
--surface-git-added 141 84% 93% 145 80% 10% bg-surface-git-added Stat badge background
--surface-git-deleted 0 93% 94% 0 75% 15% bg-surface-git-deleted Stat badge background

The bright variants use a more saturated dark-mode shade for stat
numbers (green-500/red-400 vs green-300/red-300), matching
the original styling. Light mode values are identical.

PR icon color changes

PR State Before After
Open text-green-500 text-git-added
Closed text-content-destructive text-git-deleted
Merged text-purple-500 text-git-merged
Draft text-content-secondary unchanged

Shared utility: diffColors.ts

Extracts duplicated changeColor() and changeLabel() functions from
DiffViewer.tsx and FilesChangedPanel.tsx into a single module.

Files changed

  • index.css — new CSS variables (light + dark)
  • tailwind.config.jsgit.* and surface.git-* color mappings
  • diffColors.ts — shared changeColor() / changeLabel()
  • AgentsSidebar.tsx — PR icons + stat text use new tokens
  • DiffStats.tsx — stat badges use new tokens
  • DiffViewer.tsx — uses shared changeColor() / changeLabel()
  • FilesChangedPanel.tsx — uses shared changeColor() / changeLabel()
  • SidebarTabView.stories.tsx — stat badges use new tokens

@DanielleMaywood DanielleMaywood force-pushed the dm/standardize-diff-colors branch 2 times, most recently from 13ad73b to b3a0f38 Compare March 11, 2026 22:12
Copy link
Member

@kylecarbs kylecarbs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lovely!

@DanielleMaywood DanielleMaywood force-pushed the dm/standardize-diff-colors branch 3 times, most recently from 012a917 to 467ca82 Compare March 11, 2026 22:35
The git PR status icons in the agents sidebar used different color
values (e.g. text-green-500, text-purple-500, text-content-destructive)
than the diff file-tree indicators (text-green-700 dark:text-green-300,
etc.). This standardizes all diff-related colors to use the same
light/dark pattern.

Extracts a shared diffColors utility to eliminate duplicated
changeColor() and changeLabel() functions across DiffViewer,
FilesChangedPanel, AgentsSidebar, and DiffStats.
@DanielleMaywood DanielleMaywood force-pushed the dm/standardize-diff-colors branch from 467ca82 to 684b667 Compare March 11, 2026 22:41
@DanielleMaywood DanielleMaywood marked this pull request as ready for review March 11, 2026 22:48
@DanielleMaywood DanielleMaywood enabled auto-merge (squash) March 11, 2026 22:49
@DanielleMaywood DanielleMaywood merged commit 45c32d6 into main Mar 11, 2026
27 of 28 checks passed
@DanielleMaywood DanielleMaywood deleted the dm/standardize-diff-colors branch March 11, 2026 22:50
@github-actions github-actions bot locked and limited conversation to collaborators Mar 11, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants