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); background-color: var(--Component-Button-Brand-Primary-Fill-Default);
border-color: var(--Component-Button-Brand-Primary-Border-Default); border-color: var(--Component-Button-Brand-Primary-Border-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Default); color: var(--Component-Button-Brand-Primary-On-fill-Default);
}
.variant-primary:hover { @media (hover: hover) {
background-color: var(--Component-Button-Brand-Primary-Fill-Hover); &:not(:disabled):hover {
border-color: var(--Component-Button-Brand-Primary-Border-Hover); background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
color: var(--Component-Button-Brand-Primary-On-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); background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Primary-Border-Disabled); border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled); color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
} }
.variant-primary.color-inverted { .variant-primary.color-inverted {
background-color: var(--Component-Button-Inverted-Fill-Default); background-color: var(--Component-Button-Inverted-Fill-Default);
border-color: var(--Component-Button-Inverted-Border-Default); border-color: var(--Component-Button-Inverted-Border-Default);
color: var(--Component-Button-Inverted-On-fill-Default); color: var(--Component-Button-Inverted-On-fill-Default);
}
.variant-primary.color-inverted:hover { @media (hover: hover) {
background-color: var(--Component-Button-Inverted-Fill-Hover); &:not(:disabled):hover {
border-color: var(--Component-Button-Inverted-Border-Hover); background-color: var(--Component-Button-Inverted-Fill-Hover);
color: var(--Component-Button-Inverted-On-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); background-color: var(--Component-Button-Inverted-Fill-Disabled);
border-color: var(--Component-Button-Inverted-Border-Disabled); border-color: var(--Component-Button-Inverted-Border-Disabled);
color: var(--Component-Button-Inverted-On-fill-Disabled); color: var(--Component-Button-Inverted-On-fill-Disabled);
}
} }
.variant-secondary { .variant-secondary {
background-color: var(--Component-Button-Brand-Secondary-Fill-Default); background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Default); border-color: var(--Component-Button-Brand-Secondary-Border-Default);
color: var(--Component-Button-Brand-Secondary-On-fill-Default); color: var(--Component-Button-Brand-Secondary-On-fill-Default);
}
.variant-secondary:hover { @media (hover: hover) {
background-color: var(--Component-Button-Brand-Secondary-Fill-Hover); &:not(:disabled):hover {
border-color: var(--Component-Button-Brand-Secondary-Border-Hover); background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
color: var(--Component-Button-Brand-Secondary-On-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); background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled); border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled); color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
} }
.variant-secondary.color-inverted { .variant-secondary.color-inverted {
background-color: var(--Component-Button-Brand-Secondary-Fill-Default); background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Inverted); border-color: var(--Component-Button-Brand-Secondary-Border-Inverted);
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted); color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-secondary.color-inverted:hover { @media (hover: hover) {
background-color: var(--Component-Button-Brand-Secondary-Fill-Hover); &:not(:disabled):hover {
border-color: var(--Component-Button-Brand-Secondary-Border-Hover-inverted); background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
color: var(--Component-Button-Brand-Secondary-On-fill-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); background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled); border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled); color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
} }
.variant-tertiary { .variant-tertiary {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default); background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
border-color: var(--Component-Button-Brand-Tertiary-Border-Default); border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Default); color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
}
.variant-tertiary:hover { @media (hover: hover) {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover); &:not(:disabled):hover {
border-color: var(--Component-Button-Brand-Tertiary-Border-Hover); background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
color: var(--Component-Button-Brand-Tertiary-On-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); background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled); border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled); color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
}
} }
.variant-inverted { .variant-inverted {
background-color: var(--Component-Button-Inverted-Default); background-color: var(--Component-Button-Inverted-Default);
border-color: transparent; border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Default); color: var(--Component-Button-Inverted-On-fill-Default);
}
.variant-inverted:hover { @media (hover: hover) {
background-color: var(--Component-Button-Inverted-Hover); &:not(:disabled):hover {
border-color: transparent; background-color: var(--Component-Button-Inverted-Hover);
color: var(--Component-Button-Inverted-On-fill-Hover); border-color: transparent;
} color: var(--Component-Button-Inverted-On-fill-Hover);
}
}
.variant-inverted:disabled { &:disabled {
background-color: var(--Component-Button-Inverted-Disabled); background-color: var(--Component-Button-Inverted-Disabled);
border-color: transparent; border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Disabled); color: var(--Component-Button-Inverted-On-fill-Disabled);
}
} }
.variant-text { .variant-text {
@@ -144,16 +158,18 @@
color: var(--Component-Button-Brand-Secondary-On-fill-Default); color: var(--Component-Button-Brand-Secondary-On-fill-Default);
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
}
.variant-text:hover { @media (hover: hover) {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover); &:not(:disabled):hover {
text-decoration: underline; 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); color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
text-decoration: none; text-decoration: none;
}
} }
.variant-text.no-wrapping { .variant-text.no-wrapping {
@@ -163,14 +179,16 @@
.variant-text.color-inverted { .variant-text.color-inverted {
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted); color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-text.color-inverted:hover { @media (hover: hover) {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted); &: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); color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
} }
.spinnerWrapper { .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); background-color: var(--Component-Button-Brand-Primary-Fill-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Default); color: var(--Component-Button-Brand-Primary-On-fill-Default);
&:hover:not(:disabled) { @media (hover: hover) {
background-color: var(--Component-Button-Brand-Primary-Fill-Hover); &:hover:not(:disabled) {
color: var(--Component-Button-Brand-Primary-On-fill-Hover); background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
}
} }
&:disabled { &:disabled {
@@ -31,9 +33,11 @@
background-color: var(--Component-Button-Inverted-Fill-Default); background-color: var(--Component-Button-Inverted-Fill-Default);
color: var(--Component-Button-Inverted-On-fill-Default); color: var(--Component-Button-Inverted-On-fill-Default);
&:hover:not(:disabled) { @media (hover: hover) {
background-color: var(--Component-Button-Inverted-Fill-Hover); &:hover:not(:disabled) {
color: var(--Component-Button-Inverted-On-fill-Hover); background-color: var(--Component-Button-Inverted-Fill-Hover);
color: var(--Component-Button-Inverted-On-fill-Hover);
}
} }
&:disabled { &:disabled {
@@ -44,8 +48,10 @@
&.style-muted { &.style-muted {
color: var(--Component-Button-Muted-On-fill-Inverted); color: var(--Component-Button-Muted-On-fill-Inverted);
&:hover:not(:disabled) { @media (hover: hover) {
color: var(--Component-Button-Muted-On-fill-Inverted); &:hover:not(:disabled) {
color: var(--Component-Button-Muted-On-fill-Inverted);
}
} }
&:disabled { &:disabled {
@@ -58,9 +64,11 @@
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default); background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Default); color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
&:hover:not(:disabled) { @media (hover: hover) {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover); &:hover:not(:disabled) {
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover); background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
}
} }
&:disabled { &:disabled {
@@ -72,8 +80,10 @@
.theme-black { .theme-black {
color: var(--Component-Button-Muted-On-fill-Default); color: var(--Component-Button-Muted-On-fill-Default);
&:hover:not(:disabled) { @media (hover: hover) {
color: var(--Component-Button-Muted-On-fill-Hover-Inverted); &:hover:not(:disabled) {
color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
}
} }
&:disabled { &:disabled {
@@ -92,8 +102,10 @@
.style-muted { .style-muted {
background-color: var(--Component-Button-Muted-Fill-Default); background-color: var(--Component-Button-Muted-Fill-Default);
&:hover:not(:disabled) { @media (hover: hover) {
background-color: var(--Component-Button-Muted-Fill-Hover-inverted); &:hover:not(:disabled) {
background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
}
} }
&:disabled { &:disabled {