From a043b69b15e7a930c6723599bc2519c4b5facf60 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Mon, 3 Mar 2025 12:06:49 +0530 Subject: [PATCH 1/3] fix(search): update disabled state in spectrum two --- .changeset/four-phones-agree.md | 5 +++++ components/search/dist/metadata.json | 6 +++++- components/search/index.css | 2 -- components/search/themes/spectrum-two.css | 7 +++++++ components/search/themes/spectrum.css | 2 ++ 5 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 .changeset/four-phones-agree.md diff --git a/.changeset/four-phones-agree.md b/.changeset/four-phones-agree.md new file mode 100644 index 00000000000..7e30e444235 --- /dev/null +++ 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/dist/metadata.json b/components/search/dist/metadata.json index 5dacd2f6ba3..b701431ddf2 100644 --- a/components/search/dist/metadata.json +++ b/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", diff --git a/components/search/index.css b/components/search/index.css index 842123e839a..3f98f73e145 100644 --- 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 index 85a34114a0a..67bbeedb662 100644 --- 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 index 4fd1a9aae94..c9923294d14 100644 --- 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); } } From 312a7f094cd56351f1ae8d08f7b17629027a71c3 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Tue, 11 Mar 2025 10:51:36 -0500 Subject: [PATCH 2/3] Update .changeset/four-phones-agree.md Co-authored-by: [ Cassondra ] --- .changeset/four-phones-agree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/four-phones-agree.md b/.changeset/four-phones-agree.md index 7e30e444235..73e32f56bf0 100644 --- a/.changeset/four-phones-agree.md +++ b/.changeset/four-phones-agree.md @@ -2,4 +2,4 @@ "@spectrum-css/search": patch --- -updated disabled search background color to gray-25 and border-color to gray-300 in spectrum-two theme +Updated `--spectrum-search-background-color-disabled` to `--spectrum-gray-25` and `--spectrum-search-border-color-disabled` to `--spectrum-gray-300` for the foundations contexts. From 6ed8ac652b982109d29f5dbae7ad7e89a6ca91d4 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Wed, 12 Mar 2025 10:49:52 -0500 Subject: [PATCH 3/3] Update changeset --- .changeset/four-phones-agree.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.changeset/four-phones-agree.md b/.changeset/four-phones-agree.md index 73e32f56bf0..905672c4a21 100644 --- a/.changeset/four-phones-agree.md +++ b/.changeset/four-phones-agree.md @@ -2,4 +2,6 @@ "@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 foundations contexts. +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.