Manual fixes for stylelint

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

@@ -1,14 +1,13 @@
-// loading the math module
+@use "sass:color";
+@use "sass:map";
 @use "sass:math";
 
-/**
-* Get color combinations that meet a minimum contrast ratio as per WCAG 2
-*/
+// Get color combinations that meet a minimum contrast ratio as per WCAG 2
+
 // @param {color} $bg - Background color of the element
 // @param {color} optional $target-color-contrast-dark $target-color-contrast-light  - Target text colors, defaul to our
 // $foundation-black and $foundation-white colors
 // @return {color} $max-ratio-color - The color that has the highest contrast ratio
-//
 @function a11y-combination(
   $bg,
   $target-color-contrast-dark: $foundation-black,
@@ -50,25 +49,25 @@
 // Return WCAG2.1 relative luminance
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
-//
 @function luminance($target-color) {
   $rgb-col: (
-    "r": red($target-color),
-    "g": green($target-color),
-    "b": blue($target-color),
+    "r": color.red($target-color),
+    "g": color.green($target-color),
+    "b": color.blue($target-color),
   );
 
   @each $channel, $value in $rgb-col {
     // here we get RsRGB, GsRGB, and BsRGB
-    @if math.div($value, 255) <=0.03928 {
-      $rgb-col: map-merge(
+    // stylelint-disable-next-line number-max-precision
+    @if math.div($value, 255) <= 0.03928 {
+      $rgb-col: map.merge(
         $rgb-col,
         (
           $channel: math.div(math.div($value, 255), 12.92),
         )
       );
     } @else {
-      $rgb-col: map-merge(
+      $rgb-col: map.merge(
         $rgb-col,
         (
           $channel:
@@ -78,8 +77,9 @@
     }
   }
 
-  @return (
-    0.2126 * map-get($rgb-col, "r") + 0.7152 * map-get($rgb-col, "g") + 0.0722 *
-      map-get($rgb-col, "b")
-  );
+  $r: map.get($rgb-col, "r");
+  $g: map.get($rgb-col, "g");
+  $b: map.get($rgb-col, "b");
+
+  @return (0.2126 * $r + 0.7152 * $g + 0.0722 * $b);
 }

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

@@ -2,8 +2,11 @@
  * Miscellaneous color functions and mixins
 **/
 
-// loading the math module
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 @use "sass:math";
+@use "sass:string";
 
 // We must add ::before pseudo-element to some theme components (such as admonitions)
 // because users were instructed to customize the background color this way.
@@ -32,7 +35,7 @@
 // @return {*}
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
 
   @return $map;
@@ -46,7 +49,7 @@
 // @param {String/Color} $color - Color definition from map
 // @return {Color} - Color type (in hex)
 @function check-color($color) {
-  @if type-of($color) == string {
+  @if meta.type-of($color) == string {
     $color: from-hex($color);
   }
 
@@ -58,12 +61,12 @@
   */
 // @param {String} $string - String representation of a color
 @function from-hex($string) {
-  $string-lower: to-lower-case($string);
+  $string-lower: string.to-lower-case($string);
   $r: "";
   $g: "";
   $b: "";
   $hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
-  $length: str-length($string);
+  $length: string.length($string);
   $max: if($length == 4, 1, 2);
 
   // Check for length accuracy
@@ -73,18 +76,18 @@
 
   // Loop from the second character (omitting #)
   @for $i from 2 through $length {
-    $c: str-slice($string-lower, $i, $i);
+    $c: string.slice($string-lower, $i, $i);
 
     // If wrong character, return
-    @if index($hex, $c) == null {
+    @if not list.index($hex, $c) {
       @return $string;
     }
 
-    @if str-length($r) < $max {
+    @if string.length($r) < $max {
       $r: $r + $c;
-    } @else if str-length($g) < $max {
+    } @else if string.length($g) < $max {
       $g: $g + $c;
-    } @else if str-length($b) < $max {
+    } @else if string.length($b) < $max {
       $b: $b + $c;
     }
   }
@@ -95,18 +98,18 @@
     $b: $b + $b;
   }
 
-  @return rgb(_hex-to-dec($r), _hex-to-dec($g), _hex-to-dec($b));
+  @return rgb(hex-to-dec($r), hex-to-dec($g), hex-to-dec($b));
 }
 
-@function _hex-to-dec($string) {
+@function hex-to-dec($string) {
   $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);
+  $string: string.to-lower-case($string);
+  $length: string.length($string);
   $dec: 0;
 
   @for $i from 1 through $length {
     $factor: 1 + (15 * ($length - $i));
-    $index: index($hex, str-slice($string, $i, $i));
+    $index: list.index($hex, string.slice($string, $i, $i));
     $dec: $dec + $factor * ($index - 1);
   }
 

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

@@ -1,15 +1,15 @@
-/**
- * Consistent styling for links
- **/
+// Consistent styling for links
+// ============================
+
+@use "sass:string";
 
 // Define some useful variables for links styling consistency
-//
-//  Thickness of the underline for links
-// the default will be either:
+
+// The default thickness of the underline for links will be either:
 //  - 1px
-// - 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;
+//  - 0.0625rem if it's thicker than 1px because the user has changed the text
+//    size in their browser
+$link-underline-thickness: string.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
@@ -22,9 +22,11 @@ $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-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
+$link-hover-decoration-thickness: string.unquote(
+  "max(3px, .1875rem, .12em)"
+) !default;
 
-//  Ensures links have an underline decoration by default - needed to meet
+// Ensures links have an underline decoration by default - needed to meet
 // WCAG SC 1.4.1
 @mixin link-decoration {
   text-decoration: underline;
@@ -60,7 +62,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 }
 
 // Default link styles
-//
+// -------------------
 // Defines: default unvisited, visited, hover, and active.
 // TODO: @trallard to improve focus styles in subsequent PR
 @mixin link-style-default {
@@ -92,7 +94,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 }
 
 // Text link styles
-//
+// ----------------
 // Makes links use the muted text colour and removes the underline.
 // Use this mixin for navigation bar links.
 @mixin link-style-text {
@@ -108,7 +110,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 }
 
 // Sidebar and TOC links
-//
+// ---------------------
 // Makes links use the muted text colour and removes the underline.
 // Use this mixin for navigation the primary sidebar and table of contents.
 // Active and hover should work together rather than one overriding the other.
@@ -137,7 +139,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 }
 
 // Sidebar current page link styles
-//
+// --------------------------------
 // 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.
@@ -163,7 +165,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 }
 
 // Navigation bar current page link styles
-//
+// ---------------------------------------
 // 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
@@ -179,7 +181,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 }
 
 // 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 {
@@ -195,15 +197,13 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
   }
 }
 
-/*
-Mixin for links in the header (and the More dropdown toggle).
+// 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.
+// 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.
-*/
+// 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.

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

@@ -71,51 +71,51 @@ a {
   }
 }
 
-.heading-style {
+%heading-style {
   margin: 2.75rem 0 1.05rem;
   font-family: var(--pst-font-family-heading);
   font-weight: var(--pst-font-weight-heading);
   line-height: 1.15;
 }
 
 h1 {
-  @extend .heading-style;
+  @extend %heading-style;
 
   margin-top: 0;
   font-size: var(--pst-font-size-h1);
   color: var(--pst-heading-color);
 }
 
 h2 {
-  @extend .heading-style;
+  @extend %heading-style;
 
   font-size: var(--pst-font-size-h2);
   color: var(--pst-heading-color);
 }
 
 h3 {
-  @extend .heading-style;
+  @extend %heading-style;
 
   font-size: var(--pst-font-size-h3);
   color: var(--pst-heading-color);
 }
 
 h4 {
-  @extend .heading-style;
+  @extend %heading-style;
 
   font-size: var(--pst-font-size-h4);
   color: var(--pst-heading-color);
 }
 
 h5 {
-  @extend .heading-style;
+  @extend %heading-style;
 
   font-size: var(--pst-font-size-h5);
   color: var(--pst-color-text-base);
 }
 
 h6 {
-  @extend .heading-style;
+  @extend %heading-style;
 
   font-size: var(--pst-font-size-h6);
   color: var(--pst-color-text-base);
@@ -207,7 +207,7 @@ pre {
 }
 
 // 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.

src/pydata_sphinx_theme/assets/styles/content/_api.scss

@@ -134,7 +134,7 @@ dl > dt > a:has(.viewcode-link) {
 // the API selector
 // from https://github.com/pradyunsg/furo/blob/main/src/furo/assets/styles/content/_api.sass#L6)
 dl[class]:not(.option-list, .field-list, .footnote, .glossary, .simple) {
-  //increase margin bottom after the dl elements
+  // increase margin bottom after the dl elements
   margin-bottom: 3rem;
 
   dd {

src/pydata_sphinx_theme/assets/styles/content/_quotes.scss

@@ -29,7 +29,7 @@ blockquote {
     color: var(--pst-color-inline-code-links);
   }
 
-  //hack to make the text in the blockquote selectable
+  // hack to make the text in the blockquote selectable
   &::before {
     z-index: -1;
   }

src/pydata_sphinx_theme/assets/styles/content/_tables.scss

@@ -47,7 +47,7 @@ td {
 .table {
   @include table-colors;
 
-  --bs-table-bg: transparent; //background
+  --bs-table-bg: transparent; // background
   --bs-table-color: var(
     --pst-color-text-base
   ); // ensure text and bullets are visible

src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss

@@ -37,8 +37,7 @@
 
     // The ablog cloud should move horizontally
     &.ablog-cloud {
-      flex-direction: row;
-      flex-flow: wrap;
+      flex-flow: row wrap;
       gap: 0.5rem;
 
       // Vertical-align tag clouds