fix(site): standardize PR status icon colors to match diff colors#22971
Merged
DanielleMaywood merged 1 commit intomainfrom Mar 11, 2026
Merged
fix(site): standardize PR status icon colors to match diff colors#22971DanielleMaywood merged 1 commit intomainfrom
DanielleMaywood merged 1 commit intomainfrom
Conversation
13ad73b to
b3a0f38
Compare
012a917 to
467ca82
Compare
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.
467ca82 to
684b667
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The git PR status icons in the agents sidebar used ad-hoc color values
(
text-green-500,text-purple-500,text-content-destructive) thatdidn'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 throughtailwind.config.js:--git-added142 72% 29%142 77% 73%text-git-added--git-deleted0 74% 42%0 94% 82%text-git-deleted--git-modified17 88% 40%31 97% 72%text-git-modified--git-merged272 72% 47%269 97% 85%text-git-merged--git-added-bright142 72% 29%142 71% 45%text-git-added-bright--git-deleted-bright0 74% 42%0 91% 71%text-git-deleted-bright--surface-git-added141 84% 93%145 80% 10%bg-surface-git-added--surface-git-deleted0 93% 94%0 75% 15%bg-surface-git-deletedThe
brightvariants use a more saturated dark-mode shade for statnumbers (
green-500/red-400vsgreen-300/red-300), matchingthe original styling. Light mode values are identical.
PR icon color changes
text-green-500text-git-addedtext-content-destructivetext-git-deletedtext-purple-500text-git-mergedtext-content-secondaryShared utility:
diffColors.tsExtracts duplicated
changeColor()andchangeLabel()functions fromDiffViewer.tsxandFilesChangedPanel.tsxinto a single module.Files changed
index.css— new CSS variables (light + dark)tailwind.config.js—git.*andsurface.git-*color mappingsdiffColors.ts— sharedchangeColor()/changeLabel()AgentsSidebar.tsx— PR icons + stat text use new tokensDiffStats.tsx— stat badges use new tokensDiffViewer.tsx— uses sharedchangeColor()/changeLabel()FilesChangedPanel.tsx— uses sharedchangeColor()/changeLabel()SidebarTabView.stories.tsx— stat badges use new tokens