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

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -50,7 +50,12 @@ export default function AccordionItem({
         <summary className={styles.summary}>
           {IconComp && <IconComp className={styles.icon} color="burgundy" />}
           <span className={styles.title}>{title}</span>
-          <ChevronDownIcon className={styles.chevron} color="burgundy" />
+          <ChevronDownIcon
+            className={styles.chevron}
+            color="burgundy"
+            width={20}
+            height={20}
+          />
         </summary>
         <div ref={contentRef} className={styles.content}>
           {children}

components/TempDesignSystem/Alert/Sidepeek/index.tsx

@@ -30,7 +30,7 @@ export default function AlertSidepeek({
         wrapping
       >
         {ctaText}
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
       </Button>
       {sidePeekIsOpen ? (
         <SidePeek

components/TempDesignSystem/Form/SelectChevron/index.tsx

@@ -5,7 +5,7 @@ import styles from "./chevron.module.css"
 export default function SelectChevron() {
   return (
     <span aria-hidden="true" className={styles.chevron}>
-      <ChevronDownIcon color="grey80" />
+      <ChevronDownIcon color="grey80" width={20} height={20} />
     </span>
   )
 }

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,

components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx

@@ -31,7 +31,7 @@ export default function TeaserCardSidepeek({
         wrapping
       >
         {button.call_to_action_text}
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
       </Button>
       <SidePeek
         title={heading}

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

@@ -73,11 +73,11 @@
 }
 
 .textMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
+  color: var(--Base-Text-Medium-contrast);
 }
 
 .textHighContrast {
-  color: var(--UI-Text-High-contrast);
+  color: var(--Base-Text-High-contrast);
 }
 
 .baseTextMediumContrast {