fix(search): change keyfocus border to gray-800

rise-erpelding · rise-erpelding · commit 94b6905b7d51 · 2025-04-07T15:35:00.000-05:00
diff --git a/.changeset/stupid-chefs-brush.md b/.changeset/stupid-chefs-brush.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/search": patch
+---
+
+Change S2 theme border color to gray-800 on keyfocus per design request in order to align with text field.
diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css
@@ -17,7 +17,7 @@
 		--spectrum-search-border-color-hover: var(--spectrum-gray-600);
 		--spectrum-search-border-color-focus: var(--spectrum-gray-800);
 		--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
-		--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
+		--spectrum-search-border-color-key-focus: var(--spectrum-gray-800);
 
 		--spectrum-search-background-color: var(--spectrum-gray-25);
 		--spectrum-search-background-color-disabled: var(--spectrum-gray-25);
diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css
@@ -20,5 +20,6 @@
 		--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
 		--spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
 		--spectrum-search-background-color: var(--spectrum-gray-50);
+		--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
 	}
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@spectrum-css/search": patch
 +---
++
 +Change S2 theme border color to gray-800 on keyfocus per design request in order to align with text field.
Original file line number	Diff line number	Diff line change
`@@ -20,5 +20,6 @@`
`20`	`20`	`--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);`
`21`	`21`	`--spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);`
`22`	`22`	`--spectrum-search-background-color: var(--spectrum-gray-50);`
	`23`	`+ --spectrum-search-border-color-key-focus: var(--spectrum-gray-900);`
`23`	`24`	`}`
`24`	`25`	`}`