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/Blocks/DynamicContent/JobylonFeed/JobList/index.tsx

@@ -3,7 +3,7 @@
 import { useReducer } from "react"
 import { useIntl } from "react-intl"
 
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import JobylonCard from "../JobylonCard"
 import Filter from "./Filter"
@@ -80,15 +80,18 @@ export default function JobList({ allJobs }: JobListProps) {
         departmentFilters={departmentFilters}
         categoryFilters={categoryFilters}
       />
-      <Subtitle type="two">
+      <Typography variant="Title/Subtitle/md">
-        {intl.formatMessage(
+        <p>
-          {
+          {intl.formatMessage(
-            id: "jobylonFeed.resultCount",
+            {
-            defaultMessage: "{count, plural, one {# Result} other {# Results}}",
+              id: "jobylonFeed.resultCount",
-          },
+              defaultMessage:
-          { count: state.jobs.length }
+                "{count, plural, one {# Result} other {# Results}}",
-        )}
+            },
-      </Subtitle>
+            { count: state.jobs.length }
+          )}
+        </p>
+      </Typography>
       <ul className={styles.list}>
         {state.jobs.map((job) => (
           <li key={job.id}>

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -6,7 +6,7 @@ import { dt } from "@scandic-hotels/common/dt"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
 
@@ -36,9 +36,9 @@ export default function JobylonCard({ job }: JobylonCardProps) {
 
   return (
     <div className={styles.jobylonCard}>
-      <Subtitle asChild>
+      <Typography variant="Title/Subtitle/md">
         <h3>{job.title}</h3>
-      </Subtitle>
+      </Typography>
 
       <div className={styles.contentWrapper}>
         <div>
@@ -62,7 +62,7 @@ export default function JobylonCard({ job }: JobylonCardProps) {
               id: "jobylonFeed.card.viewAndApplyButton",
               defaultMessage: "View & apply",
             })}
-            <MaterialIcon icon="open_in_new" size={20} />
+            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
           </a>
         </Button>
       </div>

apps/scandic-web/components/Blocks/TextCols/index.tsx

@@ -1,5 +1,5 @@
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./textcols.module.css"
 
@@ -11,7 +11,9 @@ export default function TextCols({ text_cols }: TextColProps) {
       {text_cols.columns.map((col) => {
         return (
           <section key={col.title} className={styles.column}>
-            <Subtitle>{col.title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p>{col.title}</p>
+            </Typography>
             <JsonToHtml
               nodes={col.text.json.children}
               embeds={col.text.embedded_itemsConnection.edges}

apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/CityListing/CityListingItem/index.tsx

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -41,9 +40,9 @@ export default function CityListingItem({ city }: CityListingItemProps) {
         />
       </div>
       <section className={styles.content}>
-        <Subtitle asChild>
+        <Typography variant="Title/Subtitle/md">
           <h3>{city.heading}</h3>
-        </Subtitle>
+        </Typography>
         {city.experiences?.length ? (
           <ExperienceList experiences={city.experiences} />
         ) : null}

apps/scandic-web/components/DatePicker/Single/Desktop.tsx

@@ -10,7 +10,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
 
@@ -136,9 +136,9 @@ export default function DatePickerSingleDesktop({
         MonthCaption(props) {
           return (
             <div className={props.className}>
-              <Subtitle asChild type="two">
+              <Typography variant="Title/Subtitle/md">
-                {props.children}
+                <p>{props.children}</p>
-              </Subtitle>
+              </Typography>
             </div>
           )
         },

apps/scandic-web/components/DatePicker/Single/Mobile.tsx

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
@@ -85,9 +84,9 @@ export default function DatePickerSingleMobile({
           MonthCaption(props) {
             return (
               <div className={props.className}>
-                <Subtitle asChild type="two">
+                <Typography variant="Title/Subtitle/md">
-                  {props.children}
+                  <p>{props.children}</p>
-                </Subtitle>
+                </Typography>
               </div>
             )
           },

apps/scandic-web/components/DestinationFilterAndSort/Filter/index.tsx

@@ -2,8 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
@@ -41,14 +41,14 @@ export default function Filter({ filters }: FilterProps) {
       </Title>
       <form className={styles.form}>
         <fieldset className={styles.fieldset}>
-          <Subtitle type="two" asChild>
+          <Typography variant="Title/Subtitle/md">
             <legend>
               {intl.formatMessage({
                 id: "filter.facilities",
                 defaultMessage: "Hotel facilities",
               })}
             </legend>
-          </Subtitle>
+          </Typography>
           <ul className={styles.list}>
             {facilityFilters.map((filter) => (
               <li key={`filter-${filter.slug}`}>
@@ -66,14 +66,14 @@ export default function Filter({ filters }: FilterProps) {
         </fieldset>
 
         <fieldset className={styles.fieldset}>
-          <Subtitle type="two" asChild>
+          <Typography variant="Title/Subtitle/md">
             <legend>
               {intl.formatMessage({
                 id: "filter.hotelSurroundings",
                 defaultMessage: "Hotel surroundings",
               })}
             </legend>
-          </Subtitle>
+          </Typography>
           <ul className={styles.list}>
             {surroundingsFilters.map((filter) => (
               <li key={`filter-${filter.slug}`}>

apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css

@@ -9,6 +9,10 @@
   z-index: var(--default-modal-overlay-z-index);
 }
 
+.title {
+  text-align: center;
+}
+
 .dialog {
   width: min(80dvw, 960px);
   border-radius: var(--Corner-radius-lg);

apps/scandic-web/components/DestinationFilterAndSort/index.tsx

@@ -14,7 +14,7 @@ import { Alert } from "@scandic-hotels/design-system/Alert"
 import { Button } from "@scandic-hotels/design-system/Button"
 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 { useDestinationDataStore } from "@/stores/destination-data"
 
@@ -144,11 +144,9 @@ export default function DestinationFilterAndSort({
             {({ close }) => (
               <>
                 <header className={styles.header}>
-                  <Subtitle
+                  <Typography
-                    type="two"
+                    variant="Title/Subtitle/md"
-                    textAlign="center"
                     className={styles.title}
-                    asChild
                   >
                     <h3>
                       {intl.formatMessage({
@@ -156,7 +154,7 @@ export default function DestinationFilterAndSort({
                         defaultMessage: "Filter and sort",
                       })}
                     </h3>
-                  </Subtitle>
+                  </Typography>
                   <button
                     onClick={close}
                     type="button"

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>
+        <Typography variant="Title/Subtitle/lg">
-          {intl.formatMessage({
+          <p>
-            defaultMessage: "My extras",
+            {intl.formatMessage({
-            id: "myStay.addedAncillaries.title",
+              defaultMessage: "My extras",
-          })}
+              id: "myStay.addedAncillaries.title",
-        </Subtitle>
+            })}
+          </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">
+        <Typography variant="Title/Subtitle/md">
-          {price}
+          <p>{price}</p>
-        </Subtitle>
+        </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 {

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import useDropdownStore from "@/stores/main-menu"
 
@@ -35,18 +34,10 @@ export default function LanguageSwitcherContainer({
             onClick={() => toggleDropdown(position)}
           >
             <MaterialIcon
-              icon="chevron_left"
+              icon="arrow_back_ios"
-              color="Icon/Interactive/Accent"
+              color="Icon/Interactive/Default"
               size={20}
             />
-            <Subtitle type="one" asChild>
-              <span>
-                {intl.formatMessage({
-                  id: "common.mainMenu",
-                  defaultMessage: "Main menu",
-                })}
-              </span>
-            </Subtitle>
           </button>
         </div>
       ) : null}

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css

@@ -1,5 +1,4 @@
 .backWrapper {
-  background-color: var(--Base-Surface-Secondary-light-Normal);
   padding: var(--Space-x2);
 }
 

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { languages } from "@scandic-hotels/common/constants/language"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
@@ -32,12 +31,14 @@ export default function LanguageSwitcherContent({
 
   return (
     <div className={styles.languageWrapper}>
-      <Subtitle className={styles.subtitle} type="two">
+      <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
-        {intl.formatMessage({
+        <p>
-          id: "common.selectYourLanguage",
+          {intl.formatMessage({
-          defaultMessage: "Select your language",
+            id: "common.selectYourLanguage",
-        })}
+            defaultMessage: "Select your language",
-      </Subtitle>
+          })}
+        </p>
+      </Typography>
       <ul className={styles.list}>
         {urlKeys.map((key) => {
           const url = urls[key]?.url

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);

apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/index.tsx

@@ -1,4 +1,4 @@
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { JoinLoyaltyContactEnums } from "@scandic-hotels/trpc/types/joinLoyaltyContact"
 
 import { getIntl } from "@/i18n"
@@ -13,12 +13,14 @@ export default async function Contact({ contactBlock }: ContactProps) {
   const intl = await getIntl()
   return (
     <article className={styles.contactContainer}>
-      <Subtitle>
+      <Typography variant="Title/Subtitle/md">
-        {intl.formatMessage({
+        <p>
-          id: "common.contactUs",
+          {intl.formatMessage({
-          defaultMessage: "Contact us",
+            id: "common.contactUs",
-        })}
+            defaultMessage: "Contact us",
-      </Subtitle>
+          })}
+        </p>
+      </Typography>
       <section className={styles.contact}>
         {contactBlock.map((contact, i) => {
           switch (contact.typename) {

apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx

@@ -1,7 +1,7 @@
 import { scandicFriends } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { faq } from "@/constants/webHrefs"
 
@@ -32,12 +32,14 @@ export default async function ReadMore() {
 
   return (
     <article className={styles.wrapper}>
-      <Subtitle>
+      <Typography variant="Title/Subtitle/md">
-        {intl.formatMessage({
+        <p>
-          id: "common.readMore",
+          {intl.formatMessage({
-          defaultMessage: "Read more",
+            id: "common.readMore",
-        })}
+            defaultMessage: "Read more",
-      </Subtitle>
+          })}
+        </p>
+      </Typography>
       <div className={styles.links}>
         {links.map((link) => (
           <Link

apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx

@@ -1,6 +1,5 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import Image from "@scandic-hotels/design-system/Image"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import TeaserCardSidepeek from "./Sidepeek"
@@ -39,9 +38,9 @@ export default function TeaserCard({
         </div>
       )}
       <div className={styles.content}>
-        <Subtitle textAlign="left" type="two" color="black">
+        <Typography variant="Title/Subtitle/md">
-          {title}
+          <p>{title}</p>
-        </Subtitle>
+        </Typography>
         <Typography variant="Body/Paragraph/mdRegular">
           <p>{description}</p>
         </Typography>

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx

@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import AdultSelector from "../AdultSelector"
@@ -40,9 +40,9 @@ export function GuestsRoom({
   return (
     <div className={styles.roomContainer}>
       <section className={styles.roomDetailsContainer}>
-        <Subtitle type="two" className={styles.roomHeading}>
+        <Typography variant="Title/Subtitle/md" className={styles.roomHeading}>
-          {roomLabel}
+          <p>{roomLabel}</p>
-        </Subtitle>
+        </Typography>
         <AdultSelector roomIndex={index} currentAdults={room.adults} />
         <ChildSelector
           roomIndex={index}

packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx

@@ -9,7 +9,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
@@ -75,13 +74,18 @@ export default function MemberPriceModal() {
                   })}
                 </p>
               </Typography>
-              <Subtitle type="two" color="red">
+              <Typography
-                {formatPrice(
+                variant="Title/Subtitle/md"
-                  intl,
+                className={styles.redPrice}
-                  memberPrice.pricePerStay ?? 0,
+              >
-                  memberPrice.currency ?? CurrencyEnum.Unknown
+                <p>
-                )}
+                  {formatPrice(
-              </Subtitle>
+                    intl,
+                    memberPrice.pricePerStay ?? 0,
+                    memberPrice.currency ?? CurrencyEnum.Unknown
+                  )}
+                </p>
+              </Typography>
             </span>
           )}
         </div>

packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css

@@ -21,6 +21,9 @@
   gap: var(--Space-x1);
   align-items: center;
 }
+.redPrice {
+  color: var(--Text-Accent-Primary);
+}
 
 @media screen and (min-width: 768px) {
   .modalContent {

packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx

@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"
 
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -20,12 +19,14 @@ export default function TimeoutSpinner() {
   return (
     <div className={styles.container}>
       <LoadingSpinner />
-      <Subtitle className={styles.heading}>
+      <Typography variant="Title/Subtitle/md" className={styles.heading}>
-        {intl.formatMessage({
+        <p>
-          id: "enterDetails.payment.loadingTitle",
+          {intl.formatMessage({
-          defaultMessage: "Taking longer than usual",
+            id: "enterDetails.payment.loadingTitle",
-        })}
+            defaultMessage: "Taking longer than usual",
-      </Subtitle>
+          })}
+        </p>
+      </Typography>
       <Typography
         variant="Body/Paragraph/mdRegular"
         className={styles.messageContainer}

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -14,7 +14,6 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
@@ -63,12 +62,14 @@ export default function PriceChangeSummary({
             {({ close }) => (
               <div className={styles.content}>
                 <header className={styles.header}>
-                  <Subtitle>
+                  <Typography variant="Title/Subtitle/md">
-                    {intl.formatMessage({
+                    <p>
-                      id: "common.priceDetails",
+                      {intl.formatMessage({
-                      defaultMessage: "Price details",
+                        id: "common.priceDetails",
-                    })}
+                        defaultMessage: "Price details",
-                  </Subtitle>
+                      })}
+                    </p>
+                  </Typography>
                   <Button
                     onPress={close}
                     variant="clean"

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx

@@ -5,7 +5,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -129,12 +128,14 @@ export default function PriceChangeDialog({
               </p>
             </Typography>
             <div>
-              <Subtitle textAlign="center" color="burgundy">
+              <Typography variant="Title/Subtitle/md">
-                {intl.formatMessage({
+                <p style={{ textAlign: "center" }}>
-                  id: "enterDetails.priceChangeDialog.newTotalLabel",
+                  {intl.formatMessage({
-                  defaultMessage: "New total",
+                    id: "enterDetails.priceChangeDialog.newTotalLabel",
-                })}
+                    defaultMessage: "New total",
-              </Subtitle>
+                  })}
+                </p>
+              </Typography>
               <div className={styles.prices}>
                 <Caption striked>
                   {formatPrice(intl, prevTotalPrice, currency)}

packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx

@@ -8,7 +8,7 @@ import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReserva
 import { Button } from "@scandic-hotels/design-system/Button"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 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 { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
 
 import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
@@ -61,25 +61,28 @@ export default function SelectedRoom() {
               })}
             </h2>
           </Footnote>
-          <Subtitle
+          <Typography
-            type="two"
+            variant="Title/Subtitle/md"
             className={styles.description}
-            color="uiTextHighContrast"
           >
-            {intl.formatMessage(
+            <p>
-              {
+              {intl.formatMessage(
-                id: "enterDetails.selectedRoom.roomType.description",
+                {
-                defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
+                  id: "enterDetails.selectedRoom.roomType.description",
-              },
+                  defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
-              {
-                roomType: room.roomType,
-                rateDescription: room.cancellationText,
-                rate: ([str]) => {
-                  return str ? <span className={styles.rate}>{str}</span> : null
                 },
-              }
+                {
-            )}
+                  roomType: room.roomType,
-          </Subtitle>
+                  rateDescription: room.cancellationText,
+                  rate: ([str]) => {
+                    return str ? (
+                      <span className={styles.rate}>{str}</span>
+                    ) : null
+                  },
+                }
+              )}
+            </p>
+          </Typography>
           <Button
             variant="Text"
             size="sm"

packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx

@@ -11,7 +11,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 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 useLang from "../../../../hooks/useLang"
@@ -101,12 +100,14 @@ export default function SummaryUI({
         role="button"
         onClick={isDesktop ? undefined : handleToggleSummary}
       >
-        <Subtitle className={styles.title} type="two">
+        <Typography className={styles.title} variant="Title/Subtitle/md">
-          {intl.formatMessage({
+          <p>
-            id: "booking.bookingSummary",
+            {intl.formatMessage({
-            defaultMessage: "Booking summary",
+              id: "booking.bookingSummary",
-          })}
+              defaultMessage: "Booking summary",
-        </Subtitle>
+            })}
+          </p>
+        </Typography>
         <Typography variant="Body/Paragraph/mdRegular" className={styles.date}>
           <p>
             {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}

packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx

@@ -12,7 +12,6 @@ import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/No
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useGetPointsCurrency } from "../../bookingFlowConfig/bookingFlowConfigContext"
@@ -88,7 +87,9 @@ export default function ListingHotelCardDialog({
           />
           <div>
             <div className={styles.name}>
-              <Subtitle type="two">{name}</Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p>{name}</p>
+              </Typography>
             </div>
             <div className={styles.facilities}>
               {amenities.map((facility) => (
@@ -127,35 +128,47 @@ export default function ListingHotelCardDialog({
                 </Caption>
               )}
               <div className={styles.listingPrices}>
-                {publicPrice && !isUserLoggedIn && memberPrice ? (
+                {publicPrice && !isUserLoggedIn ? (
                   <>
-                    <Subtitle type="two">
+                    <Typography variant="Title/Subtitle/md">
-                      {publicPrice} {currency}
+                      <p>
-                    </Subtitle>
+                        {publicPrice} {currency}
+                      </p>
+                    </Typography>
                     {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                     {memberPrice && <Caption>/</Caption>}
                   </>
                 ) : (
                   bookingCode &&
                   publicPrice && (
-                    <Subtitle type="two" color="red">
+                    <Typography
-                      {publicPrice} {currency}
+                      variant="Title/Subtitle/md"
-                    </Subtitle>
+                      className={styles.red}
+                    >
+                      <p>
+                        {publicPrice} {currency}
+                      </p>
+                    </Typography>
                   )
                 )}
                 {memberPrice && (
-                  <Subtitle type="two" color="red">
+                  <Typography
-                    {intl.formatMessage(
+                    variant="Title/Subtitle/md"
-                      {
+                    className={styles.red}
-                        id: "common.priceCurrency",
+                  >
-                        defaultMessage: "{price} {currency}",
+                    <p>
-                      },
+                      {intl.formatMessage(
-                      {
+                        {
-                        price: memberPrice,
+                          id: "common.priceCurrency",
-                        currency,
+                          defaultMessage: "{price} {currency}",
-                      }
+                        },
-                    )}
+                        {
-                  </Subtitle>
+                          price: memberPrice,
+                          currency,
+                        }
+                      )}
+                    </p>
+                  </Typography>
                 )}
                 {redemptionPrice && (
                   <HotelPointsRow
@@ -164,31 +177,36 @@ export default function ListingHotelCardDialog({
                   />
                 )}
                 {chequePrice && (
-                  <Subtitle type="two">
+                  <>
-                    {intl.formatMessage(
+                    <Typography variant="Title/Subtitle/md">
-                      {
+                      <span>
-                        id: "common.priceCurrency",
+                        {intl.formatMessage(
-                        defaultMessage: "{price} {currency}",
-                      },
-                      {
-                        price: chequePrice.numberOfCheques,
-                        currency: "CC",
-                      }
-                    )}
-                    {chequePrice.additionalPricePerStay > 0
-                      ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                        " + " +
-                        intl.formatMessage(
                           {
                             id: "common.priceCurrency",
                             defaultMessage: "{price} {currency}",
                           },
                           {
-                            price: chequePrice.additionalPricePerStay,
+                            price: chequePrice.numberOfCheques,
-                            currency: chequePrice.currency,
+                            currency: "CC",
                           }
-                        )
+                        )}
-                      : null}
+                        {chequePrice.additionalPricePerStay > 0
+                          ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                            " + " +
+                            intl.formatMessage(
+                              {
+                                id: "common.priceCurrency",
+                                defaultMessage: "{price} {currency}",
+                              },
+                              {
+                                price: chequePrice.additionalPricePerStay,
+                                currency: chequePrice.currency,
+                              }
+                            )
+                          : null}
+                      </span>
+                    </Typography>
+
                     <Typography variant="Body/Paragraph/mdRegular">
                       {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                       <span>
@@ -199,20 +217,24 @@ export default function ListingHotelCardDialog({
                         })}
                       </span>
                     </Typography>
-                  </Subtitle>
+                  </>
                 )}
                 {voucherPrice && (
-                  <Subtitle type="two">
+                  <>
-                    {intl.formatMessage(
+                    <Typography variant="Title/Subtitle/md">
-                      {
+                      <p>
-                        id: "common.priceCurrency",
+                        {intl.formatMessage(
-                        defaultMessage: "{price} {currency}",
+                          {
-                      },
+                            id: "common.priceCurrency",
-                      {
+                            defaultMessage: "{price} {currency}",
-                        price: voucherPrice,
+                          },
-                        currency,
+                          {
-                      }
+                            price: voucherPrice,
-                    )}
+                            currency,
+                          }
+                        )}
+                      </p>
+                    </Typography>
                     <Typography variant="Body/Paragraph/mdRegular">
                       {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                       <span>
@@ -223,7 +245,7 @@ export default function ListingHotelCardDialog({
                         })}
                       </span>
                     </Typography>
-                  </Subtitle>
+                  </>
                 )}
               </div>
             </div>

packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css

@@ -19,6 +19,10 @@
   gap: var(--Space-x15);
 }
 
+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .name {
   height: 48px;
   max-width: 180px;

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx

@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
@@ -5,7 +6,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
@@ -152,18 +152,22 @@ export function DesktopSummary({
         </div>
         <div className={styles.summaryPrice}>
           <div className={styles.summaryPriceTextDesktop}>
-            <Subtitle
+            <Typography
-              color={showDiscounted ? "red" : "uiTextHighContrast"}
+              variant="Title/Subtitle/md"
-              textAlign="right"
+              className={cx(styles.alignRight, {
+                [styles.red]: showDiscounted,
+              })}
             >
-              {formatPrice(
+              <p>
-                intl,
+                {formatPrice(
-                selectedRates.totalPrice.local.price,
+                  intl,
-                selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.price,
-                selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.currency,
-                selectedRates.totalPrice.local.additionalPriceCurrency
+                  selectedRates.totalPrice.local.additionalPrice,
-              )}
+                  selectedRates.totalPrice.local.additionalPriceCurrency
-            </Subtitle>
+                )}
+              </p>
+            </Typography>
             {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
               <Caption
                 textAlign="right"
@@ -210,15 +214,20 @@ export function DesktopSummary({
                 defaultMessage: "Total price",
               })}
             </Caption>
-            <Subtitle color={showDiscounted ? "red" : "uiTextHighContrast"}>
+            <Typography
-              {formatPrice(
+              variant="Title/Subtitle/md"
-                intl,
+              className={cx({ [styles.red]: showDiscounted })}
-                selectedRates.totalPrice.local.price,
+            >
-                selectedRates.totalPrice.local.currency,
+              <p>
-                selectedRates.totalPrice.local.additionalPrice,
+                {formatPrice(
-                selectedRates.totalPrice.local.additionalPriceCurrency
+                  intl,
-              )}
+                  selectedRates.totalPrice.local.price,
-            </Subtitle>
+                  selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.additionalPriceCurrency
+                )}
+              </p>
+            </Typography>
             <Footnote
               color="uiTextMediumContrast"
               className={styles.summaryPriceTextMobile}
@@ -258,18 +267,23 @@ function RateSummary({
   if (!room || !room.isSelected) {
     return (
       <div key={`unselected-${roomIndex}`}>
-        <Subtitle color="uiTextPlaceholder">
+        <Typography
-          {intl.formatMessage(
+          variant="Title/Subtitle/md"
-            {
+          className={styles.placeholderText}
-              id: "booking.roomIndex",
+        >
-              defaultMessage: "Room {roomIndex}",
+          <p>
-            },
+            {intl.formatMessage(
-            { roomIndex: roomIndex + 1 }
+              {
-          )}
+                id: "booking.roomIndex",
-        </Subtitle>
+                defaultMessage: "Room {roomIndex}",
+              },
+              { roomIndex: roomIndex + 1 }
+            )}
+          </p>
+        </Typography>
         <Typography
           variant="Body/Paragraph/mdRegular"
-          className={styles.selectRoom}
+          className={styles.placeholderText}
         >
           <p>
             {intl.formatMessage({
@@ -286,12 +300,14 @@ function RateSummary({
     <div key={roomIndex}>
       {isMultiRoom ? (
         <>
-          <Subtitle color="uiTextHighContrast">
+          <Typography variant="Title/Subtitle/md">
-            {intl.formatMessage(
+            <p>
-              { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
+              {intl.formatMessage(
-              { roomIndex: roomIndex + 1 }
+                { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
-            )}
+                { roomIndex: roomIndex + 1 }
-          </Subtitle>
+              )}
+            </p>
+          </Typography>
           <Typography
             variant="Body/Paragraph/mdRegular"
             className={styles.uiTextMediumContrast}
@@ -304,9 +320,9 @@ function RateSummary({
         </>
       ) : (
         <>
-          <Subtitle color="uiTextHighContrast">
+          <Typography variant="Title/Subtitle/md">
-            {room.roomInfo.roomType}
+            <p>{room.roomInfo.roomType}</p>
-          </Subtitle>
+          </Typography>
           <Typography
             variant="Body/Paragraph/mdRegular"
             className={styles.uiTextMediumContrast}

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css

@@ -37,6 +37,14 @@
   max-width: 264px;
 }
 
+.alignRight {
+  text-align: right;
+}
+
+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .summaryPrice {
   align-self: center;
   display: flex;
@@ -77,8 +85,8 @@
   display: block;
 }
 
-.selectRoom {
+.placeholderText {
-  color: var(--UI-Text-Placeholder);
+  color: var(--Text-Tertiary);
 }
 
 .uiTextMediumContrast {

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -8,7 +8,6 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
@@ -56,9 +55,9 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
             { roomIndex: roomNr }
           )}
         </Caption>
-        <Subtitle className={styles.subtitle} color="uiTextHighContrast">
+        <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
-          {selectedRate.roomInfo.roomType}
+          <p>{selectedRate.roomInfo.roomType}</p>
-        </Subtitle>
+        </Typography>
         <Typography variant="Body/Paragraph/mdRegular">
           <div>
             <p className={styles.uiTextMediumContrast}>{rateTitle}</p>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
 import { SelectedRoomPanel } from "./SelectedRoomPanel"
@@ -116,7 +116,9 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {
 
         <div className={styles.header}>
           {selectedRate && !isActiveRoom ? null : (
-            <Subtitle color="uiTextHighContrast">{title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p>{title}</p>
+            </Typography>
           )}
           {selectedRate && isActiveRoom ? (
             <Button

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">
+          <Typography variant="Title/Subtitle/md">
-            {productTypeCheque.localPrice.numberOfCheques}
+            <p>{productTypeCheque.localPrice.numberOfCheques}</p>
-          </Subtitle>
+          </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">
+              <Typography variant="Title/Subtitle/md">
-                {productTypeCheque.localPrice.additionalPricePerStay}
+                <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
-              </Subtitle>
+              </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">
+          <Typography variant="Title/Subtitle/md">
-            {productTypeVoucher.numberOfVouchers}
+            <p>{productTypeVoucher.numberOfVouchers}</p>
-          </Subtitle>
+          </Typography>
           <Caption color="uiTextHighContrast" className={styles.currency}>
             {intl.formatMessage(
               {

packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx

@@ -1,6 +1,6 @@
 import { MaterialIcon } from "../../Icons/MaterialIcon"
 import { OldDSButton as Button } from "../../OldDSButton"
-import Subtitle from "../../Subtitle"
+import { Typography } from "../../Typography"
 
 import styles from "./modalContent.module.css"
 
@@ -35,7 +35,9 @@ export function ModalContentWithActions({
     <>
       {title && (
         <header className={styles.header}>
-          <Subtitle>{title}</Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{title}</p>
+          </Typography>
           <button onClick={onClose} type="button" className={styles.close}>
             <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
           </button>

packages/design-system/lib/components/Subtitle/index.tsx

@@ -1,51 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { subtitleVariants } from "./variants"
-
-import type { VariantProps } from "class-variance-authority"
-import { Children, ReactNode } from "react"
-
-interface SubtitleProps
-  extends
-    Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof subtitleVariants> {
-  asChild?: boolean
-}
-
-/**
- * @deprecated Use `Typography` instead.
- */
-export default function Subtitle({
-  asChild = false,
-  className = "",
-  color,
-  textAlign,
-  textTransform,
-  type,
-  ...props
-}: SubtitleProps) {
-  if (checkForEmptyChildren(props.children) === 0) {
-    return null
-  }
-  const Comp = asChild ? Slot : "p"
-  const classNames = subtitleVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-    type,
-  })
-  return <Comp className={classNames} {...props} />
-}
-
-function checkForEmptyChildren(children: ReactNode) {
-  return Children.toArray(children).filter((child) => {
-    if (child === "") {
-      return false
-    } else if (child == null) {
-      return false
-    } else {
-      return true
-    }
-  }).length
-}

packages/design-system/lib/components/Subtitle/subtitle.module.css

@@ -1,92 +0,0 @@
-.subtitle {
-  margin: 0;
-  padding: 0;
-}
-
-.one {
-  font-family: var(--typography-Subtitle-1-fontFamily);
-  font-size: clamp(
-    var(--typography-Subtitle-1-Mobile-fontSize),
-    0.3vw + 15px,
-    var(--typography-Subtitle-1-Desktop-fontSize)
-  );
-  font-weight: 500;
-  letter-spacing: var(--typography-Subtitle-1-letterSpacing);
-  line-height: var(--typography-Subtitle-1-lineHeight);
-}
-
-.two {
-  font-family: var(--typography-Subtitle-2-fontFamily);
-  font-size: clamp(
-    var(--typography-Subtitle-2-Mobile-fontSize),
-    0.3vw + 15px,
-    var(--typography-Subtitle-2-Desktop-fontSize)
-  );
-  font-weight: 500;
-  letter-spacing: var(--typography-Subtitle-2-letterSpacing);
-  line-height: var(--typography-Subtitle-2-lineHeight);
-}
-
-.regular {
-  text-transform: none;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.baseTextHighContrast {
-  color: var(--Base-Text-High-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.baseTextDisabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.mainGrey60 {
-  color: var(--Main-Grey-60);
-}

packages/design-system/lib/components/Subtitle/variants.ts

@@ -1,42 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./subtitle.module.css"
-
-const config = {
-  variants: {
-    color: {
-      black: styles.black,
-      burgundy: styles.burgundy,
-      baseTextDisabled: styles.baseTextDisabled,
-      pale: styles.pale,
-      baseTextHighContrast: styles.baseTextHighContrast,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      red: styles.red,
-      mainGrey60: styles.mainGrey60,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-      right: styles.right,
-    },
-    textTransform: {
-      regular: styles.regular,
-      uppercase: styles.uppercase,
-      capitalize: styles.capitalize,
-    },
-    type: {
-      one: styles.one,
-      two: styles.two,
-    },
-  },
-  defaultVariants: {
-    color: "black",
-    textAlign: "left",
-    textTransform: "regular",
-    type: "one",
-  },
-} as const
-
-export const subtitleVariants = cva(styles.subtitle, config)

packages/design-system/package.json

@@ -175,7 +175,6 @@
     "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
     "./StaticMap": "./lib/components/StaticMap/index.tsx",
     "./Stepper": "./lib/components/Stepper/index.tsx",
-    "./Subtitle": "./lib/components/Subtitle/index.tsx",
     "./Switch": "./lib/components/Switch/index.tsx",
     "./Table": "./lib/components/Table/index.tsx",
     "./TextArea": "./lib/components/TextArea/index.tsx",