From abf741bc7e36e6f84b35e183bc58b1388dac8ea1 Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 3 Dec 2024 13:40:16 -0500
Subject: [PATCH] fix(navbar): Use `:where()` to reduce navbar dark/light
 styles to minimal specificity

---
 inst/lib/bs5/scss/_navbar.scss        | 19 ++++++++++---------
 tools/patches/034-bs5-navbar-bg.patch | 26 +++++++++++++-------------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index cbeef8d04..d4e32d1ff 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -4,7 +4,7 @@
 // other navbar variations.
 
 .navbar,
-:where([data-bs-theme="light"] .navbar) { // bslib-patched: explicitly set navbar props in light mode regions
+:where([data-bs-theme="light"]) .navbar { // bslib-patched: explicitly set navbar props in light mode regions
   // scss-docs-start navbar-css-vars
   --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
@@ -299,8 +299,8 @@
 }
 
 .navbar-dark,
-:where([data-bs-theme="dark"] .navbar), // bslib-patched: dark mode inside dark regions
-:where(.navbar[data-bs-theme="dark"]) {
+:where([data-bs-theme="dark"]) .navbar, // bslib-patched: dark mode inside dark regions
+.navbar[data-bs-theme="dark"] {
   // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-color: #{$navbar-dark-color};
   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -327,7 +327,7 @@
   }
 }
 
-:where(.navbar[data-bs-theme="light"]) {
+.navbar[data-bs-theme="light"] {
   // bslib-patched: Make sure local light navbar overrides page global
   --#{$prefix}navbar-color: #{$navbar-light-color};
   --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -336,8 +336,9 @@
   --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
   --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
   --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-}  
-:where(.navbar[data-bs-theme="light"] .navbar-toggler-icon) {
-  // bslib-patched: Make sure toggler icon follows local light mode, too
-  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
-}
+
+  .navbar-toggler-icon {
+    // bslib-patched: Make sure toggler icon follows local light mode, too
+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+  }
+}
\ No newline at end of file
diff --git a/tools/patches/034-bs5-navbar-bg.patch b/tools/patches/034-bs5-navbar-bg.patch
index 8e522c702..b03d54d21 100644
--- a/tools/patches/034-bs5-navbar-bg.patch
+++ b/tools/patches/034-bs5-navbar-bg.patch
@@ -1,5 +1,5 @@
 diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
-index 988bbe09..cbeef8d0 100644
+index 988bbe09..d4e32d1f 100644
 --- a/inst/lib/bs5/scss/_navbar.scss
 +++ b/inst/lib/bs5/scss/_navbar.scss
 @@ -3,7 +3,8 @@
@@ -8,7 +8,7 @@ index 988bbe09..cbeef8d0 100644
  
 -.navbar {
 +.navbar,
-+:where([data-bs-theme="light"] .navbar) { // bslib-patched: explicitly set navbar props in light mode regions
++:where([data-bs-theme="light"]) .navbar { // bslib-patched: explicitly set navbar props in light mode regions
    // scss-docs-start navbar-css-vars
    --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
    --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
@@ -22,17 +22,15 @@ index 988bbe09..cbeef8d0 100644
    position: relative;
    display: flex;
    display: -webkit-flex;
-@@ -296,7 +299,8 @@
+@@ -296,6 +299,7 @@
  }
  
  .navbar-dark,
--.navbar[data-bs-theme="dark"] {
-+:where([data-bs-theme="dark"] .navbar), // bslib-patched: dark mode inside dark regions
-+:where(.navbar[data-bs-theme="dark"]) {
++:where([data-bs-theme="dark"]) .navbar, // bslib-patched: dark mode inside dark regions
+ .navbar[data-bs-theme="dark"] {
    // scss-docs-start navbar-dark-css-vars
    --#{$prefix}navbar-color: #{$navbar-dark-color};
-   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
-@@ -309,10 +313,31 @@
+@@ -309,10 +313,32 @@
    // scss-docs-end navbar-dark-css-vars
  }
  
@@ -51,7 +49,7 @@ index 988bbe09..cbeef8d0 100644
    }
  }
 +
-+:where(.navbar[data-bs-theme="light"]) {
++.navbar[data-bs-theme="light"] {
 +  // bslib-patched: Make sure local light navbar overrides page global
 +  --#{$prefix}navbar-color: #{$navbar-light-color};
 +  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -60,8 +58,10 @@ index 988bbe09..cbeef8d0 100644
 +  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
 +  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
 +  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-+}  
-+:where(.navbar[data-bs-theme="light"] .navbar-toggler-icon) {
-+  // bslib-patched: Make sure toggler icon follows local light mode, too
-+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
++
++  .navbar-toggler-icon {
++    // bslib-patched: Make sure toggler icon follows local light mode, too
++    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
++  }
 +}
+\ No newline at end of file