Merged in chore/BOOK-773-replace-old-typography-variables (pull request #3515)

Chore/BOOK-773 replace old typography variables

* chore(BOOK-773): Replaced body typography

* chore(BOOK-773): Replaced caption typography

* chore(BOOK-773): Replaced footnote typography

* chore(BOOK-773): Replaced subtitle typography


Approved-by: Bianca Widstam

packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css

@@ -35,8 +35,3 @@
   justify-content: start;
   align-items: baseline;
 }
-
-.perNight {
-  font-weight: 400;
-  font-size: var(--typography-Caption-Regular-fontSize);
-}

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

@@ -1,8 +1,8 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import { Divider } from "../../Divider"
 import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
+import { Divider } from "../../Divider"
 import { Typography } from "../../Typography"
 import styles from "./hotelPriceCard.module.css"
 
@@ -117,14 +117,16 @@ export function HotelPriceCard({
             >
               <p>
                 {productTypePrices.localPrice.currency}
-                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                <span className={styles.perNight}>
-                  /
-                  {intl.formatMessage({
-                    id: "common.night",
-                    defaultMessage: "night",
-                  })}
-                </span>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  <span>
+                    /
+                    {intl.formatMessage({
+                      id: "common.night",
+                      defaultMessage: "night",
+                    })}
+                  </span>
+                </Typography>
               </p>
             </Typography>
           </div>