Merged in feat/SW-3542-update-color-variables-to- (pull request #2970)

feat(SW-3542): Updated the color variables for MVP Approved-by: Joakim Jäderberg
2025-10-17 09:22:03 +00:00
parent bf19d3960b
commit c01f440651
17 changed files with 141 additions and 67 deletions
--- a/apps/partner-sas/app/[lang]/layout.tsx
+++ b/apps/partner-sas/app/[lang]/layout.tsx
@@ -81,7 +81,7 @@ export default async function RootLayout(props: RootLayoutProps) {
          window.dataLayer = window.dataLayer || []
        `}</Script>
      </head>
-      <body className="scandic">
+      <body className="scandic partner-sas">
        <div className="root">
          <SessionProvider basePath="/api/web/auth">
            <ClientIntlProvider
--- a/apps/partner-sas/components/Footer/footer.module.css
+++ b/apps/partner-sas/components/Footer/footer.module.css
@@ -19,7 +19,7 @@
 }

 .bottom {
-  background-color: var(--TEMP-sas-default);
+  background-color: var(--SAS-Default);
  color: white;
  padding: 32px 16px 40px;

--- a/apps/partner-sas/components/LanguageSwitcher/languageSwitcher.module.css
+++ b/apps/partner-sas/components/LanguageSwitcher/languageSwitcher.module.css
@@ -10,7 +10,7 @@
    align-items: center;
    display: flex;
    width: 100%;
-    color: var(--Text-sas-20);
+    color: var(--SAS-Gray-20);
  }

  &.header {
@@ -25,13 +25,13 @@
  &.footer {
    .triggerText,
    .chevron {
-      color: var(--TEMP-sas-40);
+      color: var(--SAS-40);
    }
    .chevron {
      margin: 1px 0 0 2px;
    }
    .globeIcon {
-      color: var(--TEMP-sas-40);
+      color: var(--SAS-40);
    }
  }
 }
@@ -45,7 +45,7 @@
  align-items: flex-start;

  .arrowBack {
-    color: var(--TEMP-sas-40);
+    color: var(--SAS-40);
    padding: var(--Space-x2) 0;
    width: 100%;
    justify-content: flex-start;
@@ -88,7 +88,7 @@
  .closeModal {
    align-self: flex-end;
    background-color: transparent;
-    color: var(--TEMP-sas-40);
+    color: var(--SAS-40);
    gap: 0;
  }

@@ -112,7 +112,7 @@
    display: flex;
    width: 100%;
    padding: 0 var(--Space-x2);
-    border-bottom: 1px solid var(--SAS-90);
+    border-bottom: 1px solid var(--SAS-Gray-90);
    justify-content: flex-end;
  }
  .arrowBackIcon {
--- a/apps/partner-sas/components/Menu/FooterMenu/footer-menu.module.css
+++ b/apps/partner-sas/components/Menu/FooterMenu/footer-menu.module.css
@@ -21,10 +21,10 @@

 .link {
  text-decoration: none;
-  color: var(--TEMP-sas-40);
+  color: var(--SAS-40);

  &:hover {
-    color: var(--TEMP-sas-40);
+    color: var(--SAS-40);
    text-decoration: underline;
  }
 }
--- a/apps/partner-sas/components/Menu/MobileMenu/mobile-menu.module.css
+++ b/apps/partner-sas/components/Menu/MobileMenu/mobile-menu.module.css
@@ -7,7 +7,7 @@
 .mobileMenu .avatar {
  background-color: white;
  span {
-    color: var(--TEMP-sas-20);
+    color: var(--SAS-20);
  }
 }

--- a/apps/partner-sas/components/Menu/NavigationMenu/navigation-menu.module.css
+++ b/apps/partner-sas/components/Menu/NavigationMenu/navigation-menu.module.css
@@ -19,7 +19,7 @@
 }

 .contactLink {
-  color: var(--Text-sas-20);
+  color: var(--SAS-Gray-20);
 }

@media screen and (min-width: 768px) {
--- a/apps/partner-sas/components/Menu/UserMenu/user-menu.module.css
+++ b/apps/partner-sas/components/Menu/UserMenu/user-menu.module.css
@@ -18,7 +18,7 @@

 .userMenu .avatar {
  background-color: white;
-  color: var(--TEMP-sas-default);
+  color: var(--SAS-Default);

  span {
    color: currentColor;
@@ -27,12 +27,12 @@

 .userDetailsContainer {
  padding: var(--Space-x1);
-  color: var(--Text-sas-20);
+  color: var(--SAS-Gray-20);
 }

 .logoutLink,
 .loginLink {
-  color: var(--Text-sas-20);
+  color: var(--SAS-Gray-20);
  text-decoration: none;
 }

@@ -41,7 +41,7 @@
  font-weight: normal;

  &:hover {
-    color: var(--Text-sas-20);
+    color: var(--SAS-Gray-20);
    text-decoration: none;
  }
 }
@@ -70,7 +70,7 @@
    position: fixed;
    top: calc(var(--Space-x2) + var(--sitewide-alert-height));
    right: var(--Space-x15);
-    background-color: var(--TEMP-sas-default);
+    background-color: var(--SAS-Default);
    border: none;
    padding: var(--Space-x05);
    color: white;
@@ -80,7 +80,7 @@

    &:hover,
    &:hover:not(:disabled) {
-      background-color: var(--TEMP-sas-default);
+      background-color: var(--SAS-Default);
    }

    .bar,
--- a/apps/partner-sas/components/Menu/menu.module.css
+++ b/apps/partner-sas/components/Menu/menu.module.css
@@ -1,5 +1,5 @@
 .container {
-  background-color: var(--TEMP-sas-default);
+  background-color: var(--SAS-Default);
  color: white;
  display: flex;
  align-items: center;
--- a/apps/partner-sas/components/PoweredByScandic/poweredByScandic.module.css
+++ b/apps/partner-sas/components/PoweredByScandic/poweredByScandic.module.css
@@ -2,7 +2,7 @@
  display: flex;
  align-items: center;
  gap: 8px;
-  color: var(--TEMP-sas-20);
+  color: var(--SAS-20);
 }

 .logo {
--- a/apps/partner-sas/globals.css
+++ b/apps/partner-sas/globals.css
@@ -38,12 +38,6 @@
  --modal-box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
  --popup-box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);

-  --TEMP-sas-default: #000099;
-  --TEMP-sas-20: #00175c;
-  --TEMP-sas-40: #0030c2;
-  --Text-sas-20: #333;
-  --SAS-90: #e5e5e5;
-
  @supports (interpolate-size: allow-keywords) {
    interpolate-size: allow-keywords;
  }
@@ -66,6 +60,76 @@ body.overflow-hidden {
  overflow: hidden;
 }

+body.partner-sas {
+  /* Over-ride variables according to SAS theme / color scheme */
+  --SAS-Default: #009;
+  --SAS-20: #00175c;
+  --SAS-40: #0030c2;
+  --SAS-50: #003df5;
+  --SAS-90: #f0faff;
+  --SAS-Gray-20: #333;
+  --SAS-Gray-40: #666;
+  --SAS-Gray-90: #e5e5e5;
+  --SAS-Gray-100: #f5f5f5;
+
+  --Background-Primary: var(--SAS-Gray-100);
+  --Base-Border-Hover: var(--SAS-Gray-40);
+  --Base-Border-Subtle: var(--SAS-Gray-90);
+  --Base-Button-Primary-Fill-Normal: var(--SAS-50);
+  --Base-Button-Primary-Fill-Hover: var(--SAS-50);
+  --Base-Button-Tertiary-Fill-Normal: var(--SAS-50);
+  --Base-Button-Tertiary-Fill-Hover: var(--SAS-50);
+  --Base-Button-Secondary-On-Fill-Normal: var(--SAS-50);
+  --Base-Button-Secondary-Fill-Normal: var(--SAS-50);
+  --Base-Button-Secondary-Border-Normal: var(--SAS-50);
+  --Base-Surface-Subtle-Normal: var(--SAS-90);
+  --Base-Surface-Secondary-light-Normal: var(--SAS-Gray-100);
+  --Base-Text-Accent: var(--SAS-50);
+  --Base-Text-Medium-contrast: var(--SAS-40);
+
+  --Border-Intense: var(--SAS-Gray-40);
+  --Border-Interactive-Selected: var(--SAS-Gray-40);
+  --Border-Interactive-Default: var(--SAS-Gray-40);
+
+  --Component-Button-Brand-Primary-Fill-Default: var(--SAS-50);
+  --Component-Button-Brand-Primary-Fill-Hover: var(--SAS-50);
+  --Component-Button-Brand-Tertiary-Fill-Default: var(--SAS-50);
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--SAS-50);
+  --Component-Button-Inverted-On-fill-Default: var(--SAS-50);
+  --Component-Button-Inverted-On-fill-Hover: var(--SAS-50);
+  --Component-Button-Brand-Secondary-On-fill-Default: var(--SAS-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover: var(--SAS-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
+    --SAS-Gray-100
+  );
+
+  --Icon-Interactive-Default: var(--SAS-40);
+  --Primary-Dark-Surface-Normal: var(--SAS-Default);
+  --Primary-Light-Surface-Normal: var(--SAS-90);
+  --Surface-Brand-Primary-1-OnSurface-Default: var(--SAS-40);
+  --Surface-Brand-Primary-2-Default: var(--SAS-Default);
+  --Surface-Primary-Hover: var(--SAS-Gray-90);
+  --Surface-Primary-Hover-Accent: var(--SAS-90);
+  --Surface-Secondary-Default: var(--Base-Surface-Subtle-Normal);
+  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
+  --Surface-UI-Fill-Active: var(--SAS-20);
+  --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Surface-UI-Fill-Disabled: var(--Neutral-15);
+
+  --Scandic-Brand-Warm-White: var(--Background-Primary);
+  --Text-Accent-Primary: var(--SAS-20);
+  --Text-Accent-Secondary: var(--SAS-40);
+  --Text-Heading: var(--SAS-Gray-20);
+  --Text-Interactive-Default: var(--SAS-40);
+  --Text-Interactive-Hover: var(--SAS-40);
+  --Text-Interactive-Secondary: var(--SAS-40);
+
+  --Scandic-Brand-Burgundy: var(--Text-Default);
+  --Scandic-Peach-80: var(--SAS-Gray-40);
+  --Scandic-Grey-00: var(--SAS-Gray-100);
+  --Scandic-Grey-10: var(--SAS-Gray-90);
+}
+
 /* From Tailwind */
 .sr-only {
  position: absolute;
--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
@@ -13,6 +13,14 @@
  gap: var(--Spacing-x-half);
 }

+.header .confirmTitle {
+  color: var(--Text-Accent-Primary);
+}
+
+.header .hotelTitle {
+  color: var(--Text-Heading);
+}
+
 .body {
  max-width: 720px;
 }
--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
@@ -3,7 +3,7 @@
 import { useIntl } from "react-intl"

 import Body from "@scandic-hotels/design-system/Body"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { AddToCalendar } from "../../AddToCalendar"
 import { AddToCalendarButton } from "./Actions/AddToCalendarButton"
@@ -56,14 +56,16 @@ export function Header({
  return (
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
-        <Title as="h2" color="red" textTransform="uppercase" type="h2">
-          {intl.formatMessage({
-            defaultMessage: "Booking confirmation",
-          })}
-        </Title>
-        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
-          {hotel.name}
-        </Title>
+        <Typography variant={"Title/md"}>
+          <h2 className={styles.confirmTitle}>
+            {intl.formatMessage({
+              defaultMessage: "Booking confirmation",
+            })}
+          </h2>
+        </Typography>
+        <Typography variant={"Title/md"}>
+          <h2 className={styles.hotelTitle}>{hotel.name}</h2>
+        </Typography>
      </hgroup>
      <Body className={styles.body}>{text}</Body>
      <div className={styles.actions}>
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
@@ -7,8 +7,8 @@ import { useIntl } from "react-intl"

 import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { dt } from "@scandic-hotels/common/dt"
+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 SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -99,13 +99,7 @@ export default function FormContent({
        </div>
      </div>
      <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <Button
-          className={styles.button}
-          form={formId}
-          intent="primary"
-          theme="base"
-          type="submit"
-        >
+        <Button className={styles.button} form={formId} type="submit">
          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
          </span>
@@ -130,10 +124,10 @@ export default function FormContent({
        <Button
          className={styles.button}
          form={formId}
-          intent="primary"
-          theme="base"
+          variant={"Primary"}
+          size={"Medium"}
          type="submit"
-          disabled={isSearching}
+          isDisabled={isSearching}
        >
          <Typography
            variant="Body/Supporting text (caption)/smBold"
@@ -195,13 +189,7 @@ export function BookingWidgetFormContentSkeleton() {
        </div>
      </div>
      <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <Button
-          className={styles.button}
-          intent="primary"
-          theme="base"
-          type="submit"
-          disabled
-        >
+        <Button className={styles.button} type="submit" isDisabled>
          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
          </span>
@@ -213,10 +201,10 @@ export function BookingWidgetFormContentSkeleton() {
      <div className={cx(styles.buttonContainer, styles.hideOnTablet)}>
        <Button
          className={styles.button}
-          intent="primary"
-          theme="base"
+          variant={"Primary"}
+          size={"Medium"}
          type="submit"
-          disabled
+          isDisabled
        >
          <Typography
            variant="Body/Supporting text (caption)/smBold"
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
@@ -10,6 +10,7 @@ import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"

+import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
 import { GuestsRoom } from "./GuestsRoom"

 import styles from "./guests-rooms-picker.module.css"
@@ -29,6 +30,7 @@ export default function GuestsRoomsPickerDialog({
  onClose,
 }: GuestsRoomsPickerDialogProps) {
  const intl = useIntl()
+  const config = useBookingFlowConfig()
  const { getFieldState, trigger, setValue, getValues } =
    useFormContext<BookingWidgetSchema>()
  const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
@@ -40,10 +42,15 @@ export default function GuestsRoomsPickerDialog({
  })
  // Disable add room if booking code is either voucher or corporate cheque, or reward night is enabled
  const addRoomDisabledTextForSpecialRate = getValues(SEARCH_TYPE_REDEMPTION)
-    ? intl.formatMessage({
-        defaultMessage:
-          "Multi-room booking is not available with reward night.",
-      })
+    ? config.variant === "partner-sas"
+      ? intl.formatMessage({
+          defaultMessage:
+            "Multi-room booking is not available with EuroBonus points.",
+        })
+      : intl.formatMessage({
+          defaultMessage:
+            "Multi-room booking is not available with reward night.",
+        })
    : getValues("bookingCode.value")?.toLowerCase().startsWith("vo") &&
      intl.formatMessage({
        defaultMessage:
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -90,7 +90,6 @@
 }

 .roomActionsButton {
-  margin-left: auto;
  color: var(--Base-Text-Accent);
 }

--- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css
@@ -8,6 +8,11 @@
  gap: var(--Space-x3);
 }

+.container .filterByTitle {
+  font-weight: 500;
+  color: var(--Text-Heading);
+}
+
 .facilities {
  padding-bottom: var(--Space-x3);
 }
--- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx
+++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx
@@ -2,7 +2,6 @@ import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"

-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import {
@@ -116,11 +115,13 @@ export default function FilterContent({
  return (
    <aside className={`${styles.container} ${className}`}>
      <div>
-        <Title as="h4">
-          {intl.formatMessage({
-            defaultMessage: "Filter by",
-          })}
-        </Title>
+        <Typography variant={"Title/xs"} className={styles.filterByTitle}>
+          <h4>
+            {intl.formatMessage({
+              defaultMessage: "Filter by",
+            })}
+          </h4>
+        </Typography>
        <div className={styles.facilities}>
          <Typography variant="Title/Subtitle/md">
            <p>