fix(search): update disabled state in spectrum two

TarunAdobe · rise-erpelding · commit f692a5e39c2a · 2025-03-11T09:30:49.000-05:00
diff --git a/.changeset/four-phones-agree.md b/.changeset/four-phones-agree.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/search": patch
+---
+
+updated disabled search background color to gray-25 and border-color to gray-300 in spectrum-two theme
diff --git a/components/search/index.css b/components/search/index.css
@@ -48,8 +48,6 @@
 
 	/* Disabled */
 	--spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
-	--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
-	--spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);
 
 	/* @passthrough start -- settings for nested Textfield component */
 	--mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family));
diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css
@@ -20,6 +20,8 @@
 		--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
 
 		--spectrum-search-background-color: var(--spectrum-gray-25);
+		--spectrum-search-background-color-disabled: var(--spectrum-gray-25);
+		--spectrum-search-border-color-disabled: var(--spectrum-gray-300);
 
 		&,
 		&.spectrum-Search--sizeM {
@@ -42,4 +44,9 @@
 			--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
 		}
 	}
+
+	.spectrum-Search--quiet {
+		--spectrum-search-background-color-disabled: transparent;
+		--spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
+	}
 }
diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css
@@ -17,6 +17,8 @@
 
 @container style(--system: legacy) {
 	.spectrum-Search {
+		--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);
 	}
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@spectrum-css/search": patch
 +---
++
 +updated disabled search background color to gray-25 and border-color to gray-300 in spectrum-two theme
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,8 @@`
`20`	`20`	`--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);`
`21`	`21`
`22`	`22`	`--spectrum-search-background-color: var(--spectrum-gray-25);`
	`23`	`+ --spectrum-search-background-color-disabled: var(--spectrum-gray-25);`
	`24`	`+ --spectrum-search-border-color-disabled: var(--spectrum-gray-300);`
`23`	`25`
`24`	`26`	`&,`
`25`	`27`	`&.spectrum-Search--sizeM {`
`@@ -42,4 +44,9 @@`
`42`	`44`	`--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);`
`43`	`45`	`}`
`44`	`46`	`}`
	`47`	`+`
	`48`	`+ .spectrum-Search--quiet {`
	`49`	`+ --spectrum-search-background-color-disabled: transparent;`
	`50`	`+ --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);`
	`51`	`+ }`
`45`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,8 @@`
`17`	`17`
`18`	`18`	`@container style(--system: legacy) {`
`19`	`19`	`.spectrum-Search {`
	`20`	`+ --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);`
	`21`	`+ --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);`
`20`	`22`	`--spectrum-search-background-color: var(--spectrum-gray-50);`
`21`	`23`	`}`
`22`	`24`	`}`