js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Icon-button] Make --background-color-hover work + remaining 3 interaction properties (#801)

Browse Source 
* [Icon-button] Make `--background-color-hover` work, fixes #800

* [Icon-button] Introduce `--text-color-hover`, `--background-color-active`, `--text-color-active`

* Oops
This commit is contained in:
Lea Verou
2025-03-14 09:29:04 -04:00
committed by GitHub
parent a9bf1bd838
commit 1d03f7bee0
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/icon-button/icon-button.css
View File

@@ -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 {

5
src/components/icon-button/icon-button.ts
View File

@@ -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.
*/