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

feat(SW-2178): Changed to new buttons for summary inside enter details

Browse Source 
Approved-by: Michael Zetterberg
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-04-11 15:13:37 +00:00
parent 8961cbd9d5
commit f62723c6e5
15 changed files with 363 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,10 @@
display: flex;
align-items: center;
justify-content: center;
&:disabled {
cursor: unset;
}
}
.size-large {
@@ -38,6 +42,24 @@
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
.variant-primary.color-inverted {
background-color: var(--Component-Button-Inverted-Fill-Default);
border-color: var(--Component-Button-Inverted-Border-Default);
color: var(--Component-Button-Inverted-On-fill-Default);
}
.variant-primary.color-inverted: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);
}
.variant-primary.color-inverted: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);
}
.variant-secondary {
background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Default);
@@ -56,6 +78,24 @@
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
.variant-secondary.color-inverted {
background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Inverted);
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-secondary.color-inverted: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);
}
.variant-secondary.color-inverted: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);
}
.variant-tertiary {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
@@ -95,9 +135,36 @@
.variant-text {
background-color: transparent;
border-color: transparent;
/* TODO: Missing text variant tokens for button */
color: var(--Scandic-Red-100);
padding: var(--Space-x15) 0;
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
padding-left: 0;
padding-right: 0;
}
.variant-text:hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
text-decoration: underline;
}
.variant-text:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
text-decoration: none;
}
.variant-text.no-wrapping {
padding: var(--Space-x025) 0;
border-width: 0;
}
.variant-text.color-inverted {
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
}
.variant-text.color-inverted:hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
}
.variant-text.color-inverted:disabled {
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
.variant-icon {
@@ -107,7 +174,3 @@
padding: 0;
margin: 0;
}
.color-icon-default {
color: var(--Icon-Default);
}