Draft: porting over https://github.com/just-the-docs/just-the-docs/pull/1086/

Co-authored-by: Matt Wang <matt@matthewwang.me>

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       matrix:
         jekyll-version: [3.9, 4.3]
         os: [ ubuntu-latest, macos-latest, windows-latest ]
-        ruby-version: [2.7, 3.1]
+        ruby-version: ["3.0", "3.1", "3.2"]
     runs-on: ${{ matrix.os }}
     steps:
     - uses: actions/checkout@v3
@@ -46,7 +46,7 @@ jobs:
     - name: Setup Ruby
       uses: ruby/setup-ruby@v1
       with:
-        ruby-version: '3.1'
+        ruby-version: "3.2"
         bundler-cache: false
     - name: Bundle Install
       run: bundle install
@@ -62,7 +62,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        ruby-version: [3.1]
+        ruby-version: ["3.2"]
     runs-on: ubuntu-latest
 
     steps:
@@ -87,7 +87,7 @@ jobs:
           root: _site
           blacklist: line-numbers
       - name: Test with html-proofer
-        run: bundle exec htmlproofer _site --ignore-urls "/github.com/"
+        run: bundle exec htmlproofer _site --ignore-urls "/github.com/,/web.archive.org/"
         env:
           NOKOGIRI_USE_SYSTEM_LIBRARIES: true
 

.github/workflows/deploy.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: '3.1' # Not needed with a .ruby-version file
+          ruby-version: "3.2"
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
           cache-version: 0 # Increment this number if you need to re-download cached gems
       - name: Setup Pages

.github/workflows/publish-gem.yml

@@ -10,10 +10,10 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
-    - name: Set up Ruby 3.1
+    - name: Set up Ruby 3.2
       uses: actions/setup-ruby@v1
       with:
-        ruby-version: 3.1
+        ruby-version: "3.2"
 
     - name: Publish to GPR
       run: |

.gitignore

@@ -4,6 +4,5 @@
 .jekyll-cache
 .sass-cache
 _site
-Gemfile.lock
 node_modules
 .DS_Store

Gemfile

@@ -5,6 +5,4 @@ gem "jekyll-github-metadata", ">= 2.15"
 
 gem "jekyll-include-cache", group: :jekyll_plugins
 
-gem "webrick", "~> 1.7"
-
 gem "html-proofer", "~> 5.0", :group => :development

Gemfile.lock

@@ -0,0 +1,150 @@
+PATH
+  remote: .
+  specs:
+    just-the-docs (0.6.0)
+      jekyll (>= 3.8.5)
+      jekyll-include-cache
+      jekyll-seo-tag (>= 2.0)
+      rake (>= 12.3.1)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    Ascii85 (1.1.0)
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
+    afm (0.2.2)
+    async (2.6.3)
+      console (~> 1.10)
+      fiber-annotation
+      io-event (~> 1.1)
+      timers (~> 4.1)
+    colorator (1.1.0)
+    concurrent-ruby (1.2.2)
+    console (1.23.2)
+      fiber-annotation
+      fiber-local
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    eventmachine (1.2.7)
+    faraday (2.7.10)
+      faraday-net_http (>= 2.0, < 3.1)
+      ruby2_keywords (>= 0.0.4)
+    faraday-net_http (3.0.2)
+    ffi (1.15.5)
+    fiber-annotation (0.2.0)
+    fiber-local (1.0.0)
+    forwardable-extended (2.6.0)
+    google-protobuf (3.23.4-arm64-darwin)
+    google-protobuf (3.23.4-x86_64-linux)
+    hashery (2.1.2)
+    html-proofer (5.0.8)
+      addressable (~> 2.3)
+      async (~> 2.1)
+      nokogiri (~> 1.13)
+      pdf-reader (~> 2.11)
+      rainbow (~> 3.0)
+      typhoeus (~> 1.3)
+      yell (~> 2.0)
+      zeitwerk (~> 2.5)
+    http_parser.rb (0.8.0)
+    i18n (1.14.1)
+      concurrent-ruby (~> 1.0)
+    io-event (1.2.3)
+    jekyll (4.3.2)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-github-metadata (2.16.0)
+      jekyll (>= 3.4, < 5.0)
+      octokit (>= 4, < 7, != 4.4.0)
+    jekyll-include-cache (0.2.1)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.8.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    nokogiri (1.15.4-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.15.4-x86_64-linux)
+      racc (~> 1.4)
+    octokit (6.1.1)
+      faraday (>= 1, < 3)
+      sawyer (~> 0.9)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    pdf-reader (2.11.0)
+      Ascii85 (~> 1.0)
+      afm (~> 0.2.1)
+      hashery (~> 2.0)
+      ruby-rc4
+      ttfunk
+    public_suffix (5.0.3)
+    racc (1.7.1)
+    rainbow (3.1.1)
+    rake (13.0.6)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.6)
+    rouge (4.1.2)
+    ruby-rc4 (0.1.5)
+    ruby2_keywords (0.0.5)
+    safe_yaml (1.0.5)
+    sass-embedded (1.64.1-arm64-darwin)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.64.1-x86_64-linux-gnu)
+      google-protobuf (~> 3.23)
+    sawyer (0.9.2)
+      addressable (>= 2.3.5)
+      faraday (>= 0.17.3, < 3)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    timers (4.3.5)
+    ttfunk (1.7.0)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    unicode-display_width (2.4.2)
+    webrick (1.8.1)
+    yell (2.2.2)
+    zeitwerk (2.6.11)
+
+PLATFORMS
+  arm64-darwin
+  x86_64-linux
+
+DEPENDENCIES
+  bundler (>= 2.3.5)
+  html-proofer (~> 5.0)
+  jekyll-github-metadata (>= 2.15)
+  jekyll-include-cache
+  just-the-docs!
+
+BUNDLED WITH
+   2.4.13

_config.yml

@@ -140,7 +140,11 @@ gh_edit_branch: "main" # the branch that your docs is served from
 gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
 
 # Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
-color_scheme: nil
+color_scheme: auto
+color_scheme_options:
+  enable_localstorage: true
+  enable_switch: true
+  switch_options: ["auto", "light", "dark"]
 
 callouts_level: quiet # or loud
 callouts:

_includes/components/aux_nav.html

@@ -11,5 +11,12 @@
         </a>
       </li>
     {% endfor %}
+    {% if site.color_scheme_options and site.color_scheme_options.switch_options %}
+    <li class="aux-nav-list-item">
+      <button class="site-button color-scheme-switch-theme-button" aria-label="Switch color scheme">
+        <svg aria-hidden="true" class="site-button-icon"><use href="#svg-{{ site.color_scheme | default: 'light' }}"></use></svg>
+      </button>
+    </li>
+    {% endif %}
   </ul>
 </nav>

_includes/components/header.html

@@ -5,7 +5,7 @@
     <div></div>
   {% endif %}
   {% include header_custom.html %}
-  {% if site.aux_links %}
+  {% if site.aux_links or site.color_scheme_options and site.color_scheme_options.switch_options %}
     {% include components/aux_nav.html %}
   {% endif %}
 </div>

_includes/head.html

@@ -14,7 +14,48 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
-  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
+  {% if site.color_scheme_options and site.color_scheme_options.enable_localstorage %}
+  <script>
+    (function(){
+      function createThemeStylesheet(theme, media) {
+        var link  = document.createElement('link');
+        link.rel  = 'stylesheet';
+        link.type = 'text/css';
+        link.href = "{{ '/assets/css/just-the-docs-*.css' | relative_url }}".replace("*",theme);
+        if(media) link.media = media;
+        return link;
+      }
+
+      var theme = window.localStorage.getItem('theme');
+      var head = document.getElementsByTagName('head')[0];
+
+      if (theme === null) {
+        theme = "{{ site.color_scheme }}";
+      }
+
+      if (theme === "nil") {
+        theme = "default";
+      }
+
+      if (theme === "auto") {
+        head.appendChild(createThemeStylesheet('light', '(prefers-color-scheme: light)'));
+        head.appendChild(createThemeStylesheet('dark', '(prefers-color-scheme: dark)'));
+      } else {
+        head.appendChild(createThemeStylesheet(theme || "default"));
+      }
+    })();
+  </script>
+  {% else %}
+    {% case site.color_scheme %}
+    {% when "auto" %}
+      <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-light.css' | relative_url }}" type="text/css" media="(prefers-color-scheme: light)">
+      <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-dark.css' | relative_url }}" type="text/css" media="(prefers-color-scheme: dark)">
+    {% when nil %}
+      <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}" type="text/css">
+    {% else %}
+      <link rel="stylesheet" href="{{ site.color_scheme | prepend: '/assets/css/just-the-docs-' | append: '.css' | relative_url }}" type="text/css">
+    {% endcase %}
+  {% endif %}
 
   {% include head_nav.html %}
 

_includes/head_nav.html

@@ -28,7 +28,7 @@
     {%- assign color_scheme = "light" -%}
   {%- endif %}
   @import "./color_schemes/light";
-  {% unless color_scheme == "light" %}
+  {% unless color_scheme == "light" or color_scheme == "auto" %}
   @import "./color_schemes/{{ color_scheme }}";
   {% endunless %}
   {{ activation }}

_includes/icons/icons.html

@@ -10,4 +10,7 @@
   {% if site.enable_copy_code_button != false %}
     {% include icons/code_copy.html %}
   {% endif %}
+  {% if site.color_scheme_options and site.color_scheme_options.enable_switch %}
+    {% include icons/switch_color_scheme.html %}
+  {% endif %}
 </svg>

_includes/icons/switch_color_scheme.html

@@ -0,0 +1,29 @@
+<!-- Feather. Public domain or under the CC0-1.0-Universal license: https://github.com/python/peps/blob/ebff37d5e7728377035b1e1ce9c9796ed63940b1/pep_sphinx_extensions/LICENCE.rst -->
+<symbol id="svg-auto" viewBox="0 0 24 24" pointer-events="all">
+  <title>Following system colour scheme</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="9"></circle>
+    <path d="M12 3v18m0-12l4.65-4.65M12 14.3l7.37-7.37M12 19.6l8.85-8.85"></path>
+  </svg>
+</symbol>
+<symbol id="svg-dark" viewBox="0 0 24 24" pointer-events="all">
+  <title>Selected dark colour scheme</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
+  </svg>
+</symbol>
+<symbol id="svg-light" viewBox="0 0 24 24" pointer-events="all">
+  <title>Selected light colour scheme</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+</symbol>

_sass/layout.scss

@@ -140,11 +140,32 @@
   }
 }
 
+button.site-button {
+  background: none;
+  border: none;
+}
+
 .site-button {
   display: flex;
   height: 100%;
   padding: $gutter-spacing-sm;
   align-items: center;
+
+  .site-button-icon {
+    width: #{$sp-4 * 1.2};
+    height: #{$sp-4 * 1.2};
+    align-self: center;
+    color: $grey-dk-000;
+    cursor: pointer;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    .site-button-icon {
+      color: $link-color;
+    }
+  }
 }
 
 @include mq(md) {

assets/css/just-the-docs-default.scss

@@ -1,6 +1,6 @@
 ---
 ---
-{% if site.color_scheme and site.color_scheme != "nil" %}
+{% if site.color_scheme and site.color_scheme != "nil" and site.color_scheme != "auto" %}
   {% assign color_scheme = site.color_scheme %}
 {% else %}
   {% assign color_scheme = "light" %}

assets/js/just-the-docs.js

@@ -465,13 +465,56 @@ function searchLoaded(index, docs) {
 // Switch theme
 
 jtd.getTheme = function() {
-  var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
+  var cssFile = document.querySelector('[rel="stylesheet"]');
+  if(cssFile.hasAttribute('media')) return 'auto';
+
+  var cssFileHref = cssFile.getAttribute('href');
   return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
 }
 
 jtd.setTheme = function(theme) {
-  var cssFile = document.querySelector('[rel="stylesheet"]');
+  function createThemeStylesheet(theme, media) {
-  cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | relative_url }}' + theme + '.css');
+    var link  = document.createElement('link');
+    link.rel  = 'stylesheet';
+    link.type = 'text/css';
+    link.href = "{{ '/assets/css/just-the-docs-*.css' | relative_url }}".replace("*",theme);
+    if(media) link.media = media;
+    return link;
+  }
+  var cssFiles = [...document.querySelectorAll('[rel="stylesheet"]')];
+  if(theme === "auto") {
+    cssFiles.at(-1).insertAdjacentElement('afterend', createThemeStylesheet('light', '(prefers-color-scheme: light)'));
+    cssFiles.at(-1).insertAdjacentElement('afterend', createThemeStylesheet('dark', '(prefers-color-scheme: dark)'));
+  } else {
+    cssFiles.at(-1).insertAdjacentElement('afterend', createThemeStylesheet(theme || "default"));
+  }
+  setTimeout(() => cssFiles.forEach(it => it.remove()), 100);
+}
+
+jtd.switchThemeButton = function(button, event) {
+  {% if site.color_scheme_options and site.color_scheme_options.switch_options %}
+  const themes = {{ site.color_scheme_options.switch_options | jsonify }};
+  {% else %}
+  const themes = ["auto", "light", "dark"];
+  {% endif %}
+  var currentTheme = jtd.getTheme();
+  var nextTheme = themes[(themes.indexOf(currentTheme)+1)%themes.length];
+  jtd.setTheme(nextTheme);
+  button.getElementsByTagName('svg')[0].getElementsByTagName('use')[0].setAttribute('href',`#svg-${nextTheme}`);
+  {% if site.color_scheme_options and site.color_scheme_options.enable_localstorage  %}
+  window.localStorage.setItem('theme', nextTheme);
+  {% endif %}
+}
+
+function initSwitchThemeButton() {
+  var buttons = [...document.getElementsByClassName("color-scheme-switch-theme-button")];
+  {% if site.color_scheme_options and site.color_scheme_options.enable_localstorage  != false %}
+  theme = window.localStorage.getItem('theme');
+  if(theme != null){
+    buttons.forEach(button => button.getElementsByTagName('svg')[0].getElementsByTagName('use')[0].setAttribute('href',`#svg-${theme}`));
+  }
+  {% endif %}
+  buttons.forEach(button => jtd.addEvent(button, 'click', event => jtd.switchThemeButton(button, event)));
 }
 
 // Note: pathname can have a trailing slash on a local jekyll server
@@ -533,6 +576,9 @@ jtd.onReady(function(){
   {%- if site.search_enabled != false %}
   initSearch();
   {%- endif %}
+  {%- if site.enable_switch_color_scheme != false %}
+  initSwitchThemeButton();
+  {%- endif %}
   activateNav();
   scrollNav();
 });

package-lock.json

@@ -11,7 +11,7 @@
       "devDependencies": {
         "npm-run-all": "^4.1.5",
         "prettier": "^3.0.2",
-        "stylelint": "^15.10.2",
+        "stylelint": "^15.10.3",
         "stylelint-config-standard-scss": "^10.0.0"
       }
     },
@@ -51,9 +51,9 @@
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "2.3.0",
+      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz",
-      "integrity": "sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==",
+      "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==",
       "dev": true,
       "funding": [
         {
@@ -69,26 +69,32 @@
         "node": "^14 || ^16 || >=18"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^2.1.1"
+        "@csstools/css-tokenizer": "^2.2.0"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "2.1.1",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz",
-      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
+      "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==",
       "dev": true,
-      "engines": {
+      "funding": [
-        "node": "^14 || ^16 || >=18"
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
         },
-      "funding": {
+        {
           "type": "opencollective",
           "url": "https://opencollective.com/csstools"
         }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
     },
     "node_modules/@csstools/media-query-list-parser": {
-      "version": "2.1.2",
+      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz",
-      "integrity": "sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==",
+      "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==",
       "dev": true,
       "funding": [
         {
@@ -104,8 +110,8 @@
         "node": "^14 || ^16 || >=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.3.0",
+        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.1.1"
+        "@csstools/css-tokenizer": "^2.2.0"
       }
     },
     "node_modules/@csstools/selector-specificity": {
@@ -663,9 +669,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.3.0",
+      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -1476,9 +1482,9 @@
       }
     },
     "node_modules/known-css-properties": {
-      "version": "0.27.0",
+      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.28.0.tgz",
-      "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
+      "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
       "dev": true
     },
     "node_modules/lines-and-columns": {
@@ -1987,9 +1993,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.26",
+      "version": "8.4.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
-      "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
       "dev": true,
       "funding": [
         {
@@ -2577,14 +2583,14 @@
       "dev": true
     },
     "node_modules/stylelint": {
-      "version": "15.10.2",
+      "version": "15.10.3",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.3.tgz",
-      "integrity": "sha512-UxqSb3hB74g4DTO45QhUHkJMjKKU//lNUAOWyvPBVPZbCknJ5HjOWWZo+UDuhHa9FLeVdHBZXxu43eXkjyIPWg==",
+      "integrity": "sha512-aBQMMxYvFzJJwkmg+BUUg3YfPyeuCuKo2f+LOw7yYbU8AZMblibwzp9OV4srHVeQldxvSFdz0/Xu8blq2AesiA==",
       "dev": true,
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.3.0",
+        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.2.0",
-        "@csstools/media-query-list-parser": "^2.1.2",
+        "@csstools/media-query-list-parser": "^2.1.4",
         "@csstools/selector-specificity": "^3.0.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
@@ -2592,7 +2598,7 @@
         "css-functions-list": "^3.2.0",
         "css-tree": "^2.3.1",
         "debug": "^4.3.4",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.1",
         "fastest-levenshtein": "^1.0.16",
         "file-entry-cache": "^6.0.1",
         "global-modules": "^2.0.0",
@@ -2603,13 +2609,13 @@
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.27.0",
+        "known-css-properties": "^0.28.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^10.1.5",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.25",
+        "postcss": "^8.4.27",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
         "postcss-selector-parser": "^6.0.13",
@@ -3002,22 +3008,22 @@
       }
     },
     "@csstools/css-parser-algorithms": {
-      "version": "2.3.0",
+      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz",
-      "integrity": "sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==",
+      "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==",
       "dev": true,
       "requires": {}
     },
     "@csstools/css-tokenizer": {
-      "version": "2.1.1",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz",
-      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
+      "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==",
       "dev": true
     },
     "@csstools/media-query-list-parser": {
-      "version": "2.1.2",
+      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz",
-      "integrity": "sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==",
+      "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==",
       "dev": true,
       "requires": {}
     },
@@ -3432,9 +3438,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.3.0",
+      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -4016,9 +4022,9 @@
       "dev": true
     },
     "known-css-properties": {
-      "version": "0.27.0",
+      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.28.0.tgz",
-      "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
+      "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
       "dev": true
     },
     "lines-and-columns": {
@@ -4387,9 +4393,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.26",
+      "version": "8.4.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
-      "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.6",
@@ -4768,14 +4774,14 @@
       "dev": true
     },
     "stylelint": {
-      "version": "15.10.2",
+      "version": "15.10.3",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.3.tgz",
-      "integrity": "sha512-UxqSb3hB74g4DTO45QhUHkJMjKKU//lNUAOWyvPBVPZbCknJ5HjOWWZo+UDuhHa9FLeVdHBZXxu43eXkjyIPWg==",
+      "integrity": "sha512-aBQMMxYvFzJJwkmg+BUUg3YfPyeuCuKo2f+LOw7yYbU8AZMblibwzp9OV4srHVeQldxvSFdz0/Xu8blq2AesiA==",
       "dev": true,
       "requires": {
-        "@csstools/css-parser-algorithms": "^2.3.0",
+        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.2.0",
-        "@csstools/media-query-list-parser": "^2.1.2",
+        "@csstools/media-query-list-parser": "^2.1.4",
         "@csstools/selector-specificity": "^3.0.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
@@ -4783,7 +4789,7 @@
         "css-functions-list": "^3.2.0",
         "css-tree": "^2.3.1",
         "debug": "^4.3.4",
-        "fast-glob": "^3.3.0",
+        "fast-glob": "^3.3.1",
         "fastest-levenshtein": "^1.0.16",
         "file-entry-cache": "^6.0.1",
         "global-modules": "^2.0.0",
@@ -4794,13 +4800,13 @@
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.27.0",
+        "known-css-properties": "^0.28.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^10.1.5",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.25",
+        "postcss": "^8.4.27",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
         "postcss-selector-parser": "^6.0.13",

package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.2",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-standard-scss": "^10.0.0"
   },
   "scripts": {