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/SasTierComparison/index.tsx

@@ -6,7 +6,6 @@ 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"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -130,7 +129,9 @@ function TierDetails({
       <div className={styles.tierContent}>
         <div className={styles.tierInfo}>
           <div className={styles.tierTitle}>
-            <Subtitle color="burgundy">{tierMatch.title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p className={styles.title}>{tierMatch.title}</p>
+            </Typography>
           </div>
           <div>{children}</div>
         </div>

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

@@ -31,6 +31,10 @@
   flex-direction: column;
 }
 
+.title {
+  color: var(--Text-Heading);
+}
+
 .tierDetails {
   overflow: hidden;
   background-color: var(--Base-Surface-Primary-light-Normal);