feat(WEB-162): final design for my profile page

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

@@ -5,22 +5,18 @@
 }
 
 .one {
-  font-size: clamp(
-    var(--typography-Script-1-Mobile-fontSize),
-    1.3vw + 14px,
-    var(--typography-Script-1-Desktop-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: clamp(
-    var(--typography-Script-2-Mobile-fontSize),
-    0.6vw + 15px,
-    var(--typography-Script-2-Desktop-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);
@@ -48,4 +44,4 @@
 
 .plosa {
   color: var(--Theme-Primary-Light-On-Surface-Accent);
-}
+}

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

@@ -54,3 +54,7 @@
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
 }
+
+.red {
+  color: var(--Scandic-Brand-Scandic-Red);
+}

components/TempDesignSystem/Text/Body/body.ts

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

components/TempDesignSystem/Text/Body/index.tsx

@@ -16,15 +16,15 @@ export default function Body({
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? bodyFontOnlyVariants({
-        className,
-        textAlign,
-        textTransform,
-      })
+      className,
+      textAlign,
+      textTransform,
+    })
     : bodyVariants({
-        className,
-        color,
-        textAlign,
-        textTransform,
-      })
+      className,
+      color,
+      textAlign,
+      textTransform,
+    })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Body/variants.ts

@@ -8,6 +8,7 @@ const config = {
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      red: styles.red,
     },
     textAlign: {
       center: styles.textAlignCenter,

components/TempDesignSystem/Text/Caption/caption.ts

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

components/TempDesignSystem/Text/Caption/index.tsx

@@ -15,13 +15,13 @@ export default function Caption({
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? fontOnlycaptionVariants({
-        className,
-        textTransform,
-      })
+      className,
+      textTransform,
+    })
     : captionVariants({
-        className,
-        color,
-        textTransform,
-      })
+      className,
+      color,
+      textTransform,
+    })
   return <Comp className={classNames} {...props} />
 }

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

@@ -44,4 +44,4 @@
 
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
-}
+}

components/TempDesignSystem/Text/Footnote/footnote.ts

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

components/TempDesignSystem/Text/Footnote/index.tsx

@@ -16,15 +16,15 @@ export default function Footnote({
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? footnoteFontOnlyVariants({
-        className,
-        textAlign,
-        textTransform,
-      })
+      className,
+      textAlign,
+      textTransform,
+    })
     : footnoteVariants({
-        className,
-        color,
-        textAlign,
-        textTransform,
-      })
+      className,
+      color,
+      textAlign,
+      textTransform,
+    })
   return <Comp className={classNames} {...props} />
 }

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

@@ -84,6 +84,10 @@
   text-align: left;
 }
 
+.black {
+  color: #000;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }
@@ -91,3 +95,7 @@
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
 }
+
+.red {
+  color: var(--Scandic-Brand-Scandic-Red);
+}

components/TempDesignSystem/Text/Title/variants.ts

@@ -5,8 +5,10 @@ import styles from "./title.module.css"
 const config = {
   variants: {
     color: {
+      black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      red: styles.red,
     },
     textAlign: {
       center: styles.center,