From 64be98ae6cae92c1a8668a8a8b8af58337b4ce0f Mon Sep 17 00:00:00 2001 From: Megan Logsdon Date: Wed, 19 Jul 2023 08:44:04 -0400 Subject: [PATCH] feat(clear-button): migrate to core tokens --- packages/clear-button/package.json | 2 +- .../src/spectrum-clear-button.css | 589 +++++------------- yarn.lock | 8 +- 3 files changed, 159 insertions(+), 440 deletions(-) diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json index b6c9364343..2b1466333d 100644 --- a/packages/clear-button/package.json +++ b/packages/clear-button/package.json @@ -45,7 +45,7 @@ "@spectrum-web-components/base": "^0.37.0" }, "devDependencies": { - "@spectrum-css/clearbutton": "^1.2.38" + "@spectrum-css/clearbutton": "^5.0.4" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css index ffd9cab9db..0586e68a77 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -12,503 +12,222 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - align-items: center; - -webkit-appearance: button; - border-style: solid; - box-sizing: border-box; - cursor: pointer; - display: inline-flex; - font-family: var( - --spectrum-alias-body-text-font-family, - var(--spectrum-global-font-family-base) - ); - justify-content: center; - line-height: var( - --spectrum-alias-component-text-line-height, - var(--spectrum-global-font-line-height-small) - ); - overflow: visible; - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - text-transform: none; - transition: background var(--spectrum-global-animation-duration-100, 0.13s) - ease-out, - border-color var(--spectrum-global-animation-duration-100, 0.13s) - ease-out, - color var(--spectrum-global-animation-duration-100, 0.13s) ease-out, - box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-out; - -webkit-user-select: none; - user-select: none; - vertical-align: top; -} -:host(:focus) { - outline: none; -} -:host([disabled]) { - cursor: default; -} -:host { - background-color: #0000; - border: none; - border-radius: 100%; - margin: 0; - padding: var(--spectrum-clearbutton-padding); -} -.icon { - margin: 0 auto; -} -:host([size='s']) { - --spectrum-clearbutton-fill-uiicon-color-disabled: var( - --spectrum-clearbutton-s-fill-uiicon-color-disabled, - var(--spectrum-alias-component-icon-color-disabled) + --spectrum-clear-button-height: var(--spectrum-component-height-100); + --spectrum-clear-button-width: var(--spectrum-component-height-100); + --spectrum-clear-button-padding: var( + --spectrum-in-field-button-edge-to-fill ); - --spectrum-clearbutton-fill-background-color-disabled: var( - --spectrum-clearbutton-s-fill-background-color-disabled, - var(--spectrum-alias-background-color-transparent) + --spectrum-clear-button-icon-color: var( + --spectrum-neutral-content-color-default ); - --spectrum-clearbutton-fill-uiicon-color: var( - --spectrum-clearbutton-s-fill-uiicon-color, - var(--spectrum-alias-component-icon-color-default) + --spectrum-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover ); - --spectrum-clearbutton-fill-background-color: var( - --spectrum-clearbutton-s-fill-background-color, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default - ) - ); - --spectrum-clearbutton-fill-uiicon-color-down: var( - --spectrum-clearbutton-s-fill-uiicon-color-down, - var(--spectrum-alias-component-icon-color-down) + --spectrum-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down ); - --spectrum-clearbutton-fill-background-color-down: var( - --spectrum-clearbutton-s-fill-background-color-down, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down - ) - ); - --spectrum-clearbutton-fill-background-color-hover: var( - --spectrum-clearbutton-s-fill-background-color-hover, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover - ) - ); - --spectrum-clearbutton-fill-uiicon-color-key-focus: var( - --spectrum-clearbutton-s-fill-uiicon-color-key-focus, - var(--spectrum-alias-component-icon-color-key-focus) - ); - --spectrum-clearbutton-fill-background-color-key-focus: var( - --spectrum-clearbutton-s-fill-background-color-key-focus, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus - ) - ); - --spectrum-clearbutton-fill-size: var( - --spectrum-clearbutton-s-fill-size, - var(--spectrum-alias-infieldbutton-full-height-s) - ); - --spectrum-clearbutton-padding: var( - --spectrum-clearbutton-s-padding, - var(--spectrum-alias-infieldbutton-padding-s) + --spectrum-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus ); } -:host { - --spectrum-clearbutton-fill-uiicon-color-disabled: var( - --spectrum-clearbutton-m-fill-uiicon-color-disabled, - var(--spectrum-alias-component-icon-color-disabled) - ); - --spectrum-clearbutton-fill-background-color-disabled: var( - --spectrum-clearbutton-m-fill-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - --spectrum-clearbutton-fill-uiicon-color: var( - --spectrum-clearbutton-m-fill-uiicon-color, - var(--spectrum-alias-component-icon-color-default) - ); - --spectrum-clearbutton-fill-background-color: var( - --spectrum-clearbutton-m-fill-background-color, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default - ) - ); - --spectrum-clearbutton-fill-uiicon-color-down: var( - --spectrum-clearbutton-m-fill-uiicon-color-down, - var(--spectrum-alias-component-icon-color-down) - ); - --spectrum-clearbutton-fill-background-color-down: var( - --spectrum-clearbutton-m-fill-background-color-down, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down - ) - ); - --spectrum-clearbutton-fill-background-color-hover: var( - --spectrum-clearbutton-m-fill-background-color-hover, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover - ) - ); - --spectrum-clearbutton-fill-uiicon-color-key-focus: var( - --spectrum-clearbutton-m-fill-uiicon-color-key-focus, - var(--spectrum-alias-component-icon-color-key-focus) - ); - --spectrum-clearbutton-fill-background-color-key-focus: var( - --spectrum-clearbutton-m-fill-background-color-key-focus, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus - ) - ); - --spectrum-clearbutton-fill-size: var( - --spectrum-clearbutton-m-fill-size, - var(--spectrum-alias-infieldbutton-full-height-m) - ); - --spectrum-clearbutton-padding: var( - --spectrum-clearbutton-m-padding, - var(--spectrum-alias-infieldbutton-padding-m) - ); +:host([size='s']) { + --spectrum-clear-button-height: var(--spectrum-component-height-75); + --spectrum-clear-button-width: var(--spectrum-component-height-75); } :host([size='l']) { - --spectrum-clearbutton-fill-uiicon-color-disabled: var( - --spectrum-clearbutton-l-fill-uiicon-color-disabled, - var(--spectrum-alias-component-icon-color-disabled) - ); - --spectrum-clearbutton-fill-background-color-disabled: var( - --spectrum-clearbutton-l-fill-background-color-disabled, - var(--spectrum-alias-background-color-transparent) - ); - --spectrum-clearbutton-fill-uiicon-color: var( - --spectrum-clearbutton-l-fill-uiicon-color, - var(--spectrum-alias-component-icon-color-default) + --spectrum-clear-button-height: var(--spectrum-component-height-200); + --spectrum-clear-button-width: var(--spectrum-component-height-200); +} +:host([size='xl']) { + --spectrum-clear-button-height: var(--spectrum-component-height-300); + --spectrum-clear-button-width: var(--spectrum-component-height-300); +} +:host .spectrum-ClearButton--quiet { + --mod-clear-button-background-color: var( + --spectrum-clear-button-background-color-quiet, + transparent ); - --spectrum-clearbutton-fill-background-color: var( - --spectrum-clearbutton-l-fill-background-color, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default - ) + --mod-clear-button-background-color-hover: var( + --spectrum-clear-button-background-color-hover-quiet, + transparent ); - --spectrum-clearbutton-fill-uiicon-color-down: var( - --spectrum-clearbutton-l-fill-uiicon-color-down, - var(--spectrum-alias-component-icon-color-down) + --mod-clear-button-background-color-down: var( + --spectrum-clear-button-background-color-down-quiet, + transparent ); - --spectrum-clearbutton-fill-background-color-down: var( - --spectrum-clearbutton-l-fill-background-color-down, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down - ) + --mod-clear-button-background-color-key-focus: var( + --spectrum-clear-button-background-color-key-focus-quiet, + transparent ); - --spectrum-clearbutton-fill-background-color-hover: var( - --spectrum-clearbutton-l-fill-background-color-hover, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover - ) +} +:host([variant='overBackground']) { + --mod-clear-button-icon-color: var( + --spectrum-clear-button-icon-color-over-background, + var(--spectrum-white) ); - --spectrum-clearbutton-fill-uiicon-color-key-focus: var( - --spectrum-clearbutton-l-fill-uiicon-color-key-focus, - var(--spectrum-alias-component-icon-color-key-focus) + --mod-clear-button-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-over-background, + var(--spectrum-white) ); - --spectrum-clearbutton-fill-background-color-key-focus: var( - --spectrum-clearbutton-l-fill-background-color-key-focus, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus - ) + --mod-clear-button-icon-color-down: var( + --spectrum-clear-button-icon-color-down-over-background, + var(--spectrum-white) ); - --spectrum-clearbutton-fill-size: var( - --spectrum-clearbutton-l-fill-size, - var(--spectrum-alias-infieldbutton-full-height-l) + --mod-clear-button-icon-color-key-focus: var( + --spectrum-clear-button-icon-color-key-focus-over-background, + var(--spectrum-white) ); - --spectrum-clearbutton-padding: var( - --spectrum-clearbutton-l-padding, - var(--spectrum-alias-infieldbutton-padding-l) + --mod-clear-button-background-color: var( + --spectrum-clear-button-background-color-over-background, + transparent ); -} -:host([size='xl']) { - --spectrum-clearbutton-fill-uiicon-color-disabled: var( - --spectrum-clearbutton-xl-fill-uiicon-color-disabled, - var(--spectrum-alias-component-icon-color-disabled) + --mod-clear-button-background-color-hover: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) ); - --spectrum-clearbutton-fill-background-color-disabled: var( - --spectrum-clearbutton-xl-fill-background-color-disabled, - var(--spectrum-alias-background-color-transparent) + --mod-clear-button-background-color-down: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-400) ); - --spectrum-clearbutton-fill-uiicon-color: var( - --spectrum-clearbutton-xl-fill-uiicon-color, - var(--spectrum-alias-component-icon-color-default) + --mod-clear-button-background-color-key-focus: var( + --spectrum-clear-button-background-color-hover-over-background, + var(--spectrum-transparent-white-300) ); - --spectrum-clearbutton-fill-background-color: var( - --spectrum-clearbutton-xl-fill-background-color, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default - ) +} +:host([disabled]) { + --mod-clear-button-icon-color: var( + --mod-clear-button-icon-color-disabled, + var(--spectrum-disabled-content-color) ); - --spectrum-clearbutton-fill-uiicon-color-down: var( - --spectrum-clearbutton-xl-fill-uiicon-color-down, - var(--spectrum-alias-component-icon-color-down) + --mod-clear-button-icon-color-hover: var( + --spectrum-clear-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) ); - --spectrum-clearbutton-fill-background-color-down: var( - --spectrum-clearbutton-xl-fill-background-color-down, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down - ) + --mod-clear-button-icon-color-down: var( + --spectrum-clear-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) ); - --spectrum-clearbutton-fill-background-color-hover: var( - --spectrum-clearbutton-xl-fill-background-color-hover, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover - ) + --mod-clear-button-background-color: var( + --mod-clear-button-background-color-disabled, + transparent ); - --spectrum-clearbutton-fill-uiicon-color-key-focus: var( - --spectrum-clearbutton-xl-fill-uiicon-color-key-focus, - var(--spectrum-alias-component-icon-color-key-focus) +} +:host { + background-color: var(--mod-clear-button-background-color, transparent); + block-size: var( + --mod-clear-button-height, + var(--spectrum-clear-button-height) ); - --spectrum-clearbutton-fill-background-color-key-focus: var( - --spectrum-clearbutton-xl-fill-background-color-key-focus, - var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus - ) + border: none; + border-radius: 100%; + color: var( + --mod-clear-button-icon-color, + var(--spectrum-clear-button-icon-color) ); - --spectrum-clearbutton-fill-size: var( - --spectrum-clearbutton-xl-fill-size, - var(--spectrum-alias-infieldbutton-full-height-xl) + cursor: pointer; + inline-size: var( + --mod-clear-button-width, + var(--spectrum-clear-button-width) ); - --spectrum-clearbutton-padding: var( - --spectrum-clearbutton-xl-padding, - var(--spectrum-alias-infieldbutton-padding-xl) + margin: 0; + padding: var( + --mod-clear-button-padding, + var(--spectrum-clear-button-padding) ); } -.fill { - align-items: center; - background-color: var(--spectrum-clearbutton-fill-background-color); - border-radius: 100%; - display: flex; - height: var(--spectrum-clearbutton-fill-size); - justify-content: center; - width: var(--spectrum-clearbutton-fill-size); +.icon { + margin-block: 0; + margin-inline: auto; } -:host { +:host(:hover) { color: var( - --spectrum-clearbutton-m-fill-uiicon-color, - var(--spectrum-alias-component-icon-color-default) + --highcontrast-clear-button-icon-color-hover, + var( + --mod-clear-button-icon-color-hover, + var(--spectrum-clear-button-icon-color-hover) + ) ); } -:host(:hover) { - color: var(--spectrum-clearbutton-fill-uiicon-color); -} -:host([active]) { - color: var(--spectrum-clearbutton-fill-uiicon-color-down); -} -:host(.focus-visible) { - color: var(--spectrum-clearbutton-fill-uiicon-color-key-focus); -} -:host(:focus-visible) { - color: var(--spectrum-clearbutton-fill-uiicon-color-key-focus); -} -:host([disabled]) { - color: var(--spectrum-clearbutton-fill-uiicon-color-disabled); -} :host(:hover) .fill { - background-color: var(--spectrum-clearbutton-fill-background-color-hover); -} -:host([active]) .fill { - background-color: var(--spectrum-clearbutton-fill-background-color-down); -} -:host(.focus-visible) .fill { - background-color: var( - --spectrum-clearbutton-fill-background-color-key-focus - ); -} -:host(:focus-visible) .fill { background-color: var( - --spectrum-clearbutton-fill-background-color-key-focus - ); -} -:host([disabled]) .fill { - background-color: var( - --spectrum-clearbutton-fill-background-color-disabled - ); -} -:host([variant='overBackground']) { - color: var( - --spectrum-alias-icon-color-overbackground, - var(--spectrum-global-color-static-white) + --mod-clear-button-background-color-hover, + var(--spectrum-clear-button-background-color-hover) ); } -:host([variant='overBackground']:hover) { +:host([active]) { color: var( - --spectrum-alias-icon-color-overbackground, - var(--spectrum-global-color-static-white) + --mod-clear-button-icon-color-down, + var(--spectrum-clear-button-icon-color-down) ); } -:host([variant='overBackground'][active]) { - color: var( - --spectrum-alias-icon-color-overbackground, - var(--spectrum-global-color-static-white) +:host([active]) .fill { + background-color: var( + --mod-clear-button-background-color-down, + var(--spectrum-clear-button-background-color-down) ); } -:host([variant='overBackground'].focus-visible) { +:host.focus-visible, +:host:focus-within { color: var( - --spectrum-alias-icon-color-overbackground, - var(--spectrum-global-color-static-white) + --mod-clear-button-icon-color-key-focus, + var(--spectrum-clear-button-icon-color-key-focus) ); } -:host([variant='overBackground']:focus-visible) { +:host:focus-visible, +:host:focus-within { color: var( - --spectrum-alias-icon-color-overbackground, - var(--spectrum-global-color-static-white) - ); -} -:host([variant='overBackground'][disabled]), -:host([variant='overBackground'][disabled]) .fill { - background-color: var( - --spectrum-alias-icon-color-overbackground-disabled, - #fff3 + --mod-clear-button-icon-color-key-focus, + var(--spectrum-clear-button-icon-color-key-focus) ); } -:host([variant='overBackground']) { +:host.focus-visible .fill, +:host:focus-within .fill { background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color, - var(--spectrum-alias-background-color-transparent) - ); - border-color: var( - --spectrum-button-m-primary-outline-white-texticon-border-color, - var(--spectrum-global-color-static-white) - ); - color: var( - --spectrum-button-m-primary-outline-white-texticon-text-color, - var(--spectrum-global-color-static-white) + --mod-clear-button-background-color-key-focus, + var(--spectrum-clear-button-background-color-key-focus) ); } -:host([variant='overBackground']:hover) { +:host:focus-visible .fill, +:host:focus-within .fill { background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-white-300) - ); - border-color: var( - --spectrum-button-m-primary-outline-white-texticon-border-color-hover, - var(--spectrum-global-color-static-white) - ); - color: var( - --spectrum-button-m-primary-outline-white-texticon-text-color-hover, - var(--spectrum-global-color-static-white) + --mod-clear-button-background-color-key-focus, + var(--spectrum-clear-button-background-color-key-focus) ); } -:host([variant='overBackground'].focus-visible) { +.fill { + align-items: center; background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-white-300) - ); - border-color: var( - --spectrum-button-m-primary-outline-white-texticon-border-color-hover, - var(--spectrum-global-color-static-white) - ); - box-shadow: none; - color: var( - --spectrum-button-m-primary-outline-white-texticon-text-color-hover, - var(--spectrum-global-color-static-white) + --mod-clear-button-background-color, + var(--spectrum-clear-button-background-color) ); + block-size: 100%; + border-radius: 100%; + display: flex; + inline-size: 100%; + justify-content: center; } -:host([variant='overBackground']:focus-visible) { - background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-hover, - var(--spectrum-global-color-static-transparent-white-300) - ); - border-color: var( - --spectrum-button-m-primary-outline-white-texticon-border-color-hover, - var(--spectrum-global-color-static-white) - ); - box-shadow: none; - color: var( - --spectrum-button-m-primary-outline-white-texticon-text-color-hover, - var(--spectrum-global-color-static-white) - ); +:host([variant='overBackground']).focus-visible { + outline: none; } -:host([variant='overBackground'].focus-visible):after { - box-shadow: 0 0 0 - var( - --spectrum-alias-focus-ring-size, - var(--spectrum-global-dimension-static-size-25) - ) - var( - --spectrum-button-m-primary-outline-white-texticon-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); +:host([variant='overBackground']):focus-visible { + outline: none; } -:host([variant='overBackground']:focus-visible):after { - box-shadow: 0 0 0 - var( - --spectrum-alias-focus-ring-size, - var(--spectrum-global-dimension-static-size-25) - ) - var( - --spectrum-button-m-primary-outline-white-texticon-border-color-key-focus, - var(--spectrum-global-color-static-white) - ); +@media (forced-colors: active) { + :host:not(:disabled) { + --highcontrast-clear-button-icon-color-hover: Highlight; + } } -:host([variant='overBackground'][active]) { - background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-down, - var(--spectrum-global-color-static-transparent-white-400) +:host { + --spectrum-clear-button-background-color: var( + --system-spectrum-clearbutton-spectrum-clear-button-background-color ); - border-color: var( - --spectrum-button-m-primary-outline-white-texticon-border-color-down, - var(--spectrum-global-color-static-white) + --spectrum-clear-button-background-color-hover: var( + --system-spectrum-clearbutton-spectrum-clear-button-background-color-hover ); - color: var( - --spectrum-button-m-primary-outline-white-texticon-text-color-down, - var(--spectrum-global-color-static-white) + --spectrum-clear-button-background-color-down: var( + --system-spectrum-clearbutton-spectrum-clear-button-background-color-down ); -} -:host([variant='overBackground'][disabled]) { - background-color: var( - --spectrum-button-m-primary-outline-white-texticon-background-color-disabled, - var(--spectrum-alias-background-color-transparent) + --spectrum-clear-button-background-color-key-focus: var( + --system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus ); - border-color: var( - --spectrum-button-m-primary-outline-white-texticon-border-color-disabled, - var(--spectrum-global-color-static-transparent-white-200) - ); - color: var( - --spectrum-button-m-primary-outline-white-texticon-text-color-disabled, - var(--spectrum-global-color-static-transparent-white-500) - ); -} -@media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) { - .icon { - margin: 0; - } -} -@media (forced-colors: active) { - :host { - --spectrum-alias-icon-color-overbackground: ButtonText; - --spectrum-alias-icon-color-overbackground-disabled: GrayText; - --spectrum-button-m-primary-outline-white-texticon-background-color: ButtonFace; - --spectrum-button-m-primary-outline-white-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-outline-white-texticon-background-color-down: ButtonFace; - --spectrum-button-m-primary-outline-white-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-primary-outline-white-texticon-border-color: ButtonText; - --spectrum-button-m-primary-outline-white-texticon-border-color-disabled: GrayText; - --spectrum-button-m-primary-outline-white-texticon-border-color-down: ButtonText; - --spectrum-button-m-primary-outline-white-texticon-border-color-hover: ButtonText; - --spectrum-button-m-primary-outline-white-texticon-border-color-key-focus: ButtonText; - --spectrum-button-m-primary-outline-white-texticon-text-color: ButtonText; - --spectrum-button-m-primary-outline-white-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-outline-white-texticon-text-color-down: Highlight; - --spectrum-button-m-primary-outline-white-texticon-text-color-hover: Highlight; - --spectrum-clearbutton-fill-background-color: ButtonFace; - --spectrum-clearbutton-fill-background-color-disabled: ButtonFace; - --spectrum-clearbutton-fill-background-color-down: ButtonFace; - --spectrum-clearbutton-fill-background-color-hover: ButtonFace; - --spectrum-clearbutton-fill-background-color-key-focus: ButtonFace; - --spectrum-clearbutton-fill-uiicon-color: ButtonText; - --spectrum-clearbutton-fill-uiicon-color-disabled: GrayText; - --spectrum-clearbutton-fill-uiicon-color-down: Highlight; - --spectrum-clearbutton-fill-uiicon-color-key-focus: Highlight; - --spectrum-clearbutton-m-fill-uiicon-color: ButtonText; - } - :host(:hover) { - color: var(--spectrum-clearbutton-fill-uiicon-color-key-focus); - } - :host([disabled]) { - color: var(--spectrum-clearbutton-fill-uiicon-color-disabled); - } } diff --git a/yarn.lock b/yarn.lock index b8b3baf081..a69aad81e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5363,10 +5363,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-7.0.6.tgz#241285c0157603409d0a3e263ddd5e880b46fc3b" integrity sha512-2GXJRa2TmtpHQqsdATpdXT+QXgNx6OxS6egaqKjxhCErP9movUE0hj0NQVi0uWD3f3t8Tv+lBPCksHI20zANaQ== -"@spectrum-css/clearbutton@^1.2.38": - version "1.2.38" - resolved "https://registry.yarnpkg.com/@spectrum-css/clearbutton/-/clearbutton-1.2.38.tgz#22979649c16300256beda41da2697169cb941c46" - integrity sha512-FRs5iMImltVCqndh9uYPWu4lk9hPz3COZ6rOTRBpinlYkEXLRO12AB+Ba/JChjz7KcsGz8hTLG+Il5TlYwH8AQ== +"@spectrum-css/clearbutton@^5.0.4": + version "5.0.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/clearbutton/-/clearbutton-5.0.4.tgz#b2bbb484b42f1d1db0869bada8f8b349d3f92702" + integrity sha512-ISVt21z5x8ezMIrXjduCqCmxEpip5EnJHq2AwyRwFNRfX8ZMRr72D2Vy5N6m0UfILhzbSE8+GQdgrnU1LiOEoA== "@spectrum-css/closebutton@^3.1.14": version "3.1.14"