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); +}