Merged in chore/BOOK-701-replace-subtitle-component (pull request #3398)

chore(BOOK-701): replace subtitle with typography * chore(BOOK-701): replace subtitle with typography * chore(BOOK-701): align center * chore(BOOK-701): change token * chore(BOOK-701): change text color * fix(BOOK-704): revert pricechange dialog changes * chore(BOOK-701): remove subtitle from package.json Approved-by: Matilda Landström
2026-01-12 07:40:30 +00:00
parent a88b022186
commit 1b9273136a
43 changed files with 337 additions and 448 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
 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 { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"

 import AdultSelector from "../AdultSelector"
@@ -40,9 +40,9 @@ export function GuestsRoom({
  return (
    <div className={styles.roomContainer}>
      <section className={styles.roomDetailsContainer}>
-        <Subtitle type="two" className={styles.roomHeading}>
-          {roomLabel}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md" className={styles.roomHeading}>
+          <p>{roomLabel}</p>
+        </Typography>
        <AdultSelector roomIndex={index} currentAdults={room.adults} />
        <ChildSelector
          roomIndex={index}
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -9,7 +9,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
@@ -75,13 +74,18 @@ export default function MemberPriceModal() {
                  })}
                </p>
              </Typography>
-              <Subtitle type="two" color="red">
-                {formatPrice(
-                  intl,
-                  memberPrice.pricePerStay ?? 0,
-                  memberPrice.currency ?? CurrencyEnum.Unknown
-                )}
-              </Subtitle>
+              <Typography
+                variant="Title/Subtitle/md"
+                className={styles.redPrice}
+              >
+                <p>
+                  {formatPrice(
+                    intl,
+                    memberPrice.pricePerStay ?? 0,
+                    memberPrice.currency ?? CurrencyEnum.Unknown
+                  )}
+                </p>
+              </Typography>
            </span>
          )}
        </div>
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css
@@ -21,6 +21,9 @@
  gap: var(--Space-x1);
  align-items: center;
 }
+.redPrice {
+  color: var(--Text-Accent-Primary);
+}

@media screen and (min-width: 768px) {
  .modalContent {
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"

 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"
@@ -20,12 +19,14 @@ export default function TimeoutSpinner() {
  return (
    <div className={styles.container}>
      <LoadingSpinner />
-      <Subtitle className={styles.heading}>
-        {intl.formatMessage({
-          id: "enterDetails.payment.loadingTitle",
-          defaultMessage: "Taking longer than usual",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md" className={styles.heading}>
+        <p>
+          {intl.formatMessage({
+            id: "enterDetails.payment.loadingTitle",
+            defaultMessage: "Taking longer than usual",
+          })}
+        </p>
+      </Typography>
      <Typography
        variant="Body/Paragraph/mdRegular"
        className={styles.messageContainer}
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -14,7 +14,6 @@ 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"
@@ -63,12 +62,14 @@ export default function PriceChangeSummary({
            {({ close }) => (
              <div className={styles.content}>
                <header className={styles.header}>
-                  <Subtitle>
-                    {intl.formatMessage({
-                      id: "common.priceDetails",
-                      defaultMessage: "Price details",
-                    })}
-                  </Subtitle>
+                  <Typography variant="Title/Subtitle/md">
+                    <p>
+                      {intl.formatMessage({
+                        id: "common.priceDetails",
+                        defaultMessage: "Price details",
+                      })}
+                    </p>
+                  </Typography>
                  <Button
                    onPress={close}
                    variant="clean"
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
@@ -5,7 +5,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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"

@@ -129,12 +128,14 @@ export default function PriceChangeDialog({
              </p>
            </Typography>
            <div>
-              <Subtitle textAlign="center" color="burgundy">
-                {intl.formatMessage({
-                  id: "enterDetails.priceChangeDialog.newTotalLabel",
-                  defaultMessage: "New total",
-                })}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p style={{ textAlign: "center" }}>
+                  {intl.formatMessage({
+                    id: "enterDetails.priceChangeDialog.newTotalLabel",
+                    defaultMessage: "New total",
+                  })}
+                </p>
+              </Typography>
              <div className={styles.prices}>
                <Caption striked>
                  {formatPrice(intl, prevTotalPrice, currency)}
--- a/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx
@@ -8,7 +8,7 @@ import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReserva
 import { Button } from "@scandic-hotels/design-system/Button"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"

 import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
@@ -61,25 +61,28 @@ export default function SelectedRoom() {
              })}
            </h2>
          </Footnote>
-          <Subtitle
-            type="two"
+          <Typography
+            variant="Title/Subtitle/md"
            className={styles.description}
-            color="uiTextHighContrast"
          >
-            {intl.formatMessage(
-              {
-                id: "enterDetails.selectedRoom.roomType.description",
-                defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
-              },
-              {
-                roomType: room.roomType,
-                rateDescription: room.cancellationText,
-                rate: ([str]) => {
-                  return str ? <span className={styles.rate}>{str}</span> : null
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "enterDetails.selectedRoom.roomType.description",
+                  defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
                },
-              }
-            )}
-          </Subtitle>
+                {
+                  roomType: room.roomType,
+                  rateDescription: room.cancellationText,
+                  rate: ([str]) => {
+                    return str ? (
+                      <span className={styles.rate}>{str}</span>
+                    ) : null
+                  },
+                }
+              )}
+            </p>
+          </Typography>
          <Button
            variant="Text"
            size="sm"
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
@@ -11,7 +11,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "../../../../hooks/useLang"
@@ -101,12 +100,14 @@ export default function SummaryUI({
        role="button"
        onClick={isDesktop ? undefined : handleToggleSummary}
      >
-        <Subtitle className={styles.title} type="two">
-          {intl.formatMessage({
-            id: "booking.bookingSummary",
-            defaultMessage: "Booking summary",
-          })}
-        </Subtitle>
+        <Typography className={styles.title} variant="Title/Subtitle/md">
+          <p>
+            {intl.formatMessage({
+              id: "booking.bookingSummary",
+              defaultMessage: "Booking summary",
+            })}
+          </p>
+        </Typography>
        <Typography variant="Body/Paragraph/mdRegular" className={styles.date}>
          <p>
            {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
@@ -12,7 +12,6 @@ import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/No
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 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 { useGetPointsCurrency } from "../../bookingFlowConfig/bookingFlowConfigContext"
@@ -88,7 +87,9 @@ export default function ListingHotelCardDialog({
          />
          <div>
            <div className={styles.name}>
-              <Subtitle type="two">{name}</Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p>{name}</p>
+              </Typography>
            </div>
            <div className={styles.facilities}>
              {amenities.map((facility) => (
@@ -127,35 +128,47 @@ export default function ListingHotelCardDialog({
                </Caption>
              )}
              <div className={styles.listingPrices}>
-                {publicPrice && !isUserLoggedIn && memberPrice ? (
+                {publicPrice && !isUserLoggedIn ? (
                  <>
-                    <Subtitle type="two">
-                      {publicPrice} {currency}
-                    </Subtitle>
+                    <Typography variant="Title/Subtitle/md">
+                      <p>
+                        {publicPrice} {currency}
+                      </p>
+                    </Typography>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {memberPrice && <Caption>/</Caption>}
                  </>
                ) : (
                  bookingCode &&
                  publicPrice && (
-                    <Subtitle type="two" color="red">
-                      {publicPrice} {currency}
-                    </Subtitle>
+                    <Typography
+                      variant="Title/Subtitle/md"
+                      className={styles.red}
+                    >
+                      <p>
+                        {publicPrice} {currency}
+                      </p>
+                    </Typography>
                  )
                )}
                {memberPrice && (
-                  <Subtitle type="two" color="red">
-                    {intl.formatMessage(
-                      {
-                        id: "common.priceCurrency",
-                        defaultMessage: "{price} {currency}",
-                      },
-                      {
-                        price: memberPrice,
-                        currency,
-                      }
-                    )}
-                  </Subtitle>
+                  <Typography
+                    variant="Title/Subtitle/md"
+                    className={styles.red}
+                  >
+                    <p>
+                      {intl.formatMessage(
+                        {
+                          id: "common.priceCurrency",
+                          defaultMessage: "{price} {currency}",
+                        },
+                        {
+                          price: memberPrice,
+                          currency,
+                        }
+                      )}
+                    </p>
+                  </Typography>
                )}
                {redemptionPrice && (
                  <HotelPointsRow
@@ -164,31 +177,36 @@ export default function ListingHotelCardDialog({
                  />
                )}
                {chequePrice && (
-                  <Subtitle type="two">
-                    {intl.formatMessage(
-                      {
-                        id: "common.priceCurrency",
-                        defaultMessage: "{price} {currency}",
-                      },
-                      {
-                        price: chequePrice.numberOfCheques,
-                        currency: "CC",
-                      }
-                    )}
-                    {chequePrice.additionalPricePerStay > 0
-                      ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                        " + " +
-                        intl.formatMessage(
+                  <>
+                    <Typography variant="Title/Subtitle/md">
+                      <span>
+                        {intl.formatMessage(
                          {
                            id: "common.priceCurrency",
                            defaultMessage: "{price} {currency}",
                          },
                          {
-                            price: chequePrice.additionalPricePerStay,
-                            currency: chequePrice.currency,
+                            price: chequePrice.numberOfCheques,
+                            currency: "CC",
                          }
-                        )
-                      : null}
+                        )}
+                        {chequePrice.additionalPricePerStay > 0
+                          ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                            " + " +
+                            intl.formatMessage(
+                              {
+                                id: "common.priceCurrency",
+                                defaultMessage: "{price} {currency}",
+                              },
+                              {
+                                price: chequePrice.additionalPricePerStay,
+                                currency: chequePrice.currency,
+                              }
+                            )
+                          : null}
+                      </span>
+                    </Typography>
+
                    <Typography variant="Body/Paragraph/mdRegular">
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
@@ -199,20 +217,24 @@ export default function ListingHotelCardDialog({
                        })}
                      </span>
                    </Typography>
-                  </Subtitle>
+                  </>
                )}
                {voucherPrice && (
-                  <Subtitle type="two">
-                    {intl.formatMessage(
-                      {
-                        id: "common.priceCurrency",
-                        defaultMessage: "{price} {currency}",
-                      },
-                      {
-                        price: voucherPrice,
-                        currency,
-                      }
-                    )}
+                  <>
+                    <Typography variant="Title/Subtitle/md">
+                      <p>
+                        {intl.formatMessage(
+                          {
+                            id: "common.priceCurrency",
+                            defaultMessage: "{price} {currency}",
+                          },
+                          {
+                            price: voucherPrice,
+                            currency,
+                          }
+                        )}
+                      </p>
+                    </Typography>
                    <Typography variant="Body/Paragraph/mdRegular">
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
@@ -223,7 +245,7 @@ export default function ListingHotelCardDialog({
                        })}
                      </span>
                    </Typography>
-                  </Subtitle>
+                  </>
                )}
              </div>
            </div>
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
@@ -19,6 +19,10 @@
  gap: var(--Space-x15);
 }

+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .name {
  height: 48px;
  max-width: 180px;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"

 import { RateEnum } from "@scandic-hotels/common/constants/rate"
@@ -5,7 +6,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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"
@@ -152,18 +152,22 @@ export function DesktopSummary({
        </div>
        <div className={styles.summaryPrice}>
          <div className={styles.summaryPriceTextDesktop}>
-            <Subtitle
-              color={showDiscounted ? "red" : "uiTextHighContrast"}
-              textAlign="right"
+            <Typography
+              variant="Title/Subtitle/md"
+              className={cx(styles.alignRight, {
+                [styles.red]: showDiscounted,
+              })}
            >
-              {formatPrice(
-                intl,
-                selectedRates.totalPrice.local.price,
-                selectedRates.totalPrice.local.currency,
-                selectedRates.totalPrice.local.additionalPrice,
-                selectedRates.totalPrice.local.additionalPriceCurrency
-              )}
-            </Subtitle>
+              <p>
+                {formatPrice(
+                  intl,
+                  selectedRates.totalPrice.local.price,
+                  selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.additionalPriceCurrency
+                )}
+              </p>
+            </Typography>
            {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
              <Caption
                textAlign="right"
@@ -210,15 +214,20 @@ export function DesktopSummary({
                defaultMessage: "Total price",
              })}
            </Caption>
-            <Subtitle color={showDiscounted ? "red" : "uiTextHighContrast"}>
-              {formatPrice(
-                intl,
-                selectedRates.totalPrice.local.price,
-                selectedRates.totalPrice.local.currency,
-                selectedRates.totalPrice.local.additionalPrice,
-                selectedRates.totalPrice.local.additionalPriceCurrency
-              )}
-            </Subtitle>
+            <Typography
+              variant="Title/Subtitle/md"
+              className={cx({ [styles.red]: showDiscounted })}
+            >
+              <p>
+                {formatPrice(
+                  intl,
+                  selectedRates.totalPrice.local.price,
+                  selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.additionalPriceCurrency
+                )}
+              </p>
+            </Typography>
            <Footnote
              color="uiTextMediumContrast"
              className={styles.summaryPriceTextMobile}
@@ -258,18 +267,23 @@ function RateSummary({
  if (!room || !room.isSelected) {
    return (
      <div key={`unselected-${roomIndex}`}>
-        <Subtitle color="uiTextPlaceholder">
-          {intl.formatMessage(
-            {
-              id: "booking.roomIndex",
-              defaultMessage: "Room {roomIndex}",
-            },
-            { roomIndex: roomIndex + 1 }
-          )}
-        </Subtitle>
+        <Typography
+          variant="Title/Subtitle/md"
+          className={styles.placeholderText}
+        >
+          <p>
+            {intl.formatMessage(
+              {
+                id: "booking.roomIndex",
+                defaultMessage: "Room {roomIndex}",
+              },
+              { roomIndex: roomIndex + 1 }
+            )}
+          </p>
+        </Typography>
        <Typography
          variant="Body/Paragraph/mdRegular"
-          className={styles.selectRoom}
+          className={styles.placeholderText}
        >
          <p>
            {intl.formatMessage({
@@ -286,12 +300,14 @@ function RateSummary({
    <div key={roomIndex}>
      {isMultiRoom ? (
        <>
-          <Subtitle color="uiTextHighContrast">
-            {intl.formatMessage(
-              { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
-              { roomIndex: roomIndex + 1 }
-            )}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>
+              {intl.formatMessage(
+                { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
+                { roomIndex: roomIndex + 1 }
+              )}
+            </p>
+          </Typography>
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.uiTextMediumContrast}
@@ -304,9 +320,9 @@ function RateSummary({
        </>
      ) : (
        <>
-          <Subtitle color="uiTextHighContrast">
-            {room.roomInfo.roomType}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{room.roomInfo.roomType}</p>
+          </Typography>
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.uiTextMediumContrast}
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -37,6 +37,14 @@
  max-width: 264px;
 }

+.alignRight {
+  text-align: right;
+}
+
+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .summaryPrice {
  align-self: center;
  display: flex;
@@ -77,8 +85,8 @@
  display: block;
 }

-.selectRoom {
-  color: var(--UI-Text-Placeholder);
+.placeholderText {
+  color: var(--Text-Tertiary);
 }

 .uiTextMediumContrast {
--- 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
@@ -8,7 +8,6 @@ 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"
@@ -56,9 +55,9 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
            { roomIndex: roomNr }
          )}
        </Caption>
-        <Subtitle className={styles.subtitle} color="uiTextHighContrast">
-          {selectedRate.roomInfo.roomType}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
+          <p>{selectedRate.roomInfo.roomType}</p>
+        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <div>
            <p className={styles.uiTextMediumContrast}>{rateTitle}</p>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 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 { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
 import { SelectedRoomPanel } from "./SelectedRoomPanel"
@@ -116,7 +116,9 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {

        <div className={styles.header}>
          {selectedRate && !isActiveRoom ? null : (
-            <Subtitle color="uiTextHighContrast">{title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p>{title}</p>
+            </Typography>
          )}
          {selectedRate && isActiveRoom ? (
            <Button