feat: add mobile summary

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

@@ -25,6 +25,15 @@ p.caption {
   text-decoration: var(--typography-Caption-Labels-textDecoration);
 }
 
+.underline {
+  font-family: var(--typography-Caption-Underline-fontFamily);
+  font-size: var(--typography-Caption-Underline-fontSize);
+  font-weight: var(--typography-Caption-Underline-fontWeight);
+  letter-spacing: var(--typography-Caption-Underline-letterSpacing);
+  line-height: var(--typography-Caption-Underline-lineHeight);
+  text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
+}
+
 .regular {
   font-family: var(--typography-Caption-Regular-fontFamily);
   font-size: var(--typography-Caption-Regular-fontSize);
@@ -58,6 +67,10 @@ p.caption {
   color: var(--Base-Text-Medium-contrast);
 }
 
+.baseTextHighContrast {
+  color: var(--Base-Text-High-contrast);
+}
+
 .red {
   color: var(--Scandic-Brand-Scandic-Red);
 }

components/TempDesignSystem/Text/Caption/variants.ts

@@ -8,6 +8,7 @@ const config = {
       regular: styles.regular,
       bold: styles.bold,
       label: styles.labels,
+      underline: styles.underline,
     },
     color: {
       baseTextAccent: styles.baseTextAccent,
@@ -22,6 +23,7 @@ const config = {
       uiTextMediumContrast: styles.uiTextMediumContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
       disabled: styles.disabled,
+      baseTextHighContrast: styles.baseTextHighContrast,
     },
     textTransform: {
       uppercase: styles.uppercase,
@@ -48,6 +50,7 @@ const fontOnlyConfig = {
       regular: styles.regular,
       bold: styles.bold,
       label: styles.labels,
+      underline: styles.underline,
     },
     textTransform: {
       uppercase: styles.uppercase,