chore: Replaced deprecated Spacing variables with current values

Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-11-12 12:56:22 +00:00
parent 8dce04b931
commit 88644597df
229 changed files with 855 additions and 869 deletions

View File

@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.card {
@@ -10,12 +10,12 @@
width: 100%;
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
padding: var(--Spacing-x3) var(--Spacing-x9);
gap: var(--Space-x3);
padding: var(--Space-x3) var(--Space-x9);
background-color: var(--Background-Secondary);
border-radius: var(--Corner-radius-lg);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
margin-top: var(--Spacing-x9);
margin-top: var(--Space-x9);
}
.highFive {
@@ -37,9 +37,9 @@
.labelWithIcon {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
color: var(--Text-Tertiary);
margin-bottom: var(--Spacing-x-half);
margin-bottom: var(--Space-x05);
}
.transferContainer {
@@ -69,15 +69,15 @@
.balanceLabel {
color: var(--Text-Tertiary);
margin-top: var(--Spacing-x3);
margin-top: var(--Space-x3);
}
.formWrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
width: 100%;
padding: var(--Spacing-x4);
padding: var(--Space-x4);
padding-bottom: 0;
}
@@ -122,7 +122,7 @@
transform: translateX(-50%) translateY(4px);
background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
color: var(--Text-Brand-OnPrimary-2-Accent);
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-sm);
opacity: 0;
transition:
@@ -204,8 +204,8 @@
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--Spacing-x3);
padding-inline: var(--Spacing-x3);
gap: var(--Space-x3);
padding-inline: var(--Space-x3);
}
.expiryText {
@@ -214,15 +214,15 @@
.divider {
background-color: var(--Border-Divider-Subtle);
width: calc(100% + var(--Spacing-x6) + var(--Spacing-x6));
width: calc(100% + var(--Space-x6) + var(--Space-x6));
height: 1px;
margin-inline: calc(var(--Spacing-x6) * -1);
margin-inline: calc(var(--Space-x6) * -1);
}
.buttonContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.pointsOutput {
@@ -230,16 +230,16 @@
background-color: var(--Surface-Primary-Disabled);
height: 100%;
color: var(--Text-Tertiary);
padding: var(--Spacing-x1) var(--Spacing-x2);
padding: var(--Space-x1) var(--Space-x2);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
@media screen and (max-width: 767px) {
.card {
padding: var(--Spacing-x3);
padding-top: var(--Spacing-x6);
padding: var(--Space-x3);
padding-top: var(--Space-x6);
}
.highFive {
@@ -249,7 +249,7 @@
.transferContainer {
grid-template-columns: 1fr;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.transferFrom {
flex-direction: row;
@@ -278,7 +278,7 @@
.inputsWrapper {
grid-template-columns: 1fr 1fr;
column-gap: var(--Spacing-x1);
column-gap: var(--Space-x1);
}
.conversionRate {
@@ -292,6 +292,6 @@
}
.modalContainer {
padding-inline: var(--Spacing-x2);
padding-inline: var(--Space-x2);
}
}