Skip to content

Commit cbd0860

Browse files
hongyi-chenoz-agent
hongyi-chen
and
oz-agent
authored
fix(chrome): retone Search / Ask / Copy buttons to warp.dev neutral grey (#17)
* fix(chrome): retone Search / Ask / Copy buttons to warp.dev neutral grey 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> * 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> --------- Co-authored-by: Oz <oz-agent@warp.dev>
1 parent 16fa334 commit cbd0860

4 files changed

Lines changed: 173 additions & 42 deletions

File tree

‎src/components/CopyPageButton.astro‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -234,10 +234,10 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`;
234234
gap: 0.375rem;
235235
height: 2.25rem;
236236
padding: 0 0.625rem;
237-
border: 1px solid var(--warp-control-border, hsl(210, 5%, 22%));
237+
border: 1px solid var(--warp-control-border, #404040);
238238
border-radius: var(--sl-radius-sm);
239-
background: var(--warp-control-bg, #1a1a1a);
240-
color: var(--warp-control-text, hsl(210, 4%, 72%));
239+
background: var(--warp-control-bg, #1e1e1d);
240+
color: var(--warp-control-text, #dbdbdb);
241241
font-family: var(--__sl-font, 'Inter', sans-serif);
242242
font-size: var(--sl-text-sm);
243243
font-weight: 400;
@@ -253,8 +253,8 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`;
253253

254254
.copy-dropdown-trigger:hover,
255255
.copy-dropdown-trigger.active {
256-
border-color: var(--warp-control-border-hover, hsl(210, 5%, 30%));
257-
background: var(--warp-control-bg-hover, hsl(210, 6%, 16%));
256+
border-color: var(--warp-control-border-hover, #585756);
257+
background: var(--warp-control-bg-hover, #292929);
258258
color: var(--warp-control-text-hover, hsl(40, 20%, 97%));
259259
}
260260

@@ -300,7 +300,11 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`;
300300
width: 100%;
301301
padding: 0.5rem 0.625rem;
302302
border: none;
303-
border-radius: var(--sl-radius-md);
303+
/* Matches the `--sl-radius-sm` (4px) chrome-control rule used by every
304+
other clickable surface (Search/Ask/Copy triggers, sidebar nav rows,
305+
Copy toast). The enclosing `.copy-dropdown-panel` keeps the 8px
306+
overlay radius. */
307+
border-radius: var(--sl-radius-sm);
304308
background: transparent;
305309
color: var(--sl-color-white);
306310
font-family: var(--sl-font);
@@ -359,9 +363,9 @@ const claudeUrl = `https://claude.ai/new?q=${prompt}`;
359363
top: 50%;
360364
transform: translateY(-50%);
361365
padding: 0.375rem 0.5rem;
362-
border: 1px solid var(--warp-control-border-hover, hsl(210, 5%, 30%));
366+
border: 1px solid var(--warp-control-border-hover, #585756);
363367
border-radius: var(--sl-radius-sm);
364-
background: var(--warp-control-bg, #1a1a1a);
368+
background: var(--warp-control-bg, #1e1e1d);
365369
color: var(--sl-color-text-accent);
366370
font-size: var(--sl-text-2xs);
367371
font-family: var(--__sl-font, var(--sl-font));

‎src/components/KapaChatLauncher.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,9 @@
278278
min-width: 0;
279279
height: 2.75rem;
280280
border: 1px solid var(--sl-color-gray-5);
281-
border-radius: var(--sl-radius-md);
281+
/* Matches the `--sl-radius-sm` (4px) chrome-control rule shared with
282+
every Search/Ask/Copy trigger and the Pagefind input. */
283+
border-radius: var(--sl-radius-sm);
282284
background: var(--sl-color-black);
283285
color: var(--sl-color-white);
284286
padding: 0 0.875rem;
@@ -303,7 +305,9 @@
303305
height: 2.75rem;
304306
padding: 0;
305307
border: 1px solid var(--sl-color-text-accent);
306-
border-radius: var(--sl-radius-md);
308+
/* Matches the `--sl-radius-sm` (4px) chrome-control rule, paired with
309+
the form input on the same row. */
310+
border-radius: var(--sl-radius-sm);
307311
background: var(--sl-color-text-accent);
308312
color: var(--sl-color-black);
309313
font: inherit;

‎src/styles/kapa.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
display: inline-flex;
3030
align-items: center;
3131
gap: 0.375rem;
32-
border: 1px solid var(--warp-control-border, #414651);
32+
border: 1px solid var(--warp-control-border, #404040);
3333
border-radius: var(--sl-radius-sm);
34-
background: var(--warp-control-bg, #181d27);
34+
background: var(--warp-control-bg, #1e1e1d);
3535
color: var(--warp-control-text, #dbdbdb);
3636
cursor: pointer;
3737
font-family: var(--__sl-font, 'Inter', sans-serif);
@@ -71,9 +71,9 @@
7171
right edge. */
7272
right: 0;
7373
padding: 0.375rem 0.5rem;
74-
border: 1px solid var(--warp-control-border-hover, #535862);
74+
border: 1px solid var(--warp-control-border-hover, #585756);
7575
border-radius: var(--sl-radius-sm);
76-
background: var(--warp-control-bg, #181d27);
76+
background: var(--warp-control-bg, #1e1e1d);
7777
color: var(--warp-control-text-hover, hsl(40, 20%, 97%));
7878
font-family: var(--__sl-font, 'Inter', sans-serif);
7979
font-size: var(--sl-text-2xs);
@@ -106,7 +106,7 @@
106106
width: 14px;
107107
height: 14px;
108108
flex: none;
109-
color: var(--warp-control-icon, #a4a7ae);
109+
color: var(--warp-control-icon, #9d9d9b);
110110
transition: color 0.15s ease;
111111
}
112112

@@ -141,8 +141,8 @@
141141
}
142142

143143
.warp-kapa-button:hover {
144-
border-color: var(--warp-control-border-hover, #535862);
145-
background: var(--warp-control-bg-hover, #252b37);
144+
border-color: var(--warp-control-border-hover, #585756);
145+
background: var(--warp-control-bg-hover, #292929);
146146
color: var(--warp-control-text-hover, hsl(40, 20%, 97%));
147147
}
148148

‎src/styles/warp-components.css‎

Lines changed: 148 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -716,36 +716,38 @@ starlight-file-tree .directory > details > summary {
716716
/* Shared chrome palette (Scalar tokens — mirror `src/pages/api.astro`).
717717
Inherited by Search, Ask, Copy, and any future chrome surface.
718718
719-
Dark-mode tokens map directly to the Oz webapp brand ladder (Oz
720-
`gray-300`/`gray-400`/`gray-700`/`gray-800`/`gray-900`) so chips read as
721-
raised surfaces against the `#121212` canvas with a single source of
722-
truth shared with the light-mode block below. `--warp-control-text-hover`
723-
keeps the warm-white `warp.dev` brand color (`#faf9f6`, matches
724-
`--sl-color-white` in dark mode) for one step of extra accent against
725-
`gray-300` body text. */
719+
Dark-mode tokens are sourced from the warp.dev marketing brand ladder
720+
(`warp-marketing-site-static/frontend/pages/global.css` §`--color-neutral-*`)
721+
instead of the Oz webapp ladder. The Oz tier-700/800/900 greys carry
722+
~11–24% blue saturation, which read as visibly cool chips against the
723+
neutral `#121212` canvas; the warp.dev neutrals sit at near-zero saturation
724+
with a slight warm tilt (matching `--sl-color-white`'s warm off-white)
725+
so the trio looks like one grayscale chrome family rather than blue
726+
stickers floating on neutral page bg. Body prose tokens
727+
(`--sl-color-gray-*`) intentionally stay on the Oz ladder — only the
728+
chrome controls move. */
726729
body {
727-
--warp-control-bg: #181d27; /* Oz gray-900 — raised surface */
728-
--warp-control-bg-hover: #252b37; /* Oz gray-800 */
729-
--warp-control-border: #414651; /* Oz gray-700 */
730-
--warp-control-border-hover: #535862; /* Oz gray-600 */
731-
--warp-control-text: #dbdbdb; /* Oz gray-300 — text-secondary */
730+
--warp-control-bg: #1e1e1d; /* warp.dev neutral-95 — raised surface */
731+
--warp-control-bg-hover: #292929; /* warp.dev neutral-90 */
732+
--warp-control-border: #404040; /* warp.dev neutral-80 */
733+
--warp-control-border-hover: #585756; /* warp.dev neutral-70 */
734+
--warp-control-text: #dbdbdb; /* Oz gray-300 — text-secondary (kept; already neutral) */
732735
--warp-control-text-hover: hsl(40, 20%, 97%); /* warp.dev warm off-white */
733-
--warp-control-icon: #a4a7ae; /* Oz gray-400 — text-tertiary */
736+
--warp-control-icon: #9d9d9b; /* warp.dev neutral-40 — text-tertiary */
734737
}
735738

736739
:root[data-theme='light'] body {
737-
/* Light-mode tokens map directly to the Oz webapp brand surface ladder
738-
(`gray-100`/`gray-200`/`gray-300`/`gray-400`) so chips remain visibly
739-
distinct against the pure-white canvas. The previous warm-grey chip
740-
(`hsl(40, 12%, 92%)`) was tuned against the old `#faf9f6` warm canvas
741-
and washed out on `#ffffff`. Hover is one step darker than rest. */
742-
--warp-control-bg: #f3f3f3; /* Oz gray-100 / brand surface.1 */
743-
--warp-control-bg-hover: #e7e7e7; /* Oz gray-200 / brand surface.2 */
744-
--warp-control-border: #dbdbdb; /* Oz gray-300 / brand surface.3 */
745-
--warp-control-border-hover: #a4a7ae; /* Oz gray-400 */
746-
--warp-control-text: #414651; /* Oz gray-700 — text-secondary */
747-
--warp-control-text-hover: #0a0d12;/* Oz gray-950 */
748-
--warp-control-icon: #535862; /* Oz gray-600 — text-tertiary */
740+
/* Light-mode tokens keep the neutral surface/border ladder (`gray-100`
741+
/`gray-200`/`gray-300`) — those values already sit near zero saturation.
742+
The hover/text/icon entries swap from cool Oz tier-600/700 greys to the
743+
warp.dev neutral ladder so the trio reads grayscale in both themes. */
744+
--warp-control-bg: #f3f3f3; /* Oz gray-100 / brand surface.1 (kept) */
745+
--warp-control-bg-hover: #e7e7e7; /* Oz gray-200 / brand surface.2 (kept) */
746+
--warp-control-border: #dbdbdb; /* Oz gray-300 / brand surface.3 (kept) */
747+
--warp-control-border-hover: #9d9d9b; /* warp.dev neutral-40 */
748+
--warp-control-text: #404040; /* warp.dev neutral-80 — text-secondary */
749+
--warp-control-text-hover: #121212;/* warp.dev canvas black */
750+
--warp-control-icon: #585756; /* warp.dev neutral-70 — text-tertiary */
749751
}
750752

751753
.warp-sidebar-search {
@@ -878,3 +880,124 @@ body {
878880
box-shadow: 8px 0 24px rgba(0, 0, 0, 0.12);
879881
}
880882
}
883+
884+
/* --------------------------------------------------------------------------
885+
18. Search dialog (Pagefind modal) — brand-aligned grayscale chrome
886+
--------------------------------------------------------------------------
887+
888+
Starlight's `Search.astro` ships scoped styles inside `@layer
889+
starlight.core` plus an inline `@import` of Pagefind's default UI sheet,
890+
also at `layer(starlight.core)`. The defaults paint:
891+
892+
- The dialog frame with `--sl-color-gray-6` / `gray-5` (Oz cool blue
893+
grays `#252b37` / `#414651`).
894+
- The input focus ring with `--sl-color-accent` (Warp blue).
895+
- Result hover/focus with `--sl-color-accent-high` outlines and
896+
`--sl-color-accent-low` fills (more blue tint).
897+
- Cancel + clear buttons in `--sl-color-text-accent` (blue).
898+
899+
On the neutral `#121212` canvas + the warp.dev grayscale chrome system
900+
(§16 above), all of that read as visibly cool/blue and out of family.
901+
Unlayered overrides below win the cascade against `starlight.core` and
902+
pull the modal onto the same `--warp-control-*` ladder as the trigger
903+
button it just opened from.
904+
905+
Selectors are scoped to `site-search dialog` (the `<dialog>` that lives
906+
inside `<site-search>`) so they don't bleed into the Kapa Ask dialog,
907+
which also uses a `<dialog aria-label="…">` element.
908+
-------------------------------------------------------------------------- */
909+
910+
/* Dialog surface: drop the cool gray-6 fill and gray-5 border in favor of
911+
the page canvas + a hairline. Depth comes from the backdrop blur and the
912+
existing `box-shadow`. Same "one canvas, hairlines for separation"
913+
pattern the rest of the site already uses (see custom.css §background). */
914+
site-search dialog {
915+
background-color: var(--sl-color-bg);
916+
border: 1px solid var(--sl-color-hairline-light);
917+
}
918+
919+
/* Stronger neutral backdrop. Starlight's `--sl-color-backdrop-overlay`
920+
inherits the accent family in some themes; pin it to a flat dark scrim
921+
so the modal still pops without a blue cast. Light mode gets a soft
922+
warm-white wash instead. */
923+
site-search dialog::backdrop {
924+
background-color: rgba(18, 18, 18, 0.55);
925+
}
926+
927+
:root[data-theme='light'] site-search dialog::backdrop {
928+
background-color: rgba(255, 255, 255, 0.55);
929+
}
930+
931+
/* Pagefind UI custom-property overrides. These cascade into Pagefind's own
932+
stylesheet (which authors all its surfaces against
933+
`--pagefind-ui-background` / `--pagefind-ui-border` / `--pagefind-ui-tag`
934+
/ `--pagefind-ui-border-radius`) so we don't need to chase every
935+
internal class. The shared chrome `--warp-control-*` ladder defined in
936+
§16 is the source of truth for color; corner radii follow the chrome
937+
rule — every clickable control surface lands at `--sl-radius-sm` (4px),
938+
matching the trigger button this modal opened from. The dialog frame
939+
itself stays at the Starlight default 8px (overlay tier).
940+
941+
`--sl-search-corners` is Starlight's own knob for the result-card
942+
corners (defaults to `0.3125rem` = 5px, between our `sm` and `md`
943+
tokens, which never matches anything else). Pin it to `sm` so the
944+
list rows match the input above them. */
945+
site-search #starlight__search {
946+
--pagefind-ui-background: var(--warp-control-bg);
947+
--pagefind-ui-border: var(--warp-control-border);
948+
--pagefind-ui-tag: var(--warp-control-border);
949+
--pagefind-ui-text: var(--sl-color-gray-2);
950+
--pagefind-ui-primary: var(--sl-color-white);
951+
--pagefind-ui-border-radius: var(--sl-radius-sm);
952+
--sl-search-corners: var(--sl-radius-sm);
953+
}
954+
955+
/* Input focus border: Starlight's default flips `--pagefind-ui-border` to
956+
the saturated Warp blue accent on focus, which is the bright cyan ring
957+
in the screenshot. Replace with the chrome ladder's hover border so the
958+
input matches the trigger button's `:hover` affordance. */
959+
site-search #starlight__search input:focus {
960+
--pagefind-ui-border: var(--warp-control-border-hover);
961+
}
962+
963+
/* Cancel + clear buttons: drop the blue accent color in favor of a calm
964+
gray that recedes the way every other secondary chrome action does. */
965+
site-search button[data-close-modal] {
966+
color: var(--sl-color-gray-2);
967+
}
968+
969+
site-search button[data-close-modal]:hover {
970+
color: var(--sl-color-white);
971+
}
972+
973+
site-search #starlight__search .pagefind-ui__search-clear::before {
974+
background-color: var(--sl-color-gray-3);
975+
}
976+
977+
site-search #starlight__search .pagefind-ui__search-clear:focus {
978+
outline: 1px solid var(--warp-control-border-hover);
979+
}
980+
981+
/* Result cards. Starlight paints the title row + each nested sub-result
982+
with `--sl-color-black` (`#121212`), which on the cool gray-6 dialog
983+
read as stamped-down patches. With the dialog now sharing the page
984+
canvas, raise each result onto the chrome `--warp-control-bg` so the
985+
list reads as a stack of tactile chips. A 1px hairline keeps the cards
986+
distinct without a heavy outline. */
987+
site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
988+
site-search #starlight__search .pagefind-ui__result-nested,
989+
site-search #starlight__search .pagefind-ui__result-tags {
990+
background-color: var(--warp-control-bg);
991+
}
992+
993+
/* Hover / keyboard-focus state. Replace the blue accent outline + tinted
994+
fill with the same neutral wash the chrome buttons use on hover. The
995+
1px border swap stays inside the existing layout box, so list rows
996+
don't shift on hover. */
997+
site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
998+
site-search #starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
999+
site-search #starlight__search .pagefind-ui__result-nested:hover,
1000+
site-search #starlight__search .pagefind-ui__result-nested:focus-within {
1001+
outline: 1px solid var(--warp-control-border-hover);
1002+
background-color: var(--warp-control-bg-hover);
1003+
}

0 commit comments

Comments
 (0)