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

44
packages/design-system/lib/components/HotelCard/hotelCard.module.css
View File

@@ -87,19 +87,13 @@
width: 100%;
}
.link:hover {
.fakeButton {
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);
}
.link {
text-decoration: none;
color: inherit;
.priceCard {
background: linear-gradient(
0deg,
var(--Surface-Primary-Hover) 0%,
var(--Surface-Primary-Hover) 100%
);
&:focus-visible {
outline: 2px solid var(--Border-Interactive-Focus);
outline-offset: 2px;
}
}
@@ -113,28 +107,6 @@
border-radius: var(--Corner-radius-md);
}
.fakeButton {
min-width: 160px;
border-radius: var(--Corner-radius-rounded);
border-width: 2px;
border-style: solid;
display: flex;
align-items: center;
justify-content: center;
gap: var(--Space-x05);
padding: 10px var(--Space-x2);
background-color: var(--Component-Button-Brand-Primary-Fill-Default);
border-color: var(--Component-Button-Brand-Primary-Border-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Default);
}
.fakeButton.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);
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.imageContainer {
height: 180px;
@@ -178,10 +150,6 @@
margin-bottom: var(--Space-x15);
}
.pageListing .fakeButton {
width: 100%;
}
.pageListing .prices {
width: 260px;
}