NPM: Bump the npm-dependencies group with 3 updates

.stylelintrc.js

@@ -13,7 +13,7 @@ module.exports = {
                 ignoreAtRules: ['else'],
             },
         ],
-        'color-function-notation': 'legacy',
+        'color-function-notation': 'modern',
         'color-hex-length': 'long',
         'custom-property-empty-line-before': null,
         'declaration-block-no-redundant-longhand-properties': null,

FrontEnd/docc.scss

@@ -22,7 +22,8 @@ header.spi,
 footer.spi {
     position: sticky;
     width: 100%;
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Hello', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+    font-family:
+        -apple-system, BlinkMacSystemFont, 'SF Hello', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
         'Apple Color Emoji', 'Segoe UI Emoji' !important;
     font-size: 16px;
     line-height: 1.4;
@@ -135,14 +136,14 @@ header.spi {
                                 min-width: 200px;
                                 padding: 15px 0;
                                 background-color: var(--header-background);
-                                border-top: 3px rgba(255, 255, 255, 20%) solid;
+                                border-top: 3px rgb(255 255 255 / 20%) solid;
                                 box-shadow: var(--panel-shadow);
 
                                 li {
                                     padding: 2px 15px 2px 20px;
 
                                     &.current {
-                                        background-color: rgba(255, 255, 255, 15%);
+                                        background-color: rgb(255 255 255 / 15%);
                                     }
                                 }
                             }
@@ -172,10 +173,10 @@ header.spi {
     }
 
     .latest-stable-wrap {
-        background-color: rgba(255, 255, 255, 7.5%);
+        background-color: rgb(255 255 255 / 7.5%);
 
         @media (prefers-color-scheme: dark) {
-            background-color: rgba(0, 0, 0, 12.5%);
+            background-color: rgb(0 0 0 / 12.5%);
         }
     }
 
@@ -212,7 +213,7 @@ header.spi {
             font-size: 10px;
             text-align: center;
             color: var(--header-text);
-            background-color: rgba(255, 255, 255, 20%);
+            background-color: rgb(255 255 255 / 20%);
             border-radius: 4px;
         }
     }

FrontEnd/styles/blog.scss

@@ -99,7 +99,7 @@ body.blog {
 
     .blog-post {
         picture.shadow img {
-            box-shadow: 0 3px 8px 2px rgba(100, 100, 100, 20%);
+            box-shadow: 0 3px 8px 2px rgb(100 100 100 / 20%);
         }
 
         img {

FrontEnd/styles/colors.scss

@@ -70,7 +70,7 @@
     --panel-background: var(--very-light-grey);
     --panel-background-hover: var(--light-grey);
     --panel-border: var(--light-grey);
-    --panel-shadow: 0 6px 10px 5px rgba(0, 0, 0, 10%);
+    --panel-shadow: 0 6px 10px 5px rgb(0 0 0 / 10%);
     --panel-underlay-background: var(--black);
     --panel-underlay-opacity: 0.5;
 
@@ -90,8 +90,8 @@
     --header-text: var(--white);
     --header-link-text: var(--white);
     --header-link-highlight: var(--yellow);
-    --header-gradient-start: rgba(255, 255, 255, 20%);
-    --header-gradient-end: rgba(255, 255, 255, 5%);
+    --header-gradient-start: rgb(255 255 255 / 20%);
+    --header-gradient-end: rgb(255 255 255 / 5%);
 
     --breadcrumb: var(--light-grey);
     --breadcrumb-header: var(--grey);
@@ -162,27 +162,27 @@
     --big-button-blue-background: var(--mid-blue);
     --big-button-blue-border: var(--light-blue);
 
-    --keyword-count-background: rgba(0, 0, 0, 10%);
+    --keyword-count-background: rgb(0 0 0 / 10%);
 
     --panel-button-background: var(--very-light-grey);
-    --panel-button-shadow: 0 3px 5px 5px rgba(0, 0, 0, 5%);
+    --panel-button-shadow: 0 3px 5px 5px rgb(0 0 0 / 5%);
     --panel-button-text: var(--white);
     --panel-accent: var(--dark-grey);
 
     --package-funding-background: var(--very-light-grey);
 
     --scta-avatar-gradient: linear-gradient(
-        rgba(241, 241, 241, 0%) 0,
-        rgba(241, 241, 241, 0%) 50%,
-        rgba(241, 241, 241, 100%) 100%
+        rgb(241 241 241 / 0%) 0,
+        rgb(241 241 241 / 0%) 50%,
+        rgb(241 241 241 / 100%) 100%
     );
     --scta-panel-accent: var(--pink);
     --ccta-panel-accent: var(--mid-blue);
     --ghcta-panel-accent: var(--pink);
     --podcast-panel-background: var(--very-light-blue);
     --podcast-panel-accent: var(--light-blue);
 
-    --avatar-shadow: 0 2px 2px 3px rgba(0, 0, 0, 5%);
+    --avatar-shadow: 0 2px 2px 3px rgb(0 0 0 / 5%);
 
     --rss-subscribe-color: var(--orange);
 
@@ -245,8 +245,8 @@
         --table-row-alt-background: var(--very-very-dark-grey);
 
         --header-background: var(--very-dark-blue);
-        --header-gradient-start: rgba(255, 255, 255, 8%);
-        --header-gradient-end: rgba(255, 255, 255, 3%);
+        --header-gradient-start: rgb(255 255 255 / 8%);
+        --header-gradient-end: rgb(255 255 255 / 3%);
 
         --breadcrumb: var(--dark-grey);
 
@@ -300,17 +300,17 @@
         --big-button-blue-background: var(--mid-blue);
         --big-button-blue-border: var(--light-blue);
 
-        --keyword-count-background: rgba(255, 255, 255, 12.5%);
+        --keyword-count-background: rgb(255 255 255 / 12.5%);
 
         --panel-button-background: var(--very-dark-grey);
         --panel-cta-background: var(--dark-grey);
 
         --package-funding-background: var(--very-dark-grey);
 
         --scta-avatar-gradient: linear-gradient(
-            rgba(25, 25, 35, 0%) 0,
-            rgba(25, 25, 35, 0%) 50%,
-            rgba(25, 25, 35, 100%) 100%
+            rgb(25 25 35 / 0%) 0,
+            rgb(25 25 35 / 0%) 50%,
+            rgb(25 25 35 / 100%) 100%
         );
 
         --debug-console-background: var(--dark-blue);

FrontEnd/styles/markdown.scss

@@ -18,7 +18,7 @@
 
 .markdown main {
     picture.shadow img {
-        box-shadow: 0 3px 8px 2px rgba(100, 100, 100, 20%);
+        box-shadow: 0 3px 8px 2px rgb(100 100 100 / 20%);
     }
 
     img {