Merged in feat/BOOK-61-refactor-hotel-page-css-variables (pull request #3014)

Feat/BOOK-61 refactor hotel page css variables

* feat(BOOK-61): Breadcrumbs

* feat(BOOK-61): intro section

* feat(BOOK-61): show more button

* feat(BOOK-61): rooms section

* feat(BOOK-61): sidepeeks

* feat(BOOK-61): deprecated old Link component

* feat(BOOK-61): added new TextLink component to the design-system

* feat(BOOK-61): replaced deprecated links with new TextLink component

* feat(BOOK-61): miscellaneous changes


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

apps/partner-sas/components/LanguageSwitcher/index.tsx

@@ -17,7 +17,7 @@ import {
 } from "@scandic-hotels/common/constants/language"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { languageSwitcherVariants } from "./variants"

apps/partner-sas/components/Menu/FooterMenu/index.tsx

@@ -11,7 +11,7 @@ import {
   rates,
 } from "@scandic-hotels/common/constants/routes/customerService"
 import { sasEuroBonus } from "@scandic-hotels/common/constants/routes/sasEuroBonus"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { LanguageSwitcher } from "@/components/LanguageSwitcher"

apps/partner-sas/components/Menu/NavigationMenu/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { customerService } from "@scandic-hotels/common/constants/routes/customerService"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { LanguageSwitcher } from "@/components/LanguageSwitcher"

apps/partner-sas/components/Menu/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react"
 import { useMediaQuery } from "usehooks-ts"
 
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx

@@ -55,7 +55,11 @@ export default async function HotelPagePage(
   } else {
     return (
       <div className={cx(styles.hotelPage, hotelTheme)}>
-        <HotelPage hotelData={hotelData} hotelPageData={hotelPageData} />
+        <HotelPage
+          theme={hotelTheme}
+          hotelData={hotelData}
+          hotelPageData={hotelPageData}
+        />
       </div>
     )
   }

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx

@@ -7,7 +7,7 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { supportEmail, supportPhone } from "@/constants/contactSupport"

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

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./SASModal.module.css"

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

@@ -2,7 +2,7 @@ import { ArrowLeft } from "react-feather"
 
 import { overview as profileOverview } from "@scandic-hotels/common/constants/routes/myPages"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import { getIntl } from "@/i18n"
 import background from "@/public/_static/img/partner/sas/sas_x_scandic_airplane_window_background.jpg"

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

@@ -9,8 +9,8 @@ import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { sasPartnershipTermsAndConditions } from "@/constants/webHrefs"

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

@@ -1,10 +1,9 @@
 import { redirect } from "next/navigation"
-import React from "react"
 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/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { env } from "@/env/server"

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

@@ -7,7 +7,7 @@ import { type ReactNode, useState, useTransition } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import { useState } from "react"
 
 import Accordion from "@scandic-hotels/design-system/Accordion"
@@ -7,7 +8,7 @@ import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import styles from "./accordion.module.css"
@@ -26,9 +27,11 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
 
   return (
     <Section className={styles.accordionSection} id={HotelHashValues.faq}>
-      <SectionHeader textTransform="uppercase" title={title} />
+      <SectionHeader heading={title} typography="Title/md" />
       <Accordion
-        className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
+        className={cx(styles.accordion, {
+          [styles.allVisible]: allAccordionsVisible,
+        })}
       >
         {accordion.map((acc) =>
           acc ? (

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

@@ -4,7 +4,7 @@ import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Table from "@scandic-hotels/design-system/Table"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { Transactions } from "@scandic-hotels/trpc/enums/transactions"

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

@@ -1,5 +1,5 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Title from "@scandic-hotels/design-system/Title"
 
 import { getIntl } from "@/i18n"

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

@@ -4,7 +4,7 @@ import { dt } from "@scandic-hotels/common/dt"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Title from "@scandic-hotels/design-system/Title"
 
 import useLang from "@/hooks/useLang"

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

@@ -1,6 +1,6 @@
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Preamble from "@scandic-hotels/design-system/Preamble"
 import Title from "@scandic-hotels/design-system/Title"
 

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

@@ -1,5 +1,5 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./shortcutsListItems.module.css"

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

@@ -97,9 +97,9 @@ export default function TableBlock({ data }: TableBlockProps) {
         </Table>
         {showMoreVisible ? (
           <ShowMoreButton
+            className={styles.showMoreButton}
             loadMoreData={handleShowMore}
             showLess={showLessVisible}
-            buttonIntent="table"
           />
         ) : null}
       </div>

apps/scandic-web/components/Blocks/Table/table.module.css

@@ -1,6 +1,12 @@
 .tableWrapper {
   display: grid;
-  border: 1px solid var(--Base-Border-Subtle);
+  border: 1px solid var(--Border-Default);
   border-radius: var(--Corner-radius-sm);
   overflow: hidden;
 }
+
+.showMoreButton {
+  border-top: 1px solid var(--Border-Default);
+  background-color: var(--Surface-Primary-Default);
+  border-radius: 0;
+}

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

@@ -5,15 +5,11 @@ import { generateBreadcrumbsSchema } from "@/utils/jsonSchemas"
 
 import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
 
-interface Props extends Pick<BreadcrumbsProps, "color" | "size"> {
+interface Props extends Omit<BreadcrumbsProps, "breadcrumbs"> {
   subpageTitle?: string
 }
 
-export default async function Breadcrumbs({
+export default async function Breadcrumbs({ subpageTitle, ...props }: Props) {
-  color,
-  size,
-  subpageTitle,
-}: Props) {
   const caller = await serverClient()
   const breadcrumbs = await caller.contentstack.breadcrumbs.get()
   if (!breadcrumbs?.length) {
@@ -34,7 +30,7 @@ export default async function Breadcrumbs({
           __html: JSON.stringify(jsonSchema.jsonLd),
         }}
       />
-      <BreadcrumbsComp breadcrumbs={breadcrumbs} color={color} size={size} />
+      <BreadcrumbsComp breadcrumbs={breadcrumbs} {...props} />
     </>
   )
 }

apps/scandic-web/components/ContentCard/contentCard.module.css

@@ -1,5 +1,15 @@
 .card {
   display: grid;
+
+  &:hover {
+    .imageContainer,
+    .image {
+      border-radius: var(--Corner-radius-lg);
+    }
+    .image {
+      transform: scale(1.05);
+    }
+  }
 }
 
 .imageContainer {
@@ -21,34 +31,28 @@
     border-radius 0.3s ease-in-out;
 }
 
-.card:hover,
-.card:hover .imageContainer,
-.card:hover .image {
-  border-radius: var(--Corner-radius-lg);
-}
-
-.card:hover .image {
-  transform: scale(1.05);
-}
-
 .promoTag {
   position: absolute;
   top: 14px;
   left: 14px;
-  text-transform: uppercase;
 }
 
 .content {
   display: flex;
-  padding: var(--Spacing-x-one-and-half);
+  padding: var(--Space-x15);
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
   align-self: stretch;
 }
 
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+
 @media (min-width: 768px) {
   .content {
-    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2) 0;
+    padding: var(--Space-x2) var(--Space-x2) var(--Space-x2) 0;
   }
 }

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

@@ -1,8 +1,8 @@
-import Body from "@scandic-hotels/design-system/Body"
+import NextLink from "next/link"
+
 import Chip from "@scandic-hotels/design-system/Chip"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import { Typography } from "@scandic-hotels/design-system/Typography"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import styles from "./contentCard.module.css"
 
@@ -46,8 +46,12 @@ export default function ContentCard({
         ) : null}
       </div>
       <div className={styles.content}>
-        <Subtitle type="two">{heading}</Subtitle>
+        <Typography variant="Title/Subtitle/md">
-        <Body>{bodyText}</Body>
+          <h4>{heading}</h4>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{bodyText}</p>
+        </Typography>
       </div>
     </article>
   )
@@ -55,6 +59,7 @@ export default function ContentCard({
   if (!link) return card
 
   const linkProps = {
+    className: styles.link,
     ...(link.openInNewTab && {
       target: "_blank",
       rel: "noopener noreferrer",
@@ -62,8 +67,8 @@ export default function ContentCard({
   }
 
   return (
-    <Link href={link.href} {...linkProps}>
+    <NextLink href={link.href} {...linkProps}>
       {card}
-    </Link>
+    </NextLink>
   )
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx

@@ -8,7 +8,7 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationPageCitiesMapStore } from "@/stores/destination-page-cities-map"

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/LocationsList/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
 
 import { setMapUrlFromCountryPage } from "@scandic-hotels/common/hooks/map/useSetMapUrlFromCountryPage"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./locationsList.module.css"

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/index.tsx

@@ -1,6 +1,6 @@
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import { getIntl } from "@/i18n"
 

apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 

apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css

@@ -1,5 +1,5 @@
 .amenitiesContainer {
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
   border-radius: var(--Corner-radius-lg);
   padding: var(--Space-x3) var(--Space-x3) var(--Space-x15) var(--Space-x3);
   display: grid;

apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx

@@ -4,7 +4,7 @@ import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { Country } from "@scandic-hotels/trpc/types/country"
 
@@ -31,6 +31,7 @@ interface IntroSectionProps {
   location: HotelLocation
   tripAdvisor: HotelTripAdvisor
   contactInformation: Hotel["contactInformation"]
+  isThemed: boolean
 }
 
 export default async function IntroSection({
@@ -40,6 +41,7 @@ export default async function IntroSection({
   address,
   tripAdvisor,
   contactInformation,
+  isThemed,
 }: IntroSectionProps) {
   const intl = await getIntl()
   const { streetAddress, city, country } = address
@@ -61,7 +63,11 @@ export default async function IntroSection({
       <div className={styles.mainContent}>
         <div className={styles.titleContainer}>
           <Typography variant="Title/Decorative/lg">
-            <span className={styles.script}>
+            <span
+              className={cx(styles.script, {
+                [styles.isThemed]: isThemed,
+              })}
+            >
               {intl.formatMessage({
                 id: "hotel.introSection.welcomeTo",
                 defaultMessage: "Welcome to",
@@ -86,16 +92,10 @@ export default async function IntroSection({
             })}
           >
             <div className={styles.phoneNumber}>
-              <Link
+              <TextLink href={`tel:${phoneNumber}`} typography="Link/sm">
-                href={`tel:${phoneNumber}`}
-                size="small"
-                color="Text/Interactive/Secondary"
-                textDecoration="underline"
-                variant="icon"
-              >
                 <MaterialIcon icon="phone" color="CurrentColor" size={20} />
                 {phoneNumber}
-              </Link>
+              </TextLink>
               <LocalCallCharges
                 className={styles.localCharges}
                 country={country}
@@ -103,21 +103,15 @@ export default async function IntroSection({
             </div>
             {!showLocalCharges && (
               <Divider
-                className={styles.divider}
+                className={styles.contactInformationDivider}
                 variant="vertical"
                 color="Border/Divider/Default"
               />
             )}
-            <Link
+            <TextLink href={`mailto:${email}`} typography="Link/sm">
-              href={`mailto:${email}`}
-              size="small"
-              color="Text/Interactive/Secondary"
-              textDecoration="underline"
-              variant="icon"
-            >
               <MaterialIcon icon="email" color="CurrentColor" size={20} />
               {email}
-            </Link>
+            </TextLink>
           </div>
         </address>
 

apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css

@@ -1,28 +1,19 @@
 .introSection {
-  display: grid;
-  gap: var(--Space-x2);
   position: relative;
+  display: grid;
+  gap: var(--Space-x3);
   max-width: var(--hotel-page-intro-section-width);
 }
 
-.localCharges::before {
-  content: " (";
-}
-
-.localCharges::after {
-  content: ")";
-}
-
 .mainContent {
   display: grid;
-  gap: var(--Space-x15);
   justify-items: start;
+  gap: var(--Space-x1);
 }
 
-.subtitleContent {
+.titleContainer {
   display: grid;
-  gap: var(--Space-x05);
+  gap: var(--Space-x025);
-  justify-items: start;
 }
 
 .title {
@@ -30,19 +21,18 @@
 }
 
 .script {
-  transform: rotate(-4deg);
   color: var(--Text-Accent-Primary);
-}
+  &:not(.isThemed) {
-
+    transform: rotate(-3deg);
-.titleContainer {
+    transform-origin: left;
-  display: grid;
+  }
-  gap: var(--Space-x2);
 }
 
 .contactAddress,
 .contactInformation {
   display: grid;
   gap: var(--Space-x1);
+  justify-items: start;
 }
 
 .contactAddress {
@@ -60,10 +50,25 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x15);
+  align-items: flex-start;
+}
+
+.localCharges::before {
+  content: " (";
+}
+
+.localCharges::after {
+  content: ")";
+}
+
+.subtitleContent {
+  display: grid;
+  justify-items: start;
+  gap: var(--Space-x05);
 }
 
 @media screen and (max-width: 767px) {
-  .divider {
+  .contactInformationDivider {
     display: none;
   }
 }
@@ -77,6 +82,7 @@
 
   .phoneNumber {
     flex-direction: row;
+    align-items: center;
     gap: var(--Space-x1);
   }
 }

apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx

@@ -3,9 +3,8 @@
 import { cx } from "class-variance-authority"
 import { useMemo, useRef, useState } from "react"
 
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
 import { Section } from "@/components/Section"
+import { SectionHeader } from "@/components/Section/Header"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import { RoomCard } from "./RoomCard"
@@ -34,16 +33,11 @@ export function Rooms({ heading, rooms, preamble }: RoomsProps) {
   return (
     <Section id={HotelHashValues.rooms} className={styles.roomsContainer}>
       <div ref={scrollRef} className={styles.scrollRef}></div>
-      <header className={styles.sectionHeader}>
+      <SectionHeader
-        <Typography variant="Title/md">
+        heading={heading}
-          <h2 className={styles.heading}>{heading}</h2>
+        typography="Title/md"
-        </Typography>
+        preamble={preamble}
-        {preamble && (
+      />
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p>{preamble}</p>
-          </Typography>
-        )}
-      </header>
       <ul
         className={cx(styles.roomsList, {
           [styles.allVisible]: allRoomsVisible,
@@ -58,6 +52,7 @@ export function Rooms({ heading, rooms, preamble }: RoomsProps) {
 
       {showToggleButton ? (
         <ShowMoreButton
+          className={styles.showMoreButton}
           loadMoreData={handleShowMore}
           showLess={allRoomsVisible}
         />

apps/scandic-web/components/ContentType/HotelPage/Rooms/rooms.module.css

@@ -4,16 +4,6 @@
   color: var(--Text-Default);
 }
 
-.sectionHeader {
-  display: grid;
-  gap: var(--Space-x15);
-  max-width: var(--hotel-page-intro-section-width);
-}
-
-.heading {
-  color: var(--Text-Heading);
-}
-
 .scrollRef {
   position: absolute;
   top: calc(-1 * var(--hotel-page-scroll-margin-top));
@@ -30,6 +20,10 @@
   }
 }
 
+.showMoreButton {
+  justify-self: center;
+}
+
 @media screen and (min-width: 768px) {
   .roomsList {
     grid-template-columns: repeat(2, 1fr);

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/contactInformation.module.css

@@ -13,6 +13,7 @@
     "contact socials"
     "email email"
     "ecoLabel ecoLabel";
+  font-style: normal;
 }
 
 .address {

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx

@@ -1,7 +1,9 @@
+import NextLink from "next/link"
+
 import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
 import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"
@@ -34,117 +36,94 @@ export default async function ContactInformation({
           })}
         </h3>
       </Typography>
-      <div className={styles.information}>
+      <Typography variant="Body/Paragraph/mdBold">
-        <div className={styles.address}>
+        <address className={styles.information}>
-          <Typography variant="Body/Paragraph/mdBold">
+          <div className={styles.address}>
             <p>
               {intl.formatMessage({
                 id: "common.address",
                 defaultMessage: "Address",
               })}
             </p>
-          </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
-          <Typography variant="Body/Paragraph/mdRegular">
+              <div>
-            <span>
+                <p>{hotelAddress.streetAddress}</p>
-              <p>{hotelAddress.streetAddress}</p>
+                <p>{hotelAddress.city}</p>
-              <p>{hotelAddress.city}</p>
+              </div>
-            </span>
+            </Typography>
-          </Typography>
+          </div>
-        </div>
+          <div className={styles.drivingDirections}>
-        <div className={styles.drivingDirections}>
-          <Typography variant="Body/Paragraph/mdBold">
             <p>
               {intl.formatMessage({
                 id: "common.drivingDirections",
                 defaultMessage: "Driving directions",
               })}
             </p>
-          </Typography>
+            <TextLink href={directionsUrl} target="_blank">
-          <Link
+              {intl.formatMessage({
-            href={directionsUrl}
+                id: "common.googleMaps",
-            target="_blank"
+                defaultMessage: "Google Maps",
-            color="Text/Interactive/Secondary"
+              })}
-            textDecoration="underline"
+            </TextLink>
-          >
+          </div>
-            {intl.formatMessage({
+          <div className={styles.contact}>
-              id: "common.googleMaps",
-              defaultMessage: "Google Maps",
-            })}
-          </Link>
-        </div>
-        <div className={styles.contact}>
-          <Typography variant="Body/Paragraph/mdBold">
             <p>
               {intl.formatMessage({
                 id: "common.contactUs",
                 defaultMessage: "Contact us",
               })}
             </p>
-          </Typography>
+            <TextLink href={`tel:+${contact.phoneNumber}`}>
-          <Link
+              {contact.phoneNumber}
-            href={`tel:+${contact.phoneNumber}`}
+            </TextLink>
-            color="Text/Interactive/Secondary"
+            <LocalCallCharges country={hotelAddress.country} />
-            textDecoration="underline"
+          </div>
-          >
+          {socials.instagram || socials.facebook ? (
-            {contact.phoneNumber}
+            <div className={styles.socials}>
-          </Link>
-          <LocalCallCharges country={hotelAddress.country} />
-        </div>
-        {socials.instagram || socials.facebook ? (
-          <div className={styles.socials}>
-            <Typography variant="Body/Paragraph/mdBold">
               <p>
                 {intl.formatMessage({
                   id: "common.followUs",
                   defaultMessage: "Follow us",
                 })}
               </p>
-            </Typography>
+              <div className={styles.socialIcons}>
-            <div className={styles.socialIcons}>
+                {socials.instagram && (
-              {socials.instagram && (
+                  <NextLink href={socials.instagram}>
-                <Link href={socials.instagram}>
+                    <InstagramIcon color="Icon/Interactive/Default" />
-                  <InstagramIcon color="Icon/Interactive/Default" />
+                  </NextLink>
-                </Link>
+                )}
-              )}
+                {socials.facebook && (
-              {socials.facebook && (
+                  <NextLink href={socials.facebook}>
-                <Link href={socials.facebook}>
+                    <FacebookIcon color="Icon/Interactive/Default" />
-                  <FacebookIcon color="Icon/Interactive/Default" />
+                  </NextLink>
-                </Link>
+                )}
-              )}
+              </div>
             </div>
-          </div>
+          ) : null}
-        ) : null}
+          <div className={styles.email}>
-        <div className={styles.email}>
-          <Typography variant="Body/Paragraph/mdBold">
             <p>
               {intl.formatMessage({
                 id: "common.email",
                 defaultMessage: "Email",
               })}
             </p>
-          </Typography>
+            <TextLink href={`mailto:${contact.email}`}>
-          <Link
+              {contact.email}
-            href={`mailto:${contact.email}`}
+            </TextLink>
-            color="Text/Interactive/Secondary"
+          </div>
-            textDecoration="underline"
+          {ecoLabels.nordicEcoLabel && (
-          >
+            <div className={styles.ecoLabel}>
-            {contact.email}
+              <Image
-          </Link>
+                height={38}
-        </div>
+                width={38}
-        {ecoLabels.nordicEcoLabel && (
+                alt={intl.formatMessage({
-          <div className={styles.ecoLabel}>
+                  id: "common.nordicSwanEcolabel",
-            <Image
+                  defaultMessage: "Nordic Swan Ecolabel",
-              height={38}
+                })}
-              width={38}
+                src={`/_static/shared/icons/swan-eco/swan_eco_dark_${lang}.png`}
-              alt={intl.formatMessage({
+              />
-                id: "common.nordicSwanEcolabel",
-                defaultMessage: "Nordic Swan Ecolabel",
-              })}
-              src={`/_static/shared/icons/swan-eco/swan_eco_dark_${lang}.png`}
-            />
-            <div>
               <Typography variant="Body/Supporting text (caption)/smRegular">
-                <span>
+                <div>
                   <p>
                     {intl.formatMessage({
                       id: "common.nordicSwanEcolabel",
@@ -152,12 +131,12 @@ export default async function ContactInformation({
                     })}
                   </p>
                   <p>{ecoLabels.svanenEcoLabelCertificateNumber}</p>
-                </span>
+                </div>
               </Typography>
             </div>
-          </div>
+          )}
-        )}
+        </address>
-      </div>
+      </Typography>
     </div>
   )
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css

@@ -1,7 +1,7 @@
 .buttonContainer {
   background-color: var(--Background-Primary);
-  border-top: 1px solid var(--Base-Border-Subtle);
+  border-top: 1px solid var(--Border-Default);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x2);
   width: 100%;
   position: absolute;
   left: 0;

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx

@@ -1,7 +1,6 @@
-import Link from "@scandic-hotels/design-system/Link"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Preamble from "@scandic-hotels/design-system/Preamble"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
 
@@ -28,13 +27,19 @@ export default async function ActivitiesSidePeek({
         defaultMessage: "Close",
       })}
     >
-      <Preamble>{preamble}</Preamble>
+      <Typography variant="Body/Lead text">
+        <p>{preamble}</p>
+      </Typography>
       <div className={styles.buttonContainer}>
-        <Button theme="base" intent="secondary" asChild>
+        <ButtonLink
-          <Link href={href} weight="bold">
+          href={href}
-            {sidepeekCTA}
+          variant="Secondary"
-          </Link>
+          color="Primary"
-        </Button>
+          size="Medium"
+          typography="Body/Paragraph/mdBold"
+        >
+          {sidepeekCTA}
+        </ButtonLink>
       </div>
     </SidePeek>
   )

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx

@@ -47,17 +47,16 @@ export default async function MeetingsAndConferencesSidePeek({
           <SidePeekImages images={visibleImages} />
         ) : null}
         {descriptions?.medium && (
-          <Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
             <p>{descriptions.medium}</p>
           </Typography>
         )}
         {roomText || seatingText ? (
-          <Typography className={styles.capacityDetails}>
+          <Typography variant="Body/Paragraph/mdRegular">
-            <span>
+            <div className={styles.capacityDetails}>
-              {roomText}
+              {roomText ? <span>{roomText}</span> : null}
-              {roomText && seatingText && <br />}
+              {seatingText ? <span>{seatingText}</span> : null}
-              {seatingText}
+            </div>
-            </span>
           </Typography>
         ) : null}
 

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css

@@ -1,15 +1,15 @@
 .wrapper {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   margin-bottom: calc(
-    var(--Spacing-x4) * 2 + 80px
+    var(--Space-x4) * 2 + 80px
   ); /* Creates space between the wrapper and buttonContainer */
 }
 
 .buttonContainer {
   background-color: var(--Background-Primary);
-  border-top: 1px solid var(--Base-Border-Subtle);
+  border-top: 1px solid var(--Border-Default);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x2);
   width: 100%;
   position: absolute;
   left: 0;
@@ -17,5 +17,6 @@
 }
 
 .capacityDetails {
+  display: grid;
   color: var(--Text-Secondary);
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

@@ -1,6 +1,6 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
 import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
@@ -81,20 +81,14 @@ export default async function RestaurantBarItem({
           <ul className={styles.menuList}>
             {menus.map(({ name, url }) => (
               <li key={name}>
-                <Link
+                <TextLink href={url} target="_blank">
-                  href={url}
-                  target="_blank"
-                  textDecoration="underline"
-                  variant="icon"
-                  color="Text/Interactive/Secondary"
-                >
                   {name}
                   <MaterialIcon
                     icon="open_in_new"
-                    size={20}
+                    size={24}
                     color="CurrentColor"
                   />
-                </Link>
+                </TextLink>
               </li>
             ))}
           </ul>

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/restaurantBar.module.css

@@ -1,9 +1,9 @@
 .content {
   display: grid;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
 }
 
 .item:not(:last-child) {
-  border-bottom: 1px solid var(--Base-Border-Subtle);
+  border-bottom: 1px solid var(--Border-Default);
-  padding-bottom: var(--Spacing-x4);
+  padding-bottom: var(--Space-x4);
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/roomFacilities.module.css

@@ -5,8 +5,8 @@
 
 .item {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
-  margin-bottom: var(--Spacing-x-half);
+  margin-bottom: var(--Space-x05);
   align-items: self-start;
   justify-content: flex-start;
   color: var(--Text-Secondary);
@@ -32,7 +32,7 @@
 @media screen and (min-width: 768px) {
   .facilities {
     column-count: 2;
-    column-gap: var(--Spacing-x2);
+    column-gap: var(--Space-x2);
   }
 
   .ctaWrapper {

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css

@@ -1,15 +1,15 @@
 .content {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   position: relative;
   margin-bottom: calc(
-    var(--Spacing-x4) * 2 + 80px
+    var(--Space-x4) * 2 + 80px
   ); /* Creates space between the wrapper and buttonContainer */
 }
 
 .innerContent {
   display: grid;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }
 
 .guests {
@@ -24,8 +24,8 @@
 
 .buttonContainer {
   background-color: var(--Background-Primary);
-  border-top: 1px solid var(--Base-Border-Subtle);
+  border-top: 1px solid var(--Border-Default);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x2);
   width: 100%;
   position: absolute;
   left: 0;

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css

@@ -1,7 +1,7 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
 
   /* Creates space between the wrapper and buttonContainer depending on which buttons are present */
   &.hasSpaPage,
@@ -16,12 +16,12 @@
 
 .buttonContainer {
   background-color: var(--Background-Primary);
-  border-top: 1px solid var(--Base-Border-Subtle);
+  border-top: 1px solid var(--Border-Default);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x2);
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 0;
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }

apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -26,9 +26,13 @@ import { HotelHashValues } from "@/types/enums/hotelPage"
 
 interface TabNavigationProps {
   pageSections: HotelPageSections
+  isThemed: boolean
 }
 
-export default function TabNavigation({ pageSections }: TabNavigationProps) {
+export default function TabNavigation({
+  pageSections,
+  isThemed,
+}: TabNavigationProps) {
   const [activeHash, setActiveHash] = useState<string>()
   const tabNavigationRef = useRef<HTMLDivElement>(null)
   const tabRefs = useMemo(() => new Map<string, HTMLAnchorElement>(), [])
@@ -94,6 +98,7 @@ export default function TabNavigation({ pageSections }: TabNavigationProps) {
     <div
       ref={tabNavigationRef}
       className={cx(styles.containerWrapper, {
+        [styles.isThemed]: isThemed,
         [styles.showLeftShadow]: showLeftShadow,
         [styles.showRightShadow]: showRightShadow,
       })}

apps/scandic-web/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css

@@ -2,9 +2,10 @@
   position: sticky;
   top: 0;
   z-index: var(--hotel-tab-navigation-z-index);
-  background-color: var(--Surface-Secondary-Default);
+  background-color: var(--Background-Primary);
   border-bottom: 1px solid var(--Border-Default);
   width: 100%;
+  --gradient-color: var(--Background-Primary);
 
   &::before,
   &::after {
@@ -23,16 +24,16 @@
     left: 0;
     background: linear-gradient(
       -90deg,
-      rgba(242, 236, 230, 0.1) 6%,
+      color-mix(in srgb, var(--gradient-color) 10%, transparent) 6%,
-      rgba(242, 236, 230, 1) 90%
+      var(--gradient-color) 90%
     );
   }
   &::after {
     right: 0;
     background: linear-gradient(
       90deg,
-      rgba(242, 236, 230, 0.1) 6%,
+      color-mix(in srgb, var(--gradient-color) 10%, transparent) 6%,
-      rgba(242, 236, 230, 1) 90%
+      var(--gradient-color) 90%
     );
   }
 
@@ -69,6 +70,22 @@
   }
 }
 
+@media screen and (max-width: 767px) {
+  .containerWrapper.isThemed {
+    background-color: var(--Surface-Brand-Primary-1-Default);
+    --gradient-color: var(--Surface-Brand-Primary-1-Default);
+
+    .link {
+      color: var(--Text-Brand-OnPrimary-1-Default);
+
+      &:hover,
+      &.active {
+        border-bottom-color: var(--Text-Brand-OnPrimary-1-Default);
+      }
+    }
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .tabsContainer {
     padding: 0 var(--Space-x5);

apps/scandic-web/components/ContentType/HotelPage/hotelPage.module.css

@@ -20,16 +20,14 @@
 }
 
 .header {
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Background-Primary);
   grid-area: header;
 }
 
 .mainSection {
   grid-area: mainSection;
   display: grid;
-  gap: var(
+  gap: var(--Space-x9);
-    --Spacing-x9
-  ); /* var(--Space-x9) does not exist in the design system, hence the "old" variable */
   padding: var(--Space-x4) 0;
   width: var(--max-width-page);
   margin: 0 auto;
@@ -57,6 +55,12 @@
   gap: var(--Space-x2);
 }
 
+@media screen and (max-width: 767px) {
+  .header.isThemed {
+    background-color: var(--Surface-Brand-Primary-1-Default);
+  }
+}
+
 @media screen and (min-width: 768px) {
   .pageContainer {
     --hotel-page-scroll-margin-top: calc(
@@ -95,7 +99,7 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    background-color: var(--Base-Surface-Primary-light-Normal);
+    background-color: var(--Surface-Primary-Default);
   }
 
   .pageContainer > nav {

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -1,10 +1,11 @@
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { safeTry } from "@scandic-hotels/common/utils/safeTry"
 import { Alert } from "@scandic-hotels/design-system/Alert"
-import Link from "@scandic-hotels/design-system/Link"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 import { type HotelPageData } from "@scandic-hotels/trpc/types/hotelPage"
 
@@ -18,6 +19,7 @@ import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { setFacilityCards } from "@/utils/facilityCards"
 import { generateHotelSchema } from "@/utils/jsonSchemas"
+import { Theme } from "@/utils/theme/types"
 
 import MapCard from "./Map/MapCard"
 import MapWithCardWrapper from "./Map/MapWithCard"
@@ -57,11 +59,13 @@ import { HotelHashValues } from "@/types/enums/hotelPage"
 interface HotelPageProps {
   hotelData: HotelData
   hotelPageData: HotelPageData
+  theme: Theme
 }
 
 export default async function HotelPage({
   hotelData,
   hotelPageData,
+  theme,
 }: HotelPageProps) {
   const lang = await getLang()
   const intl = await getIntl()
@@ -147,6 +151,8 @@ export default async function HotelPage({
   )
   const trackingHotelData = getTrackingHotelData(hotelData.hotel)
 
+  const isThemed = theme !== Theme.scandic
+
   return (
     <div className={styles.pageContainer}>
       <script
@@ -155,15 +161,22 @@ export default async function HotelPage({
           __html: JSON.stringify(jsonSchema.jsonLd),
         }}
       />
-      <header className={styles.header}>
+      <header
+        className={cx(styles.header, {
+          [styles.isThemed]: isThemed,
+        })}
+      >
         <Suspense fallback={<BreadcrumbsSkeleton size="headerWidth" />}>
-          <Breadcrumbs size="headerWidth" />
+          <Breadcrumbs
+            size="headerWidth"
+            isThemed={isThemed ? "mobileOnly" : undefined}
+          />
         </Suspense>
         {images?.length ? (
           <PreviewImages images={images} hotelName={name} />
         ) : null}
       </header>
-      <TabNavigation pageSections={pageSections} />
+      <TabNavigation isThemed={isThemed} pageSections={pageSections} />
 
       <main className={styles.mainSection}>
         <div id={HotelHashValues.overview} className={styles.overview}>
@@ -175,6 +188,7 @@ export default async function HotelPage({
               address={address}
               tripAdvisor={ratings?.tripAdvisor}
               contactInformation={contactInformation}
+              isThemed={isThemed}
             />
 
             <AmenitiesList detailedFacilities={detailedFacilities} />
@@ -232,14 +246,14 @@ export default async function HotelPage({
       </main>
       <aside className={styles.mapContainer}>
         <MapWithCardWrapper>
-          <Link href="?view=map" keepSearchParams>
+          <NextLink href="?view=map">
             <StaticMap
               coordinates={coordinates}
               hotelName={name}
               address={address}
               markerInfo={{ hotelType: hotelType as HotelType, hotelId }} // TODO: Update hotel attributes schema instead
             />
-          </Link>
+          </NextLink>
           <MapCard
             hotelName={name}
             pois={getFilteredSlicedPois(pointsOfInterest)}

apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx

@@ -1,7 +1,7 @@
 import { ElementType } from "domelementtype"
 import parse, { type DOMNode, Element, type Text } from "html-react-parser"
 
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Table from "@scandic-hotels/design-system/Table"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx

@@ -1,4 +1,4 @@
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/ParkingSidebar.tsx

@@ -1,4 +1,4 @@
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx

@@ -1,6 +1,6 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx

@@ -1,4 +1,4 @@
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"

apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/ActivateOffer/ErrorModal/index.tsx

@@ -2,8 +2,8 @@ import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
 import Modal from "@scandic-hotels/design-system/Modal"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { supportEmail, supportPhone } from "@/constants/contactSupport"

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

@@ -7,9 +7,9 @@ import {
 } from "react-aria-components"
 
 import Body from "@scandic-hotels/design-system/Body"
-import Link from "@scandic-hotels/design-system/Link"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import styles from "./dialog.module.css"

apps/scandic-web/components/Footer/Details/index.tsx

@@ -1,5 +1,5 @@
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 

apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 

apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -18,7 +18,7 @@ import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { useFormTracking } from "@scandic-hotels/tracking/useFormTracking"

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -7,7 +7,7 @@ import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { trpc } from "@scandic-hotels/trpc/client"
 

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -3,7 +3,7 @@
 import FocusLock from "react-focus-lock"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useDropdownStore from "@/stores/main-menu"

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -3,7 +3,7 @@
 import { useRef } from "react"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import useDropdownStore from "@/stores/main-menu"
 

apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx

@@ -10,8 +10,8 @@ import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { logger } from "@scandic-hotels/common/logger"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
-import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Title from "@scandic-hotels/design-system/Title"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx

@@ -12,7 +12,7 @@ import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
 import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
 import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx

@@ -1,5 +1,5 @@
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./summaryCard.module.css"

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

@@ -1,6 +1,6 @@
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./promo.module.css"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Cancelled/index.tsx

@@ -2,7 +2,7 @@
 import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import { isWebview } from "@/constants/routes/webviews"
 

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx

@@ -15,8 +15,8 @@ import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
 import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
 import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
-import Link from "@scandic-hotels/design-system/Link"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trackGlaSaveCardAttempt } from "@scandic-hotels/tracking/payment"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ViewAndPrintReceipt/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
 import { preliminaryReceipt } from "@scandic-hotels/common/constants/routes/myStay"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"

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

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl"
 
 import { languages } from "@scandic-hotels/common/constants/language"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 

apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx

@@ -6,8 +6,8 @@ import { useIntl } from "react-intl"
 import { dt } from "@scandic-hotels/common/dt"
 import { IconButton } from "@scandic-hotels/design-system/IconButton" // client only
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
 import Modal from "@scandic-hotels/design-system/Modal"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { compareAllLevels, faq } from "@/constants/webHrefs"

apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/index.tsx

@@ -3,7 +3,7 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./changeNameDisclaimer.module.css"

apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx

@@ -1,6 +1,6 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getMembershipCards } from "@/lib/trpc/memoizedRequests"

apps/scandic-web/components/MyPages/Surprises/Client.tsx

@@ -2,14 +2,14 @@
 
 import { AnimatePresence, motion } from "motion/react"
 import { usePathname } from "next/navigation"
-import React, { useState } from "react"
+import { useState } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { customerService } from "@scandic-hotels/common/constants/routes/customerService"
 import { benefits } from "@scandic-hotels/common/constants/routes/myPages"
 import { logger } from "@scandic-hotels/common/logger"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"

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

@@ -5,8 +5,8 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 

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

@@ -1,5 +1,5 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import { linkVariants } from "./variants"
 

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

@@ -4,7 +4,7 @@ import {
   MaterialIcon,
   type MaterialIconSetIconProps,
 } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactConfig"
 
 import { serverClient } from "@/lib/trpc/server"

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

@@ -1,6 +1,6 @@
 import { membershipTermsAndConditions } from "@scandic-hotels/common/constants/routes/membershipTermsAndConditions"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { faq } from "@/constants/webHrefs"

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import { cx } from "class-variance-authority"
 import Link from "next/link"
-import { Breadcrumb as AriaBreadcrumb } from "react-aria-components"
+import { Breadcrumb as BreadcrumbRAC } from "react-aria-components"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -16,7 +16,7 @@ export function Breadcrumb({
   ...props
 }: BreadcrumbProps) {
   return (
-    <AriaBreadcrumb className={cx(styles.listItem, className)} {...props}>
+    <BreadcrumbRAC className={cx(styles.listItem, className)} {...props}>
       {href ? (
         <>
           <Typography variant="Label/xsRegular">
@@ -28,12 +28,12 @@ export function Breadcrumb({
             icon="chevron_right"
             size={20}
             aria-hidden="true"
-            color="Icon/Interactive/Secondary"
+            color="CurrentColor"
           />
         </>
       ) : (
         children
       )}
-    </AriaBreadcrumb>
+    </BreadcrumbRAC>
   )
 }

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -1,7 +1,8 @@
 .breadcrumbs {
-  padding: var(--Spacing-x4) 0 var(--Spacing-x3);
+  padding: var(--Space-x4) 0 var(--Space-x3);
   margin: 0 auto;
   width: 100%;
+  color: var(--Text-Interactive-Secondary);
 }
 
 .breadcrumbs.transparent {
@@ -19,7 +20,7 @@
 
 .breadcrumbs .list {
   display: flex;
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Space-x025);
   padding-inline-start: 0;
   margin: 0 auto;
 }
@@ -43,7 +44,7 @@
 .listItem {
   align-items: center;
   display: flex;
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Space-x025);
   flex-shrink: 0;
   flex-grow: 0;
 }
@@ -64,24 +65,31 @@
   /* this increases the width of the button for tapping */
   padding: 0 5px;
   margin: 0 -5px;
-  color: var(--Base-Text-High-contrast);
+  color: var(--Text-Interactive-Default);
+
+  &.button:not(.lastBreadcrumb) {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--Text-Interactive-Default-Hover);
+    }
+  }
 }
 
 .link {
   color: var(--Text-Interactive-Secondary);
-}
 
-.link:hover,
+  &:hover {
-.button:hover {
+    color: var(--Text-Interactive-Secondary-Hover);
-  color: var(--Text-Interactive-Secondary-Hover);
+  }
 }
 
 .dialog {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
-  padding: var(--Spacing-x1);
+  padding: var(--Space-x1);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   border-radius: var(--Corner-radius-md);
   min-width: 169px;
   outline: none;
@@ -91,16 +99,16 @@
 .dialogLink {
   display: block;
   border-radius: var(--Corner-radius-md);
-  padding: var(--Spacing-x1);
+  padding: var(--Space-x1);
   color: var(--Text-Default);
+
+  &:hover,
+  &:focus {
+    background-color: var(--Surface-Primary-Hover);
+  }
 }
 
-.dialogLink:focus,
+.lastBreadcrumb {
-.dialogLink:hover {
-  background-color: var(--Base-Surface-Primary-light-Hover);
-}
-
-.tooltipTrigger {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -109,23 +117,57 @@
 
 .tooltip {
   background-color: var(--Surface-UI-Fill-Intense);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  padding: var(--Space-x05) var(--Space-x1);
   border-radius: var(--Corner-radius-sm);
   color: var(--Text-Inverted);
   outline: none;
 }
 
-@media screen and (width <= 767px) {
+@media screen and (max-width: 767px) {
   .desktop {
     display: none;
   }
+
+  .breadcrumbs.isThemedMobile {
+    background-color: var(--Surface-Brand-Primary-1-Default);
+    color: var(--Text-Brand-OnPrimary-1-Default);
+
+    .link,
+    .button {
+      color: var(--Text-Brand-OnPrimary-1-Default);
+    }
+
+    .link:hover,
+    .button:not(.lastBreadcrumb):hover {
+      color: var(
+        --Text-Brand-OnPrimary-1-Default
+      ); /* In need of a different variable for this */
+    }
+  }
 }
 
-@media screen and (width >= 768px) {
+@media screen and (min-width: 768px) {
   .mobile {
     display: none;
   }
   .desktop {
     display: flex;
   }
+
+  .breadcrumbs.isThemedDesktop {
+    background-color: var(--Surface-Brand-Primary-1-Default);
+    color: var(--Text-Brand-OnPrimary-1-Default);
+
+    .link,
+    .button {
+      color: var(--Text-Brand-OnPrimary-1-Default);
+    }
+
+    .link:hover,
+    .button:not(.lastBreadcrumb):hover {
+      color: var(
+        --Text-Brand-OnPrimary-1-Default
+      ); /* In need of a different variable for this */
+    }
+  }
 }

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

@@ -4,7 +4,7 @@ import { cx } from "class-variance-authority"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 import {
-  Breadcrumbs as AriaBreadcrumbs,
+  Breadcrumbs as BreadcrumbsRAC,
   Button,
   Dialog,
   DialogTrigger,
@@ -30,6 +30,7 @@ export default function Breadcrumbs({
   breadcrumbs,
   color,
   size,
+  isThemed,
 }: BreadcrumbsProps) {
   const intl = useIntl()
 
@@ -63,6 +64,7 @@ export default function Breadcrumbs({
   const classNames = breadcrumbsVariants({
     color,
     size,
+    isThemed,
   })
 
   const [homeBreadcrumb, remainingBreadcrumbs, lastBreadcrumb] =
@@ -76,16 +78,12 @@ export default function Breadcrumbs({
       })}
       className={classNames}
     >
-      <AriaBreadcrumbs className={styles.list}>
+      <BreadcrumbsRAC className={styles.list}>
         <Breadcrumb
           href={homeBreadcrumb.href}
           aria-label={homeBreadcrumb.title}
         >
-          <MaterialIcon
+          <MaterialIcon icon="home" size={20} color="CurrentColor" />
-            icon="home"
-            size={20}
-            color="Icon/Interactive/Secondary"
-          />
         </Breadcrumb>
 
         {/* These breadcrumbs are visible on mobile only */}
@@ -125,7 +123,7 @@ export default function Breadcrumbs({
                 icon="chevron_right"
                 size={20}
                 aria-hidden="true"
-                color="Icon/Interactive/Secondary"
+                color="CurrentColor"
               />
             </Breadcrumb>
           </>
@@ -157,7 +155,7 @@ export default function Breadcrumbs({
           <DialogTrigger>
             <Typography variant="Label/xsBold">
               <Button
-                className={cx(styles.button, styles.tooltipTrigger)}
+                className={cx(styles.button, styles.lastBreadcrumb)}
                 ref={attachRef}
                 isDisabled={isTooltipDisabled}
               >
@@ -176,7 +174,7 @@ export default function Breadcrumbs({
             </Popover>
           </DialogTrigger>
         </Breadcrumb>
-      </AriaBreadcrumbs>
+      </BreadcrumbsRAC>
     </nav>
   )
 }

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/variants.ts

@@ -16,9 +16,16 @@ export const breadcrumbsVariants = cva(styles.breadcrumbs, {
       headerWidth: styles.headerWidth,
       contentWidth: styles.contentWidth,
     },
+    isThemed: {
+      mobileOnly: styles.isThemedMobile,
+      desktopOnly: styles.isThemedDesktop,
+      true: [styles.isThemedMobile, styles.isThemedDesktop],
+      false: "",
+    },
   },
   defaultVariants: {
     color: "transparent",
     size: "pageWidth",
+    isThemed: false,
   },
 })

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

@@ -1,7 +1,7 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Title from "@scandic-hotels/design-system/Title"
 
 import { loyaltyCardVariants } from "./variants"

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

@@ -157,7 +157,7 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
           </table>
         )}
         <ShowMoreButton
-          intent="secondary"
+          variant="Secondary"
           loadMoreData={handleShowMore}
           showLess={opened}
         />

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

@@ -2,30 +2,30 @@
 
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
-import { showMoreButtonVariants } from "./variants"
+import type { ComponentProps } from "react"
 
-import styles from "./showMoreButton.module.css"
+interface ShowMoreButtonProps extends ComponentProps<typeof Button> {
-
+  showLess?: boolean
-import type { ShowMoreButtonProps } from "./showMoreButton"
+  textShowMore?: string
+  textShowLess?: string
+  loadMoreData: () => void
+}
 
 export default function ShowMoreButton({
-  className,
+  variant = "Text",
-  buttonIntent,
+  color = "Primary",
-  intent,
+  size = "Medium",
-  disabled,
+  typography = "Body/Paragraph/mdBold",
   showLess,
   textShowMore,
   textShowLess,
   loadMoreData,
+  ...props
 }: ShowMoreButtonProps) {
   const intl = useIntl()
-  const classNames = showMoreButtonVariants({
-    className,
-    buttonIntent,
-  })
 
   if (!textShowMore) {
     textShowMore = intl.formatMessage({
@@ -42,25 +42,25 @@ export default function ShowMoreButton({
   }
 
   return (
-    <div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
+    <Button
-      <Button
+      variant={variant}
-        className={styles.button}
+      color={color}
-        disabled={disabled}
+      size={size}
-        onClick={loadMoreData}
+      onPress={loadMoreData}
-        variant="icon"
+      typography={typography}
-        type="button"
+      {...props}
-        theme="base"
+    >
-        intent={intent ?? "text"}
+      {showLess ? (
-        fullWidth={intent ? true : false}
+        <>
-        size={intent && "small"}
+          <MaterialIcon icon="keyboard_arrow_up" color="CurrentColor" />
-      >
+          <span>{textShowLess}</span>
-        <MaterialIcon
+        </>
-          icon="keyboard_arrow_down"
+      ) : (
-          className={styles.icon}
+        <>
-          color="CurrentColor"
+          <MaterialIcon icon="keyboard_arrow_down" color="CurrentColor" />
-        />
+          <span>{textShowMore}</span>
-        {showLess ? textShowLess : textShowMore}
+        </>
-      </Button>
+      )}
-    </div>
+    </Button>
   )
 }

apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.module.css

@@ -1,23 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-}
-
-.table {
-  display: grid;
-  justify-content: stretch;
-  border-top: 1px solid var(--Base-Border-Subtle);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-
-.table .button {
-  border-radius: 0;
-}
-
-.icon {
-  transition: transform 0.3s;
-}
-
-.showLess .icon {
-  transform: rotate(180deg);
-}

apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts

@@ -1,15 +0,0 @@
-import type { ButtonPropsRAC } from "@scandic-hotels/design-system/OldDSButton"
-import type { VariantProps } from "class-variance-authority"
-
-import type { showMoreButtonVariants } from "./variants"
-
-export interface ShowMoreButtonProps
-  extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
-    VariantProps<typeof showMoreButtonVariants> {
-  disabled?: boolean
-  showLess?: boolean
-  textShowMore?: string
-  textShowLess?: string
-  loadMoreData: () => void
-  intent?: ButtonPropsRAC["intent"]
-}

apps/scandic-web/components/TempDesignSystem/ShowMoreButton/variants.ts

@@ -1,11 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./showMoreButton.module.css"
-
-export const showMoreButtonVariants = cva(styles.container, {
-  variants: {
-    buttonIntent: {
-      table: styles.table,
-    },
-  },
-})

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

@@ -1,6 +1,6 @@
 import { ArrowLeft } from "react-feather"
 
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import { overview } from "@/constants/routes/webviews"
 import { env } from "@/env/server"

packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/index.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./hotelDetails.module.css"

packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/index.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@scandic-hotels/design-system/Button"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./promo.module.css"

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

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl"
 import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
 import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../hooks/useLang"

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

@@ -6,7 +6,7 @@ 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/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"

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

@@ -6,7 +6,7 @@ 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/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"

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

@@ -6,9 +6,9 @@ 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 Link from "@scandic-hotels/design-system/Link"
 import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trackLoginClick } from "@scandic-hotels/tracking/navigation"
 

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

@@ -6,7 +6,7 @@ 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/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 

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

@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
-import Link from "@scandic-hotels/design-system/Link"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"

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

@@ -2,7 +2,7 @@ import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/Link"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"

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

@@ -11,8 +11,8 @@ import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPoi
 import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/NoPriceAvailableCard"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 

packages/booking-flow/lib/components/SelectHotel/MobileMapButtonContainer/index.tsx

@@ -7,8 +7,8 @@ import {
   selectHotelMap,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 
 import useLang from "../../../hooks/useLang"
 import FilterAndSortModal from "../Filters/FilterAndSortModal"

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -14,8 +14,8 @@ import { debounce } from "@scandic-hotels/common/utils/debounce"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
 import { InteractiveMap } from "@scandic-hotels/design-system/Map/InteractiveMap"
+import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trackEvent } from "@scandic-hotels/tracking/base"