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

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">
-        {adultsLabel}
-      </Caption>
+      <Typography
+        variant="Body/Supporting text (caption)/smBold"
+        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 {
-  font-weight: 600;
+.label {
+  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);
 }