fix(search-dialog): retone Pagefind modal to warp.dev neutral grey#18
Merged
hongyi-chen merged 2 commits intooz/retone-chrome-buttons-neutral-greyfrom May 1, 2026
Conversation
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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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>
hongyi-chen
merged commit 2b83aa2
into
oz/retone-chrome-buttons-neutral-grey
4 checks passed
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 Pagefind search modal (opens from the Search button) still ships Starlight's defaults: a saturated blue focus ring on the input, cool-blue dialog chrome, and blue-tinted hover/focus on each result card. On the neutral
#121212canvas + the warp.dev grayscale chrome system in #17, the modal reads visibly cool/blue and out of family with the trigger button it just opened from.Root cause
Starlight
Search.astropaints the modal inside@layer starlight.coreand inline-imports Pagefind's default UI sheet at the same layer. The defaults driving the blue:dialog { background-color: var(--sl-color-gray-6); border: 1px solid var(--sl-color-gray-5); }— Oz cool gray-800 / gray-700.#starlight__search input:focus { --pagefind-ui-border: var(--sl-color-accent); }— Warp blue ring.outline: 1px solid var(--sl-color-accent-high)+background-color: var(--sl-color-accent-low).--sl-color-text-accent.Fix
New §18 in
src/styles/warp-components.csswith unlayered overrides scoped tosite-search dialog(so the Kapa Ask dialog stays untouched):--sl-color-bg+--sl-color-hairline-light. Depth comes from the backdrop blur and the existing box-shadow — same one-canvas pattern as the rest of the site.rgba(18,18,18,0.55)/rgba(255,255,255,0.55)) so the modal pops without a blue cast.--pagefind-ui-background/border/tagretargeted to--warp-control-bg/borderso every internal Pagefind surface inherits the chrome palette without chasing each class.--warp-control-border-hover(no Warp-blue ring); matches the trigger button's:hoveraffordance.--sl-color-gray-2/gray-3instead of--sl-color-text-accent.--warp-control-bgso each result reads as a raised neutral chip on the canvas.--warp-control-bg-hoverwash + 1px--warp-control-border-hoverborder; same hover semantic the chrome buttons use, no blue accent.Light mode follows via the same
--warp-control-*and--sl-color-*tokens, which are already theme-aware.Stacking
Stacked on top of #17 (
oz/retone-chrome-buttons-neutral-grey). Merge #17 first; this PR will rebase cleanly tomain.Validation
npm run buildsucceeds (309 pages). The pre-existing/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.