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

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,);
-  background-color: var(--background-color,);
+  color: var(--font-color);
+  background-color: var(--background-color);
 }
 
 .primary:hover,
 .primary:active,
 .primary:focus {
-  background-color: var(--hover-background,);
-  color: var(--hover-color,);
+  background-color: var(--hover-background);
+  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,);
-  --hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover,);
-  --hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover,);
-
+  --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,
+    --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,);
-  --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,);
-
+  --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,
+    --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,);
-  --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal,);
-  --hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover,);
-  --hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover,);
-
+  --font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
+  --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal);
+  --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,
+    --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,);
-  --background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal,);
-  --hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover,);
-  --hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover,);
-
+  --font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
+  --background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal);
+  --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,
+    --Theme-Secondary-Dark-Button-Primary-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,);
-  --background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal,);
-  --hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover,);
-  --hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover,);
-
+  --font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
+  --background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal);
+  --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,
+    --Theme-Tertiary-Light-Button-Primary-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);
 }