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

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

@@ -1,28 +1,33 @@
.button {
position: relative;
border-radius: var(--Corner-radius-rounded);
border-width: 2px;
border-style: solid;
cursor: pointer;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--Space-x05);
&:disabled,
&[data-disabled] {
cursor: unset;
}
&[data-pending] {
cursor: progress;
gap: var(--Space-x1);
}
&:focus-visible {
outline: 2px auto -webkit-focus-ring-color;
outline-offset: 4px;
outline: 2px solid var(--Border-Interactive-Focus);
outline-offset: 2px;
}
}
.color-inverted:focus-visible {
outline-color: var(--Border-Inverted);
}
.size-large {
padding: var(--Space-x2) var(--Space-x3);
}
@@ -41,14 +46,32 @@
color: var(--Component-Button-Brand-Primary-On-fill-Default);
@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);
&:not([data-disabled]) {
&:hover,
&.hovered {
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);
}
}
}
&:disabled {
/* This variant 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 */
&:not(.color-inverted):focus-visible::before {
content: '';
position: absolute;
inset: -4px;
border: 2px solid var(--Border-Inverted);
border-radius: inherit;
pointer-events: none;
}
&[data-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);
@@ -61,14 +84,21 @@
color: var(--Component-Button-Inverted-On-fill-Default);
@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);
&:not([data-disabled]) {
&:hover,
&.hovered {
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);
border-color: var(--Component-Button-Inverted-Border-Disabled);
color: var(--Component-Button-Inverted-On-fill-Disabled);
@@ -81,15 +111,17 @@
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
@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);
&:not([data-disabled]) {
&:hover,
&.hovered {
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);
}
}
}
&:disabled {
background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
&[data-disabled] {
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
@@ -101,16 +133,19 @@
color: var(--Component-Button-Brand-Secondary-On-fill-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);
&:not([data-disabled]) {
&:hover,
&.hovered {
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);
}
}
}
&:disabled {
&[data-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);
@@ -123,14 +158,23 @@
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
@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);
&:not([data-disabled]) {
&:hover,
&.hovered {
background:
linear-gradient(
0deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.1) 100%
),
var(--Component-Button-Brand-Tertiary-Fill-Default);
border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
}
}
}
&:disabled {
&[data-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);
@@ -143,14 +187,17 @@
color: var(--Component-Button-Inverted-On-fill-Default);
@media (hover: hover) {
&:not(:disabled):hover {
background-color: var(--Component-Button-Inverted-Hover);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Hover);
&:not([data-disabled]) {
&:hover,
&.hovered {
background-color: var(--Component-Button-Inverted-Hover);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Hover);
}
}
}
&:disabled {
&[data-disabled] {
background-color: var(--Component-Button-Inverted-Disabled);
border-color: transparent;
color: var(--Component-Button-Inverted-On-fill-Disabled);
@@ -165,13 +212,15 @@
padding-right: 0;
@media (hover: hover) {
&:not(:disabled):hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
text-decoration: underline;
&:not([data-disabled]) {
&:hover,
&.hovered {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
text-decoration: underline;
}
}
}
&:disabled {
&[data-disabled] {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
text-decoration: none;
}
@@ -180,19 +229,21 @@
.variant-text.no-wrapping {
padding: var(--Space-x025) 0;
border-width: 0;
border-radius: 0;
}
.variant-text.color-inverted {
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
@media (hover: hover) {
&:not(:disabled):hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
&:not([data-disabled]) {
&:hover,
&.hovered {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
}
}
&:disabled {
&[data-disabled] {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
}