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

feat(BOOK-113): Synced hover/focus states for buttons and added better examples to storybook

Browse Source 
* fix(BOOK-113): Updated hover colors after blend/mix has been removed

Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-12-03 10:45:34 +00:00
parent 60f4b8d878
commit 6730575f7a
24 changed files with 1143 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,21 @@
.iconButton {
position: relative;
border-radius: var(--Corner-radius-rounded);
border-width: 0;
cursor: pointer;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
&:disabled {
&[data-disabled] {
cursor: unset;
}
&:focus-visible {
outline: 2px solid var(--Border-Interactive-Focus);
outline-offset: 2px;
}
}
.theme-primary {
@@ -17,13 +23,30 @@
color: var(--Component-Button-Brand-Primary-On-fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
&:hover:not([data-disabled]) {
background:
linear-gradient(
0deg,
var(--Component-Button-Brand-Primary-Fill-Hover) 0%,
var(--Component-Button-Brand-Primary-Fill-Hover) 100%
),
var(--Component-Button-Brand-Primary-Fill-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
}
}
&:disabled {
/* This theme is able to be on top of dark background colors,
so we need to create an illusion that it also has an inverted border on focus */
&:focus-visible::after {
content: '';
position: absolute;
inset: -2px;
border: 2px solid var(--Border-Inverted);
border-radius: inherit;
pointer-events: none;
}
&[data-disabled] {
background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
@@ -34,27 +57,37 @@
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);
&:hover:not([data-disabled]) {
background:
linear-gradient(
0deg,
var(--Component-Button-Inverted-Fill-Hover) 0%,
var(--Component-Button-Inverted-Fill-Hover) 100%
),
var(--Component-Button-Inverted-Fill-Default);
}
}
&:disabled {
&[data-disabled] {
background-color: var(--Component-Button-Inverted-Fill-Disabled);
color: var(--Component-Button-Inverted-On-fill-Disabled);
}
&.style-muted {
background-color: var(--Component-Button-Muted-Fill-Default);
color: var(--Component-Button-Muted-On-fill-Inverted);
@media (hover: hover) {
&:hover:not(:disabled) {
color: var(--Component-Button-Muted-On-fill-Inverted);
background-color: var(--Component-Button-Muted-Fill-Hover);
}
}
&:disabled {
&:focus-visible {
outline-color: var(--Border-Inverted);
}
&[data-disabled] {
color: var(--Component-Button-Muted-On-fill-Disabled);
}
}
@@ -65,13 +98,19 @@
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
&:hover:not([data-disabled]) {
background:
linear-gradient(
0deg,
var(--Component-Button-Brand-Tertiary-Fill-Hover) 0%,
var(--Component-Button-Brand-Tertiary-Fill-Hover) 100%
),
var(--Component-Button-Brand-Tertiary-Fill-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
}
}
&:disabled {
&[data-disabled] {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
}
@@ -81,12 +120,12 @@
color: var(--Component-Button-Muted-On-fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
&:hover:not([data-disabled]) {
color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
}
}
&:disabled {
&[data-disabled] {
color: var(--Component-Button-Muted-On-fill-Disabled);
}
}
@@ -103,12 +142,12 @@
background-color: var(--Component-Button-Muted-Fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
&:hover:not([data-disabled]) {
background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
}
}
&:disabled {
&[data-disabled] {
background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);
}
}