Merge branch 'master' into feature/tracking

components/TempDesignSystem/Link/index.tsx

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

components/TempDesignSystem/Link/link.module.css

@@ -65,7 +65,6 @@
 
 .shortcut {
   align-items: center;
-  border-bottom: 1px solid var(--Base-Border-Subtle);
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
@@ -74,7 +73,13 @@
   grid-template-columns: 1fr auto;
   letter-spacing: var(--typography-Body-Regular-letterSpacing);
   line-height: var(--typography-Body-Regular-lineHeight);
-  padding: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  transition: background-color 0.3s;
+}
+
+.shortcut:hover {
+  background-color: var(--UI-Input-Controls-Surface-Hover);
 }
 
 .shortcut:last-of-type {
@@ -149,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);
 }
@@ -208,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;
@@ -218,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);
 }
 
@@ -231,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,