Merged in chore/BOOK-739-replace-caption (pull request #3428)

chore(BOOK-739): replace caption with typography * chore(BOOK-739): replace caption with typography * chore(BOOK-739): refactor div * chore(BOOK-739): refactor badge * chore(BOOK-739): remove span * chore(BOOK-739): skeleton update * chore(BOOK-739): update * chore(BOOK-739): update reward * chore(BOOK-739): update voucher currency Approved-by: Erik Tiekstra
2026-01-14 09:33:27 +00:00
parent d284e82828
commit d9ec1b1f2d
53 changed files with 465 additions and 673 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
@@ -1,5 +1,6 @@
 .button {
  align-items: center;
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
  border: none;
  border-radius: var(--Corner-radius-md);
  cursor: pointer;
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx
@@ -1,18 +1,17 @@
 "use client"
 import { useIntl } from "react-intl"

-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { buttonVariants } from "./variants"

 import type { SearchListProps } from ".."

-interface ClearSearchButtonProps
-  extends Pick<
-    SearchListProps,
-    "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
-  > {
+interface ClearSearchButtonProps extends Pick<
+  SearchListProps,
+  "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
+> {
  index: number
 }

@@ -41,14 +40,14 @@ export default function ClearSearchButton({
      type="button"
    >
      <MaterialIcon icon="delete" color="Icon/Interactive/Default" size={20} />
-      <Caption color="burgundy" type="bold" asChild>
+      <Typography variant="Body/Supporting text (caption)/smBold">
        <span>
          {intl.formatMessage({
            id: "bookingWidget.search.clearSearches",
            defaultMessage: "Clear searches",
          })}
        </span>
-      </Caption>
+      </Typography>
    </button>
  )
 }
--- 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
@@ -5,7 +5,6 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"

-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"
@@ -306,10 +305,15 @@ function SearchListError({
      getMenuProps={getMenuProps}
      variant="error"
    >
-      <Caption className={styles.heading} color="red">
-        <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
-        {caption}
-      </Caption>
+      <Typography
+        variant="Body/Supporting text (caption)/smBold"
+        className={styles.heading}
+      >
+        <p>
+          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
+          {caption}
+        </p>
+      </Typography>
      <Typography
        className={styles.errorBody}
        variant="Body/Paragraph/mdRegular"
--- 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
@@ -28,6 +28,7 @@
  align-items: center;
  display: flex;
  gap: var(--Space-x1);
+  color: var(--Text-Interactive-Error);
 }

 .text {
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx
@@ -2,8 +2,8 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"

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

 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import BookingCode from "../BookingCode"
@@ -43,30 +43,25 @@ export function VoucherSkeleton() {
    <div className={styles.optionsContainer}>
      {config.bookingCodeEnabled && (
        <div className={styles.voucherSkeletonContainer}>
-          <label>
-            <Caption type="bold" color="red" asChild>
-              <span>{vouchers}</span>
-            </Caption>
-          </label>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <label>{vouchers}</label>
+          </Typography>
          <SkeletonShimmer width="100%" display="block" />
        </div>
      )}
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <div className={styles.options}>
+          <div className={cx(styles.option, styles.showOnTablet)}>
+            <SkeletonShimmer width="24px" height="24px" />
+            {vouchers}
+          </div>

-      <div className={styles.options}>
-        <div className={cx(styles.option, styles.showOnTablet)}>
-          <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
-            <span>{vouchers}</span>
-          </Caption>
+          <div className={styles.option}>
+            <SkeletonShimmer width="24px" height="24px" />
+            {reward}
+          </div>
        </div>
-
-        <div className={styles.option}>
-          <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
-            <span>{reward}</span>
-          </Caption>
-        </div>
-      </div>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
@@ -10,6 +10,7 @@
  gap: var(--Space-x2);
  margin-top: var(--Space-x2);
  align-items: center;
+  color: var(--Text-Secondary);
 }

 .optionsContainer {
@@ -18,6 +19,7 @@
 }
 .voucherSkeletonContainer {
  padding: var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Secondary);
 }

 .checkbox {
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css
@@ -3,3 +3,7 @@
  justify-content: space-between;
  align-items: center;
 }
+
+.label {
+  color: var(--Text-Default);
+}
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx
@@ -3,8 +3,8 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"

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

 import styles from "./adult-selector.module.css"

@@ -38,9 +38,12 @@ export default function AdultSelector({

  return (
    <section className={styles.container}>
-      <Caption color="uiTextHighContrast" type="bold">
-        {adultsLabel}
-      </Caption>
+      <Typography
+        variant="Body/Supporting text (caption)/smBold"
+        className={styles.label}
+      >
+        <p>{adultsLabel}</p>
+      </Typography>
      <Stepper
        count={currentAdults}
        handleOnDecrease={decreaseAdultsCount}
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css
@@ -4,8 +4,8 @@
  align-items: center;
 }

-.captionBold {
-  font-weight: 600;
+.label {
+  color: var(--Text-Default);
 }

 .childInfoContainer {
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx
@@ -55,7 +55,10 @@ export default function ChildSelector({
  return (
    <>
      <section className={styles.container}>
-        <Typography variant="Body/Supporting text (caption)/smBold">
+        <Typography
+          variant="Body/Supporting text (caption)/smBold"
+          className={styles.label}
+        >
          <p>{childrenLabel}</p>
        </Typography>
        <Stepper
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -34,6 +34,7 @@
 }

 .roomHeading {
+  color: var(--Text-Default);
  margin-bottom: var(--Space-x1);
 }

--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/index.tsx
@@ -8,8 +8,8 @@ import {
 } from "react-hook-form"
 import { useIntl } from "react-intl"

-import Caption from "@scandic-hotels/design-system/Caption"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import useLang from "../../../../../hooks/useLang"
@@ -70,14 +70,14 @@ export default function Signup({
          }}
        >
          <header>
-            <Caption type="bold">
+            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.required}>
                {intl.formatMessage({
                  id: "common.birthDate",
                  defaultMessage: "Birth date",
                })}
              </span>
-            </Caption>
+            </Typography>
          </header>
          <DateSelect
            labels={{
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
@@ -2,7 +2,6 @@ import React from "react"
 import { useIntl } from "react-intl"

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

 import {
@@ -115,27 +114,25 @@ function PaymentCard({

  return (
    <div className={styles.card}>
-      <Caption
-        type="bold"
-        textTransform="uppercase"
-        className={styles.cardTitle}
-      >
-        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-        {title}{" "}
-        <span>
+      <Typography variant="Tag/sm">
+        <p>
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {"/ "}
-          {intl.formatMessage(
-            {
-              id: "booking.roomIndex",
-              defaultMessage: "Room {roomIndex}",
-            },
-            {
-              roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
-            }
-          )}
-        </span>
-      </Caption>
+          {title}{" "}
+          <span className={styles.roomInfo}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {"/ "}
+            {intl.formatMessage(
+              {
+                id: "booking.roomIndex",
+                defaultMessage: "Room {roomIndex}",
+              },
+              {
+                roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
+              }
+            )}
+          </span>
+        </p>
+      </Typography>
      <Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
        <p>
          {formatPrice(intl, price, currency)}
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
@@ -13,12 +13,8 @@
  border-radius: var(--Corner-radius-md);
 }

-.cardTitle {
-  text-transform: uppercase;
-}
-
-.cardTitle > span {
-  color: var(--UI-Text-Placeholder);
+.roomInfo {
+  color: var(--Text-Tertiary);
 }

 .card.inactive {
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -10,7 +10,6 @@ import {
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-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"
@@ -107,21 +106,28 @@ export default function PriceChangeSummary({
                              <p>{room.roomType}</p>
                            </Typography>
                            <div className={styles.priceRow}>
-                              <Caption color="uiTextMediumContrast">
-                                {intl.formatMessage({
-                                  id: "priceDetails.roomCharge",
-                                  defaultMessage: "Room charge",
-                                })}
-                              </Caption>
+                              <Typography variant="Body/Supporting text (caption)/smRegular">
+                                <p>
+                                  {intl.formatMessage({
+                                    id: "priceDetails.roomCharge",
+                                    defaultMessage: "Room charge",
+                                  })}
+                                </p>
+                              </Typography>
                              {newPrice ? (
                                <div className={styles.updatedPrice}>
-                                  <Caption color="uiTextMediumContrast" striked>
-                                    {formatPrice(
-                                      intl,
-                                      room.roomPrice.perStay.local.price,
-                                      room.roomPrice.perStay.local.currency
-                                    )}
-                                  </Caption>
+                                  <Typography
+                                    variant="Body/Supporting text (caption)/smRegular"
+                                    className={styles.prevPrice}
+                                  >
+                                    <p>
+                                      {formatPrice(
+                                        intl,
+                                        room.roomPrice.perStay.local.price,
+                                        room.roomPrice.perStay.local.currency
+                                      )}
+                                    </p>
+                                  </Typography>
                                  <Typography variant="Body/Paragraph/mdBold">
                                    <p>
                                      {formatPrice(
@@ -133,32 +139,38 @@ export default function PriceChangeSummary({
                                  </Typography>
                                </div>
                              ) : (
-                                <Caption color="uiTextMediumContrast">
-                                  {formatPrice(
-                                    intl,
-                                    room.roomPrice.perStay.local.price,
-                                    room.roomPrice.perStay.local.currency
-                                  )}
-                                </Caption>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {formatPrice(
+                                      intl,
+                                      room.roomPrice.perStay.local.price,
+                                      room.roomPrice.perStay.local.currency
+                                    )}
+                                  </p>
+                                </Typography>
                              )}
                            </div>
                            {room.breakfast && (
                              <div className={styles.priceRow}>
-                                <Caption color="uiTextMediumContrast">
-                                  {intl.formatMessage({
-                                    id: "enterDetails.priceChangeDialog.breakfastCharge",
-                                    defaultMessage: "Breakfast charge",
-                                  })}
-                                </Caption>
-                                <Caption color="uiTextMediumContrast">
-                                  {formatPrice(
-                                    intl,
-                                    Number(
-                                      room.breakfast.localPrice.totalPrice
-                                    ),
-                                    room.breakfast.localPrice.currency
-                                  )}
-                                </Caption>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {intl.formatMessage({
+                                      id: "enterDetails.priceChangeDialog.breakfastCharge",
+                                      defaultMessage: "Breakfast charge",
+                                    })}
+                                  </p>
+                                </Typography>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {formatPrice(
+                                      intl,
+                                      Number(
+                                        room.breakfast.localPrice.totalPrice
+                                      ),
+                                      room.breakfast.localPrice.currency
+                                    )}
+                                  </p>
+                                </Typography>
                              </div>
                            )}
                            {room.roomFeatures?.map((feature) => (
@@ -166,20 +178,24 @@ export default function PriceChangeSummary({
                                className={styles.priceRow}
                                key={feature.itemCode}
                              >
-                                <Caption color="uiTextMediumContrast">
-                                  {getRoomFeatureDescription(
-                                    feature.code,
-                                    feature.description,
-                                    intl
-                                  )}
-                                </Caption>
-                                <Caption color="uiTextMediumContrast">
-                                  {formatPrice(
-                                    intl,
-                                    Number(feature.localPrice.totalPrice),
-                                    feature.localPrice.currency
-                                  )}
-                                </Caption>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {getRoomFeatureDescription(
+                                      feature.code,
+                                      feature.description,
+                                      intl
+                                    )}
+                                  </p>
+                                </Typography>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {formatPrice(
+                                      intl,
+                                      Number(feature.localPrice.totalPrice),
+                                      feature.localPrice.currency
+                                    )}
+                                  </p>
+                                </Typography>
                              </div>
                            ))}
                          </div>
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
@@ -59,6 +59,10 @@
  color: var(--UI-Text-Medium-contrast);
 }

+.prevPrice {
+  text-decoration: line-through;
+}
+
 .updatedPrice {
  display: flex;
  align-items: center;
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
@@ -2,7 +2,6 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"

 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 { Typography } from "@scandic-hotels/design-system/Typography"
@@ -131,9 +130,12 @@ export default function PriceChangeDialog({
                </p>
              </Typography>
              <div className={styles.prices}>
-                <Caption striked>
-                  {formatPrice(intl, prevTotalPrice, currency)}
-                </Caption>
+                <Typography
+                  variant="Body/Supporting text (caption)/smRegular"
+                  className={styles.prevPrice}
+                >
+                  <p>{formatPrice(intl, prevTotalPrice, currency)}</p>
+                </Typography>
                <Typography variant="Body/Paragraph/mdBold">
                  <p style={{ textAlign: "center" }}>
                    {formatPrice(intl, newTotalPrice, currency)}
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
@@ -63,6 +63,10 @@
  width: 100dvw;
 }

+.prevPrice {
+  text-decoration: line-through;
+}
+
 .header {
  display: flex;
  flex-direction: column;
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
@@ -4,7 +4,7 @@ import { useState } from "react"
 import { useIntl } from "react-intl"

 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
 import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
@@ -61,6 +61,20 @@ export default function ListingHotelCardDialog({
    defaultMessage: "Not enough points",
  })
  const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints
+  const label = redemptionPrice
+    ? intl.formatMessage({
+        id: "hotelCard.availableRates",
+        defaultMessage: "Available rates",
+      })
+    : chequePrice || voucherPrice
+      ? intl.formatMessage({
+          id: "common.from",
+          defaultMessage: "From",
+        })
+      : intl.formatMessage({
+          id: "listingHotelCardDialog.perNightFrom",
+          defaultMessage: "Per night from",
+        })

  return (
    <div className={styles.container}>
@@ -112,21 +126,10 @@ export default function ListingHotelCardDialog({
        chequePrice ? (
          <div className={styles.bottomContainer}>
            <div className={styles.pricesContainer}>
-              {redemptionPrice ? (
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    id: "hotelCard.availableRates",
-                    defaultMessage: "Available rates",
-                  })}
-                </Caption>
-              ) : (
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    id: "listingHotelCardDialog.perNightFrom",
-                    defaultMessage: "Per night from",
-                  })}
-                </Caption>
-              )}
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{label}</p>
+              </Typography>
+
              <div className={styles.listingPrices}>
                {publicPrice && !isUserLoggedIn ? (
                  <>
@@ -135,8 +138,15 @@ export default function ListingHotelCardDialog({
                        {publicPrice} {currency}
                      </p>
                    </Typography>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    {memberPrice && <Caption>/</Caption>}
+                    {memberPrice && (
+                      <Typography
+                        variant="Body/Supporting text (caption)/smRegular"
+                        className={styles.divider}
+                      >
+                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                        <p>/</p>
+                      </Typography>
+                    )}
                  </>
                ) : (
                  bookingCode &&
@@ -206,44 +216,12 @@ export default function ListingHotelCardDialog({
                          : null}
                      </span>
                    </Typography>
-
-                    <Typography variant="Body/Paragraph/mdRegular">
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                      <span>
-                        /
-                        {intl.formatMessage({
-                          id: "common.night",
-                          defaultMessage: "night",
-                        })}
-                      </span>
-                    </Typography>
                  </>
                )}
                {voucherPrice && (
                  <>
                    <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>
-                        /
-                        {intl.formatMessage({
-                          id: "common.night",
-                          defaultMessage: "night",
-                        })}
-                      </span>
+                      <p>{formatPrice(intl, voucherPrice, currency)}</p>
                    </Typography>
                  </>
                )}
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
@@ -19,6 +19,9 @@
  gap: var(--Space-x15);
 }

+.divider {
+  color: var(--Text-Tertiary);
+}
 .red {
  color: var(--Text-Accent-Primary);
 }
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
@@ -3,8 +3,6 @@ import { useIntl } from "react-intl"

 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 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 { Typography } from "@scandic-hotels/design-system/Typography"

@@ -148,7 +146,12 @@ export function DesktopSummary({
              )}
            </p>
          </Typography>
-          <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>{summaryPriceText}</p>
+          </Typography>
        </div>
        <div className={styles.summaryPrice}>
          <div className={styles.summaryPriceTextDesktop}>
@@ -169,17 +172,18 @@ export function DesktopSummary({
              </p>
            </Typography>
            {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
-              <Caption
-                textAlign="right"
-                color="uiTextMediumContrast"
-                striked={true}
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.regularPrice}
              >
-                {formatPrice(
-                  intl,
-                  selectedRates.totalPrice.local.regularPrice,
-                  selectedRates.totalPrice.local.currency
-                )}
-              </Caption>
+                <p>
+                  {formatPrice(
+                    intl,
+                    selectedRates.totalPrice.local.regularPrice,
+                    selectedRates.totalPrice.local.currency
+                  )}
+                </p>
+              </Typography>
            )}
            {!!selectedRates.totalPrice.requested && (
              <Typography
@@ -207,34 +211,6 @@ export function DesktopSummary({
              </Typography>
            )}
          </div>
-          <div className={styles.summaryPriceTextMobile}>
-            <Caption color="uiTextHighContrast">
-              {intl.formatMessage({
-                id: "common.totalPrice",
-                defaultMessage: "Total price",
-              })}
-            </Caption>
-            <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}
-            >
-              {summaryPriceText}
-            </Footnote>
-          </div>
          <Button
            className={styles.continueButton}
            disabled={!isAllRoomsSelected || isSubmitting}
@@ -308,15 +284,15 @@ function RateSummary({
              )}
            </p>
          </Typography>
-          <Typography
-            variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
-          >
+          <Typography variant="Body/Paragraph/mdRegular">
            <p>{room.roomInfo.roomType}</p>
          </Typography>
-          <Caption color="uiTextMediumContrast">
-            {getRateDetails(room.rate)}
-          </Caption>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.secondaryText}
+          >
+            <p>{getRateDetails(room.rate)}</p>
+          </Typography>
        </>
      ) : (
        <>
@@ -325,7 +301,7 @@ function RateSummary({
          </Typography>
          <Typography
            variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
+            className={styles.secondaryText}
          >
            <p>{getRateDetails(room.rate)}</p>
          </Typography>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -41,6 +41,12 @@
  text-align: right;
 }

+.regularPrice {
+  color: var(--Text-Secondary);
+  text-decoration: line-through;
+  text-align: right;
+}
+
 .red {
  color: var(--Text-Accent-Primary);
 }
@@ -77,10 +83,6 @@
  min-width: 140px;
 }

-.summaryPriceTextMobile {
-  white-space: nowrap;
-}
-
 .mobileSummary {
  display: block;
 }
@@ -89,8 +91,8 @@
  color: var(--Text-Tertiary);
 }

-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
+.secondaryText {
+  color: var(--Text-Secondary);
 }

@media (min-width: 1367px) {
@@ -120,10 +122,6 @@
    gap: var(--Space-x2);
  }

-  .summaryPriceTextMobile {
-    display: none;
-  }
-
  .summaryPrice,
  .continueButton {
    width: auto;
--- 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,7 +4,6 @@ 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 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"
@@ -49,12 +48,14 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
  return (
    <div className={styles.selectedRoomPanel}>
      <div className={styles.content}>
-        <Caption color="uiTextHighContrast">
-          {intl.formatMessage(
-            { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
-            { roomIndex: roomNr }
-          )}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {intl.formatMessage(
+              { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
+              { roomIndex: roomNr }
+            )}
+          </p>
+        </Typography>
        <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
          <p>{selectedRate.roomInfo.roomType}</p>
        </Typography>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
@@ -1,8 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"

-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"

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

@@ -12,12 +12,14 @@ export default function RoomNotAvailable() {
    <div className={styles.noRoomsContainer}>
      <div className={styles.noRooms}>
        <MaterialIcon icon="dangerous" color="Icon/Feedback/Error" size={16} />
-        <Caption color="uiTextHighContrast" type="bold">
-          {intl.formatMessage({
-            id: "selectRate.thisRoomIsNotAvailable",
-            defaultMessage: "This room is not available",
-          })}
-        </Caption>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            {intl.formatMessage({
+              id: "selectRate.thisRoomIsNotAvailable",
+              defaultMessage: "This room is not available",
+            })}
+          </p>
+        </Typography>
      </div>
    </div>
  )
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
@@ -5,4 +5,5 @@
  gap: var(--Space-x1);
  margin: 0;
  padding: var(--Space-x2);
+  align-items: center;
 }
--- a/packages/booking-flow/lib/components/SignupPromo/Desktop.tsx
+++ b/packages/booking-flow/lib/components/SignupPromo/Desktop.tsx
@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"

 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 { Typography } from "@scandic-hotels/design-system/Typography"

 import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"

@@ -63,9 +63,12 @@ function Message({
      },
      {
        span: (str) => (
-          <Caption color="red" type="bold" asChild>
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={styles.red}
+          >
            <span>{str}</span>
-          </Caption>
+          </Typography>
        ),
        price,
      }
@@ -81,9 +84,12 @@ function Message({
      },
      {
        span: (str) => (
-          <Caption color="red" type="bold" asChild>
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={styles.red}
+          >
            <span>{str}</span>
-          </Caption>
+          </Typography>
        ),
        price,
      }
@@ -98,9 +104,12 @@ function Message({
    },
    {
      span: (str) => (
-        <Caption color="red" type="bold" asChild>
+        <Typography
+          variant="Body/Supporting text (caption)/smBold"
+          className={styles.red}
+        >
          <span>{str}</span>
-        </Caption>
+        </Typography>
      ),
      price,
    }
--- a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
+++ b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
@@ -18,6 +18,10 @@
  position: relative;
 }

+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .badge {
  display: flex;
  align-items: center;