feat(combobox): update to latest CSS

---
Co-authored-by: Marissa Huysentruyt <[email protected]>

Author: castastrophe

.changeset/twelve-dragons-flash.md

@@ -0,0 +1,14 @@
+---
+'@spectrum-web-components/combobox': minor
+'@spectrum-web-components/styles': minor
+---
+
+Styles updated to latest release, graduated from prerelease tag. For more details, please see the [Spectrum CSS Change log](https://github.com/adobe/spectrum-css/releases/tag/%40spectrum-css%2Fcombobox%404.1.2).
+
+[#3609](https://redirect.github.com/adobe/spectrum-css/pull/3609) [851be13](https://github.com/adobe/spectrum-css/commit/851be13295f9d42d548894fee6626009f053de61) Thanks [@​marissahuysentruyt](https://github.com/marissahuysentruyt)!
+
+### 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`, and `read-only` for all themes.
+-   Adds `--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400)` to the Express theme, so that the default border and read-only border colors are the same.

packages/combobox/src/combobox-overrides.css

@@ -27,7 +27,13 @@ governing permissions and limitations under the License.
     --spectrum-combobox-border-color-key-focus: var(
         --system-combobox-border-color-key-focus
     );
+    --spectrum-combobox-readonly-input-border-color: var(
+        --system-combobox-readonly-input-border-color
+    );
     --spectrum-combobox-background-color-disabled: var(
         --system-combobox-background-color-disabled
     );
+    --spectrum-combobox-border-color-disabled: var(
+        --system-combobox-border-color-disabled
+    );
 }

packages/combobox/src/spectrum-combobox.css

@@ -118,7 +118,8 @@ governing permissions and limitations under the License.
         var(--spectrum-combobox-border-color-default)
     );
     --mod-textfield-border-color-disabled: var(
-        --mod-combobox-border-color-disabled
+        --mod-combobox-border-color-disabled,
+        var(--spectrum-combobox-border-color-disabled)
     );
     --mod-textfield-border-color-focus: var(
         --mod-combobox-border-color-focus,
@@ -174,10 +175,13 @@ governing permissions and limitations under the License.
     --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)
+    );
     --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
     );
@@ -187,7 +191,7 @@ governing permissions and limitations under the License.
     --spectrum-combobox-readonly-text-color-disabled: var(
         --spectrum-disabled-content-color
     );
-    --spectrum-combobox-border-color-disabled: var(
+    --spectrum-combobox-readonly-border-color-disabled: var(
         --spectrum-disabled-border-color
     );
 }
@@ -332,6 +336,10 @@ governing permissions and limitations under the License.
             var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) /
             2
     );
+    --mod-textfield-border-color-disabled: var(
+        --mod-combobox-border-color-disabled,
+        initial
+    );
     --mod-picker-button-background-color-quiet: transparent;
     --mod-picker-button-border-color-quiet: transparent;
 }
@@ -439,14 +447,18 @@ governing permissions and limitations under the License.
         --mod-textfield-background-color-disabled,
         var(--spectrum-combobox-readonly-background-color-disabled)
     );
+    border-color: #0000;
+    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)
         )
     );
-    border-color: #0000;
 }
 
 .progress-circle {
@@ -874,7 +886,7 @@ governing permissions and limitations under the License.
     );
     border-color: var(
         --mod-textfield-border-color-disabled,
-        var(--spectrum-combobox-border-color-disabled)
+        var(--spectrum-combobox-readonly-border-color-disabled)
     );
 }
 

tools/styles/tokens-v2/system-theme-bridge.css

@@ -1594,7 +1594,11 @@
     --system-combobox-border-color-focus: var(--spectrum-gray-800);
     --system-combobox-border-color-focus-hover: var(--spectrum-gray-900);
     --system-combobox-border-color-key-focus: var(--spectrum-gray-800);
+    --system-combobox-readonly-input-border-color: var(--spectrum-gray-500);
     --system-combobox-background-color-disabled: var(--spectrum-gray-25);
+    --system-combobox-border-color-disabled: var(
+        --spectrum-disabled-border-color
+    );
     --system-dialog-fullscreen-header-text-size: 28px;
     --system-dialog-min-inline-size: 288px;
     --system-dialog-confirm-small-width: 400px;

tools/styles/tokens/express/system-theme-bridge.css

@@ -1592,9 +1592,11 @@
     --system-combobox-border-color-focus: var(--spectrum-gray-900);
     --system-combobox-border-color-focus-hover: var(--spectrum-gray-800);
     --system-combobox-border-color-key-focus: var(--spectrum-gray-900);
+    --system-combobox-readonly-input-border-color: var(--spectrum-gray-400);
     --system-combobox-background-color-disabled: var(
         --spectrum-disabled-background-color
     );
+    --system-combobox-border-color-disabled: transparent;
     --system-dialog-fullscreen-header-text-size: 28px;
     --system-dialog-min-inline-size: 288px;
     --system-dialog-confirm-small-width: 400px;

tools/styles/tokens/spectrum/system-theme-bridge.css

@@ -1598,9 +1598,11 @@
     --system-combobox-border-color-focus: var(--spectrum-gray-500);
     --system-combobox-border-color-focus-hover: var(--spectrum-gray-600);
     --system-combobox-border-color-key-focus: var(--spectrum-gray-600);
+    --system-combobox-readonly-input-border-color: var(--spectrum-gray-500);
     --system-combobox-background-color-disabled: var(
         --spectrum-disabled-background-color
     );
+    --system-combobox-border-color-disabled: transparent;
     --system-dialog-fullscreen-header-text-size: 28px;
     --system-dialog-min-inline-size: 288px;
     --system-dialog-confirm-small-width: 400px;