Repository navigation
feat(staged): give the projects search fields clearer input surfaces - #1014
Merged
Merged
Conversation
…urface The projects grid search box used --bg-elevated, which in light mode is an off-white #f5f5f5 that sat flat against the #f7f7f7 chrome page while the white project cards beside it stood out. Add a dedicated bg.input token (--bg-input): #ffffff in light mode so the field reads like the cards, and the same lifted elevate(0.08) surface (#38333f) as other raised controls in dark mode. SearchField paints that token, so the projects grid and repos list fields stay in step; the sidebar hairline field is untouched. Border (--border-muted / --border-emphasis on focus), placeholder and icon (--text-muted) are unchanged and keep their contrast on the whiter fill. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
The sidebar search field was the app's only underline-style input: no fill, a 70%-alpha --border-subtle bottom border at ~1.1:1, a --text-faint placeholder at ~2:1, a focus state that only darkened that hairline, and 2px padding that put the icon and text on x positions nothing else used. It is now a tinted well in the sidebar's own idiom. At rest it fills with --projects-sidebar-field-bg (5% --text-primary), next to the existing 4% row-hover tint, and deepens to 7% on hover. On focus it lifts onto --bg-input with a 1px inset --border-emphasis outline. --bg-input is only used on focus because at rest it would be white on the white sidebar in light mode. The field is 30px tall with an 8px radius to match the New project pill and the repo cards, and spans the pill's width. It has 10px padding with 8px gaps, which puts the magnifier at x 22 and the text at x 44. The placeholder moves to --text-muted, as in the grid's SearchField. The magnifier and clear icons are both 14px. The clear icon sits in a 22px hit target with a -4px margin, so the glyph is 10px from the edge, mirroring the magnifier. The same rules cover both modes. Checked in WebKit against the real ProjectsSidebar at rest, hovered, focused, with a query, and with the clear button hovered. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Gives the two projects search fields input surfaces that read clearly against their backgrounds.
Projects grid / repos list (
SearchField)bg.inputtheme token, exposed as--bg-input. It is#ffffffin light themes, and in dark themes it uses the same liftedelevate(0.08)surface as other raised controls.SearchFieldnow uses--bg-inputinstead of--bg-elevated. In light mode the old off-white#f5f5f5blended into the#f7f7f7chrome page; the field is now white, matching the project cards beside it.Projects sidebar (
SidebarSearchField)--text-primarytint, 7% on hover. On focus it switches to--bg-inputwith a 1px inset--border-emphasisoutline.--text-muted. Both icons are now 14px. The clear button has a 22px hit target placed so its ✕ sits 10px from the edge, mirroring the magnifier.Checked in WebKit against the real
ProjectsSidebarat rest, on hover, on focus, with a query, and with the clear button hovered.🤖 Generated with Claude Code