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

Feat/BOOK-293 button adjustments

Browse Source 
* feat(BOOK-293): Adjusted padding of the buttons to match Figma design
* feat(BOOK-293): Updated variants for IconButton
* feat(BOOK-113): Updated focus indicators on buttons and added default focus ring color
* feat(BOOK-293): Replaced buttons inside booking widget

Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-12-15 07:05:31 +00:00
parent c153e0db50
commit 4ec1e85d84
59 changed files with 741 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,14 @@
.iconButton {
position: relative;
border-radius: var(--Corner-radius-rounded);
border-width: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
display: flex;
padding: 0;
justify-content: center;
padding: 10px;
align-items: center;
flex-shrink: 0;
border-width: 0;
background-color: transparent;
cursor: pointer;
border-radius: var(--Corner-radius-rounded);
&[data-disabled] {
cursor: unset;
@@ -15,13 +17,47 @@
&:focus-visible {
outline: 2px solid var(--Border-Interactive-Focus);
outline-offset: 2px;
&::before {
content: '';
position: absolute;
inset: -2px;
border: 2px solid var(--Border-Inverted);
border-radius: inherit;
pointer-events: none;
}
}
}
.theme-primary {
.size-sm {
width: 24px;
height: 24px;
}
.size-md {
width: 32px;
height: 32px;
}
.size-lg {
width: 40px;
height: 40px;
}
.size-xl {
width: 48px;
height: 48px;
}
.variant-filled {
background-color: var(--Component-Button-Brand-Primary-Fill-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Default);
&[data-disabled] {
background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
@media (hover: hover) {
&:hover:not([data-disabled]) {
background:
@@ -35,26 +71,46 @@
}
}
/* 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;
}
&.emphasis {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
&[data-disabled] {
background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
&[data-disabled] {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
}
@media (hover: 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);
}
}
}
}
.theme-inverted {
.variant-outlined {
border: 1px solid var(--Border-Default);
background-color: var(--Component-Button-Inverted-Fill-Default);
color: var(--Component-Button-Inverted-On-fill-Default);
color: var(--Icon-Interactive-Default);
&[data-disabled] {
border-color: var(--Border-Interactive-Disabled);
background:
linear-gradient(
0deg,
var(--Component-Button-Inverted-Fill-Disabled) 0%,
var(--Component-Button-Inverted-Fill-Disabled) 100%
),
var(--Component-Button-Inverted-Fill-Faded);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
@media (hover: hover) {
&:hover:not([data-disabled]) {
@@ -68,90 +124,125 @@
}
}
&[data-disabled] {
background-color: var(--Component-Button-Inverted-Fill-Disabled);
color: var(--Component-Button-Inverted-On-fill-Disabled);
}
&:focus-visible {
outline-offset: 0;
&.style-muted {
background-color: var(--Component-Button-Muted-Fill-Default);
color: var(--Component-Button-Muted-On-fill-Inverted);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Muted-Fill-Hover);
}
}
&:focus-visible {
outline-color: var(--Border-Inverted);
}
&[data-disabled] {
color: var(--Component-Button-Muted-On-fill-Disabled);
&::before {
inset: -5px;
}
}
}
.theme-tertiary {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
.variant-elevated {
background-color: var(--Component-Button-Inverted-Fill-Default);
color: var(--Icon-Interactive-Default);
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
&[data-disabled] {
background:
linear-gradient(
0deg,
var(--Component-Button-Inverted-Fill-Disabled) 0%,
var(--Component-Button-Inverted-Fill-Disabled) 100%
),
var(--Component-Button-Inverted-Fill-Faded);
box-shadow: none;
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
@media (hover: 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-Inverted-Fill-Hover) 0%,
var(--Component-Button-Inverted-Fill-Hover) 100%
),
var(--Component-Button-Brand-Tertiary-Fill-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
var(--Component-Button-Inverted-Fill-Default);
}
}
&[data-disabled] {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
}
}
&:focus-visible {
outline-offset: 0;
.theme-black {
color: var(--Component-Button-Muted-On-fill-Default);
@media (hover: hover) {
&:hover:not([data-disabled]) {
color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
&::before {
inset: -4px;
}
}
&[data-disabled] {
color: var(--Component-Button-Muted-On-fill-Disabled);
}
}
.style-elevated {
box-shadow: 0px 0px 8px 1px #0000001a;
}
.style-faded {
.variant-faded {
background-color: var(--Component-Button-Inverted-Fill-Faded);
}
color: var(--Icon-Interactive-Default);
.style-muted {
background-color: var(--Component-Button-Muted-Fill-Default);
&[data-disabled] {
background:
linear-gradient(
0deg,
var(--Component-Button-Inverted-Fill-Disabled) 0%,
var(--Component-Button-Inverted-Fill-Disabled) 100%
),
var(--Component-Button-Inverted-Fill-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
@media (hover: hover) {
&:hover:not([data-disabled]) {
background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
background:
linear-gradient(
0deg,
var(--Component-Button-Inverted-Fill-Hover) 0%,
var(--Component-Button-Inverted-Fill-Hover) 100%
),
var(--Component-Button-Inverted-Fill-Default);
}
}
&[data-disabled] {
background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);
&:focus-visible {
outline-offset: 0;
&::before {
inset: -4px;
}
}
}
.no-wrapping {
padding: 0;
.variant-muted {
background-color: var(--Component-Button-Muted-Fill-Default);
color: var(--Icon-Inverted);
&[data-disabled] {
background-color: var(--Component-Button-Muted-Fill-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
@media (hover: hover) {
&:hover:not([data-disabled]) {
background-color: var(--Component-Button-Muted-Fill-Hover);
}
}
&:focus-visible {
outline-offset: 0;
&::before {
inset: -4px;
}
}
&.emphasis {
color: var(--Component-Button-Muted-On-fill-Default);
&[data-disabled] {
background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);
color: var(--Component-Button-Muted-On-fill-Disabled);
}
@media (hover: hover) {
&:hover:not([data-disabled]) {
background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
}
}
}
}