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
2026-02-03 15:07:18 +00:00
parent dd65467573
commit b3c4761ae5
57 changed files with 261 additions and 634 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx
+++ b/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}>
-      <Footnote color="uiTextPlaceholder" textTransform="uppercase">
-        {children}
-      </Footnote>
-    </li>
+    <Typography variant="Title/Overline/sm">
+      <li className={styles.label}>{children}</li>
+    </Typography>
  )
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css
+++ b/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);
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
+++ b/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
-              className={styles.text}
-              color="uiTextPlaceholder"
-              textTransform="uppercase"
-            >
-              {intl.formatMessage({
-                id: "bookingWidget.searchList.latestSearches",
-                defaultMessage: "Latest searches",
-              })}
-            </Footnote>
+            <Typography variant="Title/Overline/sm">
+              <p className={styles.text}>
+                {intl.formatMessage({
+                  id: "bookingWidget.searchList.latestSearches",
+                  defaultMessage: "Latest searches",
+                })}
+              </p>
+            </Typography>
            <List
              getItemProps={getItemProps}
              highlightedIndex={highlightedIndex}
@@ -226,12 +223,14 @@ export default function SearchList({
  if (displaySearchHistory) {
    return (
      <Dialog getMenuProps={getMenuProps}>
-        <Footnote color="uiTextPlaceholder" textTransform="uppercase">
-          {intl.formatMessage({
-            id: "bookingWidget.searchList.latestSearches",
-            defaultMessage: "Latest searches",
-          })}
-        </Footnote>
+        <Typography variant="Title/Overline/sm">
+          <p className={styles.text}>
+            {intl.formatMessage({
+              id: "bookingWidget.searchList.latestSearches",
+              defaultMessage: "Latest searches",
+            })}
+          </p>
+        </Typography>
        <List
          getItemProps={getItemProps}
          highlightedIndex={highlightedIndex}
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
+++ b/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 {
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Desktop.tsx
+++ b/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}`,
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
+++ b/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 },
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css
+++ b/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-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,
@@ -92,14 +92,15 @@ 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 {
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
+++ b/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-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,
@@ -165,15 +165,15 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }

 .weekDay {
-  color: var(--Base-Text-Medium-contrast);
-  opacity: 1;
-  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) {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx
+++ b/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}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
@@ -93,19 +92,18 @@ export default function JoinScandicFriendsCard({
            },
            {
              termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
-                </Link>
+                </TextLink>
              ),
            }
          )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/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) {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/index.tsx
+++ b/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}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
@@ -107,19 +106,18 @@ export function PartnerSASJoinScandicFriendsCard({
            },
            {
              termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
-                </Link>
+                </TextLink>
              ),
            }
          )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
+++ b/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) {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
+++ b/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}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
@@ -111,19 +110,18 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
            },
            {
              termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
-                </Link>
+                </TextLink>
              ),
            }
          )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/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) {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx
+++ b/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}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
@@ -104,19 +103,18 @@ export function PartnerSASJoinScandicFriendsCard({
            },
            {
              termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
-                </Link>
+                </TextLink>
              ),
            }
          )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
+++ b/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) {
--- a/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx
+++ b/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
-            className={styles.title}
-            asChild
-            textTransform="uppercase"
-            type="label"
-            color="uiTextHighContrast"
-          >
-            <h2>
+          <Typography variant="Title/Overline/sm">
+            <h2 className={styles.title}>
              {intl.formatMessage({
                id: "common.room",
                defaultMessage: "Room",
              })}
            </h2>
-          </Footnote>
+          </Typography>
          <Typography
            variant="Title/Subtitle/md"
            className={styles.description}
--- a/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css
+++ b/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);
 }

--- a/packages/booking-flow/lib/components/SignupPromo/Desktop.tsx
+++ b/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">
-        <Message price={price} isEnterDetailsPage={isEnterDetailsPage} />
-      </Footnote>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          <Message price={price} isEnterDetailsPage={isEnterDetailsPage} />
+        </p>
+      </Typography>
    </div>
  ) : null
 }
--- a/packages/booking-flow/lib/components/SignupPromo/Mobile.tsx
+++ b/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">
-        <Message />
-      </Footnote>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          <Message />
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
+++ b/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 {