diff --git a/.changeset/four-phones-agree.md b/.changeset/four-phones-agree.md new file mode 100644 index 00000000000..905672c4a21 --- /dev/null +++ b/.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. 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); } }