feat(WEB-249): first iteration design system primitives (typography, grid)

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

@@ -1,8 +1,8 @@
 .layout {
   --header-height: 4.5rem;
 
-  display: grid;
-  font-family: var(--ff-fira-sans);
   background-color: var(--Scandic-Brand-Warm-White);
+  display: grid;
+  font-family: var(--typography-Body-Regular-fontFamily);
   grid-template-rows: var(--header-height) auto 1fr;
 }

app/[lang]/(live)/middleware-error/[status]/page.module.css

@@ -1,3 +1,3 @@
 .layout {
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
 }

app/[lang]/webview/layout.module.css

@@ -1,5 +1,5 @@
 .layout {
-  font-family: var(--ff-fira-sans);
   background-color: var(--Scandic-Brand-Warm-White);
+  font-family: var(--typography-Body-Regular-fontFamily);
   min-height: 100dvh;
 }

components/Header/LanguageSwitcher/language.module.css

@@ -1,7 +1,7 @@
 .switcher {
   align-items: center;
   display: none;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.4rem;
   font-weight: 400;
   gap: 0.6rem;

components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -1,6 +1,6 @@
 import { _ } from "@/lib/translation"
 
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./howItWorks.module.css"
 

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -9,7 +9,7 @@ import { _ } from "@/lib/translation"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import levelsData from "./data"
 

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

@@ -45,7 +45,7 @@
 }
 
 .benefits {
-  font-family: var(--fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
   line-height: var(--typography-Body-Regular-lineHeight);
   margin: 0;
@@ -53,7 +53,7 @@
 }
 
 .icon {
-  font-family: var(--fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   position: relative;
   top: 0.3rem;
   height: 1.4rem;

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx

@@ -1,7 +1,7 @@
 import { ChevronDown, Minus } from "react-feather"
 
 import CheckCircle from "@/components/Icons/CheckCircle"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./benefitCard.module.css"
 

components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react"
 
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./overviewTableTitle.module.css"
 

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -1,6 +1,6 @@
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Subtitle"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css

@@ -6,7 +6,7 @@
 }
 
 .title {
-  font-family: var(--fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 700;
 
@@ -14,7 +14,7 @@
 }
 
 .value {
-  font-family: var(--fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 400;
   margin: 0;

components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx

@@ -1,6 +1,6 @@
 import { _ } from "@/lib/translation"
 
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ContactRow from "./ContactRow"
 

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -3,7 +3,7 @@ import { _ } from "@/lib/translation"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import Contact from "./Contact"
 

components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css

@@ -13,7 +13,7 @@
 }
 
 .preamble {
-  font-family: var(--fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 2.4rem;

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

@@ -13,7 +13,7 @@
 }
 
 .cardSubtitle {
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 16px;
   font-weight: 400;
   line-height: 14.4px;

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

@@ -5,7 +5,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import Header from "@/components/MyPages/Blocks/Header"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import levelsData from "../data"
 

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -31,10 +31,9 @@
 }
 
 .level {
-  font-size: var(--typography-Script-Mobile-fontSize, 18px);
+  font-family: var(--typography-Script-2-fontFamily);
-  font-weight: var(--typography-Script-Mobile-fontWeight);
+  font-size: var(--typography-Script-2-Desktop-fontSize);
-  font-style: italic;
+  font-weight: var(--typography-Script-2-fontWeight);
-  /* font-family: var(--ff-biro-script-plus); */
 }
 
 .cardSubtitle {

components/MyPages/Blocks/Challenges/challenges.module.css

@@ -17,7 +17,7 @@
 
 .subtitle {
   color: var(--some-black-color, #000);
-  /* font-family: var(--ff-biro-script-plus); */
+  font-family: var(--typography-Script-1-fontFamily);
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 1.8rem;
@@ -26,7 +26,7 @@
 
 .title {
   color: var(--some-black-color, #000);
-  /* font-family: var(--ff-brandon-text); */
+  font-family: var(--typography-Title-1-fontFamily);
   font-size: 1.6rem;
   font-weight: 900;
   inline-size: 18rem;

components/MyPages/Blocks/Challenges/index.tsx

@@ -1,7 +1,7 @@
 import { _ } from "@/lib/translation"
 
 import Image from "@/components/Image"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./challenges.module.css"
 

components/MyPages/Blocks/Header/index.tsx

@@ -1,6 +1,6 @@
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Subtitle"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./header.module.css"
 

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -1,8 +1,8 @@
 import { _ } from "@/lib/translation"
 
 import { GoodFriend } from "@/components/Levels"
-import BiroScript from "@/components/TempDesignSystem/BiroScript"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./friend.module.css"
 

components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx

@@ -1,7 +1,7 @@
 import { _ } from "@/lib/translation"
 
-import BiroScript from "@/components/TempDesignSystem/BiroScript"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import Label from "../Label"
 

components/MyPages/Blocks/Overview/Stats/Points/index.tsx

@@ -1,4 +1,4 @@
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import Label from "../Label"
 

components/MyPages/Blocks/Shortcuts/shortcuts.module.css

@@ -9,7 +9,7 @@
 }
 
 .subtitle {
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.8rem;
   font-weight: 400;
   line-height: 2.2rem;
@@ -27,7 +27,7 @@
   border-radius: 0.4rem;
   color: var(--some-black-color, #000);
   display: flex;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 700;
   gap: 0.4rem;

components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx

@@ -1,6 +1,6 @@
 import { _ } from "@/lib/translation"
 
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./emptyPreviousStays.module.css"
 

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

@@ -2,7 +2,7 @@ import { _ } from "@/lib/translation"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./emptyUpcomingStays.module.css"
 

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

@@ -3,7 +3,7 @@ import { Calendar } from "react-feather"
 import { dt } from "@/lib/dt"
 
 import Image from "@/components/Image"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./stay.module.css"
 

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

@@ -2,7 +2,7 @@ import { _ } from "@/lib/translation"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./emptyUpcomingStays.module.css"
 

components/MyPages/Header/User/user.module.css

@@ -4,7 +4,7 @@
   border-radius: 50%;
   color: var(--some-white-color, #fff);
   display: flex;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.2rem;
   font-weight: 600;
   height: 3.5rem;

components/MyPages/Sidebar/index.tsx

@@ -5,7 +5,7 @@ import { logout } from "@/constants/routes/handleAuth"
 import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./sidebar.module.css"
 

components/MyProfile/Card/Title/index.tsx

@@ -1,21 +0,0 @@
-import { headingVariants } from "./variants"
-
-import type { HeadingProps } from "@/types/components/myPages/myProfile/card/title"
-
-export default function Title({
-  as,
-  children,
-  className = "",
-  level = "h1",
-  uppercase = false,
-  weight,
-}: HeadingProps) {
-  const Hx = level
-  const classNames = headingVariants({
-    className,
-    text: uppercase ? "uppercase" : undefined,
-    type: as ?? level,
-    weight,
-  })
-  return <Hx className={classNames}>{children}</Hx>
-}

components/MyProfile/Card/Title/title.module.css

@@ -1,68 +0,0 @@
-.heading {
-  color: var(--some-black-color, #2e2e2e);
-  /* font-family: var(--ff-brandon-text); */
-  letter-spacing: 6%;
-  margin: 0;
-  padding: 0;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.h1 {
-  font-size: 2.5rem;
-  line-height: 3.5rem;
-}
-
-.h2 {
-  font-size: 1.3rem;
-  line-height: 1.6rem;
-}
-
-.h3 {
-  font-size: 1.8rem;
-}
-
-.h4 {
-  font-size: 1.6rem;
-}
-
-.h5 {
-  font-size: 1.3rem;
-}
-
-.h6 {
-  font-size: 1rem;
-}
-
-.light {
-  font-weight: 300;
-}
-
-.regular {
-  font-weight: 400;
-}
-
-.medium {
-  font-weight: 500;
-}
-
-.semiBold {
-  font-weight: 600;
-}
-
-.bold {
-  font-weight: 700;
-}
-
-.black {
-  font-weight: 900;
-}
-
-/* @media screen and (min-width: 1367px) {
-  .h1 {
-    font-size: 3.8rem;
-    line-height: 4.5rem;
-  }
-} */

components/MyProfile/Card/Title/variants.ts

@@ -1,33 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./title.module.css"
-
-const config = {
-  variants: {
-    text: {
-      uppercase: styles.uppercase,
-    },
-    type: {
-      h1: styles.h1,
-      h2: styles.h2,
-      h3: styles.h3,
-      h4: styles.h4,
-      h5: styles.h5,
-      h6: styles.h6,
-    },
-    weight: {
-      light: styles.light,
-      regular: styles.regular,
-      medium: styles.medium,
-      semiBold: styles.semiBold,
-      bold: styles.bold,
-      black: styles.black,
-    },
-  },
-  defaultVariants: {
-    type: "h1",
-    weight: "medium",
-  },
-} as const
-
-export const headingVariants = cva(styles.heading, config)

components/MyProfile/Card/index.tsx

@@ -1,16 +1,16 @@
 import { cva } from "class-variance-authority"
 
-import Title from "./Title"
-
 import styles from "./card.module.css"
 
 import type { CardProps } from "@/types/components/myPages/myProfile/card/card"
 
 const cardStyles = cva(styles.card)
 
-export default function Card({ className, tag = "section", ...props }: CardProps) {
+export default function Card({
+  className,
+  tag = "section",
+  ...props
+}: CardProps) {
   const Cmp = tag
   return <Cmp className={cardStyles({ className })} {...props} />
 }
-
-Card.Title = Title

components/MyProfile/CommunicationPreferences/index.tsx

@@ -1,11 +1,12 @@
 import Card from "@/components/MyProfile/Card"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./com.module.css"
 
 export default function CommunicationPreferences() {
   return (
     <Card className={styles.container}>
-      <Card.Title level="h2" uppercase>My communication preferences</Card.Title>
+      <Title level="h2">My communication preferences</Title>
     </Card>
   )
 }

components/MyProfile/CreditCards/index.tsx

@@ -1,11 +1,12 @@
 import Card from "@/components/MyProfile/Card"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./creditCards.module.css"
 
 export default function CreditCards() {
   return (
     <Card className={styles.container}>
-      <Card.Title level="h2" uppercase>My credit cards</Card.Title>
+      <Title level="h2">My credit cards</Title>
     </Card>
   )
 }

components/MyProfile/Field/field.module.css

@@ -15,7 +15,7 @@
   background-color: var(--some-white-color, #fff);
   border-radius: 50%;
   display: flex;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 400;
   grid-area: icon;
@@ -27,7 +27,7 @@
 
 .label,
 .content {
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-weight: 400;
   letter-spacing: -1.5%;
   line-height: 2.4rem;

components/MyProfile/MembershipCard/index.tsx

@@ -1,11 +1,12 @@
 import Card from "@/components/MyProfile/Card"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./membershipCard.module.css"
 
 export default function MembershipCard() {
   return (
     <Card className={styles.container}>
-      <Card.Title level="h2" uppercase>Membership cards</Card.Title>
+      <Title level="h2">Membership cards</Title>
     </Card>
   )
 }

components/MyProfile/Password/index.tsx

@@ -1,11 +1,12 @@
 import Card from "@/components/MyProfile/Card"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./password.module.css"
 
 export default function Password() {
   return (
     <Card className={styles.container}>
-      <Card.Title level="h2" uppercase>Password</Card.Title>
+      <Title level="h2">Password</Title>
     </Card>
   )
 }

components/MyProfile/Profile/Container.tsx

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority"
 
 import Image from "@/components/Image"
 import Card from "@/components/MyProfile/Card"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./profile.module.css"
 
@@ -24,7 +25,9 @@ export default function Container({
           src="/_static/icons/account_circle.svg"
           width={40}
         />
-        <Card.Title uppercase>{user.name}</Card.Title>
+        <Title as="h4" level="h2">
+          {user.name}
+        </Title>
       </header>
       {children}
     </Card>

components/MyProfile/Wishes/index.tsx

@@ -1,11 +1,12 @@
 import Card from "@/components/MyProfile/Card"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./wishes.module.css"
 
 export default function Wishes() {
   return (
     <Card className={styles.container}>
-      <Card.Title level="h2" uppercase>My wishes</Card.Title>
+      <Title level="h2">My wishes</Title>
     </Card>
   )
 }

components/TempDesignSystem/Button/button.module.css

@@ -5,34 +5,34 @@
   margin: 0;
   padding: 0;
   text-align: center;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-weight: 600;
   line-height: 150%;
   letter-spacing: 1%;
 }
 
 .primary {
-  color: var(--font-color,);
+  color: var(--font-color);
-  background-color: var(--background-color,);
+  background-color: var(--background-color);
 }
 
 .primary:hover,
 .primary:active,
 .primary:focus {
-  background-color: var(--hover-background,);
+  background-color: var(--hover-background);
-  color: var(--hover-color,);
+  color: var(--hover-color);
 }
 
 .secondary {
   background-color: transparent;
   border: 0.1rem solid var(--background-color);
-  color: var(--background-color,);
+  color: var(--background-color);
 }
 
 .secondary:hover,
 .secondary:active,
 .secondary:focus {
-  border: 0.1rem solid var(--hover-color,);
+  border: 0.1rem solid var(--hover-color);
   color: var(--hover-color);
 }
 
@@ -66,7 +66,7 @@
 
 .medium {
   height: 3rem;
-  padding: 1.2rem var(--Spacing-x2,);
+  padding: 1.2rem var(--Spacing-x2);
 
   font-size: 1.6rem;
 }
@@ -80,68 +80,59 @@
 
 .primaryLight {
   --font-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
-  --background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal,);
+  --background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal);
-  --hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover,);
+  --hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover);
-  --hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover,);
+  --hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover);
-
   --disabled-background-color: var(
-    --Theme-Primary-Light-Button-Primary-Fill-Disabled,
+    --Theme-Primary-Light-Button-Primary-Fill-Disabled
   );
-  --disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled,);
+  --disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled);
 }
 
 .primaryDark {
-  --font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal,);
+  --font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal);
-  --background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal,);
+  --background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal);
-  --hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover,);
+  --hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover);
-  --hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover,);
+  --hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover);
-
   --disabled-background-color: var(
-    --Theme-Primary-Dark-Button-Primary-Fill-Disabled,
+    --Theme-Primary-Dark-Button-Primary-Fill-Disabled
   );
-  --disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled,);
+  --disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
 }
 
 .secondaryLight {
-  --font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal,);
+  --font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
-  --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal,);
+  --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal);
-  --hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover,);
+  --hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover);
-  --hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover,);
+  --hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover);
-
   --disabled-background-color: var(
-    --Theme-Secondary-Light-Button-Primary-Fill-Disabled,
+    --Theme-Secondary-Light-Button-Primary-Fill-Disabled
   );
   --disabled-color: var(
-    --Theme-Secondary-Light-Button-Primary-On-Fill-Disabled,
+    --Theme-Secondary-Light-Button-Primary-On-Fill-Disabled
   );
 }
 
 .secondaryDark {
-  --font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal,);
+  --font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
-  --background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal,);
+  --background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal);
-  --hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover,);
+  --hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover);
-  --hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover,);
+  --hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover);
-
   --disabled-background-color: var(
-    --Theme-Secondary-Dark-Button-Primary-Fill-Disabled,
+    --Theme-Secondary-Dark-Button-Primary-Fill-Disabled
-  );
-  --disabled-color: var(
-    --Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled,
   );
+  --disabled-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled);
 }
 
 .tertiaryLight {
-  --font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal,);
+  --font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
-  --background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal,);
+  --background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal);
-  --hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover,);
+  --hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover);
-  --hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover,);
+  --hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover);
-
   --disabled-background-color: var(
-    --Theme-Tertiary-Light-Button-Primary-Fill-Disabled,
+    --Theme-Tertiary-Light-Button-Primary-Fill-Disabled
-  );
-  --disabled-color: var(
-    --Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled,
   );
+  --disabled-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled);
 }
 
 .tertiaryDark {
@@ -149,9 +140,8 @@
   --background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal);
   --hover-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
   --hover-background: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover);
-
   --disabled-background-color: var(
-    --Theme-Tertiary-Dark-Button-Primary-Fill-Disabled,
+    --Theme-Tertiary-Dark-Button-Primary-Fill-Disabled
   );
-  --disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled,);
+  --disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled);
 }

components/TempDesignSystem/Card/card.module.css

@@ -45,7 +45,7 @@
 .scriptedTitle {
   color: var(--script-color);
 
-  font-family: var(--ff-biro-script-plus);
+  font-family: var(--typography-Script-2-fontFamily);
   font-size: var(--typography-Script-2-fontSize);
   font-weight: var(--typography-Script-2-fontWeight);
   line-height: var(--typography-Script-2-lineHeight);

components/TempDesignSystem/Card/index.tsx

@@ -1,7 +1,7 @@
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Title"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
 import { cardVariants } from "./variants"
 

components/TempDesignSystem/Form/Country/country.module.css

@@ -24,7 +24,7 @@
 .input,
 .listBoxItem {
   color: var(--some-black-color, #757575);
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 400;
   letter-spacing: -1.5%;

components/TempDesignSystem/Form/Date/Select/select.module.css

@@ -3,7 +3,7 @@
 }
 
 .label {
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.5rem;
   font-weight: 400;
 }
@@ -21,7 +21,7 @@
   border-radius: var(--radius);
   color: var(--some-black-color, #757575);
   display: grid;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 400;
   gap: 1rem;

components/TempDesignSystem/Form/ErrorMessage/error.module.css

@@ -1,6 +1,6 @@
 .message {
   color: var(--some-red-color, #d64242);
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.4rem;
   font-weight: 400;
   line-height: 2.2rem;

components/TempDesignSystem/Form/Input/input.module.css

@@ -2,7 +2,7 @@
   border: 0.2rem solid var(--some-black-color, #757575);
   border-radius: 0.4rem;
   color: var(--some-black-color, #757575);
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 400;
   height: 4rem;

components/TempDesignSystem/Form/Select/select.module.css

@@ -4,7 +4,7 @@
 
 .label {
   color: var(--Base-Text-UI-Placeholder);
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Footnote-Regular-fontFamily);
   font-size: var(--typography-Footnote-Regular-fontSize);
   font-weight: 400;
   position: absolute;
@@ -24,7 +24,7 @@
   border-radius: 0.8rem;
   color: var(--some-black-color, #757575);
   display: grid;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: 1.6rem;
   font-weight: 400;
   gap: 1rem;

components/TempDesignSystem/Grid/Item/index.tsx

@@ -0,0 +1,14 @@
+import { Slot } from "@radix-ui/react-slot"
+
+import { itemVariants } from "./variants"
+
+import type { ItemProps } from "./item"
+
+export default function Item({ columns, order, rows, ...props }: ItemProps) {
+  const classNames = itemVariants({
+    columns,
+    order,
+    rows,
+  })
+  return <Slot {...props} className={classNames} />
+}

components/TempDesignSystem/Grid/Item/item.module.css

@@ -0,0 +1,372 @@
+.item {
+  margin: 0;
+  padding: 0;
+}
+
+.c2r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c2r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c2r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c2r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c3r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c3r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c3r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c3r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c4r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c4r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c4r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c4r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c6r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c6r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c6r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c6r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c8r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c8r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c8r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c8r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.order1 {
+  order: 1;
+}
+
+.order2 {
+  order: 4;
+}
+
+.order3 {
+  order: 7;
+}
+
+.order4 {
+  order: 2;
+}
+
+.order5 {
+  order: 5;
+}
+
+.order6 {
+  order: 8;
+}
+
+.order7 {
+  order: 3;
+}
+
+.order8 {
+  order: 6;
+}
+
+.order9 {
+  order: 9;
+}
+
+@media screen and (min-width: 768px) {
+  .c2r1 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c2r2 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c2r3 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c2r6 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c3r1 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c3r2 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c3r3 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c3r6 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r1 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r2 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r3 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r6 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c6r1 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c6r2 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c6r3 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c6r6 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r1 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r2 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r3 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r6 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .c2r1 {
+    grid-column: span 2;
+    grid-row: span 1;
+  }
+
+  .c2r2 {
+    grid-column: span 2;
+    grid-row: span 2;
+  }
+
+  .c2r3 {
+    grid-column: span 2;
+    grid-row: span 3;
+  }
+
+  .c2r6 {
+    grid-column: span 2;
+    grid-row: span 6;
+  }
+
+  .c3r1 {
+    grid-column: span 3;
+    grid-row: span 1;
+  }
+
+  .c3r2 {
+    grid-column: span 3;
+    grid-row: span 2;
+  }
+
+  .c3r3 {
+    grid-column: span 3;
+    grid-row: span 3;
+  }
+
+  .c3r6 {
+    grid-column: span 3;
+    grid-row: span 6;
+  }
+
+  .c4r1 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r2 {
+    grid-column: span 4;
+    grid-row: span 2;
+  }
+
+  .c4r3 {
+    grid-column: span 4;
+    grid-row: span 3;
+  }
+
+  .c4r6 {
+    grid-column: span 4;
+    grid-row: span 6;
+  }
+
+  .c6r1 {
+    grid-column: span 6;
+    grid-row: span 1;
+  }
+
+  .c6r2 {
+    grid-column: span 6;
+    grid-row: span 2;
+  }
+
+  .c6r3 {
+    grid-column: span 6;
+    grid-row: span 3;
+  }
+
+  .c6r6 {
+    grid-column: span 6;
+    grid-row: span 6;
+  }
+
+  .c8r1 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r2 {
+    grid-column: span 8;
+    grid-row: span 2;
+  }
+
+  .c8r3 {
+    grid-column: span 8;
+    grid-row: span 3;
+  }
+
+  .c8r6 {
+    grid-column: span 8;
+    grid-row: span 6;
+  }
+
+  .order2 {
+    order: 2;
+  }
+
+  .order3 {
+    order: 3;
+  }
+
+  .order4 {
+    order: 4;
+  }
+
+  .order5 {
+    order: 5;
+  }
+
+  .order6 {
+    order: 6;
+  }
+
+  .order7 {
+    order: 7;
+  }
+
+  .order8 {
+    order: 8;
+  }
+}

components/TempDesignSystem/Grid/Item/item.ts

@@ -0,0 +1,7 @@
+import { itemVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface ItemProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof itemVariants> {}

components/TempDesignSystem/Grid/Item/variants.ts

@@ -0,0 +1,138 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./item.module.css"
+
+export const itemVariants = cva(styles.item, {
+  variants: {
+    order: {
+      1: styles.order1,
+      2: styles.order2,
+      3: styles.order3,
+      4: styles.order4,
+      5: styles.order5,
+      6: styles.order6,
+      7: styles.order7,
+      8: styles.order8,
+      9: styles.order9,
+    },
+    // These are only placeholder classes
+    // so that we can use compoundVariants
+    columns: {
+      2: styles.colTwo,
+      3: styles.colThree,
+      4: styles.colFour,
+      6: styles.colSix,
+      8: styles.colEight,
+    },
+    // These are only placeholder classes
+    // so that we can use compoundVariants
+    rows: {
+      1: styles.rowOne,
+      2: styles.rowTwo,
+      3: styles.rowThree,
+      6: styles.rowSix,
+    },
+  },
+  compoundVariants: [
+    {
+      class: styles.c2r1,
+      columns: 2,
+      rows: 1,
+    },
+    {
+      class: styles.c2r2,
+      columns: 2,
+      rows: 2,
+    },
+    {
+      class: styles.c2r3,
+      columns: 2,
+      rows: 3,
+    },
+    {
+      class: styles.c2r6,
+      columns: 2,
+      rows: 6,
+    },
+    {
+      class: styles.c3r1,
+      columns: 3,
+      rows: 1,
+    },
+    {
+      class: styles.c3r2,
+      columns: 3,
+      rows: 2,
+    },
+    {
+      class: styles.c3r3,
+      columns: 3,
+      rows: 3,
+    },
+    {
+      class: styles.c3r6,
+      columns: 3,
+      rows: 6,
+    },
+    {
+      class: styles.c4r1,
+      columns: 4,
+      rows: 1,
+    },
+    {
+      class: styles.c4r2,
+      columns: 4,
+      rows: 2,
+    },
+    {
+      class: styles.c4r3,
+      columns: 4,
+      rows: 3,
+    },
+    {
+      class: styles.c4r6,
+      columns: 4,
+      rows: 6,
+    },
+    {
+      class: styles.c6r1,
+      columns: 6,
+      rows: 1,
+    },
+    {
+      class: styles.c6r2,
+      columns: 6,
+      rows: 2,
+    },
+    {
+      class: styles.c6r3,
+      columns: 6,
+      rows: 3,
+    },
+    {
+      class: styles.c6r6,
+      columns: 6,
+      rows: 6,
+    },
+    {
+      class: styles.c8r1,
+      columns: 8,
+      rows: 1,
+    },
+    {
+      class: styles.c8r2,
+      columns: 8,
+      rows: 2,
+    },
+    {
+      class: styles.c8r3,
+      columns: 8,
+      rows: 3,
+    },
+    {
+      class: styles.c8r6,
+      columns: 8,
+      rows: 6,
+    },
+  ],
+})

components/TempDesignSystem/Grid/grid.module.css

@@ -0,0 +1,18 @@
+.grid {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media screen and (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .grid {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}

components/TempDesignSystem/Grid/grid.ts

@@ -0,0 +1,30 @@
+import type { Edges } from "@/types/requests/utils/edges"
+import type { TypenameInterface } from "@/types/requests/utils/typename"
+
+export type Order = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+
+export type ColSpan = 2 | 3 | 4 | 6 | 8
+export type RowSpan = 1 | 2 | 3 | 6
+
+// TODO: Extend query and fix type accordingly
+export interface Row extends TypenameInterface<"Card"> {
+  title: string
+}
+
+type Column = {
+  span: ColSpan
+  rows: {
+    rowConnection: Edges<Row>
+  }[]
+}
+
+export interface Grid {
+  columns: Column[]
+}
+
+export interface GridProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  children: (row: Row) => React.ReactNode
+  items: Grid
+  tag?: "aside" | "article" | "div" | "main" | "section"
+}

components/TempDesignSystem/Grid/index.tsx

@@ -0,0 +1,66 @@
+import Item from "./Item"
+
+import styles from "./grid.module.css"
+
+import type { GridProps, Order, RowSpan } from "./grid"
+
+export default function Grid({ children, items, tag = "section" }: GridProps) {
+  const Elm = tag
+
+  const allRows: number[] = items.columns.map((col) => col.rows.length)
+  const onlySingleRows = allRows.every((row) => row === 1)
+  const oneColumnWithTwoRows = allRows.includes(2)
+  const oneColumnWithThreeRows = allRows.includes(3)
+  /**
+   * When we have one column with 2 rows and another with 3,
+   * we have to reach the closest denominator which is 6 to be
+   * able to have the column with 2 rows span half the grid each.
+   */
+  const doubleTheRows = oneColumnWithTwoRows && oneColumnWithThreeRows
+  return (
+    <Elm className={styles.grid}>
+      {items.columns.map((column, columnIndex) => {
+        const rows = column.rows.map((row) => row.rowConnection.edges).flat()
+        let rowSpan: RowSpan = 1
+        if (!onlySingleRows) {
+          if (doubleTheRows) {
+            switch (rows.length) {
+              case 1:
+                rowSpan = 6
+                break
+              case 2:
+                rowSpan = 3
+                break
+              case 3:
+                rowSpan = 2
+                break
+            }
+          } else if (oneColumnWithTwoRows) {
+            if (rows.length === 1) {
+              rowSpan = 2
+            }
+          } else if (oneColumnWithThreeRows) {
+            if (rows.length === 1) {
+              rowSpan = 3
+            }
+          }
+        }
+        return rows.map(({ node: row }, rowIndex) => {
+          const order = (columnIndex +
+            1 +
+            rowIndex * items.columns.length) as Order
+          return (
+            <Item
+              key={order}
+              columns={column.span}
+              order={order}
+              rows={rowSpan}
+            >
+              {children(row)}
+            </Item>
+          )
+        })
+      })}
+    </Elm>
+  )
+}

components/TempDesignSystem/Link/link.module.css

@@ -3,7 +3,7 @@
 }
 
 .default {
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
 }
 
 .sidebar {
@@ -28,4 +28,4 @@
   height: 0.2rem;
   position: absolute;
   width: 100%;
-}
+}

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -4,39 +4,27 @@
 }
 
 .one {
-  font-size: var(--typography-Script-1-Mobile-fontSize);
+  font-size: clamp(
+    var(--typography-Script-1-Mobile-fontSize),
+    1.3vw + 14px,
+    var(--typography-Script-1-Desktop-fontSize)
+  );
   font-weight: var(--typography-Script-1-fontWeight);
   letter-spacing: var(--typography-Script-1-letterSpacing);
   line-height: var(--typography-Script-1-lineHeight);
 }
 
 .two {
-  font-size: var(--typography-Script-2-Mobile-fontSize);
+  font-size: clamp(
+    var(--typography-Script-2-Mobile-fontSize),
+    0.6vw + 15px,
+    var(--typography-Script-2-Desktop-fontSize)
+  );
   font-weight: var(--typography-Script-2-fontWeight);
   letter-spacing: var(--typography-Script-2-letterSpacing);
   line-height: var(--typography-Script-2-lineHeight);
 }
 
-@media screen and (min-width: 768px) {
-  .one {
-    font-size: var(--typography-Script-1-Tablet-estimate-fontSize);
-  }
-
-  .two {
-    font-size: var(--typography-Script-2-Tablet-estimate-fontSize);
-  }
-}
-
-@media screen and (min-width: 1367px) {
-  .one {
-    font-size: var(--typography-Script-1-Desktop-fontSize);
-  }
-
-  .two {
-    font-size: var(--typography-Script-2-Desktop-fontSize);
-  }
-}
-
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }

components/TempDesignSystem/Text/Body/body.module.css

@@ -0,0 +1,44 @@
+.body {
+  margin: 0;
+  padding: 0;
+}
+
+.bold {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+  text-decoration: var(--typography-Body-Bold-textDecoration);
+}
+
+.regular {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  text-decoration: var(--typography-Body-Regular-textDecoration);
+}
+
+.underlined {
+  font-family: var(--typography-Body-Underlined-fontFamily);
+  font-size: var(--typography-Body-Underlined-fontSize);
+  font-weight: var(--typography-Body-Underlined-fontWeight);
+  letter-spacing: var(--typography-Body-Underlined-letterSpacing);
+  line-height: var(--typography-Body-Underlined-lineHeight);
+  text-decoration: var(--typography-Body-Underlined-textDecoration);
+}
+
+.black {
+  /* No black variable exist yet */
+  color: #000;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/Body/body.ts

@@ -0,0 +1,7 @@
+import { bodyVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface BodyProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
+    VariantProps<typeof bodyVariants> {}

components/TempDesignSystem/Text/Body/index.tsx

@@ -0,0 +1,17 @@
+import { bodyVariants } from "./variants"
+
+import type { BodyProps } from "./body"
+
+export default function Body({
+  children,
+  className = "",
+  color,
+  textTransform,
+}: BodyProps) {
+  const classNames = bodyVariants({
+    className,
+    color,
+    textTransform,
+  })
+  return <p className={classNames}>{children}</p>
+}

components/TempDesignSystem/Text/Body/variants.ts

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./body.module.css"
+
+const config = {
+  variants: {
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+      underlined: styles.underlined,
+    },
+  },
+  defaultVariants: {
+    color: "black",
+    textTransform: "regular",
+  },
+} as const
+
+export const bodyVariants = cva(styles.body, config)

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -0,0 +1,35 @@
+.body {
+  margin: 0;
+  padding: 0;
+}
+
+.bold {
+  font-family: var(--typography-Caption-Bold-fontFamily);
+  font-size: var(--typography-Caption-Bold-fontSize);
+  font-weight: var(--typography-Caption-Bold-fontWeight);
+  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
+  line-height: var(--typography-Caption-Bold-lineHeight);
+  text-decoration: var(--typography-Caption-Bold-textDecoration);
+}
+
+.regular {
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
+  line-height: var(--typography-Caption-Regular-lineHeight);
+  text-decoration: var(--typography-Caption-Regular-textDecoration);
+}
+
+.black {
+  /* No black variable exist yet */
+  color: #000;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/Caption/caption.ts

@@ -0,0 +1,7 @@
+import { captionVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface CaptionProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
+    VariantProps<typeof captionVariants> {}

components/TempDesignSystem/Text/Caption/index.tsx

@@ -0,0 +1,17 @@
+import { captionVariants } from "./variants"
+
+import type { CaptionProps } from "./caption"
+
+export default function Caption({
+  children,
+  className = "",
+  color,
+  textTransform,
+}: CaptionProps) {
+  const classNames = captionVariants({
+    className,
+    color,
+    textTransform,
+  })
+  return <p className={classNames}>{children}</p>
+}

components/TempDesignSystem/Text/Caption/variants.ts

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./caption.module.css"
+
+const config = {
+  variants: {
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    color: "black",
+    textTransform: "regular",
+  },
+} as const
+
+export const captionVariants = cva(styles.caption, config)

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -0,0 +1,35 @@
+.body {
+  margin: 0;
+  padding: 0;
+}
+
+.bold {
+  font-family: var(--typography-Footnote-Bold-fontFamily);
+  font-size: var(--typography-Footnote-Bold-fontSize);
+  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
+  line-height: var(--typography-Footnote-Bold-lineHeight);
+  text-decoration: var(--typography-Footnote-Bold-textDecoration);
+}
+
+.regular {
+  font-family: var(--typography-Footnote-Regular-fontFamily);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: var(--typography-Footnote-Regular-fontWeight);
+  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
+  line-height: var(--typography-Footnote-Regular-lineHeight);
+  text-decoration: var(--typography-Footnote-Regular-textDecoration);
+}
+
+.black {
+  /* No black variable exist yet */
+  color: #000;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/Footnote/footnote.ts

@@ -0,0 +1,7 @@
+import { footnoteVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface FootnoteProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
+    VariantProps<typeof footnoteVariants> {}

components/TempDesignSystem/Text/Footnote/index.tsx

@@ -0,0 +1,17 @@
+import { footnoteVariants } from "./variants"
+
+import type { FootnoteProps } from "./footnote"
+
+export default function Footnote({
+  children,
+  className = "",
+  color,
+  textTransform,
+}: FootnoteProps) {
+  const classNames = footnoteVariants({
+    className,
+    color,
+    textTransform,
+  })
+  return <p className={classNames}>{children}</p>
+}

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./footnote.module.css"
+
+const config = {
+  variants: {
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    color: "black",
+    textTransform: "regular",
+  },
+} as const
+
+export const footnoteVariants = cva(styles.footnote, config)

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -1,6 +1,10 @@
 .subtitle {
   font-family: var(--typography-Subtitle-fontFamily);
-  font-size: var(--typography-Subtitle-Mobile-fontSize);
+  font-size: clamp(
+    var(--typography-Subtitle-Mobile-fontSize),
+    0.3vw + 15px,
+    var(--typography-Subtitle-Desktop-fontSize)
+  );
   font-weight: var(--typography-Subtitle-fontWeight);
   letter-spacing: var(--typography-Subtitle-letterSpacing);
   line-height: var(--typography-Subtitle-lineHeight);
@@ -8,18 +12,6 @@
   padding: 0;
 }
 
-@media screen and (min-width: 768px) {
-  .subtitle {
-    font-size: var(--typography-Subtitle-Tablet-estimate-fontSize);
-  }
-}
-
-@media screen and (min-width: 1367px) {
-  .subtitle {
-    font-size: var(--typography-Subtitle-Desktop-fontSize);
-  }
-}
-
 .regular {
   text-transform: none;
 }

components/TempDesignSystem/Text/Title/title.module.css

@@ -3,6 +3,71 @@
   padding: 0;
 }
 
+.h1 {
+  font-family: var(--typography-Title-1-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-1-Mobile-fontSize),
+    2.6vw + 27px,
+    var(--typography-Title-1-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-1-fontWeight);
+  letter-spacing: var(--typography-Title-1-letterSpacing);
+  line-height: var(--typography-Title-1-lineHeight);
+  text-decoration: var(--typography-Title-1-textDecoration);
+}
+
+.h2 {
+  font-family: var(--typography-Title-2-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-2-Mobile-fontSize),
+    2vw + 20px,
+    var(--typography-Title-2-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-2-fontWeight);
+  letter-spacing: var(--typography-Title-2-letterSpacing);
+  line-height: var(--typography-Title-2-lineHeight);
+  text-decoration: var(--typography-Title-2-textDecoration);
+}
+
+.h3 {
+  font-family: var(--typography-Title-3-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-3-Mobile-fontSize),
+    0.6vw + 27px,
+    var(--typography-Title-3-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-3-fontWeight);
+  letter-spacing: var(--typography-Title-3-letterSpacing);
+  line-height: var(--typography-Title-3-lineHeight);
+  text-decoration: var(--typography-Title-3-textDecoration);
+}
+
+.h4 {
+  font-family: var(--typography-Title-4-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-4-Mobile-fontSize),
+    0.6vw + 19px,
+    var(--typography-Title-4-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-4-fontWeight);
+  letter-spacing: var(--typography-Title-4-letterSpacing);
+  line-height: var(--typography-Title-4-lineHeight);
+  text-decoration: var(--typography-Title-4-textDecoration);
+}
+
+.h5 {
+  font-family: var(--typography-Title-5-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-5-Mobile-fontSize),
+    0.3vw + 17px,
+    var(--typography-Title-5-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-5-fontWeight);
+  letter-spacing: var(--typography-Title-5-letterSpacing);
+  line-height: var(--typography-Title-5-lineHeight);
+  text-decoration: var(--typography-Title-5-textDecoration);
+}
+
 .regular {
   text-transform: none;
 }
@@ -11,90 +76,6 @@
   text-transform: uppercase;
 }
 
-.h1 {
-  font-family: var(--typography-Title-1-fontFamily);
-  font-size: var(--typography-Title-1-Mobile-fontSize);
-  font-weight: var(--typography-Title-1-fontWeight);
-  letter-spacing: var(--typography-Title-1-letterSpacing);
-  line-height: var(--typography-Title-1-lineHeight);
-}
-
-.h2 {
-  font-family: var(--typography-Title-2-fontFamily);
-  font-size: var(--typography-Title-2-Mobile-fontSize);
-  font-weight: var(--typography-Title-2-fontWeight);
-  letter-spacing: var(--typography-Title-2-letterSpacing);
-  line-height: var(--typography-Title-2-lineHeight);
-}
-
-.h3 {
-  font-family: var(--typography-Title-3-fontFamily);
-  font-size: var(--typography-Title-3-Mobile-fontSize);
-  font-weight: var(--typography-Title-3-fontWeight);
-  letter-spacing: var(--typography-Title-3-letterSpacing);
-  line-height: var(--typography-Title-3-lineHeight);
-}
-
-.h4 {
-  font-family: var(--typography-Title-4-fontFamily);
-  font-size: var(--typography-Title-4-Mobile-fontSize);
-  font-weight: var(--typography-Title-4-fontWeight);
-  letter-spacing: var(--typography-Title-4-letterSpacing);
-  line-height: var(--typography-Title-4-lineHeight);
-}
-
-.h5 {
-  font-family: var(--typography-Title-5-fontFamily);
-  font-size: var(--typography-Title-5-Mobile-fontSize);
-  font-weight: var(--typography-Title-5-fontWeight);
-  letter-spacing: var(--typography-Title-5-letterSpacing);
-  line-height: var(--typography-Title-5-lineHeight);
-}
-
-@media screen and (min-width: 768px) {
-  .h1 {
-    font-size: var(--typography-Title-1-Tablet-estimate-fontSize);
-  }
-
-  .h2 {
-    font-size: var(--typography-Title-2-Tablet-estimate-fontSize);
-  }
-
-  .h3 {
-    font-size: var(--typography-Title-3-Tablet-estimate-fontSize);
-  }
-
-  .h4 {
-    font-size: var(--typography-Title-4-Tablet-estimate-fontSize);
-  }
-
-  .h5 {
-    font-size: var(--typography-Title-5-Tablet-estimate-fontSize);
-  }
-}
-
-@media screen and (min-width: 1367px) {
-  .h1 {
-    font-size: var(--typography-Title-1-Desktop-fontSize);
-  }
-
-  .h2 {
-    font-size: var(--typography-Title-2-Desktop-fontSize);
-  }
-
-  .h3 {
-    font-size: var(--typography-Title-3-Desktop-fontSize);
-  }
-
-  .h4 {
-    font-size: var(--typography-Title-4-Desktop-fontSize);
-  }
-
-  .h5 {
-    font-size: var(--typography-Title-5-Desktop-fontSize);
-  }
-}
-
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }

lib/graphql/Fragments/Grid.graphql

@@ -0,0 +1,17 @@
+fragment Grid on Grid {
+  columns {
+    span
+    rows {
+      rowConnection {
+        edges {
+          node {
+            __typename
+            ... on Card {
+              title
+            }
+          }
+        }
+      }
+    }
+  }
+}

types/components/myPages/myProfile/card/title.ts

@@ -1,11 +0,0 @@
-import { headingVariants } from "@/components/MyProfile/Card/Title/variants"
-
-import type { VariantProps } from "class-variance-authority"
-
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
-
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
-  as?: HeadingLevel
-  level?: HeadingLevel
-  uppercase?: boolean
-}