Merged in chore/BOOK-773-replace-old-typography-variables (pull request #3515)

Chore/BOOK-773 replace old typography variables

* chore(BOOK-773): Replaced body typography

* chore(BOOK-773): Replaced caption typography

* chore(BOOK-773): Replaced footnote typography

* chore(BOOK-773): Replaced subtitle typography


Approved-by: Bianca Widstam

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx

@@ -1,13 +1,11 @@
-import Footnote from "@scandic-hotels/design-system/Footnote"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./list.module.css"
 
 export default function Label({ children }: React.PropsWithChildren) {
   return (
-    <li className={styles.label}>
-      <Footnote color="uiTextPlaceholder" textTransform="uppercase">
-        {children}
-      </Footnote>
-    </li>
+    <Typography variant="Title/Overline/sm">
+      <li className={styles.label}>{children}</li>
+    </Typography>
   )
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css

@@ -5,5 +5,6 @@
 }
 
 .label {
-  padding: 0 var(--Space-x1);
+  padding: 0 var(--Space-x1) var(--Space-x05);
+  color: var(--Text-Tertiary);
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -192,16 +191,14 @@ export default function SearchList({
         {typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
           <>
             <Divider className={styles.noResultsDivider} />
-            <Footnote
-              className={styles.text}
-              color="uiTextPlaceholder"
-              textTransform="uppercase"
-            >
-              {intl.formatMessage({
-                id: "bookingWidget.searchList.latestSearches",
-                defaultMessage: "Latest searches",
-              })}
-            </Footnote>
+            <Typography variant="Title/Overline/sm">
+              <p className={styles.text}>
+                {intl.formatMessage({
+                  id: "bookingWidget.searchList.latestSearches",
+                  defaultMessage: "Latest searches",
+                })}
+              </p>
+            </Typography>
             <List
               getItemProps={getItemProps}
               highlightedIndex={highlightedIndex}
@@ -226,12 +223,14 @@ export default function SearchList({
   if (displaySearchHistory) {
     return (
       <Dialog getMenuProps={getMenuProps}>
-        <Footnote color="uiTextPlaceholder" textTransform="uppercase">
-          {intl.formatMessage({
-            id: "bookingWidget.searchList.latestSearches",
-            defaultMessage: "Latest searches",
-          })}
-        </Footnote>
+        <Typography variant="Title/Overline/sm">
+          <p className={styles.text}>
+            {intl.formatMessage({
+              id: "bookingWidget.searchList.latestSearches",
+              defaultMessage: "Latest searches",
+            })}
+          </p>
+        </Typography>
         <List
           getItemProps={getItemProps}
           highlightedIndex={highlightedIndex}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css

@@ -33,6 +33,7 @@
 
 .text {
   padding: 0 var(--Space-x1);
+  color: var(--Text-Tertiary);
   white-space: normal;
 }
 .textPlaceholderColor {