Fix banner overflow

[Docs] Mention required order on form controls' modifiers

.github/PULL_REQUEST_TEMPLATE.md

@@ -22,10 +22,10 @@ This is a **new feature | improvement | bugfix | documentation fix**.
 None.
 
 <!-- BEFORE SUBMITTING YOUR PR, MAKE SURE TO FOLLOW THESE STEPS: -->
-<!-- 1. Pull the latest `master` branch -->
-<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
+<!-- 1. Pull the latest `main` branch -->
+<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
 <!-- 3. Make sure your PR only affects `.sass` or documentation files -->
-<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#try-your-changes). -->
+<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#try-your-changes). -->
 
 <!-- How have you confirmed this feature works? -->
 <!-- Please explain more than "Yes". -->

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log
 test.css
 test.css.map
 test.html
+test*.html
 test.sass
 test.scss
 test.css

CHANGELOG.md

@@ -5,11 +5,16 @@
 ### Bug Fixes
 
 - Fix #3842: restore use of `$easing`, `$radius-rounded` and `$speed` Sass variables
+- Fix #3920: migrate code to avoid Sass 1.80 deprecation warning of global built-in functions
+- Fix #3822: Non-minified version of bulma-prefixed was missing
+- Fix #3805: helper classes were missing prefix
 
 ### Documentation Fixes
 
 - Fix #3904, #3884: fix website horizontal overflow
 - Fix #3849: fix Light Mode color swatches in Dark Mode
+- Fix #3918: broken placeholder images
+- Fix #3926: broken documentation hero
 
 ## 1.0.2
 

README.md

@@ -52,7 +52,7 @@ Feel free to raise an issue or submit a pull request.
 
 ## CSS only
 
-Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css)
+Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/main/css/bulma.css)
 
 You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/customize/#docsNav).
 
@@ -134,11 +134,11 @@ Browse the [online documentation here.](https://bulma.io/documentation/start/ove
 | [Manifest](https://manifest.build)                                                   | Manifest is a lightweight Backend-as-a-Service with essential features: DB, Admin panel, API, JS SDK             |
 | [Reactive Bulma](https://github.com/NicolasOmar/reactive-bulma)                                                             | A component library based on React, Bulma, Typescript and Rollup         |
 
-<p>Browser testing via <a href="https://www.lambdatest.com/" target="_blank"><img src="https://www.lambdatest.com/resources/images/logo-white.svg" style="vertical-align: middle;margin-left:5px" width="147" height="26" /></a></p>
+<p>Browser testing via<br /><a href="https://www.lambdatest.com/" target="_blank"><img src="https://bulma.io/assets/images/amis/lambdatest-logo.png" width="168" height="40" /></a></p>
 
 ## Copyright and license ![Github](https://img.shields.io/github/license/jgthms/bulma?logo=Github)
 
-Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
+Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/main/LICENSE).
 
 [npm-link]: https://www.npmjs.com/package/bulma
 [awesome-link]: https://github.com/awesome-css-group/awesome-css

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "homepage": "https://bulma.io",
   "authors": ["jgthms <bbxdesign@gmail.com>"],
   "description": "Modern CSS framework based on Flexbox",

bulma.scss

@@ -1,4 +1,4 @@
 @charset "utf-8";
 
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
 @use "sass";

css/bulma.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
 /* Bulma Utilities */
 :root {
   --bulma-control-radius: var(--bulma-radius);
@@ -90,7 +90,7 @@
   --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
   --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
   --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
-  --bulma-black-rgb: 9, 10, 12;
+  --bulma-black-rgb: 8.772, 9.6764, 11.628;
   --bulma-black-h: 221deg;
   --bulma-black-s: 14%;
   --bulma-black-l: 4%;
@@ -100,7 +100,7 @@
   --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
   --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
   --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
-  --bulma-light-rgb: 243, 244, 246;
+  --bulma-light-rgb: 243.372, 244.2764, 246.228;
   --bulma-light-h: 221deg;
   --bulma-light-s: 14%;
   --bulma-light-l: 96%;
@@ -110,7 +110,7 @@
   --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
   --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
   --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
-  --bulma-dark-rgb: 46, 51, 61;
+  --bulma-dark-rgb: 46.053, 50.8011, 61.047;
   --bulma-dark-h: 221deg;
   --bulma-dark-s: 14%;
   --bulma-dark-l: 21%;
@@ -120,7 +120,7 @@
   --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
   --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
   --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
-  --bulma-text-rgb: 64, 70, 84;
+  --bulma-text-rgb: 63.597, 70.1539, 84.303;
   --bulma-text-h: 221deg;
   --bulma-text-s: 14%;
   --bulma-text-l: 29%;
@@ -226,7 +226,7 @@
   --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
   --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
   --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
-  --bulma-primary-rgb: 0, 209, 178;
+  --bulma-primary-rgb: 0, 209.1, 177.735;
   --bulma-primary-h: 171deg;
   --bulma-primary-s: 100%;
   --bulma-primary-l: 41%;
@@ -332,7 +332,7 @@
   --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
   --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
   --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
-  --bulma-link-rgb: 66, 88, 255;
+  --bulma-link-rgb: 66.3, 88.315, 255;
   --bulma-link-h: 233deg;
   --bulma-link-s: 100%;
   --bulma-link-l: 63%;
@@ -385,7 +385,7 @@
   --bulma-link-40-invert-l: var(--bulma-link-95-l);
   --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1);
   --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1);
-  --bulma-link-45-invert-l: var(--bulma-link-100-l);
+  --bulma-link-45-invert-l: var(--bulma-link-95-l);
   --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1);
   --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1);
   --bulma-link-50-invert-l: var(--bulma-link-100-l);
@@ -415,7 +415,7 @@
   --bulma-link-90-invert-l: var(--bulma-link-35-l);
   --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1);
   --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1);
-  --bulma-link-95-invert-l: var(--bulma-link-40-l);
+  --bulma-link-95-invert-l: var(--bulma-link-45-l);
   --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1);
   --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1);
   --bulma-link-100-invert-l: var(--bulma-link-50-l);
@@ -438,7 +438,7 @@
   --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
   --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
   --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
-  --bulma-info-rgb: 102, 209, 255;
+  --bulma-info-rgb: 102, 209.1, 255;
   --bulma-info-h: 198deg;
   --bulma-info-s: 100%;
   --bulma-info-l: 70%;
@@ -544,7 +544,7 @@
   --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
   --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
   --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
-  --bulma-success-rgb: 72, 199, 142;
+  --bulma-success-rgb: 71.6295, 198.6705, 141.50205;
   --bulma-success-h: 153deg;
   --bulma-success-s: 53%;
   --bulma-success-l: 53%;
@@ -582,7 +582,7 @@
   --bulma-success-15-invert-l: var(--bulma-success-75-l);
   --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1);
   --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1);
-  --bulma-success-20-invert-l: var(--bulma-success-90-l);
+  --bulma-success-20-invert-l: var(--bulma-success-95-l);
   --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1);
   --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1);
   --bulma-success-25-invert-l: var(--bulma-success-100-l);
@@ -624,7 +624,7 @@
   --bulma-success-85-invert-l: var(--bulma-success-15-l);
   --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1);
   --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1);
-  --bulma-success-90-invert-l: var(--bulma-success-20-l);
+  --bulma-success-90-invert-l: var(--bulma-success-15-l);
   --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1);
   --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1);
   --bulma-success-95-invert-l: var(--bulma-success-20-l);
@@ -636,7 +636,7 @@
   --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1);
   --bulma-success-light-l: var(--bulma-success-90-l);
   --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1);
-  --bulma-success-light-invert-l: var(--bulma-success-20-l);
+  --bulma-success-light-invert-l: var(--bulma-success-15-l);
   --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1);
   --bulma-success-dark-l: var(--bulma-success-10-l);
   --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1);
@@ -650,7 +650,7 @@
   --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
   --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
   --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
-  --bulma-warning-rgb: 255, 183, 15;
+  --bulma-warning-rgb: 255, 183.09, 15.3;
   --bulma-warning-h: 42deg;
   --bulma-warning-s: 100%;
   --bulma-warning-l: 53%;
@@ -756,7 +756,7 @@
   --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
   --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
   --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
-  --bulma-danger-rgb: 255, 102, 133;
+  --bulma-danger-rgb: 255, 102, 132.6;
   --bulma-danger-h: 348deg;
   --bulma-danger-s: 100%;
   --bulma-danger-l: 70%;
@@ -991,7 +991,7 @@
     --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
     --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
     --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
-    --bulma-black-rgb: 9, 10, 12;
+    --bulma-black-rgb: 8.772, 9.6764, 11.628;
     --bulma-black-h: 221deg;
     --bulma-black-s: 14%;
     --bulma-black-l: 4%;
@@ -1001,7 +1001,7 @@
     --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
     --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
     --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
-    --bulma-light-rgb: 243, 244, 246;
+    --bulma-light-rgb: 243.372, 244.2764, 246.228;
     --bulma-light-h: 221deg;
     --bulma-light-s: 14%;
     --bulma-light-l: 96%;
@@ -1011,7 +1011,7 @@
     --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
     --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
     --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
-    --bulma-dark-rgb: 46, 51, 61;
+    --bulma-dark-rgb: 46.053, 50.8011, 61.047;
     --bulma-dark-h: 221deg;
     --bulma-dark-s: 14%;
     --bulma-dark-l: 21%;
@@ -1021,7 +1021,7 @@
     --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
     --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
     --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
-    --bulma-text-rgb: 64, 70, 84;
+    --bulma-text-rgb: 63.597, 70.1539, 84.303;
     --bulma-text-h: 221deg;
     --bulma-text-s: 14%;
     --bulma-text-l: 29%;
@@ -1127,7 +1127,7 @@
     --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
     --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
     --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
-    --bulma-primary-rgb: 0, 209, 178;
+    --bulma-primary-rgb: 0, 209.1, 177.735;
     --bulma-primary-h: 171deg;
     --bulma-primary-s: 100%;
     --bulma-primary-l: 41%;
@@ -1233,7 +1233,7 @@
     --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
     --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
     --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
-    --bulma-link-rgb: 66, 88, 255;
+    --bulma-link-rgb: 66.3, 88.315, 255;
     --bulma-link-h: 233deg;
     --bulma-link-s: 100%;
     --bulma-link-l: 63%;
@@ -1286,7 +1286,7 @@
     --bulma-link-40-invert-l: var(--bulma-link-95-l);
     --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1);
     --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1);
-    --bulma-link-45-invert-l: var(--bulma-link-100-l);
+    --bulma-link-45-invert-l: var(--bulma-link-95-l);
     --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1);
     --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1);
     --bulma-link-50-invert-l: var(--bulma-link-100-l);
@@ -1316,7 +1316,7 @@
     --bulma-link-90-invert-l: var(--bulma-link-35-l);
     --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1);
     --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1);
-    --bulma-link-95-invert-l: var(--bulma-link-40-l);
+    --bulma-link-95-invert-l: var(--bulma-link-45-l);
     --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1);
     --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1);
     --bulma-link-100-invert-l: var(--bulma-link-50-l);
@@ -1339,7 +1339,7 @@
     --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
     --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
     --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
-    --bulma-info-rgb: 102, 209, 255;
+    --bulma-info-rgb: 102, 209.1, 255;
     --bulma-info-h: 198deg;
     --bulma-info-s: 100%;
     --bulma-info-l: 70%;
@@ -1445,7 +1445,7 @@
     --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
     --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
     --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
-    --bulma-success-rgb: 72, 199, 142;
+    --bulma-success-rgb: 71.6295, 198.6705, 141.50205;
     --bulma-success-h: 153deg;
     --bulma-success-s: 53%;
     --bulma-success-l: 53%;
@@ -1483,7 +1483,7 @@
     --bulma-success-15-invert-l: var(--bulma-success-75-l);
     --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1);
     --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1);
-    --bulma-success-20-invert-l: var(--bulma-success-90-l);
+    --bulma-success-20-invert-l: var(--bulma-success-95-l);
     --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1);
     --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1);
     --bulma-success-25-invert-l: var(--bulma-success-100-l);
@@ -1525,7 +1525,7 @@
     --bulma-success-85-invert-l: var(--bulma-success-15-l);
     --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1);
     --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1);
-    --bulma-success-90-invert-l: var(--bulma-success-20-l);
+    --bulma-success-90-invert-l: var(--bulma-success-15-l);
     --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1);
     --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1);
     --bulma-success-95-invert-l: var(--bulma-success-20-l);
@@ -1537,7 +1537,7 @@
     --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1);
     --bulma-success-light-l: var(--bulma-success-90-l);
     --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1);
-    --bulma-success-light-invert-l: var(--bulma-success-20-l);
+    --bulma-success-light-invert-l: var(--bulma-success-15-l);
     --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1);
     --bulma-success-dark-l: var(--bulma-success-10-l);
     --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1);
@@ -1551,7 +1551,7 @@
     --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
     --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
     --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
-    --bulma-warning-rgb: 255, 183, 15;
+    --bulma-warning-rgb: 255, 183.09, 15.3;
     --bulma-warning-h: 42deg;
     --bulma-warning-s: 100%;
     --bulma-warning-l: 53%;
@@ -1657,7 +1657,7 @@
     --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
     --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
     --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
-    --bulma-danger-rgb: 255, 102, 133;
+    --bulma-danger-rgb: 255, 102, 132.6;
     --bulma-danger-h: 348deg;
     --bulma-danger-s: 100%;
     --bulma-danger-l: 70%;
@@ -1786,7 +1786,7 @@
   :root {
     --bulma-white-on-scheme-l: 100%;
     --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
-    --bulma-black-on-scheme-l: 0%;
+    --bulma-black-on-scheme-l: -51%;
     --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
     --bulma-light-on-scheme-l: 96%;
     --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
@@ -1909,7 +1909,7 @@
   --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
   --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
   --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
-  --bulma-black-rgb: 9, 10, 12;
+  --bulma-black-rgb: 8.772, 9.6764, 11.628;
   --bulma-black-h: 221deg;
   --bulma-black-s: 14%;
   --bulma-black-l: 4%;
@@ -1919,7 +1919,7 @@
   --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
   --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
   --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
-  --bulma-light-rgb: 243, 244, 246;
+  --bulma-light-rgb: 243.372, 244.2764, 246.228;
   --bulma-light-h: 221deg;
   --bulma-light-s: 14%;
   --bulma-light-l: 96%;
@@ -1929,7 +1929,7 @@
   --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
   --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
   --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
-  --bulma-dark-rgb: 46, 51, 61;
+  --bulma-dark-rgb: 46.053, 50.8011, 61.047;
   --bulma-dark-h: 221deg;
   --bulma-dark-s: 14%;
   --bulma-dark-l: 21%;
@@ -1939,7 +1939,7 @@
   --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
   --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
   --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
-  --bulma-text-rgb: 64, 70, 84;
+  --bulma-text-rgb: 63.597, 70.1539, 84.303;
   --bulma-text-h: 221deg;
   --bulma-text-s: 14%;
   --bulma-text-l: 29%;
@@ -2045,7 +2045,7 @@
   --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
   --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
   --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
-  --bulma-primary-rgb: 0, 209, 178;
+  --bulma-primary-rgb: 0, 209.1, 177.735;
   --bulma-primary-h: 171deg;
   --bulma-primary-s: 100%;
   --bulma-primary-l: 41%;
@@ -2151,7 +2151,7 @@
   --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
   --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
   --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
-  --bulma-link-rgb: 66, 88, 255;
+  --bulma-link-rgb: 66.3, 88.315, 255;
   --bulma-link-h: 233deg;
   --bulma-link-s: 100%;
   --bulma-link-l: 63%;
@@ -2204,7 +2204,7 @@
   --bulma-link-40-invert-l: var(--bulma-link-95-l);
   --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1);
   --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1);
-  --bulma-link-45-invert-l: var(--bulma-link-100-l);
+  --bulma-link-45-invert-l: var(--bulma-link-95-l);
   --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1);
   --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1);
   --bulma-link-50-invert-l: var(--bulma-link-100-l);
@@ -2234,7 +2234,7 @@
   --bulma-link-90-invert-l: var(--bulma-link-35-l);
   --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1);
   --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1);
-  --bulma-link-95-invert-l: var(--bulma-link-40-l);
+  --bulma-link-95-invert-l: var(--bulma-link-45-l);
   --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1);
   --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1);
   --bulma-link-100-invert-l: var(--bulma-link-50-l);
@@ -2257,7 +2257,7 @@
   --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
   --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
   --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
-  --bulma-info-rgb: 102, 209, 255;
+  --bulma-info-rgb: 102, 209.1, 255;
   --bulma-info-h: 198deg;
   --bulma-info-s: 100%;
   --bulma-info-l: 70%;
@@ -2363,7 +2363,7 @@
   --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
   --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
   --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
-  --bulma-success-rgb: 72, 199, 142;
+  --bulma-success-rgb: 71.6295, 198.6705, 141.50205;
   --bulma-success-h: 153deg;
   --bulma-success-s: 53%;
   --bulma-success-l: 53%;
@@ -2401,7 +2401,7 @@
   --bulma-success-15-invert-l: var(--bulma-success-75-l);
   --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1);
   --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1);
-  --bulma-success-20-invert-l: var(--bulma-success-90-l);
+  --bulma-success-20-invert-l: var(--bulma-success-95-l);
   --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1);
   --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1);
   --bulma-success-25-invert-l: var(--bulma-success-100-l);
@@ -2443,7 +2443,7 @@
   --bulma-success-85-invert-l: var(--bulma-success-15-l);
   --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1);
   --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1);
-  --bulma-success-90-invert-l: var(--bulma-success-20-l);
+  --bulma-success-90-invert-l: var(--bulma-success-15-l);
   --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1);
   --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1);
   --bulma-success-95-invert-l: var(--bulma-success-20-l);
@@ -2455,7 +2455,7 @@
   --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1);
   --bulma-success-light-l: var(--bulma-success-90-l);
   --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1);
-  --bulma-success-light-invert-l: var(--bulma-success-20-l);
+  --bulma-success-light-invert-l: var(--bulma-success-15-l);
   --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1);
   --bulma-success-dark-l: var(--bulma-success-10-l);
   --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1);
@@ -2469,7 +2469,7 @@
   --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
   --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
   --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
-  --bulma-warning-rgb: 255, 183, 15;
+  --bulma-warning-rgb: 255, 183.09, 15.3;
   --bulma-warning-h: 42deg;
   --bulma-warning-s: 100%;
   --bulma-warning-l: 53%;
@@ -2575,7 +2575,7 @@
   --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
   --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
   --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
-  --bulma-danger-rgb: 255, 102, 133;
+  --bulma-danger-rgb: 255, 102, 132.6;
   --bulma-danger-h: 348deg;
   --bulma-danger-s: 100%;
   --bulma-danger-l: 70%;
@@ -2737,7 +2737,7 @@
 .theme-dark {
   --bulma-white-on-scheme-l: 100%;
   --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
-  --bulma-black-on-scheme-l: 0%;
+  --bulma-black-on-scheme-l: -51%;
   --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
   --bulma-light-on-scheme-l: 96%;
   --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
@@ -3784,6 +3784,10 @@ a.box:active {
   --bulma-button-border-width: max(2px, 0.125em);
   --bulma-button-outer-shadow-alpha: 1;
 }
+.button.is-outlined[disabled], fieldset[disabled] .button.is-outlined {
+  background-color: transparent;
+  box-shadow: none;
+}
 .button.is-inverted {
   background-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-color-l) + var(--bulma-button-background-l-delta)));
   color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-background-l));
@@ -5441,6 +5445,7 @@ button.tag:active,
   --bulma-input-border-width: var(--bulma-control-border-width);
   --bulma-input-border-l: var(--bulma-border-l);
   --bulma-input-border-l-delta: 0%;
+  --bulma-input-border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
   --bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
   --bulma-input-active-border-l-delta: var(--bulma-active-border-l-delta);
   --bulma-input-focus-h: var(--bulma-focus-h);
@@ -5467,7 +5472,7 @@ button.tag:active,
 
 .select select, .input, .textarea {
   background-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta)));
-  border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
+  border-color: var(--bulma-input-border-color);
   border-radius: var(--bulma-input-radius);
   color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l));
 }
@@ -13154,6 +13159,9 @@ label.panel-block:hover {
   --bulma-hero-body-padding-small: 1.5rem;
   --bulma-hero-body-padding-medium: 9rem 4.5rem;
   --bulma-hero-body-padding-large: 18rem 6rem;
+  --bulma-hero-gradient-h-offset: 5deg;
+  --bulma-hero-gradient-s-offset: 10%;
+  --bulma-hero-gradient-l-offset: 5%;
 }
 
 .hero {

css/versions/bulma-no-dark-mode.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
 /* Bulma Utilities */
 :root {
   --bulma-control-radius: var(--bulma-radius);
@@ -981,6 +981,10 @@ a.box:active {
   --bulma-button-border-width: max(2px, 0.125em);
   --bulma-button-outer-shadow-alpha: 1;
 }
+.button.is-outlined[disabled], fieldset[disabled] .button.is-outlined {
+  background-color: transparent;
+  box-shadow: none;
+}
 .button.is-inverted {
   background-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-color-l) + var(--bulma-button-background-l-delta)));
   color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-background-l));
@@ -2638,6 +2642,7 @@ button.tag:active,
   --bulma-input-border-width: var(--bulma-control-border-width);
   --bulma-input-border-l: var(--bulma-border-l);
   --bulma-input-border-l-delta: 0%;
+  --bulma-input-border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
   --bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
   --bulma-input-active-border-l-delta: var(--bulma-active-border-l-delta);
   --bulma-input-focus-h: var(--bulma-focus-h);
@@ -2664,7 +2669,7 @@ button.tag:active,
 
 .select select, .input, .textarea {
   background-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta)));
-  border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
+  border-color: var(--bulma-input-border-color);
   border-radius: var(--bulma-input-radius);
   color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l));
 }
@@ -10351,6 +10356,9 @@ label.panel-block:hover {
   --bulma-hero-body-padding-small: 1.5rem;
   --bulma-hero-body-padding-medium: 9rem 4.5rem;
   --bulma-hero-body-padding-large: 18rem 6rem;
+  --bulma-hero-gradient-h-offset: 5deg;
+  --bulma-hero-gradient-s-offset: 10%;
+  --bulma-hero-gradient-l-offset: 5%;
 }
 
 .hero {
@@ -18821,7 +18829,7 @@ has-background-danger.is-hoverable:active {
   --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
   --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
   --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
-  --bulma-black-rgb: 9, 10, 12;
+  --bulma-black-rgb: 8.772, 9.6764, 11.628;
   --bulma-black-h: 221deg;
   --bulma-black-s: 14%;
   --bulma-black-l: 4%;
@@ -18831,7 +18839,7 @@ has-background-danger.is-hoverable:active {
   --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
   --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
   --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
-  --bulma-light-rgb: 243, 244, 246;
+  --bulma-light-rgb: 243.372, 244.2764, 246.228;
   --bulma-light-h: 221deg;
   --bulma-light-s: 14%;
   --bulma-light-l: 96%;
@@ -18841,7 +18849,7 @@ has-background-danger.is-hoverable:active {
   --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
   --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
   --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
-  --bulma-dark-rgb: 46, 51, 61;
+  --bulma-dark-rgb: 46.053, 50.8011, 61.047;
   --bulma-dark-h: 221deg;
   --bulma-dark-s: 14%;
   --bulma-dark-l: 21%;
@@ -18851,7 +18859,7 @@ has-background-danger.is-hoverable:active {
   --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
   --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
   --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
-  --bulma-text-rgb: 64, 70, 84;
+  --bulma-text-rgb: 63.597, 70.1539, 84.303;
   --bulma-text-h: 221deg;
   --bulma-text-s: 14%;
   --bulma-text-l: 29%;
@@ -18957,7 +18965,7 @@ has-background-danger.is-hoverable:active {
   --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
   --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
   --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
-  --bulma-primary-rgb: 0, 209, 178;
+  --bulma-primary-rgb: 0, 209.1, 177.735;
   --bulma-primary-h: 171deg;
   --bulma-primary-s: 100%;
   --bulma-primary-l: 41%;
@@ -19063,7 +19071,7 @@ has-background-danger.is-hoverable:active {
   --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
   --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
   --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
-  --bulma-link-rgb: 66, 88, 255;
+  --bulma-link-rgb: 66.3, 88.315, 255;
   --bulma-link-h: 233deg;
   --bulma-link-s: 100%;
   --bulma-link-l: 63%;
@@ -19116,7 +19124,7 @@ has-background-danger.is-hoverable:active {
   --bulma-link-40-invert-l: var(--bulma-link-95-l);
   --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1);
   --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1);
-  --bulma-link-45-invert-l: var(--bulma-link-100-l);
+  --bulma-link-45-invert-l: var(--bulma-link-95-l);
   --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1);
   --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1);
   --bulma-link-50-invert-l: var(--bulma-link-100-l);
@@ -19146,7 +19154,7 @@ has-background-danger.is-hoverable:active {
   --bulma-link-90-invert-l: var(--bulma-link-35-l);
   --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1);
   --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1);
-  --bulma-link-95-invert-l: var(--bulma-link-40-l);
+  --bulma-link-95-invert-l: var(--bulma-link-45-l);
   --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1);
   --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1);
   --bulma-link-100-invert-l: var(--bulma-link-50-l);
@@ -19169,7 +19177,7 @@ has-background-danger.is-hoverable:active {
   --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
   --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
   --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
-  --bulma-info-rgb: 102, 209, 255;
+  --bulma-info-rgb: 102, 209.1, 255;
   --bulma-info-h: 198deg;
   --bulma-info-s: 100%;
   --bulma-info-l: 70%;
@@ -19275,7 +19283,7 @@ has-background-danger.is-hoverable:active {
   --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
   --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
   --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
-  --bulma-success-rgb: 72, 199, 142;
+  --bulma-success-rgb: 71.6295, 198.6705, 141.50205;
   --bulma-success-h: 153deg;
   --bulma-success-s: 53%;
   --bulma-success-l: 53%;
@@ -19313,7 +19321,7 @@ has-background-danger.is-hoverable:active {
   --bulma-success-15-invert-l: var(--bulma-success-75-l);
   --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1);
   --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1);
-  --bulma-success-20-invert-l: var(--bulma-success-90-l);
+  --bulma-success-20-invert-l: var(--bulma-success-95-l);
   --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1);
   --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1);
   --bulma-success-25-invert-l: var(--bulma-success-100-l);
@@ -19355,7 +19363,7 @@ has-background-danger.is-hoverable:active {
   --bulma-success-85-invert-l: var(--bulma-success-15-l);
   --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1);
   --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1);
-  --bulma-success-90-invert-l: var(--bulma-success-20-l);
+  --bulma-success-90-invert-l: var(--bulma-success-15-l);
   --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1);
   --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1);
   --bulma-success-95-invert-l: var(--bulma-success-20-l);
@@ -19367,7 +19375,7 @@ has-background-danger.is-hoverable:active {
   --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1);
   --bulma-success-light-l: var(--bulma-success-90-l);
   --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1);
-  --bulma-success-light-invert-l: var(--bulma-success-20-l);
+  --bulma-success-light-invert-l: var(--bulma-success-15-l);
   --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1);
   --bulma-success-dark-l: var(--bulma-success-10-l);
   --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1);
@@ -19381,7 +19389,7 @@ has-background-danger.is-hoverable:active {
   --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
   --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
   --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
-  --bulma-warning-rgb: 255, 183, 15;
+  --bulma-warning-rgb: 255, 183.09, 15.3;
   --bulma-warning-h: 42deg;
   --bulma-warning-s: 100%;
   --bulma-warning-l: 53%;
@@ -19487,7 +19495,7 @@ has-background-danger.is-hoverable:active {
   --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
   --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
   --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
-  --bulma-danger-rgb: 255, 102, 133;
+  --bulma-danger-rgb: 255, 102, 132.6;
   --bulma-danger-h: 348deg;
   --bulma-danger-s: 100%;
   --bulma-danger-l: 70%;

docs/_data/links.json

@@ -757,7 +757,7 @@
       "path": "/documentation/helpers/other-helpers/"
     }
   },
-  "navbar": ["docs", "expo", "love", "sponsor", "shop"],
+  "navbar": ["docs", "expo", "love", "sponsor"],
   "navbar_icons": ["github", "twitter"],
   "navbar_more": ["made-with-bulma", "backers", "brand", "extensions"],
   "category_ids": [

docs/_data/love.json

@@ -1984,9 +1984,9 @@
       "id": "1161404522331344896",
       "date": "11:29 PM - 13 Aug 2019",
       "content": "Bloody hell.... To think that I was using my own simple framework for all of the <a href=\"https://twitter.com/search?q=%23Frontend\">#Frontend</a> <a href=\"https://twitter.com/search?q=%23webdevelopment\">#webdevelopment</a>. Here is a my old login page vs <a href=\"https://twitter.com/search?q=%23bulmaio\">#bulmaio</a> framework... Me so dumb. Why reinvent the wheel? Amazing job <a href=\"https://twitter.com/jgthms\">@jgthms</a> <a href=\"https://twitter.com/search?q=%23CSS\">#CSS</a> <a href=\"https://t.co/X5NnKZxyQq\">pic.twitter.com/X5NnKZxyQq</a>",
-      "fullname": "db4you",
-      "username": "db4you2",
-      "avatar": "https://pbs.twimg.com/profile_images/1283183292683038727/wVhp9AQr_normal.jpg",
+      "fullname": "gebsystems",
+      "username": "gebsystems",
+      "avatar": "https://pbs.twimg.com/profile_images/1713156593137639424/Wwz0i_rj_400x400.jpg",
       "hearts": 22,
       "retweets": 4
     },

docs/_includes/docs/components/logos-item.html

@@ -1,7 +1,7 @@
 <div
   {% if include.unsplash %}
     class="bd-logos-item"
-    style="background-image: url(https://source.unsplash.com/{{ include.unsplash }}/480x480)"
+    style="background-image: url(/assets/images/unsplash/{{ include.unsplash }}.jpg)"
   {% else %}
     class="bd-logos-item is-transparent"
   {% endif %}

docs/_includes/docs/elements/tw.html

@@ -33,13 +33,13 @@
 
   <ul class="bd-tw-actions">
     <li class="bd-tw-action is-reply">
-      <a class="bd-tw-action-link" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
+      <a class="bd-tw-action-link" href="https://x.com/intent/tweet?in_reply_to={{ tweet.id }}">
         <div class="bd-tw-icon"></div>
       </a>
     </li>
 
     <li class="bd-tw-action is-retweet">
-      <a class="bd-tw-action-link" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
+      <a class="bd-tw-action-link" href="https://x.com/intent/retweet?tweet_id={{ tweet.id }}">
         <div class="bd-tw-icon"></div>
         {% if tweet.retweets != 0 %}
           <span class="bd-tw-action-stat">
@@ -50,7 +50,7 @@
     </li>
 
     <li class="bd-tw-action is-heart">
-      <a class="bd-tw-action-link" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ tweet.id }}&amp;tw_p=tweetembed" target="_blank">
+      <a class="bd-tw-action-link" href="https://x.com/intent/like?tweet_id={{ tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ tweet.id }}&amp;tw_p=tweetembed" target="_blank">
         <div class="bd-tw-icon"></div>
         {% if tweet.hearts != 0 %}
           <span class="bd-tw-action-stat">

docs/_includes/website/banner.html

@@ -0,0 +1,13 @@
+<a href="https://cssmasterclass.io/" target="_blank" class="launch-code is-animated">
+  <h3><img
+        src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
+        height="40"
+        width="300"
+    />
+  </h3>
+
+  <small>
+    Learn CSS with 🎓 online interactive courses,📺 educational videos, and
+    🧑🏻‍💻project-building tutorials.
+  </small>
+</a>

docs/_includes/website/carbon.html

@@ -1,5 +1,8 @@
 <div id="carboncontainer" class="bd-carbon">
   <div id="carbon">
-    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js"></script>
+    <a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; aspect-ratio: 40 / 26; max-width: 400px; max-height: 260px;">
+      <img src="{{ site.url }}/assets/images/masterclass/masterclass-carbon.png" height="260" width="400" alt="CSS Masterclass">
+    </a>
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js" onerror="this.previousElementSibling.style.display = 'flex'"></script>
   </div>
 </div>

docs/_includes/website/masterclass.html

@@ -0,0 +1,43 @@
+<div id="masterclass" class="masterclass">
+  <div id="masterclass-background" class="masterclass-background"></div>
+
+  <a class="masterclass-body" href="https://cssmasterclass.io/" target="_blank">
+    <div class="masterclass-content is-hidden-desktop">
+      <img
+        src="{{site.url}}/assets/images/masterclass/logo-mobile.png"
+        height="68"
+        width="240"
+      />
+      <img
+        src="{{site.url}}/assets/images/masterclass/text-mobile.png"
+        height="99"
+        width="228"
+      />
+      <div class="shine">
+        <span>Get started for Free</span>
+      </div>
+    </div>
+
+    <div class="masterclass-content is-hidden-touch">
+      <img
+        src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
+        height="50"
+        width="378"
+      />
+      <img
+        src="{{site.url}}/assets/images/masterclass/text-desktop.png"
+        height="58"
+        width="571"
+      />
+      <div class="shine">
+        <span>Get started for Free</span>
+      </div>
+    </div>
+  </a>
+
+  <button
+    id="masterclass-close"
+    class="modal-close is-large"
+    aria-label="close"
+  ></button>
+</div>

docs/_layouts/default.html

@@ -4,6 +4,8 @@
     {% include global/head.html %}
   </head>
   <body>
+    {% include website/banner.html %}
+
     {{ content }}
 
     {% if page.modals %}
@@ -30,5 +32,6 @@
     </script>
     <script src="{{ site.url }}/assets/javascript/main.js"></script>
     {% include global/customizer.html %}
+    {% include website/masterclass.html %}
   </body>
 </html>

docs/_sass/docs/examples.scss

@@ -28,7 +28,7 @@
 }
 
 .bulma-overlay-mixin-parent {
-  background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320);
+  background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
   background-size: cover;
   border-radius: 0.5em;
   position: relative;
@@ -73,7 +73,7 @@
 }
 
 .bulma-center-mixin-parent {
-  background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320);
+  background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
   background-size: cover;
   border-radius: 0.5em;
   position: relative;

docs/_sass/docs/hero.scss

@@ -37,7 +37,7 @@
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1400px) {
   .bd-hero.is-docs {
     flex-wrap: nowrap;
 
@@ -47,12 +47,6 @@
   }
 }
 
-@media screen and (min-width: 1200px) {
-  .bd-hero.is-docs {
-    flex-wrap: nowrap;
-  }
-}
-
 .bd-hero-title {
   color: hsl(
     cv.getVar("text-h"),
@@ -99,6 +93,10 @@
 }
 
 .bd-carbon {
+  aspect-ratio: 40 / 26;
+  max-height: 280px !important;
+  max-width: 400px !important;
+
   &,
   & > div {
     align-items: center;
@@ -107,7 +105,6 @@
   }
 
   > div {
-    height: 280px !important;
-    width: 400px !important;
+    aspect-ratio: 40 / 26;
   }
 }

docs/_sass/home/bubble.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass/utilities/css-variables" as cv;
 @use "../utils";
 
@@ -128,8 +129,8 @@
 $bubble-order: ("axbom", "jesseschoff", "ale_codes", "MyTopSecretName");
 $delay-factor: 0.3s;
 
-@for $index from 1 through length($bubble-order) {
-  $name: nth($bubble-order, $index);
+@for $index from 1 through list.length($bubble-order) {
+  $name: list.nth($bubble-order, $index);
 
   .js-bubble-#{$name} {
     .bd-bubble-content {

docs/_sass/home/custom.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass/utilities/mixins" as mx;
 @use "sass/themes/light";
 
@@ -72,11 +73,11 @@ $sass: #bf4080;
       color: light.$scheme-main;
 
       &:hover {
-        background-color: darken($mauve, 2.5%);
+        background-color: color.adjust($mauve, $lightness: -2.5%);
       }
 
       &:active {
-        background-color: darken($mauve, 5%);
+        background-color: color.adjust($mauve, $lightness: -5%);
       }
     }
 
@@ -85,11 +86,11 @@ $sass: #bf4080;
       color: light.$scheme-main;
 
       &:hover {
-        background-color: darken($pink, 2.5%);
+        background-color: color.adjust($pink, $lightness: -2.5%);
       }
 
       &:active {
-        background-color: darken($pink, 5%);
+        background-color: color.adjust($pink, $lightness: -5%);
       }
     }
   }

docs/assets/javascript/main.js

@@ -108,10 +108,18 @@ document.addEventListener("DOMContentLoaded", () => {
   // MODALS
   // Functions to open and close a modal
   function openModal($el) {
+    if (!$el) {
+      return;
+    }
+
     $el.classList.add("is-active");
   }
 
   function closeModal($el) {
+    if (!$el) {
+      return;
+    }
+
     $el.classList.remove("is-active");
   }
 
@@ -416,4 +424,38 @@ document.addEventListener("DOMContentLoaded", () => {
 
     new window.ClipboardJS(".bd-clipboard");
   }, 100);
+
+  // MASTERCLASS
+  const MASTERCLASS_KEY = "cssmasterclass";
+  const $masterclass = document.getElementById("masterclass");
+  const $masterclassBackground = document.getElementById(
+    "masterclass-background",
+  );
+  const $masterclassClose = document.getElementById("masterclass-close");
+  const masterclassStorage = window.localStorage.getItem(MASTERCLASS_KEY);
+
+  if (masterclassStorage !== "seen") {
+    window.setTimeout(() => {
+      openMasterclass();
+    }, 3000);
+  }
+
+  const openMasterclass = () => {
+    $masterclass.classList.add("is-open");
+  };
+
+  const closeMasterclass = () => {
+    window.localStorage.setItem(MASTERCLASS_KEY, "seen");
+    $masterclass.classList.remove("is-open");
+  };
+
+  $masterclassBackground.addEventListener("click", (event) => {
+    event.preventDefault();
+    closeMasterclass();
+  });
+
+  $masterclassClose.addEventListener("click", (event) => {
+    event.preventDefault();
+    closeMasterclass();
+  });
 });

docs/documentation/form/general.html

@@ -915,7 +915,8 @@ variables_keys:
     <li><code>icon is-left</code> if <code>has-icons-left</code> is used</li>
     <li><code>icon is-right</code> if <code>has-icons-right</code> is used</li>
   </ul>
-  <p>The size of the <strong>input</strong> will define the size of the icon container.</p>
+  <p>Make sure the input is the control's first child, otherwise the icon may disappear when selected. The size of the
+    <strong>input</strong> will define the size of the icon container.</p>
 </div>
 
 {% include docs/elements/snippet.html content=icons_example clipped=true %}

docs/documentation/sass/mixins.html

@@ -217,7 +217,7 @@ breadcrumb:
 
 {% capture center %}
 <div class="bulma-center-mixin-parent">
-  <img class="bulma-center-mixin" height="96" width="96" src="https://source.unsplash.com/mEZ3PoFGs_k/192x192">
+  <img class="bulma-center-mixin" height="96" width="96" src="/assets/images/unsplash/mEZ3PoFGs_k.jpg">
 </div>
 {% endcapture %}
 
@@ -267,7 +267,7 @@ breadcrumb:
 
 {% capture clearfix %}
 <div class="bulma-clearfix-mixin">
-  <img height="80" width="80" style="float: left;" src="https://source.unsplash.com/La2kOu2dmH4/160x160">
+  <img height="80" width="80" style="float: left;" src="/assets/images/unsplash/La2kOu2dmH4.jpg">
   <p>This is a short image description.</p>
 </div>
 
@@ -458,7 +458,7 @@ breadcrumb:
 
 {% capture ltr-position %}
 <div class="bulma-ltr-position-mixin-parent">
-  <img class="bulma-ltr-position-mixin" height="48" width="48" src="https://source.unsplash.com/iFgRcqHznqg/96x96">
+  <img class="bulma-ltr-position-mixin" height="48" width="48" src="/assets/images/unsplash/iFgRcqHznqg.jpg">
   <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
 </div>
 {% endcapture %}
@@ -523,7 +523,7 @@ breadcrumb:
 {% capture ltr-property %}
 <div class="bulma-ltr-property-mixin-parent">
   <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
-  <img class="bulma-ltr-property-mixin" height="96" width="96" src="https://source.unsplash.com/jTSf1xnsoCs/192x192">
+  <img class="bulma-ltr-property-mixin" height="96" width="96" src="/assets/images/unsplash/jTSf1xnsoCs.jpg">
 </div>
 {% endcapture %}
 

docs/documentation/start/modular.html

@@ -31,7 +31,7 @@ breadcrumb:
 @use "bulma/sass/base";
 @use "bulma/sass/themes";
 
-// Load the button and title elements and compnents
+// Load the button and title elements and components
 @use "bulma/sass/elements/button";
 @use "bulma/sass/elements/title";
 @use "bulma/sass/components/message";
@@ -159,4 +159,4 @@ $section-padding-large: 18rem 6rem !default;
     The <code>@use</code> keyword allows use to configure a module when loading it with our own variables:
   </p>
   {% highlight sass %}{{ custom_section }}{% endhighlight %}
-</div>
+</div>

docs/package-lock.json

@@ -9,65 +9,353 @@
       "version": "1.0.1",
       "license": "MIT",
       "devDependencies": {
-        "@shopify/prettier-plugin-liquid": "^1.5.0",
-        "prettier": "^3.3.3",
-        "sass": "^1.77.8"
+        "@shopify/prettier-plugin-liquid": "^1.6.1",
+        "prettier": "^3.4.1",
+        "sass": "^1.81.0"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
+      "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.0",
+        "@parcel/watcher-darwin-arm64": "2.5.0",
+        "@parcel/watcher-darwin-x64": "2.5.0",
+        "@parcel/watcher-freebsd-x64": "2.5.0",
+        "@parcel/watcher-linux-arm-glibc": "2.5.0",
+        "@parcel/watcher-linux-arm-musl": "2.5.0",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.0",
+        "@parcel/watcher-linux-arm64-musl": "2.5.0",
+        "@parcel/watcher-linux-x64-glibc": "2.5.0",
+        "@parcel/watcher-linux-x64-musl": "2.5.0",
+        "@parcel/watcher-win32-arm64": "2.5.0",
+        "@parcel/watcher-win32-ia32": "2.5.0",
+        "@parcel/watcher-win32-x64": "2.5.0"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
+      "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
+      "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
+      "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
+      "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
+      "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
+      "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
+      "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
+      "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
+      "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
+      "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
+      "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
+      "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
+      "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/@shopify/liquid-html-parser": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@shopify/liquid-html-parser/-/liquid-html-parser-2.0.3.tgz",
-      "integrity": "sha512-aIkZ5TJWG7/ztd1sZm5XNpBNTG3B+Q0gv3WN/QahmNQzm2wmKYSHiRLOA8JALAnOGTmH0uqOJ7jzdqoATcZSxw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@shopify/liquid-html-parser/-/liquid-html-parser-2.1.1.tgz",
+      "integrity": "sha512-5shGZTB7tK28MzawqBb82n6fbn+77U6al5UrOcUruBUj3GNqHJWjzZVPtXq4fQHrFpXFu6l11x+z+ggdUHT0Ng==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "line-column": "^1.0.2",
         "ohm-js": "^16.3.0"
       }
     },
     "node_modules/@shopify/prettier-plugin-liquid": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@shopify/prettier-plugin-liquid/-/prettier-plugin-liquid-1.5.0.tgz",
-      "integrity": "sha512-CuWjUnBCvq/RTmubEa5RfwW2oP2gYfTXaJ39t4apAYm//1v5Ftvv1bbhEnoEZwCjPshaAJLhSzP9dvCel4cebw==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@shopify/prettier-plugin-liquid/-/prettier-plugin-liquid-1.6.1.tgz",
+      "integrity": "sha512-l72sIdCF/GvRsGe3t3rbr0sEIg65Q83yamVoTDjsi9VhXbZJTnrIo/ZSe2dJJFOch61n8zi3tWM9jPjbzEblmA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shopify/liquid-html-parser": "^2.0.3",
+        "@shopify/liquid-html-parser": "^2.1.1",
         "html-styles": "^1.0.0"
       },
       "peerDependencies": {
         "prettier": "^2.0.0 || ^3.0.0"
       }
     },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -76,27 +364,33 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
+        "readdirp": "^4.0.1"
       },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">= 14.16.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
       },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
+      "engines": {
+        "node": ">=0.10"
       }
     },
     "node_modules/fill-range": {
@@ -104,6 +398,8 @@
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -111,32 +407,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/html-styles": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/html-styles/-/html-styles-1.0.0.tgz",
@@ -144,28 +414,19 @@
       "dev": true
     },
     "node_modules/immutable": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
-      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
-      "dev": true
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
       "dev": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
+      "license": "MIT"
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -175,6 +436,8 @@
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -187,6 +450,8 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -195,13 +460,15 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/isobject": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
       "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "isarray": "1.0.0"
       },
@@ -214,25 +481,41 @@
       "resolved": "https://registry.npmjs.org/line-column/-/line-column-1.0.2.tgz",
       "integrity": "sha512-Ktrjk5noGYlHsVnYWh62FLVs4hTb8A3e+vucNZMgPeAOITdshMSgv4cCZQeRDjm7+goqmo6+liZwTXo+U3sVww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "isarray": "^1.0.0",
         "isobject": "^2.0.0"
       }
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8.6"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/ohm-js": {
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/ohm-js/-/ohm-js-16.6.0.tgz",
       "integrity": "sha512-X9P4koSGa7swgVQ0gt71UCYtkAQGOjciJPJAz74kDxWt8nXbH5HrDOQG6qBDH7SR40ktNv4x61BwpTDE9q4lRA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.1"
       }
@@ -242,6 +525,8 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -250,9 +535,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz",
+      "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -266,26 +551,28 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
       "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/sass": {
-      "version": "1.77.8",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "version": "1.81.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.0.tgz",
+      "integrity": "sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
         "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
@@ -293,6 +580,9 @@
       },
       "engines": {
         "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
       }
     },
     "node_modules/source-map-js": {
@@ -309,6 +599,8 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },

docs/package.json

@@ -12,8 +12,8 @@
     "start": "npm run website-sass -- --watch"
   },
   "devDependencies": {
-    "@shopify/prettier-plugin-liquid": "^1.5.0",
-    "prettier": "^3.3.3",
-    "sass": "^1.77.8"
+    "@shopify/prettier-plugin-liquid": "^1.6.1",
+    "prettier": "^3.4.1",
+    "sass": "^1.81.0"
   }
 }

docs/website.scss

@@ -499,3 +499,383 @@ $container-max-width: iv.$fullhd;
     );
   }
 }
+
+:root {
+  --shine-bg: #131416;
+  --shine-bg-subtle: #17191c;
+  --shine-bg: #0e1917;
+  --shine-bg-subtle: #0e231c;
+  --shine-fg: #fff;
+  --shine-highlight: #0fdb80;
+  --shine-highlight-subtle: #03b565;
+  --brand: #0fdb80;
+  --brand-h: 153;
+  --brand-s: 87%;
+  --brand-l: 46%;
+  --brand-hsl: 153, 87%, 46%;
+  --brand-l-dark: 6%;
+  --brand-bg: hsl(var(--brand-h), var(--brand-s), var(--brand-l-dark));
+}
+
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes rotate-gradient {
+  to {
+    --gradient-angle: 360deg;
+  }
+}
+
+@property --gradient-angle-offset {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@property --gradient-percent {
+  syntax: "<percentage>";
+  initial-value: 5%;
+  inherits: false;
+}
+
+@property --gradient-shine {
+  syntax: "<color>";
+  initial-value: white;
+  inherits: false;
+}
+
+@keyframes rotate-gradient {
+  to {
+    --gradient-angle: 360deg;
+  }
+}
+
+.shine {
+  --animation: gradient-angle linear infinite;
+  --duration: 3s;
+  --shadow-size: 2px;
+  border-radius: 0.5em;
+  border: 2px solid transparent;
+  cursor: pointer;
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 500;
+  isolation: isolate;
+  line-height: 1;
+  outline-offset: 4px;
+  overflow: hidden;
+  padding: 1em 2em;
+  color: white;
+  position: relative;
+  background:
+    linear-gradient(var(--shine-bg), var(--shine-bg)) padding-box,
+    conic-gradient(
+        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
+        transparent,
+        var(--shine-highlight) var(--gradient-percent),
+        var(--gradient-shine) calc(var(--gradient-percent) * 2),
+        var(--shine-highlight) calc(var(--gradient-percent) * 3),
+        transparent calc(var(--gradient-percent) * 4)
+      )
+      border-box;
+  box-shadow: inset 0 0 0 1px var(--shine-bg-subtle);
+  color: var(--shine-fg);
+
+  &::before,
+  &::after,
+  span::before {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    translate: -50% -50%;
+    z-index: -1;
+  }
+
+  &:active {
+    translate: 0 1px;
+  }
+}
+
+/* Inner shimmer */
+.shine::after {
+  --animation: shimmer linear infinite;
+  width: 100%;
+  aspect-ratio: 1;
+  background: linear-gradient(
+    -50deg,
+    transparent,
+    var(--shine-highlight),
+    transparent
+  );
+  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
+  opacity: 0.2;
+}
+
+.shine span {
+  z-index: 1;
+
+  &::before {
+    --size: calc(100% + 1rem);
+    width: var(--size);
+    height: var(--size);
+    box-shadow: inset 0 -1ex 2rem 4px var(--shine-highlight);
+    opacity: 0;
+  }
+}
+
+/* Animate */
+.shine {
+  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
+  transition: var(--transition);
+  transition-property: --gradient-angle-offset, --gradient-percent,
+    --gradient-shine;
+
+  &,
+  &::before,
+  &::after {
+    animation:
+      var(--animation) var(--duration),
+      var(--animation) calc(var(--duration) / 0.4) reverse paused;
+    animation-composition: add;
+  }
+
+  span::before {
+    transition: opacity var(--transition);
+    animation: calc(var(--duration) * 1.5) breathe linear infinite;
+  }
+}
+
+.shine:is(:hover, :focus-visible) {
+  --gradient-percent: 20%;
+  --gradient-angle-offset: 95deg;
+  --gradient-shine: var(--shine-highlight-subtle);
+
+  &,
+  &::before,
+  &::after {
+    animation-play-state: running;
+  }
+
+  span::before {
+    opacity: 1;
+  }
+}
+
+@keyframes gradient-angle {
+  to {
+    --gradient-angle: 360deg;
+  }
+}
+
+@keyframes shimmer {
+  to {
+    rotate: 360deg;
+  }
+}
+
+@keyframes breathe {
+  from,
+  to {
+    scale: 1;
+  }
+  50% {
+    scale: 1.2;
+  }
+}
+
+.masterclass {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: none;
+  align-items: center;
+  justify-content: center;
+
+  &.is-open {
+    display: flex;
+  }
+
+  .modal-close {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+  }
+}
+
+.masterclass-background {
+  background-color: rgba(0, 0, 0, 0.9);
+  position: absolute;
+  inset: 0;
+  animation-name: anim-fade-in;
+  animation-duration: 1000ms;
+  animation-fill-mode: both;
+}
+
+.masterclass-body {
+  background-color: #333;
+  position: relative;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
+    url(/assets/images/coding-background.jpg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 2rem;
+  border-radius: 1rem;
+  width: calc(100% - 2rem);
+  box-shadow: 0px 0px 64px 0px rgba(15, 219, 128, 0.2);
+  border: 2px solid rgba(15, 219, 128, 0.2);
+  overflow: hidden;
+  max-width: 400px;
+  animation-name: anim-slide-up;
+  animation-duration: 1000ms;
+  animation-fill-mode: both;
+}
+
+.masterclass-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  justify-content: center;
+  align-items: center;
+}
+
+div.shine {
+  cursor: pointer;
+}
+
+@media screen and (min-width: 1024px) {
+  .masterclass-body {
+    max-width: 820px;
+  }
+}
+
+@keyframes anim-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes anim-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.launch-code {
+  animation-name: anim-fade-in;
+  animation-duration: 1s;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url(/assets/images/coding-background.jpg);
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  text-align: center;
+  z-index: 4;
+  right: 0;
+  left: 0;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  top: 0;
+  gap: 0.5rem 1rem;
+  white-space: nowrap;
+  flex-direction: column;
+  overflow: hidden;
+
+  h3,
+  small {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    max-width: 20rem;
+    color: white;
+    text-shadow: 0 2px 4px #0000001a;
+  }
+
+  h3 {
+    animation-delay: 0.5s;
+    font-size: 1em;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  small {
+    animation-delay: 1.5s;
+    font-size: 1em;
+    display: block;
+    opacity: 1;
+    font-weight: 400;
+    white-space: normal;
+  }
+
+  .launch-shine {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    animation-delay: 1s;
+    max-width: 32rem;
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+    border-radius: 12px;
+  }
+
+  .shine {
+    // animation-delay: calc(var(--duration) / 2);
+    // animation-name: none;
+    padding: 0.75em;
+    font-size: 1em;
+    width: 100%;
+  }
+
+  code {
+    background-color: var(--brand);
+    color: var(--brand-bg);
+    font-size: 1.25em;
+    padding: 0.125em 0.25em;
+    border-radius: 0.25em;
+  }
+
+  strong {
+    color: var(--brand);
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .launch-code {
+    flex-direction: row;
+    padding: 0.5rem;
+
+    h3,
+    small {
+      width: auto;
+      text-align: center;
+      max-width: none;
+      flex-basis: 20rem;
+    }
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .launch-code {
+    animation-name: anim-slide-down;
+    z-index: 40;
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "homepage": "https://bulma.io",
   "author": {
     "name": "Jeremy Thomas",
@@ -29,11 +29,11 @@
     "url": "https://github.com/jgthms/bulma/issues"
   },
   "devDependencies": {
-    "cssnano": "^7.0.4",
+    "cssnano": "^7.0.6",
     "postcss-cli": "^11.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "rimraf": "^6.0.1",
-    "sass": "^1.77.8"
+    "sass": "^1.83.0"
   },
   "scripts": {
     "build-bulma": "sass --style=expanded --source-map bulma.scss css/bulma.css",
@@ -41,7 +41,7 @@
     "version-no-dark-mode": "sass --style=expanded --source-map versions/bulma-no-dark-mode.scss css/versions/bulma-no-dark-mode.css",
     "version-no-helpers": "sass --style=expanded --source-map versions/bulma-no-helpers.scss css/versions/bulma-no-helpers.css",
     "version-no-helpers-prefixed": "sass --style=expanded --source-map versions/bulma-no-helpers-prefixed.scss css/versions/bulma-no-helpers-prefixed.css",
-    "version-prefixed": "sass --style=expanded --source-map versions/bulma-prefixed.scss css/versions/bulma-prefixed.min.css",
+    "version-prefixed": "sass --style=expanded --source-map versions/bulma-prefixed.scss css/versions/bulma-prefixed.css",
     "build-versions": "npm run version-no-dark-mode && npm run version-no-helpers && npm run version-no-helpers-prefixed && npm run version-prefixed",
     "minify-versions": "postcss css/versions/*.css --dir css/versions --ext min.css --no-map --use cssnano",
     "build-all": "npm run build-bulma && npm run build-versions",

sass/components/dropdown.scss

@@ -13,30 +13,21 @@ $dropdown-content-radius: cv.getVar("radius") !default;
 $dropdown-content-shadow: cv.getVar("shadow") !default;
 $dropdown-content-z: 20 !default;
 
-$dropdown-item-background-color: cv.getVar("scheme-main") !default;
-$dropdown-item-color: cv.getVar("text-strong") !default;
-$dropdown-item-hover-background-color: hsl(
-  from #{cv.getVar("dropdown-item-background-color")} h s calc(l + #{cv.getVar(
-          "hover-background-l-delta"
-        )})
-) !default;
-$dropdown-item-active-background-color: hsl(
-  from #{cv.getVar("dropdown-item-background-color")} h s calc(l + #{cv.getVar(
-          "active-background-l-delta"
-        )})
-) !default;
-$dropdown-item-selected-background-color: cv.getVar("link") !default;
-$dropdown-item-selected-color: cv.getVar("link-invert") !default;
-$dropdown-item-selected-hover-background-color: hsl(
-  from #{cv.getVar("dropdown-item-selected-background-color")} h s calc(l + #{cv.getVar(
-          "hover-background-l-delta"
-        )})
-) !default;
-$dropdown-item-selected-active-background-color: hsl(
-  from #{cv.getVar("dropdown-item-selected-background-color")} h s calc(l + #{cv.getVar(
-          "active-background-l-delta"
-        )})
-) !default;
+$dropdown-item-h: cv.getVar("scheme-h");
+$dropdown-item-s: cv.getVar("scheme-s");
+$dropdown-item-l: cv.getVar("scheme-main-l");
+$dropdown-item-background-l: cv.getVar("scheme-main-l");
+$dropdown-item-background-l-delta: 0%;
+$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$dropdown-item-active-background-l-delta: cv.getVar(
+  "active-background-l-delta"
+);
+$dropdown-item-color-l: cv.getVar("text-strong-l");
+$dropdown-item-selected-h: cv.getVar("link-h");
+$dropdown-item-selected-s: cv.getVar("link-s");
+$dropdown-item-selected-l: cv.getVar("link-l");
+$dropdown-item-selected-background-l: cv.getVar("link-l");
+$dropdown-item-selected-color-l: cv.getVar("link-invert-l");
 
 $dropdown-divider-background-color: cv.getVar("border-weak") !default;
 
@@ -52,6 +43,19 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
       "dropdown-content-radius": #{$dropdown-content-radius},
       "dropdown-content-shadow": #{$dropdown-content-shadow},
       "dropdown-content-z": #{$dropdown-content-z},
+      "dropdown-item-h": #{$dropdown-item-h},
+      "dropdown-item-s": #{$dropdown-item-s},
+      "dropdown-item-l": #{$dropdown-item-l},
+      "dropdown-item-background-l": #{$dropdown-item-background-l},
+      "dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta},
+      "dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta},
+      "dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta},
+      "dropdown-item-color-l": #{$dropdown-item-color-l},
+      "dropdown-item-selected-h": #{$dropdown-item-selected-h},
+      "dropdown-item-selected-s": #{$dropdown-item-selected-s},
+      "dropdown-item-selected-l": #{$dropdown-item-selected-l},
+      "dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l},
+      "dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l},
       "dropdown-divider-background-color": #{$dropdown-divider-background-color},
     )
   );
@@ -106,12 +110,11 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
 }
 
 .#{iv.$class-prefix}dropdown-item {
-  @include cv.register-vars(
-    (
-      "dropdown-item-color": #{$dropdown-item-color},
-    )
+  color: hsl(
+    #{cv.getVar("dropdown-item-h")},
+    #{cv.getVar("dropdown-item-s")},
+    #{cv.getVar("dropdown-item-color-l")}
   );
-  color: cv.getVar("dropdown-item-color");
   display: block;
   font-size: 0.875rem;
   line-height: 1.5;
@@ -120,47 +123,59 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
 
 a.#{iv.$class-prefix}dropdown-item,
 button.#{iv.$class-prefix}dropdown-item {
-  @include cv.register-vars(
-    (
-      "dropdown-item-background-color": #{$dropdown-item-background-color},
-      "dropdown-item-hover-background-color": #{$dropdown-item-hover-background-color},
-      "dropdown-item-active-background-color": #{$dropdown-item-active-background-color},
-      "dropdown-item-selected-background-color": #{$dropdown-item-selected-background-color},
-      "dropdown-item-selected-color": #{$dropdown-item-selected-color},
-      "dropdown-item-selected-hover-background-color": #{$dropdown-item-selected-hover-background-color},
-      "dropdown-item-selected-active-background-color": #{$dropdown-item-selected-active-background-color},
+  background-color: hsl(
+    #{cv.getVar("dropdown-item-h")},
+    #{cv.getVar("dropdown-item-s")},
+    calc(
+      #{cv.getVar("dropdown-item-background-l")} + #{cv.getVar(
+          "dropdown-item-background-l-delta"
+        )}
     )
   );
-  background-color: cv.getVar("dropdown-item-background-color");
   padding-inline-end: 3rem;
   text-align: inherit;
   white-space: nowrap;
   width: 100%;
 
   &:hover {
-    background-color: cv.getVar("dropdown-item-hover-background-color");
+    @include cv.register-vars(
+      (
+        "dropdown-item-background-l-delta": #{cv.getVar(
+            "dropdown-item-hover-background-l-delta"
+          )},
+        "dropdown-item-border-l-delta": #{cv.getVar(
+            "dropdown-item-hover-border-l-delta"
+          )},
+      )
+    );
   }
 
   &:active {
-    background-color: cv.getVar("dropdown-item-active-background-color");
+    @include cv.register-vars(
+      (
+        "dropdown-item-background-l-delta": #{cv.getVar(
+            "dropdown-item-active-background-l-delta"
+          )},
+        "dropdown-item-border-l-delta": #{cv.getVar(
+            "dropdown-item-active-border-l-delta"
+          )},
+      )
+    );
   }
 
   &.#{iv.$class-prefix}is-active,
   &.#{iv.$class-prefix}is-selected {
-    background-color: cv.getVar("dropdown-item-selected-background-color");
-    color: cv.getVar("dropdown-item-selected-color");
-
-    &:hover {
-      background-color: cv.getVar(
-        "dropdown-item-selected-hover-background-color"
-      );
-    }
-
-    &:active {
-      background-color: cv.getVar(
-        "dropdown-item-selected-active-background-color"
-      );
-    }
+    @include cv.register-vars(
+      (
+        "dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
+        "dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")},
+        "dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")},
+        "dropdown-item-background-l": #{cv.getVar(
+            "dropdown-item-selected-background-l"
+          )},
+        "dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
+      )
+    );
   }
 }
 

sass/components/menu.scss

@@ -3,33 +3,20 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
-$menu-item-background-color: cv.getVar("scheme-main") !default;
-$menu-item-color: cv.getVar("text") !default;
-$menu-item-hover-background-color: hsl(
-  from #{cv.getVar("menu-item-background-color")} h s calc(l + #{cv.getVar(
-          "hover-background-l-delta"
-        )})
-) !default;
-$menu-item-hover-color: cv.getVar("text-strong") !default;
-$menu-item-active-background-color: hsl(
-  from #{cv.getVar("menu-item-background-color")} h s calc(l + #{cv.getVar(
-          "active-background-l-delta"
-        )})
-) !default;
-$menu-item-active-color: cv.getVar("text-strong") !default;
-$menu-item-selected-background-color: cv.getVar("link") !default;
-$menu-item-selected-color: cv.getVar("link-invert") !default;
-$menu-item-selected-hover-background-color: hsl(
-  from #{cv.getVar("menu-item-selected-background-color")} h s calc(l + #{cv.getVar(
-          "hover-background-l-delta"
-        )})
-) !default;
-$menu-item-selected-active-background-color: hsl(
-  from #{cv.getVar("menu-item-selected-background-color")} h s calc(l + #{cv.getVar(
-          "active-background-l-delta"
-        )})
-) !default;
+$menu-item-h: cv.getVar("scheme-h");
+$menu-item-s: cv.getVar("scheme-s");
+$menu-item-l: cv.getVar("scheme-main-l");
+$menu-item-background-l: cv.getVar("scheme-main-l");
+$menu-item-background-l-delta: 0%;
+$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
+$menu-item-color-l: cv.getVar("text-l");
 $menu-item-radius: cv.getVar("radius-small") !default;
+$menu-item-selected-h: cv.getVar("link-h");
+$menu-item-selected-s: cv.getVar("link-s");
+$menu-item-selected-l: cv.getVar("link-l");
+$menu-item-selected-background-l: cv.getVar("link-l");
+$menu-item-selected-color-l: cv.getVar("link-invert-l");
 
 $menu-list-border-left: 1px solid cv.getVar("border") !default;
 $menu-list-line-height: 1.25 !default;
@@ -45,17 +32,20 @@ $menu-label-spacing: 1em !default;
 .#{iv.$class-prefix}menu {
   @include cv.register-vars(
     (
-      "menu-item-background-color": #{$menu-item-background-color},
-      "menu-item-color": #{$menu-item-color},
-      "menu-item-hover-background-color": #{$menu-item-hover-background-color},
-      "menu-item-hover-color": #{$menu-item-hover-color},
-      "menu-item-active-background-color": #{$menu-item-active-background-color},
-      "menu-item-active-color": #{$menu-item-active-color},
-      "menu-item-selected-background-color": #{$menu-item-selected-background-color},
-      "menu-item-selected-color": #{$menu-item-selected-color},
-      "menu-item-selected-hover-background-color": #{$menu-item-selected-hover-background-color},
-      "menu-item-selected-active-background-color": #{$menu-item-selected-active-background-color},
+      "menu-item-h": #{$menu-item-h},
+      "menu-item-s": #{$menu-item-s},
+      "menu-item-l": #{$menu-item-l},
+      "menu-item-background-l": #{$menu-item-background-l},
+      "menu-item-background-l-delta": #{$menu-item-background-l-delta},
+      "menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta},
+      "menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta},
+      "menu-item-color-l": #{$menu-item-color-l},
       "menu-item-radius": #{$menu-item-radius},
+      "menu-item-selected-h": #{$menu-item-selected-h},
+      "menu-item-selected-s": #{$menu-item-selected-s},
+      "menu-item-selected-l": #{$menu-item-selected-l},
+      "menu-item-selected-background-l": #{$menu-item-selected-background-l},
+      "menu-item-selected-color-l": #{$menu-item-selected-color-l},
       "menu-list-border-left": #{$menu-list-border-left},
       "menu-list-line-height": #{$menu-list-line-height},
       "menu-list-link-padding": #{$menu-list-link-padding},
@@ -93,41 +83,60 @@ $menu-label-spacing: 1em !default;
   button,
   .#{iv.$class-prefix}menu-item {
     @extend %reset;
-    background-color: cv.getVar("menu-item-background-color");
+    background-color: hsl(
+      #{cv.getVar("menu-item-h")},
+      #{cv.getVar("menu-item-s")},
+      calc(
+        #{cv.getVar("menu-item-background-l")} + #{cv.getVar(
+            "menu-item-background-l-delta"
+          )}
+      )
+    );
     border-radius: cv.getVar("menu-item-radius");
-    color: cv.getVar("menu-item-color");
+    color: hsl(
+      #{cv.getVar("menu-item-h")},
+      #{cv.getVar("menu-item-s")},
+      #{cv.getVar("menu-item-color-l")}
+    );
     display: block;
     padding: cv.getVar("menu-list-link-padding");
     text-align: left;
     width: 100%;
 
     &:hover {
-      background-color: cv.getVar("menu-item-hover-background-color");
-      color: cv.getVar("menu-item-hover-color");
+      @include cv.register-vars(
+        (
+          "menu-item-background-l-delta": #{cv.getVar(
+              "menu-item-hover-background-l-delta"
+            )},
+        )
+      );
     }
 
     &:active {
-      background-color: cv.getVar("menu-item-active-background-color");
-      color: cv.getVar("menu-item-active-color");
+      @include cv.register-vars(
+        (
+          "menu-item-background-l-delta": #{cv.getVar(
+              "menu-item-active-background-l-delta"
+            )},
+        )
+      );
     }
 
     // Modifiers
     &.#{iv.$class-prefix}is-active,
     &.#{iv.$class-prefix}is-selected {
-      background-color: cv.getVar("menu-item-selected-background-color");
-      color: cv.getVar("menu-item-selected-color");
-
-      &:hover {
-        background-color: cv.getVar(
-          "menu-item-selected-hover-background-color"
-        );
-      }
-
-      &:active {
-        background-color: cv.getVar(
-          "menu-item-selected-active-background-color"
-        );
-      }
+      @include cv.register-vars(
+        (
+          "menu-item-h": #{cv.getVar("menu-item-selected-h")},
+          "menu-item-s": #{cv.getVar("menu-item-selected-s")},
+          "menu-item-l": #{cv.getVar("menu-item-selected-l")},
+          "menu-item-background-l": #{cv.getVar(
+              "menu-item-selected-background-l"
+            )},
+          "menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")},
+        )
+      );
     }
   }
 

sass/components/message.scss

@@ -4,24 +4,26 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
-$message-background-color: cv.getVar("background");
+$message-h: cv.getVar("scheme-h");
+$message-s: cv.getVar("scheme-s");
 $message-background-l: cv.getVar("background-l");
-$message-color: cv.getVar("text") !default;
-$message-border-color: cv.getVar("border");
+$message-border-l: cv.getVar("border-l");
+$message-border-l-delta: -20% !default;
 $message-border-style: solid;
 $message-border-width: 0.25em;
-$message-header-background-color: cv.getVar("text");
-$message-header-color: cv.getVar("text-invert");
-$message-radius: cv.getVar("radius-large") !default;
+$message-color-l: cv.getVar("text-l");
+$message-header-background-l: cv.getVar("dark-l");
+$message-header-color-l: cv.getVar("text-dark-invert-l");
+$message-radius: cv.getVar("radius") !default;
 
 $message-header-weight: cv.getVar("weight-semibold") !default;
 $message-header-padding: 1em 1.25em !default;
-$message-header-radius: cv.getVar("radius-large") !default;
+$message-header-radius: cv.getVar("radius") !default;
 
 $message-body-border-width: 0 0 0 4px !default;
 $message-body-color: cv.getVar("text") !default;
 $message-body-padding: 1.25em 1.5em !default;
-$message-body-radius: cv.getVar("radius-medium") !default;
+$message-body-radius: cv.getVar("radius-small") !default;
 
 $message-body-pre-code-background-color: transparent !default;
 
@@ -31,10 +33,7 @@ $message-colors: dv.$colors !default;
 .#{iv.$class-prefix}message {
   @include cv.register-vars(
     (
-      "message-background-color": #{$message-background-color},
-      "message-background-l": #{$message-background-l},
-      "message-color": #{$message-color},
-      "message-border-color": #{$message-border-color},
+      "message-border-l-delta": #{$message-border-l-delta},
       "message-radius": #{$message-radius},
       "message-header-weight": #{$message-header-weight},
       "message-header-padding": #{$message-header-padding},
@@ -45,10 +44,15 @@ $message-colors: dv.$colors !default;
       "message-body-radius": #{$message-body-radius},
       "message-body-pre-code-background-color": #{$message-body-pre-code-background-color},
       "message-header-body-border-width": #{$message-header-body-border-width},
+      "message-h": #{$message-h},
+      "message-s": #{$message-s},
+      "message-background-l": #{$message-background-l},
+      "message-border-l": #{$message-border-l},
       "message-border-style": #{$message-border-style},
       "message-border-width": #{$message-border-width},
-      "message-header-background-color": #{$message-header-background-color},
-      "message-header-color": #{$message-header-color},
+      "message-color-l": #{$message-color-l},
+      "message-header-background-l": #{$message-header-background-l},
+      "message-header-color-l": #{$message-header-color-l},
     )
   );
 }
@@ -56,7 +60,11 @@ $message-colors: dv.$colors !default;
 .#{iv.$class-prefix}message {
   @extend %block;
   border-radius: cv.getVar("message-radius");
-  color: cv.getVar("message-color");
+  color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-color-l")}
+  );
   font-size: cv.getVar("size-normal");
 
   strong {
@@ -88,11 +96,17 @@ $message-colors: dv.$colors !default;
     &.#{iv.$class-prefix}is-#{$name} {
       @include cv.register-vars(
         (
-          "message-background-color": #{cv.getVar($name, "", "-light")},
-          "message-border-color": #{cv.getVar($name)},
-          "message-color": #{cv.getVar($name, "", "-on-scheme")},
-          "message-header-background-color": #{cv.getVar($name)},
-          "message-header-color": #{cv.getVar($name, "", "-invert")},
+          "message-h": #{cv.getVar($name, "", "-h")},
+          "message-s": #{cv.getVar($name, "", "-s")},
+          "message-border-l":
+            calc(
+              #{cv.getVar($name, "", "-l")} + #{cv.getVar(
+                  "message-border-l-delta"
+                )}
+            ),
+          "message-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
+          "message-header-background-l": #{cv.getVar($name, "", "-l")},
+          "message-header-color-l": #{cv.getVar($name, "", "-invert-l")},
         )
       );
     }
@@ -101,10 +115,18 @@ $message-colors: dv.$colors !default;
 
 .#{iv.$class-prefix}message-header {
   align-items: center;
-  background-color: cv.getVar("message-header-background-color");
+  background-color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-header-background-l")}
+  );
   border-start-start-radius: cv.getVar("message-header-radius");
   border-start-end-radius: cv.getVar("message-header-radius");
-  color: cv.getVar("message-header-color");
+  color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-header-color-l")}
+  );
   display: flex;
   font-weight: cv.getVar("message-header-weight");
   justify-content: space-between;
@@ -122,30 +144,37 @@ $message-colors: dv.$colors !default;
     border-width: cv.getVar("message-header-body-border-width");
     border-start-start-radius: 0;
     border-start-end-radius: 0;
-    border-end-end-radius: cv.getVar("message-radius");
-    border-end-start-radius: cv.getVar("message-radius");
   }
 }
 
 .#{iv.$class-prefix}message-body {
   background-color: hsl(
-    from #{cv.getVar("message-background-color")} h s #{cv.getVar(
-        "message-background-l"
-      )}
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-background-l")}
+  );
+  border-inline-start-color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-border-l")}
   );
-  border-inline-start-color: cv.getVar("message-border-color");
   border-inline-start-style: #{cv.getVar("message-border-style")};
   border-inline-start-width: #{cv.getVar("message-border-width")};
-  border-start-start-radius: 0;
-  border-start-end-radius: cv.getVar("message-radius");
-  border-end-end-radius: cv.getVar("message-radius");
-  border-end-start-radius: 0;
+  border-radius: cv.getVar("message-body-radius");
   padding: cv.getVar("message-body-padding");
 
   code,
   pre {
-    background-color: cv.getVar("message-header-color");
-    color: cv.getVar("message-header-background-color");
+    background-color: hsl(
+      #{cv.getVar("message-h")},
+      #{cv.getVar("message-s")},
+      #{cv.getVar("message-header-color-l")}
+    );
+    color: hsl(
+      #{cv.getVar("message-h")},
+      #{cv.getVar("message-s")},
+      #{cv.getVar("message-header-background-l")}
+    );
   }
 
   pre code {

sass/components/navbar.scss

@@ -4,6 +4,9 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
+$navbar-h: cv.getVar("scheme-h") !default;
+$navbar-s: cv.getVar("scheme-s") !default;
+$navbar-l: cv.getVar("scheme-main-l") !default;
 $navbar-background-color: cv.getVar("scheme-main") !default;
 $navbar-box-shadow-size: 0 0.125em 0 0 !default;
 $navbar-box-shadow-color: cv.getVar("background") !default;
@@ -13,34 +16,34 @@ $navbar-padding-horizontal: 2rem !default;
 $navbar-z: 30 !default;
 $navbar-fixed-z: 30 !default;
 
-$navbar-item-background-color: cv.getVar("scheme-main") !default;
-$navbar-item-color: cv.getVar("text") !default;
-$navbar-item-hover-background-color: hsl(
-  from #{cv.getVar("navbar-item-background-color")} h s calc(l + #{cv.getVar(
-          "hover-background-l-delta"
-        )})
+$navbar-item-background-a: 0 !default;
+$navbar-item-background-l: cv.getVar("scheme-main-l") !default;
+$navbar-item-background-l-delta: 0% !default;
+$navbar-item-hover-background-l-delta: cv.getVar(
+  "hover-background-l-delta"
 ) !default;
-$navbar-item-hover-color: cv.getVar("text-strong") !default;
-$navbar-item-active-background-color: hsl(
-  from #{cv.getVar("navbar-item-background-color")} h s calc(l + #{cv.getVar(
-          "active-background-l-delta"
-        )})
+$navbar-item-active-background-l-delta: cv.getVar(
+  "active-background-l-delta"
 ) !default;
-$navbar-item-active-color: cv.getVar("text-strong") !default;
-$navbar-item-selected-background-color: cv.getVar("link") !default;
-$navbar-item-selected-color: cv.getVar("link-invert") !default;
-$navbar-item-selected-hover-background-color: hsl(
-  from #{cv.getVar("navbar-item-selected-background-color")} h s calc(l + #{cv.getVar(
-          "hover-background-l-delta"
-        )})
-) !default;
-$navbar-item-selected-active-background-color: hsl(
-  from #{cv.getVar("navbar-item-selected-background-color")} h s calc(l + #{cv.getVar(
-          "active-background-l-delta"
-        )})
+$navbar-item-color-l: cv.getVar("text-l") !default;
+$navbar-item-color: hsl(
+  #{cv.getVar("navbar-h")},
+  #{cv.getVar("navbar-s")},
+  #{cv.getVar("navbar-item-color-l")}
 ) !default;
+$navbar-item-selected-h: cv.getVar("link-h") !default;
+$navbar-item-selected-s: cv.getVar("link-s") !default;
+$navbar-item-selected-l: cv.getVar("link-l") !default;
+$navbar-item-selected-background-l: cv.getVar("link-l") !default;
+$navbar-item-selected-color-l: cv.getVar("link-invert-l") !default;
 $navbar-item-img-max-height: 1.75rem !default;
 
+$navbar-dropdown-item-h: cv.getVar("scheme-h") !default;
+$navbar-dropdown-item-s: cv.getVar("scheme-s") !default;
+$navbar-dropdown-item-l: cv.getVar("scheme-main-l") !default;
+$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
+$navbar-dropdown-item-color-l: cv.getVar("text-l") !default;
+
 $navbar-burger-color: cv.getVar("link") !default;
 
 $navbar-tab-hover-background-color: transparent !default;
@@ -52,7 +55,12 @@ $navbar-tab-active-border-bottom-style: solid !default;
 $navbar-tab-active-border-bottom-width: 0.1875em !default;
 
 $navbar-dropdown-background-color: cv.getVar("scheme-main") !default;
-$navbar-dropdown-border-color: cv.getVar("border") !default;
+$navbar-dropdown-border-l: cv.getVar("border-l") !default;
+$navbar-dropdown-border-color: hsl(
+  cv.getVar("navbar-h"),
+  cv.getVar("navbar-s"),
+  cv.getVar("navbar-dropdown-border-l")
+) !default;
 $navbar-dropdown-border-style: solid !default;
 $navbar-dropdown-border-width: 0.125em !default;
 $navbar-dropdown-offset: -0.25em !default;
@@ -60,20 +68,6 @@ $navbar-dropdown-arrow: cv.getVar("link") !default;
 $navbar-dropdown-radius: cv.getVar("radius-large") !default;
 $navbar-dropdown-z: 20 !default;
 
-$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
-$navbar-dropdown-item-background-color: cv.getVar("scheme-main") !default;
-$navbar-dropdown-item-color: cv.getVar("text") !default;
-$navbar-dropdown-item-hover-background-color: hsl(
-  from #{cv.getVar("navbar-dropdown-item-background-color")} h s calc(l + #{cv.getVar(
-          "hover-background-l-delta"
-        )})
-) !default;
-$navbar-dropdown-item-active-background-color: hsl(
-  from #{cv.getVar("navbar-dropdown-item-background-color")} h s calc(l + #{cv.getVar(
-          "active-background-l-delta"
-        )})
-) !default;
-
 $navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default;
 $navbar-dropdown-boxed-shadow:
   0 0.5em 0.5em
@@ -92,7 +86,6 @@ $navbar-dropdown-boxed-shadow:
     ) !default;
 
 $navbar-divider-background-l: cv.getVar("background-l") !default;
-$navbar-divider-background-color: cv.getVar("background") !default;
 $navbar-divider-height: 0.125em !default;
 
 $navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default;
@@ -119,6 +112,9 @@ $navbar-colors: dv.$colors !default;
 .#{iv.$class-prefix}navbar {
   @include cv.register-vars(
     (
+      "navbar-h": #{$navbar-h},
+      "navbar-s": #{$navbar-s},
+      "navbar-l": #{$navbar-l},
       "navbar-background-color": #{$navbar-background-color},
       "navbar-box-shadow-size": #{$navbar-box-shadow-size},
       "navbar-box-shadow-color": #{$navbar-box-shadow-color},
@@ -126,16 +122,18 @@ $navbar-colors: dv.$colors !default;
       "navbar-padding-horizontal": #{$navbar-padding-horizontal},
       "navbar-z": #{$navbar-z},
       "navbar-fixed-z": #{$navbar-fixed-z},
-      "navbar-item-background-color": #{$navbar-item-background-color},
+      "navbar-item-background-a": #{$navbar-item-background-a},
+      "navbar-item-background-l": #{$navbar-item-background-l},
+      "navbar-item-background-l-delta": #{$navbar-item-background-l-delta},
+      "navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
+      "navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
+      "navbar-item-color-l": #{$navbar-item-color-l},
       "navbar-item-color": #{$navbar-item-color},
-      "navbar-item-hover-background-color": #{$navbar-item-hover-background-color},
-      "navbar-item-hover-color": #{$navbar-item-hover-color},
-      "navbar-item-active-background-color": #{$navbar-item-active-background-color},
-      "navbar-item-active-color": #{$navbar-item-active-color},
-      "navbar-item-selected-background-color": #{$navbar-item-selected-background-color},
-      "navbar-item-selected-color": #{$navbar-item-selected-color},
-      "navbar-item-selected-hover-background-color": #{$navbar-item-selected-hover-background-color},
-      "navbar-item-selected-active-background-color": #{$navbar-item-selected-active-background-color},
+      "navbar-item-selected-h": #{$navbar-item-selected-h},
+      "navbar-item-selected-s": #{$navbar-item-selected-s},
+      "navbar-item-selected-l": #{$navbar-item-selected-l},
+      "navbar-item-selected-background-l": #{$navbar-item-selected-background-l},
+      "navbar-item-selected-color-l": #{$navbar-item-selected-color-l},
       "navbar-item-img-max-height": #{$navbar-item-img-max-height},
       "navbar-burger-color": #{$navbar-burger-color},
       "navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color},
@@ -146,6 +144,7 @@ $navbar-colors: dv.$colors !default;
       "navbar-tab-active-border-bottom-style": #{$navbar-tab-active-border-bottom-style},
       "navbar-tab-active-border-bottom-width": #{$navbar-tab-active-border-bottom-width},
       "navbar-dropdown-background-color": #{$navbar-dropdown-background-color},
+      "navbar-dropdown-border-l": #{$navbar-dropdown-border-l},
       "navbar-dropdown-border-color": #{$navbar-dropdown-border-color},
       "navbar-dropdown-border-style": #{$navbar-dropdown-border-style},
       "navbar-dropdown-border-width": #{$navbar-dropdown-border-width},
@@ -153,15 +152,14 @@ $navbar-colors: dv.$colors !default;
       "navbar-dropdown-arrow": #{$navbar-dropdown-arrow},
       "navbar-dropdown-radius": #{$navbar-dropdown-radius},
       "navbar-dropdown-z": #{$navbar-dropdown-z},
-      "navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l},
-      "navbar-dropdown-item-background-color": #{$navbar-dropdown-item-background-color},
-      "navbar-dropdown-item-color": #{$navbar-dropdown-item-color},
-      "navbar-dropdown-item-hover-background-color": #{$navbar-dropdown-item-hover-background-color},
-      "navbar-dropdown-item-active-background-color": #{$navbar-dropdown-item-active-background-color},
       "navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius},
       "navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow},
+      "navbar-dropdown-item-h": #{$navbar-dropdown-item-h},
+      "navbar-dropdown-item-s": #{$navbar-dropdown-item-s},
+      "navbar-dropdown-item-l": #{$navbar-dropdown-item-l},
+      "navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l},
+      "navbar-dropdown-item-color-l": #{$navbar-dropdown-item-color-l},
       "navbar-divider-background-l": #{$navbar-divider-background-l},
-      "navbar-divider-background-color": #{$navbar-divider-background-color},
       "navbar-divider-height": #{$navbar-divider-height},
       "navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size},
     )
@@ -178,61 +176,31 @@ $navbar-colors: dv.$colors !default;
     &.#{iv.$class-prefix}is-#{$name} {
       @include cv.register-vars(
         (
+          "navbar-h": #{cv.getVar($name, "", "-h")},
+          "navbar-s": #{cv.getVar($name, "", "-s")},
+          "navbar-l": #{cv.getVar($name, "", "-l")},
+          "burger-h": #{cv.getVar($name, "", "-h")},
+          "burger-s": #{cv.getVar($name, "", "-s")},
+          "burger-l": #{cv.getVar($name, "", "-invert-l")},
           "navbar-background-color": #{cv.getVar($name)},
-          "navbar-item-background-color": #{cv.getVar($name)},
-          "navbar-item-color": #{cv.getVar($name, "", "-invert")},
-          "navbar-item-hover-color": #{cv.getVar($name, "", "-invert")},
-          "navbar-item-active-color": #{cv.getVar($name, "", "-invert")},
-          "navbar-item-selected-background-color": #{cv.getVar($name)},
-          "navbar-item-selected-color": #{cv.getVar($name, "", "-invert")},
-          "navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert")},
-          "navbar-dropdown-border-color": #{cv.getVar($name, "", "-on-scheme")},
-          "navbar-dropdown-item-color": #{cv.getVar($name, "", "-on-scheme")},
+          "navbar-item-background-l": #{cv.getVar($name, "", "-l")},
+          "navbar-item-color-l": #{cv.getVar($name, "", "-invert-l")},
+          "navbar-item-selected-h": #{cv.getVar($name, "", "-h")},
+          "navbar-item-selected-s": #{cv.getVar($name, "", "-s")},
+          "navbar-item-selected-l": #{cv.getVar($name, "", "-l")},
+          "navbar-item-selected-background-l": #{cv.getVar($name, "", "-l")},
+          "navbar-item-selected-color-l": #{cv.getVar($name, "", "-invert-l")},
+          "navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert-l")},
+          "navbar-dropdown-background-color":
+            hsl(
+              #{cv.getVar($name, "", "-h")},
+              #{cv.getVar($name, "", "-s")},
+              #{cv.getVar("navbar-dropdown-item-background-l")}
+            ),
+          "navbar-dropdown-item-h": #{cv.getVar($name, "", "-h")},
+          "navbar-dropdown-item-s": #{cv.getVar($name, "", "-s")},
         )
       );
-
-      .#{iv.$class-prefix}navbar-dropdown {
-        .#{iv.$class-prefix}navbar-item {
-          &:not(.is-active, .is-selected) {
-            background-color: hsl(
-              from cv.getVar($name)
-                h
-                s
-                cv.getVar("navbar-dropdown-item-background-l")
-            );
-
-            &:hover {
-              background-color: hsl(
-                from cv.getVar($name)
-                  h
-                  s
-                  calc(
-                    #{cv.getVar("navbar-dropdown-item-background-l")} +
-                      #{cv.getVar("hover-background-l-delta")}
-                  )
-              );
-            }
-
-            &:active {
-              background-color: hsl(
-                from cv.getVar($name)
-                  h
-                  s
-                  calc(
-                    cv.getVar("navbar-dropdown-item-background-l") +
-                      cv.getVar("active-background-l-delta")
-                  )
-              );
-            }
-          }
-        }
-      }
-
-      .#{iv.$class-prefix}navbar-divider {
-        background-color: hsl(
-          from cv.getVar($name) h s cv.getVar("navbar-divider-background-l")
-        );
-      }
     }
   }
 
@@ -328,37 +296,56 @@ body {
 
 a.#{iv.$class-prefix}navbar-item,
 .#{iv.$class-prefix}navbar-link {
-  background-color: cv.getVar("navbar-item-background-color");
+  background-color: hsla(
+    #{cv.getVar("navbar-h")},
+    #{cv.getVar("navbar-s")},
+    calc(
+      #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
+          "navbar-item-background-l-delta"
+        )}
+    ),
+    #{cv.getVar("navbar-item-background-a")}
+  );
   cursor: pointer;
 
   &:focus,
   &:focus-within,
   &:hover {
-    background-color: cv.getVar("navbar-item-hover-background-color");
-    color: cv.getVar("navbar-item-hover-color");
+    @include cv.register-vars(
+      (
+        "navbar-item-background-l-delta": #{cv.getVar(
+            "navbar-item-hover-background-l-delta"
+          )},
+        "navbar-item-background-a": 1,
+      )
+    );
   }
 
   &:active {
-    background-color: cv.getVar("navbar-item-active-background-color");
-    color: cv.getVar("navbar-item-active-color");
+    @include cv.register-vars(
+      (
+        "navbar-item-background-l-delta": #{cv.getVar(
+            "navbar-item-active-background-l-delta"
+          )},
+        "navbar-item-background-a": 1,
+      )
+    );
   }
 
   &.#{iv.$class-prefix}is-active,
   &.#{iv.$class-prefix}is-selected {
-    background-color: cv.getVar("navbar-item-selected-background-color");
-    color: cv.getVar("navbar-item-selected-color");
-
-    &:hover {
-      background-color: cv.getVar(
-        "navbar-item-selected-hover-background-color"
-      );
-    }
-
-    &:active {
-      background-color: cv.getVar(
-        "navbar-item-selected-active-background-color"
-      );
-    }
+    @include cv.register-vars(
+      (
+        "navbar-h": #{cv.getVar("navbar-item-selected-h")},
+        "navbar-s": #{cv.getVar("navbar-item-selected-s")},
+        "navbar-l": #{cv.getVar("navbar-item-selected-l")},
+        "navbar-item-background-l": #{cv.getVar(
+            "navbar-item-selected-background-l"
+          )},
+        "navbar-item-background-a": 1,
+        "navbar-item-color-l": #{cv.getVar("navbar-item-selected-color-l")},
+      )
+    );
   }
 }
 
@@ -430,26 +417,30 @@ a.#{iv.$class-prefix}navbar-item,
     padding-right: 1.5rem;
 
     &:not(.is-active, .is-selected) {
-      background-color: cv.getVar("navbar-dropdown-item-background-color");
-      color: cv.getVar("navbar-dropdown-item-color");
-
-      &:hover {
-        background-color: cv.getVar(
-          "navbar-dropdown-item-hover-background-color"
-        );
-      }
-
-      &:active {
-        background-color: cv.getVar(
-          "navbar-dropdown-item-active-background-color"
-        );
-      }
+      background-color: hsl(
+        #{cv.getVar("navbar-dropdown-item-h")},
+        #{cv.getVar("navbar-dropdown-item-s")},
+        calc(
+          #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
+              "navbar-item-background-l-delta"
+            )}
+        )
+      );
+      color: hsl(
+        #{cv.getVar("navbar-dropdown-item-h")},
+        #{cv.getVar("navbar-dropdown-item-s")},
+        #{cv.getVar("navbar-dropdown-item-color-l")}
+      );
     }
   }
 }
 
 .#{iv.$class-prefix}navbar-divider {
-  background-color: cv.getVar("navbar-divider-background-color");
+  background-color: hsl(
+    #{cv.getVar("navbar-h")},
+    #{cv.getVar("navbar-s")},
+    #{cv.getVar("navbar-divider-background-l")}
+  );
   border: none;
   display: none;
   height: cv.getVar("navbar-divider-height");
@@ -570,31 +561,31 @@ a.#{iv.$class-prefix}navbar-item,
 
       .#{iv.$class-prefix}navbar-dropdown {
         a.#{iv.$class-prefix}navbar-item {
-          // background-color: hsl(
-          //   #{cv.getVar("navbar-h")},
-          //   #{cv.getVar("navbar-s")},
-          //   calc(
-          //     #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
-          //         "navbar-item-background-l-delta"
-          //       )}
-          //   )
-          // );
+          background-color: hsl(
+            #{cv.getVar("navbar-h")},
+            #{cv.getVar("navbar-s")},
+            calc(
+              #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
+                  "navbar-item-background-l-delta"
+                )}
+            )
+          );
 
           &.#{iv.$class-prefix}is-active,
           &.#{iv.$class-prefix}is-selected {
-            // @include cv.register-vars(
-            //   (
-            //     "navbar-h": #{cv.getVar("navbar-item-selected-h")},
-            //     "navbar-s": #{cv.getVar("navbar-item-selected-s")},
-            //     "navbar-l": #{cv.getVar("navbar-item-selected-l")},
-            //     "navbar-item-background-l": #{cv.getVar(
-            //         "navbar-item-selected-background-l"
-            //       )},
-            //     "navbar-item-color-l": #{cv.getVar(
-            //         "navbar-item-selected-color-l"
-            //       )},
-            //   )
-            // );
+            @include cv.register-vars(
+              (
+                "navbar-h": #{cv.getVar("navbar-item-selected-h")},
+                "navbar-s": #{cv.getVar("navbar-item-selected-s")},
+                "navbar-l": #{cv.getVar("navbar-item-selected-l")},
+                "navbar-item-background-l": #{cv.getVar(
+                    "navbar-item-selected-background-l"
+                  )},
+                "navbar-item-color-l": #{cv.getVar(
+                    "navbar-item-selected-color-l"
+                  )},
+              )
+            );
           }
         }
       }
@@ -697,6 +688,23 @@ a.#{iv.$class-prefix}navbar-item,
 
     a.#{iv.$class-prefix}navbar-item {
       padding-inline-end: 3rem;
+
+      &:not(.is-active, .is-selected) {
+        background-color: hsl(
+          #{cv.getVar("navbar-dropdown-item-h")},
+          #{cv.getVar("navbar-dropdown-item-s")},
+          calc(
+            #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
+                "navbar-item-background-l-delta"
+              )}
+          )
+        );
+        color: hsl(
+          #{cv.getVar("navbar-dropdown-item-h")},
+          #{cv.getVar("navbar-dropdown-item-s")},
+          #{cv.getVar("navbar-dropdown-item-color-l")}
+        );
+      }
     }
 
     .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,

sass/elements/button.scss

@@ -410,6 +410,12 @@ $no-palette: ("white", "black", "light", "dark");
     &:active {
       @include cv.register-vars(());
     }
+
+    &[disabled],
+    fieldset[disabled] & {
+      background-color: transparent;
+      box-shadow: none;
+    }
   }
 
   &.#{iv.$class-prefix}is-inverted {

sass/elements/image.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/css-variables" as cv;
 @use "../utilities/mixins" as mx;
@@ -37,8 +39,8 @@ $dimensions: 16 24 32 48 64 96 128 !default;
   }
 
   @each $pair in iv.$aspect-ratios {
-    $w: nth($pair, 1);
-    $h: nth($pair, 2);
+    $w: list.nth($pair, 1);
+    $h: list.nth($pair, 2);
 
     &.#{iv.$class-prefix}is-#{$w}by#{$h} {
       aspect-ratio: #{$w} / #{$h};

sass/elements/tag.scss

@@ -4,10 +4,13 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
+$tag-h: cv.getVar("scheme-h");
+$tag-s: cv.getVar("scheme-s");
+$tag-background-l: cv.getVar("background-l");
+$tag-background-l-delta: 0%;
 $tag-hover-background-l-delta: cv.getVar("hover-background-l-delta");
 $tag-active-background-l-delta: cv.getVar("active-background-l-delta");
-$tag-color: cv.getVar("text");
-$tag-background-color: cv.getVar("background");
+$tag-color-l: cv.getVar("text-l");
 $tag-radius: cv.getVar("radius") !default;
 $tag-delete-margin: 1px !default;
 
@@ -17,7 +20,7 @@ $tag-colors: dv.$colors !default;
   @extend %block;
 
   align-items: center;
-  color: cv.getVar("tag-color");
+  color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -69,17 +72,28 @@ $tag-colors: dv.$colors !default;
 .#{iv.$class-prefix}tag {
   @include cv.register-vars(
     (
-      "tag-background-color": #{$tag-background-color},
-      "tag-color": #{$tag-color},
+      "tag-h": #{$tag-h},
+      "tag-s": #{$tag-s},
+      "tag-background-l": #{$tag-background-l},
+      "tag-background-l-delta": #{$tag-background-l-delta},
+      "tag-hover-background-l-delta": #{$tag-hover-background-l-delta},
+      "tag-active-background-l-delta": #{$tag-active-background-l-delta},
+      "tag-color-l": #{$tag-color-l},
       "tag-radius": #{$tag-radius},
       "tag-delete-margin": #{$tag-delete-margin},
     )
   );
 
   align-items: center;
-  background-color: cv.getVar("tag-background-color");
+  background-color: hsl(
+    cv.getVar("tag-h"),
+    cv.getVar("tag-s"),
+    calc(
+      #{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
+    )
+  );
   border-radius: $tag-radius;
-  color: cv.getVar("tag-color");
+  color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
   display: inline-flex;
   font-size: cv.getVar("size-small");
   height: 2em;
@@ -99,16 +113,18 @@ $tag-colors: dv.$colors !default;
     &.#{iv.$class-prefix}is-#{$name} {
       @include cv.register-vars(
         (
-          "tag-background-color": cv.getVar($name),
-          "tag-color": #{cv.getVar($name, "", "-invert")},
+          "tag-h": #{cv.getVar($name, "", "-h")},
+          "tag-s": #{cv.getVar($name, "", "-s")},
+          "tag-background-l": #{cv.getVar($name, "", "-l")},
+          "tag-color-l": #{cv.getVar($name, "", "-invert-l")},
         )
       );
 
       &.#{iv.$class-prefix}is-light {
         @include cv.register-vars(
           (
-            "tag-background-color": #{cv.getVar($name, "", "-light")},
-            "tag-color": #{cv.getVar($name, "", "-light-invert")},
+            "tag-background-l": #{cv.getVar("light-l")},
+            "tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
           )
         );
       }

sass/elements/title.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "../utilities/css-variables" as cv;
 @use "../utilities/derived-variables" as dv;
 @use "../utilities/initial-variables" as iv;
@@ -90,7 +92,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
 
   // Sizes
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
     &.#{iv.$class-prefix}is-#{$i} {
       font-size: $size;
@@ -119,7 +121,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
 
   // Sizes
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
     &.#{iv.$class-prefix}is-#{$i} {
       font-size: $size;

sass/form/input-textarea.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "shared";
 @use "../utilities/css-variables" as cv;
 @use "../utilities/initial-variables" as iv;
@@ -22,7 +24,7 @@ $textarea-colors: shared.$form-colors !default;
 
   // Colors
   @each $name, $pair in $textarea-colors {
-    $color: nth($pair, 1);
+    $color: list.nth($pair, 1);
 
     &.#{iv.$class-prefix}is-#{$name} {
       @include cv.register-vars(

sass/helpers/aspect-ratio.scss

@@ -1,10 +1,12 @@
+@use "sass:list";
+
 @use "../utilities/initial-variables" as iv;
 
 @each $pair in iv.$aspect-ratios {
-  $w: nth($pair, 1);
-  $h: nth($pair, 2);
+  $w: list.nth($pair, 1);
+  $h: list.nth($pair, 2);
 
-  .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
     aspect-ratio: #{$w} / #{$h};
   }
 }

sass/helpers/border.scss

@@ -9,7 +9,7 @@ $radii: (
 );
 
 @each $name, $var in $radii {
-  .#{iv.$helpers-has-prefix}radius-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}radius-#{$name} {
     border-radius: cv.getVar($var);
   }
 }

sass/helpers/color.scss

@@ -26,7 +26,7 @@ $digits: (
   "100"
 );
 
-.#{iv.$helpers-has-prefix}background {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background {
   background-color: cv.getVar("background");
 }
 
@@ -43,16 +43,16 @@ $digits: (
     #{cv.getVar($name, "", "-l")}
   );
 
-  .#{iv.$helpers-has-prefix}text-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
     color: $color !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $background !important;
   }
 
   // Invert
-  .#{iv.$helpers-has-prefix}text-#{$name}-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -60,7 +60,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -69,7 +69,7 @@ $digits: (
   }
 
   // On Scheme
-  .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -77,7 +77,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -86,7 +86,7 @@ $digits: (
   }
 
   // Light
-  .#{iv.$helpers-has-prefix}text-#{$name}-light {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -94,7 +94,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-light {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -102,7 +102,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -110,7 +110,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -119,7 +119,7 @@ $digits: (
   }
 
   // Dark
-  .#{iv.$helpers-has-prefix}text-#{$name}-dark {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -127,7 +127,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-dark {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -135,7 +135,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -143,7 +143,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -152,7 +152,7 @@ $digits: (
   }
 
   // Soft/Bold
-  .#{iv.$helpers-has-prefix}text-#{$name}-soft {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -160,7 +160,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-soft {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -168,7 +168,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-bold {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -176,7 +176,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-bold {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -184,7 +184,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -192,7 +192,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -200,7 +200,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
     color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -208,7 +208,7 @@ $digits: (
     ) !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
     background-color: hsl(
       #{cv.getVar($name, "", "-h")},
       #{cv.getVar($name, "", "-s")},
@@ -217,7 +217,7 @@ $digits: (
   }
 
   @each $digit in $digits {
-    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
       color: hsl(
         #{cv.getVar($name, "", "-h")},
         #{cv.getVar($name, "", "-s")},
@@ -225,7 +225,7 @@ $digits: (
       ) !important;
     }
 
-    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
       background-color: hsl(
         #{cv.getVar($name, "", "-h")},
         #{cv.getVar($name, "", "-s")},
@@ -233,7 +233,7 @@ $digits: (
       ) !important;
     }
 
-    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
       color: hsl(
         #{cv.getVar($name, "", "-h")},
         #{cv.getVar($name, "", "-s")},
@@ -241,7 +241,7 @@ $digits: (
       ) !important;
     }
 
-    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
       background-color: hsl(
         #{cv.getVar($name, "", "-h")},
         #{cv.getVar($name, "", "-s")},
@@ -251,9 +251,9 @@ $digits: (
   }
 
   // Hover
-  a.#{iv.$helpers-has-prefix}text-#{$name},
-  button.#{iv.$helpers-has-prefix}text-#{$name},
-  #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
+  a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
+  button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
+  #{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
     &:hover,
     &:focus-visible {
       color: hsl(
@@ -276,9 +276,9 @@ $digits: (
     }
   }
 
-  a.#{iv.$helpers-has-prefix}background-#{$name},
-  button.#{iv.$helpers-has-prefix}background-#{$name},
-  #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
+  a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name},
+  button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name},
+  #{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
     &:hover,
     &:focus-visible {
       background-color: hsl(
@@ -304,7 +304,7 @@ $digits: (
   }
 
   // Palettes
-  .#{iv.$helpers-prefix}palette-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}palette-#{$name} {
     --h: #{cv.getVar($name, "", "-h")};
     --s: #{cv.getVar($name, "", "-s")};
     --l: #{cv.getVar($name, "", "-l")};
@@ -318,27 +318,27 @@ $digits: (
 }
 
 @each $name, $shade in dv.$shades {
-  .#{iv.$helpers-has-prefix}text-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
     color: $shade !important;
   }
 
-  .#{iv.$helpers-has-prefix}background-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $shade !important;
   }
 }
 
-.#{iv.$helpers-has-prefix}text-current {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-current {
   color: currentColor !important;
 }
 
-.#{iv.$helpers-has-prefix}text-inherit {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-inherit {
   color: inherit !important;
 }
 
-.#{iv.$helpers-has-prefix}background-current {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-current {
   background-color: currentColor !important;
 }
 
-.#{iv.$helpers-has-prefix}background-inherit {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-inherit {
   background-color: inherit !important;
 }

sass/helpers/flexbox.scss

@@ -3,7 +3,7 @@
 $flex-direction-values: row, row-reverse, column, column-reverse;
 
 @each $value in $flex-direction-values {
-  .#{iv.$helpers-prefix}flex-direction-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-direction-#{$value} {
     flex-direction: $value !important;
   }
 }
@@ -11,7 +11,7 @@ $flex-direction-values: row, row-reverse, column, column-reverse;
 $flex-wrap-values: nowrap, wrap, wrap-reverse;
 
 @each $value in $flex-wrap-values {
-  .#{iv.$helpers-prefix}flex-wrap-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-wrap-#{$value} {
     flex-wrap: $value !important;
   }
 }
@@ -20,7 +20,7 @@ $justify-content-values: flex-start, flex-end, center, space-between,
   space-around, space-evenly, start, end, left, right;
 
 @each $value in $justify-content-values {
-  .#{iv.$helpers-prefix}justify-content-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}justify-content-#{$value} {
     justify-content: $value !important;
   }
 }
@@ -29,7 +29,7 @@ $align-content-values: flex-start, flex-end, center, space-between, space-around
   space-evenly, stretch, start, end, baseline;
 
 @each $value in $align-content-values {
-  .#{iv.$helpers-prefix}align-content-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-content-#{$value} {
     align-content: $value !important;
   }
 }
@@ -38,7 +38,7 @@ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end
   self-start, self-end;
 
 @each $value in $align-items-values {
-  .#{iv.$helpers-prefix}align-items-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-items-#{$value} {
     align-items: $value !important;
   }
 }
@@ -46,7 +46,7 @@ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end
 $align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
 
 @each $value in $align-self-values {
-  .#{iv.$helpers-prefix}align-self-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-self-#{$value} {
     align-self: $value !important;
   }
 }
@@ -55,7 +55,7 @@ $flex-operators: grow, shrink;
 
 @each $operator in $flex-operators {
   @for $i from 0 through 5 {
-    .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
       flex-#{$operator}: $i !important;
     }
   }

sass/helpers/float.scss

@@ -1,28 +1,28 @@
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/mixins" as mx;
 
-.#{iv.$helpers-prefix}clearfix {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}clearfix {
   @include mx.clearfix;
 }
 
-.#{iv.$helpers-prefix}float-left,
-.#{iv.$helpers-prefix}pulled-left {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}float-left,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}pulled-left {
   float: left !important;
 }
 
-.#{iv.$helpers-prefix}float-right,
-.#{iv.$helpers-prefix}pulled-right {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}float-right,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}pulled-right {
   float: right !important;
 }
 
-.#{iv.$helpers-prefix}float-none {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}float-none {
   float: none !important;
 }
 
 $clears: both left none right;
 
 @each $clear in $clears {
-  .#{iv.$helpers-prefix}clear-#{$clear} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}clear-#{$clear} {
     clear: $clear !important;
   }
 }

sass/helpers/gap.scss

@@ -2,7 +2,7 @@
 @use "sass:string";
 @use "../utilities/initial-variables" as iv;
 
-.#{iv.$helpers-prefix}gapless {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}gapless {
   gap: 0 !important;
 }
 
@@ -11,12 +11,12 @@ $gap-base: 0.5rem;
 
 @each $gap in $gaps {
   @for $i from 0 through 8 {
-    .#{iv.$helpers-prefix}#{$gap}-#{$i} {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i} {
       #{$gap}: ($gap-base * $i) !important;
     }
 
     @if $i < 8 {
-      .#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
+      .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
         #{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important;
       }
     }

sass/helpers/other.scss

@@ -1,19 +1,19 @@
 @use "../utilities/extends";
 @use "../utilities/initial-variables" as iv;
 
-.#{iv.$helpers-prefix}radiusless {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}radiusless {
   border-radius: 0 !important;
 }
 
-.#{iv.$helpers-prefix}shadowless {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}shadowless {
   box-shadow: none !important;
 }
 
-.#{iv.$helpers-prefix}clickable {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}clickable {
   cursor: pointer !important;
   pointer-events: all !important;
 }
 
-.#{iv.$helpers-prefix}unselectable {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}unselectable {
   @extend %unselectable;
 }

sass/helpers/overflow.scss

@@ -1,21 +1,21 @@
 @use "../utilities/initial-variables" as iv;
 
-.#{iv.$helpers-prefix}clipped {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}clipped {
   overflow: hidden !important;
 }
 
 $overflows: auto clip hidden scroll visible;
 
 @each $overflow in $overflows {
-  .#{iv.$helpers-prefix}overflow-#{$overflow} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-#{$overflow} {
     overflow: $overflow !important;
   }
 
-  .#{iv.$helpers-prefix}overflow-x-#{$overflow} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-x-#{$overflow} {
     overflow-x: $overflow !important;
   }
 
-  .#{iv.$helpers-prefix}overflow-y-#{$overflow} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-y-#{$overflow} {
     overflow-y: $overflow !important;
   }
 }

sass/helpers/position.scss

@@ -1,19 +1,19 @@
 @use "../utilities/extends";
 @use "../utilities/initial-variables" as iv;
 
-.#{iv.$helpers-prefix}overlay,
-.#{iv.$helpers-prefix}overlay {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}overlay,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}overlay {
   @extend %overlay;
 }
 
-.#{iv.$helpers-prefix}relative {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}relative {
   position: relative !important;
 }
 
 $positions: absolute fixed relative static sticky;
 
 @each $position in $positions {
-  .#{iv.$helpers-prefix}position-#{$position} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}position-#{$position} {
     position: $position !important;
   }
 }

sass/helpers/spacing.scss

@@ -1,10 +1,10 @@
 @use "../utilities/initial-variables" as iv;
 
-.marginless {
+.#{iv.$class-prefix}marginless {
   margin: 0 !important;
 }
 
-.paddingless {
+.#{iv.$class-prefix}paddingless {
   padding: 0 !important;
 }
 
@@ -34,20 +34,20 @@ $spacing-values: (
 @each $property, $shortcut in $spacing-shortcuts {
   @each $name, $value in $spacing-values {
     // All directions
-    .#{$shortcut}-#{$name} {
+    .#{iv.$class-prefix}#{$shortcut}-#{$name} {
       #{$property}: $value !important;
     }
 
     // Cardinal directions
     @each $direction, $suffix in $spacing-directions {
-      .#{$shortcut}#{$suffix}-#{$name} {
+      .#{iv.$class-prefix}#{$shortcut}#{$suffix}-#{$name} {
         #{$property}-#{$direction}: $value !important;
       }
     }
 
     // Horizontal axis
     @if $spacing-horizontal != null {
-      .#{$shortcut}#{$spacing-horizontal}-#{$name} {
+      .#{iv.$class-prefix}#{$shortcut}#{$spacing-horizontal}-#{$name} {
         #{$property}-left: $value !important;
         #{$property}-right: $value !important;
       }
@@ -55,7 +55,7 @@ $spacing-values: (
 
     // Vertical axis
     @if $spacing-vertical != null {
-      .#{$shortcut}#{$spacing-vertical}-#{$name} {
+      .#{iv.$class-prefix}#{$shortcut}#{$spacing-vertical}-#{$name} {
         #{$property}-top: $value !important;
         #{$property}-bottom: $value !important;
       }

sass/helpers/typography.scss

@@ -1,12 +1,14 @@
+@use "sass:list";
+
 @use "../utilities/derived-variables" as dv;
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/mixins" as mx;
 
 @mixin typography-size($target: "") {
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
-    .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
       font-size: $size !important;
     }
   }
@@ -46,123 +48,123 @@ $alignments: (
 );
 
 @each $alignment, $text-align in $alignments {
-  .#{iv.$helpers-has-prefix}text-#{$alignment} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment} {
     text-align: #{$text-align} !important;
   }
 }
 
 @each $alignment, $text-align in $alignments {
   @include mx.mobile {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.tablet {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.tablet-only {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.touch {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.desktop {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.desktop-only {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.widescreen {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.widescreen-only {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
       text-align: #{$text-align} !important;
     }
   }
 
   @include mx.fullhd {
-    .#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
       text-align: #{$text-align} !important;
     }
   }
 }
 
-.#{iv.$helpers-prefix}capitalized {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}capitalized {
   text-transform: capitalize !important;
 }
 
-.#{iv.$helpers-prefix}lowercase {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}lowercase {
   text-transform: lowercase !important;
 }
 
-.#{iv.$helpers-prefix}uppercase {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}uppercase {
   text-transform: uppercase !important;
 }
 
-.#{iv.$helpers-prefix}italic {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}italic {
   font-style: italic !important;
 }
 
-.#{iv.$helpers-prefix}underlined {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}underlined {
   text-decoration: underline !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-light {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-light {
   font-weight: iv.$weight-light !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-normal {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-normal {
   font-weight: iv.$weight-normal !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-medium {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-medium {
   font-weight: iv.$weight-medium !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-semibold {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-semibold {
   font-weight: iv.$weight-semibold !important;
 }
 
-.#{iv.$helpers-has-prefix}text-weight-bold {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-bold {
   font-weight: iv.$weight-bold !important;
 }
 
-.#{iv.$helpers-prefix}family-primary {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-primary {
   font-family: dv.$family-primary !important;
 }
 
-.#{iv.$helpers-prefix}family-secondary {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-secondary {
   font-family: dv.$family-secondary !important;
 }
 
-.#{iv.$helpers-prefix}family-sans-serif {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-sans-serif {
   font-family: iv.$family-sans-serif !important;
 }
 
-.#{iv.$helpers-prefix}family-monospace {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-monospace {
   font-family: iv.$family-monospace !important;
 }
 
-.#{iv.$helpers-prefix}family-code {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-code {
   font-family: dv.$family-code !important;
 }

sass/helpers/visibility.scss

@@ -1,84 +1,84 @@
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/mixins" as mx;
 
-.#{iv.$helpers-prefix}display-none,
-.#{iv.$helpers-prefix}hidden {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden {
   display: none !important;
 }
 
 $displays: block flex inline inline-block inline-flex grid;
 
 @each $display in $displays {
-  .#{iv.$helpers-prefix}display-#{$display},
-  .#{iv.$helpers-prefix}#{$display} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display},
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display} {
     display: $display !important;
   }
 
   @include mx.mobile {
-    .#{iv.$helpers-prefix}display-#{$display}-mobile,
-    .#{iv.$helpers-prefix}#{$display}-mobile {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-mobile,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-mobile {
       display: $display !important;
     }
   }
 
   @include mx.tablet {
-    .#{iv.$helpers-prefix}display-#{$display}-tablet,
-    .#{iv.$helpers-prefix}#{$display}-tablet {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet {
       display: $display !important;
     }
   }
 
   @include mx.tablet-only {
-    .#{iv.$helpers-prefix}display-#{$display}-tablet-only,
-    .#{iv.$helpers-prefix}#{$display}-tablet-only {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet-only,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet-only {
       display: $display !important;
     }
   }
 
   @include mx.touch {
-    .#{iv.$helpers-prefix}display-#{$display}-touch,
-    .#{iv.$helpers-prefix}#{$display}-touch {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-touch,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-touch {
       display: $display !important;
     }
   }
 
   @include mx.desktop {
-    .#{iv.$helpers-prefix}display-#{$display}-desktop,
-    .#{iv.$helpers-prefix}#{$display}-desktop {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop {
       display: $display !important;
     }
   }
 
   @include mx.desktop-only {
-    .#{iv.$helpers-prefix}display-#{$display}-desktop-only,
-    .#{iv.$helpers-prefix}#{$display}-desktop-only {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop-only,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop-only {
       display: $display !important;
     }
   }
 
   @include mx.widescreen {
-    .#{iv.$helpers-prefix}display-#{$display}-widescreen,
-    .#{iv.$helpers-prefix}#{$display}-widescreen {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-widescreen,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-widescreen {
       display: $display !important;
     }
   }
 
   @include mx.widescreen-only {
-    .#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
-    .#{iv.$helpers-prefix}#{$display}-widescreen-only {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-widescreen-only {
       display: $display !important;
     }
   }
 
   @include mx.fullhd {
-    .#{iv.$helpers-prefix}display-#{$display}-fullhd,
-    .#{iv.$helpers-prefix}#{$display}-fullhd {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-fullhd,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-fullhd {
       display: $display !important;
     }
   }
 }
 
-.#{iv.$helpers-prefix}sr-only {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}sr-only {
   border: none !important;
   clip: rect(0, 0, 0, 0) !important;
   height: 0.01em !important;
@@ -90,132 +90,132 @@ $displays: block flex inline inline-block inline-flex grid;
 }
 
 @include mx.mobile {
-  .#{iv.$helpers-prefix}display-none-mobile,
-  .#{iv.$helpers-prefix}hidden-mobile {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-mobile,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-mobile {
     display: none !important;
   }
 }
 
 @include mx.tablet {
-  .#{iv.$helpers-prefix}display-none-tablet,
-  .#{iv.$helpers-prefix}hidden-tablet {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet {
     display: none !important;
   }
 }
 
 @include mx.tablet-only {
-  .#{iv.$helpers-prefix}display-none-tablet-only,
-  .#{iv.$helpers-prefix}hidden-tablet-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet-only {
     display: none !important;
   }
 }
 
 @include mx.touch {
-  .#{iv.$helpers-prefix}display-none-touch,
-  .#{iv.$helpers-prefix}hidden-touch {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-touch,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-touch {
     display: none !important;
   }
 }
 
 @include mx.desktop {
-  .#{iv.$helpers-prefix}display-none-desktop,
-  .#{iv.$helpers-prefix}hidden-desktop {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop {
     display: none !important;
   }
 }
 
 @include mx.desktop-only {
-  .#{iv.$helpers-prefix}display-none-desktop-only,
-  .#{iv.$helpers-prefix}hidden-desktop-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop-only {
     display: none !important;
   }
 }
 
 @include mx.widescreen {
-  .#{iv.$helpers-prefix}display-none-widescreen,
-  .#{iv.$helpers-prefix}hidden-widescreen {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-widescreen,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-widescreen {
     display: none !important;
   }
 }
 
 @include mx.widescreen-only {
-  .#{iv.$helpers-prefix}display-none-widescreen-only,
-  .#{iv.$helpers-prefix}hidden-widescreen-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-widescreen-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-widescreen-only {
     display: none !important;
   }
 }
 
 @include mx.fullhd {
-  .#{iv.$helpers-prefix}display-none-fullhd,
-  .#{iv.$helpers-prefix}hidden-fullhd {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-fullhd,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-fullhd {
     display: none !important;
   }
 }
 
-.#{iv.$helpers-prefix}visibility-hidden,
-.#{iv.$helpers-prefix}invisible {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible {
   visibility: hidden !important;
 }
 
 @include mx.mobile {
-  .#{iv.$helpers-prefix}visibility-hidden-mobile,
-  .#{iv.$helpers-prefix}invisible-mobile {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-mobile,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-mobile {
     visibility: hidden !important;
   }
 }
 
 @include mx.tablet {
-  .#{iv.$helpers-prefix}visibility-hidden-tablet,
-  .#{iv.$helpers-prefix}invisible-tablet {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-tablet,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-tablet {
     visibility: hidden !important;
   }
 }
 
 @include mx.tablet-only {
-  .#{iv.$helpers-prefix}visibility-hidden-tablet-only,
-  .#{iv.$helpers-prefix}invisible-tablet-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-tablet-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-tablet-only {
     visibility: hidden !important;
   }
 }
 
 @include mx.touch {
-  .#{iv.$helpers-prefix}visibility-hidden-touch,
-  .#{iv.$helpers-prefix}invisible-touch {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-touch,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-touch {
     visibility: hidden !important;
   }
 }
 
 @include mx.desktop {
-  .#{iv.$helpers-prefix}visibility-hidden-desktop,
-  .#{iv.$helpers-prefix}invisible-desktop {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop {
     visibility: hidden !important;
   }
 }
 
 @include mx.desktop-only {
-  .#{iv.$helpers-prefix}visibility-hidden-desktop-only,
-  .#{iv.$helpers-prefix}invisible-desktop-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop-only {
     visibility: hidden !important;
   }
 }
 
 @include mx.widescreen {
-  .#{iv.$helpers-prefix}visibility-hidden-widescreen,
-  .#{iv.$helpers-prefix}invisible-widescreen {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-widescreen,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-widescreen {
     visibility: hidden !important;
   }
 }
 
 @include mx.widescreen-only {
-  .#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
-  .#{iv.$helpers-prefix}invisible-widescreen-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-widescreen-only {
     visibility: hidden !important;
   }
 }
 
 @include mx.fullhd {
-  .#{iv.$helpers-prefix}visibility-hidden-fullhd,
-  .#{iv.$helpers-prefix}invisible-fullhd {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-fullhd,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-fullhd {
     visibility: hidden !important;
   }
 }

sass/themes/dark.scss

@@ -1,4 +1,5 @@
 @use "sass:list";
+@use "sass:meta";
 
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/css-variables" as cv;
@@ -6,20 +7,20 @@
 @use "setup";
 
 // The main lightness of this theme
-$scheme-main-l: 9;
-$background-l: 14;
+$scheme-main-l: 9%;
+$background-l: 14%;
 $text-l: 71%;
 
 // The main scheme color, used to make calculations
-$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
-$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l * 1%);
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
+$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
 $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
 
 @mixin dark-theme {
   @each $name, $color in dv.$colors {
     $base: $color;
 
-    @if type-of($color == "list") {
+    @if meta.type-of($color == "list") {
       $base: list.nth($color, 1);
     }
 
@@ -30,8 +31,8 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
     (
       "scheme-brightness": "dark",
       "scheme-main-l": $scheme-main-l,
-      "scheme-main-bis-l": $scheme-main-l + 2,
-      "scheme-main-ter-l": $scheme-main-l + 4,
+      "scheme-main-bis-l": $scheme-main-l + 2%,
+      "scheme-main-ter-l": $scheme-main-l + 4%,
       "soft-l": iv.$dark-l,
       "bold-l": iv.$light-l,
       "soft-invert-l": iv.$light-l,
@@ -44,13 +45,10 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
       "text-strong-l": 93%,
       "text-title-l": 100%,
       "hover-background-l-delta": 5%,
-      "focus-background-l-delta": 5%,
       "active-background-l-delta": 10%,
       "hover-border-l-delta": 10%,
-      "focus-border-l-delta": 10%,
       "active-border-l-delta": 20%,
       "hover-color-l-delta": 5%,
-      "focus-color-l-delta": 5%,
       "active-color-l-delta": 10%,
     )
   );

sass/themes/light.scss

@@ -1,4 +1,5 @@
 @use "sass:list";
+@use "sass:meta";
 
 @use "../utilities/css-variables" as cv;
 @use "../utilities/derived-variables" as dv;
@@ -7,10 +8,10 @@
 @use "setup";
 
 // The main lightness of this theme
-$scheme-main-l: 100;
+$scheme-main-l: 100%;
 
 // The main scheme color, used to make calculations
-$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
 
 @mixin light-theme {
   @include cv.register-vars(
@@ -27,20 +28,16 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
       "bold-invert-l": iv.$light-l,
 
       // Deltas
-      "hover-background-l-delta": -5,
-      "focus-background-l-delta": -5,
-      "active-background-l-delta": -10,
+      "hover-background-l-delta": -5%,
+      "active-background-l-delta": -10%,
 
-      "hover-border-l-delta": -10,
-      "focus-border-l-delta": -10,
-      "active-border-l-delta": -20,
+      "hover-border-l-delta": -10%,
+      "active-border-l-delta": -20%,
 
-      "hover-color-l-delta": -5,
-      "focus-color-l-delta": -5,
-      "active-color-l-delta": -10,
+      "hover-color-l-delta": -5%,
+      "active-color-l-delta": -10%,
 
       "hover-shadow-a-delta": -0.05,
-      "focus-shadow-a-delta": -0.05,
       "active-shadow-a-delta": -0.1,
 
       // Light only
@@ -48,7 +45,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
       "scheme-main-l": $scheme-main-l,
       "scheme-main-bis-l": 98%,
       "scheme-main-ter-l": 96%,
-      "background-l": 96,
+      "background-l": 96%,
       "border-weak-l": 93%,
       "border-l": 86%,
       "text-weak-l": 48%,
@@ -107,7 +104,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
     $light: null;
     $dark: null;
 
-    @if type-of($color == "list") {
+    @if meta.type-of($color == "list") {
       $base: list.nth($color, 1);
 
       @if list.length($color) > 3 {
@@ -143,7 +140,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
   @include cv.register-hsl("shadow", dv.$shadow-color);
 
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
     $name: "size-#{$i}";
     @include cv.register-var($name, $size);
   }

sass/themes/setup.scss

@@ -8,7 +8,7 @@
         hsl(
           #{cv.getVar("scheme-h")},
           #{cv.getVar("scheme-s")},
-          calc(#{cv.getVar("scheme-main-l")} * 1%)
+          #{cv.getVar("scheme-main-l")}
         ),
       "scheme-main-bis":
         hsl(

sass/utilities/css-variables.scss

@@ -10,12 +10,12 @@
   @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
 }
 
-@function buildHslaString($name, $l) {
+@function buildHslaString($name, $l, $a: 1) {
   $lightness: getVar($name, "", "-l");
   @if ($l) {
     $lightness: $l;
   }
-  @return "hsl(from #{getVar($name)} h s #{$lightness})";
+  @return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})";
 }
 
 @function getVar($name, $prefix: "", $suffix: "") {
@@ -48,16 +48,35 @@
 @mixin register-rgb($name, $value) {
   @include register-var(
     $name,
-    (red($value), green($value), blue($value)),
+    (
+      color.channel($value, "red", $space: rgb),
+      color.channel($value, "green", $space: rgb),
+      color.channel($value, "blue", $space: rgb)
+    ),
     "",
     "-rgb"
   );
 }
 
 @mixin register-hsl($name, $value) {
-  @include register-var($name, round(hue($value)), "", "-h");
-  @include register-var($name, round(saturation($value)), "", "-s");
-  @include register-var($name, round(lightness($value)), "", "-l");
+  @include register-var(
+    $name,
+    math.round(color.channel($value, "hue", $space: hsl)),
+    "",
+    "-h"
+  );
+  @include register-var(
+    $name,
+    math.round(color.channel($value, "saturation", $space: hsl)),
+    "",
+    "-s"
+  );
+  @include register-var(
+    $name,
+    math.round(color.channel($value, "lightness", $space: hsl)),
+    "",
+    "-l"
+  );
 }
 
 @mixin generate-on-scheme-colors($name, $base, $scheme-main) {
@@ -76,7 +95,11 @@
       @if $ratio > 5 {
         $found-decent-color: true;
       } @else {
-        $on-scheme-color: lighten($on-scheme-color, 5%);
+        $on-scheme-color: color.adjust(
+          $on-scheme-color,
+          $lightness: 5%,
+          $space: hsl
+        );
         $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
       }
     }
@@ -87,13 +110,21 @@
       @if $ratio > 5 {
         $found-decent-color: true;
       } @else {
-        $on-scheme-color: darken($on-scheme-color, 5%);
+        $on-scheme-color: color.adjust(
+          $on-scheme-color,
+          $lightness: -5%,
+          $space: hsl
+        );
         $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
       }
     }
   }
 
-  $on-scheme-lightness: lightness($on-scheme-color);
+  $on-scheme-lightness: color.channel(
+    $on-scheme-color,
+    "lightness",
+    $space: hsl
+  );
   @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
   $on-scheme-l: getVar($name, "", "-on-scheme-l");
   @include register-var(
@@ -110,22 +141,35 @@
   @if ($scheme-main-brightness == "bright") {
     @while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) {
       // We're on a light background, so we'll darken the test color step by step.
-      $on-scheme-color: darken($on-scheme-color, 5%);
+      $on-scheme-color: color.adjust(
+        $on-scheme-color,
+        $lightness: -5%,
+        $space: hsl
+      );
     }
   } @else {
     @while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) {
       // We're on a dark background, so we'll lighten the test color step by step.
-      $on-scheme-color: lighten($on-scheme-color, 5%);
+      $on-scheme-color: color.adjust(
+        $on-scheme-color,
+        $lightness: 5%,
+        $space: hsl
+      );
     }
   }
 
-  $on-scheme-lightness: lightness($on-scheme-color);
+  $on-scheme-lightness: color.channel(
+    $on-scheme-color,
+    "lightness",
+    $space: hsl
+  );
   @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
 }
 
 @mixin register-base-color($name, $base) {
-  @include register-var($name, $base);
-  @include register-var($name, $base, "", "-base"); // Just for reference
+  $hsla: buildHslaString($name, getVar($name, "", "-l"));
+  @include register-var($name, $hsla);
+  @include register-var($name, $hsla, "", "-base"); // Just for reference
   @include register-rgb($name, $base);
   @include register-hsl($name, $base);
 }
@@ -134,7 +178,12 @@
   @include register-base-color($name, $base);
 
   @if $invert {
-    @include register-var($name, lightness($invert), "", "-invert-l");
+    @include register-var(
+      $name,
+      color.channel($invert, "lightness", $space: hsl),
+      "",
+      "-invert-l"
+    );
     @include register-var("#{$name}-invert", $invert);
   }
 }
@@ -142,16 +191,16 @@
 @mixin generate-color-palette(
   $name,
   $base,
-  $scheme-main-l: 100,
+  $scheme-main-l: 100%,
   $invert: null,
   $light: null,
   $dark: null
 ) {
-  $h: round(hue($base)); // Hue
-  $s: round(saturation($base)); // Saturation
-  $l: round(lightness($base)); // Lightness
+  $h:math.round(color.channel($base, "hue", $space: hsl)); // Hue
+  $s:math.round(color.channel($base, "saturation", $space: hsl)); // Saturation
+  $l:math.round(color.channel($base, "lightness", $space: hsl)); // Lightness
   $base-lum: fn.bulmaColorLuminance($base);
-  $l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
+  $l-base: math.round($l % 10); // Get lightness second digit: 53% -> 3%
   $l-0: 0%; // 5% or less
   $l-5: 5%; // More than 5%
   $a: 1; // Alpha
@@ -159,9 +208,8 @@
 
   // Calculate digits like "40" for the scheme-main
   $scheme-l-0: 0%;
-  $scheme-l-base: round(($scheme-main-l * 1%) % 10);
-  @debug $scheme-l-base;
-  $closest-5: math.round(math.div(($scheme-main-l * 1%), 5)) * 5;
+  $scheme-l-base: math.round($scheme-main-l % 10);
+  $closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
   $pct-to-int: math.div($closest-5, 100%) * 100;
   $scheme-main-digits: #{$pct-to-int};
 
@@ -254,7 +302,10 @@
       // Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
       $fg-lum: fn.bulmaColorLuminance($foreground);
 
-      @if (lightness($foreground) > lightness($background)) {
+      @if (
+        color.channel($foreground, "lightness", $space: hsl) >
+          color.channel($background, "lightness", $space: hsl)
+      ) {
         $is-light-fg: true;
         $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
       } @else {
@@ -323,7 +374,12 @@
 
   // If an invert color is provided by the user
   @if $invert {
-    @include register-var($name, lightness($invert), "", "-invert-l");
+    @include register-var(
+      $name,
+      color.channel($invert, "lightness", $space: hsl),
+      "",
+      "-invert-l"
+    );
     @include register-var("#{$name}-invert", $invert);
   } @else {
     $base-invert-l-digits: map.get($combos, $base-digits);
@@ -343,13 +399,33 @@
 
   // Good color on light background (90% lightness)
   @if $light and $dark {
-    @include register-var($name, lightness($light), "", "-light-l");
-    @include register-var($name, lightness($light), "", "-dark-invert-l");
+    @include register-var(
+      $name,
+      color.channel($light, "lightness", $space: hsl),
+      "",
+      "-light-l"
+    );
+    @include register-var(
+      $name,
+      color.channel($light, "lightness", $space: hsl),
+      "",
+      "-dark-invert-l"
+    );
     @include register-var("#{$name}-light", $light);
     @include register-var("#{$name}-dark-invert", $light);
 
-    @include register-var($name, lightness($dark), "", "-dark-l");
-    @include register-var($name, lightness($dark), "", "-light-invert-l");
+    @include register-var(
+      $name,
+      color.channel($dark, "lightness", $space: hsl),
+      "",
+      "-dark-l"
+    );
+    @include register-var(
+      $name,
+      color.channel($dark, "lightness", $space: hsl),
+      "",
+      "-light-invert-l"
+    );
     @include register-var("#{$name}-dark", $dark);
     @include register-var("#{$name}-light-invert", $dark);
   } @else {

sass/utilities/functions.scss

@@ -1,20 +1,29 @@
+@use "sass:color";
 @use "sass:list";
+@use "sass:map";
 @use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 
 @function mergeColorMaps($bulma-colors, $custom-colors) {
   // We return at least Bulma's hard-coded colors
   $merged-colors: $bulma-colors;
 
   // We want a map as input
-  @if type-of($custom-colors) == "map" {
+  @if meta.type-of($custom-colors) == "map" {
     @each $name, $components in $custom-colors {
       // The color name should be a string
       // and the components either a single color
       // or a colors list with at least one element
-      @if type-of($name) ==
+      @if meta.type-of($name) ==
         "string" and
-        (type-of($components) == "list" or type-of($components) == "color") and
-        length($components) >=
+        (
+          meta.type-of($components) ==
+            "list" or
+            meta.type-of($components) ==
+            "color"
+        ) and
+        list.length($components) >=
         1
       {
         $color-base: null;
@@ -25,22 +34,22 @@
 
         // The param can either be a single color
         // or a list of 2 colors
-        @if type-of($components) == "color" {
+        @if meta.type-of($components) == "color" {
           $color-base: $components;
           $color-invert: bulmaFindColorInvert($color-base);
           $color-light: bulmaFindLightColor($color-base);
           $color-dark: bulmaFindDarkColor($color-base);
-        } @else if type-of($components) == "list" {
+        } @else if meta.type-of($components) == "list" {
           $color-base: list.nth($components, 1);
 
           // If Invert, Light and Dark are provided
-          @if length($components) > 3 {
+          @if list.length($components) > 3 {
             $color-invert: list.nth($components, 2);
             $color-light: list.nth($components, 3);
             $color-dark: list.nth($components, 4);
 
             // If only Invert and Light are provided
-          } @else if length($components) > 2 {
+          } @else if list.length($components) > 2 {
             $color-invert: list.nth($components, 2);
             $color-light: list.nth($components, 3);
             $color-dark: bulmaFindDarkColor($color-base);
@@ -56,11 +65,11 @@
         $value: $color-base, $color-invert, $color-light, $color-dark;
 
         // We only want to merge the map if the color base is an actual color
-        @if type-of($color-base) == "color" {
+        @if meta.type-of($color-base) == "color" {
           // We merge this colors elements as map with Bulma's colors map
           // (we can override them this way, no multiple definition for the same name)
           // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
-          $merged-colors: map_merge(
+          $merged-colors: map.merge(
             $merged-colors,
             (
               $name: $value,
@@ -91,14 +100,14 @@
 }
 
 @function bulmaColorLuminance($color) {
-  @if type-of($color) != "color" {
+  @if meta.type-of($color) != "color" {
     @return 0.55;
   }
 
   $color-rgb: (
-    "red": red($color),
-    "green": green($color),
-    "blue": blue($color),
+    "red": color.channel($color, "red", $space: rgb),
+    "green": color.channel($color, "green", $space: rgb),
+    "blue": color.channel($color, "blue", $space: rgb),
   );
 
   @each $name, $value in $color-rgb {
@@ -112,7 +121,7 @@
       $value: powerNumber($value, 2);
     }
 
-    $color-rgb: map-merge(
+    $color-rgb: map.merge(
       $color-rgb,
       (
         $name: $value,
@@ -120,8 +129,8 @@
     );
   }
 
-  @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") *
-    0.7152 + map-get($color-rgb, "blue") * 0.0722;
+  @return map.get($color-rgb, "red") * 0.2126 + map.get($color-rgb, "green") *
+    0.7152 + map.get($color-rgb, "blue") * 0.0722;
 }
 
 @function bulmaFindColorInvert($color) {
@@ -133,33 +142,33 @@
 }
 
 @function bulmaFindLightColor($color, $l: 96%) {
-  @if type-of($color) == "color" {
+  @if meta.type-of($color) == "color" {
     $l: 96%;
 
-    @if lightness($color) > 96% {
-      $l: lightness($color);
+    @if color.channel($color, "lightness", $space: hsl) > 96% {
+      $l: color.channel($color, "lightness", $space: hsl);
     }
 
-    @return change-color($color, $lightness: $l);
+    @return color.change($color, $lightness: $l);
   }
 
   @return $background;
 }
 
 @function bulmaFindDarkColor($color, $base-l: 29%) {
-  @if type-of($color) == "color" {
+  @if meta.type-of($color) == "color" {
     $luminance: bulmaColorLuminance($color);
     $luminance-delta: 0.53 - $luminance;
-    $target-l: round($base-l + $luminance-delta * 53);
+    $target-l: math.round($base-l + $luminance-delta * 53);
 
-    @return change-color($color, $lightness: max($base-l, $target-l));
+    @return color.change($color, $lightness: max($base-l, $target-l));
   }
 
   @return $text-strong;
 }
 
 @function bulmaRgba($color, $alpha) {
-  @if type-of($color) != "color" {
+  @if meta.type-of($color) != "color" {
     @return $color;
   }
 
@@ -167,27 +176,37 @@
 }
 
 @function bulmaDarken($color, $amount) {
-  @if type-of($color) != "color" {
+  @if meta.type-of($color) != "color" {
     @return $color;
   }
 
-  @return darken($color, $amount);
+  @return color.adjust($color, $lightness: -$amount, $space: hsl);
 }
 
 @function bulmaLighten($color, $amount) {
-  @if type-of($color) != "color" {
+  @if meta.type-of($color) != "color" {
     @return $color;
   }
 
-  @return lighten($color, $amount);
+  @return color.adjust($color, $lightness: $amount, $space: hsl);
 }
 
 @function bulmaColorBrightness($n) {
-  $color-brightness: round(
-   math.div((red($n) * 299) + (green($n) * 587) + (blue($n) * 114), 1000)
+  $color-brightness: math.round(
+    math.div(
+      (color.channel($n, "red", $space: rgb) * 299) +
+        (color.channel($n, "green", $space: rgb) * 587) +
+        (color.channel($n, "blue", $space: rgb) * 114),
+      1000
+    )
   );
-  $light-color: round(
-    math.div((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114), 1000)
+  $light-color: math.round(
+    math.div(
+      (color.channel(#ffffff, "red", $space: rgb) * 299) +
+        (color.channel(#ffffff, "green", $space: rgb) * 587) +
+        (color.channel(#ffffff, "blue", $space: rgb) * 114),
+      1000
+    )
   );
 
   @if abs($color-brightness) < math.div($light-color, 2) {
@@ -198,12 +217,42 @@
 }
 
 @function bulmaEnoughContrast($foreground, $background) {
-  $r: (max(red($foreground), red($background))) -
-    (min(red($foreground), red($background)));
-  $g: (max(green($foreground), green($background))) -
-    (min(green($foreground), green($background)));
-  $b: (max(blue($foreground), blue($background))) -
-    (min(blue($foreground), blue($background)));
+  $r: (
+      max(
+        color.channel($foreground, "red", $space: rgb),
+        color.channel($background, "red", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "red", $space: rgb),
+        color.channel($background, "red", $space: rgb)
+      )
+    );
+  $g: (
+      max(
+        color.channel($foreground, "green", $space: rgb),
+        color.channel($background, "green", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "green", $space: rgb),
+        color.channel($background, "green", $space: rgb)
+      )
+    );
+  $b: (
+      max(
+        color.channel($foreground, "blue", $space: rgb),
+        color.channel($background, "blue", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "blue", $space: rgb),
+        color.channel($background, "blue", $space: rgb)
+      )
+    );
   $sum-rgb: $r + $g + $b;
 
   @if $sum-rgb < 500 {
@@ -215,15 +264,15 @@
 
 // By Cory Simmons https://corysimmons.com/
 @function bulmaStringToNumber($value) {
-  @if type-of($value) == "number" {
+  @if meta.type-of($value) == "number" {
     @return $value;
-  } @else if type-of($value) != "string" {
+  } @else if meta.type-of($value) != "string" {
     $_: log("Value for `to-number` should be a number or a string.");
   }
 
   $result: 0;
   $digits: 0;
-  $minus: str-slice($value, 1, 1) == "-";
+  $minus: string.slice($value, 1, 1) == "-";
   $numbers: (
     "0": 0,
     "1": 1,
@@ -237,20 +286,23 @@
     "9": 9,
   );
 
-  @for $i from if($minus, 2, 1) through str-length($value) {
-    $character: str-slice($value, $i, $i);
+  @for $i from if($minus, 2, 1) through string.length($value) {
+    $character: string.slice($value, $i, $i);
 
-    @if not(index(map-keys($numbers), $character) or $character == ".") {
-      @return to-length(if($minus, -$result, $result), str-slice($value, $i));
+    @if not(list.index(map.keys($numbers), $character) or $character == ".") {
+      @return to-length(
+        if($minus, -$result, $result),
+        string.slice($value, $i)
+      );
     }
 
     @if $character == "." {
       $digits: 1;
     } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);
+      $result: $result * 10 + map.get($numbers, $character);
     } @else {
       $digits: $digits * 10;
-      $result: $result + map-get($numbers, $character) / $digits;
+      $result: $result + map.get($numbers, $character) / $digits;
     }
   }
 

sass/utilities/mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @use "initial-variables" as iv;
 @use "css-variables" as cv;
 
@@ -360,11 +362,11 @@
 }
 
 @mixin breakpoint($name) {
-  $breakpoint: map-get(iv.$breakpoints, $name);
+  $breakpoint: map.get(iv.$breakpoints, $name);
 
   @if $breakpoint {
-    $from: map-get($breakpoint, "from");
-    $until: map-get($breakpoint, "until");
+    $from: map.get($breakpoint, "from");
+    $until: map.get($breakpoint, "until");
 
     @if $from and $until {
       @include between($from, $until) {

versions/bulma-no-dark-mode.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
 @forward "../sass/utilities";
 @forward "../sass/base";
 @forward "../sass/elements";

versions/bulma-no-helpers-prefixed.scss

@@ -1,9 +1,10 @@
 @charset "utf-8";
 
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
 @use "../sass/utilities" with (
   $class-prefix: "bulma-"
 );
+@forward "../sass/themes";
 @forward "../sass/base";
 @forward "../sass/elements";
 @forward "../sass/form";

versions/bulma-no-helpers.scss

@@ -1,7 +1,8 @@
 @charset "utf-8";
 
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
 @forward "../sass/utilities";
+@forward "../sass/themes";
 @forward "../sass/base";
 @forward "../sass/elements";
 @forward "../sass/form";

versions/bulma-prefixed.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
 @use "../sass" with (
   $class-prefix: "bulma-"
 );