fix(search-dialog): retone Pagefind modal to warp.dev neutral grey (#18)

* 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>

Author: hongyi-chen

src/components/CopyPageButton.astro

@@ -300,7 +300,11 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`;
     width: 100%;
     padding: 0.5rem 0.625rem;
     border: none;
-    border-radius: var(--sl-radius-md);
+    /* Matches the `--sl-radius-sm` (4px) chrome-control rule used by every
+       other clickable surface (Search/Ask/Copy triggers, sidebar nav rows,
+       Copy toast). The enclosing `.copy-dropdown-panel` keeps the 8px
+       overlay radius. */
+    border-radius: var(--sl-radius-sm);
     background: transparent;
     color: var(--sl-color-white);
     font-family: var(--sl-font);

src/components/KapaChatLauncher.css

@@ -278,7 +278,9 @@
 	min-width: 0;
 	height: 2.75rem;
 	border: 1px solid var(--sl-color-gray-5);
-	border-radius: var(--sl-radius-md);
+	/* Matches the `--sl-radius-sm` (4px) chrome-control rule shared with
+	   every Search/Ask/Copy trigger and the Pagefind input. */
+	border-radius: var(--sl-radius-sm);
 	background: var(--sl-color-black);
 	color: var(--sl-color-white);
 	padding: 0 0.875rem;
@@ -303,7 +305,9 @@
 	height: 2.75rem;
 	padding: 0;
 	border: 1px solid var(--sl-color-text-accent);
-	border-radius: var(--sl-radius-md);
+	/* Matches the `--sl-radius-sm` (4px) chrome-control rule, paired with
+	   the form input on the same row. */
+	border-radius: var(--sl-radius-sm);
 	background: var(--sl-color-text-accent);
 	color: var(--sl-color-black);
 	font: inherit;

src/styles/warp-components.css

@@ -880,3 +880,124 @@ body {
     box-shadow: 8px 0 24px rgba(0, 0, 0, 0.12);
   }
 }
+
+/* --------------------------------------------------------------------------
+   18. Search dialog (Pagefind modal) — brand-aligned grayscale chrome
+   --------------------------------------------------------------------------
+
+   Starlight's `Search.astro` ships scoped styles inside `@layer
+   starlight.core` plus an inline `@import` of Pagefind's default UI sheet,
+   also at `layer(starlight.core)`. The defaults paint:
+
+     - The dialog frame with `--sl-color-gray-6` / `gray-5` (Oz cool blue
+       grays `#252b37` / `#414651`).
+     - The input focus ring with `--sl-color-accent` (Warp blue).
+     - Result hover/focus with `--sl-color-accent-high` outlines and
+       `--sl-color-accent-low` fills (more blue tint).
+     - Cancel + clear buttons in `--sl-color-text-accent` (blue).
+
+   On the neutral `#121212` canvas + the warp.dev grayscale chrome system
+   (§16 above), all of that read as visibly cool/blue and out of family.
+   Unlayered overrides below win the cascade against `starlight.core` and
+   pull the modal onto the same `--warp-control-*` ladder as the trigger
+   button it just opened from.
+
+   Selectors are scoped to `site-search dialog` (the `<dialog>` that lives
+   inside `<site-search>`) so they don't bleed into the Kapa Ask dialog,
+   which also uses a `<dialog aria-label="…">` element.
+   -------------------------------------------------------------------------- */
+
+/* Dialog surface: drop the cool gray-6 fill and gray-5 border in favor of
+   the page canvas + a hairline. Depth comes from the backdrop blur and the
+   existing `box-shadow`. Same "one canvas, hairlines for separation"
+   pattern the rest of the site already uses (see custom.css §background). */
+site-search dialog {
+  background-color: var(--sl-color-bg);
+  border: 1px solid var(--sl-color-hairline-light);
+}
+
+/* Stronger neutral backdrop. Starlight's `--sl-color-backdrop-overlay`
+   inherits the accent family in some themes; pin it to a flat dark scrim
+   so the modal still pops without a blue cast. Light mode gets a soft
+   warm-white wash instead. */
+site-search dialog::backdrop {
+  background-color: rgba(18, 18, 18, 0.55);
+}
+
+:root[data-theme='light'] site-search dialog::backdrop {
+  background-color: rgba(255, 255, 255, 0.55);
+}
+
+/* Pagefind UI custom-property overrides. These cascade into Pagefind's own
+   stylesheet (which authors all its surfaces against
+   `--pagefind-ui-background` / `--pagefind-ui-border` / `--pagefind-ui-tag`
+   / `--pagefind-ui-border-radius`) so we don't need to chase every
+   internal class. The shared chrome `--warp-control-*` ladder defined in
+   §16 is the source of truth for color; corner radii follow the chrome
+   rule — every clickable control surface lands at `--sl-radius-sm` (4px),
+   matching the trigger button this modal opened from. The dialog frame
+   itself stays at the Starlight default 8px (overlay tier).
+
+   `--sl-search-corners` is Starlight's own knob for the result-card
+   corners (defaults to `0.3125rem` = 5px, between our `sm` and `md`
+   tokens, which never matches anything else). Pin it to `sm` so the
+   list rows match the input above them. */
+site-search #starlight__search {
+  --pagefind-ui-background: var(--warp-control-bg);
+  --pagefind-ui-border: var(--warp-control-border);
+  --pagefind-ui-tag: var(--warp-control-border);
+  --pagefind-ui-text: var(--sl-color-gray-2);
+  --pagefind-ui-primary: var(--sl-color-white);
+  --pagefind-ui-border-radius: var(--sl-radius-sm);
+  --sl-search-corners: var(--sl-radius-sm);
+}
+
+/* Input focus border: Starlight's default flips `--pagefind-ui-border` to
+   the saturated Warp blue accent on focus, which is the bright cyan ring
+   in the screenshot. Replace with the chrome ladder's hover border so the
+   input matches the trigger button's `:hover` affordance. */
+site-search #starlight__search input:focus {
+  --pagefind-ui-border: var(--warp-control-border-hover);
+}
+
+/* Cancel + clear buttons: drop the blue accent color in favor of a calm
+   gray that recedes the way every other secondary chrome action does. */
+site-search button[data-close-modal] {
+  color: var(--sl-color-gray-2);
+}
+
+site-search button[data-close-modal]:hover {
+  color: var(--sl-color-white);
+}
+
+site-search #starlight__search .pagefind-ui__search-clear::before {
+  background-color: var(--sl-color-gray-3);
+}
+
+site-search #starlight__search .pagefind-ui__search-clear:focus {
+  outline: 1px solid var(--warp-control-border-hover);
+}
+
+/* Result cards. Starlight paints the title row + each nested sub-result
+   with `--sl-color-black` (`#121212`), which on the cool gray-6 dialog
+   read as stamped-down patches. With the dialog now sharing the page
+   canvas, raise each result onto the chrome `--warp-control-bg` so the
+   list reads as a stack of tactile chips. A 1px hairline keeps the cards
+   distinct without a heavy outline. */
+site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
+site-search #starlight__search .pagefind-ui__result-nested,
+site-search #starlight__search .pagefind-ui__result-tags {
+  background-color: var(--warp-control-bg);
+}
+
+/* Hover / keyboard-focus state. Replace the blue accent outline + tinted
+   fill with the same neutral wash the chrome buttons use on hover. The
+   1px border swap stays inside the existing layout box, so list rows
+   don't shift on hover. */
+site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
+site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
+site-search #starlight__search .pagefind-ui__result-nested:hover,
+site-search #starlight__search .pagefind-ui__result-nested:focus-within {
+  outline: 1px solid var(--warp-control-border-hover);
+  background-color: var(--warp-control-bg-hover);
+}