Update styles and configuration

- Update styles from upstream Sphinx Book Theme

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/base/_base.scss

@@ -1,11 +1,13 @@
+@use "../abstracts/variables";
+
 /**
  * General structural things
  */
 html {
   // The PyData theme value for this is based on `header-height` variable.
   // We set the variable to 0 and have our own $article-header-height SCSS variable.
   // So here we follow the same pattern but now using our variable.
-  scroll-padding-top: $header-article-height + 1rem;
+  scroll-padding-top: variables.$header-article-height + 1rem;
 }
 
 /**

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/components/_back-to-top.scss

@@ -1,11 +1,13 @@
+@use "../abstracts/variables";
+
 #pst-back-to-top {
+  // Reduce size to be slightly less intrusive on the page
+  font-size: 0.8rem;
+
   // We should only display the back-to-top button when the TOC is not available.
   // AKA, on narrow-ish screens.
   // This over-rides a PST default
-  @media (min-width: $breakpoint-xl) {
+  @media (min-width: variables.$breakpoint-xl) {
     display: none !important;
   }
-
-  // Reduce size to be slightly less intrusive on the page
-  font-size: 0.8rem;
 }

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/components/_search.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/variables";
+
 // Clean up the search page so that it has less unnecessary text
 .bd-search-container {
   margin: 2em;
@@ -22,7 +24,7 @@
 }
 
 // Rules to switch off visibility of the field button and the header button
-@media (min-width: $breakpoint-lg) {
+@media (min-width: variables.$breakpoint-lg) {
   .search-button {
     display: none !important;
   }
@@ -37,14 +39,14 @@
 div#searchbox {
   padding-right: 2rem;
   padding-left: 2rem;
-  @media (max-width: $breakpoint-md) {
+  @media (max-width: variables.$breakpoint-md) {
     padding-right: 1rem;
     padding-left: 1rem;
   }
 
   p.highlight-link {
     // Remove the extra margin that is added
-    @media (min-width: $breakpoint-md) {
+    @media (min-width: variables.$breakpoint-md) {
       margin-left: 0;
       a {
         font-size: 1rem;

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/content/_margin.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/variables";
+
 /**
  * Margin content
  * This is the area to the right of the main content
@@ -32,7 +34,7 @@ $margin-offset: -$margin-width-relative-to-content;
   margin-left: 0.5rem;
 
   // Wide screens and printing should force margin behavior
-  @media (min-width: $breakpoint-lg), print {
+  @media (min-width: variables.$breakpoint-lg), print {
     width: $margin-width-width-gutter;
     margin: 0 $margin-offset 0 0;
 
@@ -65,7 +67,7 @@ label.margin-toggle {
   sup {
     user-select: none;
   }
-  @media (max-width: $breakpoint-lg) {
+  @media (max-width: variables.$breakpoint-lg) {
     cursor: pointer;
     color: rgb(0, 113, 188);
     &.marginnote-label {
@@ -79,7 +81,7 @@ label.margin-toggle {
 
 input.margin-toggle {
   display: none;
-  @media (max-width: $breakpoint-lg) {
+  @media (max-width: variables.$breakpoint-lg) {
     &:checked + .sidenote,
     &:checked + .marginnote {
       display: block;
@@ -95,14 +97,14 @@ input.margin-toggle {
 
 span.sidenote,
 span.marginnote {
-  z-index: $zindex-middle;
+  z-index: variables.$zindex-middle;
   position: relative;
+  border-left: none;
+  @include margin-content();
   sup {
     user-select: none;
   }
-  @include margin-content();
-  border-left: none;
-  @media (max-width: $breakpoint-lg) {
+  @media (max-width: variables.$breakpoint-lg) {
     display: none;
   }
 }
@@ -145,7 +147,7 @@ aside.sidebar.margin {
     }
   }
 
-  @media (min-width: $breakpoint-lg) {
+  @media (min-width: variables.$breakpoint-lg) {
     // No border for margin sidebars on wide screen
     border: none;
 
@@ -163,7 +165,7 @@ aside.margin,
 .margin.docutils.container,
 .cell.tag_popout,
 .cell.tag_margin {
-  z-index: $zindex-middle;
+  z-index: variables.$zindex-middle;
   position: relative;
   @include margin-content();
 
@@ -177,7 +179,7 @@ aside.margin,
 div.figure.margin-caption p.caption,
 div.figure.margin-caption figcaption,
 figure.margin-caption figcaption {
-  z-index: $zindex-middle;
+  z-index: variables.$zindex-middle;
   position: relative;
   @include margin-content();
 }
@@ -198,9 +200,9 @@ div.cell.tag_full-width,
 div.cell.tag_full_width,
 div.full_width,
 div.full-width {
-  z-index: $zindex-middle;
+  z-index: variables.$zindex-middle;
   position: relative;
-  @media (min-width: $breakpoint-lg) {
+  @media (min-width: variables.$breakpoint-lg) {
     max-width: $content-fullwidth-width;
     width: $content-fullwidth-width;
   }

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/index.scss

@@ -9,39 +9,39 @@
  * https://sass-guidelin.es/#architecture
  */
 // Variables and re-usable SCSS functions
-@import "abstracts/mixins";
-@import "abstracts/variables";
+@use "abstracts/mixins";
+@use "abstracts/variables";
 
 // Basic styling applied throughout site
-@import "base/base";
-@import "base/typography";
-@import "base/print";
+@use "base/base";
+@use "base/typography";
+@use "base/print";
 
 // Major theme layout, skeleton, and whitespace
-@import "sections/announcement";
-@import "sections/article";
-@import "sections/article-container";
-@import "sections/header-article";
-@import "sections/header-primary";
-@import "sections/sidebar-primary";
-@import "sections/sidebar-secondary";
-@import "sections/footer-content";
-@import "sections/footer-article";
+@use "sections/announcement";
+@use "sections/article";
+@use "sections/article-container";
+@use "sections/header-article";
+@use "sections/header-primary";
+@use "sections/sidebar-primary";
+@use "sections/sidebar-secondary";
+@use "sections/footer-content";
+@use "sections/footer-article";
 
 // Re-usable components across the theme
-@import "components/back-to-top";
-@import "components/icon-links";
-@import "components/logo";
-@import "components/search";
+@use "components/back-to-top";
+@use "components/icon-links";
+@use "components/logo";
+@use "components/search";
 
 // Content blocks in standard Sphinx
-@import "content/images";
-@import "content/margin";
-@import "content/quotes";
-@import "content/code";
-@import "content/notebooks";
+@use "content/images";
+@use "content/margin";
+@use "content/quotes";
+@use "content/code";
+@use "content/notebooks";
 
 // Content blocks from Sphinx extensions
 
-@import "extensions/comments";
-@import "extensions/thebe";
+@use "extensions/comments";
+@use "extensions/thebe";

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/sections/_article-container.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/variables";
+
 .bd-main .bd-content .bd-article-container {
   // Re-adjust padding defaults to be flush on the top and right
   padding: 0rem;
@@ -6,15 +8,15 @@
   // prevent from overflowing the flex container
   min-width: 0;
 
-  @media (min-width: $breakpoint-xl) {
+  @media (min-width: variables.$breakpoint-xl) {
     // keep article at reasonable width in absence of sidebar
     max-width: calc(100% - var(--pst-sidebar-secondary));
   }
 
   .bd-article {
     padding-right: 2rem;
     padding-left: 2rem;
-    @media (max-width: $breakpoint-md) {
+    @media (max-width: variables.$breakpoint-md) {
       padding-right: 1rem;
       padding-left: 1rem;
     }

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/sections/_footer-article.scss

@@ -1,6 +1,8 @@
+@use "../abstracts/variables";
+
 .bd-footer-article {
   padding: 0rem 1rem;
-  @media (max-width: $breakpoint-md) {
+  @media (max-width: variables.$breakpoint-md) {
     // More room for text on mobile
     padding: 0rem 0.5rem;
   }

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/sections/_footer-content.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/variables";
+
 /*********************************************
 * Footer - content *
 *********************************************/
@@ -8,7 +10,7 @@ footer {
     flex-wrap: wrap;
     padding: 15px;
     border-top: 1px solid #ccc;
-    font-size: $sbt-font-size-small-1;
+    font-size: variables.$sbt-font-size-small-1;
     .bd-footer-content__inner {
       padding-left: 0px;
       p {

src/plone_sphinx_theme/assets/styles/sphinx-book-theme/sections/_header-article.scss

@@ -1,3 +1,6 @@
+@use "../abstracts/mixins";
+@use "../abstracts/variables";
+
 /*********************************************
 * Top Bar *
 *********************************************/
@@ -6,8 +9,8 @@
  * Header behavior on mobile
  */
 @mixin header-height-mobile {
-  @media (max-width: $breakpoint-md) {
-    height: $header-article-height + 0.5rem;
+  @media (max-width: variables.$breakpoint-md) {
+    height: variables.$header-article-height + 0.5rem;
   }
 }
 
@@ -16,20 +19,20 @@
  */
 // Primary toggle is always visible
 button.sidebar-toggle.primary-toggle {
-  @media (min-width: $breakpoint-md) {
+  @media (min-width: variables.$breakpoint-md) {
     display: inline-block;
   }
-  @media (max-width: $breakpoint-md) {
+  @media (max-width: variables.$breakpoint-md) {
     margin-bottom: 0px;
   }
 }
 
 // Secondary toggle mimics behavior of "persistent header" div of PST
 button.sidebar-toggle.secondary-toggle {
-  @media (min-width: $breakpoint-xl) {
+  @media (min-width: variables.$breakpoint-xl) {
     display: none;
   }
-  @media (max-width: $breakpoint-md) {
+  @media (max-width: variables.$breakpoint-md) {
     margin-bottom: 0px;
   }
 }
@@ -44,14 +47,14 @@ button.sidebar-toggle.secondary-toggle {
   transition: left 0.2s;
   font-size: 0.9em;
   padding: 0 1rem;
+  z-index: variables.$zindex-sticky;
+
+  @include header-height-mobile;
 
-  @media (max-width: $breakpoint-md) {
+  @media (max-width: variables.$breakpoint-md) {
     // Give mobile view a bit more space for text
     padding: 0 0.5rem;
   }
-  z-index: $zindex-sticky;
-
-  @include header-height-mobile;
 
   // The box shadow that shows up when you've scrolled past the top
   .scrolled & {
@@ -67,7 +70,7 @@ button.sidebar-toggle.secondary-toggle {
   .header-article-items {
     display: flex;
     align-items: center;
-    height: $header-article-height;
+    height: variables.$header-article-height;
     width: 100%;
   }
 
@@ -144,7 +147,7 @@ button.sidebar-toggle.secondary-toggle {
     // No background on hover. Need important to over-ride the PST which uses it too.
     span,
     i {
-      transition: color $animation-time ease-out;
+      transition: color variables.$animation-time ease-out;
     }
     &:active,
     &:hover {
@@ -166,7 +169,7 @@ button.sidebar-toggle.secondary-toggle {
     // Positioning and layout of dropdown items to be standardized
     top: 2rem;
     transform: translateX(-75%);
-    @include pst-box-shadow;
+    @include mixins.pst-box-shadow;
 
     // Color and shadowing
     border-color: var(--pst-color-border);