additional pr feedback

Author: rezrah

packages/react/src/SubNav/SubNav.module.css

@@ -91,8 +91,8 @@
 
 .SubNav__sub-menu--anchor {
   display: flex;
-  padding-block-end: var(--base-size-16);
-  padding-block-start: var(--base-size-16);
+  padding-block-start: var(--base-size-12);
+  padding-block-end: var(--base-size-20);
 }
 
 .SubNav__anchor-menu-outer-container--stuck {
@@ -104,7 +104,11 @@
   list-style-type: none;
   margin: 0;
   padding: 0;
-  gap: var(--base-size-24);
+  gap: var(--base-size-20);
+}
+
+.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label {
+  color: var(--brand-color-text-default);
 }
 
 .SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after,
@@ -118,13 +122,13 @@
 
 .SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after,
 .SubNav__link:active .SubNav__link-label::after {
-  background-color: var(--brand-color-text-default);
+  border-color: var(--brand-color-text-default);
   transform: scale(0.9, 1);
 }
 
 .SubNav__link[data-active='true'] .SubNav__link-label::after,
 .SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after {
-  background-color: var(--brand-color-text-default);
+  border-color: var(--brand-color-text-default);
   opacity: 1;
 }
 
@@ -146,14 +150,28 @@
   left: 0;
   width: 100%;
   height: 2px;
-  background-color: var(--brand-SubNav-color-link-active);
+  border-width: 2px;
+  border-bottom: var(--base-size-2) solid var(--brand-color-text-muted);
   transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast),
-    background-color var(--brand-animation-duration-fast);
+    border-color var(--brand-animation-duration-fast);
   opacity: 1;
   transform: scale(0);
   transform-origin: center;
 }
 
+.SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
+  border-color: var(--brand-color-text-default);
+}
+
+.SubNav__link:hover .SubNav__link-label {
+  transition: color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+  color: var(--brand-SubNav-color-link-active);
+}
+
+.SubNav__link:hover .SubNav__link-label::after {
+  border-color: var(--brand-color-text-default);
+}
+
 /*
  * Narrow breakpoint
  */
@@ -197,8 +215,8 @@
   }
 
   .SubNav__heading {
-    font-size: var(--base-size-20);
-    line-height: var(--base-size-20);
+    font-size: var(--base-size-16);
+    line-height: var(--base-size-24);
   }
 
   .SubNav--open {
@@ -243,6 +261,14 @@
     padding-block-end: var(--base-size-16);
   }
 
+  .SubNav__links-overlay--open .SubNav__link:hover .SubNav__link-label {
+    color: var(--brand-color-text-default);
+  }
+
+  .SubNav__links-overlay--open .SubNav__link--has-sub-menu:hover .SubNav__link-label {
+    color: var(--brand-color-text-muted);
+  }
+
   .SubNav__overlay-toggle {
     background-color: transparent;
     border: none;
@@ -331,12 +357,23 @@
     z-index: 100;
   }
 
+  .SubNav__link-label {
+    font-size: var(--brand-text-size-200);
+    font-weight: var(--base-text-weight-semibold);
+  }
+
   .SubNav__sub-menu--anchor {
     padding-inline: var(--base-size-16);
     padding-block-end: var(--base-size-16);
     padding-block-start: var(--base-size-16);
   }
 
+  .SubNav__sub-menu--anchor .SubNav__link-label {
+    font-size: var(--brand-text-size-100);
+    line-height: var(--brand-text-lineHeight-100);
+    letter-spacing: var(--brand-text-letterSpacing-100);
+  }
+
   .SubNav__sub-menu--anchor .SubNav__sub-menu-list {
     padding-inline-end: var(--base-size-32);
   }
@@ -411,8 +448,8 @@
   }
 
   .SubNav__heading {
-    font-size: var(--base-size-20);
-    line-height: var(--base-size-20);
+    font-size: calc(var(--base-size-20) - 2px);
+    line-height: var(--base-size-24);
   }
 
   .SubNav__heading-separator {
@@ -431,7 +468,7 @@
   .SubNav__links-overlay {
     align-items: center;
     display: flex;
-    gap: var(--base-size-24);
+    gap: var(--base-size-20);
     z-index: 92;
     flex-grow: 1;
   }
@@ -443,6 +480,11 @@
     padding: 4px 0;
   }
 
+  .SubNav__link-label {
+    font-size: var(--brand-text-size-100);
+    line-height: var(--brand-text-lineHeight-100);
+  }
+
   /* To fix hover distance between link and dropdown */
   .SubNav__link.SubNav__link--has-sub-menu::after {
     content: '';
@@ -464,6 +506,7 @@
     list-style: none;
     margin-block-start: var(--base-size-8);
     padding: var(--base-size-24);
+    padding-inline-end: var(--base-size-24);
     position: absolute;
     top: 100%;
     z-index: 9998;
@@ -473,7 +516,7 @@
     left: calc(var(--base-size-4) / 4 * -16);
     visibility: hidden;
     opacity: 0;
-    transform: scale(0.99) translateY(-0.7em);
+    transform: scale(0.99) translateY(-0.7em) translateX(-8px);
     transform-origin: top;
     display: flex;
     flex-direction: column;
@@ -484,7 +527,7 @@
   .SubNav__link--expanded .SubNav__sub-menu.SubNav__sub-menu--dropdown {
     visibility: visible;
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: scale(1) translateY(0) translateX(-8px);
     box-shadow: var(--brand-SubNav-shadow);
   }
 
@@ -507,17 +550,6 @@
     color: var(--brand-color-text-default) !important;
   }
 
-  .SubNav__sub-menu .SubNav__link-label {
-    font-weight: var(--brand-text-weight-100);
-    font-size: var(--brand-text-size-100);
-    line-height: var(--brand-text-lineHeight-100);
-    letter-spacing: var(--brand-text-letterSpacing-100);
-  }
-
-  .SubNav__sub-menu .SubNav__link:hover .SubNav__link-label {
-    color: var(--brand-SubNav-color-link-active);
-  }
-
   .SubNav__sub-menu--dropdown .SubNav__link-label::after {
     display: none;
   }

packages/react/src/SubNav/SubNav.module.css.d.ts

@@ -24,9 +24,9 @@ declare const styles: {
   readonly "fade-in": string;
   readonly "SubNav__header-container": string;
   readonly "SubNav__links-overlay--open": string;
+  readonly "SubNav__link--has-sub-menu": string;
   readonly "SubNav__overlay-toggle": string;
   readonly "SubNav__overlay-toggle-content": string;
-  readonly "SubNav__link--has-sub-menu": string;
   readonly "SubNav__action": string;
   readonly "SubNav__sub-menu": string;
   readonly "SubNav__sub-menu--dropdown": string;

packages/react/src/SubNav/SubNav.tsx

@@ -273,7 +273,9 @@ const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullW
                   aria-label={`${isOpenAtNarrow ? 'close' : 'open'} navigation menu`}
                 >
                   <span className={styles['SubNav__overlay-toggle-content']}>
-                    <Text as="span">{activeLinklabel}</Text>
+                    <Text as="span" size="200">
+                      {activeLinklabel}
+                    </Text>
                     {isOpenAtNarrow ? (
                       <ChevronUpIcon className={styles['SubNav__overlay-toggle-icon']} size={24} />
                     ) : (
@@ -381,6 +383,7 @@ const SubNavLinkWithSubmenu = forwardRef<HTMLDivElement, SubNavLinkProps>(
           <Text
             as="span"
             size="200"
+            weight="semibold"
             className={styles['SubNav__link-label']}
             variant={ariaCurrent === 'page' ? 'default' : 'muted'}
           >
@@ -472,7 +475,8 @@ const SubNavLink = forwardRef<HTMLAnchorElement | HTMLDivElement, SubNavLinkProp
       >
         <Text
           as="span"
-          size="200"
+          size="100"
+          weight="semibold"
           className={styles['SubNav__link-label']}
           variant={ariaCurrent === 'page' ? 'default' : 'muted'}
         >