feat(WEB-304): remaning UI from design system primitives

components/TempDesignSystem/Button/button.module.css

@@ -2,50 +2,60 @@
   background: none;
   border: none;
   cursor: pointer;
-  margin: 0;
-  padding: 0;
-  text-align: center;
   font-family: var(--typography-Body-Regular-fontFamily);
   font-weight: 600;
   line-height: 150%;
   letter-spacing: 1%;
+  margin: 0;
+  padding: 0;
+  text-align: center;
 }
 
-.primary {
+.primary,
+a.primary {
   color: var(--font-color);
   background-color: var(--background-color);
 }
 
 .primary:hover,
+a.primary:hover,
 .primary:active,
-.primary:focus {
+a.primary:active,
+.primary:focus,
+a.primary:focus {
   background-color: var(--hover-background);
   color: var(--hover-color);
 }
 
-.secondary {
+.secondary,
+a.secondary {
   background-color: transparent;
-  border: 0.1rem solid var(--background-color);
+  border: 1px solid var(--background-color);
   color: var(--background-color);
 }
 
 .secondary:hover,
+a.secondary:hover,
 .secondary:active,
-.secondary:focus {
-  border: 0.1rem solid var(--hover-color);
+a.secondary:active,
+.secondary:focus,
+a.secondary:focus {
+  border: 1px solid var(--hover-color);
   color: var(--hover-color);
 }
 
-.default {
+.default,
+a.default {
   align-items: center;
-  border-radius: 4rem;
+  border-radius: 50px;
+  /* No variable yet */
   display: flex;
-  gap: 1rem;
+  gap: var(--Spacing-x1);
 }
 
 .icon {
-  font-size: 1.8rem;
   align-items: baseline;
+  font-size: 18px;
 }
 
 /* Disabled styles */
@@ -57,25 +67,22 @@
 
 /* Sizes */
 .small {
+  font-size: 14px;
+  gap: var(--Spacing-x2);
+  height: 40px;
   padding: var(--Spacing-x1) var(--Spacing-x2);
-  gap: 0.2rem;
-
-  font-size: 1.4rem;
-  height: 4rem;
 }
 
 .medium {
-  height: 3rem;
-  padding: 1.2rem var(--Spacing-x2);
-
-  font-size: 1.6rem;
+  font-size: 16px;
+  height: 30px;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
 }
 
 .large {
-  padding: var(--Spacing-x2) 2.4rem;
-  gap: 0.4rem;
-
-  font-size: 1.6rem;
+  font-size: 16px;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
 }
 
 .primaryLight {

components/TempDesignSystem/Button/index.tsx

@@ -18,10 +18,10 @@ export default function Button({
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
   const classNames = buttonVariants({
-    theme,
     className,
     intent,
     size,
+    theme,
     variant,
   })
   return <Comp className={classNames} disabled={disabled} {...props} />

components/TempDesignSystem/Button/variants.ts

@@ -4,14 +4,6 @@ import styles from "./button.module.css"
 
 export const buttonVariants = cva(styles.btn, {
   variants: {
-    theme: {
-      primaryLight: styles.primaryLight,
-      primaryDark: styles.primaryDark,
-      secondaryLight: styles.secondaryLight,
-      secondaryDark: styles.secondaryDark,
-      tertiaryLight: styles.tertiaryLight,
-      tertiaryDark: styles.tertiaryDark,
-    },
     intent: {
       primary: styles.primary,
       secondary: styles.secondary,
@@ -21,15 +13,23 @@ export const buttonVariants = cva(styles.btn, {
       medium: styles.medium,
       large: styles.large,
     },
+    theme: {
+      primaryLight: styles.primaryLight,
+      primaryDark: styles.primaryDark,
+      secondaryLight: styles.secondaryLight,
+      secondaryDark: styles.secondaryDark,
+      tertiaryLight: styles.tertiaryLight,
+      tertiaryDark: styles.tertiaryDark,
+    },
     variant: {
       default: styles.default,
       icon: styles.icon,
     },
   },
   defaultVariants: {
-    variant: "default",
+    intent: "primary",
     size: "medium",
     theme: "primaryLight",
-    intent: "primary",
+    variant: "default",
   },
 })

components/TempDesignSystem/Card/card.module.css

@@ -1,57 +1,54 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  height: 48rem;
-  width: 100%;
-  margin-right: 1.6rem;
-  border-radius: 1.6rem;
+  display: flex;
+  border-radius: var(--Corner-radius-xLarge);
+  flex-direction: column;
   gap: var(--Spacing-x2);
-  padding: 0px 3.2rem;
-
+  height: 480px;
+  justify-content: center;
+  margin-right: var(--Spacing-x2);
+  padding: var(--Spacing-x0) var(--Spacing-x4);
   text-align: center;
+  width: 100%;
 }
 
 .themeOne {
-  --font-color: var(--Brand-Main-Strong, #4d001b);
-  --script-color: var(--UI-Red-70, #ad0015);
-  --divider-color: var(--UI-Red-10, #f7c1c2);
+  --font-color: var(--Scandic-Brand-Burgundy);
+  --script-color: var(--UI-Red-70);
+  --divider-color: var(--UI-Red-10);
 
-  background: var(--Theme-Primary-Light-Surface-Normal, #f7e1d5);
+  background: var(--Scandic-Brand-Pale-Peach);
 }
 
 .themeTwo {
-  --font-color: var(--Brand-Forest-Strong, #093021);
-  --script-color: var(--UI-Green-70, #286806);
-  --divider-color: var(--UI-Green-10, #badda8);
+  --font-color: var(--Scandic-Brand-Dark-Green);
+  --script-color: var(--UI-Green-70);
+  --divider-color: var(--UI-Green-10);
 
-  background: var(--Brand-Forest-Subtle, #d2edaf);
+  background: var(--Scandic-Brand-Light-Green);
 }
 
 .themeThree {
-  --font-color: var(--Brand-Sea-Strong, #0d1440);
-  --script-color: var(--UI-Blue-70, #1555b4);
-  --divider-color: var(--UI-Blue-10, #c7d9f5);
+  --font-color: var(--Scandic-Brand-Dark-Blue);
+  --script-color: var(--UI-Blue-70);
+  --divider-color: var(--UI-Blue-10);
 
-  background: var(--Brand-Sea-Accent, #fff0c2);
+  background: var(--Scandic-Brand-Pale-Yellow);
 }
 
 .scriptContainer {
   display: grid;
-  gap: 1rem;
+  gap: var(--Spacing-x1);
 }
 
 .scriptedTitle {
   color: var(--script-color);
-
   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);
   letter-spacing: 0.48px;
-  padding: 1rem;
-
+  padding: var(--Spacing-x1);
   transform: rotate(-3deg);
 }
 
@@ -65,16 +62,15 @@
 
 .bodyText {
   color: var(--font-color);
-  text-align: center;
-
   font-size: var(--typography-Body-Regular-fontSize);
   font-weight: var(--typography-Body-Regular-fontWeight);
   line-height: var(--typography-Body-Regular-lineHeight);
   letter-spacing: 0.096px;
+  text-align: center;
 }
 
 .buttonContainer {
   display: flex;
-  gap: 0.8rem;
+  gap: var(--Spacing-x1);
   justify-content: center;
 }

components/TempDesignSystem/CardGrid/cardGrid.module.css

@@ -1,58 +0,0 @@
-.gridContainer {
-  display: grid;
-  gap: 1.6rem;
-}
-
-.carousel {
-  display: grid;
-  grid-auto-columns: 80dvw;
-  grid-auto-flow: column;
-  gap: 1.6rem;
-
-  margin-left: -1.6rem;
-  margin-right: -1.6rem;
-  padding-left: 1.6rem;
-
-  overflow-x: scroll;
-  scroll-padding-left: 1.6rem;
-  scroll-snap-type: x mandatory;
-
-  scrollbar-width: none;
-  /* Hide scrollbar IE and Edge */
-  -ms-overflow-style: none;
-  /* Hide Scrollbar Firefox */
-}
-
-.carousel:last-child {
-  margin-right: 1.6rem;
-}
-
-.carousel > * {
-  scroll-snap-align: start;
-}
-
-/* Hide Scrollbar Chrome, Safari and Opera */
-.gridContainer::-webkit-scrollbar {
-  display: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .twoColumnGrid,
-  .twoPlusOne {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .threeColumnGrid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .twoPlusOne > *:last-child {
-    grid-column: span 2;
-  }
-
-  .carousel {
-    grid-auto-flow: unset;
-    margin: 0;
-    padding: 0;
-  }
-}

components/TempDesignSystem/CardGrid/cardGrid.ts

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

components/TempDesignSystem/CardGrid/index.tsx

@@ -1,23 +0,0 @@
-import React, { PropsWithChildren } from "react"
-
-import { CardGridProps } from "./cardGrid"
-import { cardGridVariants } from "./variants"
-
-export default function CardGrid({
-  children,
-  isMobileCarousel = false,
-  className,
-  variant,
-}: PropsWithChildren<CardGridProps>) {
-  return (
-    <section
-      className={cardGridVariants({
-        className,
-        variant,
-        isMobileCarousel,
-      })}
-    >
-      {children}
-    </section>
-  )
-}

components/TempDesignSystem/CardGrid/variants.ts

@@ -1,19 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./cardGrid.module.css"
-
-export const cardGridVariants = cva(styles.gridContainer, {
-  variants: {
-    isMobileCarousel: {
-      true: styles.carousel,
-    },
-    variant: {
-      twoColumnGrid: styles.twoColumnGrid,
-      threeColumnGrid: styles.threeColumnGrid,
-      twoPlusOne: styles.twoPlusOne,
-    },
-  },
-  defaultVariants: {
-    variant: "threeColumnGrid",
-  },
-})

components/TempDesignSystem/Chip/chip.module.css

@@ -0,0 +1,14 @@
+div.chip {
+  align-items: center;
+  border-radius: var(--Corner-radius-xLarge);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  height: 22px;
+  justify-content: center;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.primary {
+  background-color: var(--Scandic-Red-90);
+  color: var(--Scandic-Peach-50);
+}

components/TempDesignSystem/Chip/chip.ts

@@ -0,0 +1,7 @@
+import { chipVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface ChipProps
+  extends React.HtmlHTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof chipVariants> {}

components/TempDesignSystem/Chip/index.tsx

@@ -0,0 +1,23 @@
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import { chipVariants } from "./variants"
+
+import type { ChipProps } from "./chip"
+
+export default function Chip({
+  children,
+  className,
+  intent,
+  variant,
+}: ChipProps) {
+  const classNames = chipVariants({
+    className,
+    intent,
+    variant,
+  })
+  return (
+    <Footnote asChild>
+      <div className={classNames}>{children}</div>
+    </Footnote>
+  )
+}

components/TempDesignSystem/Chip/variants.ts

@@ -0,0 +1,18 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./chip.module.css"
+
+export const chipVariants = cva(styles.chip, {
+  variants: {
+    intent: {
+      primary: styles.primary,
+    },
+    variant: {
+      default: styles.default,
+    },
+  },
+  defaultVariants: {
+    intent: "primary",
+    variant: "default",
+  },
+})

components/TempDesignSystem/Divider/divider.module.css

@@ -1,9 +1,18 @@
 .divider {
-  border-bottom-color: var(--Scandic-Brand-Burgundy);
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  height: 1px;
+  width: 100%;
 }
 
 .dotted {
   border-bottom-style: dotted;
 }
+
+.burgundy {
+  border-bottom-color: var(--Scandic-Brand-Burgundy);
+}
+
+.peach {
+  border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider);
+}

components/TempDesignSystem/Divider/divider.ts

@@ -3,5 +3,5 @@ import { dividerVariants } from "./variants"
 import type { VariantProps } from "class-variance-authority"
 
 export interface DividerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
     VariantProps<typeof dividerVariants> {}

components/TempDesignSystem/Divider/index.tsx

@@ -2,6 +2,7 @@ import { dividerVariants } from "./variants"
 
 import type { DividerProps } from "./divider"
 
-export default function Divider({ className, variant }: DividerProps) {
-  return <div className={dividerVariants({ className, variant })} />
+export default function Divider({ className, color, variant }: DividerProps) {
+  const classNames = dividerVariants({ className, color, variant })
+  return <div className={classNames} />
 }

components/TempDesignSystem/Divider/variants.ts

@@ -4,12 +4,17 @@ import styles from "./divider.module.css"
 
 export const dividerVariants = cva(styles.divider, {
   variants: {
+    color: {
+      burgundy: styles.burgundy,
+      peach: styles.peach,
+    },
     variant: {
       default: styles.default,
       dotted: styles.dotted,
     },
   },
   defaultVariants: {
+    color: "burgundy",
     variant: "default",
   },
 })

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

@@ -1,34 +1,34 @@
 .container {
-  --select-border: 2px solid var(--some-black-color, #757575);
-  --select-radius: 0.4rem;
+  --select-border: 2px solid var(--UI-Grey-60);
   --select-width: min(28rem, 100%);
 }
 
 .comboBoxContainer {
-  background-color: var(--some-white-color, #fff);
+  background-color: var(--Main-Grey-White);
   display: grid;
   grid-template-areas: "content";
   width: var(--select-width);
 }
 
 .input {
-  background-color: var(--some-white-color, #fff);
+  background-color: var(--Main-Grey-White);
   border: var(--select-border);
-  border-radius: var(--select-radius);
+  border-radius: var(--Corner-radius-Small);
   grid-area: content;
-  height: 4rem;
-  padding: 0.8rem 1.6rem;
+  height: 40px;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
   width: var(--select-width);
 }
 
 .input,
 .listBoxItem {
-  color: var(--some-black-color, #757575);
+  color: var(--UI-Grey-60);
   font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 400;
-  letter-spacing: -1.5%;
-  line-height: 2.4rem;
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  letter-spacing: var--typography-Body-Regular-letterSpacing;
+  line-height: var(--typography-Body-Regular-lineHeight);
 }
 
 .button {
@@ -39,23 +39,19 @@
   height: 100%;
   justify-self: flex-end;
   padding-left: 0;
-  padding-right: 1.6rem;
+  padding-right: var(--Spacing-x2);
 }
 
 .popover {
-  background-color: var(--some-white-color, #fff);
+  background-color: var(--Main-Grey-White);
   border: var(--select-border);
-  border-radius: var(--select-radius);
+  border-radius: var(--Corner-radius-Small);
   overflow: auto;
-  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
+    var(--Spacing-x1);
   width: var(--select-width);
 }
 
 .listBoxItem {
-  padding: 0 0.8rem;
-}
-
-.listBoxItem[data-selected="true"],
-.listBoxItem[data-focused="true"] {
-  background-color: rgba(75, 75, 75, 0.2);
+  padding: 0 var(--Spacing-x1);
 }

components/TempDesignSystem/Form/Date/date.module.css

@@ -1,3 +1,4 @@
+/* Leaving, will most likely get deleted */
 .container {
   --border: 2px solid var(--some-black-color, #757575);
   --radius: 0.4rem;

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

@@ -1,8 +1,8 @@
 .message {
-  color: var(--some-red-color, #d64242);
+  color: var(--Scandic-Red-60);
   font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.4rem;
-  font-weight: 400;
-  line-height: 2.2rem;
-  margin: 0.4rem 0 0;
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  margin: var(--Spacing-x-half) 0 0;
 }

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

@@ -1,13 +1,13 @@
 .input {
-  border: 0.2rem solid var(--some-black-color, #757575);
-  border-radius: 0.4rem;
-  color: var(--some-black-color, #757575);
+  border: 2px solid var(--UI-Grey-60);
+  border-radius: var(--Corner-radius-Small);
+  color: var(--UI-Grey-60);
   font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 400;
-  height: 4rem;
-  letter-spacing: -1.5%;
-  line-height: 2.4rem;
-  padding: 0.8rem 1.6rem;
-  width: min(28rem, 100%);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  height: 40px;
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  width: min(280px, 100%);
 }

components/TempDesignSystem/Form/Phone/phone.module.css

@@ -1,25 +1,26 @@
 .phone {
-  --react-international-phone-border-color: var(--some-black-color, #757575);
-  --react-international-phone-border-radius: 0.4rem;
-  --react-international-phone-font-size: 1.6rem;
-  --react-international-phone-height: 4rem;
-  --react-international-phone-text-color: color:
-    var(--some-black-color, #757575);
+  --react-international-phone-border-color: var(--UI-Grey-60);
+  --react-international-phone-border-radius: var(--Corner-radius-Small);
+  --react-international-phone-font-size: var(
+    --typography-Body-Regular-fontSize
+  );
+  --react-international-phone-height: 40px;
+  --react-international-phone-text-color: var(--UI-Grey-60);
 }
 
 .phone :global(.react-international-phone-input-container) {
   display: grid;
   /* r-i-p sets their width dynamically and doesn't respect the width property of its parent */
-  grid-template-columns: 4.7rem minmax(20.3rem, 1fr);
-  width: min(28rem, 100%);
+  grid-template-columns: 470px minmax(203px, 1fr);
+  width: min(280px, 100%);
 }
 
 /* react-international-phone only exposes variables to change border-color */
 .phone :global(.react-international-phone-country-selector-button),
 .phone :global(.react-international-phone-input) {
-  border-width: 0.2rem;
+  border-width: 2px;
 }
 
 .phone :global(.react-international-phone-input) {
-  padding: 0.8rem 1.6rem;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
 }

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

@@ -6,61 +6,60 @@
   color: var(--Base-Text-UI-Placeholder);
   font-family: var(--typography-Footnote-Regular-fontFamily);
   font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: 400;
-  line-height: 100%;
+  font-weight: var(--typography-Footnote-Regular-fontWeight);
+  line-height: var(--typography-Footnote-Regular-lineHeight);
 }
 
 .select {
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: var(--Corner-radius-Medium);
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x-half);
-  border: 1px solid var(--Base-Border-Normal);
-  border-radius: var(--Corner-radius-Medium);
 }
 
 .select[data-focused="true"] {
-  border: 1px solid var(--UI-Text-Active, #0d1f5f);
+  border: 1px solid var(--Scandic-Blue-90);
   outline: none;
 }
 
 .input {
-  display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
   background-color: var(--Scandic-Opacity-White-100);
   border: none;
   border-radius: var(--Corner-radius-Medium);
   color: var(--Base-Text-UI-High-contrast);
-  height: 56px;
-  font-family: var(--ff-fira-sans);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  height: 560px;
+  font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: 400;
+  font-weight: var(--typography-Body-Regular-fontWeight);
   letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  line-height: 100%;
+  line-height: var(--typography-Body-Regular-lineHeight);
   outline: none;
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   text-align: left;
 }
 
 .inputContentWrapper {
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  /*6px in Figma but not available as variable*/
   gap: var(--Spacing-x-half);
   flex: 1 0 0;
 }
 
 .popover {
-  background-color: var(--some-white-color, #fff);
+  background-color: var(--Main-Grey-White);
   border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
   display: inline-flex;
   flex-direction: column;
   font-size: var(--typography-Body-Regular-fontSize);
   gap: var(--Spacing-x1);
   overflow: auto;
   width: 100%;
-  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
 }
 
 .listBox {
@@ -80,4 +79,4 @@
 
 .listBoxItem[data-selected="true"] {
   font-weight: 500;
-}
+}

components/TempDesignSystem/Grids/Dynamic/index.tsx

@@ -1,8 +1,8 @@
 import Item from "./Item"
 
-import styles from "./grid.module.css"
+import styles from "./dynamic.module.css"
 
-import type { GridProps, Order, RowSpan } from "./grid"
+import type { GridProps, Order, RowSpan } from "./dynamic"
 
 export default function Grid({ children, items, tag = "section" }: GridProps) {
   const Elm = tag

components/TempDesignSystem/Grids/Scrollable/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./scrollableGrid.module.css"
+
+export default function Scrollable({ children }: React.PropsWithChildren) {
+  return <section className={styles.carousel}>{children}</section>
+}

components/TempDesignSystem/Grids/Scrollable/scrollableGrid.module.css

@@ -0,0 +1,38 @@
+.carousel {
+  display: grid;
+  grid-auto-columns: 350px;
+  grid-auto-flow: column;
+  gap: var(--Spacing-x2);
+  margin-left: calc(0 - var(--Spacing-x2));
+  margin-right: calc(0 - var(--Spacing-x2));
+  overflow-x: scroll;
+  scroll-padding-left: var(--Spacing-x2);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+}
+
+.carousel > * {
+  scroll-snap-align: start;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.carousel::-webkit-scrollbar {
+  display: none;
+}
+
+/* 3 cols + 2 gaps (+ padding) before falling back to scroll */
+@media screen and (min-width: 964px) {
+  .carousel {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .carousel {
+    margin: 0;
+    padding: 0;
+  }
+}

components/TempDesignSystem/Grids/Stackable/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./stackable.module.css"
+
+export default function Stackable({ children }: React.PropsWithChildren) {
+  return <section className={styles.container}>{children}</section>
+}

components/TempDesignSystem/Grids/Stackable/stackable.module.css

@@ -0,0 +1,42 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.container::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .container {
+    grid-template-columns: repeat(2, minmax(370px, 1fr));
+  }
+}
+
+@media (min-width: 1367px) {
+  .container:has(> :nth-child(2)) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .container:has(> :nth-child(3)) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .container:has(> :nth-child(4), > :nth-child(5)) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .container:has(> :nth-child(6)) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .container:has(> :nth-child(7), > :nth-child(8)) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .container:has(> :nth-child(9)) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}

components/TempDesignSystem/Grids/index.tsx

@@ -0,0 +1,11 @@
+import Dynamic from "./Dynamic"
+import Scrollable from "./Scrollable"
+import Stackable from "./Stackable"
+
+export default function Grids() {
+  return null
+}
+
+Grids.Dynamic = Dynamic
+Grids.Scrollable = Scrollable
+Grids.Stackable = Stackable

components/TempDesignSystem/Link/index.tsx

@@ -8,6 +8,7 @@ import type { LinkProps } from "./link"
 
 export default function Link({
   className,
+  color,
   href,
   partialMatch = false,
   size,
@@ -23,6 +24,7 @@ export default function Link({
   const classNames = linkVariants({
     active: isActive,
     className,
+    color,
     size,
     variant,
   })

components/TempDesignSystem/Link/link.module.css

@@ -6,36 +6,97 @@
   font-family: var(--typography-Body-Regular-fontFamily);
 }
 
+.breadcrumb {
+  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);
+}
+
 .myPage {
-  color: var(--some-black-color, #000);
-  font-family: var(--ff-fira-sans);
-  font-size: 1.6rem;
-  font-weight: 600;
-  letter-spacing: 0.6%;
-  line-height: 2.4rem;
+  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: underline;
 }
 
+.shortcut {
+  align-items: center;
+  border-bottom: 0.5px solid var(--Scandic-Beige-20);
+  display: grid;
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr auto;
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  padding: var(--Spacing-x3);
+}
+
+.shortcut:last-of-type {
+  border-bottom: none;
+}
+
 .sidebar {
   align-items: center;
-  color: var(--some-text-color, #111);
+  border-radius: var(--Corner-radius-Medium);
   display: flex;
-  font-size: 1.6rem;
-  font-weight: 400;
-  gap: 0.6rem;
-  line-height: 1.9rem;
-  position: relative;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x1);
 }
 
 .activeSidebar {
-  font-weight: 600;
+  background-color: var(--Scandic-Brand-Warm-White);
 }
 
-.activeSidebar::before {
-  bottom: -0.4rem;
-  background-color: var(--some-text-color, #000);
-  content: "";
-  height: 0.2rem;
-  position: absolute;
-  width: 100%;
+.black {
+  color: #000;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.peach80 {
+  color: var(--Scandic-Peach-80);
+}
+
+.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);
+}
+
+.activeRegular {
+  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);
+}
+
+.small {
+  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);
+}
+
+.activeSmall {
+  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);
 }

components/TempDesignSystem/Link/link.ts

@@ -3,7 +3,7 @@ import { linkVariants } from "./variants"
 import type { VariantProps } from "class-variance-authority"
 
 export interface LinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color">,
     VariantProps<typeof linkVariants> {
   href: string
   partialMatch?: boolean

components/TempDesignSystem/Link/variants.ts

@@ -7,20 +7,39 @@ export const linkVariants = cva(styles.link, {
     active: {
       true: styles.active,
     },
-    size: {},
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+      peach80: styles.peach80,
+    },
+    size: {
+      small: styles.small,
+      regular: styles.regular,
+    },
     variant: {
+      breadcrumb: styles.breadcrumb,
       default: styles.default,
       myPage: styles.myPage,
+      shortcut: styles.shortcut,
       sidebar: styles.sidebar,
     },
   },
   defaultVariants: {
+    color: "black",
     variant: "default",
   },
   compoundVariants: [
     {
-      class: styles.activeSidebar,
+      class: `${styles.activeSidebar} ${styles.activeRegular}`,
       active: true,
+      size: "regular",
+      variant: "sidebar",
+    },
+    {
+      class: `${styles.activeSidebar} ${styles.activeSmall}`,
+      active: true,
+      size: "small",
       variant: "sidebar",
     },
   ],

components/TempDesignSystem/ProgressBar/progressbar.module.css

@@ -1,12 +1,12 @@
 .bar {
-  background-color: var(--some-white-color, #fff);
-  border-radius: 4rem;
-  height: 2rem;
+  background-color: var(--Main-Grey-White);
+  border-radius: 40px;
+  height: 20px;
   width: 100%;
 }
 
 .progress {
-  background-color: var(--some-black-color, #1f1f1f);
-  border-radius: 4rem;
-  height: 2rem;
+  background-color: var(--Scandic-Opacity-Almost-Black-100);
+  border-radius: 40px;
+  height: 20px;
 }

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

@@ -1,4 +1,5 @@
 .text {
+  display: block;
   font-family: var(--typography-Script-1-fontFamily);
   text-transform: none;
 }
@@ -25,6 +26,14 @@
   line-height: var(--typography-Script-2-lineHeight);
 }
 
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }
@@ -32,3 +41,7 @@
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
 }
+
+.plosa {
+  color: var(--Theme-Primary-Light-On-Surface-Accent);
+}

components/TempDesignSystem/Text/BiroScript/biroScript.ts

@@ -4,4 +4,6 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface BiroScriptProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
-    VariantProps<typeof biroScriptVariants> {}
+    VariantProps<typeof biroScriptVariants> {
+  asChild?: boolean
+}

components/TempDesignSystem/Text/BiroScript/index.tsx

@@ -1,17 +1,23 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { biroScriptVariants } from "./variants"
 
 import type { BiroScriptProps } from "./biroScript"
 
 export default function BiroScript({
-  children,
+  asChild = false,
   className,
   color,
+  textAlign,
   type,
+  ...props
 }: BiroScriptProps) {
+  const Comp = asChild ? Slot : "span"
   const classNames = biroScriptVariants({
     className,
     color,
+    textAlign,
     type,
   })
-  return <span className={classNames}>{children}</span>
+  return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -7,6 +7,11 @@ const config = {
     color: {
       burgundy: styles.burgundy,
       pale: styles.pale,
+      primaryLightOnSurfaceAccent: styles.plosa,
+    },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
     },
     type: {
       one: styles.one,

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

@@ -30,6 +30,14 @@
   text-decoration: var(--typography-Body-Underlined-textDecoration);
 }
 
+.textAlignCenter {
+  text-align: center;
+}
+
+.textAlignLeft {
+  text-align: left;
+}
+
 .black {
   /* No black variable exist yet */
   color: #000;

components/TempDesignSystem/Text/Body/body.ts

@@ -4,4 +4,6 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface BodyProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof bodyVariants> {}
+    VariantProps<typeof bodyVariants> {
+  asChild?: boolean
+}

components/TempDesignSystem/Text/Body/index.tsx

@@ -1,17 +1,23 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { bodyVariants } from "./variants"
 
 import type { BodyProps } from "./body"
 
 export default function Body({
-  children,
+  asChild = false,
   className = "",
   color,
+  textAlign,
   textTransform,
+  ...props
 }: BodyProps) {
+  const Comp = asChild ? Slot : "p"
   const classNames = bodyVariants({
     className,
     color,
+    textAlign,
     textTransform,
   })
-  return <p className={classNames}>{children}</p>
+  return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Body/variants.ts

@@ -9,6 +9,10 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
     },
+    textAlign: {
+      center: styles.textAlignCenter,
+      left: styles.textAlignLeft,
+    },
     textTransform: {
       bold: styles.bold,
       regular: styles.regular,
@@ -17,6 +21,7 @@ const config = {
   },
   defaultVariants: {
     color: "black",
+    textAlign: "left",
     textTransform: "regular",
   },
 } as const

components/TempDesignSystem/Text/Caption/caption.ts

@@ -4,4 +4,6 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface CaptionProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof captionVariants> {}
+    VariantProps<typeof captionVariants> {
+  asChild?: boolean
+}

components/TempDesignSystem/Text/Caption/index.tsx

@@ -1,17 +1,21 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { captionVariants } from "./variants"
 
 import type { CaptionProps } from "./caption"
 
 export default function Caption({
-  children,
+  asChild = false,
   className = "",
   color,
   textTransform,
+  ...props
 }: CaptionProps) {
+  const Comp = asChild ? Slot : "p"
   const classNames = captionVariants({
     className,
     color,
     textTransform,
   })
-  return <p className={classNames}>{children}</p>
+  return <Comp className={classNames} {...props} />
 }

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

@@ -1,4 +1,4 @@
-.body {
+.footnote {
   margin: 0;
   padding: 0;
 }
@@ -21,6 +21,14 @@
   text-decoration: var(--typography-Footnote-Regular-textDecoration);
 }
 
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
 .black {
   /* No black variable exist yet */
   color: #000;

components/TempDesignSystem/Text/Footnote/footnote.ts

@@ -3,5 +3,7 @@ import { footnoteVariants } from "./variants"
 import type { VariantProps } from "class-variance-authority"
 
 export interface FootnoteProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof footnoteVariants> {}
+  extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
+    VariantProps<typeof footnoteVariants> {
+  asChild?: boolean
+}

components/TempDesignSystem/Text/Footnote/index.tsx

@@ -1,17 +1,23 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { footnoteVariants } from "./variants"
 
 import type { FootnoteProps } from "./footnote"
 
 export default function Footnote({
-  children,
+  asChild = false,
   className = "",
   color,
+  textAlign,
   textTransform,
+  ...props
 }: FootnoteProps) {
+  const Comp = asChild ? Slot : "p"
   const classNames = footnoteVariants({
     className,
     color,
+    textAlign,
     textTransform,
   })
-  return <p className={classNames}>{children}</p>
+  return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -9,13 +9,16 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
     },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
     textTransform: {
       bold: styles.bold,
       regular: styles.regular,
     },
   },
   defaultVariants: {
-    color: "black",
     textTransform: "regular",
   },
 } as const

components/TempDesignSystem/Text/Subtitle/index.tsx

@@ -1,21 +1,27 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { subtitleVariants } from "./variants"
 
 import type { SubtitleProps } from "./subtitle"
 
 export default function Subtitle({
-  children,
+  asChild = false,
   className = "",
   color,
   hideEmpty = true,
+  textAlign,
   textTransform,
+  ...props
 }: SubtitleProps) {
-  if (hideEmpty && !children) {
+  if (hideEmpty && !props.children) {
     return null
   }
+  const Comp = asChild ? Slot : "p"
   const classNames = subtitleVariants({
     className,
     color,
+    textAlign,
     textTransform,
   })
-  return <p className={classNames}>{children}</p>
+  return <Comp className={classNames} {...props} />
 }

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

@@ -8,8 +8,8 @@
   font-weight: var(--typography-Subtitle-fontWeight);
   letter-spacing: var(--typography-Subtitle-letterSpacing);
   line-height: var(--typography-Subtitle-lineHeight);
-  margin: 0;
-  padding: 0;
+  margin: var(--Spacing-x0);
+  padding: var(--Spacing-x0);
 }
 
 .regular {
@@ -20,6 +20,14 @@
   text-transform: uppercase;
 }
 
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }

components/TempDesignSystem/Text/Subtitle/subtitle.ts

@@ -5,5 +5,6 @@ import type { VariantProps } from "class-variance-authority"
 export interface SubtitleProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
     VariantProps<typeof subtitleVariants> {
+  asChild?: boolean
   hideEmpty?: boolean
 }

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -8,6 +8,10 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
     },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
     textTransform: {
       regular: styles.regular,
       uppercase: styles.uppercase,
@@ -15,6 +19,7 @@ const config = {
   },
   defaultVariants: {
     color: "burgundy",
+    textAlign: "left",
     textTransform: "regular",
   },
 } as const

components/TempDesignSystem/Text/Title/index.tsx

@@ -9,6 +9,7 @@ export default function Title({
   color,
   hideEmpty = true,
   level = "h1",
+  textAlign,
   textTransform,
 }: HeadingProps) {
   if (hideEmpty && !children) {
@@ -18,6 +19,7 @@ export default function Title({
   const classNames = headingVariants({
     className,
     color,
+    textAlign,
     textTransform,
     type: as ?? level,
   })

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

@@ -76,6 +76,14 @@
   text-transform: uppercase;
 }
 
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }

components/TempDesignSystem/Text/Title/variants.ts

@@ -8,6 +8,10 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
     },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
     textTransform: {
       regular: styles.regular,
       uppercase: styles.uppercase,
@@ -23,6 +27,7 @@ const config = {
   },
   defaultVariants: {
     color: "burgundy",
+    textAlign: "left",
     textTransform: "uppercase",
     type: "h1",
   },