From c8eb925d054308de4730121092d99e50bf87a847 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Wed, 9 Feb 2022 17:03:31 -0500
Subject: [PATCH 01/19] Add grid for mega menu content and styles for links

---
 assets/component-mega-menu.css | 50 ++++++++++++++++++++++++++--------
 snippets/mega-menu.liquid      | 10 +++----
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index f587d28326b..4bd5c8b8ab9 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -1,38 +1,64 @@
 .mega-menu {
-  position: initial;
+  position: static;
 }
 
-.mega-menu-content {
+.mega-menu__content {
   background-color: rgb(var(--color-background));
   border-left: 0;
   border-radius: 0;
   border-right: 0;
   left: 0;
-  padding-bottom: 3.2rem;
-  padding-top: 3.2rem;
+  padding-bottom: 2.4rem;
+  padding-top: 2.4rem;
   position: absolute;
   right: 0;
   top: 100%;
 }
 
-.mega-menu .header__submenu {
-  min-width: auto;
-  top: 100%;
-}
-
-.js .mega-menu-content {
+.js .mega-menu__content {
   opacity: 0;
   transform: translateY(-1.5rem);
 }
 
-.mega-menu[open] .mega-menu-content {
+.mega-menu[open] .mega-menu__content {
   animation: animateMenuOpen var(--duration-default) ease;
   animation-fill-mode: forwards;
 }
 
 @media (prefers-reduced-motion) {
-  .mega-menu[open] .mega-menu-content {
+  .mega-menu[open] .mega-menu__content {
       opacity: 1;
       transform: translateY(0);
   }
 }
+
+.mega-menu__list {
+  display: grid;
+  gap: 2.4rem 4rem;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  list-style: none;
+}
+
+.mega-menu__link {
+  color: rgba(var(--color-foreground), 0.75);
+  display: inline-block;
+  padding-bottom: 0.8rem;
+  padding-top: 0.8rem;
+  text-decoration: none;
+  text-underline-offset: 0.3rem;
+  transition: text-decoration var(--duration-short) ease;
+}
+
+.mega-menu__link:hover,
+.mega-menu__link--active {
+  color: rgb(var(--color-foreground));
+  text-decoration: underline;
+}
+
+.mega-menu__link--active:hover {
+  text-decoration-thickness: 0.2rem;
+}
+
+.mega-menu__link--level-1 {
+  text-transform: uppercase;
+}
diff --git a/snippets/mega-menu.liquid b/snippets/mega-menu.liquid
index 652afe12ff3..6e6a0e1e6c6 100644
--- a/snippets/mega-menu.liquid
+++ b/snippets/mega-menu.liquid
@@ -9,18 +9,18 @@
                 <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                 {% render 'icon-caret' %}
               </summary>               
-              <div class="mega-menu-content motion-reduce popup" tabindex="-1">
-                <ul class="page-width" role="list" tabindex="-1">
+              <div class="mega-menu__content popup motion-reduce" tabindex="-1">
+                <ul class="mega-menu__list page-width" role="list">
                   {%- for childlink in link.links -%}
                     <li>
-                      <a href="{{ childlink.url }}"{% if childlink.current %} aria-current="page"{% endif %}>
+                      <a href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-1 caption{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                         {{ childlink.title | escape }}
                       </a>
                       {%- if childlink.links != blank -%}
-                        <ul role="list" tabindex="-1">
+                        <ul class="list-unstyled" role="list">
                           {%- for grandchildlink in childlink.links -%}
                             <li>
-                              <a href="{{ grandchildlink.url }}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
+                              <a href="{{ grandchildlink.url }}" class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
                                 {{ grandchildlink.title | escape }}
                               </a>
                             </li>

From 9e48c1dcb5adae266fc4bc2bc823dfb526d5778c Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Thu, 10 Feb 2022 13:59:45 -0500
Subject: [PATCH 02/19] Remove role="list" from ul elements since list is ul
 elements' default role

---
 snippets/mega-menu.liquid | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/snippets/mega-menu.liquid b/snippets/mega-menu.liquid
index 52105aa4a97..e38a80e93da 100644
--- a/snippets/mega-menu.liquid
+++ b/snippets/mega-menu.liquid
@@ -1,6 +1,6 @@
 {% comment %} TODO: Move snippet contents to header.liquid {% endcomment %}
 <nav class="header__inline-menu">
-  <ul class="list-menu list-menu--inline" role="list">
+  <ul class="list-menu list-menu--inline">
     {%- for link in menu.links -%}
       <li>
         {%- if link.links != blank -%}
@@ -11,14 +11,14 @@
                 {% render 'icon-caret' %}
               </summary>               
               <div class="mega-menu__content popup motion-reduce" tabindex="-1">
-                <ul class="mega-menu__list page-width" role="list">
+                <ul class="mega-menu__list page-width">
                   {%- for childlink in link.links -%}
                     <li>
                       <a href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-1 caption{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                         {{ childlink.title | escape }}
                       </a>
                       {%- if childlink.links != blank -%}
-                        <ul class="list-unstyled" role="list">
+                        <ul class="list-unstyled">
                           {%- for grandchildlink in childlink.links -%}
                             <li>
                               <a href="{{ grandchildlink.url }}" class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>

From 9bc5135dfce485401932edcbfe1b41bfe0fc4275 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Thu, 10 Feb 2022 15:15:46 -0500
Subject: [PATCH 03/19] Adjust link styles

---
 assets/component-mega-menu.css | 4 ++--
 snippets/mega-menu.liquid      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 02d2892ff97..51929cf8564 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -64,6 +64,6 @@
   text-decoration-thickness: 0.2rem;
 }
 
-.mega-menu__link--level-1 {
-  text-transform: uppercase;
+.mega-menu__link {
+  line-height: 1.4;
 }
diff --git a/snippets/mega-menu.liquid b/snippets/mega-menu.liquid
index e38a80e93da..644d9c4a563 100644
--- a/snippets/mega-menu.liquid
+++ b/snippets/mega-menu.liquid
@@ -7,14 +7,14 @@
           <details-disclosure>
             <details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
               <summary class="header__menu-item list-menu__item link focus-inset">
-                <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
+                <span {%- if link.child_active %}class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                 {% render 'icon-caret' %}
-              </summary>               
+              </summary>
               <div class="mega-menu__content popup motion-reduce" tabindex="-1">
                 <ul class="mega-menu__list page-width">
                   {%- for childlink in link.links -%}
                     <li>
-                      <a href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-1 caption{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
+                      <a href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-1 caption-with-letter-spacing--medium uppercase{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                         {{ childlink.title | escape }}
                       </a>
                       {%- if childlink.links != blank -%}

From 1df2554769c81b83509673fead93aec13970776d Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Thu, 10 Feb 2022 17:09:06 -0500
Subject: [PATCH 04/19] Set mega menu content max height based on viewport
 height. Use header bottom position set in JS for calculation

---
 assets/component-mega-menu.css | 2 ++
 sections/header.liquid         | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 51929cf8564..5a7a5b36427 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -8,6 +8,8 @@
   border-radius: 0;
   border-right: 0;  
   left: 0;
+  max-height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 200px));
+  overflow-y: auto;
   padding-bottom: 2.4rem;
   padding-top: 2.4rem;
   position: absolute;
diff --git a/sections/header.liquid b/sections/header.liquid
index 679ea1b244c..ae2bdfc2aac 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -623,6 +623,9 @@
   }
 
   customElements.define('sticky-header', StickyHeader);
+
+  const header = document.querySelector('header');
+  if (header) document.documentElement.style.setProperty('--header-bottom-position', `${Math.ceil(header.getBoundingClientRect().bottom)}px`);
 {% endjavascript %}
 
 <script type="application/ld+json">

From 00c361138051d6d8702fe61b52c5b867db781c62 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Fri, 11 Feb 2022 16:08:09 -0500
Subject: [PATCH 05/19] Round position value down instead of up to be more
 consistent with other instances where --header-bottom-position value is set
 in JS

---
 sections/header.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sections/header.liquid b/sections/header.liquid
index ae2bdfc2aac..a51a5c63d92 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -625,7 +625,7 @@
   customElements.define('sticky-header', StickyHeader);
 
   const header = document.querySelector('header');
-  if (header) document.documentElement.style.setProperty('--header-bottom-position', `${Math.ceil(header.getBoundingClientRect().bottom)}px`);
+  if (header) document.documentElement.style.setProperty('--header-bottom-position', `${Math.floor(header.getBoundingClientRect().bottom)}px`);
 {% endjavascript %}
 
 <script type="application/ld+json">

From b1fdb18607990489c931aab29410383ee7120060 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Fri, 11 Feb 2022 16:39:56 -0500
Subject: [PATCH 06/19] Fix spacing

---
 snippets/mega-menu.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/mega-menu.liquid b/snippets/mega-menu.liquid
index 644d9c4a563..4bafad6cb8a 100644
--- a/snippets/mega-menu.liquid
+++ b/snippets/mega-menu.liquid
@@ -7,7 +7,7 @@
           <details-disclosure>
             <details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
               <summary class="header__menu-item list-menu__item link focus-inset">
-                <span {%- if link.child_active %}class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
+                <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                 {% render 'icon-caret' %}
               </summary>
               <div class="mega-menu__content popup motion-reduce" tabindex="-1">

From 725921604559a3280ad1f87ea7c6b7d987f462cd Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Tue, 15 Feb 2022 17:42:02 -0500
Subject: [PATCH 07/19] Change level 2 link color to better distinguish from
 level 3 links

---
 assets/component-mega-menu.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 5a7a5b36427..fd1a90325dd 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -69,3 +69,7 @@
 .mega-menu__link {
   line-height: 1.4;
 }
+
+.mega-menu__link--level-1 {
+  color: rgba(var(--color-foreground), 0.5);
+}

From 81450cec0122a889871d5d7e5d8ca52341895412 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Mon, 21 Feb 2022 09:44:47 -0500
Subject: [PATCH 08/19] Revert mega menu heading opacity to improve color
 contrast

---
 assets/component-mega-menu.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index fd1a90325dd..5a7a5b36427 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -69,7 +69,3 @@
 .mega-menu__link {
   line-height: 1.4;
 }
-
-.mega-menu__link--level-1 {
-  color: rgba(var(--color-foreground), 0.5);
-}

From 7980df6e3d09ae3a7e484657fd91c761da38a85b Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Mon, 21 Feb 2022 09:55:23 -0500
Subject: [PATCH 09/19] Merge branch 'add-mega-menu' of
 https://github.com/Shopify/dawn into add-mega-menu-content

# Conflicts:
#	snippets/mega-menu.liquid
---
 snippets/mega-menu.liquid | 45 ---------------------------------------
 1 file changed, 45 deletions(-)
 delete mode 100644 snippets/mega-menu.liquid

diff --git a/snippets/mega-menu.liquid b/snippets/mega-menu.liquid
deleted file mode 100644
index 4bafad6cb8a..00000000000
--- a/snippets/mega-menu.liquid
+++ /dev/null
@@ -1,45 +0,0 @@
-{% comment %} TODO: Move snippet contents to header.liquid {% endcomment %}
-<nav class="header__inline-menu">
-  <ul class="list-menu list-menu--inline">
-    {%- for link in menu.links -%}
-      <li>
-        {%- if link.links != blank -%}
-          <details-disclosure>
-            <details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
-              <summary class="header__menu-item list-menu__item link focus-inset">
-                <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
-                {% render 'icon-caret' %}
-              </summary>
-              <div class="mega-menu__content popup motion-reduce" tabindex="-1">
-                <ul class="mega-menu__list page-width">
-                  {%- for childlink in link.links -%}
-                    <li>
-                      <a href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-1 caption-with-letter-spacing--medium uppercase{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
-                        {{ childlink.title | escape }}
-                      </a>
-                      {%- if childlink.links != blank -%}
-                        <ul class="list-unstyled">
-                          {%- for grandchildlink in childlink.links -%}
-                            <li>
-                              <a href="{{ grandchildlink.url }}" class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
-                                {{ grandchildlink.title | escape }}
-                              </a>
-                            </li>
-                          {%- endfor -%}
-                        </ul>
-                      {%- endif -%}
-                    </li>
-                  {%- endfor -%}
-                </ul>
-              </div>
-            </details>
-          </details-disclosure>
-        {%- else -%}
-          <a href="{{ link.url }}" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
-            <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
-          </a>
-        {%- endif -%}
-      </li>
-    {%- endfor -%}
-  </ul>
-</nav>

From e357411f672011061d0303356ddd67efe763f5eb Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Wed, 23 Feb 2022 10:21:16 -0500
Subject: [PATCH 10/19] Add id to mega menu content container (JS will use id
 to add aria-control attribute to summary element). Add role="list" to ul in
 mega menu for a11y (when list bullets are removed some assistive technologies
 may not convey ul as list without explicit role)

---
 sections/header.liquid | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sections/header.liquid b/sections/header.liquid
index fa586379f9a..e84cf61a37e 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -427,7 +427,7 @@
                         <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                         {% render 'icon-caret' %}
                       </summary>               
-                      <div class="mega-menu__content motion-reduce global-settings-popup" tabindex="-1">
+                      <div id="MegaMenu-Content-{{ forloop.index }}" class="mega-menu__content motion-reduce global-settings-popup" tabindex="-1">
                         <ul class="mega-menu__list page-width" role="list">
                           {%- for childlink in link.links -%}
                             <li>
@@ -435,7 +435,7 @@
                                 {{ childlink.title | escape }}
                               </a>
                               {%- if childlink.links != blank -%}
-                                <ul class="list-unstyled">
+                                <ul class="list-unstyled" role="list">
                                   {%- for grandchildlink in childlink.links -%}
                                     <li>
                                       <a href="{{ grandchildlink.url }}" class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>

From cd322bf16fc12114c02426e9aa13b108337190c3 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Wed, 23 Feb 2022 10:23:30 -0500
Subject: [PATCH 11/19] Fix typo

---
 assets/component-mega-menu.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 4fb22867098..b31e9834a9e 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -18,11 +18,11 @@
   z-index: -1;
 }
 
-.header-wrapper--border-bottom .mega-menu-content {
+.header-wrapper--border-bottom .mega-menu__content {
   border-top: 0;
 }
 
-.js .mega-menu-content {
+.js .mega-menu__content {
   opacity: 0;
   transform: translateY(-1.5rem);
 }

From 7581e8f2437b1ee620d1c4360770d7d39c6ed7dd Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Wed, 23 Feb 2022 11:28:49 -0500
Subject: [PATCH 12/19] Combine css properties for same class

---
 assets/component-mega-menu.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index b31e9834a9e..89862855663 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -49,6 +49,7 @@
 .mega-menu__link {
   color: rgba(var(--color-foreground), 0.75);
   display: inline-block;
+  line-height: 1.4;
   padding-bottom: 0.8rem;
   padding-top: 0.8rem;
   text-decoration: none;
@@ -65,7 +66,3 @@
 .mega-menu__link--active:hover {
   text-decoration-thickness: 0.2rem;
 }
-
-.mega-menu__link {
-  line-height: 1.4;
-}

From 544968b4ecf4f3b47c740c4c99ebbc2ce153eacb Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Wed, 23 Feb 2022 11:40:20 -0500
Subject: [PATCH 13/19] Set mega menu links to display block to ensure bigger
 touch target

---
 assets/component-mega-menu.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 89862855663..76607b239b1 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -48,7 +48,7 @@
 
 .mega-menu__link {
   color: rgba(var(--color-foreground), 0.75);
-  display: inline-block;
+  display: block;
   line-height: 1.4;
   padding-bottom: 0.8rem;
   padding-top: 0.8rem;

From 2f854a4217aa903c4e9d258b82193fd5bf63ae73 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Wed, 23 Feb 2022 12:05:58 -0500
Subject: [PATCH 14/19] Add some bottom offset to menu max-height to prevent
 iOS Safari from cutting off bottom of menu

---
 assets/component-mega-menu.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 76607b239b1..571296a8533 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -8,7 +8,7 @@
   border-radius: 0;
   border-right: 0;  
   left: 0;
-  max-height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 200px));
+  max-height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 200px) - 4rem);
   overflow-y: auto;
   padding-bottom: 2.4rem;
   padding-top: 2.4rem;

From 283e242d4c11a408ecb9a80eb8f2b0bb9211f395 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Wed, 23 Feb 2022 14:18:09 -0500
Subject: [PATCH 15/19] Update link style (remove uppercase) for 2nd level
 links that have no children

---
 sections/header.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sections/header.liquid b/sections/header.liquid
index e84cf61a37e..e29b1fa1eb5 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -431,7 +431,7 @@
                         <ul class="mega-menu__list page-width" role="list">
                           {%- for childlink in link.links -%}
                             <li>
-                              <a href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-1 caption-with-letter-spacing--medium uppercase{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
+                              <a href="{{ childlink.url }}" class="mega-menu__link{% if childlink.levels > 0 %} caption-with-letter-spacing--medium uppercase{% else %} link{% endif %}{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                 {{ childlink.title | escape }}
                               </a>
                               {%- if childlink.links != blank -%}

From 2b14cee6d567caea862e755996433862b47b8a57 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Mon, 28 Feb 2022 11:38:21 -0500
Subject: [PATCH 16/19] Update L2 link font to bold. Use Liquid to calculate
 bold font-weight value: "bold" will be +300 relative to default body
 font-weight, but restricted to max of 1000

---
 assets/base.css        | 4 ++++
 layout/theme.liquid    | 1 +
 sections/header.liquid | 2 +-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/assets/base.css b/assets/base.css
index eb0c505bda3..2592e29d027 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -2787,3 +2787,7 @@ details-disclosure > details {
     }
   }
 }
+
+.font-body-bold {
+  font-weight: var(--font-body-weight-bold);
+}
diff --git a/layout/theme.liquid b/layout/theme.liquid
index d57516fe858..917e8087db1 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -49,6 +49,7 @@
         --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
         --font-body-style: {{ settings.type_body_font.style }};
         --font-body-weight: {{ settings.type_body_font.weight }};
+        --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
 
         --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
         --font-heading-style: {{ settings.type_header_font.style }};
diff --git a/sections/header.liquid b/sections/header.liquid
index e29b1fa1eb5..3e5cc00677f 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -431,7 +431,7 @@
                         <ul class="mega-menu__list page-width" role="list">
                           {%- for childlink in link.links -%}
                             <li>
-                              <a href="{{ childlink.url }}" class="mega-menu__link{% if childlink.levels > 0 %} caption-with-letter-spacing--medium uppercase{% else %} link{% endif %}{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
+                              <a href="{{ childlink.url }}" class="mega-menu__link link font-body-bold{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                 {{ childlink.title | escape }}
                               </a>
                               {%- if childlink.links != blank -%}

From cff04b69d80fbdab877eff553cb43a35705009a4 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Mon, 7 Mar 2022 12:31:11 -0500
Subject: [PATCH 17/19] Address feedback. Add explicit role="list" for a11y
 (when list bullets are removed some assistive technologies may not convey ul
 as list without explicit role)

---
 sections/header.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sections/header.liquid b/sections/header.liquid
index 3e5cc00677f..4c68c35546f 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -417,7 +417,7 @@
         </nav>
       {%- else -%}
         <nav class="header__inline-menu">
-          <ul class="list-menu list-menu--inline">
+          <ul class="list-menu list-menu--inline" role="list">
             {%- for link in section.settings.menu.links -%}
               <li>
                 {%- if link.links != blank -%}

From 630713d800865d859b3024968a69c49e295a503f Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Mon, 7 Mar 2022 12:31:54 -0500
Subject: [PATCH 18/19] Use rem instead of px

---
 assets/component-mega-menu.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 571296a8533..b594dccec6e 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -8,7 +8,7 @@
   border-radius: 0;
   border-right: 0;  
   left: 0;
-  max-height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 200px) - 4rem);
+  max-height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 20rem) - 4rem);
   overflow-y: auto;
   padding-bottom: 2.4rem;
   padding-top: 2.4rem;

From fb5671f9fbbb724cb262c21869c604c696ddc245 Mon Sep 17 00:00:00 2001
From: Kai <kai.wang@shopify.com>
Date: Mon, 7 Mar 2022 12:36:09 -0500
Subject: [PATCH 19/19] Remove redundant css

---
 assets/component-mega-menu.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index b594dccec6e..cbe50f0a88d 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -53,7 +53,6 @@
   padding-bottom: 0.8rem;
   padding-top: 0.8rem;
   text-decoration: none;
-  text-underline-offset: 0.3rem;
   transition: text-decoration var(--duration-short) ease;
 }