From 416a2c561b27d4a0d5eaed57016df220fedfbb6b Mon Sep 17 00:00:00 2001 From: Hong Yi Chen Date: Fri, 1 May 2026 15:14:46 -0700 Subject: [PATCH 1/2] fix(search-dialog): retone Pagefind modal to warp.dev neutral grey MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/styles/warp-components.css | 110 +++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) diff --git a/src/styles/warp-components.css b/src/styles/warp-components.css index 60f416a..688e25b 100644 --- a/src/styles/warp-components.css +++ b/src/styles/warp-components.css @@ -880,3 +880,113 @@ 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 `` that lives + inside ``) so they don't bleed into the Kapa Ask dialog, + which also uses a `` 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`) + so we don't need to chase every internal class. The shared chrome + `--warp-control-*` ladder defined in §16 is the source of truth here. */ +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); +} + +/* 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); +} From af5f81b6f1172b640d7b55582a16d1efdc6f8727 Mon Sep 17 00:00:00 2001 From: Hong Yi Chen Date: Fri, 1 May 2026 15:24:32 -0700 Subject: [PATCH 2/2] fix(chrome): unify control corner radius to 4px across chrome family MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/components/CopyPageButton.astro | 6 +++++- src/components/KapaChatLauncher.css | 8 ++++++-- src/styles/warp-components.css | 17 ++++++++++++++--- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/components/CopyPageButton.astro b/src/components/CopyPageButton.astro index 404261c..d1bc523 100644 --- a/src/components/CopyPageButton.astro +++ b/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); diff --git a/src/components/KapaChatLauncher.css b/src/components/KapaChatLauncher.css index 724b457..3aca6dc 100644 --- a/src/components/KapaChatLauncher.css +++ b/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; diff --git a/src/styles/warp-components.css b/src/styles/warp-components.css index 688e25b..06e1a5e 100644 --- a/src/styles/warp-components.css +++ b/src/styles/warp-components.css @@ -930,15 +930,26 @@ site-search dialog::backdrop { /* 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`) - so we don't need to chase every internal class. The shared chrome - `--warp-control-*` ladder defined in §16 is the source of truth here. */ + `--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