Update PST SCSS (#590)

* Update PST SCSS

* Add overridden bootstrap variables

* Comment out undefinted variable

Author: jarrodmillman

assets/theme-css/pst/abstracts/_links.scss

@@ -86,7 +86,6 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
       color: var(--pst-color-link-hover);
     }
   }
-  @include focus-indicator;
 }
 
 // Text link styles
@@ -102,7 +101,6 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
     @include link-decoration;
     @include link-decoration-hover;
   }
-  @include focus-indicator;
 }
 
 // Sidebar and TOC links
@@ -125,6 +123,12 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
   &:active {
     color: var(--pst-color-link-hover);
   }
+
+  &:focus-visible {
+    box-shadow: $focus-ring-box-shadow;
+    outline: none;
+    z-index: 10; // keep focus ring on top (prevent the link-sidebar-current notch from lying on top of the ring)
+  }
 }
 
 // Sidebar current page link styles
@@ -137,11 +141,16 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
   font-weight: 600;
   color: var(--pst-color-primary);
   @if $link-hover-decoration-thickness {
-    box-shadow: inset
+    $notch-shadow: inset
       $link-hover-decoration-thickness
       0px
       0px
       var(--pst-color-primary);
+    box-shadow: $notch-shadow;
+    &:focus-visible {
+      box-shadow: $notch-shadow, $focus-ring-box-shadow;
+      outline: none;
+    }
   }
 }
 
@@ -176,9 +185,84 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
   }
 }
 
-// Focus indicator
-@mixin focus-indicator {
-  &:focus-visible {
-    outline: 2px solid var(--pst-color-accent);
+/*
+Mixin for links in the header (and the More dropdown toggle).
+
+The mixin assumes it will be applied to some element X with a markup structure
+like: X > .nav-link, or X > .dropdown-toggle.
+
+It also assumes X.current is how the app annotates which item in the header nav
+corresponds to the section in the docs that the user is currently reading.
+*/
+@mixin header-link {
+  // Target the child and not the parent because we want the underline in the
+  // mobile sidebar to only span the width of the text not the entire row/line.
+  > .nav-link,
+  > .dropdown-toggle {
+    border-radius: 2px;
+    color: var(--pst-color-text-muted);
+  }
+
+  > .nav-link {
+    // Set up pseudo-element for hover and current states below.
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: transparent;
+    }
+
+    // Underline on hover.
+    // - Don't use text-decoration because it will wrap across two lines if
+    //   the link text also wraps across two lines.
+    // - Use pseudo-element in order to avoid the border-radius values
+    //   rounding the edges of the underline. (And since a header link can be
+    //   both focused and hovered at the same time and we want the focus ring
+    //   but not the underline to be rounded, we cannot use a box shadow or
+    //   bottom border link element to create the underline, or else it will
+    //   be rounded and if we apply border-radius 0 then the hovered focus
+    //   ring would go from rounded to sharp. So we have to use the
+    //   pseudo-element.)
+    &:hover {
+      color: var(--pst-color-secondary);
+      text-decoration: none; // override the link-style-hover mixin
+      &::before {
+        border-bottom: 3px solid var(--pst-color-secondary);
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: none; // override Bootstrap
+      outline: 3px solid var(--pst-color-accent);
+      outline-offset: 3px;
+    }
+  }
+
+  > .dropdown-toggle {
+    &:focus-visible {
+      box-shadow: $focus-ring-box-shadow;
+    }
+    &:hover {
+      text-decoration: none;
+      box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover); // purple focus ring
+      // Brighten the text on hover (muted -> base)
+      color: var(--pst-color-text-base);
+    }
+  }
+
+  &.current {
+    > .nav-link {
+      color: var(--pst-color-primary);
+
+      // Underline the current navbar item
+      &::before {
+        border-bottom: 3px solid var(--pst-color-primary);
+      }
+    }
   }
 }

assets/theme-css/pst/base/_base.scss

@@ -15,7 +15,7 @@ body {
 
   // hack to avoid the black background on some browser including Safari
   &::-webkit-scrollbar-track {
-    background: var(--pst-color-background);
+    background-color: var(--pst-color-background);
   }
 }
 
@@ -167,16 +167,45 @@ pre {
   }
 }
 
-// Needs bootstrap
-///// the back to top btn
-///#pst-back-to-top {
-///  z-index: $zindex-tooltip;
-///  position: fixed;
-///  display: none;
-///  top: 80vh;
-///  left: 50vw;
-///  transform: translate(-50%);
-///  color: var(--pst-color-secondary-text);
-///  background-color: var(--pst-color-secondary);
-///  border: none;
-///}
+// the back to top btn
+#pst-back-to-top {
+  //  z-index: $zindex-tooltip;
+  position: fixed;
+  display: none;
+  top: 90vh;
+  left: 50vw;
+  transform: translate(-50%);
+  color: var(--pst-color-secondary-text);
+  background-color: var(--pst-color-secondary);
+  border: none;
+
+  .fa-arrow-up {
+    // Using margin instead of a space character prevents the space between the
+    // icon and the text from being underlined when the button is hovered.
+    margin-inline-end: 0.5em;
+  }
+
+  @include link-style-hover;
+  &:hover {
+    text-decoration-thickness: 1px;
+    background-color: var(--pst-violet-600);
+    color: var(--pst-color-secondary-text);
+  }
+
+  &:focus-visible {
+    box-shadow: none;
+    outline: $focus-ring-outline;
+    outline-color: var(--pst-color-secondary);
+    outline-offset: $focus-ring-width;
+  }
+}
+
+// Focus ring
+//
+// Note: The Bootstrap stylesheet provides the focus ring (customized by this
+// theme via Sass variables in _bootstrap.scss) in some cases. This rule covers
+// all other cases.
+:focus-visible {
+  outline: $focus-ring-outline;
+  box-shadow: none; // override Bootstrap
+}

assets/theme-css/pst/bootstrap.scss

@@ -0,0 +1 @@
+@import "variables/bootstrap";

assets/theme-css/pst/content/_admonitions.scss

@@ -3,13 +3,14 @@
  * Admonitions CSS originally inspired by https://squidfunk.github.io/mkdocs-material/getting-started/
  */
 $admonition-border-radius: 0.25rem;
+$admonition-left-border-width: 0.2rem;
 div.admonition,
 .admonition {
   margin: 1.5625em auto;
   padding: 0 0.6rem 0.8rem 0.6rem;
   overflow: hidden;
   page-break-inside: avoid;
-  border-left: 0.2rem solid;
+  border-left: $admonition-left-border-width solid;
   border-color: var(--pst-color-info);
   border-radius: $admonition-border-radius;
   background-color: var(--pst-color-on-background);
@@ -205,7 +206,7 @@ div.admonition,
     margin-top: 0;
 
     // Undo the .sidebar directive border
-    border-width: 0 0 0 0.2rem;
+    border-width: 0 0 0 $admonition-left-border-width;
 
     // TODO: these semantic-color-names border-color rules might no longer be
     //       needed when we drop support for Sphinx 4 / docutils 0.17

assets/theme-css/pst/content/_figures.scss

@@ -15,6 +15,12 @@ figure {
     color: var(--pst-color-text-muted);
     margin-left: auto;
     margin-right: auto;
+    margin-top: 0.3rem;
+
+    & > p:last-child {
+      // Don't add extra margin to already existing figure bottom margin
+      margin-bottom: 0;
+    }
 
     table.table {
       width: fit-content;

assets/theme-css/pst/extensions/_sphinx_design.scss

@@ -149,6 +149,22 @@ html[data-theme="light"] {
   .sd-card-body {
     background-color: var(--pst-color-panel-background);
   }
+
+  // Focus ring for link-cards
+  .sd-stretched-link:focus-visible {
+    // Don't put the focus ring on the <a> element (it has zero height in Sphinx Design cards)
+    outline: none;
+
+    // Put the focus ring on the <a> element's ::after pseudo-element
+    &:after {
+      outline: $focus-ring-outline;
+      border-radius: 0.25rem; // copied from Sphinx Design CSS for .sd-card
+    }
+  }
+
+  &.sd-card-hover:hover {
+    border-color: var(--pst-color-link-hover);
+  }
 }
 /*******************************************************************************
   * tabs
@@ -158,28 +174,53 @@ html[data-theme="light"] {
   > input {
     // Active tab label
     &:checked + label {
-      border-color: transparent transparent var(--pst-color-primary); // top LR bottom
+      border-style: solid solid none;
+      border-color: var(--pst-color-primary) var(--pst-color-primary)
+        transparent; // top LR bottom
+      border-width: 0.125rem 0.125rem 0;
+      border-radius: 0.125rem 0.125rem 0 0;
+      background-color: var(--pst-color-on-background);
+      transform: translateY(0.125rem);
       color: var(--pst-color-primary);
     }
 
+    &:focus-visible + label {
+      border: 0.125rem solid var(--pst-color-accent);
+      border-radius: 0.125rem;
+      background-color: var(--pst-color-accent-bg);
+      color: var(--pst-color-on-surface);
+    }
+
     // Hover label
-    &:not(:checked) + label:hover {
-      border-color: var(--pst-color-secondary);
+    &:not(:checked):not(:focus-visible) + label:hover {
+      border-color: transparent;
       color: var(--pst-color-secondary);
     }
   }
 
   // Tab label
   > label {
-    color: var(--pst-color-text-muted);
-    border-top: 0.125rem solid transparent; // so hover isn't just color change
-    padding-top: 0.5em; // same as bottom padding, so hover overline looks OK
-    // Hovered label
-    html &:hover {
-      color: var(--pst-color-secondary);
-      border-color: var(--pst-color-secondary);
+    color: var(--pst-color-on-surface);
+    border: 0.125rem solid transparent;
+    border-radius: 0.125rem 0.125rem 0px 0px;
+    background-color: var(--pst-color-surface);
+    padding: 0 0.75em;
+    margin-inline-end: 0.25rem;
+    line-height: 1.95;
+
+    html[data-theme="dark"] & {
+      background-color: var(--pst-color-on-background);
     }
   }
+
+  // panel
+  .sd-tab-content {
+    border: 0.125rem solid var(--pst-color-primary);
+    border-radius: 0.1875rem;
+    box-shadow: unset;
+    padding: 0.625rem;
+    background-color: var(--pst-color-on-background);
+  }
 }
 
 /*******************************************************************************
@@ -255,5 +296,43 @@ details.sd-dropdown {
     .sd-summary-down {
       top: 0.7rem;
     }
+
+    // Focus ring
+    &:focus-visible {
+      outline: $focus-ring-outline;
+      outline-offset: -$focus-ring-width;
+    }
+  }
+}
+
+/*******************************************************************************
+* Buttons (which in Sphinx Design are actually links that look like buttons)
+* ref: https://sphinx-design.readthedocs.io/en/pydata-theme/badges_buttons.html#buttons
+*/
+html {
+  .sd-btn {
+    min-width: 2.25rem;
+    padding: 0.3125rem 0.75rem 0.4375rem; // 5px 12px 7px
+
+    @include link-style-hover; // override Sphinx Design
+    &:hover {
+      text-decoration-thickness: 1px;
+    }
+  }
+
+  @each $name in $sd-semantic-color-names {
+    .sd-btn-#{$name},
+    .sd-btn-outline-#{$name} {
+      &:focus-visible {
+        // Override Sphinx Design's use of -highlight colors. The -highlight
+        // colors are 15% darker, so this would create the effect of darkening
+        // the button when focused but we just want the button to have a focus
+        // ring of the same (non-highlight) color.
+        background-color: var(--sd-color-#{$name}) !important;
+        border-color: var(--sd-color-#{$name}) !important;
+        outline: var(--sd-color-#{$name}) solid $focus-ring-width;
+        outline-offset: $focus-ring-width;
+      }
+    }
   }
 }