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

chore(BOOK-701): replace subtitle with typography

* chore(BOOK-701): replace subtitle with typography

* chore(BOOK-701): align center

* chore(BOOK-701): change token

* chore(BOOK-701): change text color

* fix(BOOK-704): revert pricechange dialog changes

* chore(BOOK-701): remove subtitle from package.json


Approved-by: Matilda Landström

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

@@ -2,9 +2,9 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Caption from "../../Caption"
-import Subtitle from "../../Subtitle"
 
 import styles from "./hotelChequeCard.module.css"
+import { Typography } from "../../Typography"
 
 type ProductTypeCheque = {
   localPrice: {
@@ -35,17 +35,17 @@ export default function HotelChequeCard({
           })}
         </Caption>
         <div className={styles.cheque}>
-          <Subtitle type="two" color="uiTextHighContrast">
-            {productTypeCheque.localPrice.numberOfCheques}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{productTypeCheque.localPrice.numberOfCheques}</p>
+          </Typography>
           <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
           {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
             // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             <>
               +
-              <Subtitle type="two" color="uiTextHighContrast">
-                {productTypeCheque.localPrice.additionalPricePerStay}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
+              </Typography>
               <Caption color="uiTextHighContrast">
                 {productTypeCheque.localPrice.currency}
               </Caption>

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

@@ -1,9 +1,9 @@
 import { useIntl } from "react-intl"
 
 import Caption from "../../Caption"
-import Subtitle from "../../Subtitle"
 
 import styles from "./hotelVoucherCard.module.css"
+import { Typography } from "../../Typography"
 
 type ProductTypeVoucher = {
   numberOfVouchers: number
@@ -25,9 +25,9 @@ export default function HotelVoucherCard({
           })}
         </Caption>
         <div className={styles.voucher}>
-          <Subtitle type="two" color="uiTextHighContrast">
-            {productTypeVoucher.numberOfVouchers}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{productTypeVoucher.numberOfVouchers}</p>
+          </Typography>
           <Caption color="uiTextHighContrast" className={styles.currency}>
             {intl.formatMessage(
               {