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">
-        {intl.formatMessage(
-          {
-            id: "linkEuroBonusAccount.manualRedirectLinkMessage",
-            defaultMessage:
-              "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
-          },
-          {
-            loginLink: (str) => (
-              <Link
-                href={loginLink}
-                color="red"
-                size="tiny"
-                textDecoration="underline"
-              >
-                {str}
-              </Link>
-            ),
-          }
-        )}
-      </Footnote>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p style={{ textAlign: "center" }}>
+          {intl.formatMessage(
+            {
+              id: "linkEuroBonusAccount.manualRedirectLinkMessage",
+              defaultMessage:
+                "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
+            },
+            {
+              loginLink: (str) => (
+                <TextLink typography="Link/sm" href={loginLink}>
+                  {str}
+                </TextLink>
+              ),
+            }
+          )}
+        </p>
+      </Typography>
     </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
-              key={"summary" + level.level_id + idx}
-              className={styles.summaryTh}
+            <Typography
+              variant="Body/Supporting text (caption)/smRegular"
+              key={"name" + level.level_id + idx}
             >
-              <LevelSummary level={level} />
-            </th>
+              <th className={styles.summaryTh}>
+                <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
-        className={styles.rewardDescription}
-        dangerouslySetInnerHTML={{ __html: description }}
-      />
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p
+          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);
-  color: var(--Scandic-Peach-80);
+  background-color: var(--Surface-Brand-Primary-1-Default);
+  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
-            className={styles.rewardCardDescription}
-            dangerouslySetInnerHTML={{ __html: description }}
-          />
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p
+              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}>
-      <span className={styles.rewardValue}>{reward.value}</span>
-    </div>
+    <Typography variant="Body/Paragraph/mdBold">
+      <div className={styles.rewardValueContainer}>{reward.value}</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-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  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);
-  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);
-  text-transform: uppercase;
+  color: var(--Text-Tertiary);
+  font-family:
+    var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
+  font-size: var(--Title-Overline-sm-Size);
+  font-style: normal;
+  font-weight: var(--Title-Overline-sm-Font-weight);
+  line-height: 1.5;
+  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-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  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);
-  font-family: var(--typography-Caption-Labels-fontFamily);
-  font-size: var(--typography-Caption-Labels-fontSize);
-  font-weight: var(--typography-Caption-Labels-fontWeight);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
-  line-height: var(--typography-Caption-Labels-lineHeight);
-  text-decoration: var(--typography-Caption-Labels-textDecoration);
-  text-transform: uppercase;
+  color: var(--Text-Tertiary);
+  font-family:
+    var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
+  font-size: var(--Title-Overline-sm-Size);
+  font-style: normal;
+  font-weight: var(--Title-Overline-sm-Font-weight);
+  line-height: 1.5;
+  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-weight: var(--typography-Body-Bold-fontWeight);
+  font-size: var(--Body-Paragraph-Size);
+  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
-        variant="Body/Paragraph/mdBold"
-        className={styles.displayText}
-      >
-        <p>{contact.display_text}</p>
-      </Typography>
-      <Link
+      {contact.display_text ? (
+        <Typography
+          variant="Body/Paragraph/mdBold"
+          className={styles.displayText}
+        >
+          <p>{contact.display_text}</p>
+        </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>
-      {footnote && <Footnote color="burgundy">{footnote}</Footnote>}
+      </TextLink>
+      {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;
-  }
 }