fix(BOOK-661): Updated themes and correct variables for campaign hero

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/CampaignPage/Hero/hero.module.css

@@ -27,7 +27,7 @@
   gap: var(--Space-x1);
 }
 
-.peach {
+.theme-accent {
   .content {
     background-color: var(--Surface-Brand-Accent-Default);
   }
@@ -39,16 +39,13 @@
   }
 
   .text,
-  .campaignText {
-    color: var(--Text-Brand-OnPrimary-1-Default);
-  }
-
+  .campaignText,
   .benefitList > li {
-    color: var(--Surface-Brand-Primary-1-OnSurface-Accent-Secondary);
+    color: var(--Text-Brand-OnAccent-Default);
   }
 }
 
-.burgundy {
+.theme-primary-3 {
   .content {
     background-color: var(--Surface-Brand-Primary-3-Default);
   }

apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx

@@ -101,7 +101,7 @@ export default async function CampaignHero({
         ) : null}
         <Divider
           color={
-            theme === "Peach"
+            theme === "Accent"
               ? "Border/Divider/Brand/OnAccent/Default"
               : "Border/Divider/Brand/OnPrimary 3/Default"
           }

apps/scandic-web/components/ContentType/CampaignPage/Hero/utils.ts

@@ -14,36 +14,24 @@ export function getButtonColor(
   heroTheme: VariantProps<typeof campaignHeroVariants>["theme"],
   hotelTheme: Theme | null = Theme.scandic
 ): ButtonVariants["color"] {
-  let buttonColor: ButtonVariants["color"] = "Inverted"
+  let buttonColor: ButtonVariants["color"] = "Primary"
 
   switch (hotelTheme) {
     case Theme.scandic:
-      if (heroTheme === "Peach") {
-        buttonColor = "Primary"
-      }
-      break
-    case Theme.scandicGo:
-      buttonColor = "Primary"
-      break
-    case Theme.grandHotel:
-      buttonColor = "Primary"
-      break
     case Theme.hotelNorge:
-      if (heroTheme === "Peach") {
-        buttonColor = "Primary"
-      }
-      break
     case Theme.theDock:
-      if (heroTheme === "Peach") {
-        buttonColor = "Primary"
+      if (heroTheme === "Primary 3") {
+        buttonColor = "Inverted"
       }
       break
+    case Theme.marski:
     case Theme.downtownCamper:
     case Theme.haymarket:
-    case Theme.marski:
-    case Theme.bassinSeven:
-      buttonColor = "Primary"
+      buttonColor = "Inverted"
       break
+    case Theme.bassinSeven:
+    case Theme.grandHotel:
+    case Theme.scandicGo:
     default:
       break
   }

apps/scandic-web/components/ContentType/CampaignPage/Hero/variants.ts

@@ -5,12 +5,12 @@ import styles from "./hero.module.css"
 const config = {
   variants: {
     theme: {
-      Peach: styles.peach,
-      Burgundy: styles.burgundy,
+      Accent: styles["theme-accent"],
+      "Primary 3": styles["theme-primary-3"],
     },
   },
   defaultVariants: {
-    theme: "Burgundy",
+    theme: "Primary 3",
   },
 } as const