diff --git a/.changeset/silly-donkeys-remember.md b/.changeset/silly-donkeys-remember.md new file mode 100644 index 00000000000..362012bb06d --- /dev/null +++ b/.changeset/silly-donkeys-remember.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/clearbutton": minor +--- + +Improves the visibility of the clear button disabled variant on static color backgrounds by more closely aligning styles with close button. + +- Adds `.spectrum-ClearButton--staticWhite` to the mod declarations associated with `.spectrum-ClearButton--overBackground` in advance of the latter being deprecated. The same class has been added to the `:focus` declaration for `spectrum-ClearButton--overBackground`. +- Adds `--spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);` custom property for `.spectrum-ClearButton--staticWhite`. +- Enables `cursor: pointer` for `.spectrum-ClearButton` when it is not disabled. +- Disables hover, active, focus and focus-within states for `:disabled` `.spectrum-ClearButton` elements. +- Adds color styles for `:disabled` and `.is-disabled` `.spectrum-ClearButton` `:disabled` icons. diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 541c424c519..4edf5d961e5 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -46,6 +46,8 @@ --mod-clear-button-background-color-key-focus: transparent; } + /* @deprecated .spectrum-ClearButton--overBackground */ + &.spectrum-ClearButton--staticWhite, &.spectrum-ClearButton--overBackground { --mod-clear-button-icon-color: var(--spectrum-white); --mod-clear-button-icon-color-hover: var(--spectrum-white); @@ -65,13 +67,20 @@ --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color); --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); } + + &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + } } .spectrum-ClearButton { block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); border-radius: 100%; - cursor: pointer; + + &:not(:disabled) { + cursor: pointer; + } background-color: var(--mod-clear-button-background-color, transparent); margin: 0; @@ -86,7 +95,7 @@ margin-inline: auto; } - &:hover { + &:not(:disabled):hover { color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); .spectrum-ClearButton-fill { @@ -94,7 +103,7 @@ } } - &:active { + &:not(:disabled):active { color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down)); .spectrum-ClearButton-fill { @@ -102,8 +111,8 @@ } } - &:focus-visible, - &:focus-within { + &:not(:disabled):focus-visible, + &:not(:disabled):focus-within { color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); .spectrum-ClearButton-fill { @@ -112,6 +121,13 @@ } } +.spectrum-ClearButton:disabled, +.spectrum-ClearButton.is-disabled { + .spectrum-ClearButton-icon { + color: var( --highcontrast-clear-button-icon-color-disabled, var(--mod-clear-button-icon-color-disabled, var(--spectrum-clear-button-icon-color-disabled))); + } +} + .spectrum-ClearButton-fill { background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color)); @@ -124,6 +140,8 @@ justify-content: center; } +/* @deprecated .spectrum-ClearButton--overBackground */ +.spectrum-ClearButton--staticWhite, .spectrum-ClearButton--overBackground { &:focus-visible { outline: none; diff --git a/components/clearbutton/metadata/metadata.json b/components/clearbutton/metadata/metadata.json index 7940af65364..6410450768d 100644 --- a/components/clearbutton/metadata/metadata.json +++ b/components/clearbutton/metadata/metadata.json @@ -1,30 +1,34 @@ { "sourceFile": "index.css", "selectors": [ - ".js-focus-within .spectrum-ClearButton[focus-within]", - ".js-focus-within .spectrum-ClearButton[focus-within] .spectrum-ClearButton-fill", + ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within]", + ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within] .spectrum-ClearButton-fill", ".spectrum-ClearButton", ".spectrum-ClearButton > .spectrum-Icon", ".spectrum-ClearButton--overBackground:focus-visible", + ".spectrum-ClearButton--staticWhite:focus-visible", ".spectrum-ClearButton-fill", ".spectrum-ClearButton.is-disabled", + ".spectrum-ClearButton.is-disabled .spectrum-ClearButton-icon", ".spectrum-ClearButton.spectrum-ClearButton--overBackground", ".spectrum-ClearButton.spectrum-ClearButton--quiet", ".spectrum-ClearButton.spectrum-ClearButton--sizeL", ".spectrum-ClearButton.spectrum-ClearButton--sizeS", ".spectrum-ClearButton.spectrum-ClearButton--sizeXL", - ".spectrum-ClearButton:active", - ".spectrum-ClearButton:active .spectrum-ClearButton-fill", + ".spectrum-ClearButton.spectrum-ClearButton--staticWhite", ".spectrum-ClearButton:disabled", - ".spectrum-ClearButton:focus-visible", - ".spectrum-ClearButton:focus-visible .spectrum-ClearButton-fill", - ".spectrum-ClearButton:focus-within", - ".spectrum-ClearButton:focus-within .spectrum-ClearButton-fill", - ".spectrum-ClearButton:hover", - ".spectrum-ClearButton:hover .spectrum-ClearButton-fill", + ".spectrum-ClearButton:disabled .spectrum-ClearButton-icon", ".spectrum-ClearButton:not(:disabled)", - ".spectrum-ClearButton[focus-within].js-focus-within", - ".spectrum-ClearButton[focus-within].js-focus-within .spectrum-ClearButton-fill" + ".spectrum-ClearButton:not(:disabled):active", + ".spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill", + ".spectrum-ClearButton:not(:disabled):focus-visible", + ".spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill", + ".spectrum-ClearButton:not(:disabled):focus-within", + ".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill", + ".spectrum-ClearButton:not(:disabled):hover", + ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill", + ".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within", + ".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within .spectrum-ClearButton-fill" ], "modifiers": [ "--mod-clear-button-background-color", @@ -48,6 +52,7 @@ "--spectrum-clear-button-background-color-key-focus", "--spectrum-clear-button-height", "--spectrum-clear-button-icon-color", + "--spectrum-clear-button-icon-color-disabled", "--spectrum-clear-button-icon-color-down", "--spectrum-clear-button-icon-color-hover", "--spectrum-clear-button-icon-color-key-focus", @@ -60,6 +65,7 @@ "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-disabled-content-color", + "--spectrum-disabled-static-white-content-color", "--spectrum-gray-200", "--spectrum-gray-300", "--spectrum-gray-400", @@ -79,5 +85,8 @@ "--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus" ], "passthroughs": [], - "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] + "high-contrast": [ + "--highcontrast-clear-button-icon-color-disabled", + "--highcontrast-clear-button-icon-color-hover" + ] }