From 1d03f7bee0d921548139396bb48c46d7c5a49666 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Fri, 14 Mar 2025 09:29:04 -0400 Subject: [PATCH] [Icon-button] Make `--background-color-hover` work + remaining 3 interaction properties (#801) * [Icon-button] Make `--background-color-hover` work, fixes #800 * [Icon-button] Introduce `--text-color-hover`, `--background-color-active`, `--text-color-active` * Oops --- src/components/icon-button/icon-button.css | 10 +++++++--- src/components/icon-button/icon-button.ts | 5 ++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css index 38ef368f1..cf12fe75b 100644 --- a/src/components/icon-button/icon-button.css +++ b/src/components/icon-button/icon-button.css @@ -1,5 +1,8 @@ :host { --background-color-hover: var(--wa-color-neutral-fill-quiet); + --text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); + --background-color-active: transparent; + --text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); display: inline-block; color: var(--wa-color-text-quiet); @@ -22,12 +25,13 @@ :host(:not([disabled])) .icon-button:hover, :host(:not([disabled])) .icon-button:focus-visible { - background-color: var(--wa-color-neutral-fill-quiet); - color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); + background-color: var(--background-color-hover); + color: var(--text-color-hover); } :host(:not([disabled])) .icon-button:active { - color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); + background-color: var(--background-color-active); + color: var(--text-color-active); } .icon-button:focus { diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index 0a7b62834..64ec7475e 100644 --- a/src/components/icon-button/icon-button.ts +++ b/src/components/icon-button/icon-button.ts @@ -17,7 +17,10 @@ import styles from './icon-button.css'; * @event blur - Emitted when the icon button loses focus. * @event focus - Emitted when the icon button gains focus. * - * @cssproperty --background-color-hover - The color of the button's background on hover. + * @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover. + * @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`. + * @cssproperty --text-color-hover - The color of the button's background on hover. + * @cssproperty --text-color-active - The color of the button's background on `:active`. * * @csspart base - The component's base wrapper. */