Feat/BOOK-63 hotel subpages branding

* feat(BOOK-63): Replaced css variables and components to apply hotel branding on subpages
* feat(BOOK-63): Replaced css variables and components to apply hotel branding on hotel page map view

Approved-by: Christel Westerberg
Approved-by: Matilda Landström

packages/design-system/lib/components/ParkingInformation/ParkingList/index.tsx

@@ -37,9 +37,9 @@ export default function ParkingList({
 
   return (
     <Typography variant="Body/Paragraph/mdRegular">
-      <ul className={styles.listStyling}>
+      <ul className={styles.list}>
         {numberOfChargingSpaces ? (
-          <li>
+          <li className={styles.listItem}>
             {intl.formatMessage(
               {
                 id: 'parkingInformation.numberOfChargingPoints',
@@ -50,13 +50,13 @@ export default function ParkingList({
             )}
           </li>
         ) : null}
-        <li>
+        <li className={styles.listItem}>
           {canMakeReservation
             ? canMakeReservationYesMsg
             : canMakeReservationNoMsg}
         </li>
         {numberOfParkingSpots ? (
-          <li>
+          <li className={styles.listItem}>
             {intl.formatMessage(
               {
                 id: 'parkingInformation.numberOfParkingSpots',
@@ -67,7 +67,7 @@ export default function ParkingList({
           </li>
         ) : null}
         {distanceToHotel ? (
-          <li>
+          <li className={styles.listItem}>
             {intl.formatMessage(
               {
                 id: 'parkingInformation.distanceToHotel',
@@ -78,7 +78,7 @@ export default function ParkingList({
           </li>
         ) : null}
         {address ? (
-          <li>
+          <li className={styles.listItem}>
             {intl.formatMessage(
               {
                 id: 'parkingInformation.address',

packages/design-system/lib/components/ParkingInformation/ParkingList/parkingList.module.css

@@ -1,11 +1,24 @@
-.listStyling {
+.list {
+  display: grid;
+  gap: var(--Space-x1);
   list-style-type: none;
 }
 
-.listStyling > li::before {
-  content: url('/_static/icons/heart.svg');
-  position: relative;
-  height: 8px;
-  top: 3px;
-  margin-right: var(--Spacing-x1);
+.listItem {
+  display: flex;
+  gap: var(--Space-x1);
+
+  &::before {
+    content: '';
+    position: relative;
+    top: 3px;
+    display: inline-flex;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    background-color: var(--Icon-Accent);
+    mask-image: url('/_static/icons/heart.svg');
+    mask-size: contain;
+    mask-repeat: no-repeat;
+  }
 }

packages/design-system/lib/components/ParkingInformation/index.tsx

@@ -2,10 +2,10 @@
 
 import { useIntl } from 'react-intl'
 
+import ButtonLink from '../ButtonLink'
 import { Divider } from '../Divider'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'
-import ButtonLink from '../ButtonLink'
 import ParkingList from './ParkingList'
 import ParkingPrices from './ParkingPrices'
 
@@ -88,6 +88,7 @@ export default function ParkingInformation({
       {parking.externalParkingUrl && showExternalParkingButton && (
         <ButtonLink
           typography="Body/Paragraph/mdBold"
+          size="Medium"
           href={parking.externalParkingUrl}
           target="_blank"
         >

packages/design-system/lib/components/ParkingInformation/parkingInformation.module.css

@@ -1,20 +1,20 @@
 .parkingInformation {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .list,
 .prices {
   display: grid;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }
 
 .priceWrapper {
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
   border-radius: var(--Corner-radius-md);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
+  padding: var(--Space-x2) var(--Space-x3);
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .heading {