Dark mode: Local nav and nav underline fix (#2406)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Dec 19, 2023 · 673feec · 673feec
1 parent c5bb692
commit 673feec
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 77 deletions.
diff --git a/scss/_local-navigation.scss b/scss/_local-navigation.scss
@@ -20,7 +20,7 @@
     width: 100%;
     padding: subtract(var(--#{$prefix}local-nav-padding-y), var(--#{$prefix}local-nav-border-width)) 0 var(--#{$prefix}local-nav-padding-y);
     font-weight: $font-weight-bold;
-    color: var(--#{$prefix}local-nav-hover-color);
+    color: var(--#{$prefix}local-nav-color);
     background-color: transparent;
     border: 0;
 
@@ -30,19 +30,14 @@
 
       &::after {
         margin-right: 0;
-        color: var(--#{$prefix}local-nav-color);
       }
     }
 
     &:not(.collapsed) {
       border-bottom: var(--#{$prefix}local-nav-border-color) solid var(--#{$prefix}local-nav-border-width);
 
-      > [class*="container"] {
-        @include caret(up, $accordion: true);
-
-        &::after {
-          margin-right: 0;
-        }
+      > [class*="container"]::after {
+        transform: rotateZ(180deg);
       }
     }
   }
@@ -61,6 +56,7 @@
 
   .navbar {
     --bs-navbar-padding-y: 0px;
+    --bs-navbar-bg: var(--#{$prefix}local-nav-bg);
     --bs-navbar-border-color: transparent;
 
     .nav-item {
@@ -90,11 +86,7 @@
     }
 
     .nav-link.active {
-      color: var(--#{$prefix}local-nav-color);
-
-      @include media-breakpoint-up(lg) {
-        color: var(--#{$prefix}local-nav-hover-color);
-      }
+      --#{$prefix}navbar-active-color: var(--#{$prefix}local-nav-color);
 
       &::before {
         bottom: calc(-1 * var(--#{$prefix}local-nav-border-width)); // stylelint-disable-line function-disallowed-list

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -190,7 +190,7 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    color: var(--#{$prefix}nav-underline-link-active-color);
+    --#{$prefix}nav-link-color: var(--#{$prefix}nav-underline-link-active-color);
     background-color: var(--#{$prefix}nav-underline-link-active-bg);
     border-color: var(--#{$prefix}nav-underline-link-active-border-color);
   }

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -168,9 +168,6 @@
 
   // Breadcrumb-specific styles
   --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter};
-
-  // Navigation-specific styles
-  --#{$prefix}nav-link-active-color: #{$nav-link-active-color};
   // End mod
 }
 
@@ -267,9 +264,6 @@
 
     // Breadcrumb-specific styles
     --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark};
-
-    // Navigation-specific styles
-    --#{$prefix}nav-link-active-color: #{$nav-link-active-color-dark};
     // End mod
     // scss-docs-end root-dark-mode-vars
   }

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -146,12 +146,6 @@ $form-invalid-border-color-dark:        var(--#{$prefix}danger) !default; // Boo
 
 $breadcrumb-divider-filter-dark:      $invert-filter !default; // Boosted mod
 
-//
-// Navs & Tabs
-//
-
-$nav-link-active-color-dark:          $supporting-orange !default; // Boosted mod
-
 //
 // Tables
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1441,7 +1441,6 @@ $nav-link-font-size:                null !default;
 $nav-link-font-weight:              $font-weight-bold !default;
 $nav-link-color:                    inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
-$nav-link-active-color:             $body-color !default; // Boosted mod
 $nav-link-transition:               null !default; // Boosted mod
 $nav-link-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // Boosted mod: no `$nav-link-focus-box-shadow`
@@ -1468,7 +1467,7 @@ $nav-underline-gap-lg:                    $spacer * .5 !default; // Boosted mod
 $nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of `.125rem`
 $nav-underline-border-color:              var(--#{$prefix}border-color-subtle) !default; // Boosted mod
 $nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // Boosted mod
-$nav-underline-link-active-color:         var(--#{$prefix}nav-link-active-color) !default; // Boosted mod instead of `var(--#{$prefix}emphasis-color)`
+$nav-underline-link-active-color:         var(--#{$prefix}emphasis-color) !default;
 $nav-underline-link-padding-x:            1.8125rem !default; // Boosted mod
 $nav-underline-link-hover-color:          var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // stylelint-disable-next-line function-disallowed-list
@@ -2464,7 +2463,7 @@ $tag-font-size-sm:                  $font-size-sm !default;
 $local-nav-padding-y:           $navbar-nav-link-padding-y !default;
 $local-nav-color:               null !default;
 $local-nav-bg:                  var(--#{$prefix}body-bg) !default;
-$local-nav-hover-color:         var(--#{$prefix}nav-link-active-color) !default;
+$local-nav-hover-color:         var(--#{$prefix}link-hover-color) !default;
 $local-nav-hover-bg:            var(--#{$prefix}secondary-bg) !default;
 $local-nav-active-color:        var(--#{$prefix}primary) !default;
 $local-nav-active-bg:           var(--#{$prefix}tertiary-active-bg) !default;

diff --git a/site/content/docs/5.3/components/local-navigation.md b/site/content/docs/5.3/components/local-navigation.md
@@ -23,14 +23,14 @@ Since the component is supposed to be rendered on a full-size page, there are so
     <span class="container-xxl">Shop</span>
   </button>
   <div id="collapseLocalNav" class="container-xxl local-nav-collapse d-lg-block collapse">
-      <div class="navbar navbar-expand-lg">
-        <ul class="navbar-nav w-100">
-          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-        </ul>
-      </div>
+    <div class="navbar navbar-expand-lg">
+      <ul class="navbar-nav w-100">
+        <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+        <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+        <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+      </ul>
+    </div>
   </div>
 </nav>
 {{< /example >}}

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -3001,14 +3001,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav1" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>
@@ -3021,14 +3021,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav2" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>
@@ -3041,14 +3041,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav3" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>
@@ -3061,14 +3061,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav4" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>
@@ -3081,14 +3081,14 @@ sitemap_exclude: true
       <span class="container-xxl">Shop</span>
     </button>
     <div id="collapseLocalNav5" class="container-xxl local-nav-collapse d-lg-block collapse">
-        <div class="navbar navbar-expand-lg">
-          <ul class="navbar-nav w-100">
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
-            <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
-            <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
-          </ul>
-        </div>
+      <div class="navbar navbar-expand-lg">
+        <ul class="navbar-nav w-100">
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Discover</span></a></li>
+          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><span class="container-xxl">Shop</span></a></li>
+          <li class="nav-item"><a class="nav-link" href="#"><span class="container-xxl">Services</span></a></li>
+          <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><span class="container-xxl">Contact</span></a></li>
+        </ul>
+      </div>
     </div>
   </nav>
 </div>