Merged in chore/BOOK-773-replace-old-typography-variables (pull request #3515)

Chore/BOOK-773 replace old typography variables

* chore(BOOK-773): Replaced body typography

* chore(BOOK-773): Replaced caption typography

* chore(BOOK-773): Replaced footnote typography

* chore(BOOK-773): Replaced subtitle typography


Approved-by: Bianca Widstam

apps/partner-sas/app/[lang]/middleware-error/[status]/page.module.css

@@ -1,3 +1,4 @@
 .layout {
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
 }

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -4,7 +4,8 @@
 
 .layout {
   display: grid;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
   grid-template-rows: auto 1fr;
   min-height: 100dvh;
   max-width: var(--max-width-page);

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css

@@ -1,6 +1,7 @@
 .layout {
   display: grid;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
   grid-template-rows: auto 1fr;
   position: relative;
 }

apps/scandic-web/app/[lang]/(live)/middleware-error/[status]/page.module.css

@@ -1,3 +1,4 @@
 .layout {
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
 }

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx

@@ -1,9 +1,8 @@
 import { redirect } from "next/navigation"
 import { z } from "zod"
 
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { env } from "@/env/server"
@@ -94,27 +93,24 @@ export default async function SASxScandicLoginPage(
           {intentDescriptions[parsedParams.intent]}
         </p>
       </Typography>
-      <Footnote textAlign="center">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        {intl.formatMessage(
+        <p style={{ textAlign: "center" }}>
-          {
+          {intl.formatMessage(
-            id: "linkEuroBonusAccount.manualRedirectLinkMessage",
+            {
-            defaultMessage:
+              id: "linkEuroBonusAccount.manualRedirectLinkMessage",
-              "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
+              defaultMessage:
-          },
+                "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
-          {
+            },
-            loginLink: (str) => (
+            {
-              <Link
+              loginLink: (str) => (
-                href={loginLink}
+                <TextLink typography="Link/sm" href={loginLink}>
-                color="red"
+                  {str}
-                size="tiny"
+                </TextLink>
-                textDecoration="underline"
+              ),
-              >
+            }
-                {str}
+          )}
-              </Link>
+        </p>
-            ),
+      </Typography>
-          }
-        )}
-      </Footnote>
     </SASModal>
   )
 }

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css

@@ -42,7 +42,8 @@
   width: 34px;
   height: 0px;
   padding: var(--Space-x3) 0;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
   border: 1px solid var(--Base-Border-Normal);
   border-radius: var(--Corner-Radius-md);
   text-align: center;

apps/scandic-web/app/[lang]/webview/layout.module.css

@@ -1,5 +1,6 @@
 .layout {
   background-color: var(--Background-Primary);
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
   min-height: 100dvh;
 }

apps/scandic-web/app/not-found.module.css

@@ -1,3 +1,4 @@
 .layout {
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
 }

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

@@ -16,18 +16,14 @@
 
 .iconTh {
   padding: var(--Space-x5) var(--Space-x2) var(--Space-x2);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
   vertical-align: bottom;
 }
 
 .summaryTh {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
   padding: 0 var(--Space-x2) var(--Space-x2);
   vertical-align: top;
 }
 
 .select {
-  font-weight: var(--typography-Caption-Regular-fontWeight);
   padding: 0 var(--Space-x2) var(--Space-x2);
 }

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

@@ -1,3 +1,5 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import MembershipLevelIcon from "@/components/Levels/Icon"
 
 import LevelSummary from "../../LevelSummary"
@@ -37,12 +39,14 @@ export default function DesktopHeader({
         <th />
         {levels.map((level, idx) => {
           return (
-            <th
+            <Typography
-              key={"summary" + level.level_id + idx}
+              variant="Body/Supporting text (caption)/smRegular"
-              className={styles.summaryTh}
+              key={"name" + level.level_id + idx}
             >
-              <LevelSummary level={level} />
+              <th className={styles.summaryTh}>
-            </th>
+                <LevelSummary level={level} />
+              </th>
+            </Typography>
           )
         })}
       </tr>

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

@@ -82,10 +82,12 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
           </span>
         </hgroup>
       </summary>
-      <p
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        className={styles.rewardDescription}
+        <p
-        dangerouslySetInnerHTML={{ __html: description }}
+          className={styles.rewardDescription}
-      />
+          dangerouslySetInnerHTML={{ __html: description }}
+        />
+      </Typography>
     </details>
   )
 }

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

@@ -15,14 +15,11 @@
 }
 
 .td {
-  font-size: var(--typography-Footnote-Regular-fontSize);
   text-align: center;
 }
 
 .rewardTh {
   padding: var(--Space-x3) var(--Space-x2);
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
 }
 
 .details[open] .chevron {

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

@@ -1,5 +1,7 @@
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import styles from "./levelSummary.module.css"
 
 import type { LevelSummaryProps } from "@/types/components/overviewTable"
@@ -32,7 +34,9 @@ export default function LevelSummary({
 
   return (
     <div className={styles.levelSummary}>
-      <span className={styles.levelRequirements}>{pointsMsg}</span>
+      <Typography variant="Label/xsRegular">
+        <span className={styles.levelRequirements}>{pointsMsg}</span>
+      </Typography>
       {showDescription && (
         <p className={styles.levelSummaryText}>{level.description}</p>
       )}

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css

@@ -8,16 +8,14 @@
 
 .levelRequirements {
   border-radius: var(--Corner-Radius-md);
-  background-color: var(--Scandic-Brand-Pale-Peach);
+  background-color: var(--Surface-Brand-Primary-1-Default);
-  color: var(--Scandic-Peach-80);
+  color: var(--Text-Interactive-Secondary);
   padding: var(--Space-x05) var(--Space-x1);
   text-align: center;
   width: 100%;
 }
 
 .levelSummaryText {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
   margin: 0;
 }
 
@@ -26,12 +24,3 @@
     padding: var(--Space-x05) var(--Space-x1);
   }
 }
-@media screen and (min-width: 1367px) {
-  .levelRequirements {
-    font-size: var(--typography-Footnote-Regular-fontSize);
-  }
-
-  .levelSummaryText {
-    font-size: var(--typography-Caption-Regular-fontSize);
-  }
-}

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

@@ -27,10 +27,12 @@ export default function RewardCard({
               </span>
             </hgroup>
           </summary>
-          <p
+          <Typography variant="Body/Supporting text (caption)/smRegular">
-            className={styles.rewardCardDescription}
+            <p
-            dangerouslySetInnerHTML={{ __html: description }}
+              className={styles.rewardCardDescription}
-          />
+              dangerouslySetInnerHTML={{ __html: description }}
+            />
+          </Typography>
         </details>
       </div>
       <div className={styles.rewardComparison}>

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

@@ -12,8 +12,6 @@
 }
 
 .rewardCardDescription {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  line-height: 150%;
   padding-right: var(--Space-x4);
 }
 

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

@@ -1,6 +1,7 @@
 import { Minus } from "react-feather"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./rewardValue.module.css"
 
@@ -21,8 +22,8 @@ export default function RewardValue({ reward }: RewardValueProps) {
     )
   }
   return (
-    <div className={styles.rewardValueContainer}>
+    <Typography variant="Body/Paragraph/mdBold">
-      <span className={styles.rewardValue}>{reward.value}</span>
+      <div className={styles.rewardValueContainer}>{reward.value}</div>
-    </div>
+    </Typography>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css

@@ -7,17 +7,6 @@
   text-wrap: balance;
 }
 
-.rewardValue {
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-}
-
-.rewardValueDetails {
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  text-align: center;
-  color: var(--UI-Grey-80);
-}
-
 .checkIcon {
   display: inline-flex;
 }

apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/CityClusterMarker.tsx

@@ -10,6 +10,7 @@ import { useMediaQuery } from "usehooks-ts"
 
 import { useMarkerHover } from "@scandic-hotels/common/hooks/map/useMarkerHover"
 import { InfoWindow } from "@scandic-hotels/design-system/Map/InfoWindow"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationPageCitiesMapStore } from "@/stores/destination-page-cities-map"
 
@@ -79,7 +80,10 @@ export default function CityClusterMarker({
       })}
       anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
     >
-      <span className={styles.count}>{sizeAsText}</span>
+      <Typography variant="Title/Subtitle/md">
+        <span>{sizeAsText}</span>
+      </Typography>
+
       {isDesktop && isHovered ? (
         <InfoWindow
           position={position}

apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/clusterMarker.module.css

@@ -20,9 +20,3 @@
     height: 46px !important;
   }
 }
-
-.count {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Subtitle-2-fontSize);
-  font-weight: var(--typography-Subtitle-2-fontWeight);
-}

apps/scandic-web/components/DatePicker/Single/desktop.module.css

@@ -19,12 +19,13 @@ div.months {
 td.day,
 td.rangeEnd,
 td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
+  font-family:
-  font-size: var(--typography-Body-Bold-fontSize);
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
-  font-weight: 500;
+  font-size: var(--Body-Paragraph-Size);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
-  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  line-height: 1.5;
+  text-decoration: none;
 }
 
 td.rangeEnd,
@@ -90,14 +91,16 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }
 
 .weekDay {
-  color: var(--UI-Text-Placeholder);
+  color: var(--Text-Tertiary);
-  font-family: var(--typography-Footnote-Labels-fontFamily);
+  font-family:
-  font-size: var(--typography-Footnote-Labels-fontSize);
+    var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
-  font-weight: var(--typography-Footnote-Labels-fontWeight);
+  font-size: var(--Title-Overline-sm-Size);
-  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
+  font-style: normal;
-  line-height: var(--typography-Footnote-Labels-lineHeight);
+  font-weight: var(--Title-Overline-sm-Font-weight);
-  text-decoration: var(--typography-Footnote-Labels-textDecoration);
+  line-height: 1.5;
-  text-transform: uppercase;
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
+  text-transform: var(--Title-Overline-sm-Text-Transform);
+  text-decoration: none;
 }
 
 .footer {

apps/scandic-web/components/DatePicker/Single/mobile.module.css

@@ -89,12 +89,13 @@ div.months {
 td.day,
 td.rangeEnd,
 td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
+  font-family:
-  font-size: var(--typography-Body-Bold-fontSize);
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
-  font-weight: 500;
+  font-size: var(--Body-Paragraph-Size);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
-  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  line-height: 1.5;
+  text-decoration: none;
 }
 
 td.rangeEnd,
@@ -156,14 +157,16 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }
 
 .weekDay {
-  color: var(--UI-Text-Placeholder);
+  color: var(--Text-Tertiary);
-  font-family: var(--typography-Caption-Labels-fontFamily);
+  font-family:
-  font-size: var(--typography-Caption-Labels-fontSize);
+    var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
-  font-weight: var(--typography-Caption-Labels-fontWeight);
+  font-size: var(--Title-Overline-sm-Size);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
+  font-style: normal;
-  line-height: var(--typography-Caption-Labels-lineHeight);
+  font-weight: var(--Title-Overline-sm-Font-weight);
-  text-decoration: var(--typography-Caption-Labels-textDecoration);
+  line-height: 1.5;
-  text-transform: uppercase;
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
+  text-transform: var(--Title-Overline-sm-Text-Transform);
+  text-decoration: none;
 }
 
 @media screen and (min-width: 1367px) {

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css

@@ -4,13 +4,6 @@
   padding: var(--Space-x3) var(--Space-x2);
 }
 
-.subtitle {
-  font-family: var(--typography-Subtitle-2-fontFamily);
-  font-size: var(--typography-Subtitle-2-Mobile-fontSize);
-  font-weight: var(--typography-Subtitle-2-fontWeight);
-  color: var(--Base-Text-High-contrast);
-}
-
 .list {
   list-style: none;
 }

apps/scandic-web/components/MyPages/Pagination/pagination.module.css

@@ -16,8 +16,8 @@
   cursor: pointer;
   height: 32px;
   width: 32px;
-  font-size: var(--typography-Body-Bold-fontSize);
+  font-size: var(--Body-Paragraph-Size);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
   padding: 0;
   display: flex;
   align-items: center;

apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x05);
+  align-items: flex-start;
 }
 
 .link {

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

@@ -1,15 +1,13 @@
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import {
   MaterialIcon,
   type MaterialIconSetIconProps,
 } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactConfig"
 
 import { serverClient } from "@/lib/trpc/server"
 
-// import { getValueFromContactConfig } from "@/utils/contactConfig"
 import styles from "./contactRow.module.css"
 
 import type { ContactRowProps } from "@/types/components/sidebar/joinLoyaltyContact"
@@ -46,22 +44,27 @@ export default async function ContactRow({ contact }: ContactRowProps) {
 
   return (
     <div className={styles.wrapper}>
-      <Typography
+      {contact.display_text ? (
-        variant="Body/Paragraph/mdBold"
+        <Typography
-        className={styles.displayText}
+          variant="Body/Paragraph/mdBold"
-      >
+          className={styles.displayText}
-        <p>{contact.display_text}</p>
+        >
-      </Typography>
+          <p>{contact.display_text}</p>
-      <Link
+        </Typography>
+      ) : null}
+      <TextLink
+        typography="Link/sm"
         className={styles.link}
         href={openableLink}
-        textDecoration="underline"
-        size="small"
       >
         {Icon ? <Icon size={20} color="Icon/Interactive/Default" /> : null}
         {val}
-      </Link>
+      </TextLink>
-      {footnote && <Footnote color="burgundy">{footnote}</Footnote>}
+      {footnote && (
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{footnote}</p>
+        </Typography>
+      )}
     </div>
   )
 }

apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css

@@ -13,18 +13,9 @@
   gap: var(--Space-x15);
 }
 
-.contact > div {
-  display: flex;
-  justify-content: center;
-}
-
 @media screen and (min-width: 1367px) {
   .contactContainer {
     align-items: start;
     padding-top: var(--Space-x2);
   }
-
-  .contact > div {
-    justify-content: start;
-  }
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx

@@ -1,13 +1,11 @@
-import Footnote from "@scandic-hotels/design-system/Footnote"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./list.module.css"
 
 export default function Label({ children }: React.PropsWithChildren) {
   return (
-    <li className={styles.label}>
+    <Typography variant="Title/Overline/sm">
-      <Footnote color="uiTextPlaceholder" textTransform="uppercase">
+      <li className={styles.label}>{children}</li>
-        {children}
+    </Typography>
-      </Footnote>
-    </li>
   )
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css

@@ -5,5 +5,6 @@
 }
 
 .label {
-  padding: 0 var(--Space-x1);
+  padding: 0 var(--Space-x1) var(--Space-x05);
+  color: var(--Text-Tertiary);
 }

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -192,16 +191,14 @@ export default function SearchList({
         {typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
           <>
             <Divider className={styles.noResultsDivider} />
-            <Footnote
+            <Typography variant="Title/Overline/sm">
-              className={styles.text}
+              <p className={styles.text}>
-              color="uiTextPlaceholder"
+                {intl.formatMessage({
-              textTransform="uppercase"
+                  id: "bookingWidget.searchList.latestSearches",
-            >
+                  defaultMessage: "Latest searches",
-              {intl.formatMessage({
+                })}
-                id: "bookingWidget.searchList.latestSearches",
+              </p>
-                defaultMessage: "Latest searches",
+            </Typography>
-              })}
-            </Footnote>
             <List
               getItemProps={getItemProps}
               highlightedIndex={highlightedIndex}
@@ -226,12 +223,14 @@ export default function SearchList({
   if (displaySearchHistory) {
     return (
       <Dialog getMenuProps={getMenuProps}>
-        <Footnote color="uiTextPlaceholder" textTransform="uppercase">
+        <Typography variant="Title/Overline/sm">
-          {intl.formatMessage({
+          <p className={styles.text}>
-            id: "bookingWidget.searchList.latestSearches",
+            {intl.formatMessage({
-            defaultMessage: "Latest searches",
+              id: "bookingWidget.searchList.latestSearches",
-          })}
+              defaultMessage: "Latest searches",
-        </Footnote>
+            })}
+          </p>
+        </Typography>
         <List
           getItemProps={getItemProps}
           highlightedIndex={highlightedIndex}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css

@@ -33,6 +33,7 @@
 
 .text {
   padding: 0 var(--Space-x1);
+  color: var(--Text-Tertiary);
   white-space: normal;
 }
 .textPlaceholderColor {

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Desktop.tsx

@@ -65,7 +65,7 @@ export default function DatePickerRangeDesktop({
         range_start: styles.rangeStart,
         root: `${classNames.root} ${styles.container}`,
         week: styles.week,
-        weekday: `${classNames.weekday} ${styles.weekDay}`,
+        weekday: styles.weekDay,
         nav: `${classNames.nav} ${styles.nav}`,
         button_next: `${classNames.button_next} ${styles.button_next}`,
         button_previous: `${classNames.button_previous} ${styles.button_previous}`,

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx

@@ -98,7 +98,7 @@ export default function DatePickerRangeMobile({
           range_start: styles.rangeStart,
           root: `${classNames.root} ${styles.root}`,
           week: styles.week,
-          weekday: `${classNames.weekday} ${styles.weekDay}`,
+          weekday: styles.weekDay,
         }}
         disabled={[
           { from: lastDayOfPreviousMonth, to: yesterday },

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css

@@ -20,12 +20,12 @@ div.months {
 td.day,
 td.rangeEnd,
 td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
+  font-family: var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
-  font-size: var(--typography-Body-Bold-fontSize);
+  font-size: var(--Body-Paragraph-Size);
-  font-weight: 500;
+  font-weight: var(--Body-Paragraph-Font-weight-2);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
+  line-height: 1.5;
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  text-decoration: none;
 }
 
 td.rangeEnd,
@@ -92,14 +92,15 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }
 
 .weekDay {
-  color: var(--UI-Text-Placeholder);
+  color: var(--Text-Tertiary);
-  font-family: var(--typography-Footnote-Labels-fontFamily);
+  font-family: var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
-  font-size: var(--typography-Footnote-Labels-fontSize);
+  font-size: var(--Title-Overline-sm-Size);
-  font-weight: var(--typography-Footnote-Labels-fontWeight);
+  font-style: normal;
-  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
+  font-weight: var(--Title-Overline-sm-Font-weight);
-  line-height: var(--typography-Footnote-Labels-lineHeight);
+  line-height: 1.5;
-  text-decoration: var(--typography-Footnote-Labels-textDecoration);
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
-  text-transform: uppercase;
+  text-transform: var(--Title-Overline-sm-Text-Transform);
+  text-decoration: none;
 }
 
 .footer {

packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css

@@ -97,12 +97,12 @@ div.months {
 td.day,
 td.rangeEnd,
 td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
+  font-family: var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
-  font-size: var(--typography-Body-Bold-fontSize);
+  font-size: var(--Body-Paragraph-Size);
-  font-weight: 500;
+  font-weight: var(--Body-Paragraph-Font-weight-2);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
+  line-height: 1.5;
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  text-decoration: none;
 }
 
 td.rangeEnd,
@@ -165,15 +165,15 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }
 
 .weekDay {
-  color: var(--Base-Text-Medium-contrast);
+  color: var(--Text-Tertiary);
-  opacity: 1;
+  font-family: var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
-  font-family: var(--typography-Caption-Labels-fontFamily);
+  font-size: var(--Title-Overline-sm-Size);
-  font-size: var(--typography-Caption-Labels-fontSize);
+  font-style: normal;
-  font-weight: var(--typography-Caption-Labels-fontWeight);
+  font-weight: var(--Title-Overline-sm-Font-weight);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
+  line-height: 1.5;
-  line-height: var(--typography-Caption-Labels-lineHeight);
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
-  text-decoration: var(--typography-Caption-Labels-textDecoration);
+  text-transform: var(--Title-Overline-sm-Text-Transform);
-  text-transform: uppercase;
+  text-decoration: none;
 }
 
 @media screen and (min-width: 1367px) {

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

@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -83,8 +82,8 @@ export default function JoinScandicFriendsCard({
         </Typography>
       </Checkbox>
 
-      <div className={styles.terms}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <Footnote color="uiTextPlaceholder">
+        <p className={styles.terms}>
           {intl.formatMessage(
             {
               id: "enterDetails.joinScandicFriendsCard.terms",
@@ -93,19 +92,18 @@ export default function JoinScandicFriendsCard({
             },
             {
               termsAndConditionsLink: (str) => (
-                <Link
+                <TextLink
-                  textDecoration="underline"
+                  typography="Link/sm"
-                  size="tiny"
                   target="_blank"
                   href={routes.membershipTermsAndConditions[lang]}
                 >
                   {str}
-                </Link>
+                </TextLink>
               ),
             }
           )}
-        </Footnote>
+        </p>
-      </div>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -28,6 +28,7 @@
 
 .terms {
   grid-area: terms;
+  color: var(--Text-Secondary);
 }
 
 @media screen and (min-width: 768px) {

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

@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -97,8 +96,8 @@ export function PartnerSASJoinScandicFriendsCard({
         />
       </div>
 
-      <div className={styles.terms}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <Footnote color="uiTextPlaceholder">
+        <p className={styles.terms}>
           {intl.formatMessage(
             {
               id: "enterDetails.joinScandicFriendsCard.terms",
@@ -107,19 +106,18 @@ export function PartnerSASJoinScandicFriendsCard({
             },
             {
               termsAndConditionsLink: (str) => (
-                <Link
+                <TextLink
-                  textDecoration="underline"
+                  typography="Link/sm"
-                  size="tiny"
                   target="_blank"
                   href={routes.membershipTermsAndConditions[lang]}
                 >
                   {str}
-                </Link>
+                </TextLink>
               ),
             }
           )}
-        </Footnote>
+        </p>
-      </div>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css

@@ -31,6 +31,7 @@
 
 .terms {
   grid-area: terms;
+  color: var(--Text-Secondary);
 }
 
 @media screen and (min-width: 768px) {

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

@@ -4,10 +4,9 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trackEvent } from "@scandic-hotels/tracking/base"
 import { trackLoginClick } from "@scandic-hotels/tracking/navigation"
@@ -101,8 +100,8 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
         })}
       </LoginButton>
 
-      <div className={styles.terms}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <Footnote color="uiTextPlaceholder">
+        <p className={styles.terms}>
           {intl.formatMessage(
             {
               id: "enterDetails.joinScandicFriendsCard.terms",
@@ -111,19 +110,18 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
             },
             {
               termsAndConditionsLink: (str) => (
-                <Link
+                <TextLink
-                  textDecoration="underline"
+                  typography="Link/sm"
-                  size="tiny"
                   target="_blank"
                   href={routes.membershipTermsAndConditions[lang]}
                 >
                   {str}
-                </Link>
+                </TextLink>
               ),
             }
           )}
-        </Footnote>
+        </p>
-      </div>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -34,6 +34,7 @@
 
 .terms {
   grid-area: terms;
+  color: var(--Text-Secondary);
 }
 
 @media screen and (min-width: 768px) {

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

@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -94,8 +93,8 @@ export function PartnerSASJoinScandicFriendsCard({
         />
       </div>
 
-      <div className={styles.terms}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <Footnote color="uiTextPlaceholder">
+        <p className={styles.terms}>
           {intl.formatMessage(
             {
               id: "enterDetails.joinScandicFriendsCard.terms",
@@ -104,19 +103,18 @@ export function PartnerSASJoinScandicFriendsCard({
             },
             {
               termsAndConditionsLink: (str) => (
-                <Link
+                <TextLink
-                  textDecoration="underline"
+                  typography="Link/sm"
-                  size="tiny"
                   target="_blank"
                   href={routes.membershipTermsAndConditions[lang]}
                 >
                   {str}
-                </Link>
+                </TextLink>
               ),
             }
           )}
-        </Footnote>
+        </p>
-      </div>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css

@@ -31,6 +31,7 @@
 
 .terms {
   grid-area: terms;
+  color: var(--Text-Secondary);
 }
 
 @media screen and (min-width: 768px) {

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

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
@@ -47,20 +46,14 @@ export default function SelectedRoom() {
     <div className={styles.wrapper} data-available={room.isAvailable}>
       <div className={styles.main}>
         <div className={styles.headerContainer}>
-          <Footnote
+          <Typography variant="Title/Overline/sm">
-            className={styles.title}
+            <h2 className={styles.title}>
-            asChild
-            textTransform="uppercase"
-            type="label"
-            color="uiTextHighContrast"
-          >
-            <h2>
               {intl.formatMessage({
                 id: "common.room",
                 defaultMessage: "Room",
               })}
             </h2>
-          </Footnote>
+          </Typography>
           <Typography
             variant="Title/Subtitle/md"
             className={styles.description}

packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css

@@ -9,7 +9,7 @@
 }
 
 .facilities {
-  font-family: var(--typography-Body-Bold-fontFamily);
+  font-family: var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
   padding-bottom: var(--Space-x3);
 }
 

packages/booking-flow/lib/components/SignupPromo/Desktop.tsx

@@ -3,7 +3,6 @@
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
@@ -37,9 +36,11 @@ export default function SignupPromoDesktop({
       data-testid="signup-promo-desktop"
     >
       {badgeContent && <span className={styles.badge}>{badgeContent}</span>}
-      <Footnote color="burgundy">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <Message price={price} isEnterDetailsPage={isEnterDetailsPage} />
+        <p>
-      </Footnote>
+          <Message price={price} isEnterDetailsPage={isEnterDetailsPage} />
+        </p>
+      </Typography>
     </div>
   ) : null
 }

packages/booking-flow/lib/components/SignupPromo/Mobile.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Footnote from "@scandic-hotels/design-system/Footnote"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
 
@@ -14,9 +14,11 @@ export default function SignupPromoMobile() {
       data-footer-spacing-signup
       className={styles.memberDiscountBannerMobile}
     >
-      <Footnote color="burgundy">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <Message />
+        <p>
-      </Footnote>
+          <Message />
+        </p>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--Text-Default);
 }
 
 .memberDiscountBannerDesktop {
@@ -16,10 +17,11 @@
   padding: var(--Space-x15) var(--Space-x2);
   gap: var(--Space-x2);
   position: relative;
+  color: var(--Text-Default);
 }
 
 .red {
-  color: var(--Text-Accent-Primary);
+  color: var(--Scandic-Brand-Scandic-Red);
 }
 
 .badge {

packages/design-system/lib/components/Footnote/footnote.module.css

@@ -1,82 +0,0 @@
-.footnote {
-  margin: 0;
-  padding: 0;
-}
-
-.footnoteFontOnly {
-  font-style: normal;
-}
-
-.bold {
-  font-family: var(--typography-Footnote-Bold-fontFamily);
-  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
-  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
-  line-height: var(--typography-Footnote-Bold-lineHeight);
-  text-decoration: var(--typography-Footnote-Bold-textDecoration);
-}
-
-.regular {
-  font-family: var(--typography-Footnote-Regular-fontFamily);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: var(--typography-Footnote-Regular-fontWeight);
-  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
-  line-height: var(--typography-Footnote-Regular-lineHeight);
-  text-decoration: var(--typography-Footnote-Regular-textDecoration);
-}
-
-.labels {
-  font-family: var(--typography-Footnote-Labels-fontFamily);
-  font-size: var(--typography-Footnote-Labels-fontSize);
-  font-weight: var(--typography-Footnote-Labels-fontWeight);
-  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
-  line-height: var(--typography-Footnote-Labels-lineHeight);
-  text-decoration: var(--typography-Footnote-Labels-textDecoration);
-}
-
-.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);
-}
-
-.peach50 {
-  color: var(--Scandic-Peach-50);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.white {
-  color: var(--Main-Grey-White);
-}
-
-.baseTextDisabled {
-  color: var(--Base-Text-Disabled);
-}

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

@@ -1,44 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { footnoteFontOnlyVariants, footnoteVariants } from "./variants"
-
-import type { VariantProps } from "class-variance-authority"
-
-interface FootnoteProps
-  extends
-    Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
-    VariantProps<typeof footnoteVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
-
-/**
- * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
- */
-export default function Footnote({
-  asChild = false,
-  className = "",
-  color,
-  fontOnly = false,
-  textAlign,
-  textTransform,
-  type,
-  ...props
-}: FootnoteProps) {
-  const Comp = asChild ? Slot : "p"
-  const classNames = fontOnly
-    ? footnoteFontOnlyVariants({
-        className,
-        textAlign,
-        textTransform,
-        type,
-      })
-    : footnoteVariants({
-        className,
-        color,
-        textAlign,
-        textTransform,
-        type,
-      })
-  return <Comp className={classNames} {...props} />
-}

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

@@ -1,61 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./footnote.module.css"
-
-const config = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-    },
-    color: {
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      peach50: styles.peach50,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      white: styles.white,
-      baseTextDisabled: styles.baseTextDisabled,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-  },
-  defaultVariants: {
-    type: "regular",
-  },
-} as const
-
-export const footnoteVariants = cva(styles.footnote, config)
-
-const fontOnlyConfig = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-  },
-  defaultVariants: {
-    type: "regular",
-  },
-} as const
-
-export const footnoteFontOnlyVariants = cva(
-  styles.footnoteFontOnly,
-  fontOnlyConfig
-)

packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css

@@ -35,8 +35,3 @@
   justify-content: start;
   align-items: baseline;
 }
-
-.perNight {
-  font-weight: 400;
-  font-size: var(--typography-Caption-Regular-fontSize);
-}

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

@@ -1,8 +1,8 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import { Divider } from "../../Divider"
 import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
+import { Divider } from "../../Divider"
 import { Typography } from "../../Typography"
 import styles from "./hotelPriceCard.module.css"
 
@@ -117,14 +117,16 @@ export function HotelPriceCard({
             >
               <p>
                 {productTypePrices.localPrice.currency}
-                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                <Typography variant="Body/Supporting text (caption)/smRegular">
-                <span className={styles.perNight}>
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  /
+                  <span>
-                  {intl.formatMessage({
+                    /
-                    id: "common.night",
+                    {intl.formatMessage({
-                    defaultMessage: "night",
+                      id: "common.night",
-                  })}
+                      defaultMessage: "night",
-                </span>
+                    })}
+                  </span>
+                </Typography>
               </p>
             </Typography>
           </div>

packages/design-system/lib/components/OldDSLink/link.module.css

@@ -50,30 +50,15 @@
   gap: var(--Space-x05);
 }
 
-.breadcrumb {
-  font-family: var(--typography-Footnote-Bold-fontFamily);
-  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
-  line-height: var(--typography-Footnote-Bold-lineHeight);
-}
-
-.link.breadcrumb {
-  font-family: var(--typography-Footnote-Bold-fontFamily);
-  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
-  line-height: var(--typography-Footnote-Bold-lineHeight);
-}
-
 .myPageMobileDropdown {
   display: flex;
   align-items: center;
   color: var(--Scandic-Brand-Burgundy);
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
-  font-size: var(--typography-Body-Regular-fontSize);
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
-  line-height: var(--typography-Body-Regular-lineHeight);
+  font-size: var(--Body-Paragraph-Size);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: 1.5;
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
   padding: var(--Space-x1);
   border-radius: var(--Corner-Radius-md);
   gap: var(--Space-x1);
@@ -97,11 +82,12 @@
 .shortcut {
   display: grid;
   align-items: center;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
-  font-size: var(--typography-Body-Regular-fontSize);
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
-  font-weight: var(--typography-Body-Regular-fontWeight);
+  font-size: var(--Body-Paragraph-Size);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  font-weight: var(--Body-Paragraph-Font-weight);
-  line-height: var(--typography-Body-Regular-lineHeight);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  line-height: 1.5;
   gap: var(--Space-x2);
   grid-template-columns: 1fr auto;
   padding: var(--Space-x2) var(--Space-x3);
@@ -133,22 +119,13 @@
   line-height: 140%;
 }
 
-/* Tiny should be removed, it's not a variant of the Link*/
-.tiny {
-  font-family: var(--typography-Footnote-Regular-fontFamily);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: var(--typography-Footnote-Regular-fontWeight);
-  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
-  line-height: var(--typography-Footnote-Regular-lineHeight);
-}
-
 .bold {
-  font-family: var(--typography-Body-Bold-fontFamily);
+  font-family:
-  font-size: var(--typography-Body-Bold-fontSize);
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
-  font-weight: 500
+  font-size: var(--Body-Paragraph-Size);
-    /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */;
+  font-weight: var(--Body-Paragraph-Font-weight-2);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
+  line-height: 1.5;
 }
 
 .menu {

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

@@ -18,7 +18,6 @@ export const linkVariants = cva(styles.link, {
     size: {
       small: styles.small,
       large: styles.large,
-      tiny: styles.tiny,
       none: "",
     },
     textDecoration: {
@@ -29,7 +28,6 @@ export const linkVariants = cva(styles.link, {
     },
     variant: {
       icon: styles.icon,
-      breadcrumb: styles.breadcrumb,
       myPageMobileDropdown: styles.myPageMobileDropdown,
       navigation: styles.navigation,
       menu: styles.menu,

packages/design-system/lib/design-system-new-deprecated.css

@@ -1,131 +1,3 @@
-:root {
-  --typography-Body-Bold-fontFamily: "fira sans";
-  --typography-Body-Bold-fontSize: 16px;
-  --typography-Body-Bold-fontWeight: "medium";
-  --typography-Body-Bold-letterSpacing: 1.2000000476837158%;
-  --typography-Body-Bold-lineHeight: 150%;
-  --typography-Body-Bold-textDecoration: "none";
-  --typography-Body-Regular-fontFamily: "fira sans";
-  --typography-Body-Regular-fontSize: 16px;
-  --typography-Body-Regular-fontWeight: "regular";
-  --typography-Body-Regular-letterSpacing: 1.2000000476837158%;
-  --typography-Body-Regular-lineHeight: 150%;
-  --typography-Body-Regular-textDecoration: "none";
-  --typography-Body-Underline-fontFamily: "fira sans";
-  --typography-Body-Underline-fontSize: 16px;
-  --typography-Body-Underline-letterSpacing: 1.2000000476837158%;
-  --typography-Body-Underline-lineHeight: 150%;
-  --typography-Body-Underline-textDecoration: "underline";
-  --typography-Caption-Bold-fontFamily: "fira sans";
-  --typography-Caption-Bold-fontSize: 14px;
-  --typography-Caption-Bold-fontWeight: "medium";
-  --typography-Caption-Bold-letterSpacing: 1.399999976158142%;
-  --typography-Caption-Bold-lineHeight: 139.9999976158142%;
-  --typography-Caption-Bold-textDecoration: "none";
-  --typography-Caption-Labels-fontFamily: "brandon text";
-  --typography-Caption-Labels-fontSize: 14px;
-  --typography-Caption-Labels-fontWeight: "bold";
-  --typography-Caption-Labels-letterSpacing: 1.399999976158142%;
-  --typography-Caption-Labels-lineHeight: 150%;
-  --typography-Caption-Labels-textDecoration: "none";
-  --typography-Caption-Regular-fontFamily: "fira sans";
-  --typography-Caption-Regular-fontSize: 14px;
-  --typography-Caption-Regular-fontWeight: "regular";
-  --typography-Caption-Regular-letterSpacing: 1.399999976158142%;
-  --typography-Caption-Regular-lineHeight: 139.9999976158142%;
-  --typography-Caption-Regular-textDecoration: "none";
-  --typography-Caption-Underline-fontFamily: "fira sans";
-  --typography-Caption-Underline-fontSize: 14px;
-  --typography-Caption-Underline-fontWeight: "medium";
-  --typography-Caption-Underline-letterSpacing: 1.399999976158142%;
-  --typography-Caption-Underline-lineHeight: 139.9999976158142%;
-  --typography-Caption-Underline-textDecoration: "underline";
-  --typography-Footnote-Bold-fontFamily: "fira sans";
-  --typography-Footnote-Bold-fontSize: 12px;
-  --typography-Footnote-Bold-fontWeight: "medium";
-  --typography-Footnote-Bold-letterSpacing: 1.399999976158142%;
-  --typography-Footnote-Bold-lineHeight: 150%;
-  --typography-Footnote-Bold-textDecoration: "none";
-  --typography-Footnote-Labels-fontFamily: "brandon text";
-  --typography-Footnote-Labels-fontSize: 12px;
-  --typography-Footnote-Labels-fontWeight: "bold";
-  --typography-Footnote-Labels-letterSpacing: 1.399999976158142%;
-  --typography-Footnote-Labels-lineHeight: 150%;
-  --typography-Footnote-Labels-textDecoration: "none";
-  --typography-Footnote-Regular-fontFamily: "fira sans";
-  --typography-Footnote-Regular-fontSize: 12px;
-  --typography-Footnote-Regular-fontWeight: "regular";
-  --typography-Footnote-Regular-letterSpacing: 1.399999976158142%;
-  --typography-Footnote-Regular-lineHeight: 150%;
-  --typography-Footnote-Regular-textDecoration: "none";
-  --typography-Preamble-Desktop-fontSize: 20px;
-  --typography-Preamble-fontFamily: "fira sans";
-  --typography-Preamble-fontWeight: "regular";
-  --typography-Preamble-letterSpacing: 1%;
-  --typography-Preamble-lineHeight: 139.9999976158142%;
-  --typography-Preamble-Mobile-fontSize: 18px;
-  --typography-Preamble-textDecoration: "none";
-  --typography-Script-1-Desktop-fontSize: 32px;
-  --typography-Script-1-fontFamily: "biro script plus";
-  --typography-Script-1-fontWeight: "regular";
-  --typography-Script-1-letterSpacing: 2%;
-  --typography-Script-1-lineHeight: 110.00000238418579%;
-  --typography-Script-1-Mobile-fontSize: 24px;
-  --typography-Script-2-Desktop-fontSize: 24px;
-  --typography-Script-2-fontWeight: "regular";
-  --typography-Script-2-letterSpacing: 2%;
-  --typography-Script-2-lineHeight: 110.00000238418579%;
-  --typography-Script-2-Mobile-fontSize: 20px;
-  --typography-Subtitle-1-Desktop-fontSize: 24px;
-  --typography-Subtitle-1-fontFamily: "fira sans";
-  --typography-Subtitle-1-letterSpacing: 1%;
-  --typography-Subtitle-1-lineHeight: 120.00000476837158%;
-  --typography-Subtitle-1-Mobile-fontSize: 20px;
-  --typography-Subtitle-2-Desktop-fontSize: 20px;
-  --typography-Subtitle-2-fontFamily: "fira sans";
-  --typography-Subtitle-2-fontSize: 20px;
-  --typography-Subtitle-2-fontWeight: "medium";
-  --typography-Subtitle-2-letterSpacing: 1%;
-  --typography-Subtitle-2-lineHeight: 120.00000476837158%;
-  --typography-Subtitle-2-Mobile-fontSize: 18px;
-  --typography-Title-1-Desktop-fontSize: 64px;
-  --typography-Title-1-fontFamily: "brandon text";
-  --typography-Title-1-fontSize: 64px;
-  --typography-Title-1-fontWeight: "black";
-  --typography-Title-1-letterSpacing: 0.25%;
-  --typography-Title-1-lineHeight: 110.00000238418579%;
-  --typography-Title-1-Mobile-fontSize: 48px;
-  --typography-Title-1-textDecoration: "none";
-  --typography-Title-2-Desktop-fontSize: 48px;
-  --typography-Title-2-fontFamily: "brandon text";
-  --typography-Title-2-fontWeight: "black";
-  --typography-Title-2-letterSpacing: 0.25%;
-  --typography-Title-2-lineHeight: 110.00000238418579%;
-  --typography-Title-2-Mobile-fontSize: 36px;
-  --typography-Title-2-textDecoration: "none";
-  --typography-Title-3-Desktop-fontSize: 36px;
-  --typography-Title-3-fontFamily: "brandon text";
-  --typography-Title-3-fontSize: 36px;
-  --typography-Title-3-fontWeight: "black";
-  --typography-Title-3-letterSpacing: 0.25%;
-  --typography-Title-3-lineHeight: 110.00000238418579%;
-  --typography-Title-3-Mobile-fontSize: 30px;
-  --typography-Title-3-textDecoration: "none";
-  --typography-Title-4-Desktop-fontSize: 28px;
-  --typography-Title-4-fontFamily: "brandon text";
-  --typography-Title-4-fontWeight: "bold";
-  --typography-Title-4-letterSpacing: 0.25%;
-  --typography-Title-4-lineHeight: 110.00000238418579%;
-  --typography-Title-4-Mobile-fontSize: 24px;
-  --typography-Title-4-textDecoration: "none";
-  --typography-Title-5-Desktop-fontSize: 24px;
-  --typography-Title-5-fontFamily: "brandon text";
-  --typography-Title-5-fontWeight: "black";
-  --typography-Title-5-letterSpacing: 0.25%;
-  --typography-Title-5-lineHeight: 110.00000238418579%;
-  --typography-Title-5-Mobile-fontSize: 20px;
-  --typography-Title-5-textDecoration: "none";
-}
 :root {
   --Base-Border-Hover: var(--Scandic-Peach-80);
   --Base-Border-Inverted: var(--UI-Opacity-White-100);

packages/design-system/package.json

@@ -26,7 +26,6 @@
     "./Divider": "./lib/components/Divider/index.tsx",
     "./FacilityToIcon": "./lib/components/FacilityToIcon/index.tsx",
     "./FakeButton": "./lib/components/FakeButton/index.tsx",
-    "./Footnote": "./lib/components/Footnote/index.tsx",
     "./Form/Checkbox": "./lib/components/Form/Checkbox/index.tsx",
     "./Form/Country": "./lib/components/Form/Country/index.tsx",
     "./Form/Date": "./lib/components/Form/Date/index.tsx",