ENH: Update pydata theme to 0.10 (#597)

* update pyproject dependencies, link to prev-next, using announcement of pydata

* updating layout.html, header-article, and using sidebar-primary and sidebar-secondary

* header-article styles and sidebar-secondary style and html

* scroll-pixel-helper, js fix, removing sidebar secondary css

* setting sidebar primary styles

* styling changes and rtd footer

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* changing comment and class name in _readthedocs

* adding layout html, scss for sidebars and article width

* sidebar secondary styles

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* sidebar secondary styles, margin, sidebars

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* removing package-lock.json here, but we should keep it in the repo in future

* transition css

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* sidebar secondary toc

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* updated pydata version

* cleaning layout file and empyting block navbar

* correcting header-article and sidebar-secondary styles, html

* max width 50em

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* footer content style

* removing footer and editing primary sidebar

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* added some styles

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* search bar style

* css and style changes

* some admontion scss

* added some admonition classed and generate_toctree_html

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* container widths

* admonition styling

* added nprint js and css/html changes

* css and js adjustments

* tests correction

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* updating to pydata 10.1

* styles for toggle button

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* changing test to accomodate primary sidebar

* adding variables and comments

* search related css

* secondary sidebar icon and border-left

* removed admonitions

* updating styles in scss

* updating links

* changing color codes to rgb

* set default_mode to light

* adjusting content width to cater to full-width elements

* config value

* default_mode in builder-inited

* setting mode to light

* style edits for small anomalies

* search input placeholder color

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: AakashGfude

pyproject.toml

@@ -22,8 +22,8 @@ readme = "README.md"
 
 requires-python = ">=3.7"
 dependencies = [
-  "sphinx>=3,<5",
-  "pydata-sphinx-theme~=0.8.0",
+  "sphinx>=3,<6",
+  "pydata-sphinx-theme~=0.10.1",
   "pyyaml",
 ]
 

src/sphinx_book_theme/__init__.py

@@ -111,7 +111,7 @@ def hash_html_assets(app, pagename, templatename, context, doctree):
     hash_assets_for_files(assets, get_html_theme_path() / "static", context)
 
 
-def update_thebe_config(app):
+def update_mode_thebe_config(app):
     """Update thebe configuration with SBT-specific values"""
     theme_options = app.env.config.html_theme_options
     if theme_options.get("launch_buttons", {}).get("thebe") is True:
@@ -144,6 +144,12 @@ def update_thebe_config(app):
 
     app.env.config.thebe_config = thebe_config
 
+    # setting default mode to light for now.
+    # TODO: provide a button, and add css for dark theme.
+    # sphinx-build command does not call config-inited,
+    # so setting this in builder-inited.
+    app.config.html_context["default_mode"] = "light"
+
 
 class Margin(Sidebar):
     """Goes in the margin to the right of the page."""
@@ -185,7 +191,7 @@ def setup(app: Sphinx):
     app.add_message_catalog(MESSAGE_CATALOG_NAME, locale_dir)
 
     # Events
-    app.connect("builder-inited", update_thebe_config)
+    app.connect("builder-inited", update_mode_thebe_config)
     app.connect("config-inited", update_general_config)
     app.connect("html-page-context", add_metadata_to_page)
     app.connect("html-page-context", hash_html_assets)

src/sphinx_book_theme/assets/scripts/index.js

@@ -49,27 +49,6 @@ var toggleFullScreen = () => {
   }
 };
 
-/**
- * Sidebar scroll on load.
- *
- * Detect the active page in the sidebar, and scroll so that it is centered on
- * the screen.
- */
-var scrollToActive = () => {
-  var navbar = document.getElementById("site-navigation");
-  var navbar_scrollable = navbar.children[0];
-  var active_pages = navbar.querySelectorAll(".active");
-  var active_page = active_pages[active_pages.length - 1];
-  // Only scroll the navbar if the active link is lower than 50% of the page
-  if (
-    active_page !== undefined &&
-    active_page.offsetTop > $(window).height() * 0.5
-  ) {
-    navbar_scrollable.scrollTop =
-      active_page.offsetTop - $(window).height() * 0.2;
-  }
-};
-
 /**
  * Called when the "print to PDF" button is clicked.
  * This is a hack to prevent tooltips from showing up in the printed PDF.
@@ -118,9 +97,9 @@ var initTocHide = () => {
 
     // Hide the TOC if any margin content is displayed on the screen
     if (onScreenItems.length > 0) {
-      $("div.bd-toc").removeClass("show");
+      $("div.bd-sidebar-secondary").removeClass("show");
     } else {
-      $("div.bd-toc").addClass("show");
+      $("div.bd-sidebar-secondary").addClass("show");
     }
   };
   let manageScrolledClassOnBody = (entries, observer) => {
@@ -218,6 +197,27 @@ function initRTDObserver() {
   observer.observe(document.body, config);
 }
 
+/**
+ * Add no print class to certain DOM elements
+ */
+
+function addNoPrint() {
+  $("div.bd-sidebar-primary").addClass("noprint");
+  $("div.bd-header-article").addClass("noprint");
+  $("div.bd-header-announcement").addClass("noprint");
+  $("footer.bd-footer-article").addClass("noprint");
+}
+
+/**
+ * Set Mode of the theme
+ * Remove this function once all modes are supported.
+ */
+
+function setMode() {
+  document.documentElement.dataset.mode = "light";
+  document.documentElement.dataset.theme = "light";
+}
+
 /**
  * Set up callback functions for UI click actions
  */
@@ -229,6 +229,7 @@ window.toggleFullScreen = toggleFullScreen;
  * Set up functions to load when the DOM is ready
  */
 sbRunWhenDOMLoaded(initTooltips);
-sbRunWhenDOMLoaded(scrollToActive);
 sbRunWhenDOMLoaded(initTocHide);
 sbRunWhenDOMLoaded(initRTDObserver);
+sbRunWhenDOMLoaded(addNoPrint);
+sbRunWhenDOMLoaded(setMode);

src/sphinx_book_theme/assets/styles/abstracts/_variables.scss

@@ -24,7 +24,7 @@ $leftbar-width-mobile: 75%;
 $leftbar-width-wide: 275px;
 $toc-width-mobile: 75%;
 // Main content, to leave room for the margin
-$content-max-width: 70%;
+$content-max-width: 75%;
 
 // Consistent styling for page elements
 $box-border-radius: 0.4em;
@@ -35,26 +35,13 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
 
 // Overrides for pydata sphinx theme.
 // See https://github.com/pydata/pydata-sphinx-theme/blob/master/pydata_sphinx_theme/static/css/theme.css
-:root {
+:root[data-theme="light"] {
   // Over-ride the pydata theme so that readers can use their system base
   --pst-font-size-base: none;
 
-  // Pulling colors from the Binder logo since they are complementary and on-brand
-  --pst-color-primary: 87, 154, 202;
-  --pst-color-admonition-note: var(--pst-color-primary);
-  --pst-color-admonition-default: var(--pst-color-primary);
-
-  --pst-color-info: 255, 193, 7;
-  --pst-color-admonition-tip: var(--pst-color-info);
-  --pst-color-admonition-hint: var(--pst-color-info);
-  --pst-color-admonition-important: var(--pst-color-info);
-
-  --pst-color-warning: 245, 162, 82;
-
-  --pst-color-danger: 230, 101, 129;
-  --pst-color-admonition-warning: var(--pst-color-danger);
-
-  --pst-color-link: 0, 113, 188;
+  --pst-color-primary: rgb(87, 154, 202);
+  --pst-color-link: rgb(0, 113, 188);
+  --pst-color-border: rgb(238, 238, 238);
 
   // Font sizes
   --sbt-font-size-regular: 100%;
@@ -67,4 +54,11 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
   --sbt-header-article-font-size: var(--sbt-font-size-small-1);
   --sbt-prevnext-font-size: var(--sbt-font-size-small-1);
   --sbt-footer-font-size: var(--sbt-font-size-small-1);
+
+  // Search variables
+  --sbt-color-search-highlighted: rgb(243, 119, 38);
+  --sbt-color-search-icon: rgb(164, 166, 167);
+
+  // Announcement
+  --sbt-color-announcement: rgb(97, 97, 97);
 }

src/sphinx_book_theme/assets/styles/base/_base.scss

@@ -28,6 +28,11 @@
   display: none;
 }
 
+// default color for all the links
+a {
+  color: var(--pst-color-link);
+}
+
 // Print-specific utility classes
 .onlyprint {
   display: none;

src/sphinx_book_theme/assets/styles/base/_print.scss

@@ -2,65 +2,86 @@
 * Print-specific CSS *
 *********************************************/
 @media print {
-  // Structural elements
-  #jb-print-docs-body {
-    max-width: 90%;
-    margin: auto;
+  .bd-main {
+    .bd-content {
+      margin-left: 3rem;
+      height: auto;
+      // Structural elements
+      #jb-print-docs-body {
+        margin-left: 0rem;
 
-    h1 {
-      font-size: 3em;
-      text-align: center;
-      margin-bottom: 0;
-    }
-  }
+        h1 {
+          font-size: 3em;
+          text-align: center;
+          margin-bottom: 0;
+        }
+      }
+      // Main content adjustments
+      .bd-article {
+        padding-top: 0;
 
-  // Main content adjustments to center it a bit more
-  #main-content {
-    max-width: 67% !important;
-    margin-left: 5% !important;
-    padding-top: 0;
+        // The first H1 is the title, we've already displayed above
+        h1:first-of-type {
+          display: none;
+        }
+      }
 
-    // The first H1 is the title, we've already displayed above
-    h1:first-of-type {
-      display: none;
-    }
-  }
+      // HACK: Without this, some code cells take the whole width
+      .container {
+        min-width: 0% !important;
+      }
 
-  // HACK: Without this, some code cells take the whole width
-  .container {
-    min-width: 0% !important;
-  }
+      // Content
+      h1 {
+        margin-top: 1em;
+        margin-bottom: 1em;
+      }
+      h1,
+      h2,
+      h3,
+      h4 {
+        break-after: avoid;
+        color: black;
+      }
 
-  // Content
-  h1 {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-  h1,
-  h2,
-  h3,
-  h4 {
-    break-after: avoid;
-    color: black;
-  }
+      table {
+        break-inside: avoid;
+      }
 
-  table {
-    break-inside: avoid;
-  }
-
-  pre {
-    word-wrap: break-word;
-  }
+      pre {
+        word-wrap: break-word;
+      }
 
-  a.headerlink {
-    display: none;
-  }
+      a.headerlink {
+        display: none;
+      }
 
-  blockquote.epigraph {
-    border: none;
-  }
+      blockquote.epigraph {
+        border: none;
+      }
 
-  .footer {
-    margin-top: 1em;
+      .footer {
+        margin-top: 1em;
+      }
+      // Print-only table of contents
+      #jb-print-toc {
+        margin-bottom: 1.5rem;
+        margin-left: 0rem;
+        .section-nav {
+          border-left: 0px !important;
+          list-style-type: disc !important;
+          margin-left: 3em !important;
+          a {
+            text-decoration: none !important;
+          }
+          li {
+            display: list-item !important;
+          }
+          .nav {
+            display: none;
+          }
+        }
+      }
+    }
   }
 }

src/sphinx_book_theme/assets/styles/base/_typography.scss

@@ -2,22 +2,23 @@
 * Basic text formatting and content structure *
 *********************************************/
 
-.content-container {
+.bd-article-container {
   // Content links and link color
   a.headerlink {
     opacity: 0;
     margin-left: 0.2em;
 
     &:hover {
       background-color: transparent;
-      color: rgba(var(--pst-color-link), 1);
+      color: var(--pst-color-link);
       opacity: 1 !important;
     }
   }
 
   a,
+  a.nav-link, // to be more specific, so that pst style doesn't override
   a:visited {
-    color: rgba(var(--pst-color-link), 1);
+    color: var(--pst-color-link);
   }
 
   h1,
@@ -55,10 +56,4 @@
   p.centered {
     text-align: center;
   }
-
-  // Footnotes and Citations
-  .footnote-reference,
-  a.bibtex.internal {
-    font-size: 1em;
-  }
 }

src/sphinx_book_theme/assets/styles/components/_buttons.scss

@@ -110,7 +110,7 @@ div.header-article-main {
 /**
  * In-page table of contents
  */
-.headerbtn-page-toc {
+.headerbtn-secondary {
   // Hide the button on wide screens since we display the TOC.
   display: block;
   @media (min-width: $breakpoint-md) {

src/sphinx_book_theme/assets/styles/components/_search.scss

@@ -5,5 +5,14 @@
 // Highlighted search items are a slightly lighter version of Jupyter orange
 dt:target,
 span.highlighted {
-  background-color: #f3772642;
+  background-color: var(--sbt-color-search-highlighted);
+}
+
+.bd-search {
+  .icon {
+    color: var(--sbt-color-search-icon);
+  }
+  .search-button__kbd-shortcut {
+    display: none;
+  }
 }