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 || []
`}</Script>
</head>
<body className="scandic">
<body className="scandic partner-sas">
<div className="root">
<SessionProvider basePath="/api/web/auth">
<ClientIntlProvider

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

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

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

@@ -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 {

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

@@ -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;
}
}

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

@@ -7,7 +7,7 @@
.mobileMenu .avatar {
background-color: white;
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 {
color: var(--Text-sas-20);
color: var(--SAS-Gray-20);
}
@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 {
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,

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

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

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

@@ -2,7 +2,7 @@
display: flex;
align-items: center;
gap: 8px;
color: var(--TEMP-sas-20);
color: var(--SAS-20);
}
.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);
--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;