feat(BOOK-391): Added theme and logos for Bassin Seven

* chore: Updated border-radius variables after import change Approved-by: Linus Flood
2026-01-22 07:03:25 +00:00
parent ef98c4b552
commit 4de24e9f2a
297 changed files with 5252 additions and 648 deletions
--- a/packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css
+++ b/packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css
@@ -4,7 +4,7 @@
 }

 .dialog {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  background-color: var(--Surface-Primary-Default);
  box-shadow: var(--popup-box-shadow);
  max-width: 340px;
@@ -67,7 +67,7 @@
  left: 0;
  right: 0;
  padding: var(--Space-x2) var(--Space-x05);
-  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
+  border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
  background-color: var(--Surface-Primary-Default);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);

--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
@@ -26,7 +26,7 @@
 }

 .actions {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: grid;
  grid-area: actions;
  justify-content: flex-start;
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css
@@ -6,7 +6,7 @@

 .content {
  background-color: var(--Background-Primary);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2) var(--Space-x2) var(--Space-x3)
@@ -14,7 +14,7 @@
 }

 .img {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  overflow: hidden;
 }

--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css
@@ -1,6 +1,6 @@
 .retry {
  background-color: var(--Background-Primary);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/index.tsx
@@ -126,7 +126,7 @@ export function Room({
            focalPoint={{ x: 50, y: 50 }}
            height={204}
            src={img.src}
-            style={{ borderRadius: "var(--Corner-radius-md)" }}
+            style={{ borderRadius: "var(--Corner-Radius-md)" }}
            title={img.title || img.title_En || ""}
            width={204}
          />
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css
@@ -13,7 +13,7 @@
 .benefits {
  align-items: center;
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  gap: var(--Space-x1);
  padding: var(--Space-x1) var(--Space-x15);
@@ -26,7 +26,7 @@

 .booking {
  background-color: var(--Background-Primary);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2) var(--Space-x2) var(--Space-x3)
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css
@@ -8,7 +8,7 @@
 .bookingCode {
  height: 60px;
  background-color: var(--Background-Primary);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x1) var(--Space-x15);
  border: 2px solid transparent;
 }
@@ -17,7 +17,7 @@
 .bookingCode:has([data-focused="true"]),
 .bookingCode:has([data-pressed="true"]) {
  background-color: var(--Surface-Primary-Hover);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  border-color: var(--Border-Interactive-Focus);
 }

@@ -98,7 +98,7 @@
@media screen and (min-width: 1367px) {
  .container:hover {
    background-color: var(--Surface-Primary-Hover);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }

  .bookingCodeRememberVisible {
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
@@ -2,7 +2,7 @@
  align-items: center;
  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
  border: none;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  cursor: pointer;
  display: flex;
  gap: var(--Space-x05);
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css
@@ -1,6 +1,6 @@
 .dialog {
  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);

  display: flex;
  flex-direction: column;
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
@@ -1,5 +1,5 @@
 .listItem {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  cursor: pointer;
  padding: var(--Space-x1);
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css
@@ -2,7 +2,7 @@
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x1) var(--Space-x15);
  position: relative;
  height: 60px;
@@ -11,7 +11,7 @@
    background-color: var(--Base-Surface-Primary-light-Normal);
    padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
    border: 1px solid var(--Border-Strong);
-    border-radius: var(--Corner-radius-rounded);
+    border-radius: var(--Corner-Radius-Rounded);
    height: auto;
  }

--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/validationError.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/validationError.module.css
@@ -2,7 +2,7 @@
  position: absolute;
  top: calc(100% + var(--Space-x2));
  background: var(--Surface-Primary-Default);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
  padding: var(--Space-x15);
  max-width: min(100vw, calc(360px - var(--Space-x2)));
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css
@@ -80,7 +80,7 @@
  .when,
  .where {
    background-color: var(--Background-Primary);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }

  .rooms,
@@ -114,14 +114,14 @@
    gap: var(--Space-x2);
  }
  .voucherContainer {
-    border-radius: 0 0 var(--Corner-radius-md) var(--Corner-radius-md);
+    border-radius: 0 0 var(--Corner-Radius-md) var(--Corner-Radius-md);
  }

  .rooms,
  .when,
  .where {
    width: 100%;
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }

  .inputContainer input[type="text"] {
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css
@@ -22,7 +22,7 @@

@media screen and (min-width: 768px) {
  .default {
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }
 }

--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css
@@ -13,7 +13,7 @@
  bottom: 0;
  right: 0;
  padding: 20px var(--Space-x15) 0;
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
 }

 .datePicker[data-datepicker-open="true"] {
@@ -24,7 +24,7 @@
  --header-height: 72px;
  --sticky-button-height: 140px;
  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
  position: fixed;
  left: 0;
  right: 0;
@@ -41,7 +41,7 @@
  }

  .datePicker[data-datepicker-open="true"] {
-    border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+    border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
    top: calc(max(var(--sitewide-alert-sticky-height), 20px));
  }
 }
@@ -54,7 +54,7 @@
  .pickerContainer {
    position: absolute;
    display: grid;
-    border-radius: var(--Corner-radius-lg);
+    border-radius: var(--Corner-Radius-lg);
    box-shadow: var(--popup-box-shadow);
    padding: var(--Space-x2) var(--Space-x3);
    max-width: calc(100vw - 20px);
@@ -70,6 +70,6 @@
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }
 }
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/validationError.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/validationError.module.css
@@ -2,7 +2,7 @@
  position: absolute;
  top: calc(100% + var(--Space-x2));
  background: var(--Surface-Primary-Default);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
  padding: var(--Space-x15);
  max-width: min(100vw, calc(360px - var(--Space-x2)));
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -2,7 +2,7 @@
  display: flex;
  padding: var(--Space-x15);
  border: 1px solid var(--Border-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  justify-content: center;
 }

@@ -53,7 +53,7 @@
  bottom: 0;
  right: 0;
  padding: 20px var(--Space-x15) 0;
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -100,7 +100,7 @@
  --header-height: 72px;
  --sticky-button-height: 140px;
  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
  position: fixed;
  top: calc(max(var(--sitewide-alert-sticky-height), 20px));
  right: 0;
@@ -180,7 +180,7 @@
    bottom: auto;
    left: auto;
    right: auto;
-    border-radius: var(--Corner-radius-lg);
+    border-radius: var(--Corner-Radius-lg);
    box-shadow: var(--popup-box-shadow);
    min-width: 360px;
    max-width: calc(100vw - 20px);
--- a/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css
@@ -14,7 +14,7 @@
  /* To avoid this "flash" the styling is set to transparent) */
  /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
  -webkit-tap-highlight-color: transparent;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }

 .complete {
--- a/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
@@ -52,13 +52,13 @@

 .compact {
  .formContainer {
-    border-radius: var(--Corner-radius-lg);
+    border-radius: var(--Corner-Radius-lg);
  }
 }

@media screen and (max-width: 767px) {
  .formContainer {
-    border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+    border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
  }
 }

--- a/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css
@@ -2,7 +2,7 @@
  display: grid;
  gap: var(--Space-x2);
  background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  padding: var(--Space-x2);
 }

--- a/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css
@@ -5,7 +5,7 @@

 .selections {
  background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -1,7 +1,7 @@
 .cardContainer {
  align-self: flex-start;
  background-color: var(--Surface-Primary-Hover-Accent);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
@@ -1,7 +1,7 @@
 .cardContainer {
  align-self: flex-start;
  background-color: var(--Surface-Primary-Hover-Accent);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -1,7 +1,7 @@
 .cardContainer {
  align-self: flex-start;
  background-color: var(--Surface-Primary-Hover-Accent);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
@@ -1,7 +1,7 @@
 .cardContainer {
  align-self: flex-start;
  background-color: var(--Surface-Primary-Hover-Accent);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
@@ -10,7 +10,7 @@
  background-color: var(--Scandic-Blue-00);
  padding: var(--Space-x15);
  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }

 .roomInfo {
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
@@ -52,8 +52,8 @@

 .dialog {
  background-color: var(--Scandic-Brand-Pale-Peach);
-  border-top-left-radius: var(--Corner-radius-md);
-  border-top-right-radius: var(--Corner-radius-md);
+  border-top-left-radius: var(--Corner-Radius-md);
+  border-top-right-radius: var(--Corner-Radius-md);

  box-shadow: var(--modal-box-shadow);
  display: flex;
@@ -102,7 +102,7 @@
  }

  .dialog {
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
    padding: var(--Space-x6);
    width: fit-content;
  }
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
@@ -1,5 +1,5 @@
 .summary {
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
@@ -1,6 +1,6 @@
 .container {
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  min-width: 358px;
  background: var(--Base-Surface-Primary-light-Normal);
  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
@@ -40,7 +40,7 @@
 }

 .priceCard {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x05) var(--Space-x1);
  background: var(--Base-Surface-Secondary-light-Normal);
  margin-top: var(--Space-x1);
@@ -83,7 +83,7 @@
 }

 .notEnoughPointsButton {
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  border-width: 2px;
  border-style: solid;
  display: flex;
--- a/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css
+++ b/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css
@@ -3,7 +3,7 @@
  display: flex;
  flex-direction: column;
  background-color: #fff;
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  border: 1px solid var(--Base-Border-Subtle);
  position: relative;
  height: 100%;
--- a/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
+++ b/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
@@ -21,7 +21,7 @@

 .imageContainer {
  position: relative;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  overflow: hidden;
 }

--- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css
@@ -44,7 +44,7 @@
  bottom: 0;
  height: calc(100dvh - 20px);
  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  box-shadow: var(--modal-box-shadow);
  width: 100%;

@@ -71,7 +71,7 @@

 .badge {
  background-color: var(--Base-Text-Accent);
-  border-radius: var(--Corner-radius-xl);
+  border-radius: var(--Corner-Radius-xl);
  width: 20px;
  height: 20px;
  color: #ffffff;
@@ -146,8 +146,8 @@
    top: 0;
    background: var(--Base-Surface-Primary-light-Normal);
    z-index: 1;
-    border-top-left-radius: var(--Corner-radius-lg);
-    border-top-right-radius: var(--Corner-radius-lg);
+    border-top-left-radius: var(--Corner-Radius-lg);
+    border-top-right-radius: var(--Corner-Radius-lg);
  }

  .title {
@@ -181,8 +181,8 @@
    bottom: 0;
    background: var(--Base-Surface-Primary-light-Normal);
    z-index: 1;
-    border-bottom-left-radius: var(--Corner-radius-lg);
-    border-bottom-right-radius: var(--Corner-radius-lg);
+    border-bottom-left-radius: var(--Corner-Radius-lg);
+    border-bottom-right-radius: var(--Corner-Radius-lg);
    padding: var(--Space-x2) var(--Space-x3);
  }

@@ -202,7 +202,7 @@

  .filters ul li:hover {
    background: var(--UI-Input-Controls-Surface-Hover);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
    outline: none;
  }
  .filters ul li {
--- a/packages/booking-flow/lib/components/SelectHotel/MapWithButtonWrapper/mapWithButtonWrapper.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/MapWithButtonWrapper/mapWithButtonWrapper.module.css
@@ -1,7 +1,7 @@
 .container {
  display: flex;
  position: relative;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  overflow: hidden;
  flex-direction: column;

--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/summaryContent.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/summaryContent.module.css
@@ -1,5 +1,5 @@
 .summary {
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x3);
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css
@@ -1,5 +1,5 @@
 .summary {
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
@@ -10,13 +10,13 @@
 }

 .imageContainer {
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  display: flex;
  grid-area: image;
 }

 .img {
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  height: auto;
  max-height: 105px;
  object-fit: fill;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
@@ -1,7 +1,7 @@
 .roomContainer {
  background: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  padding: var(--Space-x3);
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/checkbox.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/checkbox.module.css
@@ -15,7 +15,7 @@
  gap: var(--Space-x15);
  padding: var(--Space-x1) var(--Space-x15);
  cursor: pointer;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  transition: background-color 0.3s;
  color: var(--Text-Default);

@@ -53,7 +53,7 @@
  height: 24px;
  min-width: 24px;
  border: 1px solid var(--Border-Interactive-Default);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  transition: all 0.3s;
  display: flex;
  align-items: center;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
@@ -34,7 +34,7 @@
  left: 0;
  right: 0;
  padding: var(--Space-x2) var(--Space-x05);
-  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
+  border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
  background-color: var(--Surface-Primary-Default);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);

@@ -77,7 +77,7 @@
  align-items: center;
  padding: var(--Space-x1);
  gap: var(--Space-x05);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  background-color: var(--Surface-Secondary-Subtle);
  color: var(--Text-Interactive-Default);
 }
@@ -154,7 +154,7 @@

  .popover {
    padding: var(--Space-x2);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
    background-color: var(--Surface-Primary-Default);
    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
    max-width: 340px;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
@@ -2,7 +2,7 @@
  margin: 0 calc(-1 * var(--Space-x2));
  height: 190px;
  position: relative;
-  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
 }

 div[data-multiroom="true"] .imageContainer {
@@ -21,7 +21,7 @@ div[data-multiroom="true"] .imageContainer {

 .chip {
  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  padding: var(--Space-x05) var(--Space-x1);
 }

--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
@@ -1,6 +1,6 @@
 .noRooms {
  background-color: var(--Base-Surface-Secondary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  gap: var(--Space-x1);
  margin: 0;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
@@ -2,7 +2,7 @@
  align-content: flex-start;
  background-color: #fff;
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
--- a/packages/booking-flow/lib/components/SidePanel/sidePanel.module.css
+++ b/packages/booking-flow/lib/components/SidePanel/sidePanel.module.css
@@ -36,7 +36,7 @@
  .wrapper {
    background-color: var(--Main-Grey-White);
    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
-    border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+    border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
    border-style: solid;
    border-width: 1px;
    border-bottom: none;
--- a/packages/booking-flow/lib/components/SidePeekAccordions/sidePeekAccordion.module.css
+++ b/packages/booking-flow/lib/components/SidePeekAccordions/sidePeekAccordion.module.css
@@ -17,7 +17,7 @@
  display: grid;
  padding: var(--Space-x2) var(--Space-x3);
  gap: var(--Space-x1);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  background: var(--Surface-Secondary-Default);
 }

--- a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
+++ b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
@@ -10,8 +10,8 @@
 .memberDiscountBannerDesktop {
  display: none;
  background: var(--Primary-Light-Surface-Normal);
-  border-radius: var(--Corner-radius-xl) var(--Corner-radius-xl) 0px
-    var(--Corner-radius-xl);
+  border-radius: var(--Corner-Radius-xl) var(--Corner-Radius-xl) 0px
+    var(--Corner-Radius-xl);
  align-items: center;
  padding: var(--Space-x15) var(--Space-x2);
  gap: var(--Space-x2);
--- a/packages/common/constants/signatureHotels.ts
+++ b/packages/common/constants/signatureHotels.ts
@@ -5,4 +5,5 @@ export enum SignatureHotelEnum {
  HotelNorge = "785",
  Marski = "605",
  TheDock = "796",
+  BassinSeven = "717",
 }
--- a/packages/common/utils/theme/index.ts
+++ b/packages/common/utils/theme/index.ts
@@ -10,6 +10,7 @@ export enum Theme {
  hotelNorge = "hotel-norge",
  marski = "marski",
  theDock = "the-dock",
+  bassinSeven = "bassin-seven",
 }

 export const DEFAULT_THEME = Theme.scandic
@@ -29,6 +30,8 @@ function getSignatureHotelTheme(hotelId: string) {
      return Theme.marski
    case SignatureHotelEnum.TheDock:
      return Theme.theDock
+    case SignatureHotelEnum.BassinSeven:
+      return Theme.bassinSeven
    default:
      return DEFAULT_THEME
  }
--- a/packages/design-system/.storybook/content/colors/bassinSeven.mdx
+++ b/packages/design-system/.storybook/content/colors/bassinSeven.mdx
@@ -0,0 +1,11 @@
+import { Meta } from "@storybook/addon-docs/blocks"
+
+import { Colors } from "../Colors"
+
+import { bassinSeven } from "../../../lib/tokens"
+
+<Meta title="Tokens/Colors/Bassin Seven" />
+
+# Colors: Bassin Seven
+
+<Colors theme={bassinSeven} />
--- a/packages/design-system/.storybook/preview.tsx
+++ b/packages/design-system/.storybook/preview.tsx
@@ -18,6 +18,7 @@ export const themes = {
    "Hotel Norge": "hotel-norge",
    Marski: "marski",
    "The Dock": "the-dock",
+    "Bassin Seven": "bassin-seven",
  },
  defaultTheme: "Scandic",
 }
--- a/packages/design-system/generate/variables.json
+++ b/packages/design-system/generate/variables.json
--- a/packages/design-system/lib/components/Accordion/AccordionItem/accordionItem.module.css
+++ b/packages/design-system/lib/components/Accordion/AccordionItem/accordionItem.module.css
@@ -44,7 +44,7 @@
  cursor: pointer;
  color: var(--Text-Interactive-Default);
  transition: background-color 0.3s;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  list-style: none;

  &::-webkit-details-marker {
--- a/packages/design-system/lib/components/Accordion/accordion.module.css
+++ b/packages/design-system/lib/components/Accordion/accordion.module.css
@@ -2,7 +2,7 @@
  list-style: none;

  &.card {
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);

    li:last-child {
      border-width: 0;
--- a/packages/design-system/lib/components/Alert/alert.module.css
+++ b/packages/design-system/lib/components/Alert/alert.module.css
@@ -40,7 +40,7 @@

 /* Intent: inline */
 .inline {
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  border: 1px solid var(--Base-Border-Subtle);
  background-color: var(--Base-Surface-Primary-light-Normal);
 }
--- a/packages/design-system/lib/components/Avatar/avatar.module.css
+++ b/packages/design-system/lib/components/Avatar/avatar.module.css
@@ -3,7 +3,7 @@
  justify-content: center;
  align-items: center;
  overflow: hidden;
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  background-color: var(--Overlay-40);
 }

--- a/packages/design-system/lib/components/BackToTopButton/backToTopButton.module.css
+++ b/packages/design-system/lib/components/BackToTopButton/backToTopButton.module.css
@@ -1,5 +1,5 @@
 .backToTopButton {
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
--- a/packages/design-system/lib/components/Badge/badge.module.css
+++ b/packages/design-system/lib/components/Badge/badge.module.css
@@ -1,5 +1,5 @@
 .badge {
-  border-radius: var(--Corner-radius-xl);
+  border-radius: var(--Corner-Radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
--- a/packages/design-system/lib/components/Breadcrumbs/breadcrumbs.module.css
+++ b/packages/design-system/lib/components/Breadcrumbs/breadcrumbs.module.css
@@ -67,7 +67,7 @@
  display: flex;
  flex-direction: column;
  gap: var(--Space-x05);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  min-width: 169px;
  outline: none;
  box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
@@ -75,7 +75,7 @@

 .dialogLink {
  display: block;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x1);
  color: var(--Text-Default);

@@ -95,7 +95,7 @@
 .tooltip {
  background-color: var(--Surface-UI-Fill-Intense);
  padding: var(--Space-x05) var(--Space-x1);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  color: var(--Text-Inverted);
  outline: none;
 }
--- a/packages/design-system/lib/components/Button/button.module.css
+++ b/packages/design-system/lib/components/Button/button.module.css
@@ -1,6 +1,6 @@
 .button {
  position: relative;
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  border-width: 2px;
  border-style: solid;
  cursor: pointer;
--- a/packages/design-system/lib/components/Card/card.module.css
+++ b/packages/design-system/lib/components/Card/card.module.css
@@ -10,13 +10,13 @@
 .Default {
  border: solid 1px var(--Border-Default);
  background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  color: var(--Text-Default);
 }

 .Featured {
  border: solid 1px var(--Border-Default);
  background-color: var(--Surface-Primary-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  color: var(--Text-Default);
 }
--- a/packages/design-system/lib/components/ChipButton/chip-button.module.css
+++ b/packages/design-system/lib/components/ChipButton/chip-button.module.css
@@ -1,6 +1,6 @@
 .chip {
  background-color: var(--Component-Button-Inverted-Fill-Default);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  padding: 6px var(--Space-x15);
  color: var(--Text-Interactive-Default);
  display: inline-flex;
@@ -43,7 +43,7 @@
 .FilterRounded {
  background-color: transparent;
  border: 1px solid var(--Border-Interactive-Active);
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  padding: var(--Space-x025) var(--Space-x2);
  color: var(--Text-Default);
 }
--- a/packages/design-system/lib/components/ChipLink/chip-link.module.css
+++ b/packages/design-system/lib/components/ChipLink/chip-link.module.css
@@ -1,7 +1,7 @@
 .chip {
  background-color: var(--Component-Button-Inverted-Fill-Default);
  border: 1px solid var(--Component-Button-Inverted-Border-Default);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  padding: var(--Space-x1) var(--Space-x15);
  color: var(--Text-Interactive-Default);
  display: inline-flex;
--- a/packages/design-system/lib/components/ChipStatic/chip-static.module.css
+++ b/packages/design-system/lib/components/ChipStatic/chip-static.module.css
@@ -1,5 +1,5 @@
 .chip {
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  padding: 0 var(--Space-x1);
  display: inline-flex;
  align-items: center;
--- a/packages/design-system/lib/components/ContentCard/contentCard.module.css
+++ b/packages/design-system/lib/components/ContentCard/contentCard.module.css
@@ -4,7 +4,7 @@
  &:hover {
    .imageContainer,
    .image {
-      border-radius: var(--Corner-radius-lg);
+      border-radius: var(--Corner-Radius-lg);
    }
    .image {
      transform: scale(1.05);
@@ -16,13 +16,13 @@
  position: relative;
  width: 100%;
  height: 250px;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  overflow: hidden;
  transition: border-radius 0.3s ease-in-out;
 }

 .image {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  width: 100%;
  height: 100%;
  object-fit: cover;
--- a/packages/design-system/lib/components/DeprecatedSelect/select.module.css
+++ b/packages/design-system/lib/components/DeprecatedSelect/select.module.css
@@ -4,7 +4,7 @@

 .select {
  border: 1px solid var(--Base-Border-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x05);
@@ -49,7 +49,7 @@
  align-items: center;
  background-color: var(--UI-Opacity-White-100);
  border: none;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  color: var(--UI-Text-High-contrast);
  display: flex;
  gap: var(--Space-x05);
@@ -77,7 +77,7 @@

 .popover {
  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-md);
+  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-md);
+  border-radius: var(--Corner-Radius-md);
  outline: none;
 }

--- a/packages/design-system/lib/components/Form/Country/country.module.css
+++ b/packages/design-system/lib/components/Form/Country/country.module.css
@@ -1,7 +1,7 @@
 .select {
  background-color: var(--Surface-UI-Fill-Default);
  border: 1px solid var(--Border-Interactive-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  position: relative;
  height: 56px;

@@ -59,7 +59,7 @@
 .inner {
  align-items: center;
  box-sizing: border-box;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  gap: var(--Space-x1);
  padding: var(--Space-x15);
@@ -129,7 +129,7 @@

 .popover {
  background-color: var(--Surface-Primary-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  box-shadow: 0 0 14px 6px rgb(0 0 0 / 10%);
  display: inline-flex;
  flex-direction: column;
@@ -151,7 +151,7 @@

 .listBoxItem {
  align-items: center;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  color: var(--Text-Default);
  display: flex;
  gap: var(--Space-x1);
--- a/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css
+++ b/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css
@@ -3,7 +3,7 @@
  background-color: var(--UI-Input-Controls-Surface-Normal);
  padding: var(--Space-x15) var(--Space-x2);
  border: 1px solid var(--Base-Border-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
--- a/packages/design-system/lib/components/Form/Phone/phone.module.css
+++ b/packages/design-system/lib/components/Form/Phone/phone.module.css
@@ -39,7 +39,7 @@

 .phone :global(.react-international-phone-country-selector-dropdown) {
  background: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
  gap: var(--Space-x1);
  outline: none;
@@ -48,7 +48,7 @@

 .phone
  :global(.react-international-phone-country-selector-dropdown__list-item) {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
  font-family: var(--Body-Paragraph-Font-family);
 }
@@ -64,7 +64,7 @@
  border-color: var(--Border-Interactive-Default);
  border-style: solid;
  border-width: 1px;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: grid;
  gap: var(--Space-x05);
  grid-template-rows: auto auto;
--- a/packages/design-system/lib/components/Form/RadioButtonsGroup/radioButtonsGroup.module.css
+++ b/packages/design-system/lib/components/Form/RadioButtonsGroup/radioButtonsGroup.module.css
@@ -9,7 +9,7 @@
  background: var(--Surface-Primary-Default);
  padding: var(--Space-x15) var(--Space-x2);
  outline: 1px solid var(--Border-Interactive-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
--- a/packages/design-system/lib/components/Form/RadioCard/radioCard.module.css
+++ b/packages/design-system/lib/components/Form/RadioCard/radioCard.module.css
@@ -7,7 +7,7 @@
  grid-template-areas:
    "icon subtitleSecondary"
    "title subtitle";
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  border: 1px solid var(--Border-Strong);
  background: var(--Surface-Primary-Default);
  padding: var(--Space-x2) var(--Space-x3);
@@ -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);
 }

--- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css
@@ -18,7 +18,7 @@
 .imageContainer {
  position: relative;
  min-width: 177px;
-  border-radius: var(--Corner-radius-md) 0 0 var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md) 0 0 var(--Corner-Radius-md);
  overflow: hidden;
 }

@@ -26,7 +26,7 @@
  width: 80px;
  min-width: 80px;
  height: 90px;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }

 .imageContainer img {
--- a/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelCardSkeleton.module.css
@@ -3,7 +3,7 @@
  display: flex;
  flex-direction: column;
  background-color: #fff;
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  border: 1px solid var(--Base-Border-Subtle);
  position: relative;
  height: 100%;
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
@@ -1,7 +1,7 @@
 .chequeCard {
  padding: var(--Space-x15);
  background-color: var(--Base-Surface-Secondary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  margin: 0;
  width: 100%;
  display: grid;
--- a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/standaloneHotelCardDialog.module.css
@@ -41,7 +41,7 @@
 }

 .priceCard {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x05) var(--Space-x1);
  background: var(--Base-Surface-Secondary-light-Normal);
 }
@@ -55,7 +55,7 @@
 }

 .notEnoughPointsButton {
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  border-width: 2px;
  border-style: solid;
  display: flex;
--- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
@@ -1,7 +1,7 @@
 .priceCard {
  padding: var(--Space-x15);
  background-color: var(--Base-Surface-Secondary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  margin: 0;
  width: 100%;
 }
--- a/packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelVoucherCard/hotelVoucherCard.module.css
@@ -1,7 +1,7 @@
 .voucherCard {
  padding: var(--Space-x15);
  background-color: var(--Base-Surface-Secondary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  margin: 0;
  width: 100%;
 }
--- a/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css
+++ b/packages/design-system/lib/components/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css
@@ -1,7 +1,7 @@
 .priceCard {
  padding: var(--Space-x15);
  background-color: var(--Base-Surface-Secondary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  margin: 0;
  width: 100%;
 }
--- a/packages/design-system/lib/components/HotelCard/hotelCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/hotelCard.module.css
@@ -3,7 +3,7 @@
  flex-direction: column;
  background-color: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  width: 100%;
  overflow: hidden;
  color: var(--Text-Default);
@@ -104,7 +104,7 @@
 .pointsCard {
  background-color: var(--Base-Surface-Secondary-light-Normal);
  padding: var(--Space-x15);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }

@media screen and (min-width: 768px) and (max-width: 1024px) {
--- a/packages/design-system/lib/components/HotelInfoCard/hotelInfoCard.module.css
+++ b/packages/design-system/lib/components/HotelInfoCard/hotelInfoCard.module.css
@@ -25,7 +25,7 @@
  position: relative;
  height: 200px;
  width: 100%;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }

 .hotelContent {
--- a/packages/design-system/lib/components/IconButton/iconButton.module.css
+++ b/packages/design-system/lib/components/IconButton/iconButton.module.css
@@ -8,7 +8,7 @@
  border-width: 0;
  background-color: transparent;
  cursor: pointer;
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);

  &[data-disabled] {
    cursor: unset;
--- a/packages/design-system/lib/components/IconChip/iconChip.module.css
+++ b/packages/design-system/lib/components/IconChip/iconChip.module.css
@@ -3,7 +3,7 @@
  align-items: center;
  gap: var(--Space-x1);
  padding: var(--Space-x1) var(--Space-x15);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
 }

 .blue {
--- a/packages/design-system/lib/components/Icons/Logos/BassinSeven.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/BassinSeven.tsx
--- a/packages/design-system/lib/components/Icons/Logos/index.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/index.tsx
@@ -1,3 +1,5 @@
+import { SignatureHotelEnum } from "@scandic-hotels/common/constants/signatureHotels"
+import BassinSevenIcon from "./BassinSeven"
 import DowntownCamperIcon from "./DowntownCamper"
 import GrandHotelOsloLogoIcon from "./GrandHotelOslo"
 import HaymarketIcon from "./Haymarket"
@@ -19,15 +21,6 @@ enum HotelTypeEnum {
  Regular = "regular",
 }

-enum SignatureHotelEnum {
-  DowntownCamper = "879",
-  GrandHotelOslo = "340",
-  Haymarket = "890",
-  HotelNorge = "785",
-  Marski = "605",
-  TheDock = "796",
-}
-
 export default function HotelLogoIcon({
  hotelId,
  hotelType,
@@ -50,6 +43,8 @@ export default function HotelLogoIcon({
      return <MarskiLogoIcon height={height} />
    case SignatureHotelEnum.TheDock:
      return <TheDockIcon height={height} />
+    case SignatureHotelEnum.BassinSeven:
+      return <BassinSevenIcon height={height} />
    default:
      return <ScandicLogoIcon height={height} />
  }
--- a/packages/design-system/lib/components/ImageContainer/imageContainer.module.css
+++ b/packages/design-system/lib/components/ImageContainer/imageContainer.module.css
@@ -10,7 +10,7 @@
  width: 100%;
  height: 365px;
  object-fit: cover;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }

@media screen and (min-width: 768px) {
--- a/packages/design-system/lib/components/ImageCounter/imageCounter.module.css
+++ b/packages/design-system/lib/components/ImageCounter/imageCounter.module.css
@@ -1,6 +1,6 @@
 .imageCounter {
  background-color: var(--Overlay-90);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  color: var(--Text-Inverted);
  justify-content: center;
  display: inline-flex;
--- a/packages/design-system/lib/components/InfoBox/InfoBox.module.css
+++ b/packages/design-system/lib/components/InfoBox/InfoBox.module.css
@@ -4,7 +4,7 @@
  gap: 1rem;

  padding: var(--Space-x2) var(--Space-x3);
-  border-radius: var(--Corner-radius-Medium);
+  border-radius: var(--Corner-Radius-Medium);
  align-items: center;

  background: var(--Background-Secondary);
--- a/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx
+++ b/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx
@@ -259,3 +259,10 @@ export const AllThemesTheDock: Story = {
    hotelTheme: Theme.theDock,
  },
 }
+
+export const AllThemesBassinSeven: Story = {
+  args: {
+    ...meta.args,
+    hotelTheme: Theme.bassinSeven,
+  },
+}
--- a/packages/design-system/lib/components/InfoCard/infoCard.module.css
+++ b/packages/design-system/lib/components/InfoCard/infoCard.module.css
@@ -7,7 +7,7 @@
  display: grid;
  justify-content: center;
  align-items: center;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  text-align: center;
  width: 100%;
  text-wrap: balance;
--- a/packages/design-system/lib/components/InfoCard/utils.ts
+++ b/packages/design-system/lib/components/InfoCard/utils.ts
@@ -158,6 +158,23 @@ export function getButtonProps(
        }
      }
      break
+    case Theme.bassinSeven:
+      if (
+        cardTheme === "Primary 3" ||
+        cardTheme === "Accent" ||
+        cardTheme === "White"
+      ) {
+        buttonProps = {
+          primaryButton: PRIMARY,
+          secondaryButton: SECONDARY,
+        }
+      } else if (cardTheme === "Primary 1" || cardTheme === "Primary 2") {
+        buttonProps = {
+          primaryButton: PRIMARY_INVERTED,
+          secondaryButton: SECONDARY_INVERTED,
+        }
+      }
+      break
    default:
      break
  }
--- a/packages/design-system/lib/components/InfoCard/variants.ts
+++ b/packages/design-system/lib/components/InfoCard/variants.ts
@@ -50,6 +50,7 @@ export const infoCardConfig = {
      [Theme.hotelNorge]: undefined,
      [Theme.marski]: undefined,
      [Theme.theDock]: undefined,
+      [Theme.bassinSeven]: undefined,
    },
  },
  compoundVariants: [
--- a/packages/design-system/lib/components/Input/input.module.css
+++ b/packages/design-system/lib/components/Input/input.module.css
@@ -12,7 +12,7 @@
  align-content: center;
  background-color: var(--Surface-Primary-Default);
  border: 1px solid var(--Border-Interactive-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: grid;
  min-width: 0; /* allow shrinkage */
  height: 56px;
--- a/packages/design-system/lib/components/JsonToHtml/jsontohtml.module.css
+++ b/packages/design-system/lib/components/JsonToHtml/jsontohtml.module.css
@@ -48,7 +48,7 @@
  position: relative;
  width: 100%;
  height: 365px;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  margin: var(--Space-x3) 0;
  overflow: hidden;
 }
--- a/packages/design-system/lib/components/Lightbox/FullView/fullView.module.css
+++ b/packages/design-system/lib/components/Lightbox/FullView/fullView.module.css
@@ -54,7 +54,7 @@

 .image {
  object-fit: contain;
-  border-radius: var(--Corner-radius-Medium);
+  border-radius: var(--Corner-Radius-Medium);
  /* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
  width: auto !important;
  height: auto !important;
--- a/packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
+++ b/packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css
@@ -41,7 +41,7 @@
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);

  &:focus-visible {
    outline: 2px solid var(--Border-Interactive-Focus);
@@ -120,7 +120,7 @@
  .caption {
    background-color: var(--Base-Surface-Subtle-Normal);
    padding: var(--Space-x05) var(--Space-x1);
-    border-radius: var(--Corner-radius-sm);
+    border-radius: var(--Corner-Radius-sm);
    color: var(--Text-Secondary);
  }

@@ -140,7 +140,7 @@

  .mainImage {
    object-fit: contain;
-    border-radius: var(--Corner-radius-sm);
+    border-radius: var(--Corner-Radius-sm);
    /* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
    width: auto !important;
    height: auto !important;
@@ -167,7 +167,7 @@
  }

  .thumbnailContainer img {
-    border-radius: var(--Corner-radius-sm);
+    border-radius: var(--Corner-Radius-sm);
  }

  .navigationButton {
--- a/packages/design-system/lib/components/Lightbox/lightbox.module.css
+++ b/packages/design-system/lib/components/Lightbox/lightbox.module.css
@@ -31,7 +31,7 @@
    overflow: hidden;

    &:not(.fullViewContent) {
-      border-radius: var(--Corner-radius-lg);
+      border-radius: var(--Corner-Radius-lg);
    }

    &.fullViewContent {
--- a/packages/design-system/lib/components/LinkList/LinkListItem/linkListItem.module.css
+++ b/packages/design-system/lib/components/LinkList/LinkListItem/linkListItem.module.css
@@ -12,11 +12,11 @@
 }

 .linkListItem:first-child {
-  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
+  border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
 }

 .linkListItem:last-child {
-  border-radius: 0 0 var(--Corner-radius-md) var(--Corner-radius-md);
+  border-radius: 0 0 var(--Corner-Radius-md) var(--Corner-Radius-md);
 }

 .linkListItem:hover {
@@ -42,7 +42,7 @@

 .illustrationWrapper {
  position: relative;
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  background-color: var(--Surface-Primary-Hover-Accent);
  width: 80px;
  height: 80px;
--- a/packages/design-system/lib/components/Map/InfoWindow/infoWindow.module.css
+++ b/packages/design-system/lib/components/Map/InfoWindow/infoWindow.module.css
@@ -7,7 +7,7 @@

 .content {
  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
--- a/packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/HotelPin/hotelPin.module.css
+++ b/packages/design-system/lib/components/Map/InteractiveMap/HotelListingMapContent/HotelPin/hotelPin.module.css
@@ -4,7 +4,7 @@
  align-items: center;
  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);
+  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(--Space-x1);
--- a/packages/design-system/lib/components/Map/InteractiveMap/PoiMapMarkers/poiMapMarkers.module.css
+++ b/packages/design-system/lib/components/Map/InteractiveMap/PoiMapMarkers/poiMapMarkers.module.css
@@ -20,7 +20,7 @@
  justify-content: center;
  align-items: center;
  padding: var(--Space-x05);
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  background-color: var(--Surface-UI-Fill-Default);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  gap: var(--Space-x1);
--- a/packages/design-system/lib/components/Map/Markers/HotelMarker/SignatureHotel/BassinSeven.tsx
+++ b/packages/design-system/lib/components/Map/Markers/HotelMarker/SignatureHotel/BassinSeven.tsx
--- a/packages/design-system/lib/components/Map/Markers/HotelMarker/SignatureHotel/BassinSevenSmall.tsx
+++ b/packages/design-system/lib/components/Map/Markers/HotelMarker/SignatureHotel/BassinSevenSmall.tsx
--- a/Show More
+++ b/Show More