fix(combobox): border color fast follows swc-582 (#3609)

marissahuysentruyt · web-flow · commit 851be13295f9 · 2025-03-14T14:11:03.000-04:00
* fix(combobox): correct s1/legacy container variable

* fix(combobox): fast follow border color remapping
- add mods for s2 foundations disabled picker button BG/border colors
- correct disabled+read-only border color
- add read-only border custom property
- fixes express read-only border from gray-500 to gray-400
- update metadata.json

* chore(combobox): create changeset
diff --git a/.changeset/breezy-crews-guess.md b/.changeset/breezy-crews-guess.md
@@ -0,0 +1,9 @@
+---
+"@spectrum-css/combobox": patch
+---
+
+Fast follow fixes for combobox
+
+- corrects container query for the `--system` reference to "legacy" in the combobox/themes/spectrum.css file
+- corrects the border colors for several combobox states including focus, keyboardFocus, focus+hover, disabled, read-only for all themes
+- adds `--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400);` to express.css theme so that the default border and read-only border colors are the same
diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json
@@ -125,6 +125,7 @@
     "--mod-combobox-inline-size",
     "--mod-combobox-line-height",
     "--mod-combobox-min-inline-size",
+    "--mod-combobox-readonly-border-color-disabled",
     "--mod-combobox-readonly-input-border-color",
     "--mod-combobox-spacing-block-end-edge-to-text",
     "--mod-combobox-spacing-block-start-edge-to-text",
@@ -171,6 +172,7 @@
     "--spectrum-combobox-line-height",
     "--spectrum-combobox-min-inline-size",
     "--spectrum-combobox-readonly-background-color-disabled",
+    "--spectrum-combobox-readonly-border-color-disabled",
     "--spectrum-combobox-readonly-border-color-invalid-default",
     "--spectrum-combobox-readonly-input-background-color",
     "--spectrum-combobox-readonly-input-border-color",
@@ -252,16 +254,19 @@
   "system-theme": [
     "--system-combobox-background-color-disabled",
     "--system-combobox-border-color-default",
+    "--system-combobox-border-color-disabled",
     "--system-combobox-border-color-focus",
     "--system-combobox-border-color-focus-hover",
     "--system-combobox-border-color-hover",
-    "--system-combobox-border-color-key-focus"
+    "--system-combobox-border-color-key-focus",
+    "--system-combobox-readonly-input-border-color"
   ],
   "passthroughs": [
     "--mod-picker-button-background-color",
     "--mod-picker-button-background-color-disabled",
     "--mod-picker-button-background-color-quiet",
     "--mod-picker-button-border-color",
+    "--mod-picker-button-border-color-disabled",
     "--mod-picker-button-border-color-quiet",
     "--mod-picker-button-border-width",
     "--mod-picker-button-font-color-disabled",
diff --git a/components/combobox/index.css b/components/combobox/index.css
@@ -68,7 +68,7 @@
 
 	--mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width));
 	--mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default));
-	--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, transparent);
+	--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
 	--mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus));
 	--mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover));
 	--mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover));
@@ -89,15 +89,15 @@
 	--mod-picker-button-background-color: var(--mod-combobox-background-color-default);
 	--mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
 	--mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
+	--mod-picker-button-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
 	/* @passthroughs end -- settings for nested Picker Button component */
 
 	/*** Read-only Colors ***/
 	--spectrum-combobox-readonly-input-background-color: var(--spectrum-gray-50);
-	--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);
 	--spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default);
 	--spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color);
 	--spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);
-	--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
+	--spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color);
 }
 
 .spectrum-Combobox,
@@ -248,7 +248,7 @@
 
 		&.is-disabled .spectrum-Combobox-input:read-only {
 			background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
-			border-color: transparent;
+			border-color: var(--mod-combobox-readonly-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled, transparent));
 			color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
 
 			&:hover {
@@ -435,7 +435,7 @@
 
 			&.is-disabled .spectrum-Combobox-input:read-only {
 				color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
-				border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
+				border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled));
 			}
 		}
 	}
diff --git a/components/combobox/themes/express.css b/components/combobox/themes/express.css
@@ -22,5 +22,7 @@
 		--spectrum-combobox-border-color-focus: var(--spectrum-gray-900);
 		--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800);
 		--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900);
+
+		--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400);
 	}
 }
diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css
@@ -19,6 +19,9 @@
 		--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);
 		--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);
 
+		--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);
+
 		--spectrum-combobox-background-color-disabled: var(--spectrum-gray-25);
+		--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
 	}
 }
diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css
@@ -15,12 +15,15 @@
 
 @import "./spectrum-two.css";
 
-@container style(--system: spectrum) {
+@container style(--system: legacy) {
 	.spectrum-Combobox {
 		--spectrum-combobox-border-color-focus: var(--spectrum-gray-500);
 		--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600);
 		--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600);
 
+		--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);
+
 		--spectrum-combobox-background-color-disabled: var(--spectrum-disabled-background-color);
+		--spectrum-combobox-border-color-disabled: transparent;
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -22,5 +22,7 @@`
`22`	`22`	`--spectrum-combobox-border-color-focus: var(--spectrum-gray-900);`
`23`	`23`	`--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800);`
`24`	`24`	`--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900);`
	`25`	`+`
	`26`	`+ --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400);`
`25`	`27`	`}`
`26`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,9 @@`
`19`	`19`	`--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);`
`20`	`20`	`--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);`
`21`	`21`
	`22`	`+ --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);`
	`23`	`+`
`22`	`24`	`--spectrum-combobox-background-color-disabled: var(--spectrum-gray-25);`
	`25`	`+ --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);`
`23`	`26`	`}`
`24`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,12 +15,15 @@`
`15`	`15`
`16`	`16`	`@import "./spectrum-two.css";`
`17`	`17`
`18`		`-@container style(--system: spectrum) {`
	`18`	`+@container style(--system: legacy) {`
`19`	`19`	`.spectrum-Combobox {`
`20`	`20`	`--spectrum-combobox-border-color-focus: var(--spectrum-gray-500);`
`21`	`21`	`--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600);`
`22`	`22`	`--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600);`
`23`	`23`
	`24`	`+ --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);`
	`25`	`+`
`24`	`26`	`--spectrum-combobox-background-color-disabled: var(--spectrum-disabled-background-color);`
	`27`	`+ --spectrum-combobox-border-color-disabled: transparent;`
`25`	`28`	`}`
`26`	`29`	`}`