fix(SW-812): styling fixes for the header and related components

components/TempDesignSystem/Link/index.tsx

@@ -23,6 +23,7 @@ export default function Link({
   scroll = true,
   prefetch,
   variant,
+  weight,
   trackingId,
   onClick,
   /**
@@ -45,6 +46,7 @@ export default function Link({
     textDecoration,
     color,
     size,
+    weight,
     variant,
   })
 

components/TempDesignSystem/Link/link.module.css

@@ -154,20 +154,25 @@
   color: var(--Base-Text-Medium-contrast);
 }
 
-.red {
-  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
-}
-
 .peach80:hover,
 .peach80:active {
   color: var(--Base-Text-High-contrast);
 }
 
+.peach80 *,
+.peach80 * {
+  fill: var(--Base-Text-Medium-contrast);
+}
+
 .peach80:hover *,
 .peach80:active * {
   fill: var(--Base-Text-High-contrast);
 }
 
+.red {
+  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
+}
+
 .white {
   color: var(--Base-Button-Primary-On-Fill-Normal);
 }
@@ -213,6 +218,14 @@
   letter-spacing: var(--typography-Caption-Bold-letterSpacing);
   line-height: var(--typography-Caption-Bold-lineHeight);
 }
+.bold {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500
+    /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */;
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+}
 
 .menu {
   display: flex;
@@ -223,11 +236,6 @@
   padding: var(--Spacing-x1);
   gap: var(--Spacing-x-one-and-half);
   color: var(--Base-Text-High-contrast);
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
   border-radius: var(--Corner-radius-Medium);
 }
 
@@ -236,6 +244,12 @@
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 
+.navigation {
+  color: var(--Base-Text-High-contrast);
+  text-decoration: none;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
 .signupVerification {
   background-color: var(--Base-Button-Primary-Fill-Normal);
   color: var(--Base-Button-Inverted-Fill-Normal);

components/TempDesignSystem/Link/variants.ts

@@ -26,12 +26,16 @@ export const linkVariants = cva(styles.link, {
       none: styles.noDecoration,
       underline: styles.underline,
     },
+    weight: {
+      bold: styles.bold,
+    },
     variant: {
       breadcrumb: styles.breadcrumb,
       default: styles.default,
       icon: styles.icon,
       underscored: styles.underscored,
       myPageMobileDropdown: styles.myPageMobileDropdown,
+      navigation: styles.navigation,
       menu: styles.menu,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,