From d306b5f437cc5d6b58568f0686738681feeaa573 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 7 Mar 2025 11:18:32 -0500 Subject: [PATCH 1/3] fix(combobox): correct s1/legacy container variable --- components/combobox/themes/spectrum.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css index 4e5bd9ece62..5ba360b35f8 100644 --- a/components/combobox/themes/spectrum.css +++ b/components/combobox/themes/spectrum.css @@ -15,7 +15,7 @@ @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); From 063d2699ab35dcd6aa416b254ba708c67d89a9c2 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 7 Mar 2025 12:14:55 -0500 Subject: [PATCH 2/3] 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 - update metadata.json --- components/combobox/dist/metadata.json | 7 ++++++- components/combobox/index.css | 10 +++++----- components/combobox/themes/express.css | 2 ++ components/combobox/themes/spectrum-two.css | 3 +++ components/combobox/themes/spectrum.css | 3 +++ 5 files changed, 19 insertions(+), 6 deletions(-) diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 97b38d5f400..bdf2685d75f 100644 --- 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 index 524c396f88c..1718cb5d750 100644 --- 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 index 4b554c207db..dc19625a853 100644 --- 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 index 2e6ae242055..9d8502ebb3e 100644 --- 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 index 5ba360b35f8..5b0a3eea8bf 100644 --- a/components/combobox/themes/spectrum.css +++ b/components/combobox/themes/spectrum.css @@ -21,6 +21,9 @@ --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; } } From 551371314e6bdf61819aec6d3639930eb6b0cbaf Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Mon, 10 Mar 2025 09:56:36 -0400 Subject: [PATCH 3/3] chore(combobox): create changeset --- .changeset/breezy-crews-guess.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/breezy-crews-guess.md diff --git a/.changeset/breezy-crews-guess.md b/.changeset/breezy-crews-guess.md new file mode 100644 index 00000000000..0a50a423b68 --- /dev/null +++ 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