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

Feat(WEB-344): Update background color Approved-by: Arvid Norlin
2024-06-19 15:52:54 +00:00
parent 53278ece75 deadb003df
commit 8e176d3a06
31 changed files with 92 additions and 108 deletions
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -17,6 +17,11 @@
  fill: var(--UI-Grey-80);
 }

+.green,
+.green * {
+  fill: var(--Scandic-Green-50);
+}
+
 .pale,
 .pale * {
  fill: var(--Scandic-Brand-Pale-Peach);
--- a/components/Icons/variants.ts
+++ b/components/Icons/variants.ts
@@ -12,6 +12,7 @@ const config = {
      peach80: styles.peach80,
      primaryLightOnSurfaceAccent: styles.plosa,
      red: styles.red,
+      green: styles.green,
    },
  },
  defaultVariants: {
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
@@ -1,5 +1,5 @@
 .benefitCard {
-  background-color: var(--Main-Grey-White);
+  background-color: var(--Scandic-Opacity-White-100);
  border: 1px solid var(--Base-Border-Subtle);
  border-radius: var(--Corner-radius-Small);
  color: var(--Main-Brand-Burgundy);
@@ -56,4 +56,4 @@
  .benefitComparison {
    grid-template-columns: 1fr 1fr 1fr;
  }
-}
+}
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
@@ -7,43 +7,8 @@
  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) {
  .benefitCardWrapper {
    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);
-  }
 }
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx
@@ -24,8 +24,6 @@ export default function BenefitList({ levels }: BenefitListProps) {
      const levelBenefits = levels.map((level) => level.benefits[idx])
      return (
        <div key={benefit.name} className={styles.benefitCardWrapper}>
-          <div className={styles.firstColumn} />
-          <div className={styles.secondColumn} />
          <BenefitCard
            title={benefit.name}
            description={benefit.description}
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
@@ -2,18 +2,18 @@
  display: flex;
  flex-direction: column;
  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 {
-  background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-xLarge);
-  color: var(--Base-Surface-Primary-Hover-alt, #fff);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
 }

 .benefitValueDetails {
-  font-size: var(--typography-Caption-Regular-fontSize);
+  font-size: var(--typography-Footnote-Regular-fontSize);
  text-align: center;
+  color: var(--UI-Grey-80);
 }
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
@@ -8,10 +8,10 @@ import { BenefitValueProps } from "@/types/components/loyalty/blocks"

 export default function BenefitValue({ benefit }: BenefitValueProps) {
  if (!benefit.unlocked) {
-    return <Minus />
+    return <Minus color="var(--UI-Grey-40)" />
  }
  if (!benefit.value) {
-    return <CheckCircle height={32} width={32} />
+    return <CheckCircle height={32} width={32} color="green" />
  }
  return (
    <div className={styles.benefitValueContainer}>
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
@@ -16,7 +16,7 @@ import {
 export default function LargeTable({ levels }: LargeTableProps) {
  return (
    <table className={styles.table}>
-      <thead className={styles.thead}>
+      <thead>
        <tr className={styles.iconRow}>
          <th className={styles.verticalTableHeader} />

--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
@@ -1,15 +1,11 @@
 .table {
-  border: 1px solid var(--Base-Border-Subtle);
+  border: none;
  border-collapse: collapse;
-  color: var(--Theme-Primary-Dark-Surface-Normal);
-}
-
-.thead {
-  background-color: var(--Base-Surface-Secondary-Normal);
+  background-color: var(--Scandic-Opacity-White-100);
+  border-radius: var(--Corner-radius-Medium);
 }

 .iconRow {
-  background-color: var(--Base-Surface-Secondary-Normal);
  border-bottom: none;
  position: sticky;
  top: 0;
@@ -21,14 +17,10 @@
 }

 .iconTh {
-  border: 1px solid var(--Base-Border-Subtle);
-  border-bottom: none;
-  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x2);
 }

 .summaryTh {
-  border: 1px solid var(--Base-Border-Subtle);
-  border-top: none;
  font-size: var(--typography-Caption-Regular-fontSize);
  font-weight: 400;
  padding: 0 var(--Spacing-x3) var(--Spacing-x2);
@@ -36,17 +28,15 @@
 }

 .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);
  text-align: center;
 }

-.tr:nth-child(odd) {
-  background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
-}
-
 .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);
  font-size: var(--typography-Caption-Regular-fontSize);
  font-weight: 400;
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
@@ -2,13 +2,13 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x3);
 }

 .levelRequirements {
-  background-color: var(--Main-Brand-Burgundy);
  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);
 }

@@ -27,4 +27,4 @@
  .levelSummaryText {
    font-size: var(--typography-Caption-Regular-fontSize);
  }
-}
+}
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json
@@ -264,7 +264,7 @@
          "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>.",
          "unlocked": true,
-          "value": "25%"
+          "value": "+25%"
        },
        {
          "name": "Early check-in when available",
@@ -341,7 +341,7 @@
          "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>.",
          "unlocked": true,
-          "value": "25%"
+          "value": "+25%"
        },
        {
          "name": "Early check-in when available",
@@ -418,7 +418,7 @@
          "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>.",
          "unlocked": true,
-          "value": "50%"
+          "value": "+50%"
        },
        {
          "name": "Early check-in when available",
@@ -495,7 +495,7 @@
          "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>.",
          "unlocked": true,
-          "value": "50%"
+          "value": "+50%"
        },
        {
          "name": "Early check-in when available",
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
@@ -1,5 +1,4 @@
 .container {
-  background-color: var(--Main-Brand-PalePeach);
  margin-top: calc(var(--Spacing-x2) * -1);
  margin-left: calc(var(--Spacing-x2) * -1);
  margin-right: calc(var(--Spacing-x2) * -1);
@@ -32,6 +31,7 @@
 .columns {
  display: none;
  position: relative;
+  background-color: var(--Scandic-Opacity-White-100);
 }

 .mobileColumns {
@@ -40,6 +40,7 @@
  margin: 0 calc(var(--Spacing-x2) * -1);
  padding-top: var(--Spacing-x2);
  position: relative;
+  background-color: var(--Scandic-Opacity-White-100);
 }

 .columnHeaderContainer {
@@ -65,7 +66,6 @@
 }

 .columnHeader:nth-child(2) {
-  background-color: var(--Base-Background-Normal);
  padding-left: var(--Spacing-x1);
  border-top-left-radius: var(--Corner-radius-Medium);
 }
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
@@ -4,7 +4,7 @@

 .card {
  align-items: center;
-  background-color: var(--Base-Background-Normal);
+  background-color: var(--Scandic-Opacity-White-100);
  border: 1px solid var(--Base-Border-Subtle);
  border-radius: var(--Corner-radius-Medium);
  display: flex;
--- a/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
@@ -33,12 +33,12 @@ export default async function NextLevel({
  }
  return (
    <section>
-      <Body color="pale" textAlign="center">
+      <Body color="white" textAlign="center">
        {formatMessage({ id: "Next level" })}:
      </Body>
      <Title
        className={styles.nextLevel}
-        color="pale"
+        color="white"
        level="h3"
        textAlign="center"
      >
--- a/components/MyPages/Blocks/Overview/Stats/Points/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/Points/index.tsx
@@ -13,19 +13,19 @@ export default async function Points({ user }: UserProps) {
  return (
    <section className={styles.points}>
      <article>
-        <Body color="pale" textAlign="center">
+        <Body color="white" textAlign="center">
          {formatMessage({ id: "Total Points" })}
        </Body>
-        <Title color="pale" level="h2" textAlign="center">
+        <Title color="white" level="h2" textAlign="center">
          {membership ? membership.currentPoints : "N/A"}
        </Title>
      </article>
      <article>
-        <Body color="pale" textAlign="center">
+        <Body color="white" textAlign="center">
          {formatMessage({ id: "Points until next level" })}
          {/* TODO */}
        </Body>
-        <Title color="pale" level="h2" textAlign="center">
+        <Title color="white" level="h2" textAlign="center">
          {membership ? membership.currentPoints : "N/A"}
        </Title>
      </article>
--- a/components/MyPages/Blocks/Overview/Stats/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/index.tsx
@@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) {
  return (
    <section className={styles.stats}>
      <Points user={user} />
-      <Divider variant="default" color="peach" />
+      <Divider variant="default" color="white" />
      <NextLevel user={user} lang={lang} />
    </section>
  )
--- a/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
+++ b/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
@@ -1,5 +1,5 @@
 .card {
-  background-color: var(--Main-Grey-10);
+  background-color: var(--Scandic-Brand-Pale-Peach);
  border-radius: var(--Corner-radius-xLarge);
  color: var(--Main-Brand-Burgundy);
  display: flex;
--- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css
@@ -9,9 +9,10 @@
 }

 .thead {
-  background-color: var(--Main-Grey-10);
-  border-left: 1px solid var(--Main-Grey-10);
-  border-right: 1px solid var(--Main-Grey-10);
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-left: 1px solid var(--Scandic-Brand-Pale-Peach);
+  border-right: 1px solid var(--Scandic-Brand-Pale-Peach);
+  color: var(--Main-Brand-Burgundy);
 }

 .th {
@@ -23,7 +24,7 @@
  width: 100%;
  padding: 24px;
  text-align: center;
-  border: 1px solid var(--Main-Grey-10);
+  border: 1px solid var(--Scandic-Brand-Pale-Peach);
 }

@media screen and (min-width: 768px) {
--- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css
+++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css
@@ -1,6 +1,6 @@
 .links {
  display: grid;
-  background-color: var(--Scandic-Brand-Warm-White);
+  background-color: var(--Scandic-Brand-Pale-Peach);
  border-radius: var(--Corner-radius-Medium);
  border: 1px solid var(--Base-Border-Subtle);
 }
--- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
+++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
@@ -1,17 +1,18 @@
 .container {
  align-items: center;
-  background-color: var(--Scandic-Brand-Warm-White);
+  background-color: var(--Scandic-Brand-Pale-Peach);
  border-radius: var(--Corner-radius-Medium);
  display: flex;
-  flex-direction: column;
  gap: var(--Spacing-x3);
+  flex-direction: column;
  justify-content: center;
-  margin-bottom: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x-half);
  min-height: 250px;
  padding: var(--Spacing-x0) var(--Spacing-x3);
 }

-.grayTitle {
-  color: var(--UI-Grey-60);
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
  display: block;
+  text-align: center;
 }
--- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
+++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
@@ -9,9 +9,9 @@ export default async function EmptyUpcomingStaysBlock() {
  const { formatMessage } = await getIntl()
  return (
    <section className={styles.container}>
-      <Title as="h5" level="h3">
+      <Title as="h5" level="h3" color="red">
        {formatMessage({ id: "You have no upcoming stays." })}
-        <span className={styles.grayTitle}>
+        <span className={styles.burgundyTitle}>
          {" "}
          {formatMessage({ id: "Where should you go next?" })}
        </span>
--- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
+++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
@@ -1,6 +1,6 @@
 .container {
  align-items: center;
-  background-color: var(--some-grey-color, #f2f2f2);
+  background-color: var(--Scandic-Brand-Pale-Peach);
  border-radius: var(--Corner-radius-Medium);
  display: flex;
  gap: var(--Spacing-x3);
@@ -11,7 +11,8 @@
  padding: var(--Spacing-x0) var(--Spacing-x3);
 }

-.grayTitle {
-  color: var(--UI-Grey-60);
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
  display: block;
+  text-align: center;
 }
--- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
@@ -14,11 +14,11 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
  const { formatMessage } = await getIntl()
  return (
    <section className={styles.container}>
-      <Title as="h5" level="h3">
+      <Title as="h5" level="h3" color="red">
        {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>
      </Title>
      <Button asChild intent="primary" type="button">
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -21,10 +21,12 @@ export default async function Sidebar({ lang }: LangParams) {
  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
-        <Title level="h5">{navigation.title}</Title>
+        <Title textTransform="regular" level="h5">
+          {navigation.title}
+        </Title>
        {navigation.menuItems.map((menuItem, idx) => (
          <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
-            <Divider color="peach" />
+            <Divider color="beige" />
            <ul className={styles.list}>
              {menuItem.links.map((link) => (
                <li key={link.uid}>
--- a/components/TempDesignSystem/Divider/divider.module.css
+++ b/components/TempDesignSystem/Divider/divider.module.css
@@ -17,6 +17,14 @@
  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 {
  border-bottom-color: var(--Base-Border-Subtle);
 }
--- a/components/TempDesignSystem/Divider/variants.ts
+++ b/components/TempDesignSystem/Divider/variants.ts
@@ -7,6 +7,8 @@ export const dividerVariants = cva(styles.divider, {
    color: {
      burgundy: styles.burgundy,
      peach: styles.peach,
+      beige: styles.beige,
+      white: styles.white,
      subtle: styles.subtle,
    },
    opacity: {
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -83,7 +83,7 @@
 }

 .activeSidebar {
-  background-color: var(--Scandic-Brand-Pale-Peach);
+  background-color: var(--Scandic-Peach-20);
 }

 .black {
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -56,4 +56,8 @@

 .red {
  color: var(--Scandic-Brand-Scandic-Red);
-}
+}
+
+.white {
+  color: var(--Scandic-Opacity-White-100);
+}
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -9,6 +9,7 @@ const config = {
      burgundy: styles.burgundy,
      pale: styles.pale,
      red: styles.red,
+      white: styles.white,
    },
    textAlign: {
      center: styles.textAlignCenter,
--- a/components/TempDesignSystem/Text/Title/title.module.css
+++ b/components/TempDesignSystem/Text/Title/title.module.css
@@ -107,3 +107,7 @@
 .red {
  color: var(--Scandic-Brand-Scandic-Red);
 }
+
+.white {
+  color: var(--Scandic-Opacity-White-100);
+}
--- a/components/TempDesignSystem/Text/Title/variants.ts
+++ b/components/TempDesignSystem/Text/Title/variants.ts
@@ -10,6 +10,7 @@ const config = {
      pale: styles.pale,
      peach80: styles.peach80,
      red: styles.red,
+      white: styles.white,
    },
    textAlign: {
      center: styles.center,