Prepare release 0.7.4

ChangeLog.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## [0.7.4] - 2025-01-07
+
+- Change close button color when switching between dark/light color schemes.
+- Change dividers color when switching between dark/light color themes.
+- Make search field full width when in small form factor view.
+
 ## [0.7.3] - 2024-12-04
 
 - Increment font color contrast in light color-scheme.

js/src/cschemes.js

@@ -46,8 +46,9 @@ export class CSchemeHandler {
     return q.matches ? 'dark' : 'light';
   }
 
-  apply(option) {
-    switch(option) {
+  apply(cscheme) {
+    this.updateExplicitElements(cscheme);
+    switch(cscheme) {
       case "default": {
         document.documentElement.classList.remove("light");
         document.documentElement.classList.remove("dark");
@@ -67,6 +68,35 @@ export class CSchemeHandler {
     }
   }
 
+  updateExplicitElements(cscheme) {
+    // Update all close button elements (class 'btn-close') adding the
+    // class btn-close-white when cscheme is dark, as the close button
+    // is a SVG element and it doesn't listen to the usual CSS changes.
+    // Also toggle between 'text-white-50' and 'text-black-50'.
+    let prefer = (cscheme == "default") ? this.preferred : cscheme;
+    const closeBtns = document.querySelectorAll(".btn-close");
+    const textSel = prefer == "dark" ? ".text-black-50" : ".text-white-50";
+    const textElems = document.querySelectorAll(textSel);
+
+    if (prefer == "dark") {
+      for (const btn of closeBtns) {
+        btn.classList.add("btn-close-white");
+      }
+      for (const txtElem of textElems) {
+        txtElem.classList.remove("text-black-50");
+        txtElem.classList.add("text-white-50");
+      }
+    } else {
+      for (const btn of closeBtns) {
+        btn.classList.remove("btn-close-white");
+      }
+      for (const txtElem of textElems) {
+        txtElem.classList.remove("text-white-50");
+        txtElem.classList.add("text-black-50");
+      }
+    }
+  }
+
   updateDropdown(cscheme, focus = false) {
     const prefix = "data-snftt-luz";
     const selector = document.querySelector("#snftt-luz");

js/src/pagetoc.js

@@ -100,7 +100,7 @@ export class LocationHashHandler {
     const ubits = window.location.href.split("#");
     if (ubits.length > 1) {
       const toc_ref = `a.reference.internal[href='#${ubits[1]}']`;
-      const toc_ref_elem = this.toc.querySelector(toc_ref);
+      const toc_ref_elem = this.toc?.querySelector(toc_ref);
       if (toc_ref_elem) {
         toc_ref_elem.classList.add("active");
         if (!this.isInViewport(toc_ref_elem)) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sphinx-nefertiti",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "private": true,
   "description": "Nefertiti is a theme for the Sphinx Documentation Generator.",
   "engines": {

scss/_theme.scss

@@ -311,5 +311,11 @@ blockquote {
 }
 
 .search-input {
-  max-width: 10rem;
+  @include media-breakpoint-up(xl) {
+    max-width: 10rem;
+  }
+
+  @include media-breakpoint-down(xl) {
+    max-width: none;
+  }
 }

scss/components/_navbar.scss

@@ -178,6 +178,12 @@
   }
 }
 
+/* stylelint-disable selector-id-pattern */
+.neutral #nfttNavbar {
+  background-color: rgba(var(--#{$prefix}neutral-bg-rgb), 1);
+}
+/* stylelint-enable selector-id-pattern */
+
 .dropdown-limit-max-height {
   max-height: calc(100vh - 70px);
   overflow: hidden;

sphinx_nefertiti/__init__.py

@@ -8,7 +8,7 @@
 
 from sphinx_nefertiti import colorsets, docsver, fonts, links, pygments
 
-__version__ = "0.7.3"
+__version__ = "0.7.4"
 
 pages_wo_index = ["genindex", "search"]
 

sphinx_nefertiti/colorsets-dropdown.html

@@ -34,6 +34,6 @@ <h6 class="dropdown-header">{{ _('Neutral header') }}</h6>
 </li>
 
 <li class="nav-item col-12 col-xl-auto h-100" aria-hidden="true">
-  <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white"></div>
+  <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white-50"></div>
   <hr class="d-lg-none text-white-50">
 </li>

sphinx_nefertiti/layout.html

@@ -172,7 +172,7 @@
                     </div>
                   {% endwith %}
                   <li class="nav-item col-12 col-xl-auto h-100" aria-hidden="true">
-                    <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white"></div>
+                    <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white-50"></div>
                     <hr class="d-xl-none text-white-50">
                   </li>
                 </div>
@@ -205,7 +205,7 @@
                 </a>
               </li>
               <li class="nav-item col-12 col-xl-auto h-100" aria-hidden="true">
-                <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white"></div>
+                <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white-50"></div>
                 <hr class="d-xl-none text-white-50">
               </li>
               {% endif %}

sphinx_nefertiti/version-dropdown.html

@@ -12,7 +12,7 @@ <h6 class="dropdown-header">{{ _('Versions') }}</h6>
     </ul>
   </li>
   <li class="nav-item col-12 col-xl-auto h-100" aria-hidden="true">
-    <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white"></div>
+    <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white-50"></div>
     <hr class="d-xl-none text-white-50">
   </li>
 {% endif %}