scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(BOOK-471): Only setting hover state on devices supporting hover inside Button and IconButton components

Browse Source 
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2025-11-06 14:33:55 +00:00
parent 07ef6d96d6
commit 78ac3b29c3
2 changed files with 119 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/design-system/lib/components/IconButton/iconButton.module.css
View File

@@ -16,9 +16,11 @@
background-color: var(--Component-Button-Brand-Primary-Fill-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Default);
&:hover:not(:disabled) {
background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
}
}
&:disabled {
@@ -31,9 +33,11 @@
background-color: var(--Component-Button-Inverted-Fill-Default);
color: var(--Component-Button-Inverted-On-fill-Default);
&:hover:not(:disabled) {
background-color: var(--Component-Button-Inverted-Fill-Hover);
color: var(--Component-Button-Inverted-On-fill-Hover);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Inverted-Fill-Hover);
color: var(--Component-Button-Inverted-On-fill-Hover);
}
}
&:disabled {
@@ -44,8 +48,10 @@
&.style-muted {
color: var(--Component-Button-Muted-On-fill-Inverted);
&:hover:not(:disabled) {
color: var(--Component-Button-Muted-On-fill-Inverted);
@media (hover: hover) {
&:hover:not(:disabled) {
color: var(--Component-Button-Muted-On-fill-Inverted);
}
}
&:disabled {
@@ -58,9 +64,11 @@
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
&:hover:not(:disabled) {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
}
}
&:disabled {
@@ -72,8 +80,10 @@
.theme-black {
color: var(--Component-Button-Muted-On-fill-Default);
&:hover:not(:disabled) {
color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
@media (hover: hover) {
&:hover:not(:disabled) {
color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
}
}
&:disabled {
@@ -92,8 +102,10 @@
.style-muted {
background-color: var(--Component-Button-Muted-Fill-Default);
&:hover:not(:disabled) {
background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
}
}
&:disabled {