From 64d52d55c601abba0c13311ec2f404d03b6e3e2d Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Thu, 24 Sep 2026 20:52:23 -0700
Subject: [PATCH 1/3] Raise docs search contrast

The search field used code-bg at 60% opacity with a transparent border, so
in light mode it nearly vanished into the page, and the placeholder and icon
used muted at 40% (about 1.7:1). Use the full code-bg fill with a border-border
outline and full-strength muted for the placeholder, icon, and result metadata.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 web/app/[locale]/components/docs-search.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/app/[locale]/components/docs-search.tsx b/web/app/[locale]/components/docs-search.tsx
index 81f1948f9149..66f9626312f6 100644
--- a/web/app/[locale]/components/docs-search.tsx
+++ b/web/app/[locale]/components/docs-search.tsx
@@ -213,7 +213,7 @@ export function DocsSearch({ onNavigate }: { onNavigate?: () => void }) {
   return (
     <div className="pb-4" data-pagefind-ignore="all">
       <div className="relative">
-        <div className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted/40">
+        <div className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted">
           <svg
             width="14"
             height="14"
@@ -243,7 +243,7 @@ export function DocsSearch({ onNavigate }: { onNavigate?: () => void }) {
           aria-activedescendant={
             activeIndex >= 0 ? `docs-search-result-${activeIndex}` : undefined
           }
-          className="w-full rounded-md border border-transparent bg-code-bg/60 py-1.5 pl-8 pr-3 text-[13px] transition-colors placeholder:text-muted/40 hover:bg-code-bg focus:border-border focus:bg-code-bg focus:outline-none"
+          className="w-full rounded-md border border-border bg-code-bg py-1.5 pl-8 pr-3 text-[13px] text-foreground transition-colors placeholder:text-muted hover:border-muted/40 focus:border-muted/60 focus:outline-none"
         />
       </div>
 
@@ -256,12 +256,12 @@ export function DocsSearch({ onNavigate }: { onNavigate?: () => void }) {
           aria-live="polite"
         >
           {statusMessage ? (
-            <div className="rounded-md bg-code-bg/35 px-2 py-2 text-[12px] text-muted/60">
+            <div className="rounded-md bg-code-bg/35 px-2 py-2 text-[12px] text-muted">
               {statusMessage}
             </div>
           ) : (
             <div className="space-y-1 rounded-md bg-code-bg/35 p-1">
-              <div className="px-1 pb-1 text-[11px] text-muted/50">
+              <div className="px-1 pb-1 text-[11px] text-muted">
                 {t("resultsCount", { count: results.length })}
               </div>
               {results.map((result, index) => (
@@ -284,11 +284,11 @@ export function DocsSearch({ onNavigate }: { onNavigate?: () => void }) {
                   </div>
                   {result.excerptHtml && (
                     <div
-                      className="docs-search-excerpt mt-1 line-clamp-2 text-[12px] leading-5 text-muted/80"
+                      className="docs-search-excerpt mt-1 line-clamp-2 text-[12px] leading-5 text-muted"
                       dangerouslySetInnerHTML={{ __html: result.excerptHtml }}
                     />
                   )}
-                  <div className="mt-1 truncate text-[11px] text-muted/45">
+                  <div className="mt-1 truncate text-[11px] text-muted">
                     {result.href.replace(/^\/[a-z]{2}(?:-[A-Z]{2})?\//, "/")}
                   </div>
                 </DocsLink>

From 8c8837aa609516f8223400b6053068b5a1efaa8b Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Sun, 27 Sep 2026 20:55:03 -0700
Subject: [PATCH 2/3] Darken light-theme muted text to meet 4.5:1

#737373 on the #f5f5f5 search field is 4.35:1, below WCAG AA for the
11-13px text there. #707070 reaches 4.54:1; dark theme is unchanged.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 web/app/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/app/globals.css b/web/app/globals.css
index 29a4afe47ff8..64be925118a7 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -5,7 +5,7 @@
 :root {
   --background: #fafafa;
   --foreground: #171717;
-  --muted: #737373;
+  --muted: #707070;
   --border: #e5e5e5;
   --link-underline: #c9c9c9;
   --code-bg: #f5f5f5;

From 64a616e0ac48e13421adf9c4653128c24176161a Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Sun, 27 Sep 2026 20:57:30 -0700
Subject: [PATCH 3/3] Use full-strength muted for the docs search focus border

The 60% border was about 2.3:1 on the light field, below the 3:1 non-text
target, and close to the hover border.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 web/app/[locale]/components/docs-search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/app/[locale]/components/docs-search.tsx b/web/app/[locale]/components/docs-search.tsx
index 66f9626312f6..85e88ff707b9 100644
--- a/web/app/[locale]/components/docs-search.tsx
+++ b/web/app/[locale]/components/docs-search.tsx
@@ -243,7 +243,7 @@ export function DocsSearch({ onNavigate }: { onNavigate?: () => void }) {
           aria-activedescendant={
             activeIndex >= 0 ? `docs-search-result-${activeIndex}` : undefined
           }
-          className="w-full rounded-md border border-border bg-code-bg py-1.5 pl-8 pr-3 text-[13px] text-foreground transition-colors placeholder:text-muted hover:border-muted/40 focus:border-muted/60 focus:outline-none"
+          className="w-full rounded-md border border-border bg-code-bg py-1.5 pl-8 pr-3 text-[13px] text-foreground transition-colors placeholder:text-muted hover:border-muted/40 focus:border-muted focus:outline-none"
         />
       </div>