Update switcher styling (#1400)

* remove green color for "stable"

* unify latest/dev naming

* add left border to active item (don't rely only on colour)

* use mixin

docs/_static/custom.css

@@ -1,23 +1,3 @@
-/* Background of stable should be green */
-.version-switcher__container a[data-version-name*="stable"] {
-  position: relative;
-  background-color: var(--pst-color-success-bg);
-  box-shadow: inset 3px 0px 0px var(--pst-color-success);
-}
-
-.version-switcher__container a[data-version-name*="stable"] span {
-  color: var(--pst-color-success);
-}
-
-.version-switcher__container a[data-version-name*="stable"] span:before {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
 /* custom CSS classes (used in docs/user_guide/extending.rst) NOTE: the begin
  *  and end markers are necessary for partial file includes! don't remove them.
  */

docs/conf.py

@@ -100,7 +100,8 @@
 version_match = os.environ.get("READTHEDOCS_VERSION")
 # If READTHEDOCS_VERSION doesn't exist, we're not on RTD
 # If it is an integer, we're in a PR build and the version isn't correct.
-if not version_match or version_match.isdigit():
+# If it's "latest" → change to "dev" (that's what we want the switcher to call it)
+if not version_match or version_match.isdigit() or version_match == "latest":
     # For local development, infer the version to match from the package.
     release = pydata_sphinx_theme.__version__
     if "dev" in release or "rc" in release:

src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss

@@ -31,23 +31,20 @@ button.btn.version-switcher__button {
     &:hover {
       background-color: var(--pst-color-surface);
     }
-  }
-
-  // Over-rides Bootstrap default blue for the current one (info-bg)
-  // TODO: @trallard to fix active in subsequent PR
-  a.list-group-item.active {
-    color: var(--pst-color-info);
-    position: relative;
-    z-index: 1;
+    &.active {
+      @include link-sidebar-current;
+      position: relative;
+      z-index: 1;
 
-    span:before {
-      content: "";
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      z-index: -1;
-      left: 0;
-      top: 0;
+      span:before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: -1;
+        left: 0;
+        top: 0;
+      }
     }
   }
 }