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

51
packages/design-system/lib/components/BackToTopButton/backToTopButton.module.css
View File

@@ -1,24 +1,43 @@
.backToTopButton {
display: inline-flex;
padding: var(--Space-x1);
justify-content: center;
align-items: center;
gap: var(--Space-x05);
width: max-content;
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
background-color: var(--Component-Button-Brand-Secondary-Fill-Inverted);
border: 2px solid var(--Component-Button-Brand-Secondary-Border-Default);
border-radius: var(--Corner-radius-Rounded);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
border-radius: var(--Corner-radius-rounded);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--Space-x05);
padding: var(--Space-x1);
width: max-content;
background-color: var(--Component-Button-Brand-Secondary-Fill-Inverted);
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
border: 2px solid var(--Component-Button-Brand-Secondary-Border-Default);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
position: sticky;
bottom: var(--Space-x2);
&:hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
background-color: var(
--Component-Button-Brand-Secondary-Fill-Hover-Inverted
);
@media (hover: hover) {
&:hover {
background-color: var(
--Component-Button-Brand-Secondary-Fill-Hover-Inverted
);
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
}
&:focus-visible {
outline: 2px solid var(--Border-Interactive-Focus);
outline-offset: 2px;
/* This button 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 */
&::before {
content: '';
position: absolute;
inset: -4px;
border: 2px solid var(--Border-Inverted);
border-radius: inherit;
pointer-events: none;
}
}
}