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

chore: Replaced deprecated Spacing variables with current values

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/design-system/lib/components/Chip/chip.module.css
View File

@@ -6,16 +6,16 @@ div.chip {
background-color: var(--chip-background-color);
border-radius: var(--Corner-radius-sm);
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
justify-content: center;
}
.chip.small {
padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
padding: var(--Space-x025) var(--Space-x05);
}
.chip.medium {
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
}
.chip *,

20
packages/design-system/lib/components/DeprecatedSelect/select.module.css
View File

@@ -7,7 +7,7 @@
border-radius: var(--Corner-radius-md);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.select[data-focused='true'] {
@@ -30,7 +30,7 @@
.select.discreet .input {
background-color: unset;
color: var(--Base-Text-High-contrast);
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.select[data-disabled],
@@ -42,7 +42,7 @@
.iconLabel {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.input {
@@ -52,10 +52,10 @@
border-radius: var(--Corner-radius-md);
color: var(--UI-Text-High-contrast);
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
height: 60px;
outline: none;
padding: var(--Space-x15) var(--Spacing-x2);
padding: var(--Space-x15) var(--Space-x2);
text-align: left;
justify-content: space-between;
}
@@ -72,7 +72,7 @@
justify-content: flex-end;
flex-direction: row;
font-weight: 500;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.popover {
@@ -81,7 +81,7 @@
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
display: inline-flex;
flex-direction: column;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
overflow: auto;
width: 100%;
}
@@ -89,12 +89,12 @@
.listBox {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
padding: var(--Spacing-x2);
gap: var(--Space-x1);
padding: var(--Space-x2);
}
.listBoxItem {
padding: var(--Spacing-x1);
padding: var(--Space-x1);
}
.listBoxItem[data-focused='true'],

2
packages/design-system/lib/components/Form/Date/date.module.css
View File

@@ -1,6 +1,6 @@
.container {
display: flex;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
user-select: none;
}

4
packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css
View File

@@ -7,7 +7,7 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
cursor: pointer;
}
@@ -36,6 +36,6 @@
.paymentOptionIcon {
position: absolute;
right: var(--Spacing-x3);
right: var(--Space-x3);
top: calc(50% - 16px);
}

2
packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css
View File

@@ -7,5 +7,5 @@
.section {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}

8
packages/design-system/lib/components/Form/TextArea/textarea.module.css
View File

@@ -1,15 +1,15 @@
.helpText {
align-items: flex-start;
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.error {
align-items: center;
color: var(--Scandic-Red-60);
display: flex;
gap: var(--Spacing-x-half);
margin: var(--Spacing-x1) 0 0;
gap: var(--Space-x05);
margin: var(--Space-x1) 0 0;
}
.container {
@@ -22,7 +22,7 @@
min-width: 0; /* allow shrinkage */
grid-template-rows: auto 1fr;
height: 138px;
padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x2) 0 var(--Space-x2);
transition: border-color 200ms ease;
}

10
packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css
View File

@@ -22,8 +22,8 @@
.priceVariants {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
padding: var(--Spacing-x2);
gap: var(--Space-x1);
padding: var(--Space-x2);
flex: 1;
}
@@ -31,8 +31,8 @@
display: flex;
flex-direction: column;
flex: 1;
gap: var(--Spacing-x1);
padding: var(--Spacing-x2);
gap: var(--Space-x1);
padding: var(--Space-x2);
}
.text {
@@ -41,7 +41,7 @@
@media (min-width: 1367px) {
.content {
padding: var(--Spacing-x2) 0 var(--Spacing-x2) var(--Spacing-x2);
padding: var(--Space-x2) 0 var(--Space-x2) var(--Space-x2);
}
.text {

6
packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
View File

@@ -6,14 +6,14 @@
width: 100%;
}
.divider {
margin: var(--Spacing-x-half) 0;
margin: var(--Space-x05) 0;
}
.priceRow {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--Spacing-x-quarter) 0;
padding: var(--Space-x025) 0;
}
.redColor {
@@ -28,7 +28,7 @@
.price {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.voucherChqRate {

2
packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css
View File

@@ -9,7 +9,7 @@
.voucherRow,
.voucher {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
justify-content: space-between;
align-items: baseline;
}

2
packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css
View File

@@ -8,5 +8,5 @@
.noRooms {
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}

4
packages/design-system/lib/components/IconChip/iconChip.module.css
View File

@@ -1,8 +1,8 @@
.chip {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
padding: var(--Spacing-x1) var(--Space-x15);
gap: var(--Space-x1);
padding: var(--Space-x1) var(--Space-x15);
border-radius: var(--Corner-radius-sm);
}

4
packages/design-system/lib/components/ImageContainer/imageContainer.module.css
View File

@@ -1,6 +1,6 @@
.container {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
width: 100%;
grid-template-columns: auto;
}
@@ -19,6 +19,6 @@
}
.image {
margin: var(--Spacing-x1) var(--Spacing-x0);
margin: var(--Space-x1) 0;
}
}

5
packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/HotelPin/hotelPin.module.css
View File

@@ -2,13 +2,12 @@
display: flex;
justify-content: center;
align-items: center;
padding: var(--Spacing-x-half) var(--Spacing-x1) var(--Spacing-x-half)
var(--Spacing-x-half);
padding: var(--Space-x05) var(--Space-x1) var(--Space-x05) var(--Space-x05);
border: 2px solid var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-rounded);
background-color: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
gap: var(--Spacing-x1);
gap: var(--Space-x1);
width: max-content;
}

9
packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css
View File

@@ -1,8 +1,8 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
padding: var(--Spacing-x1) var(--Spacing-x3) var(--Spacing-x4);
gap: var(--Space-x3);
padding: var(--Space-x1) var(--Space-x3) var(--Space-x4);
max-height: 70vh;
overflow-y: auto;
width: 100%;
@@ -12,8 +12,7 @@
display: flex;
justify-content: space-between;
width: 100%;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x1)
var(--Spacing-x3);
padding: var(--Space-x3) var(--Space-x3) var(--Space-x1) var(--Space-x3);
}
.footer {
@@ -21,7 +20,7 @@
justify-content: space-between;
width: 100%;
border-top: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x3);
padding: var(--Space-x3);
}
.close {

8
packages/design-system/lib/components/Modal/modal.module.css
View File

@@ -37,14 +37,14 @@
align-items: flex-start;
min-height: var(--button-dimension);
position: relative;
padding: var(--Spacing-x3) var(--Spacing-x3) 0;
padding: var(--Space-x3) var(--Space-x3) 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
overflow: auto;
}
@@ -53,7 +53,7 @@
}
.contentWithoutActions {
padding: 0 var(--Spacing-x3) var(--Spacing-x4);
padding: 0 var(--Space-x3) var(--Space-x4);
}
.close {
@@ -61,7 +61,7 @@
border: none;
cursor: pointer;
position: absolute;
right: var(--Spacing-x2);
right: var(--Space-x2);
width: var(--button-dimension);
height: var(--button-dimension);
display: flex;

24
packages/design-system/lib/components/OldDSButton/button.module.css
View File

@@ -66,14 +66,14 @@ a.text {
a.default {
align-items: center;
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
justify-content: center;
}
.btn.icon:is(.small, .medium, .large) {
align-items: center;
display: flex;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
justify-content: center;
}
@@ -81,34 +81,34 @@ a.default {
.btn.small {
font-size: var(--typography-Caption-Bold-fontSize);
line-height: var(--typography-Caption-Bold-lineHeight);
gap: var(--Spacing-x-quarter);
padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
gap: var(--Space-x025);
padding: calc(var(--Space-x1) + 2px) var(--Space-x2);
/* Special case padding to adjust the missing border */
}
.btn.small.secondary {
padding: var(--Spacing-x1) var(--Spacing-x2);
padding: var(--Space-x1) var(--Space-x2);
}
.btn.medium {
gap: var(--Spacing-x-half);
padding: calc(var(--Space-x15) + 2px) var(--Spacing-x2);
gap: var(--Space-x05);
padding: calc(var(--Space-x15) + 2px) var(--Space-x2);
/* Special case padding to adjust the missing border */
}
.medium.secondary {
padding: var(--Space-x15) var(--Spacing-x2);
padding: var(--Space-x15) var(--Space-x2);
}
.btn.large {
gap: var(--Spacing-x-half);
padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3);
gap: var(--Space-x05);
padding: calc(var(--Space-x2) + 2px) var(--Space-x3);
/* Special case padding to adjust the missing border */
}
.large.secondary {
gap: var(--Spacing-x-half);
padding: var(--Spacing-x2) var(--Spacing-x3);
gap: var(--Space-x05);
padding: var(--Space-x2) var(--Space-x3);
}
/* DISABLED */

4
packages/design-system/lib/components/ParkingInformation/ParkingPrices/parkingPrices.module.css
View File

@@ -1,13 +1,13 @@
.wrapper {
display: grid;
row-gap: var(--Spacing-x1);
row-gap: var(--Space-x1);
margin: 0;
color: var(--Text-Default);
}
.period {
display: flex;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
}
.information {

4
packages/design-system/lib/components/SidePeek/SelfControlled/sidePeekSelfControlled.module.css
View File

@@ -55,7 +55,7 @@
justify-content: flex-end;
border-bottom: 1px solid var(--Base-Border-Subtle);
align-items: center;
padding: var(--Spacing-x4);
padding: var(--Space-x4);
}
.header:has(> h2) {
@@ -67,7 +67,7 @@
}
.sidePeekContent {
padding: var(--Spacing-x4);
padding: var(--Space-x4);
overflow-y: auto;
}

4
packages/design-system/lib/components/SidePeek/sidePeek.module.css
View File

@@ -46,7 +46,7 @@
justify-content: flex-end;
border-bottom: 1px solid var(--Base-Border-Subtle);
align-items: flex-start;
padding: var(--Spacing-x4);
padding: var(--Space-x4);
}
.header:has(.heading) {
@@ -60,7 +60,7 @@
}
.sidePeekContent {
padding: var(--Spacing-x4);
padding: var(--Space-x4);
overflow-y: auto;
}

4
packages/design-system/lib/components/Subtitle/subtitle.module.css
View File

@@ -1,6 +1,6 @@
.subtitle {
margin: var(--Spacing-x0);
padding: var(--Spacing-x0);
margin: 0;
padding: 0;
}
.one {

6
packages/design-system/lib/components/Toasts/toasts.module.css
View File

@@ -9,7 +9,7 @@
}
.content {
padding: var(--Space-x15) var(--Spacing-x3);
padding: var(--Space-x15) var(--Space-x3);
}
@media screen and (min-width: 768px) {
@@ -19,7 +19,7 @@
}
.toast .message {
padding: var(--Spacing-x2) var(--Space-x15);
padding: var(--Space-x2) var(--Space-x15);
}
.success {
@@ -43,6 +43,6 @@
align-items: center;
justify-content: center;
background-color: var(--icon-background-color);
padding: var(--Spacing-x2);
padding: var(--Space-x2);
height: 100%;
}

2
packages/design-system/lib/components/Tooltip/tooltip.module.css
View File

@@ -4,7 +4,7 @@
}
.tooltip {
padding: var(--Spacing-x1);
padding: var(--Space-x1);
background-color: var(--Surface-UI-Fill-Intense);
border: 0.5px solid var(--Border-Interactive-Focus);
border-radius: var(--Corner-radius-md);

11
packages/design-system/lib/design-system-new-deprecated.css
View File

@@ -353,17 +353,6 @@
--Layout-Desktop-Margin-Margin-min: 40px;
--Layout-Mobile-Margin-Margin-min: 16px;
--Layout-Tablet-Margin-Margin-min: 24px;
--Spacing-x0: 0px;
--Spacing-x1: 8px;
--Spacing-x2: 16px;
--Spacing-x3: 24px;
--Spacing-x4: 32px;
--Spacing-x5: 40px;
--Spacing-x6: 48px;
--Spacing-x7: 56px;
--Spacing-x9: 72px;
--Spacing-x-half: 4px;
--Spacing-x-quarter: 2px;
}
:root {
--Scandic-Beige-00: #faf6f2;