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/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/packages/design-system/lib/components/Map/Markers/HotelMarkerByType.tsx
+++ b/packages/design-system/lib/components/Map/Markers/HotelMarkerByType.tsx
@@ -22,6 +22,8 @@ import {
  type HotelType,
 } from "@scandic-hotels/common/constants/hotelType"
 import { MarkerInfo } from "../types"
+import { BassinSevenMarker } from "./HotelMarker/SignatureHotel/BassinSeven"
+import { BassinSevenSmallMarker } from "./HotelMarker/SignatureHotel/BassinSevenSmall"

 export interface HotelMarkerByTypeProps
  extends MarkerInfo, React.SVGAttributes<HTMLOrSVGElement> {
@@ -97,4 +99,8 @@ const bySignatureHotel: Record<
    large: TheDockMarker,
    small: TheDockSmallMarker,
  },
+  [SignatureHotelEnum.BassinSeven]: {
+    large: BassinSevenMarker,
+    small: BassinSevenSmallMarker,
+  },
 }
--- a/packages/design-system/lib/components/Map/Markers/PoiMarker/poiMarker.module.css
+++ b/packages/design-system/lib/components/Map/Markers/PoiMarker/poiMarker.module.css
@@ -2,7 +2,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  background-color: var(--Surface-Feedback-Neutral);

  > span {
--- a/packages/design-system/lib/components/MessageBanner/messageBanner.module.css
+++ b/packages/design-system/lib/components/MessageBanner/messageBanner.module.css
@@ -2,7 +2,7 @@
  display: flex;
  padding: var(--Space-x15);
  background-color: var(--Surface-Primary-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  border: 1px solid var(--Border-Default);
 }

--- a/packages/design-system/lib/components/Modal/modal.module.css
+++ b/packages/design-system/lib/components/Modal/modal.module.css
@@ -10,7 +10,7 @@

 .modal {
  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
+  border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
  box-shadow: var(--modal-box-shadow);
  width: 100%;
  position: absolute;
@@ -73,7 +73,7 @@
    left: auto;
    bottom: auto;
    width: auto;
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
    max-width: var(--max-width-page);
  }

--- a/packages/design-system/lib/components/OldDSLink/link.module.css
+++ b/packages/design-system/lib/components/OldDSLink/link.module.css
@@ -75,13 +75,13 @@
  line-height: var(--typography-Body-Regular-lineHeight);
  letter-spacing: var(--typography-Body-Regular-letterSpacing);
  padding: var(--Space-x1);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  gap: var(--Space-x1);
  justify-content: space-between;

  &:hover {
    background-color: var(--Base-Surface-Primary-light-Hover-alt);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }
 }

@@ -158,7 +158,7 @@
  width: 100%;
  padding: var(--Space-x1);
  gap: var(--Space-x15);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  color: var(--Text-Interactive-Default);

  &:hover {
--- a/packages/design-system/lib/components/OpeningHours/openingHours.module.css
+++ b/packages/design-system/lib/components/OpeningHours/openingHours.module.css
@@ -2,7 +2,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/design-system/lib/components/ParkingInformation/parkingInformation.module.css
+++ b/packages/design-system/lib/components/ParkingInformation/parkingInformation.module.css
@@ -11,7 +11,7 @@

 .priceWrapper {
  background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x2) var(--Space-x3);
  display: grid;
  gap: var(--Space-x1);
--- a/packages/design-system/lib/components/Progress/progress.module.css
+++ b/packages/design-system/lib/components/Progress/progress.module.css
@@ -4,7 +4,7 @@

 .track {
  height: var(--Space-x2);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x05);
  background: var(--Surface-Secondary-Default);
  position: relative;
@@ -14,6 +14,6 @@
 .fill {
  height: 100%;
  background: var(--Surface-Brand-Primary-1-OnSurface-Accent);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  transition: width 0.3s ease;
 }
--- a/packages/design-system/lib/components/RateCard/Modal/modal.module.css
+++ b/packages/design-system/lib/components/RateCard/Modal/modal.module.css
@@ -10,7 +10,7 @@

 .modal {
  background-color: var(--Neutral-0);
-  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
+  border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
  width: 100%;
  position: absolute;
@@ -64,7 +64,7 @@
    left: auto;
    bottom: auto;
    width: auto;
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
    max-width: var(--max-width-page);
  }

--- a/packages/design-system/lib/components/RateCard/rate-card.module.css
+++ b/packages/design-system/lib/components/RateCard/rate-card.module.css
@@ -11,7 +11,7 @@
  align-items: center;
  justify-content: center;
  border: 2px solid var(--Border-Inverted);
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  background-color: var(--Surface-Feedback-Succes);
  color: var(--Icon-Inverted);
 }
@@ -20,7 +20,7 @@
  position: relative;
  background-color: var(--Scandic-Grey-00);
  border: 1px solid transparent;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: 0;
 }

@@ -31,7 +31,7 @@
  border: none;
  padding: 0;
  margin: 0;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  z-index: 1;
  cursor: pointer;

@@ -49,8 +49,8 @@

 .banner {
  background-color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
-  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);
  text-align: center;
  color: var(--Text-Inverted);
  padding: var(--Space-x05) var(--Space-x1);
@@ -184,6 +184,6 @@

 .noPricesAvailableText {
  padding: var(--Space-x15) var(--Space-x3);
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  background-color: var(--Scandic-Beige-10);
 }
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -2,7 +2,7 @@
  position: relative;
  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);
  height: 56px;
  box-sizing: border-box;

@@ -64,7 +64,7 @@
  width: 100%;
  height: 100%;
  box-sizing: border-box;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);

  &.button {
    padding: 0 var(--Space-x15);
@@ -135,7 +135,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;
@@ -158,7 +158,7 @@
 .listBoxItem {
  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
  color: var(--Text-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  align-items: center;
  gap: var(--Space-x1);
--- a/packages/design-system/lib/components/Table/table.module.css
+++ b/packages/design-system/lib/components/Table/table.module.css
@@ -31,13 +31,13 @@
 }

 .smallRadius {
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
 }
 .mediumRadius {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }
 .largeRadius {
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
 }

 .content .thead {
--- a/packages/design-system/lib/components/TeaserCard/teaserCard.module.css
+++ b/packages/design-system/lib/components/TeaserCard/teaserCard.module.css
@@ -1,5 +1,5 @@
 .teaserCard {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
--- a/packages/design-system/lib/components/TextArea/textarea.module.css
+++ b/packages/design-system/lib/components/TextArea/textarea.module.css
@@ -11,7 +11,7 @@
 .container {
  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: block;
  min-width: 0;
  height: 138px;
--- a/packages/design-system/lib/components/Toasts/toasts.module.css
+++ b/packages/design-system/lib/components/Toasts/toasts.module.css
@@ -1,7 +1,7 @@
 .toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
-  border-radius: var(--Corner-radius-lg);
+  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);
--- a/packages/design-system/lib/components/Tooltip/tooltip.module.css
+++ b/packages/design-system/lib/components/Tooltip/tooltip.module.css
@@ -7,7 +7,7 @@
  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);
+  border-radius: var(--Corner-Radius-md);
  color: var(--Text-Inverted);
  position: absolute;
  visibility: hidden;
--- a/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css
+++ b/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css
@@ -19,7 +19,7 @@
  background-color: var(--Base-Surface-Primary-light-Normal);
  color: var(--Text-Interactive-Default);
  padding: var(--Space-x05) var(--Space-x1);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
 }

 .tripAdvisorSmall {
--- a/packages/design-system/lib/components/VideoPlayer/Button/videoPlayerButton.module.css
+++ b/packages/design-system/lib/components/VideoPlayer/Button/videoPlayerButton.module.css
@@ -1,5 +1,5 @@
 .videoPlayerButton {
-  border-radius: var(--Corner-radius-Rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  height: 56px;
  width: 56px;
@@ -73,7 +73,7 @@

 .transparentBackground {
  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-Rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  opacity: 0.5;
  position: absolute;
  inset: 0;
@@ -83,7 +83,7 @@
 .iconWrapper {
  background: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  display: flex;
  align-items: center;
  justify-content: center;
--- a/packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx
+++ b/packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx
@@ -163,7 +163,7 @@ export const Hero: Story = {
      style={{
        width: "min(100%, 1200px)",
        height: "max(20vh, 300px)",
-        borderRadius: "var(--Corner-radius-lg)",
+        borderRadius: "var(--Corner-Radius-lg)",
        margin: "auto",
        overflow: "hidden",
      }}
--- a/packages/design-system/lib/components/VideoPlayer/VideoWithCard/videoWithCard.module.css
+++ b/packages/design-system/lib/components/VideoPlayer/VideoWithCard/videoWithCard.module.css
@@ -40,7 +40,7 @@
  width: 100%;
  padding: var(--Space-x3) var(--Space-x4);
  align-content: center;
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);

  &.style-primary-1 {
    background: var(--Surface-Brand-Primary-1-Default);
--- a/packages/design-system/lib/components/VideoPlayer/videoPlayer.module.css
+++ b/packages/design-system/lib/components/VideoPlayer/videoPlayer.module.css
@@ -8,7 +8,7 @@
  z-index: 0;

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