chore: replace old primary background token with new one

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -9,7 +9,7 @@
 }
 
 .container {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
 }
 
 .content {

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css

@@ -6,5 +6,5 @@
 }
 
 .container {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/layout.module.css

@@ -1,4 +1,4 @@
 .layout {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   min-height: 100dvh;
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/layout.module.css

@@ -1,6 +1,6 @@
 .layout {
   min-height: 100dvh;
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   position: relative;
 }
 

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.module.css

@@ -1,3 +1,3 @@
 .layout {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
 }

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.module.css

@@ -1,5 +1,5 @@
 .page {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   min-height: 50dvh;
   max-width: var(--max-width-page);
   margin: 0 auto;

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.module.css

@@ -1,6 +1,6 @@
 .layout {
   min-height: 100dvh;
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   position: relative;
 }
 

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment/linkEmploymentPage.module.css

@@ -58,7 +58,7 @@
   max-width: 580px;
   margin-left: auto;
   margin-right: auto;
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
   padding: var(--Spacing-x5);
   border-radius: var(--Corner-radius-lg);
   display: grid;

apps/scandic-web/app/[lang]/webview/layout.module.css

@@ -1,5 +1,5 @@
 .layout {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   font-family: var(--typography-Body-Regular-fontFamily);
   min-height: 100dvh;
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css

@@ -1,5 +1,5 @@
 .buttonContainer {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-top: 1px solid var(--Base-Border-Subtle);
   padding: var(--Spacing-x4) var(--Spacing-x2);
   width: 100%;

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css

@@ -7,7 +7,7 @@
 }
 
 .buttonContainer {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-top: 1px solid var(--Base-Border-Subtle);
   padding: var(--Spacing-x4) var(--Spacing-x2);
   width: 100%;

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/restaurantBarItem.module.css

@@ -12,7 +12,7 @@
   content: "";
   position: absolute;
   margin-top: calc(-1 * var(--Space-x4));
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   z-index: -1;
   width: 100%;
   top: 0;

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css

@@ -23,7 +23,7 @@
 }
 
 .buttonContainer {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-top: 1px solid var(--Base-Border-Subtle);
   padding: var(--Spacing-x4) var(--Spacing-x2);
   width: 100%;

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css

@@ -15,7 +15,7 @@
 }
 
 .buttonContainer {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-top: 1px solid var(--Base-Border-Subtle);
   padding: var(--Spacing-x4) var(--Spacing-x2);
   width: 100%;

apps/scandic-web/components/DatePicker/Range/desktop.module.css

@@ -29,7 +29,7 @@ td.rangeStart {
 
 td.rangeEnd,
 td.rangeStart {
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) {
@@ -72,7 +72,7 @@ td.day[data-outside="true"] button.dayButton {
 
 td.day.rangeMiddle[aria-selected="true"],
 td.rangeMiddle[aria-selected="true"] button.dayButton {
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
   border: none;
   border-radius: 0;
   color: var(--UI-Text-High-contrast);

apps/scandic-web/components/DatePicker/Range/mobile.module.css

@@ -106,7 +106,7 @@ td.rangeStart {
 
 td.rangeEnd,
 td.rangeStart {
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) {
@@ -145,7 +145,7 @@ td.day[data-outside="true"] button.dayButton {
 
 td.day.rangeMiddle[aria-selected="true"],
 td.rangeMiddle[aria-selected="true"] button.dayButton {
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
   border: none;
   border-radius: 0;
   color: var(--UI-Text-High-contrast);

apps/scandic-web/components/DatePicker/Single/desktop.module.css

@@ -29,7 +29,7 @@ td.rangeStart {
 
 td.rangeEnd,
 td.rangeStart {
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) {
@@ -71,7 +71,7 @@ td.day[data-outside="true"] button.dayButton {
 }
 
 td.rangeMiddle[aria-selected="true"] button.dayButton {
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
   border: none;
   border-radius: 0;
   color: var(--UI-Text-High-contrast);

apps/scandic-web/components/DatePicker/Single/mobile.module.css

@@ -103,7 +103,7 @@ td.rangeStart {
 
 td.rangeEnd,
 td.rangeStart {
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) {
@@ -141,7 +141,7 @@ td.day[data-outside="true"] button.dayButton {
 }
 
 td.rangeMiddle[aria-selected="true"] button.dayButton {
-  background: var(--Base-Background-Primary-Normal);
+  background: var(--Background-Primary);
   border: none;
   border-radius: 0;
   color: var(--UI-Text-High-contrast);

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css

@@ -6,7 +6,7 @@
 
 .bookingCode {
   height: 60px;
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
 }

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css

@@ -17,7 +17,7 @@
 
   &:hover,
   &:has(input:active, input:focus, input:focus-within) {
-    background-color: var(--Base-Background-Primary-Normal);
+    background-color: var(--Background-Primary);
   }
 
   &:has(input:active, input:focus, input:focus-within) {

apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -45,7 +45,7 @@
   .rooms,
   .when,
   .where {
-    background-color: var(--Base-Background-Primary-Normal);
+    background-color: var(--Background-Primary);
     border-radius: var(--Corner-radius-md);
   }
 

apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -156,7 +156,7 @@
 
   .addRoomMobileContainer .addRoomMobileDisabledText {
     padding: var(--Spacing-x1) var(--Spacing-x2);
-    background-color: var(--Base-Background-Primary-Normal);
+    background-color: var(--Background-Primary);
     margin: 0 var(--Spacing-x2);
     border-radius: var(--Corner-radius-md);
     display: flex;

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css

@@ -5,7 +5,7 @@
 }
 
 .content {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-lg);
   display: grid;
   gap: var(--Spacing-x2);

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/retry.module.css

@@ -1,5 +1,5 @@
 .retry {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-lg);
   display: flex;
   flex-direction: column;

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/room.module.css

@@ -25,7 +25,7 @@
 }
 
 .booking {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-lg);
   display: grid;
   gap: var(--Spacing-x2);

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css

@@ -3,7 +3,7 @@
   inset: 0;
   width: 100dvw;
   height: 100dvh;
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   z-index: 200;
   overflow: auto;
 

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/DeliveryDetailsStep/deliveryDetailsStep.module.css

@@ -4,7 +4,7 @@
   gap: var(--Space-x2);
   padding: var(--Space-x3);
   margin-bottom: var(--Space-x05);
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
 }
 

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css

@@ -29,7 +29,7 @@
 }
 
 .ancillaryMobile {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   display: flex;
   flex-direction: column;
@@ -39,7 +39,7 @@
 .ancillaryDesktop {
   display: none;
   padding: var(--Spacing-x2);
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   flex-direction: column;
   gap: var(--Spacing-x1);

apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/modifyContact.module.css

@@ -1,5 +1,5 @@
 .container {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   padding: var(--Spacing-x2) var(--Spacing-x1) var(--Spacing-x3);
   border-radius: var(--Corner-radius-md);
 }

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/cancelStay.module.css

@@ -17,7 +17,7 @@
 .roomContainer {
   display: flex;
   padding: var(--Spacing-x2);
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   align-items: center;
   gap: var(--Spacing-x1);

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/newDates.module.css

@@ -1,5 +1,5 @@
 .container {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x3);
   border-radius: var(--Corner-radius-md);
   display: flex;

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css

@@ -1,7 +1,7 @@
 .priceContainer {
   display: flex;
   padding: var(--Spacing-x2);
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-md);
   align-items: center;
   justify-content: flex-end;

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css

@@ -17,7 +17,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x2);
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-radius: var(--Corner-radius-lg);
   border: 1px solid var(--Base-Border-Subtle);
   overflow: hidden;

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css

@@ -11,7 +11,7 @@
 }
 
 .room {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
@@ -69,7 +69,7 @@
 
   .booking {
     border-radius: var(--Corner-radius-lg);
-    background-color: var(--Base-Background-Primary-Normal);
+    background-color: var(--Background-Primary);
   }
 
   .content {

apps/scandic-web/components/Lightbox/Gallery/gallery.module.css

@@ -4,7 +4,7 @@
   padding: var(--Space-x2);
   height: 100%;
   overflow-y: auto;
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
 }
 
 .mobileGallery {
@@ -83,7 +83,7 @@
     display: grid;
     grid-template-rows: 28px 1fr 7.8125rem;
     row-gap: var(--Spacing-x-one-and-half);
-    background-color: var(--Base-Background-Primary-Normal);
+    background-color: var(--Background-Primary);
     height: 100%;
     position: relative;
     overflow: hidden;

apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css

@@ -6,5 +6,5 @@
   justify-items: flex-end;
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   border-radius: var(--Corner-radius-sm);
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
 }

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/bookedRoomSidePeek.module.css

@@ -143,7 +143,7 @@
 }
 
 .buttonContainer {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-top: 1px solid var(--Base-Border-Subtle);
   padding: var(--Spacing-x4) var(--Spacing-x2);
   width: 100%;

apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css

@@ -59,7 +59,7 @@
 }
 
 .buttonContainer {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   border-top: 1px solid var(--Base-Border-Subtle);
   padding: var(--Spacing-x4) var(--Spacing-x2);
   width: 100%;

apps/scandic-web/components/TempDesignSystem/Accordion/accordion.module.css

@@ -10,7 +10,7 @@
   background-color: var(--Base-Surface-Primary-light-Normal);
 }
 .accordion.subtle {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
 }
 
 .accordion li:last-child {

apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -38,7 +38,7 @@
   bottom: 0;
   width: 100%;
   height: 100vh;
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   z-index: var(--sidepeek-z-index);
   outline: none;
 }

apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css

@@ -36,7 +36,7 @@
   bottom: 0;
   width: 100%;
   height: 100vh;
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
   z-index: var(--sidepeek-z-index);
   outline: none;
 }

apps/scandic-web/components/TempDesignSystem/Table/table.module.css

@@ -45,14 +45,14 @@
 }
 
 .content .tbody {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
 }
 
 .content.striped .tbody .tr:nth-child(odd) {
   background-color: var(--Base-Surface-Subtle-Normal);
 }
 .content.striped .tbody .tr:nth-child(even) {
-  background-color: var(--Base-Background-Primary-Normal);
+  background-color: var(--Background-Primary);
 }
 
 @media screen and (min-width: 768px) {