feat: guest information form enter details

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

@@ -92,6 +92,10 @@
   color: var(--Base-Text-Medium-contrast);
 }
 
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+
 .uiTextPlaceholder {
   color: var(--UI-Text-Placeholder);
 }

components/TempDesignSystem/Text/Body/variants.ts

@@ -15,6 +15,7 @@ const config = {
       white: styles.white,
       peach50: styles.peach50,
       peach80: styles.peach80,
+      uiTextHighContrast: styles.uiTextHighContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     textAlign: {

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

@@ -35,6 +35,10 @@ p.caption {
   text-decoration: var(--typography-Caption-Regular-textDecoration);
 }
 
+.baseTextAccent {
+  color: var(--Base-Text-Accent);
+}
+
 .black {
   color: var(--Main-Grey-100);
 }
@@ -67,10 +71,14 @@ p.caption {
   color: var(--UI-Text-Medium-contrast);
 }
 
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+
 .center {
   text-align: center;
 }
 
 .left {
   text-align: left;
-}
+}

components/TempDesignSystem/Text/Caption/index.tsx

@@ -11,6 +11,7 @@ export default function Caption({
   fontOnly = false,
   textAlign,
   textTransform,
+  uppercase,
   ...props
 }: CaptionProps) {
   const Comp = asChild ? Slot : "p"
@@ -18,12 +19,14 @@ export default function Caption({
     ? fontOnlycaptionVariants({
         className,
         textTransform,
+        uppercase,
       })
     : captionVariants({
         className,
         color,
         textTransform,
         textAlign,
+        uppercase,
       })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Caption/variants.ts

@@ -5,12 +5,14 @@ import styles from "./caption.module.css"
 const config = {
   variants: {
     color: {
+      baseTextAccent: styles.baseTextAccent,
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
       textMediumContrast: styles.textMediumContrast,
       red: styles.red,
       white: styles.white,
+      uiTextHighContrast: styles.uiTextHighContrast,
       uiTextActive: styles.uiTextActive,
       uiTextMediumContrast: styles.uiTextMediumContrast,
     },
@@ -23,6 +25,9 @@ const config = {
       center: styles.center,
       left: styles.left,
     },
+    uppercase: {
+      true: styles.uppercase,
+    },
   },
   defaultVariants: {
     color: "black",
@@ -39,6 +44,9 @@ const fontOnlyConfig = {
       regular: styles.regular,
       uppercase: styles.uppercase,
     },
+    uppercase: {
+      true: styles.uppercase,
+    },
   },
   defaultVariants: {
     textTransform: "regular",

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

@@ -59,7 +59,7 @@
   color: var(--Scandic-Peach-50);
 }
 
-.textMediumContrast {
+.uiTextMediumContrast {
   color: var(--UI-Text-Medium-contrast);
 }
 

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -9,7 +9,7 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
       peach50: styles.peach50,
-      textMediumContrast: styles.textMediumContrast,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     textAlign: {