Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu...

Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu experience doesn't properly adapt to forced colors

core/misc/cspell/dictionary.txt

@@ -163,6 +163,7 @@ bundleless
 bundlenode
 buttonpane
 buttonset
+buttontext
 buytaert
 cacheability
 cacheable

core/themes/olivero/css/components/header-navigation.css

@@ -53,8 +53,10 @@
   top: 0;
   visibility: hidden;
   overflow: auto;
-  /* Ensure that header nav not use additional space and force
-     system branding block text to unnecessarily wrap. */
+  /**
+   * Ensure that header nav not use additional space and force system branding
+   * block text to unnecessarily wrap.
+   */
   flex-basis: 0;
   flex-grow: 1; /* Necessary for IE11. */
   width: 100%;
@@ -62,7 +64,13 @@
   height: 100%;
   padding-top: 0;
   padding-bottom: var(--sp);
-  border-top: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */
+  /**
+   * Create room for the "close" button. We cannot use margin because the
+   * mobile navigation needs to slide beneath the button, but we also cannot
+   * use padding because that would enable the button to scroll out of the
+   * viewport on short screens.
+   */
+  border-top: solid var(--color--white) var(--sp3);
   background-color: var(--color--white);
   box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)
 }
@@ -109,6 +117,20 @@
 }
   }
 
+.header-nav {
+
+  /*
+   * Ensure top border has the same color as the background when in forced colors.
+   */
+}
+
+@media (forced-colors: active) {
+
+.header-nav {
+    border-top-color: canvas
+}
+  }
+
 /*
  * Only apply transition styles when JS is loaded. This
  * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
@@ -268,6 +290,13 @@ body.is-always-mobile-nav .header-nav {
   background: var(--color--primary-40)
 }
 
+@media (forced-colors: active) {
+
+.header-nav-overlay {
+    background: canvastext
+}
+  }
+
 .is-overlay-active .header-nav-overlay {
     display: block
 }

core/themes/olivero/css/components/header-navigation.pcss.css

@@ -12,8 +12,10 @@
   inset-inline-start: 100%;
   visibility: hidden;
   overflow: auto;
-  /* Ensure that header nav not use additional space and force
-     system branding block text to unnecessarily wrap. */
+  /**
+   * Ensure that header nav not use additional space and force system branding
+   * block text to unnecessarily wrap.
+   */
   flex-basis: 0;
   flex-grow: 1; /* Necessary for IE11. */
   width: 100%;
@@ -22,7 +24,13 @@
   padding-block: 0 var(--sp);
   padding-inline-start: var(--sp);
   padding-inline-end: var(--sp);
-  border-block-start: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */
+  /**
+   * Create room for the "close" button. We cannot use margin because the
+   * mobile navigation needs to slide beneath the button, but we also cannot
+   * use padding because that would enable the button to scroll out of the
+   * viewport on short screens.
+   */
+  border-block-start: solid var(--color--white) var(--sp3);
   background-color: var(--color--white);
   box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
 
@@ -48,6 +56,13 @@
   @media (--lg) {
     grid-column: 5 / 14;
   }
+
+  /*
+   * Ensure top border has the same color as the background when in forced colors.
+   */
+  @media (forced-colors: active) {
+    border-top-color: canvas;
+  }
 }
 
 /*
@@ -151,6 +166,10 @@ body.is-always-mobile-nav {
   opacity: 0.2;
   background: var(--color--primary-40);
 
+  @media (forced-colors: active) {
+    background: canvastext;
+  }
+
   @nest .is-overlay-active & {
     display: block;
   }

core/themes/olivero/css/components/header-search-narrow.css

@@ -217,6 +217,19 @@
         border-top: solid 5px var(--color--primary-50);
       }
 
+@media (forced-colors: active) {
+
+.block-search-narrow .search-form__submit .icon--search {
+        background: buttontext;
+        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+        mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center
+    }
+      }
+
 .block-search-narrow .search-form__submit:focus {
       outline: solid 4px transparent;
       outline-offset: -4px;

core/themes/olivero/css/components/header-search-narrow.pcss.css

@@ -113,6 +113,13 @@
         transform-origin: left; /* LTR */
         border-block-start: solid 5px var(--color--primary-50);
       }
+
+      @media (forced-colors: active) {
+        background: buttontext;
+        mask-image: url("../../images/search--white.svg");
+        mask-repeat: no-repeat;
+        mask-position: center;
+      }
     }
 
     &:focus {

core/themes/olivero/css/components/navigation/nav-button-mobile.css

@@ -134,8 +134,8 @@
   position: relative;
   display: block;
   width: var(--sp2);
-  height: 0.1875rem;
-  background-color: var(--color--primary-50)
+  height: 0;
+  border-top: solid 3px var(--color--primary-50)
 }
 
 [dir="ltr"] .mobile-nav-button__icon:before {
@@ -148,12 +148,12 @@
 
 .mobile-nav-button__icon:before {
     position: absolute;
-    top: -0.5rem;
+    top: -0.6875rem;
     width: 100%;
-    height: 0.1875rem;
+    height: 0;
     content: "";
     transition: all 0.2s;
-    background-color: var(--color--primary-50);
+    border-top: solid 3px var(--color--primary-50);
   }
 
 [dir="ltr"] .mobile-nav-button__icon:after {
@@ -169,14 +169,14 @@
     top: auto;
     bottom: -0.5rem;
     width: 100%;
-    height: 0.1875rem;
+    height: 0;
     content: "";
     transition: all 0.2s;
-    background-color: var(--color--primary-50);
+    border-top: solid 3px var(--color--primary-50);
   }
 
 .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
-  background-color: transparent
+  border-top: 0
 }
 
 .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:before {

core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css

@@ -65,18 +65,18 @@
   position: relative;
   display: block;
   width: var(--sp2);
-  height: 3px;
-  background-color: var(--color--primary-50);
+  height: 0;
+  border-top: solid 3px var(--color--primary-50);
 
   &:before {
     position: absolute;
-    inset-block-start: -8px;
+    inset-block-start: -11px;
     inset-inline-start: 0;
     width: 100%;
-    height: 3px;
+    height: 0;
     content: "";
     transition: all 0.2s;
-    background-color: var(--color--primary-50);
+    border-top: solid 3px var(--color--primary-50);
   }
 
   &:after {
@@ -84,15 +84,15 @@
     inset-block: auto -8px;
     inset-inline-start: 0;
     width: 100%;
-    height: 3px;
+    height: 0;
     content: "";
     transition: all 0.2s;
-    background-color: var(--color--primary-50);
+    border-top: solid 3px var(--color--primary-50);
   }
 }
 
 .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
-  background-color: transparent;
+  border-top: 0;
 
   &:before {
     inset-block-start: 0;