scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
feat(SW-3542): Updated the color variables for MVP

Approved-by: Joakim Jäderberg
This commit is contained in:
Hrishikesh Vaipurkar
2025-10-17 09:22:03 +00:00
parent bf19d3960b
commit c01f440651
17 changed files with 141 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/partner-sas/app/[lang]/layout.tsx
View File

@@ -81,7 +81,7 @@ export default async function RootLayout(props: RootLayoutProps) {
window.dataLayer = window.dataLayer || [] window.dataLayer = window.dataLayer || []
`}</Script> `}</Script>
</head> </head>
<body className="scandic"> <body className="scandic partner-sas">
<div className="root"> <div className="root">
<SessionProvider basePath="/api/web/auth"> <SessionProvider basePath="/api/web/auth">
<ClientIntlProvider <ClientIntlProvider

2
apps/partner-sas/components/Footer/footer.module.css
View File

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

12
apps/partner-sas/components/LanguageSwitcher/languageSwitcher.module.css
View File

@@ -10,7 +10,7 @@
align-items: center; align-items: center;
display: flex; display: flex;
width: 100%; width: 100%;
color: var(--Text-sas-20); color: var(--SAS-Gray-20);
} }
&.header { &.header {
@@ -25,13 +25,13 @@
&.footer { &.footer {
.triggerText, .triggerText,
.chevron { .chevron {
color: var(--TEMP-sas-40); color: var(--SAS-40);
} }
.chevron { .chevron {
margin: 1px 0 0 2px; margin: 1px 0 0 2px;
} }
.globeIcon { .globeIcon {
color: var(--TEMP-sas-40); color: var(--SAS-40);
} }
} }
} }
@@ -45,7 +45,7 @@
align-items: flex-start; align-items: flex-start;
.arrowBack { .arrowBack {
color: var(--TEMP-sas-40); color: var(--SAS-40);
padding: var(--Space-x2) 0; padding: var(--Space-x2) 0;
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
@@ -88,7 +88,7 @@
.closeModal { .closeModal {
align-self: flex-end; align-self: flex-end;
background-color: transparent; background-color: transparent;
color: var(--TEMP-sas-40); color: var(--SAS-40);
gap: 0; gap: 0;
} }
@@ -112,7 +112,7 @@
display: flex; display: flex;
width: 100%; width: 100%;
padding: 0 var(--Space-x2); padding: 0 var(--Space-x2);
border-bottom: 1px solid var(--SAS-90); border-bottom: 1px solid var(--SAS-Gray-90);
justify-content: flex-end; justify-content: flex-end;
} }
.arrowBackIcon { .arrowBackIcon {

4
apps/partner-sas/components/Menu/FooterMenu/footer-menu.module.css
View File

@@ -21,10 +21,10 @@
.link { .link {
text-decoration: none; text-decoration: none;
color: var(--TEMP-sas-40); color: var(--SAS-40);
&:hover { &:hover {
color: var(--TEMP-sas-40); color: var(--SAS-40);
text-decoration: underline; text-decoration: underline;
} }
} }

2
apps/partner-sas/components/Menu/MobileMenu/mobile-menu.module.css
View File

@@ -7,7 +7,7 @@
.mobileMenu .avatar { .mobileMenu .avatar {
background-color: white; background-color: white;
span { span {
color: var(--TEMP-sas-20); color: var(--SAS-20);
} }
} }

2
apps/partner-sas/components/Menu/NavigationMenu/navigation-menu.module.css
View File

@@ -19,7 +19,7 @@
} }
.contactLink { .contactLink {
color: var(--Text-sas-20); color: var(--SAS-Gray-20);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {

12
apps/partner-sas/components/Menu/UserMenu/user-menu.module.css
View File

@@ -18,7 +18,7 @@
.userMenu .avatar { .userMenu .avatar {
background-color: white; background-color: white;
color: var(--TEMP-sas-default); color: var(--SAS-Default);
span { span {
color: currentColor; color: currentColor;
@@ -27,12 +27,12 @@
.userDetailsContainer { .userDetailsContainer {
padding: var(--Space-x1); padding: var(--Space-x1);
color: var(--Text-sas-20); color: var(--SAS-Gray-20);
} }
.logoutLink, .logoutLink,
.loginLink { .loginLink {
color: var(--Text-sas-20); color: var(--SAS-Gray-20);
text-decoration: none; text-decoration: none;
} }
@@ -41,7 +41,7 @@
font-weight: normal; font-weight: normal;
&:hover { &:hover {
color: var(--Text-sas-20); color: var(--SAS-Gray-20);
text-decoration: none; text-decoration: none;
} }
} }
@@ -70,7 +70,7 @@
position: fixed; position: fixed;
top: calc(var(--Space-x2) + var(--sitewide-alert-height)); top: calc(var(--Space-x2) + var(--sitewide-alert-height));
right: var(--Space-x15); right: var(--Space-x15);
background-color: var(--TEMP-sas-default); background-color: var(--SAS-Default);
border: none; border: none;
padding: var(--Space-x05); padding: var(--Space-x05);
color: white; color: white;
@@ -80,7 +80,7 @@
&:hover, &:hover,
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--TEMP-sas-default); background-color: var(--SAS-Default);
} }
.bar, .bar,

2
apps/partner-sas/components/Menu/menu.module.css
View File

@@ -1,5 +1,5 @@
.container { .container {
background-color: var(--TEMP-sas-default); background-color: var(--SAS-Default);
color: white; color: white;
display: flex; display: flex;
align-items: center; align-items: center;

2
apps/partner-sas/components/PoweredByScandic/poweredByScandic.module.css
View File

@@ -2,7 +2,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: var(--TEMP-sas-20); color: var(--SAS-20);
} }
.logo { .logo {

76
apps/partner-sas/globals.css
View File

@@ -38,12 +38,6 @@
--modal-box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08); --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); --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) { @supports (interpolate-size: allow-keywords) {
interpolate-size: allow-keywords; interpolate-size: allow-keywords;
} }
@@ -66,6 +60,76 @@ body.overflow-hidden {
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 */ /* From Tailwind */
.sr-only { .sr-only {
position: absolute; position: absolute;

8
packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
View File

@@ -13,6 +13,14 @@
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
} }
.header .confirmTitle {
color: var(--Text-Accent-Primary);
}
.header .hotelTitle {
color: var(--Text-Heading);
}
.body { .body {
max-width: 720px; max-width: 720px;
} }

14
packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
View File

@@ -3,7 +3,7 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body" 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 { AddToCalendar } from "../../AddToCalendar"
import { AddToCalendarButton } from "./Actions/AddToCalendarButton" import { AddToCalendarButton } from "./Actions/AddToCalendarButton"
@@ -56,14 +56,16 @@ export function Header({
return ( return (
<header className={styles.header}> <header className={styles.header}>
<hgroup className={styles.hgroup}> <hgroup className={styles.hgroup}>
<Title as="h2" color="red" textTransform="uppercase" type="h2"> <Typography variant={"Title/md"}>
<h2 className={styles.confirmTitle}>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Booking confirmation", defaultMessage: "Booking confirmation",
})} })}
</Title> </h2>
<Title as="h2" color="burgundy" textTransform="uppercase" type="h1"> </Typography>
{hotel.name} <Typography variant={"Title/md"}>
</Title> <h2 className={styles.hotelTitle}>{hotel.name}</h2>
</Typography>
</hgroup> </hgroup>
<Body className={styles.body}>{text}</Body> <Body className={styles.body}>{text}</Body>
<div className={styles.actions}> <div className={styles.actions}>

30
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
View File

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

7
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
View File

@@ -10,6 +10,7 @@ import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
import { GuestsRoom } from "./GuestsRoom" import { GuestsRoom } from "./GuestsRoom"
import styles from "./guests-rooms-picker.module.css" import styles from "./guests-rooms-picker.module.css"
@@ -29,6 +30,7 @@ export default function GuestsRoomsPickerDialog({
onClose, onClose,
}: GuestsRoomsPickerDialogProps) { }: GuestsRoomsPickerDialogProps) {
const intl = useIntl() const intl = useIntl()
const config = useBookingFlowConfig()
const { getFieldState, trigger, setValue, getValues } = const { getFieldState, trigger, setValue, getValues } =
useFormContext<BookingWidgetSchema>() useFormContext<BookingWidgetSchema>()
const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" }) const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
@@ -40,7 +42,12 @@ export default function GuestsRoomsPickerDialog({
}) })
// Disable add room if booking code is either voucher or corporate cheque, or reward night is enabled // Disable add room if booking code is either voucher or corporate cheque, or reward night is enabled
const addRoomDisabledTextForSpecialRate = getValues(SEARCH_TYPE_REDEMPTION) const addRoomDisabledTextForSpecialRate = getValues(SEARCH_TYPE_REDEMPTION)
? config.variant === "partner-sas"
? intl.formatMessage({ ? intl.formatMessage({
defaultMessage:
"Multi-room booking is not available with EuroBonus points.",
})
: intl.formatMessage({
defaultMessage: defaultMessage:
"Multi-room booking is not available with reward night.", "Multi-room booking is not available with reward night.",
}) })

1
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
View File

@@ -90,7 +90,6 @@
} }
.roomActionsButton { .roomActionsButton {
margin-left: auto;
color: var(--Base-Text-Accent); color: var(--Base-Text-Accent);
} }

5
packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css
View File

@@ -8,6 +8,11 @@
gap: var(--Space-x3); gap: var(--Space-x3);
} }
.container .filterByTitle {
font-weight: 500;
color: var(--Text-Heading);
}
.facilities { .facilities {
padding-bottom: var(--Space-x3); padding-bottom: var(--Space-x3);
} }

7
packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx
View File

@@ -2,7 +2,6 @@ import { useSearchParams } from "next/navigation"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
import { import {
@@ -116,11 +115,13 @@ export default function FilterContent({
return ( return (
<aside className={`${styles.container} ${className}`}> <aside className={`${styles.container} ${className}`}>
<div> <div>
<Title as="h4"> <Typography variant={"Title/xs"} className={styles.filterByTitle}>
<h4>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Filter by", defaultMessage: "Filter by",
})} })}
</Title> </h4>
</Typography>
<div className={styles.facilities}> <div className={styles.facilities}>
<Typography variant="Title/Subtitle/md"> <Typography variant="Title/Subtitle/md">
<p> <p>