Merged in chore/BOOK-708-replace-title-component (pull request #3414)

Chore/BOOK-708 replace title component

* chore(BOOK-708): replace title with typography

* chore(BOOK-708): replace title with typography

* chore(BOOK-708): remove Title from package.json


Approved-by: Linus Flood
Approved-by: Anton Gunnarsson

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -5,7 +5,7 @@ import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 import { serverClient } from "@/lib/trpc/server"
 
 import Blocks from "@/components/Blocks"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
@@ -46,9 +46,8 @@ export default async function MyPages() {
           </header>
         ) : (
           <SectionHeader
-            title={heading}
+            heading={heading}
             preamble={preamble}
-            headingAs="h1"
             headingLevel="h1"
           />
         )}

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

@@ -5,7 +5,7 @@ import { useState } from "react"
 import { Carousel } from "@/components/Carousel"
 import { ContentCard } from "@/components/ContentCard"
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import TabFilters from "@/components/TabFilters"
 
@@ -22,7 +22,7 @@ export default function CardGallery({ card_gallery }: CardGalleryProps) {
 
   return (
     <Section>
-      <SectionHeader title={heading} link={link} />
+      <SectionHeader heading={heading} link={link} />
       {filterCategories.length > 0 && activeFilter && (
         <TabFilters
           categories={filterCategories}

apps/scandic-web/components/Blocks/DynamicContent/HowItWorks/howItWorks.module.css

@@ -7,3 +7,7 @@
   justify-content: center;
   width: 100%;
 }
+
+.title {
+  color: var(--Text-Heading);
+}

apps/scandic-web/components/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -1,4 +1,4 @@
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
 
@@ -13,12 +13,14 @@ export default async function HowItWorks({ dynamic_content }: HowItWorksProps) {
   return (
     <SectionWrapper dynamic_content={dynamic_content}>
       <section className={styles.container}>
-        <Title level="h3">
+        <Typography variant="Title/sm" className={styles.title}>
-          {intl.formatMessage({
+          <h3>
-            id: "common.howItWorks",
+            {intl.formatMessage({
-            defaultMessage: "How it works",
+              id: "common.howItWorks",
-          })}
+              defaultMessage: "How it works",
-        </Title>
+            })}
+          </h3>
+        </Typography>
       </section>
     </SectionWrapper>
   )

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

@@ -1,7 +1,7 @@
 import { getJobylonFeed } from "@/lib/trpc/memoizedRequests"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import JobList from "./JobList"
@@ -28,8 +28,7 @@ export default async function JobylonFeed({
       <SectionHeader
         link={link}
         preamble={subtitle}
-        title={title}
+        heading={title}
-        headingAs="h3"
         headingLevel="h2"
       />
       <JobList allJobs={allJobs} />

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,6 +1,6 @@
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { serverClient } from "@/lib/trpc/server"
 
@@ -78,9 +78,9 @@ async function LevelCard({ level }: LevelCardProps) {
         </BiroScript>
         <MembershipLevelIcon level={level.level_id} color="red" />
       </header>
-      <Title textAlign="center" level="h5">
+      <Typography variant="Title/xs" className={styles.pointMsg}>
-        {pointsMsg}
+        <h5>{pointsMsg}</h5>
-      </Title>
+      </Typography>
       <div className={styles.textContainer}>
         {level.rewards.map((reward) => (
           <Caption

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -3,6 +3,11 @@
   gap: var(--Space-x2);
 }
 
+.pointMsg {
+  text-align: center;
+  color: var(--Text-Heading);
+}
+
 .link {
   justify-self: center;
 }

apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/index.tsx

@@ -3,7 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import ShortcutsListItems from "@/components/Blocks/ShortcutsList/ShortcutsListItems"
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
@@ -126,7 +126,6 @@ export default async function MyPagesOverviewShortcuts() {
             id: "myPagesOverviewShortcuts.yourMembership",
             defaultMessage: "Your membership",
           })}
-          headingAs="h4"
           headingLevel="h3"
         />
         <ShortcutsListItems
@@ -140,7 +139,6 @@ export default async function MyPagesOverviewShortcuts() {
             id: "myPagesOverviewShortcuts.scandicFriendsLinks",
             defaultMessage: "Scandic Friends Links",
           })}
-          headingAs="h4"
           headingLevel="h3"
         />
         <ShortcutsListItems

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown } from "react-feather"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
   findAvailableRewards,
@@ -71,9 +71,12 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
     <details className={styles.details}>
       <summary className={styles.summary}>
         <hgroup className={styles.rewardHeader}>
-          <Title as="h4" level="h2" textTransform="regular">
+          <Typography
-            {name}
+            variant="Title/Subtitle/md"
-          </Title>
+            className={styles.rewardTitle}
+          >
+            <h2>{name}</h2>
+          </Typography>
           <span className={styles.chevron}>
             <ChevronDown />
           </span>

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -43,6 +43,9 @@
   padding-right: calc(var(--Space-x3) + var(--Space-x1));
 }
 
+.rewardTitle {
+  color: var(--Text-Heading);
+}
 .chevron {
   display: flex;
   align-self: start;

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown } from "react-feather"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import RewardValue from "../../RewardValue"
 
@@ -19,9 +19,9 @@ export default function RewardCard({
         <details className={styles.details}>
           <summary className={styles.summary}>
             <hgroup className={styles.rewardCardHeader}>
-              <Title as="h4" level="h2" textTransform="regular">
+              <Typography variant="Title/Subtitle/md" className={styles.title}>
-                {title}
+                <h2>{title}</h2>
-              </Title>
+              </Typography>
               <span className={styles.chevron}>
                 <ChevronDown />
               </span>

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css

@@ -3,6 +3,9 @@
   grid-column: 1/3;
 }
 
+.title {
+  color: var(--Text-Heading);
+}
 .rewardCardHeader {
   display: grid;
   grid-template-columns: 1fr auto;

apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx

@@ -1,5 +1,5 @@
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import ClaimPoints from "../ClaimPoints"
@@ -17,7 +17,7 @@ export default function EarnAndBurn({
   return (
     <Section>
       <div className={styles.header}>
-        <SectionHeader title={title} link={link} preamble={subtitle} />
+        <SectionHeader heading={title} link={link} preamble={subtitle} />
 
         <ClaimPoints />
       </div>

apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx

@@ -1,7 +1,7 @@
 import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 
 import ExpiringPointsTable from "./ExpiringPointsTable"
 
@@ -20,7 +20,7 @@ export default async function ExpiringPoints({
 
   return (
     <Section>
-      <SectionHeader title={title} link={link} preamble={subtitle} />
+      <SectionHeader heading={title} link={link} preamble={subtitle} />
       <ExpiringPointsTable
         points={membershipLevel.pointsToExpire}
         expirationDate={membershipLevel.pointsExpiryDate}

apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/index.tsx

@@ -2,7 +2,7 @@ import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import PointsToSpendCard from "../PointsToSpendCard"
@@ -26,8 +26,7 @@ export default async function PointsOverview({
       <SectionHeader
         link={link}
         preamble={subtitle}
-        title={title}
+        heading={title}
-        headingAs="h3"
         headingLevel="h1"
       />
       <div className={styles.membershipCardsContainer}>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx

@@ -4,7 +4,7 @@ import {
 } from "@/lib/trpc/memoizedRequests"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import ClientCurrentRewards from "./Client"
@@ -27,7 +27,7 @@ export default async function CurrentRewardsBlock({
 
   return (
     <Section>
-      <SectionHeader title={title} link={link} preamble={subtitle} />
+      <SectionHeader heading={title} link={link} preamble={subtitle} />
       <ClientCurrentRewards
         rewards={rewardsResponse.rewards}
         showRedeem={true}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx

@@ -8,7 +8,7 @@ import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 import { getIntl } from "@/i18n"
@@ -42,7 +42,7 @@ export default async function NextLevelRewardsBlock({
 
   return (
     <Section>
-      <SectionHeader title={title} preamble={subtitle} link={link} />
+      <SectionHeader heading={title} preamble={subtitle} link={link} />
       <Grids.Stackable columns={2}>
         {nextLevelRewards.rewards.map((reward) => (
           <article key={reward.reward_id} className={styles.card}>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"
 
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useRedeemFlow from "./useRedeemFlow"
@@ -15,12 +14,14 @@ export function ConfirmClose({ close }: { close: () => void }) {
   return (
     <>
       <div className={styles.modalContent}>
-        <Title level="h3" textAlign="center" textTransform="regular">
+        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
-          {intl.formatMessage({
+          <h3>
-            id: "redeem.confirmClose.title",
+            {intl.formatMessage({
-            defaultMessage: "If you close this your benefit will be removed",
+              id: "redeem.confirmClose.title",
-          })}
+              defaultMessage: "If you close this your benefit will be removed",
-        </Title>
+            })}
+          </h3>
+        </Typography>
         <Typography variant="Body/Paragraph/mdRegular">
           <p>
             {intl.formatMessage({

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 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 Title from "@scandic-hotels/design-system/Title"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -22,9 +21,9 @@ export default function Campaign({ reward }: { reward: Campaign }) {
     <>
       <div className={styles.modalContent}>
         <RewardIcon rewardId={reward.reward_id} />
-        <Title level="h3" textAlign="center" textTransform="regular">
+        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
-          {reward.label}
+          <h3>{reward.label}</h3>
-        </Title>
+        </Typography>
         <Typography
           variant="Body/Paragraph/mdRegular"
           className={styles.rewardDescription}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx

@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"
 
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
@@ -43,9 +42,9 @@ export default function Tier({
           </div>
         )}
         <RewardIcon rewardId={reward.reward_id} />
-        <Title level="h3" textAlign="center" textTransform="regular">
+        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
-          {reward.label}
+          <h3>{reward.label}</h3>
-        </Title>
+        </Typography>
 
         {reward.redeemLocation !== "Non-redeemable" && (
           <>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -8,6 +8,11 @@
   align-items: center;
 }
 
+.rewardLabel {
+  text-align: center;
+  color: var(--Text-Heading);
+}
+
 .redeemed {
   display: flex;
   justify-content: center;

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx

@@ -17,7 +17,7 @@ import {
 import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import { getIntl } from "@/i18n"
 import { getSasTierExpirationDate } from "@/utils/sas"
@@ -44,7 +44,7 @@ export default async function SASLinkedAccount({
   return (
     <div className={styles.container}>
       <Section>
-        <SectionHeader link={link} preamble={subtitle} title={title} />
+        <SectionHeader link={link} preamble={subtitle} heading={title} />
         <SectionLink link={link} variant="mobile" />
         <Suspense fallback={<MatchedAccountInfoSkeleton />}>
           <MatchedAccountInfo />

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import { getLang } from "@/i18n/serverContext"
 
@@ -25,7 +25,7 @@ export default async function SASTransferPoints({
 
   return (
     <Section>
-      <SectionHeader link={link} preamble={subtitle} title={title} />
+      <SectionHeader link={link} preamble={subtitle} heading={title} />
       <SectionLink link={link} variant="mobile" />
       <Suspense fallback={<TransferPointsFormSkeleton lang={lang} />}>
         <TransferPointsForm lang={lang} />

apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx

@@ -1,5 +1,5 @@
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
@@ -19,9 +19,7 @@ export default function SectionWrapper({
         <SectionHeader
           link={dynamic_content.link}
           preamble={dynamic_content.subtitle}
-          title={dynamic_content.title}
+          heading={dynamic_content.title}
-          headingAs="h3"
-          headingLevel="h2"
         />
       ) : null}
       {children}

apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx

@@ -5,7 +5,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
 
@@ -54,9 +54,9 @@ function CardContent({ stay }: StayCardProps) {
         height={240}
       />
       <footer className={styles.footer}>
-        <Title as="h4" className={styles.hotel} level="h3">
+        <Typography variant="Title/xs" className={styles.hotel}>
-          {hotelInformation.hotelName}
+          <h3>{hotelInformation.hotelName}</h3>
-        </Title>
+        </Typography>
         <div className={styles.date}>
           <MaterialIcon
             icon="calendar_month"

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -19,6 +19,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
+  color: var(--Text-Accent-Primary);
 }
 
 .burgundyTitle {

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -1,7 +1,6 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { env } from "@/env/server"
@@ -21,24 +20,20 @@ export default async function EmptyUpcomingStays() {
     return (
       <section className={styles.container}>
         <div className={styles.titleContainer}>
-          <Title
+          <Typography variant="Title/sm" className={styles.title}>
-            as="h4"
+            <h3>
-            level="h3"
-            color="red"
-            className={styles.title}
-            textAlign="center"
-          >
-            {intl.formatMessage({
-              id: "stays.noUpcomingStays",
-              defaultMessage: "You have no upcoming stays.",
-            })}
-            <span className={styles.burgundyTitle}>
               {intl.formatMessage({
-                id: "stays.whereToGoNext",
+                id: "stays.noUpcomingStays",
-                defaultMessage: "Where should you go next?",
+                defaultMessage: "You have no upcoming stays.",
               })}
-            </span>
+              <span className={styles.burgundyTitle}>
-          </Title>
+                {intl.formatMessage({
+                  id: "stays.whereToGoNext",
+                  defaultMessage: "Where should you go next?",
+                })}
+              </span>
+            </h3>
+          </Typography>
         </div>
         <Link
           href={href}

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

@@ -1,5 +1,5 @@
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 
 import ShortcutsListItems from "./ShortcutsListItems"
 
@@ -35,12 +35,7 @@ export default function ShortcutsList({
 
   return (
     <Section>
-      <SectionHeader
+      <SectionHeader preamble={subtitle} heading={title} headingLevel="h2" />
-        preamble={subtitle}
-        title={title}
-        headingAs="h3"
-        headingLevel="h2"
-      />
       <section className={styles.section}>
         {columns.map(({ id, column }) => (
           <ShortcutsListItems

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

@@ -11,7 +11,7 @@ import { useState } from "react"
 import Table from "@scandic-hotels/design-system/Table"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import styles from "./table.module.css"
@@ -54,7 +54,7 @@ export default function TableBlock({ data }: TableBlockProps) {
 
   return (
     <Section>
-      <SectionHeader preamble={preamble} title={heading} />
+      <SectionHeader preamble={preamble} heading={heading} />
       <div className={styles.tableWrapper}>
         <Table
           width={`${totalWidth}%`}

apps/scandic-web/components/Countdown/countdown.module.css

@@ -0,0 +1,3 @@
+.title {
+  color: var(--Text-Heading);
+}

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

@@ -4,7 +4,9 @@ import { useState } from "react"
 import { useInterval } from "usehooks-ts"
 
 import { dt } from "@scandic-hotels/common/dt"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./countdown.module.css"
 
 import type { CountdownProps } from "@/types/components/countdown"
 
@@ -28,8 +30,8 @@ export default function Countdown({
   )
 
   return (
-    <Title as="h1">
+    <Typography variant="Title/lg" className={styles.title}>
       <time dateTime={time.toISOString()}>{time.format("m:ss")}</time>
-    </Title>
+    </Typography>
   )
 }

apps/scandic-web/components/DestinationFilterAndSort/Filter/filter.module.css

@@ -8,6 +8,10 @@
   gap: var(--Space-x4);
 }
 
+.title {
+  color: var(--Text-Heading);
+}
+
 .fieldset {
   border: none;
   padding: 0;

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

@@ -2,7 +2,6 @@
 
 import { useIntl } from "react-intl"
 
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
@@ -33,12 +32,14 @@ export default function Filter({ filters }: FilterProps) {
 
   return (
     <div className={styles.container}>
-      <Title level="h4">
+      <Typography variant="Title/xs" className={styles.title}>
-        {intl.formatMessage({
+        <h4>
-          id: "filter.filterBy",
+          {intl.formatMessage({
-          defaultMessage: "Filter by",
+            id: "filter.filterBy",
-        })}
+            defaultMessage: "Filter by",
-      </Title>
+          })}
+        </h4>
+      </Typography>
       <form className={styles.form}>
         <fieldset className={styles.fieldset}>
           <Typography variant="Title/Subtitle/md">

apps/scandic-web/components/HotelReservation/MyStay/Header/header.module.css

@@ -1,4 +1,4 @@
-header .title {
+.header {
   position: relative;
   z-index: 2;
   left: 0;
@@ -6,23 +6,10 @@ header .title {
   margin: 0 auto;
   padding-top: var(--Space-x6);
   margin-top: var(--Space-x2);
+  text-align: center;
+  color: var(--Text-Inverted);
 }
 
-.title .hotelName {
+.myStayAt {
-  font-family: var(--typography-Title-3-fontFamily);
+  transform: rotate(-4deg) translate(0px, -10px);
-  font-size: var(--typography-Title-3-fontSize);
-  font-weight: var(--typography-Title-3-fontWeight);
-  letter-spacing: var(--typography-Title-3-letterSpacing);
-  line-height: var(--typography-Title-3-lineHeight);
-  display: block;
-}
-
-@media (min-width: 768px) {
-  .title .hotelName {
-    font-family: var(--typography-Title-1-fontFamily);
-    font-size: var(--typography-Title-1-fontSize);
-    font-weight: var(--typography-Title-1-fontWeight);
-    letter-spacing: var(--typography-Title-1-letterSpacing);
-    line-height: var(--typography-Title-1-lineHeight);
-  }
 }

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

@@ -1,6 +1,5 @@
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import { getIntl } from "@/i18n"
 
 import styles from "./header.module.css"
@@ -13,21 +12,21 @@ export async function Header({
 }: Pick<Hotel, "cityName" | "name">) {
   const intl = await getIntl()
   return (
-    <header>
+    <header className={styles.header}>
-      <Title as="h2" color="white" className={styles.title} textAlign="center">
+      <Typography variant="Title/Decorative/lg" className={styles.myStayAt}>
-        <BiroScript type="two" tilted="medium">
+        <h2>
           {intl.formatMessage({
             id: "myStay.header.myStayAt",
             defaultMessage: "My stay at",
           })}
-          {
+        </h2>
-            /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
+      </Typography>
-            " "
+      <Typography variant="Title/lg">
-          }
+        <h2 className={styles.hotelName}>{name}</h2>
-        </BiroScript>
+      </Typography>
-        <span className={styles.hotelName}>{name}</span>
+      <Typography variant="Title/md">
-        {cityName}
+        <h3>{cityName}</h3>
-      </Title>
+      </Typography>
     </header>
   )
 }

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 Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Section } from "@/components/Section"
@@ -31,9 +30,9 @@ export function SasTierComparison({
   return (
     <Section className={styles.comparisonSection}>
       <div className={styles.header}>
-        <Title level="h2" textAlign="center">
+        <Typography variant="Title/md" className={styles.title}>
-          {title}
+          <h2>{title}</h2>
-        </Title>
+        </Typography>
         {preamble && <p className={styles.preamble}>{preamble}</p>}
       </div>
       <div>

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

@@ -15,6 +15,11 @@
   text-align: center;
 }
 
+.title {
+  text-align: center;
+  color: var(--Text-Heading);
+}
+
 .preamble {
   margin: 0;
   white-space: pre-wrap;

apps/scandic-web/components/Section/Header/Deprecated.tsx

@@ -1,52 +0,0 @@
-import Title, { type HeadingProps } from "@scandic-hotels/design-system/Title"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import SectionLink from "../Link"
-
-import styles from "./header.module.css"
-
-type HeaderProps = {
-  link?: {
-    href: string
-    text: string
-  }
-  preamble?: string | null
-  textTransform?: HeadingProps["textTransform"]
-  title?: string | null
-  headingLevel?: HeadingProps["level"]
-  headingAs?: HeadingProps["as"]
-}
-/**
- * @deprecated Use `@/components/Section/Header` instead.
- */
-export default function SectionHeader({
-  link,
-  preamble,
-  title,
-  textTransform,
-  headingAs = "h4",
-  headingLevel = "h2",
-}: HeaderProps) {
-  if (!title && !preamble && !link) {
-    return null
-  }
-
-  return (
-    <header className={styles.header}>
-      <Title
-        as={headingAs}
-        className={styles.title}
-        level={headingLevel}
-        textTransform={textTransform}
-      >
-        {title}
-      </Title>
-      {preamble && (
-        <Typography variant="Body/Lead text" className={styles.preamble}>
-          <p>{preamble}</p>
-        </Typography>
-      )}
-      <SectionLink link={link} variant="desktop" />
-    </header>
-  )
-}

apps/scandic-web/components/Section/Header/index.tsx

@@ -11,9 +11,8 @@ import styles from "./header.module.css"
 import type { HTMLAttributes } from "react"
 
 interface SectionHeaderProps
-  extends HTMLAttributes<HTMLElement>,
+  extends HTMLAttributes<HTMLElement>, VariantProps<typeof headingVariants> {
-    VariantProps<typeof headingVariants> {
+  heading?: string | null
-  heading?: string
   headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
   preamble?: string | null
   link?: {

apps/scandic-web/components/TempDesignSystem/Card/card.module.css

@@ -56,6 +56,9 @@
 
 .themeOne {
   background: var(--Primary-Light-Surface-Normal);
+  .heading {
+    color: var(--Primary-Light-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Light-On-Surface-Text);
   }
@@ -63,6 +66,9 @@
 
 .themeTwo {
   background: var(--Secondary-Light-Surface-Normal);
+  .heading {
+    color: var(--Secondary-Light-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Secondary-Light-On-Surface-Text);
   }
@@ -70,6 +76,9 @@
 
 .themeThree {
   background: var(--Tertiary-Light-Surface-Normal);
+  .heading {
+    color: var(--Tertiary-Light-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Tertiary-Light-On-Surface-Text);
   }
@@ -77,6 +86,9 @@
 
 .themePrimaryDark {
   background: var(--Primary-Dark-Surface-Normal);
+  .heading {
+    color: var(--Primary-Dark-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Dark-On-Surface-Text);
   }
@@ -84,6 +96,9 @@
 
 .themePrimaryDim {
   background: var(--Primary-Dim-Surface-Normal);
+  .heading {
+    color: var(--Primary-Dim-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Dim-On-Surface-Text);
   }
@@ -91,6 +106,9 @@
 
 .themePrimaryInverted {
   background: var(--Base-Surface-Primary-light-Normal);
+  .heading {
+    color: var(--Primary-Light-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Light-On-Surface-Text);
   }
@@ -98,6 +116,9 @@
 
 .themePrimaryStrong {
   background: var(--Primary-Strong-Surface-Normal);
+  .heading {
+    color: var(--Primary-Strong-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Strong-On-Surface-Text);
   }
@@ -107,6 +128,9 @@
   .bodyText {
     color: var(--Base-Text-Inverted);
   }
+  .heading {
+    color: var(--Base-Text-Inverted);
+  }
   .content {
     position: absolute;
   }

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

@@ -3,12 +3,11 @@ import Link from "next/link"
 
 import Image from "@scandic-hotels/design-system/Image"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 
-import { getButtonTheme, getScriptFontColor, getTitleFontColor } from "./utils"
+import { getButtonTheme, getScriptFontColor } from "./utils"
 import { cardVariants } from "./variants"
 
 import styles from "./card.module.css"
@@ -30,7 +29,6 @@ export default function Card({
   height,
 }: CardProps) {
   const buttonTheme = getButtonTheme(theme)
-  const titleFontColor = getTitleFontColor(theme)
   const scriptFontColor = getScriptFontColor(theme)
 
   return (
@@ -71,15 +69,9 @@ export default function Card({
             </BiroScript>
           </section>
         )}
-        <Title
+        <Typography variant="Title/smLowCase" className={styles.heading}>
-          as="h3"
+          <h3>{heading}</h3>
-          level="h3"
+        </Typography>
-          textAlign="center"
-          textTransform="regular"
-          color={titleFontColor}
-        >
-          {heading}
-        </Title>
         {bodyText && (
           <Typography
             variant="Body/Paragraph/mdRegular"

apps/scandic-web/components/TempDesignSystem/Card/utils.ts

@@ -1,33 +1,9 @@
 import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
-import type Title from "@scandic-hotels/design-system/Title"
 import type { VariantProps } from "class-variance-authority"
-import type { ComponentProps } from "react"
 
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
 
-type TitleColor = ComponentProps<typeof Title>["color"]
-export function getTitleFontColor(theme: CardProps["theme"]): TitleColor {
-  switch (theme) {
-    case "one":
-      return "primaryLight"
-    case "two":
-      return "secondaryLight"
-    case "three":
-      return "tertiaryLight"
-    case "primaryDark":
-      return "primaryDark"
-    case "primaryDim":
-      return "primaryDim"
-    case "primaryInverted":
-      return "primaryLight"
-    case "primaryStrong":
-      return "primaryStrong"
-    case "image":
-      return "baseText"
-  }
-}
-
 export function getScriptFontColor(
   theme: CardProps["theme"]
 ): VariantProps<typeof biroScriptVariants>["color"] {

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

@@ -1,7 +1,6 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { loyaltyCardVariants } from "./variants"
@@ -36,9 +35,9 @@ export default function LoyaltyCard({
           dimensions={image.dimensions}
         />
       ) : null}
-      <Title as="h4" level="h3" textAlign="center">
+      <Typography variant="Title/xs" className={styles.heading}>
-        {heading}
+        <h3>{heading}</h3>
-      </Title>
+      </Typography>
       {!!bodyText && (
         <Typography
           variant="Body/Paragraph/mdRegular"

apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css

@@ -18,6 +18,10 @@
   justify-self: center;
 }
 
+.heading {
+  color: var(--Text-Heading);
+}
+
 .white {
   background-color: var(--Main-Grey-White);
 }

apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx

@@ -1,4 +1,4 @@
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 
 import { serverClient } from "@/lib/trpc/server"
@@ -22,7 +22,9 @@ export default async function AboutScandicFriends() {
     <>
       <section className={styles.content}>
         <MaxWidth tag="main" className={styles.blocks}>
-          <Title>{loyaltyPage.heading}</Title>
+          <Typography variant="Title/md" className={styles.heading}>
+            <h1>{loyaltyPage.heading}</h1>
+          </Typography>
           <Blocks blocks={loyaltyPage.blocks} />
         </MaxWidth>
       </section>

apps/scandic-web/components/Webviews/LoyaltyPage/loyaltyPage.module.css

@@ -4,6 +4,10 @@
   gap: var(--Space-x5);
 }
 
+.heading {
+  color: var(--Text-Heading);
+}
+
 .blocks {
   display: grid;
   gap: var(--Space-x5);

packages/booking-flow/lib/components/EnterDetails/Header/header.module.css

@@ -39,6 +39,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x05);
+  text-align: center;
+  color: var(--Text-Inverted);
 }
 
 .mobileTitle {

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

@@ -3,7 +3,6 @@
 import { useIntl } from "react-intl"
 
 import Image from "@scandic-hotels/design-system/Image"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { HotelDetailsSidePeek } from "../../HotelDetailsSidePeek"
@@ -35,24 +34,12 @@ export default function HotelHeader({
       <div className={styles.wrapper}>
         <div className={styles.container}>
           <div className={styles.titleContainer}>
-            <Title
+            <Typography variant="Title/lg" className={styles.title}>
-              as="h1"
+              <h1>{hotel.name}</h1>
-              level="h1"
+            </Typography>
-              color="white"
+            <Typography variant="Title/md" className={styles.mobileTitle}>
-              textAlign="center"
+              <h1>{hotel.name}</h1>
-              className={styles.title}
+            </Typography>
-            >
-              {hotel.name}
-            </Title>
-            <Title
-              as="h2"
-              level="h1"
-              color="white"
-              className={styles.mobileTitle}
-              textAlign="center"
-            >
-              {hotel.name}
-            </Title>
             <Typography variant="Title/Overline/sm">
               <div className={styles.address}>{addressStr}</div>
             </Typography>

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 Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useEnterDetailsStore } from "../../../stores/enter-details"
@@ -102,14 +101,9 @@ export default function PriceChangeDialog({
                 size={48}
                 color="Icon/Interactive/Default"
               />
-              <Title
+              <Typography variant="Title/sm">
-                level="h1"
+                <h3>{title}</h3>
-                as="h3"
+              </Typography>
-                textAlign="center"
-                textTransform="uppercase"
-              >
-                {title}
-              </Title>
             </div>
             <Typography variant="Body/Paragraph/mdRegular">
               <p style={{ textAlign: "center" }}>

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css

@@ -74,6 +74,7 @@
   flex-direction: column;
   align-items: center;
   gap: var(--Space-x1);
+  color: var(--Text-Heading);
 }
 
 .footer {

packages/booking-flow/lib/components/EnterDetails/Room/Multiroom.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
@@ -38,17 +38,19 @@ export default function Multiroom() {
   return (
     <section id={`room-${roomNr}`}>
       <Header>
-        <Title level="h2" as="h4">
+        <Typography variant="Title/xs">
-          {intl.formatMessage(
+          <h2 style={{ color: "var(--Text-Heading)" }}>
-            {
+            {intl.formatMessage(
-              id: "booking.roomIndex",
+              {
-              defaultMessage: "Room {roomIndex}",
+                id: "booking.roomIndex",
-            },
+                defaultMessage: "Room {roomIndex}",
-            {
+              },
-              roomIndex: roomNr,
+              {
-            }
+                roomIndex: roomNr,
-          )}
+              }
-        </Title>
+            )}
+          </h2>
+        </Typography>
       </Header>
 
       <SelectedRoom />

packages/booking-flow/lib/components/EnterDetails/Room/One.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
@@ -42,17 +42,19 @@ export default function RoomOne({ user }: { user: User | null }) {
     <section id="room-1">
       {isMultiroom ? (
         <Header>
-          <Title level="h2" as="h4">
+          <Typography variant="Title/xs">
-            {intl.formatMessage(
+            <h2 style={{ color: "var(--Text-Heading)" }}>
-              {
+              {intl.formatMessage(
-                id: "booking.roomIndex",
+                {
-                defaultMessage: "Room {roomIndex}",
+                  id: "booking.roomIndex",
-              },
+                  defaultMessage: "Room {roomIndex}",
-              {
+                },
-                roomIndex: 1,
+                {
-              }
+                  roomIndex: 1,
-            )}
+                }
-          </Title>
+              )}
+            </h2>
+          </Typography>
         </Header>
       ) : null}
 

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css

@@ -8,8 +8,7 @@
   gap: var(--Space-x3);
 }
 
-.container .filterByTitle {
+.title {
-  font-weight: 500;
   color: var(--Text-Heading);
 }
 

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx

@@ -2,7 +2,6 @@ import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
@@ -117,12 +116,14 @@ export default function FilterContent({
   return (
     <aside className={`${styles.container} ${className}`}>
       <div>
-        <Title as="h4">
+        <Typography variant="Title/xs" className={styles.title}>
-          {intl.formatMessage({
+          <h4>
-            id: "filter.filterBy",
+            {intl.formatMessage({
-            defaultMessage: "Filter by",
+              id: "filter.filterBy",
-          })}
+              defaultMessage: "Filter by",
-        </Title>
+            })}
+          </h4>
+        </Typography>
         <div className={styles.facilities}>
           <Typography variant="Title/Subtitle/md">
             <p>

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

@@ -1,64 +0,0 @@
-import { Children, ReactNode } from "react"
-import { headingVariants } from "./variants"
-
-import type { VariantProps } from "class-variance-authority"
-
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
-
-export interface HeadingProps
-  extends
-    Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof headingVariants> {
-  as?: HeadingLevel
-  level?: HeadingLevel
-}
-
-/**
- * @deprecated Use `Typography` instead.
- */
-export default function Title({
-  /**
-   * What styling to use, based on heading level. If not provided `level`
-   * will determine the styling.
-   */
-  as,
-  children,
-  className = "",
-  color,
-  /**
-   * What HTML tag to use. Defaults to h1.
-   */
-  level = "h1",
-  textAlign,
-  textTransform,
-  ...rest
-}: HeadingProps) {
-  if (checkForEmptyChildren(children) === 0) {
-    return null
-  }
-  const Hx = level
-  const classNames = headingVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-    type: as ?? level,
-  })
-  return (
-    <Hx {...rest} className={classNames}>
-      {children}
-    </Hx>
-  )
-}
-
-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/Title/title.module.css

@@ -1,143 +0,0 @@
-.heading {
-  margin: 0;
-  padding: 0;
-  font-weight: 500;
-}
-
-/* Temporarily remove h1 styling until design tokens är updated */
-
-/* .h1 {
-  font-family: var(--typography-Title-1-fontFamily);
-  font-size: clamp(
-    var(--typography-Title-1-Mobile-fontSize),
-    2.6vw + 27px,
-    var(--typography-Title-1-Desktop-fontSize)
-  );
-  letter-spacing: var(--typography-Title-1-letterSpacing);
-  line-height: var(--typography-Title-1-lineHeight);
-  text-decoration: var(--typography-Title-1-textDecoration);
-} */
-
-.h1 {
-  font-family: var(--typography-Title-2-fontFamily);
-  font-size: clamp(
-    var(--typography-Title-2-Mobile-fontSize),
-    2vw + 20px,
-    var(--typography-Title-2-Desktop-fontSize)
-  );
-  letter-spacing: var(--typography-Title-2-letterSpacing);
-  line-height: var(--typography-Title-2-lineHeight);
-  text-decoration: var(--typography-Title-2-textDecoration);
-  font-weight: var(--typography-Title-2-fontWeight);
-}
-
-.h2 {
-  font-family: var(--typography-Title-3-fontFamily);
-  font-size: clamp(
-    var(--typography-Title-3-Mobile-fontSize),
-    0.6vw + 27px,
-    var(--typography-Title-3-Desktop-fontSize)
-  );
-  letter-spacing: var(--typography-Title-3-letterSpacing);
-  line-height: var(--typography-Title-3-lineHeight);
-  text-decoration: var(--typography-Title-3-textDecoration);
-  font-weight: var(--typography-Title-3-fontWeight);
-}
-
-.h3 {
-  font-family: var(--typography-Title-4-fontFamily);
-  font-size: clamp(
-    var(--typography-Title-4-Mobile-fontSize),
-    0.6vw + 19px,
-    var(--typography-Title-4-Desktop-fontSize)
-  );
-  letter-spacing: var(--typography-Title-4-letterSpacing);
-  line-height: var(--typography-Title-4-lineHeight);
-  text-decoration: var(--typography-Title-4-textDecoration);
-  font-weight: var(--typography-Title-4-fontWeight);
-}
-
-.h4 {
-  font-family: var(--typography-Title-5-fontFamily);
-  font-size: clamp(
-    var(--typography-Title-5-Mobile-fontSize),
-    0.3vw + 17px,
-    var(--typography-Title-5-Desktop-fontSize)
-  );
-  letter-spacing: var(--typography-Title-5-letterSpacing);
-  line-height: var(--typography-Title-5-lineHeight);
-  text-decoration: var(--typography-Title-5-textDecoration);
-  font-weight: var(--typography-Title-5-fontWeight);
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.regular {
-  text-transform: none;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.peach80 {
-  color: var(--Scandic-Peach-80);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.white {
-  color: var(--UI-Opacity-White-100);
-}
-
-.primaryLight {
-  color: var(--Primary-Light-On-Surface-Text);
-}
-
-.secondaryLight {
-  color: var(--Secondary-Light-On-Surface-Text);
-}
-
-.tertiaryLight {
-  color: var(--Tertiary-Light-On-Surface-Text);
-}
-
-.primaryDark {
-  color: var(--Primary-Dark-On-Surface-Text);
-}
-
-.primaryDim {
-  color: var(--Primary-Dim-On-Surface-Text);
-}
-
-.primaryStrong {
-  color: var(--Primary-Strong-On-Surface-Text);
-}
-
-.baseText {
-  color: var(--Base-Text-Inverted);
-}

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

@@ -1,47 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./title.module.css"
-
-const config = {
-  variants: {
-    color: {
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      peach80: styles.peach80,
-      red: styles.red,
-      white: styles.white,
-      primaryLight: styles.primaryLight,
-      secondaryLight: styles.secondaryLight,
-      tertiaryLight: styles.tertiaryLight,
-      primaryDark: styles.primaryDark,
-      primaryDim: styles.primaryDim,
-      primaryStrong: styles.primaryStrong,
-      baseText: styles.baseText,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-    },
-    textTransform: {
-      capitalize: styles.capitalize,
-      regular: styles.regular,
-      uppercase: styles.uppercase,
-    },
-    type: {
-      h1: styles.h1,
-      h2: styles.h2,
-      h3: styles.h3,
-      h4: styles.h4,
-      h5: styles.h4,
-    },
-  },
-  defaultVariants: {
-    color: "burgundy",
-    textAlign: "left",
-    textTransform: "uppercase",
-    type: "h1",
-  },
-} as const
-
-export const headingVariants = cva(styles.heading, config)

packages/design-system/package.json

@@ -180,7 +180,6 @@
     "./TextArea": "./lib/components/TextArea/index.tsx",
     "./TextLink": "./lib/components/TextLink/index.tsx",
     "./TextLinkButton": "./lib/components/TextLinkButton/index.tsx",
-    "./Title": "./lib/components/Title/index.tsx",
     "./Toast": "./lib/components/Toasts/index.tsx",
     "./ToastHandler": "./lib/components/Toasts/ToastHandler.tsx",
     "./Tooltip": "./lib/components/Tooltip/index.tsx",