Fixed Stylelint errors

.stylelintrc

@@ -1,13 +1,14 @@
 {
   "extends": [
+    "stylelint-config-rational-order",
     "stylelint-config-recommended",
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss"
-    "stylelint-config-rational-order"
   ],
   "plugins": [
     "stylelint-scss"
   ],
   "rules": {
+    "alpha-value-notation": "number",
     "at-rule-empty-line-before": [
       "always",
       {
@@ -40,6 +41,7 @@
         ]
       }
     ],
+    "color-function-notation": null,
     "color-hex-length": "long",
     "color-named": "never",
     "comment-empty-line-before": [
@@ -51,6 +53,7 @@
       }
     ],
     "custom-property-empty-line-before": null,
+    "custom-property-pattern": null,
     "declaration-colon-space-after": null,
     "declaration-no-important": true,
     "declaration-block-single-line-max-declarations": 0,
@@ -58,6 +61,7 @@
     "function-url-quotes": "always",
     "font-family-name-quotes": "always-where-recommended",
     "font-weight-notation": "numeric",
+    "hue-degree-notation": "number",
     "linebreaks": "unix",
     "media-feature-name-no-unknown": null,
     "no-descending-specificity": null,
@@ -73,6 +77,7 @@
         ]
       }
     ],
+    "selector-class-pattern": null,
     "selector-combinator-space-before": null,
     "selector-descendant-combinator-no-non-space": null,
     "selector-max-empty-lines": 0,
@@ -94,6 +99,14 @@
       "vw"
     ],
     "value-list-comma-newline-after": null,
+    "value-no-vendor-prefix": [
+      true,
+      {
+        "ignoreValues": [
+          "box"
+        ]
+      }
+    ],
     "scss/at-each-key-value-single-line": true,
     "scss/at-else-closing-brace-newline-after": "always-last-in-chain",
     "scss/at-function-parentheses-space-before": "never",
@@ -106,22 +119,19 @@
     "scss/at-mixin-parentheses-space-before": "never",
     "scss/at-mixin-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
     "scss/at-rule-conditional-no-parentheses": true,
+    "scss/comment-no-empty": null,
     "scss/comment-no-loud": true,
     "scss/declaration-nested-properties": "never",
     "scss/dimension-no-non-numeric-values": true,
     "scss/dollar-variable-colon-newline-after": "always-multi-line",
     "scss/dollar-variable-colon-space-after": "always-single-line",
     "scss/dollar-variable-colon-space-before": "never",
-    "scss/dollar-variable-first-in-block": [
+    "scss/dollar-variable-first-in-block": null,
-      true,
-      {
-        "ignore": ["comments"],
-        "except": ["function"]
-      }
-    ],
     "scss/dollar-variable-no-missing-interpolation": true,
     "scss/dollar-variable-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
+    "scss/double-slash-comment-empty-line-before": null,
     "scss/double-slash-comment-whitespace-inside": "always",
+    "scss/at-extend-no-missing-placeholder": null,
     "scss/no-duplicate-mixins": true,
     "scss/operator-no-unspaced": true,
     "scss/partial-no-import": true,

package-lock.json

@@ -9165,6 +9165,25 @@
       "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==",
       "dev": true
     },
+    "stylelint-config-recommended-scss": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.0.tgz",
+      "integrity": "sha512-nQonGHxkv+n61WiU03bcHBHlA9XPMg7mGyD48ZmwrcnNroCEbH2nZhfn6Y1xcxfIHpD2wnwtAUPAwFaNQQpivw==",
+      "dev": true,
+      "requires": {
+        "postcss-scss": "^4.0.1",
+        "stylelint-config-recommended": "^6.0.0",
+        "stylelint-scss": "^4.0.0"
+      },
+      "dependencies": {
+        "postcss-scss": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.1.tgz",
+          "integrity": "sha512-7QghUu2l07OyVFT5LyvU/QJ1f2s8IL0mfToN69Yu533PgMZm2B1S6hYd4bao8tFq70r3P5MmAbKhVrZ4wOADxg==",
+          "dev": true
+        }
+      }
+    },
     "stylelint-config-standard": {
       "version": "23.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-23.0.0.tgz",
@@ -9174,6 +9193,16 @@
         "stylelint-config-recommended": "^6.0.0"
       }
     },
+    "stylelint-config-standard-scss": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-2.0.0.tgz",
+      "integrity": "sha512-Pfex2nCvFKSL4u4d8sECYRkQadu6w+XO7kiE521sZNmFBGxLYhhZt0RN9HwXj5oBKWcE6Y5g86IjbaiXI7zrPg==",
+      "dev": true,
+      "requires": {
+        "stylelint-config-recommended-scss": "^5.0.0",
+        "stylelint-config-standard": "^23.0.0"
+      }
+    },
     "stylelint-order": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-2.2.1.tgz",

package.json

@@ -84,7 +84,7 @@
     "stylelint": "^14.0.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-recommended": "^6.0.0",
-    "stylelint-config-standard": "^23.0.0",
+    "stylelint-config-standard-scss": "^2.0.0",
     "stylelint-scss": "^4.0.0",
     "svgo": "2.3.1",
     "tiny-glob": "^0.2.9",

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -20,6 +20,9 @@
 /// DEALINGS
 ////
 
+@use "sass:color";
+@use "sass:list";
+
 // ----------------------------------------------------------------------------
 // Variables
 // ----------------------------------------------------------------------------
@@ -116,7 +119,7 @@ $admonitions: (
     margin: 0 px2rem(-12px) 0 px2rem(-16px);
     padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
     font-weight: 700;
-    background-color: transparentize($clr-blue-a200, 0.9);
+    background-color: color.adjust($clr-blue-a200, $alpha: -0.9);
     border-left: px2rem(4px) solid $clr-blue-a200;
 
     // Adjust for right-to-left languages
@@ -158,8 +161,8 @@ $admonitions: (
 // ----------------------------------------------------------------------------
 
 @each $names, $props in $admonitions {
-  $name: nth($names, 1);
+  $name: list.nth($names, 1);
-  $tint: nth($props, 2);
+  $tint: list.nth($props, 2);
 
   // Admonition flavour
   .md-typeset .admonition.#{$name} {
@@ -168,7 +171,7 @@ $admonitions: (
 
   // Admonition flavour title
   .md-typeset .#{$name} > .admonition-title {
-    background-color: transparentize($tint, 0.9);
+    background-color: color.adjust($tint, $alpha: -0.9);
     border-color: $tint;
 
     // Admonition icon

src/assets/stylesheets/palette/_primary.scss

@@ -20,6 +20,8 @@
 /// DEALINGS
 ////
 
+@use "sass:list";
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -48,9 +50,9 @@
 
   // Color palette
   [data-md-color-primary="#{$name}"] {
-    --md-primary-fg-color:             hsla(#{hex2hsl(nth($colors, 1))}, 1);
+    --md-primary-fg-color:             hsl(#{hex2hsl(list.nth($colors, 1))});
-    --md-primary-fg-color--light:      hsla(#{hex2hsl(nth($colors, 2))}, 1);
+    --md-primary-fg-color--light:      hsl(#{hex2hsl(list.nth($colors, 2))});
-    --md-primary-fg-color--dark:       hsla(#{hex2hsl(nth($colors, 3))}, 1);
+    --md-primary-fg-color--dark:       hsl(#{hex2hsl(list.nth($colors, 3))});
 
     // Inverted text for lighter shades
     @if index("lime" "yellow" "amber" "orange", $name) {

src/assets/stylesheets/utilities/_break.scss

@@ -20,6 +20,10 @@
 /// DEALINGS
 ////
 
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+
 // ----------------------------------------------------------------------------
 // Variables
 // ----------------------------------------------------------------------------
@@ -63,16 +67,16 @@ $break-devices: () !default;
     @if type-of($value) == list {
       @each $number in $value {
         @if type-of($number) == number {
-          $min: min($number, $min);
+          $min: math.min($number, $min);
           @if $max {
-            $max: max($number, $max);
+            $max: math.max($number, $max);
           }
         } @else {
           @error "Invalid number: #{$number}";
         }
       }
     } @else if type-of($value) == number {
-      $min: min($value, $min);
+      $min: math.min($value, $min);
       $max: null;
     } @else {
       @error "Invalid value: #{$value}";
@@ -88,7 +92,7 @@ $break-devices: () !default;
   $current: $break-devices;
   @for $n from 1 through length($device) {
     @if type-of($current) == map {
-      $current: map-get($current, nth($device, $n));
+      $current: map.get($current, list.nth($device, $n));
     } @else {
       @error "Invalid device map: #{$devices}";
     }
@@ -112,8 +116,8 @@ $break-devices: () !default;
       @content;
     }
   } @else if type-of($breakpoint) == list {
-    $min: nth($breakpoint, 1);
+    $min: list.nth($breakpoint, 1);
-    $max: nth($breakpoint, 2);
+    $max: list.nth($breakpoint, 2);
     @if type-of($min) == number and type-of($max) == number {
       @media screen and (min-width: $min) and (max-width: $max) {
         @content;
@@ -161,9 +165,9 @@ $break-devices: () !default;
   }
   @if type-of($device) == list {
     $breakpoint: break-select-device($device);
-    @if nth($breakpoint, 2) {
+    @if list.nth($breakpoint, 2) {
-      $min: nth($breakpoint, 1);
+      $min: list.nth($breakpoint, 1);
-      $max: nth($breakpoint, 2);
+      $max: list.nth($breakpoint, 2);
 
       @media screen and (min-width: $min) and (max-width: $max) {
         @content;
@@ -185,7 +189,7 @@ $break-devices: () !default;
   }
   @if type-of($device) == list {
     $breakpoint: break-select-device($device);
-    $min: nth($breakpoint, 1);
+    $min: list.nth($breakpoint, 1);
 
     @media screen and (min-width: $min) {
       @content;
@@ -204,7 +208,7 @@ $break-devices: () !default;
   }
   @if type-of($device) == list {
     $breakpoint: break-select-device($device);
-    $max: nth($breakpoint, 2);
+    $max: list.nth($breakpoint, 2);
 
     @media screen and (max-width: $max) {
       @content;

src/overrides/assets/stylesheets/main/layout/_hero.scss

@@ -116,7 +116,7 @@
 
     // Primary button
     &--primary {
-      color: hsla(280deg, 37%, 48%, 1);
+      color: hsla(280, 37%, 48%, 1);
       background-color: var(--md-primary-bg-color);
       border-color: var(--md-primary-bg-color);
     }

src/overrides/assets/stylesheets/main/layout/_iconsearch.scss

@@ -121,8 +121,8 @@
         height: px2rem(18px);
 
         // Slate theme, i.e. dark mode
-        [data-md-color-scheme="slate"] &[src*=squidfunk] {
+        [data-md-color-scheme="slate"] &[src*="squidfunk"] {
-          filter: invert(1);
+          filter: invert(1); /* stylelint-disable-line */
         }
       }
     }