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

68
packages/design-system/lib/components/Button/button.module.css
View File

@@ -34,109 +34,123 @@
background-color: var(--Component-Button-Brand-Primary-Fill-Default);
border-color: var(--Component-Button-Brand-Primary-Border-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Default);
}
.variant-primary:hover {
@media (hover: hover) {
&:not(:disabled):hover {
background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
border-color: var(--Component-Button-Brand-Primary-Border-Hover);
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
}
}
.variant-primary:disabled {
&:disabled {
background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
}
.variant-primary.color-inverted {
background-color: var(--Component-Button-Inverted-Fill-Default);
border-color: var(--Component-Button-Inverted-Border-Default);
color: var(--Component-Button-Inverted-On-fill-Default);
}
.variant-primary.color-inverted:hover {
@media (hover: hover) {
&:not(:disabled):hover {
background-color: var(--Component-Button-Inverted-Fill-Hover);
border-color: var(--Component-Button-Inverted-Border-Hover);
color: var(--Component-Button-Inverted-On-fill-Hover);
}
}
.variant-primary.color-inverted:disabled {
&:disabled {
background-color: var(--Component-Button-Inverted-Fill-Disabled);
border-color: var(--Component-Button-Inverted-Border-Disabled);
color: var(--Component-Button-Inverted-On-fill-Disabled);
}
}
.variant-secondary {
background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Default);
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
}
.variant-secondary:hover {
@media (hover: hover) {
&:not(:disabled):hover {
background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
}
}
.variant-secondary:disabled {
&:disabled {
background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
}
.variant-secondary.color-inverted {
background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Inverted);
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-secondary.color-inverted:hover {
@media (hover: hover) {
&:not(:disabled):hover {
background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
border-color: var(--Component-Button-Brand-Secondary-Border-Hover-inverted);
border-color: var(
--Component-Button-Brand-Secondary-Border-Hover-inverted
);
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
}
.variant-secondary.color-inverted:disabled {
&:disabled {
background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
}
.variant-tertiary {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
}
.variant-tertiary:hover {
@media (hover: hover) {
&:not(:disabled):hover {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
}
}
.variant-tertiary:disabled {
&:disabled {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
}
}
.variant-inverted {
background-color: var(--Component-Button-Inverted-Default);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Default);
}
.variant-inverted:hover {
@media (hover: hover) {
&:not(:disabled):hover {
background-color: var(--Component-Button-Inverted-Hover);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Hover);
}
}
.variant-inverted:disabled {
&:disabled {
background-color: var(--Component-Button-Inverted-Disabled);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Disabled);
}
}
.variant-text {
background-color: transparent;
@@ -144,17 +158,19 @@
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
padding-left: 0;
padding-right: 0;
}
.variant-text:hover {
@media (hover: hover) {
&:not(:disabled):hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
text-decoration: underline;
}
}
.variant-text:disabled {
&:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
text-decoration: none;
}
}
.variant-text.no-wrapping {
padding: var(--Space-x025) 0;
@@ -163,15 +179,17 @@
.variant-text.color-inverted {
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-text.color-inverted:hover {
@media (hover: hover) {
&:not(:disabled):hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
}
.variant-text.color-inverted:disabled {
&:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
}
.spinnerWrapper {
display: flex;

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

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