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

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

@@ -34,108 +34,122 @@
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 {
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);
}
@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 {
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);
&: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 {
background-color: var(--Component-Button-Inverted-Fill-Hover);
border-color: var(--Component-Button-Inverted-Border-Hover);
color: var(--Component-Button-Inverted-On-fill-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 {
background-color: var(--Component-Button-Inverted-Fill-Disabled);
border-color: var(--Component-Button-Inverted-Border-Disabled);
color: var(--Component-Button-Inverted-On-fill-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 {
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);
}
@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 {
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);
&: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 {
background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
border-color: var(--Component-Button-Brand-Secondary-Border-Hover-inverted);
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
@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
);
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
}
.variant-secondary.color-inverted: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);
&: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 {
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);
}
@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 {
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);
&: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 {
background-color: var(--Component-Button-Inverted-Hover);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-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 {
background-color: var(--Component-Button-Inverted-Disabled);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Disabled);
&:disabled {
background-color: var(--Component-Button-Inverted-Disabled);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Disabled);
}
}
.variant-text {
@@ -144,16 +158,18 @@
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
padding-left: 0;
padding-right: 0;
}
.variant-text:hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
text-decoration: underline;
}
@media (hover: hover) {
&:not(:disabled):hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
text-decoration: underline;
}
}
.variant-text:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
text-decoration: none;
&:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
text-decoration: none;
}
}
.variant-text.no-wrapping {
@@ -163,14 +179,16 @@
.variant-text.color-inverted {
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-text.color-inverted:hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
@media (hover: hover) {
&:not(:disabled):hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
}
.variant-text.color-inverted:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
&:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
}
.spinnerWrapper {

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 {