MAINT: Miscellaneous improvements to this theme (#1377)

README.md

@@ -1,19 +1,19 @@
 # The PyData Sphinx Theme
 
-[![License](https://img.shields.io/badge/License-BSD_3--Clause-yellow?logo=opensourceinitiative&logoColor=white)](https://github.com/pydata/pydata-sphinx-theme/blob/main/LICENSE)
-[![PyPI](https://img.shields.io/pypi/v/pydata-sphinx-theme?logo=python&logoColor=white&color=orange)](https://pypi.org/project/pydata-sphinx-theme/)
-[![conda-forge](https://img.shields.io/conda/vn/conda-forge/pydata-sphinx-theme.svg?logo=anaconda&logoColor=white&color=orange)](https://anaconda.org/conda-forge/pydata-sphinx-theme)
-[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/pydata/pydata-sphinx-theme/tests.yml?logo=github&logoColor=white)](https://github.com/pydata/pydata-sphinx-theme/actions/workflows/tests.yml)
+[![License badge](https://img.shields.io/badge/License-BSD_3--Clause-yellow?logo=opensourceinitiative&logoColor=white)](https://github.com/pydata/pydata-sphinx-theme/blob/main/LICENSE)
+[![PyPI version badge](https://img.shields.io/pypi/v/pydata-sphinx-theme?logo=python&logoColor=white&color=orange)](https://pypi.org/project/pydata-sphinx-theme/)
+[![conda-forge license badge](https://img.shields.io/conda/vn/conda-forge/pydata-sphinx-theme.svg?logo=anaconda&logoColor=white&color=orange)](https://anaconda.org/conda-forge/pydata-sphinx-theme)
+[![GitHub Workflow Status - build](https://img.shields.io/github/actions/workflow/status/pydata/pydata-sphinx-theme/tests.yml?logo=github&logoColor=white)](https://github.com/pydata/pydata-sphinx-theme/actions/workflows/tests.yml)
 [![Read the Docs (version)](https://img.shields.io/readthedocs/pydata-sphinx-theme/latest?logo=readthedocs&logoColor=white)](https://readthedocs.org/projects/pydata-sphinx-theme/builds/)
-[![Codecov](https://img.shields.io/codecov/c/github/pydata/pydata-sphinx-theme?logo=codecov&logoColor=white)](https://codecov.io/gh/pydata/pydata-sphinx-theme)
+[![Codecov badge](https://img.shields.io/codecov/c/github/pydata/pydata-sphinx-theme?logo=codecov&logoColor=white)](https://codecov.io/gh/pydata/pydata-sphinx-theme)
 
 A clean, three-column, Bootstrap-based Sphinx theme by and for the [PyData community](https://pydata.org).
 
 - :books: Documentation: https://pydata-sphinx-theme.readthedocs.io/en/stable
 - :bulb: Examples: https://pydata-sphinx-theme.readthedocs.io/en/stable/examples
 - :raised_hands: Contribute: https://pydata-sphinx-theme.readthedocs.io/en/stable/community
 
-[![Example documentation with this theme](./docs/_static/theme_landing.png)](https://pydata-sphinx-theme.readthedocs.io/en/stable)
+[![PyData theme - Configure the search position demo image showcasing both the light and dark theme in a single image.](./docs/_static/theme-demo-screenshot.png)](https://pydata-sphinx-theme.readthedocs.io/en/stable)
 
 ## Installation and usage
 
@@ -22,7 +22,7 @@ and use as follows:
 
 - Install the `pydata-sphinx-theme` in your doc build environment:
 
-  ```
+  ```bash
   pip install pydata-sphinx-theme
   # or
   conda install pydata-sphinx-theme --channel conda-forge
@@ -31,7 +31,7 @@ and use as follows:
 - Then, in the `conf.py` of your sphinx docs, you update the `html_theme`
   configuration option:
 
-  ```
+  ```python
   html_theme = "pydata_sphinx_theme"
   ```
 
@@ -46,7 +46,7 @@ And that's it!
 ## Contribute to and develop the theme
 
 Contributions are very welcome! Installing the development version, building
-the example docs and developing the css/js of the theme, etc, is explained in
+the example docs and developing the `CSS/JS` of the theme, etc., is explained in
 more detail in the contributing section of the documentation:
 
 - [Community and contributing documentation](https://pydata-sphinx-theme.readthedocs.io/en/latest/community/index.html)

docs/_static/contributors.yaml

@@ -22,3 +22,6 @@
 - header: "@12rambau"
   image: https://avatars.githubusercontent.com/u/12596392
   website: https://github.com/12rambau
+- header: "@trallard"
+  image: https://avatars.githubusercontent.com/u/23552331
+  website: https://github.com/trallard

src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss

@@ -20,7 +20,7 @@ $link-underline-offset: 0.1578em !default;
 //  - 0.1875rem, if it's thicker than 3px because the user has changed the text
 //    size in their browser
 //  - 0.12em (relative to the link's text size)
-$link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default;
+$link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 
 //  Ensures links have an underline decoration by default - needed to meet
 // WCAG SC 1.4.1
@@ -39,8 +39,8 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 // Ensures links have an underline decoration on hover - distinct from the
 // default behaviour
 @mixin link-decoration-hover {
-  @if $link-hover-underline-thickness {
-    text-decoration-thickness: $link-hover-underline-thickness;
+  @if $link-hover-decoration-thickness {
+    text-decoration-thickness: $link-hover-decoration-thickness;
     // Disable ink skipping on underlines on hover. Browsers haven't
     // standardised on this part of the spec yet, so set both properties
     text-decoration-skip-ink: none; // Chromium, Firefox
@@ -132,12 +132,13 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 // Adds a vertical line on the left hand side of the link to indicate that
 // it's the current page. Note this is distinct from an active state.
 // Used on the primary sidebar and the TOC.
+// We want the side box shadow to have the same thickness as the hover underline
 @mixin link-sidebar-current {
   font-weight: 600;
   color: var(--pst-color-primary);
-  @if $link-underline-thickness {
+  @if $link-hover-decoration-thickness {
     box-shadow: inset
-      $link-underline-thickness
+      $link-hover-decoration-thickness
       0px
       0px
       var(--pst-color-primary);
@@ -148,19 +149,30 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 //
 // Adds a bottom underline, this leaves enough space for the hover state without
 // cluttering the navbar.
+// We want the side box shadow to have the same thickness as the hover underline
 @mixin link-navbar-current {
   font-weight: 600;
-  border-bottom: $link-hover-underline-thickness solid var(--pst-color-primary);
   color: var(--pst-color-primary);
+  @if $link-hover-decoration-thickness {
+    border-bottom: $link-hover-decoration-thickness
+      solid
+      var(--pst-color-primary);
+  }
 }
 
 // Navigation bar icon links hover styles
 //
 // Adds a bottom box-shadow - since there is no text we cannot use text-decoration
+// We want the side box shadow to have the same thickness as the hover underline
 @mixin icon-navbar-hover {
   &:hover {
     color: var(--pst-color-link-hover);
-    box-shadow: 0px $link-underline-thickness 0px var(--pst-color-hover);
+    @if $link-hover-decoration-thickness {
+      box-shadow: 0px
+        $link-hover-decoration-thickness
+        0px
+        var(--pst-color-link-hover);
+    }
   }
 }
 

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

@@ -141,10 +141,12 @@
   color: var(--pst-color-text-muted);
   padding: 0.5em;
 
-  &:hover,
-  &:focus {
+  &:hover {
     background-color: var(--pst-color-surface);
-    border-color: var(--pst-color-primary);
+    border: 2px solid var(--pst-color-link-hover);
+  }
+  &:focus-visible {
+    border: 2px solid var(--pst-color-accent);
   }
 
   // The keyboard shotcut text

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html

@@ -40,7 +40,7 @@
   {% endfor %}
 
   {% if not remove_sidebar_secondary %}
-    <label class="sidebar-toggle secondary-toggle" for="__secondary">
+    <label class="sidebar-toggle secondary-toggle" for="__secondary" tabindex="0">
       <span class="fa-solid fa-outdent"></span>
     </label>
   {% endif %}