feat: add mobile ui to calendar

components/TempDesignSystem/Divider/divider.module.css

@@ -1,40 +1,47 @@
 .divider {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
+  pointer-events: none;
+}
+
+.horizontal {
   height: 1px;
   width: 100%;
 }
 
-.dotted {
-  border-bottom-style: dotted;
+.vertical {
+  height: 100%;
+  width: 1px;
 }
 
 .burgundy {
-  border-bottom-color: var(--Scandic-Brand-Burgundy);
+  background-color: var(--Scandic-Brand-Burgundy);
 }
 
 .pale {
-  border-bottom-color: var(--Primary-Dark-On-Surface-Text);
+  background-color: var(--Primary-Dark-On-Surface-Text);
 }
 
 .peach {
-  border-bottom-color: var(--Primary-Light-On-Surface-Divider);
+  background-color: var(--Primary-Light-On-Surface-Divider);
 }
 
 .beige {
-  border-bottom-color: var(--Scandic-Beige-20);
+  background-color: var(--Scandic-Beige-20);
 }
 
 .white {
-  border-bottom-color: var(--UI-Opacity-White-100);
+  background-color: var(--UI-Opacity-White-100);
 }
 
 .subtle {
-  border-bottom-color: var(--Base-Border-Subtle);
+  background-color: var(--Base-Border-Subtle);
 }
 
 .primaryLightSubtle {
-  border-bottom-color: var(--Primary-Light-On-Surface-Divider-subtle);
+  background-color: var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.baseSurfaceSubtleNormal {
+  background-color: var(--Base-Surface-Subtle-Normal);
 }
 
 .opacity100 {

components/TempDesignSystem/Divider/variants.ts

@@ -5,6 +5,7 @@ import styles from "./divider.module.css"
 export const dividerVariants = cva(styles.divider, {
   variants: {
     color: {
+      baseSurfaceSubtleNormal: styles.baseSurfaceSubtleNormal,
       beige: styles.beige,
       burgundy: styles.burgundy,
       pale: styles.pale,
@@ -18,13 +19,13 @@ export const dividerVariants = cva(styles.divider, {
       8: styles.opacity8,
     },
     variant: {
-      default: styles.default,
-      dotted: styles.dotted,
+      horizontal: styles.horizontal,
+      vertical: styles.vertical,
     },
   },
   defaultVariants: {
     color: "burgundy",
     opacity: 100,
-    variant: "default",
+    variant: "horizontal",
   },
 })

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

@@ -63,6 +63,10 @@ p.caption {
   color: var(--UI-Text-Active);
 }
 
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
 .center {
   text-align: center;
 }

components/TempDesignSystem/Text/Caption/variants.ts

@@ -12,6 +12,7 @@ const config = {
       red: styles.red,
       white: styles.white,
       uiTextActive: styles.uiTextActive,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
     },
     textTransform: {
       bold: styles.bold,