feat: implement new design for button

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -1,7 +1,7 @@
 .layout {
   --header-height: 4.5rem;
 
-  background-color: var(--Brand-Coffee-Subtle);
+  background-color: var(--Scandic-Brand-Warm-White);
   display: grid;
   font-family: var(--ff-fira-sans);
   grid-template-rows: var(--header-height) auto 1fr;

app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx

@@ -16,7 +16,6 @@ export default function EditProfile({ params }: PageArgs<LangParams>) {
       <Button
         aria-label="Cancel"
         asChild
-        bgcolor="white"
         form="edit-profile"
         size="small"
         type="reset"
@@ -24,12 +23,10 @@ export default function EditProfile({ params }: PageArgs<LangParams>) {
         <Link href={profile[params.lang]}>{_("Cancel")}</Link>
       </Button>
       <Button
-        bgcolor="quarternary"
         disabled={!isValid || isPending}
         form="edit-profile"
         size="small"
         type="submit"
-        weight="regular"
       >
         {_("Save")}
       </Button>

app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx

@@ -8,7 +8,7 @@ import type { LangParams, PageArgs } from "@/types/params"
 
 export default function ProfileView({ params }: PageArgs<LangParams>) {
   return (
-    <Button asChild bgcolor="quarternary" size="small" weight="regular">
+    <Button asChild size="small">
       <Link href={profileEdit[params.lang]}>{_("Edit")}</Link>
     </Button>
   )

app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css

@@ -1,5 +1,5 @@
 .layout {
   display: grid;
   font-family: var(--ff-fira-sans);
-  background-color: var(--Brand-Coffee-Subtle);
+  background-color: var(--Scandic-Brand-Warm-White);
 }

components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css

@@ -5,7 +5,7 @@
   width: 100%;
   height: 37rem;
   border-radius: 1.6rem;
-  background-color: var(--Base-Fill-Normal);
+  background-color: var(--UI-Grey-10);
   text-align: center;
   margin-right: 1.6rem;
 }

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -27,7 +27,7 @@
   height: 37rem;
   min-width: 32rem;
   padding: 4rem 1rem;
-  background-color: var(--Base-Fill-Normal);
+  background-color: var(--UI-Grey-10);
   border-radius: 1.6rem;
   gap: 1.8rem;
 }

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -29,7 +29,7 @@
   flex-direction: column;
   gap: 10px;
   min-height: 280px;
-  background-color: var(--Base-Fill-Normal);
+  background-color: var(--UI-Grey-10);
   justify-content: center;
   align-items: center;
   padding: 30px;

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -24,7 +24,7 @@ export default async function NextLevelBenefitsBlock({
       <CardGrid variant="twoColumnGrid">
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
-            <Button type="button" intent="secondary" disabled>
+            <Button type="button" disabled>
               <Lock height={16} />
               Level up to unlock
             </Button>

components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx

@@ -13,7 +13,7 @@ export default function ShowMoreButton({
       <Button
         disabled={disabled}
         intent="primary"
-        bgcolor="white"
+        theme="secondaryDark"
         type="button"
         onClick={loadMoreData}
       >

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -17,7 +17,7 @@ export default function EmptyUpcomingStaysBlock() {
           {_("Where should you go next?")}
         </span>
       </Title>
-      <Button intent="primary" bgcolor="quarternary" asChild type="button">
+      <Button intent="primary" asChild type="button">
         <Link className={styles.link} href={"#"} key="getInspired">
           {_("Get inspired")}
         </Link>

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -17,7 +17,7 @@ export default function EmptyUpcomingStaysBlock() {
           {_("Where should you go next?")}
         </span>
       </Title>
-      <Button intent="primary" bgcolor="quarternary" asChild type="button">
+      <Button intent="primary" asChild type="button">
         <Link className={styles.link} href={"#"} key="getInspired">
           {_("Get inspired")}
         </Link>

components/TempDesignSystem/Button/button.module.css

@@ -4,21 +4,43 @@
   cursor: pointer;
   margin: 0;
   padding: 0;
+  text-align: center;
+  font-family: var(--ff-fira-sans);
+  font-weight: 600;
+  line-height: 150%;
+  letter-spacing: 1%;
+}
+
+.primary {
+  color: var(--font-color,);
+  background-color: var(--background-color,);
+}
+
+.primary:hover,
+.primary:active,
+.primary:focus {
+  background-color: var(--hover-background,);
+  color: var(--hover-color,);
+}
+
+.secondary {
+  background-color: transparent;
+  border: 0.1rem solid var(--background-color);
+  color: var(--background-color,);
+}
+
+.secondary:hover,
+.secondary:active,
+.secondary:focus {
+  border: 0.1rem solid var(--hover-color,);
+  color: var(--hover-color);
 }
 
 .default {
   align-items: center;
-  background-color: var(--some-white-color, #fff);
   border-radius: 4rem;
-  color: var(--some-grey-color, #111);
   display: flex;
-  font-family: var(--ff-fira-sans);
-  font-size: 1.8rem;
-  font-weight: 500;
   gap: 1rem;
-  letter-spacing: 1%;
-  line-height: 2.2rem;
-  padding: 0.75rem 1.65rem;
 }
 
 .icon {
@@ -26,125 +48,110 @@
   align-items: baseline;
 }
 
-/* Primary styles */
-.primary {
-  background-color: var(--some-grey-color, #444343);
-  border: 2px solid transparent;
-  outline: 1px solid transparent;
-  border-radius: 46px;
-  color: var(--Main-Grey-00, #fff);
-}
-
-.primary:hover {
-  background: var(--some-grey-color, #444343);
-}
-
-.primary:active,
-.primary:focus {
-  border: var(--some-grey-color, #444343);
-  outline: var(--some-grey-color, #444343);
-}
-
-/* Secondary styles */
-.secondary {
-  border: 1px solid var(--some-grey-color, #444343);
-  background-color: transparent;
-  color: var(--some-grey-color, #444343);
-  border-radius: 46px;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-}
-
-.secondary:hover {
-  border: 1px solid var(--some-grey-color, #444343);
-}
-
-.secondary:active,
-.secondary:focus {
-  border: 1px solid var(--some-grey-color, #444343);
-}
-
 /* Disabled styles */
 .btn:disabled {
-  border: 1px solid var(--some-grey-color, #444343);
+  background-color: var(--disabled-background-color);
-  background-color: transparent;
+  color: var(--disabled-color);
-  color: var(--some-grey-color, #444343);
   cursor: not-allowed;
 }
 
+/* Sizes */
 .small {
-  border-radius: 3rem;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  gap: 0.2rem;
+
   font-size: 1.4rem;
-  height: 2.6rem;
+  height: 4rem;
-  line-height: 1.7rem;
-  padding: 0.8rem 2.2rem;
-}
-
-.average {
-  border-radius: 4.7rem;
-  font-size: 1.4rem;
-  height: 3.2rem;
-  letter-spacing: 1%;
-  line-height: 1.6rem;
-  padding: 0.65rem 1.3rem;
-}
-
-.light {
-  font-weight: 300;
-}
-
-.regular {
-  font-weight: 400;
 }
 
 .medium {
-  font-weight: 500;
+  height: 3rem;
+  padding: 1.2rem var(--Spacing-x2,);
+
+  font-size: 1.6rem;
 }
 
-.semiBold {
+.large {
-  font-weight: 600;
+  padding: var(--Spacing-x2) 2.4rem;
+  gap: 0.4rem;
+
+  font-size: 1.6rem;
 }
 
-.bold {
+.primaryLight {
-  font-weight: 700;
+  --font-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
+  --background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal,);
+  --hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover,);
+  --hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover,);
+
+  --disabled-background-color: var(
+    --Theme-Primary-Light-Button-Primary-Fill-Disabled,
+  );
+  --disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled,);
 }
 
-.black {
+.primaryDark {
-  font-weight: 900;
+  --font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal,);
+  --background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal,);
+  --hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover,);
+  --hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover,);
+
+  --disabled-background-color: var(
+    --Theme-Primary-Dark-Button-Primary-Fill-Disabled,
+  );
+  --disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled,);
 }
 
-.primary {
+.secondaryLight {
-  background-color: var(--scandic-blue, #02838e);
+  --font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal,);
-  border: 0.1rem solid var(--scandic-blue, #02838e);
+  --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal,);
-  color: var(--some-white-color, #fff);
+  --hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover,);
+  --hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover,);
+
+  --disabled-background-color: var(
+    --Theme-Secondary-Light-Button-Primary-Fill-Disabled,
+  );
+  --disabled-color: var(
+    --Theme-Secondary-Light-Button-Primary-On-Fill-Disabled,
+  );
 }
 
-.secondary {
+.secondaryDark {
-  background-color: var(--some-black-color, #000);
+  --font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal,);
-  border: 0.1rem solid var(--some-black-color, #000);
+  --background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal,);
-  color: var(--some-white-color, #fff);
+  --hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover,);
+  --hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover,);
+
+  --disabled-background-color: var(
+    --Theme-Secondary-Dark-Button-Primary-Fill-Disabled,
+  );
+  --disabled-color: var(
+    --Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled,
+  );
 }
 
-.tertiary {
+.tertiaryLight {
-  background-color: var(--some-red-color, #d60728);
+  --font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal,);
-  border: 0.1rem solid var(--some-red-color, #d60728);
+  --background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal,);
-  color: var(--some-white-color, #fff);
+  --hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover,);
+  --hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover,);
+
+  --disabled-background-color: var(
+    --Theme-Tertiary-Light-Button-Primary-Fill-Disabled,
+  );
+  --disabled-color: var(
+    --Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled,
+  );
 }
 
-.quarternary {
+.tertiaryDark {
-  background-color: var(--some-grey-color, #727272);
+  --font-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal);
-  border: 0.1rem solid var(--some-black-color, #727272);
+  --background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal);
-  color: var(--some-white-color, #fff);
+  --hover-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
-}
+  --hover-background: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover);
 
-.white {
+  --disabled-background-color: var(
-  background-color: var(--some-white-color, #fff);
+    --Theme-Tertiary-Dark-Button-Primary-Fill-Disabled,
-  border: 0.1rem solid var(--some-black-color, #000);
+  );
-  color: var(--some-black-color, #000);
+  --disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled,);
-}
-
-.btn:disabled {
-  background-color: var(--some-grey-color, #d9d9d9);
-  color: var(--some-grey-color, #757575);
 }

components/TempDesignSystem/Button/index.tsx

@@ -8,23 +8,21 @@ import type { ButtonProps } from "./button"
 
 export default function Button({
   asChild = false,
-  bgcolor,
+  theme,
   className,
   disabled,
   intent,
   size,
   variant,
-  weight,
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
   const classNames = buttonVariants({
-    bgcolor,
+    theme,
     className,
     intent,
     size,
     variant,
-    weight,
   })
   return <Comp className={classNames} disabled={disabled} {...props} />
 }

components/TempDesignSystem/Button/variants.ts

@@ -4,12 +4,13 @@ import styles from "./button.module.css"
 
 export const buttonVariants = cva(styles.btn, {
   variants: {
-    bgcolor: {
+    theme: {
-      primary: styles.primary,
+      primaryLight: styles.primaryLight,
-      secondary: styles.secondary,
+      primaryDark: styles.primaryDark,
-      tertiary: styles.tertiary,
+      secondaryLight: styles.secondaryLight,
-      quarternary: styles.quarternary,
+      secondaryDark: styles.secondaryDark,
-      white: styles.white,
+      tertiaryLight: styles.tertiaryLight,
+      tertiaryDark: styles.tertiaryDark,
     },
     intent: {
       primary: styles.primary,
@@ -17,23 +18,18 @@ export const buttonVariants = cva(styles.btn, {
     },
     size: {
       small: styles.small,
-      regular: styles.average,
+      medium: styles.medium,
+      large: styles.large,
     },
     variant: {
       default: styles.default,
       icon: styles.icon,
     },
-    weight: {
-      light: styles.light,
-      regular: styles.regular,
-      medium: styles.medium,
-      semiBold: styles.semiBold,
-      bold: styles.bold,
-      black: styles.black,
-    },
   },
   defaultVariants: {
     variant: "default",
-    weight: "regular",
+    size: "medium",
+    theme: "primaryLight",
+    intent: "primary",
   },
 })