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/Map/Markers/PoiMarker/index.tsx

@@ -1,19 +1,14 @@
 import { IconByIconName } from '../../../Icons/IconByIconName'
 
-import { getIconByPoiGroupAndCategory } from '../utils'
+import {
+  getIconByPoiGroupAndCategory,
+  type PointOfInterestGroup,
+} from '../utils'
 import { poiVariants } from './variants'
 
-import { VariantProps } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
 
-export type PointOfInterestGroup =
-  | 'Public transport'
-  | 'Attractions'
-  | 'Business'
-  | 'Location'
-  | 'Parking'
-  | 'Shopping & Dining'
-
-export interface PoiMarkerProps extends VariantProps<typeof poiVariants> {
+interface PoiMarkerProps extends VariantProps<typeof poiVariants> {
   group: PointOfInterestGroup
   categoryName?: string
   className?: string
@@ -33,7 +28,7 @@ export function PoiMarker({
     <span className={classNames}>
       <IconByIconName
         iconName={iconName}
-        color={skipBackground ? 'Icon/Feedback/Neutral' : 'Icon/Inverted'}
+        color={skipBackground ? 'CurrentColor' : 'Icon/Inverted'}
         size={size === 'small' ? 16 : size === 'large' ? 24 : 20}
       />
     </span>

packages/design-system/lib/components/Map/Markers/PoiMarker/poiMarker.module.css

@@ -1,9 +1,37 @@
-.icon {
+.poiMarker {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: var(--Corner-radius-rounded);
-  background-color: var(--Surface-UI-Fill-Default);
+  background-color: var(--Surface-Feedback-Neutral);
+
+  > span {
+    display: inline-flex;
+  }
+
+  &.skipBackground {
+    background-color: transparent;
+    padding: 0;
+  }
+}
+
+.shoppingDining {
+  background-color: var(--Surface-Accent-1);
+}
+.publicTransport {
+  background-color: var(--Surface-Accent-2);
+}
+.attractions {
+  background-color: var(--Surface-Accent-3);
+}
+.business {
+  background-color: var(--Surface-Accent-4);
+}
+.parking {
+  background-color: var(--Surface-Accent-5);
+}
+.location {
+  background-color: var(--Surface-Feedback-Neutral);
 }
 
 .small {
@@ -14,27 +42,3 @@
   width: var(--Space-x4);
   height: var(--Space-x4);
 }
-
-.attractions {
-  background-color: var(--Surface-Accent-3);
-}
-.business {
-  background-color: var(--Surface-Accent-4);
-}
-.location {
-  background-color: var(--Surface-Feedback-Neutral);
-}
-.parking {
-  background-color: var(--Surface-Accent-5);
-}
-.publicTransport {
-  background-color: var(--Surface-Accent-2);
-}
-.shoppingDining {
-  background-color: var(--Surface-Accent-1);
-}
-
-.icon.transparent {
-  background-color: transparent;
-  padding: 0;
-}

packages/design-system/lib/components/Map/Markers/PoiMarker/variants.ts

@@ -1,9 +1,9 @@
 import { cva } from 'class-variance-authority'
 
-import styles from './poi.module.css'
-import { PointOfInterestGroup } from '.'
+import type { PointOfInterestGroup } from '../utils'
+import styles from './poiMarker.module.css'
 
-export const poiVariants = cva(styles.icon, {
+export const poiVariants = cva(styles.poiMarker, {
   variants: {
     group: {
       ['Attractions']: styles.attractions,
@@ -14,7 +14,7 @@ export const poiVariants = cva(styles.icon, {
       ['Shopping & Dining']: styles.shoppingDining,
     } satisfies Record<PointOfInterestGroup, string>,
     skipBackground: {
-      true: styles.transparent,
+      true: styles.skipBackground,
       false: '',
     },
     size: {

packages/design-system/lib/components/Map/Markers/utils.ts

@@ -1,5 +1,12 @@
 import { IconName } from '../../Icons/iconName'
-import { PointOfInterestGroup } from './PoiMarker'
+
+export type PointOfInterestGroup =
+  | 'Public transport'
+  | 'Attractions'
+  | 'Business'
+  | 'Location'
+  | 'Parking'
+  | 'Shopping & Dining'
 
 export function getIconByPoiGroupAndCategory(
   group: PointOfInterestGroup,