Merged in chore/replace-deprecated-body (pull request #3300)

Replace deprecated <Body> with <Typography> * chore: replace deprecated body component * refactor: replace Body component with Typography across various components * merge Approved-by: Bianca Widstam Approved-by: Matilda Landström
2025-12-09 12:45:34 +00:00
parent f40035baa9
commit 7eb74ea239
69 changed files with 755 additions and 899 deletions
--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
@@ -2,7 +2,6 @@

 import { useIntl } from "react-intl"

-import Body from "@scandic-hotels/design-system/Body"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { AddToCalendar } from "../../AddToCalendar"
@@ -17,8 +16,10 @@ import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConf
 import type { EventAttributes } from "ics"
 import type { MutableRefObject } from "react"

-interface BookingConfirmationHeaderProps
-  extends Pick<BookingConfirmation, "booking" | "hotel"> {
+interface BookingConfirmationHeaderProps extends Pick<
+  BookingConfirmation,
+  "booking" | "hotel"
+> {
  mainRef: MutableRefObject<HTMLElement | null>
 }

@@ -69,7 +70,9 @@ export function Header({
          <h2 className={styles.hotelTitle}>{hotel.name}</h2>
        </Typography>
      </hgroup>
-      <Body className={styles.body}>{text}</Body>
+      <Typography variant="Body/Paragraph/mdRegular" className={styles.body}>
+        <p>{text}</p>
+      </Typography>
      <div className={styles.actions}>
        <AddToCalendar
          checkInDate={booking.checkInDate}
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
@@ -193,9 +193,7 @@ export default function BookingCode() {
              }
            >
              <Switch name="bookingCode.remember" className="mobile-switch">
-                <Typography
-                  variant="Body/Supporting text (caption)/smRegular"
-                >
+                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <span>
                    {intl.formatMessage({
                      id: "bookingWidget.bookingCode.remember",
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/index.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, type InputHTMLAttributes } from "react"
 import { Input as InputRAC } from "react-aria-components"

-import Body from "@scandic-hotels/design-system/Body"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import styles from "./input.module.css"

@@ -10,8 +10,8 @@ export const Input = forwardRef<
  InputHTMLAttributes<HTMLInputElement>
 >(function InputComponent(props, ref) {
  return (
-    <Body asChild color="uiTextHighContrast">
+    <Typography variant="Body/Paragraph/mdRegular">
      <InputRAC {...props} ref={ref} className={styles.input} />
-    </Body>
+    </Typography>
  )
 })
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/input.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/input.module.css
@@ -7,6 +7,8 @@
  width: 100%;
  z-index: 2;

+  color: var(--UI-Text-High-contrast);
+
  &:placeholder-shown::-webkit-search-cancel-button {
    display: none;
    background-image: url("/_static/icons/cancel.svg");
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx
@@ -1,8 +1,10 @@
-import Body from "@scandic-hotels/design-system/Body"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { listItemVariants } from "./variants"

+import styles from "./listItem.module.css"
+
 import type { AutoCompleteLocation } from "@scandic-hotels/trpc/routers/autocomplete/schema"
 import type { PropGetters } from "downshift"

@@ -31,11 +33,19 @@ export default function ListItem({
        item: location,
      })}
    >
-      <Body color="black" textTransform="bold">
-        {location.name}
-      </Body>
+      <Typography
+        variant="Body/Paragraph/mdBold"
+        className={styles.locationName}
+      >
+        <p>{location.name}</p>
+      </Typography>
      {location.destination && (
-        <Body color="uiTextPlaceholder">{location.destination}</Body>
+        <Typography
+          variant="Body/Paragraph/mdRegular"
+          className={styles.locationDestination}
+        >
+          <p>{location.destination}</p>
+        </Typography>
      )}
    </li>
  )
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
@@ -11,3 +11,11 @@
 .active {
  background-color: var(--Surface-Primary-Hover);
 }
+
+.locationName {
+  color: var(--Main-Grey-100);
+}
+
+.locationDestination {
+  color: var(--UI-Text-Placeholder);
+}
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
@@ -1,14 +1,15 @@
 "use client"
+import { cx } from "class-variance-authority"
 import { useEffect } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"

-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 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"

 import useLang from "../../../../../../hooks/useLang"
@@ -172,19 +173,23 @@ export default function SearchList({
  if (!hasAutocompleteItems && debouncedSearch) {
    return (
      <Dialog getMenuProps={getMenuProps} variant="error">
-        <Body className={styles.text} textTransform="bold">
-          {intl.formatMessage({
-            id: "bookingWidget.searchList.noResults",
-            defaultMessage: "No results",
-          })}
-        </Body>
-        <Body className={styles.text} color="uiTextPlaceholder">
-          {intl.formatMessage({
-            id: "bookingWidget.searchList.noResultsDesc",
-            defaultMessage:
-              "We couldn't find a matching location for your search.",
-          })}
-        </Body>
+        <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
+          <p>
+            {intl.formatMessage({
+              id: "bookingWidget.searchList.noResults",
+              defaultMessage: "No results",
+            })}
+          </p>
+        </Typography>
+        <Typography className={cx(styles.text, styles.textPlaceholderColor)}>
+          <p>
+            {intl.formatMessage({
+              id: "bookingWidget.searchList.noResultsDesc",
+              defaultMessage:
+                "We couldn't find a matching location for your search.",
+            })}
+          </p>
+        </Typography>
        {typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
          <>
            <Divider className={styles.noResultsDivider} />
@@ -305,7 +310,9 @@ function SearchListError({
        <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
        {caption}
      </Caption>
-      <Body>{body}</Body>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>{body}</p>
+      </Typography>
    </Dialog>
  )
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
@@ -33,3 +33,6 @@
 .text {
  padding: 0 var(--Space-x1);
 }
+.textPlaceholderColor {
+  color: var(--UI-Text-Placeholder);
+}
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"

 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -137,14 +136,14 @@ export default function DatePickerRangeMobile({
          size="large"
          theme="base"
        >
-          <Body color="white" textTransform="bold" asChild>
+          <Typography variant="Body/Paragraph/mdBold">
            <span>
              {intl.formatMessage({
                id: "datePicker.selectDates",
                defaultMessage: "Select dates",
              })}
            </span>
-          </Body>
+          </Typography>
        </Button>
      </footer>
    </div>
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
@@ -92,6 +92,7 @@ div.months {

 .footer .button {
  width: 100%;
+  color: var(--UI-Opacity-White-100);
 }

 td.day,
--- a/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx
@@ -6,11 +6,11 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 import RadioCard from "@scandic-hotels/design-system/Form/RadioCard"
 import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon"
 import NoBreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/NoBreakfastBuffetIcon"
 import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trackBreakfastSelection } from "@scandic-hotels/tracking/booking"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"

@@ -95,15 +95,17 @@ export default function Breakfast() {
  return (
    <FormProvider {...methods}>
      <div className={styles.container} ref={formRef}>
-        {hasChildrenInRoom ? (
-          <Body>
-            {intl.formatMessage({
-              id: "enterDetails.breakfast.childrenFreeInfo",
-              defaultMessage:
-                "Children's breakfast is always free as part of the adult's breakfast.",
-            })}
-          </Body>
-        ) : null}
+        {hasChildrenInRoom && (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>
+              {intl.formatMessage({
+                id: "enterDetails.breakfast.childrenFreeInfo",
+                defaultMessage:
+                  "Children's breakfast is always free as part of the adult's breakfast.",
+              })}
+            </p>
+          </Typography>
+        )}
        {methods.formState.errors.breakfast && (
          <div className={styles.errorContainer}>
            <MessageBanner
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"

 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
@@ -67,12 +66,14 @@ export default function MemberPriceModal() {

          {memberPrice && (
            <span className={styles.newPrice}>
-              <Body>
-                {intl.formatMessage({
-                  id: "enterDetails.memberPriceModal.newPriceLabel",
-                  defaultMessage: "The new price is",
-                })}
-              </Body>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p>
+                  {intl.formatMessage({
+                    id: "enterDetails.memberPriceModal.newPriceLabel",
+                    defaultMessage: "The new price is",
+                  })}
+                </p>
+              </Typography>
              <Subtitle type="two" color="red">
                {formatPrice(
                  intl,
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
@@ -2,8 +2,8 @@ import React from "react"
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import {
  calculateTotalRoomPrice,
@@ -136,12 +136,14 @@ function PaymentCard({
          )}
        </span>
      </Caption>
-      <Body textTransform="bold" className={styles.priceItem}>
-        {formatPrice(intl, price, currency)}
-        {isMemberRateApplied && comparisonPrice ? (
-          <span>{formatPrice(intl, comparisonPrice, currency)}</span>
-        ) : null}
-      </Body>
+      <Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
+        <p>
+          {formatPrice(intl, price, currency)}
+          {isMemberRateApplied && comparisonPrice && (
+            <span>{formatPrice(intl, comparisonPrice, currency)}</span>
+          )}
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
@@ -2,10 +2,10 @@

 import { useIntl } from "react-intl"

-import Body from "@scandic-hotels/design-system/Body"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import Link from "@scandic-hotels/design-system/OldDSLink"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import useLang from "../../../../../hooks/useLang"
@@ -26,26 +26,31 @@ export default function TimeoutSpinner() {
          defaultMessage: "Taking longer than usual",
        })}
      </Subtitle>
-      <Body textAlign="center" className={styles.messageContainer}>
-        {intl.formatMessage(
-          {
-            id: "enterDetails.payment.loadingMessage",
-            defaultMessage:
-              "We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
-          },
-          {
-            link: (text) => (
-              <Link
-                href={routes.customerService[lang]}
-                textDecoration="underline"
-                target="_blank"
-              >
-                {text}
-              </Link>
-            ),
-          }
-        )}
-      </Body>
+      <Typography
+        variant="Body/Paragraph/mdRegular"
+        className={styles.messageContainer}
+      >
+        <p>
+          {intl.formatMessage(
+            {
+              id: "enterDetails.payment.loadingMessage",
+              defaultMessage:
+                "We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
+            },
+            {
+              link: (text) => (
+                <Link
+                  href={routes.customerService[lang]}
+                  textDecoration="underline"
+                  target="_blank"
+                >
+                  {text}
+                </Link>
+              ),
+            }
+          )}
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -10,12 +10,12 @@ import {
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"

@@ -86,21 +86,25 @@ export default function PriceChangeSummary({
                      return (
                        <Fragment key={idx}>
                          <div className={styles.rowContainer}>
-                            <Body textTransform="bold">
-                              {rooms.length > 1
-                                ? intl.formatMessage(
-                                    {
-                                      id: "booking.roomIndex",
-                                      defaultMessage: "Room {roomIndex}",
-                                    },
-                                    { roomIndex: roomNumber }
-                                  )
-                                : intl.formatMessage({
-                                    id: "common.room",
-                                    defaultMessage: "Room",
-                                  })}
-                            </Body>
-                            <Body>{room.roomType}</Body>
+                            <Typography variant="Body/Paragraph/mdBold">
+                              <p>
+                                {rooms.length > 1
+                                  ? intl.formatMessage(
+                                      {
+                                        id: "booking.roomIndex",
+                                        defaultMessage: "Room {roomIndex}",
+                                      },
+                                      { roomIndex: roomNumber }
+                                    )
+                                  : intl.formatMessage({
+                                      id: "common.room",
+                                      defaultMessage: "Room",
+                                    })}
+                              </p>
+                            </Typography>
+                            <Typography variant="Body/Paragraph/mdRegular">
+                              <p>{room.roomType}</p>
+                            </Typography>
                            <div className={styles.priceRow}>
                              <Caption color="uiTextMediumContrast">
                                {intl.formatMessage({
@@ -117,16 +121,15 @@ export default function PriceChangeSummary({
                                      room.roomPrice.perStay.local.currency
                                    )}
                                  </Caption>
-                                  <Body
-                                    color="uiTextMediumContrast"
-                                    textTransform="bold"
-                                  >
-                                    {formatPrice(
-                                      intl,
-                                      newPrice,
-                                      room.roomPrice.perStay.local.currency
-                                    )}
-                                  </Body>
+                                  <Typography variant="Body/Paragraph/mdBold">
+                                    <p>
+                                      {formatPrice(
+                                        intl,
+                                        newPrice,
+                                        room.roomPrice.perStay.local.currency
+                                      )}
+                                    </p>
+                                  </Typography>
                                </div>
                              ) : (
                                <Caption color="uiTextMediumContrast">
@@ -185,26 +188,32 @@ export default function PriceChangeSummary({
                    })}
                  </div>
                  <div className={styles.rowContainer}>
-                    <Body>
-                      {intl.formatMessage({
-                        id: "common.total",
-                        defaultMessage: "Total",
-                      })}
-                    </Body>
-                    <div className={styles.priceRow}>
-                      <Body textTransform="bold">
+                    <Typography variant="Body/Paragraph/mdRegular">
+                      <p>
                        {intl.formatMessage({
-                          id: "booking.priceIncludingVat",
-                          defaultMessage: "Price including VAT",
+                          id: "common.total",
+                          defaultMessage: "Total",
                        })}
-                      </Body>
-                      <Body textTransform="bold">
-                        {formatPrice(
-                          intl,
-                          newTotalPrice.price,
-                          newTotalPrice.currency
-                        )}
-                      </Body>
+                      </p>
+                    </Typography>
+                    <div className={styles.priceRow}>
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <p>
+                          {intl.formatMessage({
+                            id: "booking.priceIncludingVat",
+                            defaultMessage: "Price including VAT",
+                          })}
+                        </p>
+                      </Typography>
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <p>
+                          {formatPrice(
+                            intl,
+                            newTotalPrice.price,
+                            newTotalPrice.currency
+                          )}
+                        </p>
+                      </Typography>
                    </div>
                  </div>
                </section>
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
@@ -56,6 +56,7 @@
 .priceRow {
  display: flex;
  justify-content: space-between;
+  color: var(--UI-Text-Medium-contrast);
 }

 .updatedPrice {
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
@@ -2,12 +2,12 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useEnterDetailsStore } from "../../../stores/enter-details"
 import { calculateTotalRoomPrice } from "../Payment/helpers"
@@ -112,20 +112,22 @@ export default function PriceChangeDialog({
                {title}
              </Title>
            </div>
-            <Body textAlign="center">
-              {intl.formatMessage(
-                {
-                  id: "enterDetails.priceChangeDialog.description",
-                  defaultMessage:
-                    "Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
-                },
-                {
-                  roomSelection: roomSelectionMsg,
-                  newRoomSelection: newRoomSelectionMsg,
-                  linebreak: <br />,
-                }
-              )}
-            </Body>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p style={{ textAlign: "center" }}>
+                {intl.formatMessage(
+                  {
+                    id: "enterDetails.priceChangeDialog.description",
+                    defaultMessage:
+                      "Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
+                  },
+                  {
+                    roomSelection: roomSelectionMsg,
+                    newRoomSelection: newRoomSelectionMsg,
+                    linebreak: <br />,
+                  }
+                )}
+              </p>
+            </Typography>
            <div>
              <Subtitle textAlign="center" color="burgundy">
                {intl.formatMessage({
@@ -137,9 +139,11 @@ export default function PriceChangeDialog({
                <Caption striked>
                  {formatPrice(intl, prevTotalPrice, currency)}
                </Caption>
-                <Body textAlign="center" textTransform="bold">
-                  {formatPrice(intl, newTotalPrice, currency)}
-                </Body>
+                <Typography variant="Body/Paragraph/mdBold">
+                  <p style={{ textAlign: "center" }}>
+                    {formatPrice(intl, newTotalPrice, currency)}
+                  </p>
+                </Typography>
              </div>
            </div>
            <PriceChangeSummary
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
@@ -8,7 +8,6 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -108,18 +107,20 @@ export default function SummaryUI({
            defaultMessage: "Booking summary",
          })}
        </Subtitle>
-        <Body className={styles.date} color="baseTextMediumContrast">
-          {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
-          <MaterialIcon
-            icon="arrow_right"
-            color="Icon/Interactive/Secondary"
-            size={15}
-          />
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {nightsMsg})
-        </Body>
+        <Typography variant="Body/Paragraph/mdRegular" className={styles.date}>
+          <p>
+            {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
+            <MaterialIcon
+              icon="arrow_right"
+              color="Icon/Interactive/Secondary"
+              size={15}
+            />
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {nightsMsg})
+          </p>
+        </Typography>
        <MaterialIcon
          className={styles.chevronIcon}
          icon="keyboard_arrow_down"
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
@@ -28,6 +28,7 @@
  gap: var(--Space-x1);
  justify-content: flex-start;
  grid-area: date;
+  color: var(--Base-Text-Medium-contrast);
 }

 .link {
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
@@ -2,11 +2,11 @@ import { useIntl } from "react-intl"

 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
 import SignupPromoDesktop from "../../../SignupPromo/Desktop"
@@ -137,15 +137,17 @@ export function DesktopSummary({
          </div>
        )}
        <div className={styles.summaryPriceTextDesktop}>
-          <Body>
-            {intl.formatMessage(
-              {
-                id: "booking.totalPriceInclVat",
-                defaultMessage: "<b>Total price</b> (incl VAT)",
-              },
-              { b: (str) => <b>{str}</b> }
-            )}
-          </Body>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "booking.totalPriceInclVat",
+                  defaultMessage: "<b>Total price</b> (incl VAT)",
+                },
+                { b: (str) => <b>{str}</b> }
+              )}
+            </p>
+          </Typography>
          <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
        </div>
        <div className={styles.summaryPrice}>
@@ -175,25 +177,31 @@ export function DesktopSummary({
                )}
              </Caption>
            )}
-            {selectedRates.totalPrice.requested ? (
-              <Body color="uiTextMediumContrast">
-                {intl.formatMessage(
-                  {
-                    id: "booking.approxValue",
-                    defaultMessage: "Approx. {value}",
-                  },
-                  {
-                    value: formatPrice(
-                      intl,
-                      selectedRates.totalPrice.requested.price,
-                      selectedRates.totalPrice.requested.currency,
-                      selectedRates.totalPrice.requested.additionalPrice,
-                      selectedRates.totalPrice.requested.additionalPriceCurrency
-                    ),
-                  }
-                )}
-              </Body>
-            ) : null}
+            {!!selectedRates.totalPrice.requested && (
+              <Typography
+                variant="Body/Paragraph/mdRegular"
+                className={styles.approxPrice}
+              >
+                <p>
+                  {intl.formatMessage(
+                    {
+                      id: "booking.approxValue",
+                      defaultMessage: "Approx. {value}",
+                    },
+                    {
+                      value: formatPrice(
+                        intl,
+                        selectedRates.totalPrice.requested.price,
+                        selectedRates.totalPrice.requested.currency,
+                        selectedRates.totalPrice.requested.additionalPrice,
+                        selectedRates.totalPrice.requested
+                          .additionalPriceCurrency
+                      ),
+                    }
+                  )}
+                </p>
+              </Typography>
+            )}
          </div>
          <div className={styles.summaryPriceTextMobile}>
            <Caption color="uiTextHighContrast">
@@ -259,12 +267,17 @@ function RateSummary({
            { roomIndex: roomIndex + 1 }
          )}
        </Subtitle>
-        <Body color="uiTextPlaceholder">
-          {intl.formatMessage({
-            id: "booking.selectRoom",
-            defaultMessage: "Select room",
-          })}
-        </Body>
+        <Typography
+          variant="Body/Paragraph/mdRegular"
+          className={styles.selectRoom}
+        >
+          <p>
+            {intl.formatMessage({
+              id: "booking.selectRoom",
+              defaultMessage: "Select room",
+            })}
+          </p>
+        </Typography>
      </div>
    )
  }
@@ -279,7 +292,12 @@ function RateSummary({
              { roomIndex: roomIndex + 1 }
            )}
          </Subtitle>
-          <Body color="uiTextMediumContrast">{room.roomInfo.roomType}</Body>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.uiTextMediumContrast}
+          >
+            <p>{room.roomInfo.roomType}</p>
+          </Typography>
          <Caption color="uiTextMediumContrast">
            {getRateDetails(room.rate)}
          </Caption>
@@ -289,7 +307,12 @@ function RateSummary({
          <Subtitle color="uiTextHighContrast">
            {room.roomInfo.roomType}
          </Subtitle>
-          <Body color="uiTextMediumContrast">{getRateDetails(room.rate)}</Body>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.uiTextMediumContrast}
+          >
+            <p>{getRateDetails(room.rate)}</p>
+          </Typography>
        </>
      )}
    </div>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -43,6 +43,9 @@
  width: 100%;
  gap: var(--Space-x4);
 }
+.approxPrice {
+  color: var(--UI-Text-Medium-contrast);
+}

 .petInfo {
  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
@@ -74,6 +77,14 @@
  display: block;
 }

+.selectRoom {
+  color: var(--UI-Text-Placeholder);
+}
+
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
@media (min-width: 1367px) {
  .summary {
    border-top: 1px solid var(--Base-Border-Subtle);
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -4,12 +4,12 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { logger } from "@scandic-hotels/common/logger"
-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
 import { useIsLoggedIn } from "../../../../../../hooks/useIsLoggedIn"
@@ -59,8 +59,12 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
        <Subtitle className={styles.subtitle} color="uiTextHighContrast">
          {selectedRate.roomInfo.roomType}
        </Subtitle>
-        <Body color="uiTextMediumContrast">{rateTitle}</Body>
-        <Body color="uiTextHighContrast">{selectedProductTitle}</Body>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <div>
+            <p className={styles.uiTextMediumContrast}>{rateTitle}</p>
+            <p className={styles.uiTextHighContrast}>{selectedProductTitle}</p>
+          </div>
+        </Typography>
      </div>
      <div className={styles.imageContainer}>
        {image?.src ? (
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
@@ -33,6 +33,14 @@ div.selectedRoomPanel p.subtitle {
  padding-bottom: var(--Space-x1);
 }

+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+
@media screen and (max-width: 767px) {
  .selectedRoomPanel {
    gap: var(--Space-x1);