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

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -3,7 +3,6 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-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"
@@ -41,15 +40,18 @@ export default function JobylonCard({ job }: JobylonCardProps) {
       </Typography>
 
       <div className={styles.contentWrapper}>
-        <div>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
+          <div>
-          <Caption>
+            <p>{job.categories.map((cat) => cat.text).join(", ")}</p>
-            {job.locations
+            <p>
-              .map((loc) => `${loc.city}, ${loc.country}`)
+              {job.locations
-              .join(" | ")}
+                .map((loc) => `${loc.city}, ${loc.country}`)
-          </Caption>
+                .join(" | ")}
-          <Caption color="uiTextPlaceholder">{deadlineText}</Caption>
+            </p>
-        </div>
+            <p className={styles.deadline}>{deadlineText}</p>
+          </div>
+        </Typography>
+
         <Button
           theme="base"
           size="small"

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css

@@ -7,6 +7,10 @@
   border-radius: var(--Corner-radius-md);
 }
 
+.deadline {
+  color: var(--Text-Secondary);
+}
+
 .contentWrapper {
   display: grid;
   gap: var(--Space-x1);

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,4 +1,3 @@
-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"
 
@@ -81,23 +80,20 @@ async function LevelCard({ level }: LevelCardProps) {
       <Typography variant="Title/xs" className={styles.pointMsg}>
         <h5>{pointsMsg}</h5>
       </Typography>
-      <div className={styles.textContainer}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        {level.rewards.map((reward) => (
+        <div className={styles.textContainer}>
-          <Caption
+          {level.rewards.map((reward) => (
-            className={styles.levelText}
+            <p className={styles.levelText} key={reward.reward_id}>
-            key={reward.reward_id}
+              <MaterialIcon
-            textAlign="center"
+                icon="check"
-            color="textMediumContrast"
+                className={styles.checkIcon}
-          >
+                color="Icon/Interactive/Accent"
-            <MaterialIcon
+              />
-              icon="check"
+              {reward.label}
-              className={styles.checkIcon}
+            </p>
-              color="Icon/Interactive/Accent"
+          ))}
-            />
+        </div>
-            {reward.label}
+      </Typography>
-          </Caption>
-        ))}
-      </div>
     </article>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -37,6 +37,7 @@
 }
 
 .levelText {
+  color: var(--Text-Secondary);
   margin: 0;
 }
 

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx

@@ -3,8 +3,8 @@
 import { motion } from "motion/react"
 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 "./redeem.module.css"
 
@@ -25,12 +25,14 @@ export default function ActiveRedeemedBadge() {
       >
         <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
       </motion.div>
-      <Caption>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        {intl.formatMessage({
+        <p>
-          id: "rewards.active",
+          {intl.formatMessage({
-          defaultMessage: "Active",
+            id: "rewards.active",
-        })}
+            defaultMessage: "Active",
-      </Caption>
+          })}
+        </p>
+      </Typography>
     </div>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -2,7 +2,6 @@
 
 import { useIntl } from "react-intl"
 
-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 { toast } from "@scandic-hotels/design-system/Toast"
@@ -31,15 +30,17 @@ export default function Campaign({ reward }: { reward: Campaign }) {
           <p>{reward.description}</p>
         </Typography>
         <div className={styles.rewardBadge}>
-          <Caption textAlign="center" color="uiTextHighContrast" type="bold">
+          <Typography variant="Body/Supporting text (caption)/smBold">
-            {intl.formatMessage({
+            <p>
-              id: "redeemFlow.promoCode",
+              {intl.formatMessage({
-              defaultMessage: "Promo code",
+                id: "redeemFlow.promoCode",
-            })}
+                defaultMessage: "Promo code",
-          </Caption>
+              })}
-          <Caption textAlign="center" color="uiTextHighContrast">
+            </p>
-            {reward.operaRewardId}
+          </Typography>
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{reward.operaRewardId}</p>
+          </Typography>
         </div>
       </div>
       <footer className={styles.modalFooter}>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./redeem.module.css"
 
@@ -12,8 +12,8 @@ export default function MembershipNumberBadge({
   const intl = useIntl()
 
   return (
-    <div className={styles.rewardBadge}>
+    <Typography variant="Body/Supporting text (caption)/smRegular">
-      <Caption textAlign="center" color="uiTextHighContrast">
+      <span className={styles.rewardBadge}>
         {intl.formatMessage(
           {
             id: "rewards.membershipId",
@@ -21,7 +21,7 @@ export default function MembershipNumberBadge({
           },
           { id: membershipNumber }
         )}
-      </Caption>
+      </span>
-    </div>
+    </Typography>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx

@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-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 Countdown from "@/components/Countdown"
 
@@ -21,12 +21,14 @@ export default function TimedRedeemedBadge() {
     <>
       <div className={styles.redeemed}>
         <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
-        <Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
-          {intl.formatMessage({
+          <p>
-            id: "rewards.redeemed.validThrough",
+            {intl.formatMessage({
-            defaultMessage: "Redeemed & valid through:",
+              id: "rewards.redeemed.validThrough",
-          })}
+              defaultMessage: "Redeemed & valid through:",
-        </Caption>
+            })}
+          </p>
+        </Typography>
       </div>
       <Countdown
         minutes={duration.minutes()}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -129,6 +129,7 @@
   background: var(--Base-Surface-Secondary-light-Normal);
   display: grid;
   gap: var(--Space-x05);
+  text-align: center;
 }
 
 .redeemButton {

apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
@@ -62,14 +61,14 @@ function CardContent({ stay }: StayCardProps) {
             icon="calendar_month"
             color="Icon/Interactive/Default"
           />
-          <Caption asChild>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+            <p>
-          </Caption>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {" - "}
+              {" - "}
-          <Caption asChild>
+              <time dateTime={departDateTime}>{departDate}</time>
-            <time dateTime={departDateTime}>{departDate}</time>
+            </p>
-          </Caption>
+          </Typography>
         </div>
       </footer>
     </article>

apps/scandic-web/components/DatePicker/Single/Desktop.tsx

@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Button } from "@scandic-hotels/design-system/Button"
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
@@ -115,19 +114,15 @@ export default function DatePickerSingleDesktop({
               />
               <footer className={props.className}>
                 <Button
-                  intent="tertiary"
+                  variant="Tertiary"
                   onPress={close}
-                  size="small"
+                  color="Primary"
-                  theme="base"
+                  size="sm"
                 >
-                  <Caption color="white" type="bold" asChild>
+                  {intl.formatMessage({
-                    <span>
+                    id: "datePicker.selectDates",
-                      {intl.formatMessage({
+                    defaultMessage: "Select dates",
-                        id: "datePicker.selectDates",
+                  })}
-                        defaultMessage: "Select dates",
-                      })}
-                    </span>
-                  </Caption>
                 </Button>
               </footer>
             </>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx

@@ -1,4 +1,3 @@
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./priceContainer.module.css"
@@ -23,15 +22,17 @@ export default function PriceContainer({
   return (
     <div className={styles.priceContainer}>
       <div className={styles.info}>
-        <Caption color="uiTextHighContrast" type="bold">
+        <Typography variant="Body/Supporting text (caption)/smBold">
-          {text}
+          <p>{text}</p>
-        </Caption>
+        </Typography>
-        <Caption color="uiTextHighContrast">
+        <Typography variant="Body/Supporting text (caption)/smRegular">
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          <p>
-          {nightsText}, {adultsText}
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {nightsText}, {adultsText}
-          {totalChildren > 0 ? `, ${childrenText}` : ""}
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-        </Caption>
+            {totalChildren > 0 ? `, ${childrenText}` : ""}
+          </p>
+        </Typography>
       </div>
       <div className={styles.wrapper}>
         <Typography variant="Title/Subtitle/md">

apps/scandic-web/components/SasTierComparison/index.tsx

@@ -1,7 +1,6 @@
 "use client"
 import Image from "next/image"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
@@ -129,7 +128,7 @@ function TierDetails({
         <div className={styles.tierInfo}>
           <div className={styles.tierTitle}>
             <Typography variant="Title/Subtitle/md">
-              <p className={styles.title}>{tierMatch.title}</p>
+              <p className={styles.tierMatch}>{tierMatch.title}</p>
             </Typography>
           </div>
           <div>{children}</div>
@@ -162,9 +161,9 @@ function ReadMoreLink({
 function ColumnTitle({ children }: { children?: ReactNode }) {
   return (
     <div className={styles.columnTitle}>
-      <Caption type="bold" asChild>
+      <Typography variant="Title/Overline/sm">
         <span>{children}</span>
-      </Caption>
+      </Typography>
     </div>
   )
 }

apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css

@@ -36,10 +36,6 @@
   flex-direction: column;
 }
 
-.title {
-  color: var(--Text-Heading);
-}
-
 .tierDetails {
   overflow: hidden;
   background-color: var(--Base-Surface-Primary-light-Normal);
@@ -114,6 +110,11 @@
   width: 100%;
 }
 
+.tierMatch {
+  text-align: left;
+  color: var(--Text-Heading);
+}
+
 .tierTitles {
   cursor: pointer;
   padding: var(--Space-x05);

apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx

@@ -1,7 +1,6 @@
 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 Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -76,9 +75,9 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
           </div>
         </div>
         {ancillary.description && (
-          <Caption asChild color="uiTextHighContrast">
+          <Typography variant="Body/Supporting text (caption)/smRegular">
             <div dangerouslySetInnerHTML={{ __html: ancillary.description }} />
-          </Caption>
+          </Typography>
         )}
       </div>
     </article>

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;

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
+interface ClearSearchButtonProps extends Pick<
-  extends Pick<
+  SearchListProps,
-    SearchListProps,
+  "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
-    "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>
   )
 }

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">
+      <Typography
-        <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
+        variant="Body/Supporting text (caption)/smBold"
-        {caption}
+        className={styles.heading}
-      </Caption>
+      >
+        <p>
+          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
+          {caption}
+        </p>
+      </Typography>
       <Typography
         className={styles.errorBody}
         variant="Body/Paragraph/mdRegular"

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 {

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>
+          <Typography variant="Body/Supporting text (caption)/smBold">
-            <Caption type="bold" color="red" asChild>
+            <label>{vouchers}</label>
-              <span>{vouchers}</span>
+          </Typography>
-            </Caption>
-          </label>
           <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={styles.option}>
-        <div className={cx(styles.option, styles.showOnTablet)}>
+            <SkeletonShimmer width="24px" height="24px" />
-          <SkeletonShimmer width="24px" height="24px" />
+            {reward}
-          <Caption color="uiTextMediumContrast" asChild>
+          </div>
-            <span>{vouchers}</span>
-          </Caption>
         </div>
-
+      </Typography>
-        <div className={styles.option}>
-          <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
-            <span>{reward}</span>
-          </Caption>
-        </div>
-      </div>
     </div>
   )
 }

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 {

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);
+}

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">
+      <Typography
-        {adultsLabel}
+        variant="Body/Supporting text (caption)/smBold"
-      </Caption>
+        className={styles.label}
+      >
+        <p>{adultsLabel}</p>
+      </Typography>
       <Stepper
         count={currentAdults}
         handleOnDecrease={decreaseAdultsCount}

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css

@@ -4,8 +4,8 @@
   align-items: center;
 }
 
-.captionBold {
+.label {
-  font-weight: 600;
+  color: var(--Text-Default);
 }
 
 .childInfoContainer {

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

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);
 }
 

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={{

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
+      <Typography variant="Tag/sm">
-        type="bold"
+        <p>
-        textTransform="uppercase"
-        className={styles.cardTitle}
-      >
-        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-        {title}{" "}
-        <span>
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {"/ "}
+          {title}{" "}
-          {intl.formatMessage(
+          <span className={styles.roomInfo}>
-            {
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-              id: "booking.roomIndex",
+            {"/ "}
-              defaultMessage: "Room {roomIndex}",
+            {intl.formatMessage(
-            },
+              {
-            {
+                id: "booking.roomIndex",
-              roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
+                defaultMessage: "Room {roomIndex}",
-            }
+              },
-          )}
+              {
-        </span>
+                roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
-      </Caption>
+              }
+            )}
+          </span>
+        </p>
+      </Typography>
       <Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
         <p>
           {formatPrice(intl, price, currency)}

packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css

@@ -13,12 +13,8 @@
   border-radius: var(--Corner-radius-md);
 }
 
-.cardTitle {
+.roomInfo {
-  text-transform: uppercase;
+  color: var(--Text-Tertiary);
-}
-
-.cardTitle > span {
-  color: var(--UI-Text-Placeholder);
 }
 
 .card.inactive {

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">
+                              <Typography variant="Body/Supporting text (caption)/smRegular">
-                                {intl.formatMessage({
+                                <p>
-                                  id: "priceDetails.roomCharge",
+                                  {intl.formatMessage({
-                                  defaultMessage: "Room charge",
+                                    id: "priceDetails.roomCharge",
-                                })}
+                                    defaultMessage: "Room charge",
-                              </Caption>
+                                  })}
+                                </p>
+                              </Typography>
                               {newPrice ? (
                                 <div className={styles.updatedPrice}>
-                                  <Caption color="uiTextMediumContrast" striked>
+                                  <Typography
-                                    {formatPrice(
+                                    variant="Body/Supporting text (caption)/smRegular"
-                                      intl,
+                                    className={styles.prevPrice}
-                                      room.roomPrice.perStay.local.price,
+                                  >
-                                      room.roomPrice.perStay.local.currency
+                                    <p>
-                                    )}
+                                      {formatPrice(
-                                  </Caption>
+                                        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">
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
-                                  {formatPrice(
+                                  <p>
-                                    intl,
+                                    {formatPrice(
-                                    room.roomPrice.perStay.local.price,
+                                      intl,
-                                    room.roomPrice.perStay.local.currency
+                                      room.roomPrice.perStay.local.price,
-                                  )}
+                                      room.roomPrice.perStay.local.currency
-                                </Caption>
+                                    )}
+                                  </p>
+                                </Typography>
                               )}
                             </div>
                             {room.breakfast && (
                               <div className={styles.priceRow}>
-                                <Caption color="uiTextMediumContrast">
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
-                                  {intl.formatMessage({
+                                  <p>
-                                    id: "enterDetails.priceChangeDialog.breakfastCharge",
+                                    {intl.formatMessage({
-                                    defaultMessage: "Breakfast charge",
+                                      id: "enterDetails.priceChangeDialog.breakfastCharge",
-                                  })}
+                                      defaultMessage: "Breakfast charge",
-                                </Caption>
+                                    })}
-                                <Caption color="uiTextMediumContrast">
+                                  </p>
-                                  {formatPrice(
+                                </Typography>
-                                    intl,
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
-                                    Number(
+                                  <p>
-                                      room.breakfast.localPrice.totalPrice
+                                    {formatPrice(
-                                    ),
+                                      intl,
-                                    room.breakfast.localPrice.currency
+                                      Number(
-                                  )}
+                                        room.breakfast.localPrice.totalPrice
-                                </Caption>
+                                      ),
+                                      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">
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
-                                  {getRoomFeatureDescription(
+                                  <p>
-                                    feature.code,
+                                    {getRoomFeatureDescription(
-                                    feature.description,
+                                      feature.code,
-                                    intl
+                                      feature.description,
-                                  )}
+                                      intl
-                                </Caption>
+                                    )}
-                                <Caption color="uiTextMediumContrast">
+                                  </p>
-                                  {formatPrice(
+                                </Typography>
-                                    intl,
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
-                                    Number(feature.localPrice.totalPrice),
+                                  <p>
-                                    feature.localPrice.currency
+                                    {formatPrice(
-                                  )}
+                                      intl,
-                                </Caption>
+                                      Number(feature.localPrice.totalPrice),
+                                      feature.localPrice.currency
+                                    )}
+                                  </p>
+                                </Typography>
                               </div>
                             ))}
                           </div>

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;

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>
+                <Typography
-                  {formatPrice(intl, prevTotalPrice, currency)}
+                  variant="Body/Supporting text (caption)/smRegular"
-                </Caption>
+                  className={styles.prevPrice}
+                >
+                  <p>{formatPrice(intl, prevTotalPrice, currency)}</p>
+                </Typography>
                 <Typography variant="Body/Paragraph/mdBold">
                   <p style={{ textAlign: "center" }}>
                     {formatPrice(intl, newTotalPrice, currency)}

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;

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 ? (
+              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <Caption color="uiTextHighContrast">
+                <p>{label}</p>
-                  {intl.formatMessage({
+              </Typography>
-                    id: "hotelCard.availableRates",
+
-                    defaultMessage: "Available rates",
-                  })}
-                </Caption>
-              ) : (
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    id: "listingHotelCardDialog.perNightFrom",
-                    defaultMessage: "Per night from",
-                  })}
-                </Caption>
-              )}
               <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 && (
-                    {memberPrice && <Caption>/</Caption>}
+                      <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>
+                      <p>{formatPrice(intl, voucherPrice, currency)}</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>
                     </Typography>
                   </>
                 )}

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);
 }

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
+              <Typography
-                textAlign="right"
+                variant="Body/Supporting text (caption)/smRegular"
-                color="uiTextMediumContrast"
+                className={styles.regularPrice}
-                striked={true}
               >
-                {formatPrice(
+                <p>
-                  intl,
+                  {formatPrice(
-                  selectedRates.totalPrice.local.regularPrice,
+                    intl,
-                  selectedRates.totalPrice.local.currency
+                    selectedRates.totalPrice.local.regularPrice,
-                )}
+                    selectedRates.totalPrice.local.currency
-              </Caption>
+                  )}
+                </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
+          <Typography variant="Body/Paragraph/mdRegular">
-            variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
-          >
             <p>{room.roomInfo.roomType}</p>
           </Typography>
-          <Caption color="uiTextMediumContrast">
+          <Typography
-            {getRateDetails(room.rate)}
+            variant="Body/Paragraph/mdRegular"
-          </Caption>
+            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>

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 {
+.secondaryText {
-  color: var(--UI-Text-Medium-contrast);
+  color: var(--Text-Secondary);
 }
 
 @media (min-width: 1367px) {
@@ -120,10 +122,6 @@
     gap: var(--Space-x2);
   }
 
-  .summaryPriceTextMobile {
-    display: none;
-  }
-
   .summaryPrice,
   .continueButton {
     width: auto;

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">
+        <Typography variant="Body/Supporting text (caption)/smRegular">
-          {intl.formatMessage(
+          <p>
-            { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
+            {intl.formatMessage(
-            { roomIndex: roomNr }
+              { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
-          )}
+              { roomIndex: roomNr }
-        </Caption>
+            )}
+          </p>
+        </Typography>
         <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
           <p>{selectedRate.roomInfo.roomType}</p>
         </Typography>

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">
+        <Typography variant="Body/Paragraph/mdRegular">
-          {intl.formatMessage({
+          <p>
-            id: "selectRate.thisRoomIsNotAvailable",
+            {intl.formatMessage({
-            defaultMessage: "This room is not available",
+              id: "selectRate.thisRoomIsNotAvailable",
-          })}
+              defaultMessage: "This room is not available",
-        </Caption>
+            })}
+          </p>
+        </Typography>
       </div>
     </div>
   )

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;
 }

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,
     }

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;

packages/design-system/lib/components/Caption/caption.module.css

@@ -1,127 +0,0 @@
-p.caption {
-  margin: 0;
-  padding: 0;
-}
-
-.captionFontOnly {
-  font-style: normal;
-}
-
-.bold {
-  font-family: var(--typography-Caption-Bold-fontFamily);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  font-weight: 500; /* var(--typography-Caption-Bold-fontWeight); /* Commented till figma values are fixed to 500 instead of medium */
-  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
-  line-height: var(--typography-Caption-Bold-lineHeight);
-  text-decoration: var(--typography-Caption-Bold-textDecoration);
-}
-
-.labels {
-  font-family: var(--typography-Caption-Labels-fontFamily);
-  font-size: var(--typography-Caption-Labels-fontSize);
-  font-weight: var(--typography-Caption-Labels-fontWeight);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
-  line-height: var(--typography-Caption-Labels-lineHeight);
-  text-decoration: var(--typography-Caption-Labels-textDecoration);
-}
-
-.underline {
-  font-family: var(--typography-Caption-Underline-fontFamily);
-  font-size: var(--typography-Caption-Underline-fontSize);
-  font-weight: var(--typography-Caption-Underline-fontWeight);
-  letter-spacing: var(--typography-Caption-Underline-letterSpacing);
-  line-height: var(--typography-Caption-Underline-lineHeight);
-  text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
-}
-
-.regular {
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
-  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
-  line-height: var(--typography-Caption-Regular-lineHeight);
-  text-decoration: var(--typography-Caption-Regular-textDecoration);
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.striked {
-  text-decoration: line-through;
-}
-
-.baseTextAccent {
-  color: var(--Base-Text-Accent);
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.textMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.baseTextHighContrast {
-  color: var(--Base-Text-High-contrast);
-}
-
-.baseTextMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.white {
-  color: var(--UI-Opacity-White-100);
-}
-
-.uiTextActive {
-  color: var(--UI-Text-Active);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.disabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.green {
-  color: var(--UI-Semantic-Success);
-}
-.blue {
-  color: var(--UI-Semantic-Information);
-}

packages/design-system/lib/components/Caption/index.tsx

@@ -1,48 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { captionVariants, fontOnlycaptionVariants } from "./variants"
-import { VariantProps } from "class-variance-authority"
-
-interface CaptionProps
-  extends
-    Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof captionVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
-
-/**
- * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
- */
-export default function Caption({
-  asChild = false,
-  className = "",
-  color,
-  fontOnly = false,
-  textAlign,
-  textTransform,
-  uppercase,
-  striked,
-  type,
-  ...props
-}: CaptionProps) {
-  const Comp = asChild ? Slot : "p"
-  const classNames = fontOnly
-    ? fontOnlycaptionVariants({
-        className,
-        textTransform,
-        uppercase,
-        striked,
-        type,
-      })
-    : captionVariants({
-        className,
-        color,
-        textTransform,
-        textAlign,
-        uppercase,
-        striked,
-        type,
-      })
-  return <Comp className={classNames} {...props} />
-}

packages/design-system/lib/components/Caption/variants.ts

@@ -1,80 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./caption.module.css"
-
-const config = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-      underline: styles.underline,
-    },
-    color: {
-      baseTextAccent: styles.baseTextAccent,
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      textMediumContrast: styles.textMediumContrast,
-      red: styles.red,
-      white: styles.white,
-      green: styles.green,
-      blue: styles.blue,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextActive: styles.uiTextActive,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      disabled: styles.disabled,
-      baseTextHighContrast: styles.baseTextHighContrast,
-      baseTextMediumContrast: styles.baseTextMediumContrast,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-      right: styles.right,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-    striked: {
-      true: styles.striked,
-    },
-  },
-  defaultVariants: {
-    color: "black",
-    type: "regular",
-  },
-} as const
-
-export const captionVariants = cva(styles.caption, config)
-
-const fontOnlyConfig = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-      underline: styles.underline,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-    striked: {
-      true: styles.striked,
-    },
-  },
-  defaultVariants: {
-    type: "regular",
-  },
-} as const
-
-export const fontOnlycaptionVariants = cva(
-  styles.captionFontOnly,
-  fontOnlyConfig
-)

packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css

@@ -17,6 +17,10 @@
   color: var(--Text-Default);
 }
 
+.secondaryText {
+  color: var(--Text-Secondary);
+}
+
 .cheque {
   justify-content: end;
 }

packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-import Caption from "../../Caption"
 
 import styles from "./hotelChequeCard.module.css"
 import { Typography } from "../../Typography"
@@ -28,17 +27,21 @@ export default function HotelChequeCard({
   return (
     <div className={styles.chequeCard}>
       <div className={styles.chequeRow}>
-        <Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
-          {intl.formatMessage({
+          <p>
-            id: "common.from",
+            {intl.formatMessage({
-            defaultMessage: "From",
+              id: "common.from",
-          })}
+              defaultMessage: "From",
-        </Caption>
+            })}
+          </p>
+        </Typography>
         <div className={styles.cheque}>
           <Typography variant="Title/Subtitle/md">
             <p>{productTypeCheque.localPrice.numberOfCheques}</p>
           </Typography>
-          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{CurrencyEnum.CC}</p>
+          </Typography>
           {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
             // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             <>
@@ -46,9 +49,9 @@ export default function HotelChequeCard({
               <Typography variant="Title/Subtitle/md">
                 <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
               </Typography>
-              <Caption color="uiTextHighContrast">
+              <Typography variant="Body/Supporting text (caption)/smRegular">
-                {productTypeCheque.localPrice.currency}
+                <p>{productTypeCheque.localPrice.currency}</p>
-              </Caption>
+              </Typography>
             </>
           ) : null}
         </div>
@@ -56,21 +59,33 @@ export default function HotelChequeCard({
       {productTypeCheque.requestedPrice &&
       productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
         <div className={styles.chequeRow}>
-          <Caption color="uiTextMediumContrast">
+          <Typography
-            {intl.formatMessage({
+            variant="Body/Supporting text (caption)/smRegular"
-              id: "booking.approx",
+            className={styles.secondaryText}
-              defaultMessage: "Approx.",
+          >
-            })}
+            <p>
-          </Caption>
+              {intl.formatMessage({
-          <Caption color="uiTextMediumContrast">
+                id: "booking.approx",
-            {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
+                defaultMessage: "Approx.",
-            {productTypeCheque.requestedPrice.additionalPricePerStay
+              })}
-              ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+            </p>
-                " + "
+          </Typography>
-              : ""}
+          <Typography
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            variant="Body/Supporting text (caption)/smRegular"
-            {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
+            className={styles.secondaryText}
-          </Caption>
+          >
+            <p>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {productTypeCheque.requestedPrice.numberOfCheques}{" "}
+              {CurrencyEnum.CC}
+              {productTypeCheque.requestedPrice.additionalPricePerStay
+                ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                  " + "
+                : ""}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
+            </p>
+          </Typography>
         </div>
       ) : null}
     </div>

packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx

@@ -151,7 +151,20 @@ export function StandaloneHotelCardDialog({
                 </RoomPrice>
               ) : null}
               {voucherPrice ? (
-                <RoomPrice price={voucherPrice} currency={currency} />
+                <RoomPrice
+                  price={voucherPrice}
+                  currency={intl.formatMessage(
+                    {
+                      id: "price.numberOfVouchers",
+                      defaultMessage:
+                        "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                    },
+                    {
+                      numberOfVouchers: voucherPrice,
+                    }
+                  )}
+                  includePerNight={false}
+                />
               ) : null}
               {/* Show public price if:
                 1) user is not logged in, or

packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx

@@ -1,7 +1,5 @@
 import { useIntl } from "react-intl"
 
-import Caption from "../../Caption"
-
 import styles from "./hotelVoucherCard.module.css"
 import { Typography } from "../../Typography"
 
@@ -18,28 +16,32 @@ export default function HotelVoucherCard({
   return (
     <div className={styles.voucherCard}>
       <div className={styles.voucherRow}>
-        <Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
-          {intl.formatMessage({
+          <p>
-            id: "common.from",
+            {intl.formatMessage({
-            defaultMessage: "From",
+              id: "common.from",
-          })}
+              defaultMessage: "From",
-        </Caption>
+            })}
+          </p>
+        </Typography>
         <div className={styles.voucher}>
           <Typography variant="Title/Subtitle/md">
             <p>{productTypeVoucher.numberOfVouchers}</p>
           </Typography>
-          <Caption color="uiTextHighContrast" className={styles.currency}>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
-            {intl.formatMessage(
+            <p>
-              {
+              {intl.formatMessage(
-                id: "price.numberOfVouchers",
+                {
-                defaultMessage:
+                  id: "price.numberOfVouchers",
-                  "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                  defaultMessage:
-              },
+                    "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
-              {
+                },
-                numberOfVouchers: productTypeVoucher.numberOfVouchers,
+                {
-              }
+                  numberOfVouchers: productTypeVoucher.numberOfVouchers,
-            )}
+                }
-          </Caption>
+              )}
+            </p>
+          </Typography>
         </div>
       </div>
     </div>

packages/design-system/lib/components/HotelCard/index.tsx

@@ -12,7 +12,6 @@ import {
   selectRate,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "../Caption"
 import { Divider } from "../Divider"
 import { FacilityToIcon } from "../FacilityToIcon"
 import HotelLogoIcon from "../Icons/Logos"
@@ -341,12 +340,14 @@ export const HotelCardComponent = memo(
                 )}
                 {prices?.redemptions?.length ? (
                   <div className={styles.pointsCard}>
-                    <Caption>
+                    <Typography variant="Body/Supporting text (caption)/smRegular">
-                      {intl.formatMessage({
+                      <p>
-                        id: "hotelCard.availableRates",
+                        {intl.formatMessage({
-                        defaultMessage: "Available rates",
+                          id: "hotelCard.availableRates",
-                      })}
+                          defaultMessage: "Available rates",
-                    </Caption>
+                        })}
+                      </p>
+                    </Typography>
                     {prices.redemptions.map((redemption) => (
                       <HotelPointsRow
                         key={redemption.rateCode}

packages/design-system/lib/components/ImageContainer/index.tsx

@@ -1,5 +1,5 @@
-import Caption from "../Caption"
 import Image from "../Image"
+import { Typography } from "../Typography"
 
 import styles from "./imageContainer.module.css"
 
@@ -42,7 +42,9 @@ export default function ImageContainer({
           focalPoint={leftImage.focalPoint}
           dimensions={leftImage.dimensions}
         />
-        <Caption>{leftImage.meta.caption}</Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{leftImage.meta.caption}</p>
+        </Typography>
       </article>
       <article>
         <Image
@@ -54,7 +56,9 @@ export default function ImageContainer({
           focalPoint={rightImage.focalPoint}
           dimensions={rightImage.dimensions}
         />
-        <Caption>{rightImage.meta.caption}</Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{rightImage.meta.caption}</p>
+        </Typography>
       </article>
     </section>
   )

packages/design-system/lib/components/Switch/index.tsx

@@ -5,7 +5,7 @@ import { RegisterOptions, useController, useFormContext } from "react-hook-form"
 
 import styles from "./switch.module.css"
 import { MaterialIcon } from "../Icons/MaterialIcon"
-import Caption from "../Caption"
+import { Typography } from "../Typography"
 
 interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
   name: string
@@ -37,10 +37,12 @@ export default function Switch({
       {children}
       <span className={styles.switch} tabIndex={0}></span>
       {fieldState.error ? (
-        <Caption className={styles.error} fontOnly>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
+          <p>
-          {fieldState.error.message}
+            <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-        </Caption>
+            {fieldState.error.message}
+          </p>
+        </Typography>
       ) : null}
     </AriaSwitch>
   )

packages/design-system/package.json

@@ -14,7 +14,6 @@
     "./Button": "./lib/components/Button/index.tsx",
     "./ButtonLink": "./lib/components/ButtonLink/index.tsx",
     "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
-    "./Caption": "./lib/components/Caption/index.tsx",
     "./Card": "./lib/components/Card/index.tsx",
     "./ChipButton": "./lib/components/ChipButton/index.tsx",
     "./ChipLink": "./lib/components/ChipLink/index.tsx",