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

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx

@@ -6,7 +6,6 @@ import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 
@@ -39,12 +38,14 @@ export function AddedAncillaries({
   return (
     <div className={styles.container}>
       <div className={styles.header}>
-        <Subtitle>
-          {intl.formatMessage({
-            defaultMessage: "My extras",
-            id: "myStay.addedAncillaries.title",
-          })}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/lg">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "My extras",
+              id: "myStay.addedAncillaries.title",
+            })}
+          </p>
+        </Typography>
 
         {booking.ancillary?.deliveryTime && (
           <Typography variant="Body/Paragraph/mdBold">

apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Header/index.tsx

@@ -1,7 +1,7 @@
 import { Button as ButtonRAC } from "react-aria-components"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./header.module.css"
 
@@ -13,7 +13,9 @@ interface HeaderProps extends React.PropsWithChildren {
 export default function Header({ children, handleClose, title }: HeaderProps) {
   return (
     <header className={styles.header}>
-      <Subtitle>{title}</Subtitle>
+      <Typography variant="Title/Subtitle/lg">
+        <p>{title}</p>
+      </Typography>
       <ButtonRAC className={styles.close} onPress={handleClose}>
         <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
       </ButtonRAC>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/index.tsx

@@ -128,7 +128,7 @@ export default function NewDates({ checkInDate, checkOutDate }: NewDatesProps) {
               <MaterialIcon icon="calendar_today" />
             </ButtonRAC>
             <Modal>
-              <Dialog>
+              <Dialog className={styles.dialog}>
                 {({ close }) => (
                   <>
                     <DatePickerSingleDesktop

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

@@ -1,5 +1,5 @@
 import Caption from "@scandic-hotels/design-system/Caption"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./priceContainer.module.css"
 
@@ -34,9 +34,9 @@ export default function PriceContainer({
         </Caption>
       </div>
       <div className={styles.wrapper}>
-        <Subtitle className={styles.price} color="burgundy" type="one">
-          {price}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <p>{price}</p>
+        </Typography>
       </div>
     </div>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css

@@ -19,6 +19,7 @@
   padding-left: var(--Space-x2);
   display: flex;
   align-items: center;
+  color: var(--Text-Heading);
 }
 
 .price {