fix(chrome): retone Search / Ask / Copy buttons to warp.dev neutral grey#17
Open
hongyi-chen wants to merge 2 commits intomainfrom
Open
fix(chrome): retone Search / Ask / Copy buttons to warp.dev neutral grey#17hongyi-chen wants to merge 2 commits intomainfrom
hongyi-chen wants to merge 2 commits intomainfrom
Conversation
The shared --warp-control-* palette was sourced from the Oz webapp brand ladder (gray-700/800/900 = #414651/#252b37/#181d27), which carries ~11–24% blue saturation. Against the neutral #121212 docs canvas this read as visibly cool/blue chips on Search, Ask, and Copy. Repoint the palette to the warp.dev marketing brand neutrals (--color-neutral-* in warp-marketing-site-static/.../global.css) so the trio reads as one grayscale chrome family instead of blue stickers floating on neutral page bg. Body prose tokens (--sl-color-gray-*) intentionally stay on the Oz ladder; only the chrome controls move. Light-mode surface tokens (gray-100/200/300) are already neutral and kept; the higher-tier hover/text/icon entries swap to the warp.dev neutrals for consistency. Fallback literals in kapa.css and CopyPageButton.astro are updated in lockstep so the chrome can't drift if var() ever falls back. Top topic nav (Terminal / Agents / Reference) is intentionally untouched — replaces the misdirected #15. Co-Authored-By: Oz <oz-agent@warp.dev>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
* fix(search-dialog): retone Pagefind modal to warp.dev neutral grey
The Pagefind search modal still shipped Starlight's default chrome,
which paints:
- the dialog frame in --sl-color-gray-6 / gray-5 (Oz cool blue
grays #252b37 / #414651),
- the input focus ring in --sl-color-accent (Warp blue),
- result hover/focus in --sl-color-accent-high outlines and
--sl-color-accent-low fills,
- cancel + clear buttons in --sl-color-text-accent (blue).
On the neutral #121212 canvas + the warp.dev grayscale chrome system
this all reads visibly cool/blue and out of family with the trigger
button it just opened from.
Add a new §18 in warp-components.css with unlayered overrides scoped
to `site-search dialog` (so the Kapa Ask dialog stays untouched):
- dialog surface → --sl-color-bg + hairline border (one-canvas
pattern, depth from backdrop blur),
- backdrop overlay → flat neutral scrim per theme,
- --pagefind-ui-* custom props pointed at --warp-control-* so all
of Pagefind's internal surfaces inherit the new palette,
- input :focus border → --warp-control-border-hover (no blue ring),
- cancel + clear buttons → calm gray-2 / gray-3,
- result cards + tags → --warp-control-bg with a hairline,
- hover/focus-within → --warp-control-bg-hover wash + matching
border, no blue accent outline.
Stacked on top of #17 (chrome trigger retoning).
Co-Authored-By: Oz <oz-agent@warp.dev>
* fix(chrome): unify control corner radius to 4px across chrome family
Chrome corner radii were inconsistent across adjacent surfaces:
- Search trigger / Ask / Copy trigger: 4px (sm) ✓
- Search modal input + clear + tag chips: 8px (Pagefind default)
- Search modal result cards: 5px (Starlight --sl-search-corners)
- Copy dropdown items: 6px (md)
- Kapa form input + submit: 6px (md)
Establish one rule for the chrome family:
- Every clickable control surface (button, single-line input,
list/menu row, kbd chip, toast) → --sl-radius-sm (4px)
- Every floating overlay (dialog, dropdown panel, popover, chat
bubble) → --sl-radius-lg (8px)
- Content cards (code blocks, asides, file tree) keep their
--sl-radius-md (6px) — content surface, not chrome.
Changes:
- warp-components.css §18: override Pagefind's
--pagefind-ui-border-radius and Starlight's --sl-search-corners
to --sl-radius-sm so the search input, clear button, tag chips,
and result cards all land at 4px.
- CopyPageButton.astro: dropdown items 6px → 4px (panel keeps 8px).
- KapaChatLauncher.css: .sl-kapa-form input + .sl-kapa-submit
6px → 4px (matching the chrome trigger they pair with).
Co-Authored-By: Oz <oz-agent@warp.dev>
---------
Co-authored-by: Oz <oz-agent@warp.dev>
Collaborator
Author
Also made some slight updates to the search dialog |
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
1 participant
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.
Problem
The Search / Ask / Copy chrome buttons in the docs header & sidebar render with a noticeable cool-blue tint against the neutral
#121212page canvas. This PR replaces #15 (which mistakenly retoned the top topic nav instead).Root cause
The shared
--warp-control-*palette insrc/styles/warp-components.css§16 was sourced from the Oz webapp brand ladder (gray-700/800/900=#414651/#252b37/#181d27), which carries ~11–24% blue saturation. Against the neutral docs canvas these read as visibly cool chips, not grayscale chrome.Fix
Repoint the palette to the warp.dev marketing brand neutrals (
--color-neutral-*inwarp-marketing-site-static/frontend/pages/global.css), which sit at near-zero saturation with a slight warm tilt that matches--sl-color-white's warm off-white. The trio now reads as one grayscale chrome family instead of blue stickers floating on neutral page bg.Mapping:
--warp-control-bg:#181d27→#1e1e1d(neutral-95)--warp-control-bg-hover:#252b37→#292929(neutral-90)--warp-control-border:#414651→#404040(neutral-80)--warp-control-border-hover:#535862→#585756(neutral-70)--warp-control-icon:#a4a7ae→#9d9d9b(neutral-40)--warp-control-text,--warp-control-text-hover: kept (already neutral / brand off-white)Light-mode surface tokens (
gray-100/200/300) are already neutral and kept; only the higher-tier hover/text/icon entries swap to the warp.dev neutrals for cross-theme consistency.Fallback literals in
kapa.css(Ask) andCopyPageButton.astro(Copy) are updated in lockstep so the chrome can't drift ifvar()ever falls back.Body prose tokens (
--sl-color-gray-*) intentionally stay on the Oz ladder — only the chrome controls move. The top topic nav (Terminal / Agents / Reference) is intentionally untouched — replacing the misdirected #15.Validation
npm run buildsucceeds (309 pages). The/llms-full.txtRangeError: Maximum call stack size exceededreproduces onmainwithout this diff and is unrelated.AGENTS.md.Conversation: https://staging.warp.dev/conversation/fddc3534-3d55-4783-a388-a1eb70e432f9
Plans:
This PR was generated with Oz.