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

Merged in feat/update-background-color (pull request #258)

Browse Source 
Feat(WEB-344): Update background color

Approved-by: Arvid Norlin
This commit is contained in:
Matilda Landström
2024-06-19 15:52:54 +00:00
committed by Michael Zetterberg
parent 53278ece75 deadb003df
commit 8e176d3a06
31 changed files with 92 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/Icons/icon.module.css
View File

@@ -17,6 +17,11 @@
fill: var(--UI-Grey-80); fill: var(--UI-Grey-80);
} }
.green,
.green * {
fill: var(--Scandic-Green-50);
}
.pale, .pale,
.pale * { .pale * {
fill: var(--Scandic-Brand-Pale-Peach); fill: var(--Scandic-Brand-Pale-Peach);

1
components/Icons/variants.ts
View File

@@ -12,6 +12,7 @@ const config = {
peach80: styles.peach80, peach80: styles.peach80,
primaryLightOnSurfaceAccent: styles.plosa, primaryLightOnSurfaceAccent: styles.plosa,
red: styles.red, red: styles.red,
green: styles.green,
}, },
}, },
defaultVariants: { defaultVariants: {

2
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
View File

@@ -1,5 +1,5 @@
.benefitCard { .benefitCard {
background-color: var(--Main-Grey-White); background-color: var(--Scandic-Opacity-White-100);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
color: var(--Main-Brand-Burgundy); color: var(--Main-Brand-Burgundy);

35
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
View File

@@ -7,43 +7,8 @@
padding-top: 0; padding-top: 0;
} }
.firstColumn {
background-color: var(--Main-Brand-PalePeach);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%;
z-index: 1;
}
.secondColumn {
background-color: var(--Base-Background-Normal);
position: absolute;
position: absolute;
top: 0;
bottom: 0;
margin-bottom: calc(var(--Spacing-x2) * -1);
left: 50%;
right: 0;
z-index: 1;
border-top-left-radius: var(--Corner-radius-Medium);
}
@media screen and (min-width: 950px) { @media screen and (min-width: 950px) {
.benefitCardWrapper { .benefitCardWrapper {
grid-column: 1/4; grid-column: 1/4;
} }
.firstColumn {
width: calc((100%) / 3);
right: calc(100% / 3 * 2);
margin-left: 0;
}
.secondColumn {
width: calc(100% / 3);
left: calc(100% / 3);
right: calc(100% / 3);
}
} }

2
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
View File

@@ -24,8 +24,6 @@ export default function BenefitList({ levels }: BenefitListProps) {
const levelBenefits = levels.map((level) => level.benefits[idx]) const levelBenefits = levels.map((level) => level.benefits[idx])
return ( return (
<div key={benefit.name} className={styles.benefitCardWrapper}> <div key={benefit.name} className={styles.benefitCardWrapper}>
<div className={styles.firstColumn} />
<div className={styles.secondColumn} />
<BenefitCard <BenefitCard
title={benefit.name} title={benefit.name}
description={benefit.description} description={benefit.description}

14
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
View File

@@ -2,18 +2,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--Spacing-x-one-and-half); gap: var(--Spacing-x-half);
padding: 0 var(--Spacing-x4) 0 var(--Spacing-x4);
text-wrap: balance;
} }
.benefitValue { .benefitValue {
background-color: var(--Main-Brand-Burgundy); font-size: var(--typography-Body-Bold-fontSize);
border-radius: var(--Corner-radius-xLarge); font-weight: var(--typography-Body-Bold-fontWeight);
color: var(--Base-Surface-Primary-Hover-alt, #fff);
font-size: var(--typography-Footnote-Regular-fontSize);
padding: var(--Spacing-x-half) var(--Spacing-x1);
} }
.benefitValueDetails { .benefitValueDetails {
font-size: var(--typography-Caption-Regular-fontSize); font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center; text-align: center;
color: var(--UI-Grey-80);
} }

4
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
View File

@@ -8,10 +8,10 @@ import { BenefitValueProps } from "@/types/components/loyalty/blocks"
export default function BenefitValue({ benefit }: BenefitValueProps) { export default function BenefitValue({ benefit }: BenefitValueProps) {
if (!benefit.unlocked) { if (!benefit.unlocked) {
return <Minus /> return <Minus color="var(--UI-Grey-40)" />
} }
if (!benefit.value) { if (!benefit.value) {
return <CheckCircle height={32} width={32} /> return <CheckCircle height={32} width={32} color="green" />
} }
return ( return (
<div className={styles.benefitValueContainer}> <div className={styles.benefitValueContainer}>

2
components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
View File

@@ -16,7 +16,7 @@ import {
export default function LargeTable({ levels }: LargeTableProps) { export default function LargeTable({ levels }: LargeTableProps) {
return ( return (
<table className={styles.table}> <table className={styles.table}>
<thead className={styles.thead}> <thead>
<tr className={styles.iconRow}> <tr className={styles.iconRow}>
<th className={styles.verticalTableHeader} /> <th className={styles.verticalTableHeader} />

26
components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
View File

@@ -1,15 +1,11 @@
.table { .table {
border: 1px solid var(--Base-Border-Subtle); border: none;
border-collapse: collapse; border-collapse: collapse;
color: var(--Theme-Primary-Dark-Surface-Normal); background-color: var(--Scandic-Opacity-White-100);
} border-radius: var(--Corner-radius-Medium);
.thead {
background-color: var(--Base-Surface-Secondary-Normal);
} }
.iconRow { .iconRow {
background-color: var(--Base-Surface-Secondary-Normal);
border-bottom: none; border-bottom: none;
position: sticky; position: sticky;
top: 0; top: 0;
@@ -21,14 +17,10 @@
} }
.iconTh { .iconTh {
border: 1px solid var(--Base-Border-Subtle); padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x2);
border-bottom: none;
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half);
} }
.summaryTh { .summaryTh {
border: 1px solid var(--Base-Border-Subtle);
border-top: none;
font-size: var(--typography-Caption-Regular-fontSize); font-size: var(--typography-Caption-Regular-fontSize);
font-weight: 400; font-weight: 400;
padding: 0 var(--Spacing-x3) var(--Spacing-x2); padding: 0 var(--Spacing-x3) var(--Spacing-x2);
@@ -36,17 +28,15 @@
} }
.td { .td {
border: 1px solid var(--Base-Border-Subtle); border-top: 1px solid var(--Scandic-Beige-20);
border-bottom: 1px solid var(--Scandic-Beige-20);
font-size: var(--typography-Footnote-Regular-fontSize); font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center; text-align: center;
} }
.tr:nth-child(odd) {
background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
}
.benefitTh { .benefitTh {
border: 1px solid var(--Base-Border-Subtle); border-top: 1px solid var(--Scandic-Beige-20);
border-bottom: 1px solid var(--Scandic-Beige-20);
padding: var(--Spacing-x3) var(--Spacing-x2); padding: var(--Spacing-x3) var(--Spacing-x2);
font-size: var(--typography-Caption-Regular-fontSize); font-size: var(--typography-Caption-Regular-fontSize);
font-weight: 400; font-weight: 400;

6
components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
View File

@@ -2,13 +2,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--Spacing-x2); gap: var(--Spacing-x3);
} }
.levelRequirements { .levelRequirements {
background-color: var(--Main-Brand-Burgundy);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
color: var(--Scandic-Brand-Pale-Peach); background-color: var(--Scandic-Brand-Pale-Peach);
color: var(--Scandic-Peach-80);
padding: var(--Spacing-x-half) var(--Spacing-x1); padding: var(--Spacing-x-half) var(--Spacing-x1);
} }

8
components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json
View File

@@ -264,7 +264,7 @@
"name": "Friendship boost", "name": "Friendship boost",
"description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.", "description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
"unlocked": true, "unlocked": true,
"value": "25%" "value": "+25%"
}, },
{ {
"name": "Early check-in when available", "name": "Early check-in when available",
@@ -341,7 +341,7 @@
"name": "Friendship boost", "name": "Friendship boost",
"description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.", "description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
"unlocked": true, "unlocked": true,
"value": "25%" "value": "+25%"
}, },
{ {
"name": "Early check-in when available", "name": "Early check-in when available",
@@ -418,7 +418,7 @@
"name": "Friendship boost", "name": "Friendship boost",
"description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.", "description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
"unlocked": true, "unlocked": true,
"value": "50%" "value": "+50%"
}, },
{ {
"name": "Early check-in when available", "name": "Early check-in when available",
@@ -495,7 +495,7 @@
"name": "Friendship boost", "name": "Friendship boost",
"description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.", "description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
"unlocked": true, "unlocked": true,
"value": "50%" "value": "+50%"
}, },
{ {
"name": "Early check-in when available", "name": "Early check-in when available",

4
components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
View File

@@ -1,5 +1,4 @@
.container { .container {
background-color: var(--Main-Brand-PalePeach);
margin-top: calc(var(--Spacing-x2) * -1); margin-top: calc(var(--Spacing-x2) * -1);
margin-left: calc(var(--Spacing-x2) * -1); margin-left: calc(var(--Spacing-x2) * -1);
margin-right: calc(var(--Spacing-x2) * -1); margin-right: calc(var(--Spacing-x2) * -1);
@@ -32,6 +31,7 @@
.columns { .columns {
display: none; display: none;
position: relative; position: relative;
background-color: var(--Scandic-Opacity-White-100);
} }
.mobileColumns { .mobileColumns {
@@ -40,6 +40,7 @@
margin: 0 calc(var(--Spacing-x2) * -1); margin: 0 calc(var(--Spacing-x2) * -1);
padding-top: var(--Spacing-x2); padding-top: var(--Spacing-x2);
position: relative; position: relative;
background-color: var(--Scandic-Opacity-White-100);
} }
.columnHeaderContainer { .columnHeaderContainer {
@@ -65,7 +66,6 @@
} }
.columnHeader:nth-child(2) { .columnHeader:nth-child(2) {
background-color: var(--Base-Background-Normal);
padding-left: var(--Spacing-x1); padding-left: var(--Spacing-x1);
border-top-left-radius: var(--Corner-radius-Medium); border-top-left-radius: var(--Corner-radius-Medium);
} }

2
components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
View File

@@ -4,7 +4,7 @@
.card { .card {
align-items: center; align-items: center;
background-color: var(--Base-Background-Normal); background-color: var(--Scandic-Opacity-White-100);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
display: flex; display: flex;

4
components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
View File

@@ -33,12 +33,12 @@ export default async function NextLevel({
} }
return ( return (
<section> <section>
<Body color="pale" textAlign="center"> <Body color="white" textAlign="center">
{formatMessage({ id: "Next level" })}: {formatMessage({ id: "Next level" })}:
</Body> </Body>
<Title <Title
className={styles.nextLevel} className={styles.nextLevel}
color="pale" color="white"
level="h3" level="h3"
textAlign="center" textAlign="center"
> >

8
components/MyPages/Blocks/Overview/Stats/Points/index.tsx
View File

@@ -13,19 +13,19 @@ export default async function Points({ user }: UserProps) {
return ( return (
<section className={styles.points}> <section className={styles.points}>
<article> <article>
<Body color="pale" textAlign="center"> <Body color="white" textAlign="center">
{formatMessage({ id: "Total Points" })} {formatMessage({ id: "Total Points" })}
</Body> </Body>
<Title color="pale" level="h2" textAlign="center"> <Title color="white" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"} {membership ? membership.currentPoints : "N/A"}
</Title> </Title>
</article> </article>
<article> <article>
<Body color="pale" textAlign="center"> <Body color="white" textAlign="center">
{formatMessage({ id: "Points until next level" })} {formatMessage({ id: "Points until next level" })}
{/* TODO */} {/* TODO */}
</Body> </Body>
<Title color="pale" level="h2" textAlign="center"> <Title color="white" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"} {membership ? membership.currentPoints : "N/A"}
</Title> </Title>
</article> </article>

2
components/MyPages/Blocks/Overview/Stats/index.tsx
View File

@@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) {
return ( return (
<section className={styles.stats}> <section className={styles.stats}>
<Points user={user} /> <Points user={user} />
<Divider variant="default" color="peach" /> <Divider variant="default" color="white" />
<NextLevel user={user} lang={lang} /> <NextLevel user={user} lang={lang} />
</section> </section>
) )

2
components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
View File

@@ -1,5 +1,5 @@
.card { .card {
background-color: var(--Main-Grey-10); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-xLarge); border-radius: var(--Corner-radius-xLarge);
color: var(--Main-Brand-Burgundy); color: var(--Main-Brand-Burgundy);
display: flex; display: flex;

9
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css
View File

@@ -9,9 +9,10 @@
} }
.thead { .thead {
background-color: var(--Main-Grey-10); background-color: var(--Scandic-Brand-Pale-Peach);
border-left: 1px solid var(--Main-Grey-10); border-left: 1px solid var(--Scandic-Brand-Pale-Peach);
border-right: 1px solid var(--Main-Grey-10); border-right: 1px solid var(--Scandic-Brand-Pale-Peach);
color: var(--Main-Brand-Burgundy);
} }
.th { .th {
@@ -23,7 +24,7 @@
width: 100%; width: 100%;
padding: 24px; padding: 24px;
text-align: center; text-align: center;
border: 1px solid var(--Main-Grey-10); border: 1px solid var(--Scandic-Brand-Pale-Peach);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {

2
components/MyPages/Blocks/Shortcuts/shortcuts.module.css
View File

@@ -1,6 +1,6 @@
.links { .links {
display: grid; display: grid;
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
} }

11
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -1,17 +1,18 @@
.container { .container {
align-items: center; align-items: center;
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
display: flex; display: flex;
flex-direction: column;
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
flex-direction: column;
justify-content: center; justify-content: center;
margin-bottom: var(--Spacing-x1); margin-bottom: var(--Spacing-x-half);
min-height: 250px; min-height: 250px;
padding: var(--Spacing-x0) var(--Spacing-x3); padding: var(--Spacing-x0) var(--Spacing-x3);
} }
.grayTitle { .burgundyTitle {
color: var(--UI-Grey-60); color: var(--Scandic-Brand-Burgundy);
display: block; display: block;
text-align: center;
} }

4
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -9,9 +9,9 @@ export default async function EmptyUpcomingStaysBlock() {
const { formatMessage } = await getIntl() const { formatMessage } = await getIntl()
return ( return (
<section className={styles.container}> <section className={styles.container}>
<Title as="h5" level="h3"> <Title as="h5" level="h3" color="red">
{formatMessage({ id: "You have no upcoming stays." })} {formatMessage({ id: "You have no upcoming stays." })}
<span className={styles.grayTitle}> <span className={styles.burgundyTitle}>
{" "} {" "}
{formatMessage({ id: "Where should you go next?" })} {formatMessage({ id: "Where should you go next?" })}
</span> </span>

7
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -1,6 +1,6 @@
.container { .container {
align-items: center; align-items: center;
background-color: var(--some-grey-color, #f2f2f2); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
display: flex; display: flex;
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
@@ -11,7 +11,8 @@
padding: var(--Spacing-x0) var(--Spacing-x3); padding: var(--Spacing-x0) var(--Spacing-x3);
} }
.grayTitle { .burgundyTitle {
color: var(--UI-Grey-60); color: var(--Scandic-Brand-Burgundy);
display: block; display: block;
text-align: center;
} }

6
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -14,11 +14,11 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
const { formatMessage } = await getIntl() const { formatMessage } = await getIntl()
return ( return (
<section className={styles.container}> <section className={styles.container}>
<Title as="h5" level="h3"> <Title as="h5" level="h3" color="red">
{formatMessage({ id: "You have no upcoming stays." })} {formatMessage({ id: "You have no upcoming stays." })}
<span className={styles.grayTitle}> <span className={styles.burgundyTitle}>
{" "} {" "}
{formatMessage({ id: "Where should you go next?" })} {formatMessage({ id: "Where will you go next?" })}
</span> </span>
</Title> </Title>
<Button asChild intent="primary" type="button"> <Button asChild intent="primary" type="button">

6
components/MyPages/Sidebar/index.tsx
View File

@@ -21,10 +21,12 @@ export default async function Sidebar({ lang }: LangParams) {
return ( return (
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<nav className={styles.nav}> <nav className={styles.nav}>
<Title level="h5">{navigation.title}</Title> <Title textTransform="regular" level="h5">
{navigation.title}
</Title>
{navigation.menuItems.map((menuItem, idx) => ( {navigation.menuItems.map((menuItem, idx) => (
<Fragment key={`${menuItem.display_sign_out_link}-${idx}`}> <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
<Divider color="peach" /> <Divider color="beige" />
<ul className={styles.list}> <ul className={styles.list}>
{menuItem.links.map((link) => ( {menuItem.links.map((link) => (
<li key={link.uid}> <li key={link.uid}>

8
components/TempDesignSystem/Divider/divider.module.css
View File

@@ -17,6 +17,14 @@
border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider); border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider);
} }
.beige {
border-bottom-color: var(--Scandic-Beige-20);
}
.white {
border-bottom-color: var(--Scandic-Opacity-White-100);
}
.subtle { .subtle {
border-bottom-color: var(--Base-Border-Subtle); border-bottom-color: var(--Base-Border-Subtle);
} }

2
components/TempDesignSystem/Divider/variants.ts
View File

@@ -7,6 +7,8 @@ export const dividerVariants = cva(styles.divider, {
color: { color: {
burgundy: styles.burgundy, burgundy: styles.burgundy,
peach: styles.peach, peach: styles.peach,
beige: styles.beige,
white: styles.white,
subtle: styles.subtle, subtle: styles.subtle,
}, },
opacity: { opacity: {

2
components/TempDesignSystem/Link/link.module.css
View File

@@ -83,7 +83,7 @@
} }
.activeSidebar { .activeSidebar {
background-color: var(--Scandic-Brand-Pale-Peach); background-color: var(--Scandic-Peach-20);
} }
.black { .black {

4
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -57,3 +57,7 @@
.red { .red {
color: var(--Scandic-Brand-Scandic-Red); color: var(--Scandic-Brand-Scandic-Red);
} }
.white {
color: var(--Scandic-Opacity-White-100);
}

1
components/TempDesignSystem/Text/Body/variants.ts
View File

@@ -9,6 +9,7 @@ const config = {
burgundy: styles.burgundy, burgundy: styles.burgundy,
pale: styles.pale, pale: styles.pale,
red: styles.red, red: styles.red,
white: styles.white,
}, },
textAlign: { textAlign: {
center: styles.textAlignCenter, center: styles.textAlignCenter,

4
components/TempDesignSystem/Text/Title/title.module.css
View File

@@ -107,3 +107,7 @@
.red { .red {
color: var(--Scandic-Brand-Scandic-Red); color: var(--Scandic-Brand-Scandic-Red);
} }
.white {
color: var(--Scandic-Opacity-White-100);
}

1
components/TempDesignSystem/Text/Title/variants.ts
View File

@@ -10,6 +10,7 @@ const config = {
pale: styles.pale, pale: styles.pale,
peach80: styles.peach80, peach80: styles.peach80,
red: styles.red, red: styles.red,
white: styles.white,
}, },
textAlign: { textAlign: {
center: styles.center, center: styles.center,