Autofix (stylelint)

docs/_static/custom.css

@@ -5,37 +5,44 @@
 /* begin-custom-color/* <your static path>/custom.css */
 
 div.admonition.admonition-olive {
-  border-color: hsl(60, 100%, 25%);
+  border-color: hsl(60deg 100% 25%);
 }
+
 div.admonition.admonition-olive > .admonition-title {
-  background-color: hsl(60, 100%, 14%);
+  background-color: hsl(60deg 100% 14%);
   color: white;
 }
-div.admonition.admonition-olive > .admonition-title:after {
-  color: hsl(60, 100%, 25%);
+
+div.admonition.admonition-olive > .admonition-title::after {
+  color: hsl(60deg 100% 25%);
 }
+
 /* end-custom-color */
 
 /* begin-custom-icon/* <your static path>/custom.css */
 
-div.admonition.admonition-icon > .admonition-title:after {
+div.admonition.admonition-icon > .admonition-title::after {
   content: "\f24e"; /* the fa-scale icon */
 }
+
 /* end-custom-icon */
 
 /* begin-custom-youtube/* <your static path>/custom.css */
 
 div.admonition.admonition-youtube {
-  border-color: hsl(0, 100%, 50%); /* YouTube red */
+  border-color: hsl(0deg 100% 50%); /* YouTube red */
 }
+
 div.admonition.admonition-youtube > .admonition-title {
-  background-color: hsl(0, 99%, 18%);
+  background-color: hsl(0deg 99% 18%);
   color: white;
 }
-div.admonition.admonition-youtube > .admonition-title:after {
-  color: hsl(0, 100%, 50%);
+
+div.admonition.admonition-youtube > .admonition-title::after {
+  color: hsl(0deg 100% 50%);
   content: "\f26c"; /* fa-solid fa-tv */
 }
+
 /* end-custom-youtube */
 
 /* fix for project names that are parsed as links: the whole card is a link so

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

@@ -22,15 +22,16 @@
 
   @each $fg in $foregrounds {
     $contrast-ratio: get-contrast-ratio($bg, $fg);
+
     @if $contrast-ratio >= $min-contrast-ratio {
       @return $fg;
     } @else if $contrast-ratio > $max-ratio {
       $max-ratio: $contrast-ratio;
       $max-ratio-color: $fg;
     }
   }
-  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$bg}...";
 
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$bg}...";
   @return $max-ratio-color;
 }
 

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

@@ -8,14 +8,15 @@
 // We must add ::before pseudo-element to some theme components (such as admonitions)
 // because users were instructed to customize the background color this way.
 @mixin legacy-backdrop-placeholder {
-  &:before {
+  &::before {
     content: "";
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     z-index: -1;
+
     // So that hovering over the text within background is still possible.
     // Otherwise the background overlays the text and you cannot click or select easily.
     // ref: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
@@ -33,6 +34,7 @@
   @each $key in $keys {
     $map: map-get($map, $key);
   }
+
   @return $map;
 }
 
@@ -47,6 +49,7 @@
   @if type-of($color) == string {
     $color: from-hex($color);
   }
+
   @return $color;
 }
 
@@ -99,8 +102,8 @@
   $hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
   $string: to-lower-case($string);
   $length: str-length($string);
-
   $dec: 0;
+
   @for $i from 1 through $length {
     $factor: 1 + (15 * ($length - $i));
     $index: index($hex, str-slice($string, $i, $i));

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

@@ -10,10 +10,12 @@
 // - 0.0625rem if it's thicker than 1px because the user has changed the text
 //   size in their browser
 $link-underline-thickness: unquote("max(1px, .0625rem)") !default;
+
 // Offset of link underlines from text baseline
 // The default is 3px expressed as ems, as calculated against the default body
 // font size (on desktop).
 $link-underline-offset: 0.1578em !default;
+
 // Thickness of link underlines in hover state
 // The default for each link will be the thickest of the following:
 //  - 3px
@@ -41,6 +43,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-decoration-hover {
   @if $link-hover-decoration-thickness {
     text-decoration-thickness: $link-hover-decoration-thickness;
+
     // Disable ink skipping on underlines on hover.
     text-decoration-skip-ink: none;
   }
@@ -52,6 +55,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-style-hover {
   @include link-decoration;
   @include link-decoration-hover;
+
   color: var(--pst-color-link-hover);
 }
 
@@ -62,12 +66,13 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-style-default {
   // So that really long links don't spill out of their container
   word-wrap: break-word;
-
   color: var(--pst-color-link);
+
   @include link-decoration;
 
   &:hover {
     color: var(--pst-color-link-hover);
+
     @include link-decoration-hover;
   }
 
@@ -79,6 +84,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
   // Visited should still be hoverable
   &:visited {
     color: var(--pst-color-link);
+
     &:hover {
       color: var(--pst-color-link-hover);
     }
@@ -95,6 +101,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 
   &:hover {
     color: var(--pst-color-link-hover);
+
     @include link-decoration;
     @include link-decoration-hover;
   }
@@ -113,6 +120,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
     text-decoration: underline;
     background-color: transparent;
     color: var(--pst-color-link-hover);
+
     @include link-decoration-hover;
   }
 
@@ -137,13 +145,16 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-sidebar-current {
   font-weight: 600;
   color: var(--pst-color-primary);
+
   @if $link-hover-decoration-thickness {
     $notch-shadow: inset
       $link-hover-decoration-thickness
-      0px
-      0px
+      0
+      0
       var(--pst-color-primary);
+
     box-shadow: $notch-shadow;
+
     &:focus-visible {
       box-shadow: $notch-shadow, $focus-ring-box-shadow;
       outline: none;
@@ -159,6 +170,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin link-navbar-current {
   font-weight: 600;
   color: var(--pst-color-primary);
+
   @if $link-hover-decoration-thickness {
     border-bottom: $link-hover-decoration-thickness
       solid
@@ -173,10 +185,11 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 @mixin icon-navbar-hover {
   &:hover {
     color: var(--pst-color-link-hover);
+
     @if $link-hover-decoration-thickness {
-      box-shadow: 0px
+      box-shadow: 0
         $link-hover-decoration-thickness
-        0px
+        0
         var(--pst-color-link-hover);
     }
   }
@@ -203,14 +216,12 @@ corresponds to the section in the docs that the user is currently reading.
   > .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;
+      inset: 0;
       background-color: transparent;
     }
 
@@ -244,6 +255,7 @@ corresponds to the section in the docs that the user is currently reading.
     &: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

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

@@ -46,9 +46,11 @@
       &:nth-child(odd) {
         background-color: var(--pst-color-table-row-zebra-low-bg);
       }
+
       &:nth-child(even) {
         background-color: var(--pst-color-table-row-zebra-high-bg);
       }
+
       &:hover {
         background-color: var(--pst-color-table-row-hover-bg);
       }

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

@@ -41,7 +41,7 @@ a {
     color: var(--pst-color-secondary);
     opacity: 0.7;
     font-size: 0.8em;
-    padding: 0 4px 0 4px;
+    padding: 0 4px;
     margin-left: 0.2em;
     text-decoration: none;
     transition: all 0.2s ease-out;
@@ -80,37 +80,43 @@ a {
 
 h1 {
   @extend .heading-style;
+
   margin-top: 0;
   font-size: var(--pst-font-size-h1);
   color: var(--pst-heading-color);
 }
 
 h2 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h2);
   color: var(--pst-heading-color);
 }
 
 h3 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h3);
   color: var(--pst-heading-color);
 }
 
 h4 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h4);
   color: var(--pst-heading-color);
 }
 
 h5 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h5);
   color: var(--pst-color-text-base);
 }
 
 h6 {
   @extend .heading-style;
+
   font-size: var(--pst-font-size-h6);
   color: var(--pst-color-text-base);
 }
@@ -151,7 +157,7 @@ code {
 }
 
 pre {
-  margin: 1.5em 0 1.5em 0;
+  margin: 1.5em 0;
   padding: 1rem;
   background-color: var(--pst-color-surface);
   color: var(--pst-color-text-base);
@@ -186,6 +192,7 @@ pre {
 
   &:hover {
     @include link-style-hover;
+
     text-decoration-thickness: 1px;
     background-color: var(--pst-violet-600);
     color: var(--pst-color-secondary-text);

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

@@ -17,12 +17,13 @@ ul.bd-breadcrumbs {
     // Style should look like heavier in-page links
     // keeping visited in the default link colour
     font-weight: bold;
+
     a {
       @include link-style-text;
     }
 
     // Items that aren't the home have a caret to the left
-    &:not(.breadcrumb-home):before {
+    &:not(.breadcrumb-home)::before {
       font: var(--fa-font-solid);
       font-size: 0.8rem;
       content: var(--pst-breadcrumb-divider);

src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss

@@ -4,16 +4,17 @@
 
 .navbar-icon-links {
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   column-gap: 1rem;
-  flex-wrap: wrap;
   justify-content: space-evenly;
 
   // Remove the padding so that we can define it with flexbox gap above
   li.nav-item a.nav-link {
     padding-left: 0;
     padding-right: 0;
+
     @include icon-navbar-hover;
+
     &:focus {
       color: inherit;
     }
@@ -36,15 +37,15 @@
     }
 
     /* Social media buttons hard-code the brand color */
-    &.fa-square-twitter:before {
+    &.fa-square-twitter::before {
       color: #55acee;
     }
 
-    &.fa-square-gitlab:before {
+    &.fa-square-gitlab::before {
       color: #548;
     }
 
-    &.fa-bitbucket:before {
+    &.fa-bitbucket::before {
       color: #0052cc;
     }
   }

src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss

@@ -23,6 +23,7 @@
       height: 100%;
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
+
       @include link-style-text;
     }
   }