Merged in feat/SW-3542-update-color-variables-to- (pull request #2970)

feat(SW-3542): Updated the color variables for MVP

Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css

@@ -8,6 +8,11 @@
   gap: var(--Space-x3);
 }
 
+.container .filterByTitle {
+  font-weight: 500;
+  color: var(--Text-Heading);
+}
+
 .facilities {
   padding-bottom: var(--Space-x3);
 }

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx

@@ -2,7 +2,6 @@ import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
@@ -116,11 +115,13 @@ export default function FilterContent({
   return (
     <aside className={`${styles.container} ${className}`}>
       <div>
-        <Title as="h4">
-          {intl.formatMessage({
-            defaultMessage: "Filter by",
-          })}
-        </Title>
+        <Typography variant={"Title/xs"} className={styles.filterByTitle}>
+          <h4>
+            {intl.formatMessage({
+              defaultMessage: "Filter by",
+            })}
+          </h4>
+        </Typography>
         <div className={styles.facilities}>
           <Typography variant="Title/Subtitle/md">
             <p>