feat(WEB-162): final design edit profile page

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

@@ -5,18 +5,22 @@
 }
 
 .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);
@@ -31,7 +35,7 @@
 }
 
 .black {
-  color: #000;
+  color: var(--Main-Grey-100);
 }
 
 .burgundy {
@@ -44,4 +48,4 @@
 
 .plosa {
   color: var(--Theme-Primary-Light-On-Surface-Accent);
-}
+}

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

@@ -43,8 +43,7 @@
 }
 
 .black {
-  /* No black variable exist yet */
-  color: #000;
+  color: var(--Main-Grey-100);
 }
 
 .burgundy {

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

@@ -26,8 +26,7 @@
 }
 
 .black {
-  /* No black variable exist yet */
-  color: #000;
+  color: var(--Main-Grey-100);
 }
 
 .burgundy {

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

@@ -34,8 +34,7 @@
 }
 
 .black {
-  /* No black variable exist yet */
-  color: #000;
+  color: var(--Main-Grey-100);
 }
 
 .burgundy {

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

@@ -28,6 +28,10 @@
   text-align: left;
 }
 
+.black {
+  color: var(--Main-Grey-100);
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -5,6 +5,7 @@ import styles from "./subtitle.module.css"
 const config = {
   variants: {
     color: {
+      black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
     },

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

@@ -85,7 +85,7 @@
 }
 
 .black {
-  color: #000;
+  color: var(--Main-Grey-100);
 }
 
 .burgundy {
@@ -96,6 +96,10 @@
   color: var(--Scandic-Brand-Pale-Peach);
 }
 
+.peach80 {
+  color: var(--Scandic-Peach-80);
+}
+
 .red {
   color: var(--Scandic-Brand-Scandic-Red);
 }

components/TempDesignSystem/Text/Title/variants.ts

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