chore: replace old border-radius variables with new tokens

This commit is contained in:
Christian Andolf
2025-05-05 11:11:00 +02:00
parent aa43d7d059
commit d6b70edfa3
183 changed files with 263 additions and 263 deletions
@@ -34,7 +34,7 @@
.accordionItem.card .summary {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
}
.accordionItem.sidepeek .summary {
@@ -3,7 +3,7 @@
}
.accordion.card {
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
}
.accordion.light {
@@ -40,7 +40,7 @@
/* Intent: inline */
.inline {
border-radius: var(--Corner-radius-Large);
border-radius: var(--Corner-radius-lg);
border: 1px solid var(--Base-Border-Subtle);
background-color: var(--Base-Surface-Primary-light-Normal);
}
@@ -7,7 +7,7 @@
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
overflow: hidden;
}
@@ -1,5 +1,5 @@
.backToTopButton {
border-radius: var(--Corner-radius-Rounded);
border-radius: var(--Corner-radius-rounded);
cursor: pointer;
display: flex;
align-items: flex-end;
@@ -79,7 +79,7 @@
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
min-width: 169px;
outline: none;
box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
@@ -87,7 +87,7 @@
.dialogLink {
display: block;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1);
color: var(--Text-Default);
}
@@ -1,6 +1,6 @@
.btn {
background: none;
border-radius: var(--Corner-radius-Rounded);
border-radius: var(--Corner-radius-rounded);
cursor: pointer;
margin: 0;
padding: 0;
@@ -3,7 +3,7 @@
overflow: hidden;
width: 100%;
min-height: 180px; /* Fixed height from Figma */
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
}
.imageContainer {
@@ -4,7 +4,7 @@
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
margin-right: var(--Spacing-x2);
text-align: center;
width: 100%;
@@ -4,7 +4,7 @@ div.chip {
align-items: center;
color: var(--chip-text-color);
background-color: var(--chip-background-color);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
display: flex;
gap: var(--Spacing-x-half);
justify-content: center;
@@ -4,7 +4,7 @@
gap: var(--Spacing-x-half);
padding: calc(var(--Spacing-x1) - 2px) var(--Spacing-x-one-and-half);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
background-color: var(--Base-Surface-Secondary-light-Normal);
cursor: pointer;
height: 32px;
@@ -4,7 +4,7 @@
border-color: var(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: grid;
min-width: 0; /* allow shrinkage */
height: 60px;
@@ -4,7 +4,7 @@
border-color: var(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: grid;
height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2);
@@ -36,7 +36,7 @@
.phone :global(.react-international-phone-country-selector-dropdown) {
background: var(--Main-Grey-White);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
gap: var(--Spacing-x1);
outline: none;
@@ -45,7 +45,7 @@
.phone
:global(.react-international-phone-country-selector-dropdown__list-item) {
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
var(--Spacing-x-one-and-half);
}
@@ -61,7 +61,7 @@
border-color: var(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: grid;
gap: var(--Spacing-x-half);
grid-template-rows: auto auto;
@@ -46,7 +46,7 @@
width: 32px;
height: 32px;
border: 2px solid var(--Base-Border-Inverted);
border-radius: var(--Corner-radius-Rounded);
border-radius: var(--Corner-radius-rounded);
background-color: var(--Surface-Feedback-Succes-Accent);
}
@@ -17,7 +17,7 @@
border-color: var(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: grid;
min-width: 0; /* allow shrinkage */
grid-template-rows: auto 1fr;
@@ -3,7 +3,7 @@
align-items: center;
gap: var(--Spacing-x1);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
}
.blue {
@@ -53,7 +53,7 @@
line-height: var(--typography-Body-Regular-lineHeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
padding: var(--Spacing-x1);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Spacing-x1);
justify-content: space-between;
@@ -62,7 +62,7 @@
.myPageMobileDropdown:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
}
.shortcut {
@@ -90,7 +90,7 @@
.sidebar {
align-items: center;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Spacing-x1);
padding: var(--Spacing-x1);
@@ -261,7 +261,7 @@
padding: var(--Spacing-x1);
gap: var(--Spacing-x-one-and-half);
color: var(--Base-Text-High-contrast);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
}
.menu:hover {
@@ -3,7 +3,7 @@
align-items: center;
gap: var(--Spacing-x-half);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
background-color: var(--Base-Button-Inverted-Fill-Normal);
transition: background-color 0.3s;
text-decoration: none;
@@ -1,7 +1,7 @@
.container {
align-items: center;
display: grid;
border-radius: var(--Corner-radius-xLarge);
border-radius: var(--Corner-radius-xl);
gap: var(--Spacing-x2);
min-height: 480px;
justify-content: space-between;
@@ -1,6 +1,6 @@
.card {
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
border: 1px solid var(--Base-Border-Subtle);
display: flex;
flex-direction: column;
@@ -26,7 +26,7 @@
.openedInfo {
background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x2);
display: grid;
gap: var(--Spacing-x2);
@@ -1,6 +1,6 @@
.root {
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
box-shadow: var(--popup-box-shadow);
padding: var(--Spacing-x2);
max-width: calc(360px + var(--Spacing-x2) * 2);
@@ -4,7 +4,7 @@
.select {
border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
@@ -49,7 +49,7 @@
align-items: center;
background-color: var(--UI-Opacity-White-100);
border: none;
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
color: var(--UI-Text-High-contrast);
display: flex;
gap: var(--Spacing-x-half);
@@ -77,7 +77,7 @@
.popover {
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
display: inline-flex;
flex-direction: column;
@@ -100,7 +100,7 @@
.listBoxItem[data-focused="true"],
.listBoxItem[data-selected="true"] {
background: var(--UI-Input-Controls-Surface-Hover);
border-radius: var(--Corner-radius-Medium,);
border-radius: var(--Corner-radius-md);
outline: none;
}
@@ -31,13 +31,13 @@
}
.smallRadius {
border-radius: var(--Corner-radius-Small);
border-radius: var(--Corner-radius-sm);
}
.mediumRadius {
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
}
.largeRadius {
border-radius: var(--Corner-radius-Large);
border-radius: var(--Corner-radius-lg);
}
.content .thead {
@@ -1,5 +1,5 @@
.card {
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
display: flex;
flex-direction: column;
overflow: hidden;
@@ -1,7 +1,7 @@
.toast {
display: grid;
grid-template-columns: auto 1fr auto;
border-radius: var(--Corner-radius-Large);
border-radius: var(--Corner-radius-lg);
overflow: hidden;
background: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
@@ -7,7 +7,7 @@
padding: var(--Spacing-x1);
background-color: var(--UI-Text-Active);
border: 0.5px solid var(--UI-Border-Active);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-md);
color: var(--Base-Text-Inverted);
position: absolute;
visibility: hidden;