From 9440febf4ccbbfc7948c744afc69996144434e97 Mon Sep 17 00:00:00 2001 From: Hong Yi Chen Date: Fri, 1 May 2026 15:05:04 -0700 Subject: [PATCH 1/2] fix(chrome): retone Search / Ask / Copy buttons to warp.dev neutral grey MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/components/CopyPageButton.astro | 14 ++++---- src/styles/kapa.css | 14 ++++---- src/styles/warp-components.css | 52 +++++++++++++++-------------- 3 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/components/CopyPageButton.astro b/src/components/CopyPageButton.astro index 71cb7ed..404261c 100644 --- a/src/components/CopyPageButton.astro +++ b/src/components/CopyPageButton.astro @@ -234,10 +234,10 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`; gap: 0.375rem; height: 2.25rem; padding: 0 0.625rem; - border: 1px solid var(--warp-control-border, hsl(210, 5%, 22%)); + border: 1px solid var(--warp-control-border, #404040); border-radius: var(--sl-radius-sm); - background: var(--warp-control-bg, #1a1a1a); - color: var(--warp-control-text, hsl(210, 4%, 72%)); + background: var(--warp-control-bg, #1e1e1d); + color: var(--warp-control-text, #dbdbdb); font-family: var(--__sl-font, 'Inter', sans-serif); font-size: var(--sl-text-sm); font-weight: 400; @@ -253,8 +253,8 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`; .copy-dropdown-trigger:hover, .copy-dropdown-trigger.active { - border-color: var(--warp-control-border-hover, hsl(210, 5%, 30%)); - background: var(--warp-control-bg-hover, hsl(210, 6%, 16%)); + border-color: var(--warp-control-border-hover, #585756); + background: var(--warp-control-bg-hover, #292929); color: var(--warp-control-text-hover, hsl(40, 20%, 97%)); } @@ -359,9 +359,9 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`; top: 50%; transform: translateY(-50%); padding: 0.375rem 0.5rem; - border: 1px solid var(--warp-control-border-hover, hsl(210, 5%, 30%)); + border: 1px solid var(--warp-control-border-hover, #585756); border-radius: var(--sl-radius-sm); - background: var(--warp-control-bg, #1a1a1a); + background: var(--warp-control-bg, #1e1e1d); color: var(--sl-color-text-accent); font-size: var(--sl-text-2xs); font-family: var(--__sl-font, var(--sl-font)); diff --git a/src/styles/kapa.css b/src/styles/kapa.css index e28131f..0026ec7 100644 --- a/src/styles/kapa.css +++ b/src/styles/kapa.css @@ -29,9 +29,9 @@ display: inline-flex; align-items: center; gap: 0.375rem; - border: 1px solid var(--warp-control-border, #414651); + border: 1px solid var(--warp-control-border, #404040); border-radius: var(--sl-radius-sm); - background: var(--warp-control-bg, #181d27); + background: var(--warp-control-bg, #1e1e1d); color: var(--warp-control-text, #dbdbdb); cursor: pointer; font-family: var(--__sl-font, 'Inter', sans-serif); @@ -71,9 +71,9 @@ right edge. */ right: 0; padding: 0.375rem 0.5rem; - border: 1px solid var(--warp-control-border-hover, #535862); + border: 1px solid var(--warp-control-border-hover, #585756); border-radius: var(--sl-radius-sm); - background: var(--warp-control-bg, #181d27); + background: var(--warp-control-bg, #1e1e1d); color: var(--warp-control-text-hover, hsl(40, 20%, 97%)); font-family: var(--__sl-font, 'Inter', sans-serif); font-size: var(--sl-text-2xs); @@ -106,7 +106,7 @@ width: 14px; height: 14px; flex: none; - color: var(--warp-control-icon, #a4a7ae); + color: var(--warp-control-icon, #9d9d9b); transition: color 0.15s ease; } @@ -141,8 +141,8 @@ } .warp-kapa-button:hover { - border-color: var(--warp-control-border-hover, #535862); - background: var(--warp-control-bg-hover, #252b37); + border-color: var(--warp-control-border-hover, #585756); + background: var(--warp-control-bg-hover, #292929); color: var(--warp-control-text-hover, hsl(40, 20%, 97%)); } diff --git a/src/styles/warp-components.css b/src/styles/warp-components.css index 0fac066..60f416a 100644 --- a/src/styles/warp-components.css +++ b/src/styles/warp-components.css @@ -716,36 +716,38 @@ starlight-file-tree .directory > details > summary { /* Shared chrome palette (Scalar tokens — mirror `src/pages/api.astro`). Inherited by Search, Ask, Copy, and any future chrome surface. - Dark-mode tokens map directly to the Oz webapp brand ladder (Oz - `gray-300`/`gray-400`/`gray-700`/`gray-800`/`gray-900`) so chips read as - raised surfaces against the `#121212` canvas with a single source of - truth shared with the light-mode block below. `--warp-control-text-hover` - keeps the warm-white `warp.dev` brand color (`#faf9f6`, matches - `--sl-color-white` in dark mode) for one step of extra accent against - `gray-300` body text. */ + Dark-mode tokens are sourced from the warp.dev marketing brand ladder + (`warp-marketing-site-static/frontend/pages/global.css` §`--color-neutral-*`) + instead of the Oz webapp ladder. The Oz tier-700/800/900 greys carry + ~11–24% blue saturation, which read as visibly cool chips against the + neutral `#121212` canvas; the warp.dev neutrals sit at near-zero saturation + with a slight warm tilt (matching `--sl-color-white`'s warm off-white) + so the trio looks like one grayscale chrome family rather than blue + stickers floating on neutral page bg. Body prose tokens + (`--sl-color-gray-*`) intentionally stay on the Oz ladder — only the + chrome controls move. */ body { - --warp-control-bg: #181d27; /* Oz gray-900 — raised surface */ - --warp-control-bg-hover: #252b37; /* Oz gray-800 */ - --warp-control-border: #414651; /* Oz gray-700 */ - --warp-control-border-hover: #535862; /* Oz gray-600 */ - --warp-control-text: #dbdbdb; /* Oz gray-300 — text-secondary */ + --warp-control-bg: #1e1e1d; /* warp.dev neutral-95 — raised surface */ + --warp-control-bg-hover: #292929; /* warp.dev neutral-90 */ + --warp-control-border: #404040; /* warp.dev neutral-80 */ + --warp-control-border-hover: #585756; /* warp.dev neutral-70 */ + --warp-control-text: #dbdbdb; /* Oz gray-300 — text-secondary (kept; already neutral) */ --warp-control-text-hover: hsl(40, 20%, 97%); /* warp.dev warm off-white */ - --warp-control-icon: #a4a7ae; /* Oz gray-400 — text-tertiary */ + --warp-control-icon: #9d9d9b; /* warp.dev neutral-40 — text-tertiary */ } :root[data-theme='light'] body { - /* Light-mode tokens map directly to the Oz webapp brand surface ladder - (`gray-100`/`gray-200`/`gray-300`/`gray-400`) so chips remain visibly - distinct against the pure-white canvas. The previous warm-grey chip - (`hsl(40, 12%, 92%)`) was tuned against the old `#faf9f6` warm canvas - and washed out on `#ffffff`. Hover is one step darker than rest. */ - --warp-control-bg: #f3f3f3; /* Oz gray-100 / brand surface.1 */ - --warp-control-bg-hover: #e7e7e7; /* Oz gray-200 / brand surface.2 */ - --warp-control-border: #dbdbdb; /* Oz gray-300 / brand surface.3 */ - --warp-control-border-hover: #a4a7ae; /* Oz gray-400 */ - --warp-control-text: #414651; /* Oz gray-700 — text-secondary */ - --warp-control-text-hover: #0a0d12;/* Oz gray-950 */ - --warp-control-icon: #535862; /* Oz gray-600 — text-tertiary */ + /* Light-mode tokens keep the neutral surface/border ladder (`gray-100` + /`gray-200`/`gray-300`) — those values already sit near zero saturation. + The hover/text/icon entries swap from cool Oz tier-600/700 greys to the + warp.dev neutral ladder so the trio reads grayscale in both themes. */ + --warp-control-bg: #f3f3f3; /* Oz gray-100 / brand surface.1 (kept) */ + --warp-control-bg-hover: #e7e7e7; /* Oz gray-200 / brand surface.2 (kept) */ + --warp-control-border: #dbdbdb; /* Oz gray-300 / brand surface.3 (kept) */ + --warp-control-border-hover: #9d9d9b; /* warp.dev neutral-40 */ + --warp-control-text: #404040; /* warp.dev neutral-80 — text-secondary */ + --warp-control-text-hover: #121212;/* warp.dev canvas black */ + --warp-control-icon: #585756; /* warp.dev neutral-70 — text-tertiary */ } .warp-sidebar-search { From 2b83aa24ddb8a76ff9fd26cbaabef2b8c5a34b32 Mon Sep 17 00:00:00 2001 From: Hong Yi Chen Date: Fri, 1 May 2026 15:29:58 -0700 Subject: [PATCH 2/2] fix(search-dialog): retone Pagefind modal to warp.dev neutral grey (#18) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * 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 --------- Co-authored-by: Oz --- src/components/CopyPageButton.astro | 6 +- src/components/KapaChatLauncher.css | 8 +- src/styles/warp-components.css | 121 ++++++++++++++++++++++++++++ 3 files changed, 132 insertions(+), 3 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 60f416a..06e1a5e 100644 --- a/src/styles/warp-components.css +++ b/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 `` 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` + / `--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); +}