fix(search): update disabled state in spectrum two (#3593)

Co-authored-by: rise-erpelding <[email protected]>
Co-authored-by: [ Cassondra ] <[email protected]>

Author: 3 people

.changeset/four-phones-agree.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/search": patch
+---
+
+Updated `--spectrum-search-background-color-disabled` to `--spectrum-gray-25` and `--spectrum-search-border-color-disabled` to `--spectrum-gray-300` for the S2 foundations contexts.
+
+Also defines disabled quiet border and background colors (`--system-search-quiet-background-color-disabled` and `--system-search-quiet-border-color-disabled`) in order to maintain disabled quiet styling.

components/search/dist/metadata.json

@@ -118,7 +118,6 @@
     "--spectrum-component-top-to-text-100",
     "--spectrum-corner-radius-100",
     "--spectrum-default-font-style",
-    "--spectrum-disabled-background-color",
     "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
     "--spectrum-field-edge-to-visual-quiet",
@@ -127,6 +126,7 @@
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-gray-25",
+    "--spectrum-gray-300",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-800",
@@ -151,13 +151,17 @@
   ],
   "system-theme": [
     "--system-search-background-color",
+    "--system-search-background-color-disabled",
     "--system-search-border-color-default",
+    "--system-search-border-color-disabled",
     "--system-search-border-color-focus",
     "--system-search-border-color-focus-hover",
     "--system-search-border-color-hover",
     "--system-search-border-color-key-focus",
     "--system-search-border-radius",
     "--system-search-edge-to-visual",
+    "--system-search-quiet-background-color-disabled",
+    "--system-search-quiet-border-color-disabled",
     "--system-search-size-l-border-radius",
     "--system-search-size-l-edge-to-visual",
     "--system-search-size-m-border-radius",

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

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

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