Merged in chore/replace-corner-radius-variable-with-new (pull request #1943)

chore: replace old border-radius variables with new tokens

Approved-by: Erik Tiekstra
This commit is contained in:
Christian Andolf
2025-05-05 11:24:48 +00:00
183 changed files with 263 additions and 263 deletions

View File

@@ -1,7 +1,7 @@
.container {
align-items: center;
background-color: var(--UI-Grey-10);
border-radius: var(--Corner-radius-xLarge);
border-radius: var(--Corner-radius-xl);
display: flex;
height: 370px;
justify-content: center;

View File

@@ -4,7 +4,7 @@
padding: var(--Spacing-x2);
background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
}
.contentWrapper {

View File

@@ -9,7 +9,7 @@
.card {
background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-xLarge);
border-radius: var(--Corner-radius-xl);
display: grid;
gap: var(--Spacing-x2);
min-height: 280px;

View File

@@ -1,5 +1,5 @@
.hero {
border-radius: var(--Corner-radius-xLarge);
border-radius: var(--Corner-radius-xl);
display: grid;
gap: var(--Spacing-x2);
grid-template-columns: 1fr;

View File

@@ -1,7 +1,7 @@
.membershipContainer {
align-items: center;
background: var(--Scandic-Brand-Burgundy);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
display: grid;
grid-template-columns: 1fr;
justify-items: center;

View File

@@ -33,7 +33,7 @@
.membershipContainer {
align-items: center;
background: var(--Scandic-Brand-Burgundy);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
display: grid;
grid-template-columns: 1fr;
justify-items: center;

View File

@@ -2,7 +2,7 @@
border: none;
border-collapse: collapse;
background-color: var(--UI-Opacity-White-100);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
color: var(--UI-Grey-100);
}

View File

@@ -7,7 +7,7 @@
}
.levelRequirements {
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
background-color: var(--Scandic-Brand-Pale-Peach);
color: var(--Scandic-Peach-80);
padding: var(--Spacing-x-half) var(--Spacing-x1);

View File

@@ -11,7 +11,7 @@
display: none;
position: relative;
background-color: var(--UI-Opacity-White-100);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
}
.mobileColumns {
@@ -48,7 +48,7 @@
.columnHeader:nth-child(2) {
padding-left: var(--Spacing-x1);
border-top-left-radius: var(--Corner-radius-Medium);
border-top-left-radius: var(--Corner-radius-md);
}
.columnHeader:nth-child(2):has(+ .columnHeader) {
@@ -76,7 +76,7 @@
grid-template-columns: 1fr 1fr 1fr;
}
.columnHeader:nth-child(2) {
border-top-right-radius: var(--Corner-radius-Medium);
border-top-right-radius: var(--Corner-radius-md);
}
.columns {

View File

@@ -1,6 +1,6 @@
.container {
overflow-x: auto;
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
}
.placeholder {
@@ -13,6 +13,6 @@
@media screen and (min-width: 768px) {
.container {
border-radius: var(--Corner-radius-Large);
border-radius: var(--Corner-radius-lg);
}
}

View File

@@ -2,11 +2,11 @@
display: flex;
flex-direction: column;
overflow-x: auto;
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
}
@media screen and (min-width: 768px) {
.container {
border-radius: var(--Corner-radius-Large);
border-radius: var(--Corner-radius-lg);
}
}

View File

@@ -9,7 +9,7 @@
.card {
background-color: var(--UI-Opacity-White-100);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: flex;
flex-direction: column;
justify-content: space-between;

View File

@@ -1,7 +1,7 @@
.card {
align-items: center;
background-color: var(--Scandic-Brand-Burgundy);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);

View File

@@ -36,7 +36,7 @@
.modal {
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
box-shadow: var(--modal-box-shadow);
width: 100%;
max-height: 90vh;
@@ -119,7 +119,7 @@
}
.rewardBadge {
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
background: var(--Base-Surface-Secondary-light-Normal);
display: grid;

View File

@@ -44,7 +44,7 @@
width: 100%;
background-color: var(--Surface-Primary-On-Surface-Default);
border: 1px solid var(--Border-Default);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
box-shadow:
0px 0px 4px 2px rgba(0, 0, 0, 0.1),
0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset;
@@ -78,7 +78,7 @@
width: 100%;
justify-content: space-between;
border: 1px solid var(--Border-Divider-Accent);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
padding: var(--Spacing-x2);
background:
linear-gradient(

View File

@@ -13,7 +13,7 @@
gap: var(--Spacing-x3);
padding: var(--Spacing-x3) var(--Spacing-x9);
background-color: var(--Background-Secondary);
border-radius: var(--Corner-radius-Large);
border-radius: var(--Corner-radius-lg);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
margin-top: var(--Spacing-x9);
}
@@ -100,7 +100,7 @@
display: block;
position: absolute;
background-color: var(--Border-Divider-Accent);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
opacity: 0.3;
transition: background-color 300ms ease;
}
@@ -112,7 +112,7 @@
position: relative;
top: 50%;
transform: translateY(-50%);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
}
.sliderOutput {
@@ -123,7 +123,7 @@
background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
color: var(--Text-Brand-OnPrimary-2-Accent);
padding: var(--Spacing-x-half) var(--Spacing-x1);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
opacity: 0;
transition:
opacity 0.15s,
@@ -226,7 +226,7 @@
}
.pointsOutput {
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
background-color: var(--Surface-Primary-Disabled);
height: 100%;
color: var(--Text-Tertiary);

View File

@@ -4,7 +4,7 @@
justify-content: center;
align-items: center;
background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
margin-bottom: var(--Spacing-x-half);
height: 200px;
}

View File

@@ -2,7 +2,7 @@
display: grid;
grid-template-rows: 1fr min(50px);
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
min-height: 250px;
margin-bottom: var(--Spacing-x-half);
overflow: hidden;

View File

@@ -1,6 +1,6 @@
.link {
outline: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
overflow: hidden;
position: relative;

View File

@@ -2,7 +2,7 @@
display: grid;
grid-template-rows: 1fr min(50px);
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
min-height: 250px;
margin-bottom: var(--Spacing-x-half);
overflow: hidden;

View File

@@ -1,7 +1,7 @@
.container {
background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
overflow: hidden;
}

View File

@@ -1,5 +1,5 @@
.container {
border-radius: var(--Corner-radius-Large);
border-radius: var(--Corner-radius-lg);
background-color: var(--Main-Brand-WarmWhite);
padding: 0 var(--Spacing-x2);
display: flex;

View File

@@ -1,6 +1,6 @@
.list {
height: fit-content;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
overflow: hidden;
list-style: none;
}

View File

@@ -1,6 +1,6 @@
@media screen and (max-width: 1366px) {
.section {
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
overflow: hidden;
}
.column {

View File

@@ -1,6 +1,6 @@
.tableWrapper {
display: grid;
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
overflow: hidden;
}