Update light and dark

Update navbar
Update menu and message
2024-10-18 13:45:12 +01:00 · 2024-09-19 02:02:36 +01:00 · 2024-09-18 23:53:25 +01:00 · 2024-09-18 17:48:30 +01:00
97 changed files with 22713 additions and 30121 deletions
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.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 `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) -->
+<!-- 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) -->
 <!-- 3. Make sure your PR only affects `.sass` or documentation files -->
-<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#try-your-changes). -->
+<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#try-your-changes). -->

 <!-- How have you confirmed this feature works? -->
 <!-- Please explain more than "Yes". -->
--- a/.gitignore
+++ b/.gitignore
@ -6,7 +6,6 @@ npm-debug.log
 test.css
 test.css.map
 test.html
-test*.html
 test.sass
 test.scss
 test.css
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,16 +5,11 @@
 ### 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

--- a/README.md
+++ b/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/main/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/master/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<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>
+<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>

 ## 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/main/LICENSE).
+Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).

 [npm-link]: https://www.npmjs.com/package/bulma
 [awesome-link]: https://github.com/awesome-css-group/awesome-css
--- a/bower.json
+++ b/bower.json
@ -1,6 +1,6 @@
 {
  "name": "bulma",
-  "version": "1.0.3",
+  "version": "1.0.2",
  "homepage": "https://bulma.io",
  "authors": ["jgthms <bbxdesign@gmail.com>"],
  "description": "Modern CSS framework based on Flexbox",
--- a/bulma.scss
+++ b/bulma.scss
@ -1,4 +1,4 @@
@charset "utf-8";

-/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
@use "sass";
--- a/css/bulma.css
+++ b/css/bulma.css
@ -1,5 +1,5 @@
@charset "UTF-8";
-/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.2 | 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: 8.772, 9.6764, 11.628;
+  --bulma-black-rgb: 9, 10, 12;
  --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.372, 244.2764, 246.228;
+  --bulma-light-rgb: 243, 244, 246;
  --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.053, 50.8011, 61.047;
+  --bulma-dark-rgb: 46, 51, 61;
  --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: 63.597, 70.1539, 84.303;
+  --bulma-text-rgb: 64, 70, 84;
  --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.1, 177.735;
+  --bulma-primary-rgb: 0, 209, 178;
  --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.3, 88.315, 255;
+  --bulma-link-rgb: 66, 88, 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-95-l);
+  --bulma-link-45-invert-l: var(--bulma-link-100-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-45-l);
+  --bulma-link-95-invert-l: var(--bulma-link-40-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.1, 255;
+  --bulma-info-rgb: 102, 209, 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: 71.6295, 198.6705, 141.50205;
+  --bulma-success-rgb: 72, 199, 142;
  --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-95-l);
+  --bulma-success-20-invert-l: var(--bulma-success-90-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-15-l);
+  --bulma-success-90-invert-l: var(--bulma-success-20-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-15-l);
+  --bulma-success-light-invert-l: var(--bulma-success-20-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.09, 15.3;
+  --bulma-warning-rgb: 255, 183, 15;
  --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, 132.6;
+  --bulma-danger-rgb: 255, 102, 133;
  --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: 8.772, 9.6764, 11.628;
+    --bulma-black-rgb: 9, 10, 12;
    --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.372, 244.2764, 246.228;
+    --bulma-light-rgb: 243, 244, 246;
    --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.053, 50.8011, 61.047;
+    --bulma-dark-rgb: 46, 51, 61;
    --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: 63.597, 70.1539, 84.303;
+    --bulma-text-rgb: 64, 70, 84;
    --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.1, 177.735;
+    --bulma-primary-rgb: 0, 209, 178;
    --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.3, 88.315, 255;
+    --bulma-link-rgb: 66, 88, 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-95-l);
+    --bulma-link-45-invert-l: var(--bulma-link-100-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-45-l);
+    --bulma-link-95-invert-l: var(--bulma-link-40-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.1, 255;
+    --bulma-info-rgb: 102, 209, 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: 71.6295, 198.6705, 141.50205;
+    --bulma-success-rgb: 72, 199, 142;
    --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-95-l);
+    --bulma-success-20-invert-l: var(--bulma-success-90-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-15-l);
+    --bulma-success-90-invert-l: var(--bulma-success-20-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-15-l);
+    --bulma-success-light-invert-l: var(--bulma-success-20-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.09, 15.3;
+    --bulma-warning-rgb: 255, 183, 15;
    --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, 132.6;
+    --bulma-danger-rgb: 255, 102, 133;
    --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: -51%;
+    --bulma-black-on-scheme-l: 0%;
    --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: 8.772, 9.6764, 11.628;
+  --bulma-black-rgb: 9, 10, 12;
  --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.372, 244.2764, 246.228;
+  --bulma-light-rgb: 243, 244, 246;
  --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.053, 50.8011, 61.047;
+  --bulma-dark-rgb: 46, 51, 61;
  --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: 63.597, 70.1539, 84.303;
+  --bulma-text-rgb: 64, 70, 84;
  --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.1, 177.735;
+  --bulma-primary-rgb: 0, 209, 178;
  --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.3, 88.315, 255;
+  --bulma-link-rgb: 66, 88, 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-95-l);
+  --bulma-link-45-invert-l: var(--bulma-link-100-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-45-l);
+  --bulma-link-95-invert-l: var(--bulma-link-40-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.1, 255;
+  --bulma-info-rgb: 102, 209, 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: 71.6295, 198.6705, 141.50205;
+  --bulma-success-rgb: 72, 199, 142;
  --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-95-l);
+  --bulma-success-20-invert-l: var(--bulma-success-90-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-15-l);
+  --bulma-success-90-invert-l: var(--bulma-success-20-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-15-l);
+  --bulma-success-light-invert-l: var(--bulma-success-20-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.09, 15.3;
+  --bulma-warning-rgb: 255, 183, 15;
  --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, 132.6;
+  --bulma-danger-rgb: 255, 102, 133;
  --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: -51%;
+  --bulma-black-on-scheme-l: 0%;
  --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,10 +3784,6 @@ 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));
@ -5445,7 +5441,6 @@ 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);
@ -5472,7 +5467,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: var(--bulma-input-border-color);
+  border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
  border-radius: var(--bulma-input-radius);
  color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l));
 }
@ -13159,9 +13154,6 @@ 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 {
--- a/css/bulma.css.map
+++ b/css/bulma.css.map
--- a/css/bulma.min.css
+++ b/css/bulma.min.css
--- a/css/versions/bulma-no-dark-mode.css
+++ b/css/versions/bulma-no-dark-mode.css
@ -1,5 +1,5 @@
@charset "UTF-8";
-/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
 /* Bulma Utilities */
 :root {
  --bulma-control-radius: var(--bulma-radius);
@ -981,10 +981,6 @@ 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));
@ -2642,7 +2638,6 @@ 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);
@ -2669,7 +2664,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: var(--bulma-input-border-color);
+  border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
  border-radius: var(--bulma-input-radius);
  color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l));
 }
@ -10356,9 +10351,6 @@ 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 {
@ -18829,7 +18821,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: 8.772, 9.6764, 11.628;
+  --bulma-black-rgb: 9, 10, 12;
  --bulma-black-h: 221deg;
  --bulma-black-s: 14%;
  --bulma-black-l: 4%;
@ -18839,7 +18831,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.372, 244.2764, 246.228;
+  --bulma-light-rgb: 243, 244, 246;
  --bulma-light-h: 221deg;
  --bulma-light-s: 14%;
  --bulma-light-l: 96%;
@ -18849,7 +18841,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.053, 50.8011, 61.047;
+  --bulma-dark-rgb: 46, 51, 61;
  --bulma-dark-h: 221deg;
  --bulma-dark-s: 14%;
  --bulma-dark-l: 21%;
@ -18859,7 +18851,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: 63.597, 70.1539, 84.303;
+  --bulma-text-rgb: 64, 70, 84;
  --bulma-text-h: 221deg;
  --bulma-text-s: 14%;
  --bulma-text-l: 29%;
@ -18965,7 +18957,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.1, 177.735;
+  --bulma-primary-rgb: 0, 209, 178;
  --bulma-primary-h: 171deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 41%;
@ -19071,7 +19063,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.3, 88.315, 255;
+  --bulma-link-rgb: 66, 88, 255;
  --bulma-link-h: 233deg;
  --bulma-link-s: 100%;
  --bulma-link-l: 63%;
@ -19124,7 +19116,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-95-l);
+  --bulma-link-45-invert-l: var(--bulma-link-100-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);
@ -19154,7 +19146,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-45-l);
+  --bulma-link-95-invert-l: var(--bulma-link-40-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);
@ -19177,7 +19169,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.1, 255;
+  --bulma-info-rgb: 102, 209, 255;
  --bulma-info-h: 198deg;
  --bulma-info-s: 100%;
  --bulma-info-l: 70%;
@ -19283,7 +19275,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: 71.6295, 198.6705, 141.50205;
+  --bulma-success-rgb: 72, 199, 142;
  --bulma-success-h: 153deg;
  --bulma-success-s: 53%;
  --bulma-success-l: 53%;
@ -19321,7 +19313,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-95-l);
+  --bulma-success-20-invert-l: var(--bulma-success-90-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);
@ -19363,7 +19355,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-15-l);
+  --bulma-success-90-invert-l: var(--bulma-success-20-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);
@ -19375,7 +19367,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-15-l);
+  --bulma-success-light-invert-l: var(--bulma-success-20-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);
@ -19389,7 +19381,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.09, 15.3;
+  --bulma-warning-rgb: 255, 183, 15;
  --bulma-warning-h: 42deg;
  --bulma-warning-s: 100%;
  --bulma-warning-l: 53%;
@ -19495,7 +19487,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, 132.6;
+  --bulma-danger-rgb: 255, 102, 133;
  --bulma-danger-h: 348deg;
  --bulma-danger-s: 100%;
  --bulma-danger-l: 70%;
--- a/css/versions/bulma-no-dark-mode.css.map
+++ b/css/versions/bulma-no-dark-mode.css.map
--- a/css/versions/bulma-no-dark-mode.min.css
+++ b/css/versions/bulma-no-dark-mode.min.css
--- a/css/versions/bulma-no-helpers-prefixed.css
+++ b/css/versions/bulma-no-helpers-prefixed.css
--- a/css/versions/bulma-no-helpers-prefixed.css.map
+++ b/css/versions/bulma-no-helpers-prefixed.css.map
--- a/css/versions/bulma-no-helpers-prefixed.min.css
+++ b/css/versions/bulma-no-helpers-prefixed.min.css
--- a/css/versions/bulma-no-helpers.css
+++ b/css/versions/bulma-no-helpers.css
--- a/css/versions/bulma-no-helpers.css.map
+++ b/css/versions/bulma-no-helpers.css.map
--- a/css/versions/bulma-no-helpers.min.css
+++ b/css/versions/bulma-no-helpers.min.css
--- a/css/versions/bulma-prefixed.css
+++ b/css/versions/bulma-prefixed.css
--- a/css/versions/bulma-prefixed.min.css
+++ b/css/versions/bulma-prefixed.min.css
--- a/css/versions/bulma-prefixed.min.css.map
+++ b/css/versions/bulma-prefixed.min.css.map
--- a/css/versions/bulma-prefixed.min.min.css
+++ b/css/versions/bulma-prefixed.min.min.css
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@ -757,7 +757,7 @@
      "path": "/documentation/helpers/other-helpers/"
    }
  },
-  "navbar": ["docs", "expo", "love", "sponsor"],
+  "navbar": ["docs", "expo", "love", "sponsor", "shop"],
  "navbar_icons": ["github", "twitter"],
  "navbar_more": ["made-with-bulma", "backers", "brand", "extensions"],
  "category_ids": [
--- a/docs/_data/love.json
+++ b/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": "gebsystems",
-      "username": "gebsystems",
-      "avatar": "https://pbs.twimg.com/profile_images/1713156593137639424/Wwz0i_rj_400x400.jpg",
+      "fullname": "db4you",
+      "username": "db4you2",
+      "avatar": "https://pbs.twimg.com/profile_images/1283183292683038727/wVhp9AQr_normal.jpg",
      "hearts": 22,
      "retweets": 4
    },
--- a/docs/_includes/docs/components/logos-item.html
+++ b/docs/_includes/docs/components/logos-item.html
@ -1,7 +1,7 @@
 <div
  {% if include.unsplash %}
    class="bd-logos-item"
-    style="background-image: url(/assets/images/unsplash/{{ include.unsplash }}.jpg)"
+    style="background-image: url(https://source.unsplash.com/{{ include.unsplash }}/480x480)"
  {% else %}
    class="bd-logos-item is-transparent"
  {% endif %}
--- a/docs/_includes/docs/elements/tw.html
+++ b/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://x.com/intent/tweet?in_reply_to={{ tweet.id }}">
+      <a class="bd-tw-action-link" href="https://twitter.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://x.com/intent/retweet?tweet_id={{ tweet.id }}">
+      <a class="bd-tw-action-link" href="https://twitter.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://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">
+      <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">
        <div class="bd-tw-icon"></div>
        {% if tweet.hearts != 0 %}
          <span class="bd-tw-action-stat">
--- a/docs/_includes/website/banner.html
+++ b/docs/_includes/website/banner.html
@ -1,13 +0,0 @@
-<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>
--- a/docs/_includes/website/carbon.html
+++ b/docs/_includes/website/carbon.html
@ -1,8 +1,5 @@
 <div id="carboncontainer" class="bd-carbon">
  <div id="carbon">
-    <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>
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js"></script>
  </div>
 </div>
--- a/docs/_includes/website/masterclass.html
+++ b/docs/_includes/website/masterclass.html
@ -1,43 +0,0 @@
-<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>
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -4,8 +4,6 @@
    {% include global/head.html %}
  </head>
  <body>
-    {% include website/banner.html %}
-
    {{ content }}

    {% if page.modals %}
@ -32,6 +30,5 @@
    </script>
    <script src="{{ site.url }}/assets/javascript/main.js"></script>
    {% include global/customizer.html %}
-    {% include website/masterclass.html %}
  </body>
 </html>
--- a/docs/_sass/docs/examples.scss
+++ b/docs/_sass/docs/examples.scss
@ -28,7 +28,7 @@
 }

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

 .bulma-center-mixin-parent {
-  background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
+  background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320);
  background-size: cover;
  border-radius: 0.5em;
  position: relative;
--- a/docs/_sass/docs/hero.scss
+++ b/docs/_sass/docs/hero.scss
@ -37,7 +37,7 @@
  }
 }

-@media screen and (min-width: 1400px) {
+@media screen and (min-width: 1000px) {
  .bd-hero.is-docs {
    flex-wrap: nowrap;

@ -47,6 +47,12 @@
  }
 }

+@media screen and (min-width: 1200px) {
+  .bd-hero.is-docs {
+    flex-wrap: nowrap;
+  }
+}
+
 .bd-hero-title {
  color: hsl(
    cv.getVar("text-h"),
@ -93,10 +99,6 @@
 }

 .bd-carbon {
-  aspect-ratio: 40 / 26;
-  max-height: 280px !important;
-  max-width: 400px !important;
-
  &,
  & > div {
    align-items: center;
@ -105,6 +107,7 @@
  }

  > div {
-    aspect-ratio: 40 / 26;
+    height: 280px !important;
+    width: 400px !important;
  }
 }
--- a/docs/_sass/home/bubble.scss
+++ b/docs/_sass/home/bubble.scss
@ -1,4 +1,3 @@
-@use "sass:list";
@use "sass/utilities/css-variables" as cv;
@use "../utils";

@ -129,8 +128,8 @@
 $bubble-order: ("axbom", "jesseschoff", "ale_codes", "MyTopSecretName");
 $delay-factor: 0.3s;

-@for $index from 1 through list.length($bubble-order) {
-  $name: list.nth($bubble-order, $index);
+@for $index from 1 through length($bubble-order) {
+  $name: nth($bubble-order, $index);

  .js-bubble-#{$name} {
    .bd-bubble-content {
--- a/docs/_sass/home/custom.scss
+++ b/docs/_sass/home/custom.scss
@ -1,4 +1,3 @@
-@use "sass:color";
@use "sass/utilities/mixins" as mx;
@use "sass/themes/light";

@ -73,11 +72,11 @@ $sass: #bf4080;
      color: light.$scheme-main;

      &:hover {
-        background-color: color.adjust($mauve, $lightness: -2.5%);
+        background-color: darken($mauve, 2.5%);
      }

      &:active {
-        background-color: color.adjust($mauve, $lightness: -5%);
+        background-color: darken($mauve, 5%);
      }
    }

@ -86,11 +85,11 @@ $sass: #bf4080;
      color: light.$scheme-main;

      &:hover {
-        background-color: color.adjust($pink, $lightness: -2.5%);
+        background-color: darken($pink, 2.5%);
      }

      &:active {
-        background-color: color.adjust($pink, $lightness: -5%);
+        background-color: darken($pink, 5%);
      }
    }
  }
--- a/docs/assets/css/website.css
+++ b/docs/assets/css/website.css
--- a/docs/assets/css/website.min.css
+++ b/docs/assets/css/website.min.css
--- a/docs/assets/images/amis/lambdatest-logo.png
+++ b/docs/assets/images/amis/lambdatest-logo.png
--- a/docs/assets/images/coding-background.jpg
+++ b/docs/assets/images/coding-background.jpg
--- a/docs/assets/images/masterclass/code-desktop.png
+++ b/docs/assets/images/masterclass/code-desktop.png
--- a/docs/assets/images/masterclass/code-mobile.png
+++ b/docs/assets/images/masterclass/code-mobile.png
--- a/docs/assets/images/masterclass/logo-desktop.png
+++ b/docs/assets/images/masterclass/logo-desktop.png
--- a/docs/assets/images/masterclass/logo-mobile.png
+++ b/docs/assets/images/masterclass/logo-mobile.png
--- a/docs/assets/images/masterclass/masterclass-carbon.png
+++ b/docs/assets/images/masterclass/masterclass-carbon.png
--- a/docs/assets/images/masterclass/text-desktop.png
+++ b/docs/assets/images/masterclass/text-desktop.png
--- a/docs/assets/images/masterclass/text-mobile.png
+++ b/docs/assets/images/masterclass/text-mobile.png
--- a/docs/assets/images/unsplash/4TKFpJPnyU8.jpg
+++ b/docs/assets/images/unsplash/4TKFpJPnyU8.jpg
--- a/docs/assets/images/unsplash/8tA3ZSY9Iic.jpg
+++ b/docs/assets/images/unsplash/8tA3ZSY9Iic.jpg
--- a/docs/assets/images/unsplash/9-OCsKoyQlk.jpg
+++ b/docs/assets/images/unsplash/9-OCsKoyQlk.jpg
--- a/docs/assets/images/unsplash/KjWMGF0PYuE.jpg
+++ b/docs/assets/images/unsplash/KjWMGF0PYuE.jpg
--- a/docs/assets/images/unsplash/La2kOu2dmH4.jpg
+++ b/docs/assets/images/unsplash/La2kOu2dmH4.jpg
--- a/docs/assets/images/unsplash/RMypptC8-B0.jpg
+++ b/docs/assets/images/unsplash/RMypptC8-B0.jpg
--- a/docs/assets/images/unsplash/fxvpCFZgTe4.jpg
+++ b/docs/assets/images/unsplash/fxvpCFZgTe4.jpg
--- a/docs/assets/images/unsplash/hgGplX3PFBg.jpg
+++ b/docs/assets/images/unsplash/hgGplX3PFBg.jpg
--- a/docs/assets/images/unsplash/iFgRcqHznqg.jpg
+++ b/docs/assets/images/unsplash/iFgRcqHznqg.jpg
--- a/docs/assets/images/unsplash/jTSf1xnsoCs.jpg
+++ b/docs/assets/images/unsplash/jTSf1xnsoCs.jpg
--- a/docs/assets/images/unsplash/mEZ3PoFGs_k.jpg
+++ b/docs/assets/images/unsplash/mEZ3PoFGs_k.jpg
--- a/docs/assets/images/unsplash/qsnfSvCdec4.jpg
+++ b/docs/assets/images/unsplash/qsnfSvCdec4.jpg
--- a/docs/assets/javascript/main.js
+++ b/docs/assets/javascript/main.js
@ -108,18 +108,10 @@ 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");
  }

@ -424,38 +416,4 @@ 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();
-  });
 });
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@ -915,8 +915,7 @@ 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>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>
+  <p>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 %}
--- a/docs/documentation/sass/mixins.html
+++ b/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="/assets/images/unsplash/mEZ3PoFGs_k.jpg">
+  <img class="bulma-center-mixin" height="96" width="96" src="https://source.unsplash.com/mEZ3PoFGs_k/192x192">
 </div>
 {% endcapture %}

@ -267,7 +267,7 @@ breadcrumb:

 {% capture clearfix %}
 <div class="bulma-clearfix-mixin">
-  <img height="80" width="80" style="float: left;" src="/assets/images/unsplash/La2kOu2dmH4.jpg">
+  <img height="80" width="80" style="float: left;" src="https://source.unsplash.com/La2kOu2dmH4/160x160">
  <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="/assets/images/unsplash/iFgRcqHznqg.jpg">
+  <img class="bulma-ltr-position-mixin" height="48" width="48" src="https://source.unsplash.com/iFgRcqHznqg/96x96">
  <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="/assets/images/unsplash/jTSf1xnsoCs.jpg">
+  <img class="bulma-ltr-property-mixin" height="96" width="96" src="https://source.unsplash.com/jTSf1xnsoCs/192x192">
 </div>
 {% endcapture %}

--- a/docs/documentation/start/modular.html
+++ b/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 components
+// Load the button and title elements and compnents
@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>
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@ -9,353 +9,65 @@
      "version": "1.0.1",
      "license": "MIT",
      "devDependencies": {
-        "@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"
+        "@shopify/prettier-plugin-liquid": "^1.5.0",
+        "prettier": "^3.3.3",
+        "sass": "^1.77.8"
      }
    },
    "node_modules/@shopify/liquid-html-parser": {
-      "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==",
+      "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==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "line-column": "^1.0.2",
        "ohm-js": "^16.3.0"
      }
    },
    "node_modules/@shopify/prettier-plugin-liquid": {
-      "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==",
+      "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==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@shopify/liquid-html-parser": "^2.1.1",
+        "@shopify/liquid-html-parser": "^2.0.3",
        "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"
      },
@ -364,33 +76,27 @@
      }
    },
    "node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "readdirp": "^4.0.1"
+        "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"
      },
      "engines": {
-        "node": ">= 14.16.0"
+        "node": ">= 8.10.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"
      },
-      "engines": {
-        "node": ">=0.10"
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
      }
    },
    "node_modules/fill-range": {
@ -398,8 +104,6 @@
      "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"
      },
@ -407,6 +111,32 @@
        "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",
@ -414,19 +144,28 @@
      "dev": true
    },
    "node_modules/immutable": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
-      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+      "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==",
      "dev": true,
-      "license": "MIT"
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
    },
    "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"
      }
@ -436,8 +175,6 @@
      "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"
      },
@ -450,8 +187,6 @@
      "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"
      }
@ -460,15 +195,13 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
    },
    "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"
      },
@ -481,41 +214,25 @@
      "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/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+    "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==",
      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
      "engines": {
-        "node": ">=8.6"
+        "node": ">=0.10.0"
      }
    },
-    "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"
      }
@ -525,8 +242,6 @@
      "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"
      },
@ -535,9 +250,9 @@
      }
    },
    "node_modules/prettier": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz",
-      "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
      "dev": true,
      "license": "MIT",
      "bin": {
@ -551,28 +266,26 @@
      }
    },
    "node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.16.0"
+      "dependencies": {
+        "picomatch": "^2.2.1"
      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
+      "engines": {
+        "node": ">=8.10.0"
      }
    },
    "node_modules/sass": {
-      "version": "1.81.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.0.tgz",
-      "integrity": "sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA==",
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
        "source-map-js": ">=0.6.2 <2.0.0"
      },
      "bin": {
@ -580,9 +293,6 @@
      },
      "engines": {
        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
      }
    },
    "node_modules/source-map-js": {
@ -599,8 +309,6 @@
      "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"
      },
--- a/docs/package.json
+++ b/docs/package.json
@ -12,8 +12,8 @@
    "start": "npm run website-sass -- --watch"
  },
  "devDependencies": {
-    "@shopify/prettier-plugin-liquid": "^1.6.1",
-    "prettier": "^3.4.1",
-    "sass": "^1.81.0"
+    "@shopify/prettier-plugin-liquid": "^1.5.0",
+    "prettier": "^3.3.3",
+    "sass": "^1.77.8"
  }
 }
--- a/docs/website.scss
+++ b/docs/website.scss
@ -499,383 +499,3 @@ $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;
-  }
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "bulma",
-  "version": "1.0.3",
+  "version": "1.0.2",
  "homepage": "https://bulma.io",
  "author": {
    "name": "Jeremy Thomas",
@ -29,11 +29,11 @@
    "url": "https://github.com/jgthms/bulma/issues"
  },
  "devDependencies": {
-    "cssnano": "^7.0.6",
+    "cssnano": "^7.0.4",
    "postcss-cli": "^11.0.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.3.3",
    "rimraf": "^6.0.1",
-    "sass": "^1.83.0"
+    "sass": "^1.77.8"
  },
  "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.css",
+    "version-prefixed": "sass --style=expanded --source-map versions/bulma-prefixed.scss css/versions/bulma-prefixed.min.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",
--- a/sass/components/dropdown.scss
+++ b/sass/components/dropdown.scss
@ -13,21 +13,30 @@ $dropdown-content-radius: cv.getVar("radius") !default;
 $dropdown-content-shadow: cv.getVar("shadow") !default;
 $dropdown-content-z: 20 !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-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-divider-background-color: cv.getVar("border-weak") !default;

@ -43,19 +52,6 @@ $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},
    )
  );
@ -110,11 +106,12 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
 }

 .#{iv.$class-prefix}dropdown-item {
-  color: hsl(
-    #{cv.getVar("dropdown-item-h")},
-    #{cv.getVar("dropdown-item-s")},
-    #{cv.getVar("dropdown-item-color-l")}
+  @include cv.register-vars(
+    (
+      "dropdown-item-color": #{$dropdown-item-color},
+    )
  );
+  color: cv.getVar("dropdown-item-color");
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
@ -123,59 +120,47 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;

 a.#{iv.$class-prefix}dropdown-item,
 button.#{iv.$class-prefix}dropdown-item {
-  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"
-        )}
+  @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: cv.getVar("dropdown-item-background-color");
  padding-inline-end: 3rem;
  text-align: inherit;
  white-space: nowrap;
  width: 100%;

  &:hover {
-    @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"
-          )},
-      )
-    );
+    background-color: cv.getVar("dropdown-item-hover-background-color");
  }

  &:active {
-    @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"
-          )},
-      )
-    );
+    background-color: cv.getVar("dropdown-item-active-background-color");
  }

  &.#{iv.$class-prefix}is-active,
  &.#{iv.$class-prefix}is-selected {
-    @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")},
-      )
-    );
+    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"
+      );
+    }
  }
 }

--- a/sass/components/menu.scss
+++ b/sass/components/menu.scss
@ -3,20 +3,33 @@
@use "../utilities/extends";
@use "../utilities/mixins" as mx;

-$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-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-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;
@ -32,20 +45,17 @@ $menu-label-spacing: 1em !default;
 .#{iv.$class-prefix}menu {
  @include cv.register-vars(
    (
-      "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-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-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},
@ -83,60 +93,41 @@ $menu-label-spacing: 1em !default;
  button,
  .#{iv.$class-prefix}menu-item {
    @extend %reset;
-    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"
-          )}
-      )
-    );
+    background-color: cv.getVar("menu-item-background-color");
    border-radius: cv.getVar("menu-item-radius");
-    color: hsl(
-      #{cv.getVar("menu-item-h")},
-      #{cv.getVar("menu-item-s")},
-      #{cv.getVar("menu-item-color-l")}
-    );
+    color: cv.getVar("menu-item-color");
    display: block;
    padding: cv.getVar("menu-list-link-padding");
    text-align: left;
    width: 100%;

    &:hover {
-      @include cv.register-vars(
-        (
-          "menu-item-background-l-delta": #{cv.getVar(
-              "menu-item-hover-background-l-delta"
-            )},
-        )
-      );
+      background-color: cv.getVar("menu-item-hover-background-color");
+      color: cv.getVar("menu-item-hover-color");
    }

    &:active {
-      @include cv.register-vars(
-        (
-          "menu-item-background-l-delta": #{cv.getVar(
-              "menu-item-active-background-l-delta"
-            )},
-        )
-      );
+      background-color: cv.getVar("menu-item-active-background-color");
+      color: cv.getVar("menu-item-active-color");
    }

    // Modifiers
    &.#{iv.$class-prefix}is-active,
    &.#{iv.$class-prefix}is-selected {
-      @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")},
-        )
-      );
+      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"
+        );
+      }
    }
  }

--- a/sass/components/message.scss
+++ b/sass/components/message.scss
@ -4,26 +4,24 @@
@use "../utilities/extends";
@use "../utilities/mixins" as mx;

-$message-h: cv.getVar("scheme-h");
-$message-s: cv.getVar("scheme-s");
+$message-background-color: cv.getVar("background");
 $message-background-l: cv.getVar("background-l");
-$message-border-l: cv.getVar("border-l");
-$message-border-l-delta: -20% !default;
+$message-color: cv.getVar("text") !default;
+$message-border-color: cv.getVar("border");
 $message-border-style: solid;
 $message-border-width: 0.25em;
-$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-background-color: cv.getVar("text");
+$message-header-color: cv.getVar("text-invert");
+$message-radius: cv.getVar("radius-large") !default;

 $message-header-weight: cv.getVar("weight-semibold") !default;
 $message-header-padding: 1em 1.25em !default;
-$message-header-radius: cv.getVar("radius") !default;
+$message-header-radius: cv.getVar("radius-large") !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-small") !default;
+$message-body-radius: cv.getVar("radius-medium") !default;

 $message-body-pre-code-background-color: transparent !default;

@ -33,7 +31,10 @@ $message-colors: dv.$colors !default;
 .#{iv.$class-prefix}message {
  @include cv.register-vars(
    (
-      "message-border-l-delta": #{$message-border-l-delta},
+      "message-background-color": #{$message-background-color},
+      "message-background-l": #{$message-background-l},
+      "message-color": #{$message-color},
+      "message-border-color": #{$message-border-color},
      "message-radius": #{$message-radius},
      "message-header-weight": #{$message-header-weight},
      "message-header-padding": #{$message-header-padding},
@ -44,15 +45,10 @@ $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-color-l": #{$message-color-l},
-      "message-header-background-l": #{$message-header-background-l},
-      "message-header-color-l": #{$message-header-color-l},
+      "message-header-background-color": #{$message-header-background-color},
+      "message-header-color": #{$message-header-color},
    )
  );
 }
@ -60,11 +56,7 @@ $message-colors: dv.$colors !default;
 .#{iv.$class-prefix}message {
  @extend %block;
  border-radius: cv.getVar("message-radius");
-  color: hsl(
-    #{cv.getVar("message-h")},
-    #{cv.getVar("message-s")},
-    #{cv.getVar("message-color-l")}
-  );
+  color: cv.getVar("message-color");
  font-size: cv.getVar("size-normal");

  strong {
@ -96,17 +88,11 @@ $message-colors: dv.$colors !default;
    &.#{iv.$class-prefix}is-#{$name} {
      @include cv.register-vars(
        (
-          "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")},
+          "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")},
        )
      );
    }
@ -115,18 +101,10 @@ $message-colors: dv.$colors !default;

 .#{iv.$class-prefix}message-header {
  align-items: center;
-  background-color: hsl(
-    #{cv.getVar("message-h")},
-    #{cv.getVar("message-s")},
-    #{cv.getVar("message-header-background-l")}
-  );
+  background-color: cv.getVar("message-header-background-color");
  border-start-start-radius: cv.getVar("message-header-radius");
  border-start-end-radius: cv.getVar("message-header-radius");
-  color: hsl(
-    #{cv.getVar("message-h")},
-    #{cv.getVar("message-s")},
-    #{cv.getVar("message-header-color-l")}
-  );
+  color: cv.getVar("message-header-color");
  display: flex;
  font-weight: cv.getVar("message-header-weight");
  justify-content: space-between;
@ -144,37 +122,30 @@ $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(
-    #{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")}
+    from #{cv.getVar("message-background-color")} h s #{cv.getVar(
+        "message-background-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-radius: cv.getVar("message-body-radius");
+  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;
  padding: cv.getVar("message-body-padding");

  code,
  pre {
-    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")}
-    );
+    background-color: cv.getVar("message-header-color");
+    color: cv.getVar("message-header-background-color");
  }

  pre code {
--- a/sass/components/navbar.scss
+++ b/sass/components/navbar.scss
@ -4,9 +4,6 @@
@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;
@ -16,34 +13,34 @@ $navbar-padding-horizontal: 2rem !default;
 $navbar-z: 30 !default;
 $navbar-fixed-z: 30 !default;

-$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"
+$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"
+        )})
 ) !default;
-$navbar-item-active-background-l-delta: cv.getVar(
-  "active-background-l-delta"
+$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"
+        )})
 ) !default;
-$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")}
+$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"
+        )})
 ) !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;
@ -55,12 +52,7 @@ $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-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-color: cv.getVar("border") !default;
 $navbar-dropdown-border-style: solid !default;
 $navbar-dropdown-border-width: 0.125em !default;
 $navbar-dropdown-offset: -0.25em !default;
@ -68,6 +60,20 @@ $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
@ -86,6 +92,7 @@ $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;
@ -112,9 +119,6 @@ $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},
@ -122,18 +126,16 @@ $navbar-colors: dv.$colors !default;
      "navbar-padding-horizontal": #{$navbar-padding-horizontal},
      "navbar-z": #{$navbar-z},
      "navbar-fixed-z": #{$navbar-fixed-z},
-      "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-background-color": #{$navbar-item-background-color},
      "navbar-item-color": #{$navbar-item-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-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-img-max-height": #{$navbar-item-img-max-height},
      "navbar-burger-color": #{$navbar-burger-color},
      "navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color},
@ -144,7 +146,6 @@ $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},
@ -152,14 +153,15 @@ $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},
    )
@ -176,31 +178,61 @@ $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-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")},
+          "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")},
        )
      );
+
+      .#{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")
+        );
+      }
    }
  }

@ -296,56 +328,37 @@ body {

 a.#{iv.$class-prefix}navbar-item,
 .#{iv.$class-prefix}navbar-link {
-  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")}
-  );
+  background-color: cv.getVar("navbar-item-background-color");
  cursor: pointer;

  &:focus,
  &:focus-within,
  &:hover {
-    @include cv.register-vars(
-      (
-        "navbar-item-background-l-delta": #{cv.getVar(
-            "navbar-item-hover-background-l-delta"
-          )},
-        "navbar-item-background-a": 1,
-      )
-    );
+    background-color: cv.getVar("navbar-item-hover-background-color");
+    color: cv.getVar("navbar-item-hover-color");
  }

  &:active {
-    @include cv.register-vars(
-      (
-        "navbar-item-background-l-delta": #{cv.getVar(
-            "navbar-item-active-background-l-delta"
-          )},
-        "navbar-item-background-a": 1,
-      )
-    );
+    background-color: cv.getVar("navbar-item-active-background-color");
+    color: cv.getVar("navbar-item-active-color");
  }

  &.#{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-background-a": 1,
-        "navbar-item-color-l": #{cv.getVar("navbar-item-selected-color-l")},
-      )
-    );
+    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"
+      );
+    }
  }
 }

@ -417,30 +430,26 @@ a.#{iv.$class-prefix}navbar-item,
    padding-right: 1.5rem;

    &: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")}
-      );
+      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"
+        );
+      }
    }
  }
 }

 .#{iv.$class-prefix}navbar-divider {
-  background-color: hsl(
-    #{cv.getVar("navbar-h")},
-    #{cv.getVar("navbar-s")},
-    #{cv.getVar("navbar-divider-background-l")}
-  );
+  background-color: cv.getVar("navbar-divider-background-color");
  border: none;
  display: none;
  height: cv.getVar("navbar-divider-height");
@ -561,31 +570,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"
+            //       )},
+            //   )
+            // );
          }
        }
      }
@ -688,23 +697,6 @@ 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 &,
--- a/sass/elements/button.scss
+++ b/sass/elements/button.scss
@ -410,12 +410,6 @@ $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 {
--- a/sass/elements/image.scss
+++ b/sass/elements/image.scss
@ -1,5 +1,3 @@
-@use "sass:list";
-
@use "../utilities/initial-variables" as iv;
@use "../utilities/css-variables" as cv;
@use "../utilities/mixins" as mx;
@ -39,8 +37,8 @@ $dimensions: 16 24 32 48 64 96 128 !default;
  }

  @each $pair in iv.$aspect-ratios {
-    $w: list.nth($pair, 1);
-    $h: list.nth($pair, 2);
+    $w: nth($pair, 1);
+    $h: nth($pair, 2);

    &.#{iv.$class-prefix}is-#{$w}by#{$h} {
      aspect-ratio: #{$w} / #{$h};
--- a/sass/elements/tag.scss
+++ b/sass/elements/tag.scss
@ -4,13 +4,10 @@
@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-l: cv.getVar("text-l");
+$tag-color: cv.getVar("text");
+$tag-background-color: cv.getVar("background");
 $tag-radius: cv.getVar("radius") !default;
 $tag-delete-margin: 1px !default;

@ -20,7 +17,7 @@ $tag-colors: dv.$colors !default;
  @extend %block;

  align-items: center;
-  color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
+  color: cv.getVar("tag-color");
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
@ -72,28 +69,17 @@ $tag-colors: dv.$colors !default;
 .#{iv.$class-prefix}tag {
  @include cv.register-vars(
    (
-      "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-background-color": #{$tag-background-color},
+      "tag-color": #{$tag-color},
      "tag-radius": #{$tag-radius},
      "tag-delete-margin": #{$tag-delete-margin},
    )
  );

  align-items: center;
-  background-color: hsl(
-    cv.getVar("tag-h"),
-    cv.getVar("tag-s"),
-    calc(
-      #{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
-    )
-  );
+  background-color: cv.getVar("tag-background-color");
  border-radius: $tag-radius;
-  color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
+  color: cv.getVar("tag-color");
  display: inline-flex;
  font-size: cv.getVar("size-small");
  height: 2em;
@ -113,18 +99,16 @@ $tag-colors: dv.$colors !default;
    &.#{iv.$class-prefix}is-#{$name} {
      @include cv.register-vars(
        (
-          "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")},
+          "tag-background-color": cv.getVar($name),
+          "tag-color": #{cv.getVar($name, "", "-invert")},
        )
      );

      &.#{iv.$class-prefix}is-light {
        @include cv.register-vars(
          (
-            "tag-background-l": #{cv.getVar("light-l")},
-            "tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
+            "tag-background-color": #{cv.getVar($name, "", "-light")},
+            "tag-color": #{cv.getVar($name, "", "-light-invert")},
          )
        );
      }
--- a/sass/elements/title.scss
+++ b/sass/elements/title.scss
@ -1,5 +1,3 @@
-@use "sass:list";
-
@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@use "../utilities/initial-variables" as iv;
@ -92,7 +90,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;

  // Sizes
  @each $size in dv.$sizes {
-    $i: list.index(dv.$sizes, $size);
+    $i: index(dv.$sizes, $size);

    &.#{iv.$class-prefix}is-#{$i} {
      font-size: $size;
@ -121,7 +119,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;

  // Sizes
  @each $size in dv.$sizes {
-    $i: list.index(dv.$sizes, $size);
+    $i: index(dv.$sizes, $size);

    &.#{iv.$class-prefix}is-#{$i} {
      font-size: $size;
--- a/sass/form/input-textarea.scss
+++ b/sass/form/input-textarea.scss
@ -1,5 +1,3 @@
-@use "sass:list";
-
@use "shared";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@ -24,7 +22,7 @@ $textarea-colors: shared.$form-colors !default;

  // Colors
  @each $name, $pair in $textarea-colors {
-    $color: list.nth($pair, 1);
+    $color: nth($pair, 1);

    &.#{iv.$class-prefix}is-#{$name} {
      @include cv.register-vars(
--- a/sass/helpers/aspect-ratio.scss
+++ b/sass/helpers/aspect-ratio.scss
@ -1,12 +1,10 @@
-@use "sass:list";
-
@use "../utilities/initial-variables" as iv;

@each $pair in iv.$aspect-ratios {
-  $w: list.nth($pair, 1);
-  $h: list.nth($pair, 2);
+  $w: nth($pair, 1);
+  $h: nth($pair, 2);

-  .#{iv.$class-prefix}#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
+  .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
    aspect-ratio: #{$w} / #{$h};
  }
 }
--- a/sass/helpers/border.scss
+++ b/sass/helpers/border.scss
@ -9,7 +9,7 @@ $radii: (
 );

@each $name, $var in $radii {
-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}radius-#{$name} {
+  .#{iv.$helpers-has-prefix}radius-#{$name} {
    border-radius: cv.getVar($var);
  }
 }
--- a/sass/helpers/color.scss
+++ b/sass/helpers/color.scss
@ -26,7 +26,7 @@ $digits: (
  "100"
 );

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background {
+.#{iv.$helpers-has-prefix}background {
  background-color: cv.getVar("background");
 }

@ -43,16 +43,16 @@ $digits: (
    #{cv.getVar($name, "", "-l")}
  );

-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
+  .#{iv.$helpers-has-prefix}text-#{$name} {
    color: $color !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
+  .#{iv.$helpers-has-prefix}background-#{$name} {
    background-color: $background !important;
  }

  // Invert
-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-invert {
+  .#{iv.$helpers-has-prefix}text-#{$name}-invert {
    color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@ -60,7 +60,7 @@ $digits: (
    ) !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light {
+  .#{iv.$helpers-has-prefix}text-#{$name}-light {
    color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@ -94,7 +94,7 @@ $digits: (
    ) !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark {
+  .#{iv.$helpers-has-prefix}text-#{$name}-dark {
    color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@ -127,7 +127,7 @@ $digits: (
    ) !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft {
+  .#{iv.$helpers-has-prefix}text-#{$name}-soft {
    color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@ -160,7 +160,7 @@ $digits: (
    ) !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold {
+  .#{iv.$helpers-has-prefix}text-#{$name}-bold {
    color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@ -176,7 +176,7 @@ $digits: (
    ) !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
+    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
      color: hsl(
        #{cv.getVar($name, "", "-h")},
        #{cv.getVar($name, "", "-s")},
@ -225,7 +225,7 @@ $digits: (
      ) !important;
    }

-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
+    .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
+    .#{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.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
+    .#{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.$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 {
+  a.#{iv.$helpers-has-prefix}text-#{$name},
+  button.#{iv.$helpers-has-prefix}text-#{$name},
+  #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
    &:hover,
    &:focus-visible {
      color: hsl(
@ -276,9 +276,9 @@ $digits: (
    }
  }

-  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 {
+  a.#{iv.$helpers-has-prefix}background-#{$name},
+  button.#{iv.$helpers-has-prefix}background-#{$name},
+  #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
    &:hover,
    &:focus-visible {
      background-color: hsl(
@ -304,7 +304,7 @@ $digits: (
  }

  // Palettes
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}palette-#{$name} {
+  .#{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.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
+  .#{iv.$helpers-has-prefix}text-#{$name} {
    color: $shade !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
+  .#{iv.$helpers-has-prefix}background-#{$name} {
    background-color: $shade !important;
  }
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-current {
+.#{iv.$helpers-has-prefix}text-current {
  color: currentColor !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-inherit {
+.#{iv.$helpers-has-prefix}text-inherit {
  color: inherit !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-current {
+.#{iv.$helpers-has-prefix}background-current {
  background-color: currentColor !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-inherit {
+.#{iv.$helpers-has-prefix}background-inherit {
  background-color: inherit !important;
 }
--- a/sass/helpers/flexbox.scss
+++ b/sass/helpers/flexbox.scss
@ -3,7 +3,7 @@
 $flex-direction-values: row, row-reverse, column, column-reverse;

@each $value in $flex-direction-values {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-direction-#{$value} {
+  .#{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.$class-prefix}#{iv.$helpers-prefix}flex-wrap-#{$value} {
+  .#{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.$class-prefix}#{iv.$helpers-prefix}justify-content-#{$value} {
+  .#{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.$class-prefix}#{iv.$helpers-prefix}align-content-#{$value} {
+  .#{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.$class-prefix}#{iv.$helpers-prefix}align-items-#{$value} {
+  .#{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.$class-prefix}#{iv.$helpers-prefix}align-self-#{$value} {
+  .#{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.$class-prefix}#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
+    .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
      flex-#{$operator}: $i !important;
    }
  }
--- a/sass/helpers/float.scss
+++ b/sass/helpers/float.scss
@ -1,28 +1,28 @@
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;

-.#{iv.$class-prefix}#{iv.$helpers-prefix}clearfix {
+.#{iv.$helpers-prefix}clearfix {
  @include mx.clearfix;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}float-left,
-.#{iv.$class-prefix}#{iv.$helpers-prefix}pulled-left {
+.#{iv.$helpers-prefix}float-left,
+.#{iv.$helpers-prefix}pulled-left {
  float: left !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}float-right,
-.#{iv.$class-prefix}#{iv.$helpers-prefix}pulled-right {
+.#{iv.$helpers-prefix}float-right,
+.#{iv.$helpers-prefix}pulled-right {
  float: right !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}float-none {
+.#{iv.$helpers-prefix}float-none {
  float: none !important;
 }

 $clears: both left none right;

@each $clear in $clears {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}clear-#{$clear} {
+  .#{iv.$helpers-prefix}clear-#{$clear} {
    clear: $clear !important;
  }
 }
--- a/sass/helpers/gap.scss
+++ b/sass/helpers/gap.scss
@ -2,7 +2,7 @@
@use "sass:string";
@use "../utilities/initial-variables" as iv;

-.#{iv.$class-prefix}#{iv.$helpers-prefix}gapless {
+.#{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.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i} {
+    .#{iv.$helpers-prefix}#{$gap}-#{$i} {
      #{$gap}: ($gap-base * $i) !important;
    }

    @if $i < 8 {
-      .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
+      .#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
        #{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important;
      }
    }
--- a/sass/helpers/other.scss
+++ b/sass/helpers/other.scss
@ -1,19 +1,19 @@
@use "../utilities/extends";
@use "../utilities/initial-variables" as iv;

-.#{iv.$class-prefix}#{iv.$helpers-prefix}radiusless {
+.#{iv.$helpers-prefix}radiusless {
  border-radius: 0 !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}shadowless {
+.#{iv.$helpers-prefix}shadowless {
  box-shadow: none !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}clickable {
+.#{iv.$helpers-prefix}clickable {
  cursor: pointer !important;
  pointer-events: all !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}unselectable {
+.#{iv.$helpers-prefix}unselectable {
  @extend %unselectable;
 }
--- a/sass/helpers/overflow.scss
+++ b/sass/helpers/overflow.scss
@ -1,21 +1,21 @@
@use "../utilities/initial-variables" as iv;

-.#{iv.$class-prefix}#{iv.$helpers-prefix}clipped {
+.#{iv.$helpers-prefix}clipped {
  overflow: hidden !important;
 }

 $overflows: auto clip hidden scroll visible;

@each $overflow in $overflows {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-#{$overflow} {
+  .#{iv.$helpers-prefix}overflow-#{$overflow} {
    overflow: $overflow !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-x-#{$overflow} {
+  .#{iv.$helpers-prefix}overflow-x-#{$overflow} {
    overflow-x: $overflow !important;
  }

-  .#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-y-#{$overflow} {
+  .#{iv.$helpers-prefix}overflow-y-#{$overflow} {
    overflow-y: $overflow !important;
  }
 }
--- a/sass/helpers/position.scss
+++ b/sass/helpers/position.scss
@ -1,19 +1,19 @@
@use "../utilities/extends";
@use "../utilities/initial-variables" as iv;

-.#{iv.$class-prefix}#{iv.$helpers-prefix}overlay,
-.#{iv.$class-prefix}#{iv.$helpers-prefix}overlay {
+.#{iv.$helpers-prefix}overlay,
+.#{iv.$helpers-prefix}overlay {
  @extend %overlay;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}relative {
+.#{iv.$helpers-prefix}relative {
  position: relative !important;
 }

 $positions: absolute fixed relative static sticky;

@each $position in $positions {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}position-#{$position} {
+  .#{iv.$helpers-prefix}position-#{$position} {
    position: $position !important;
  }
 }
--- a/sass/helpers/spacing.scss
+++ b/sass/helpers/spacing.scss
@ -1,10 +1,10 @@
@use "../utilities/initial-variables" as iv;

-.#{iv.$class-prefix}marginless {
+.marginless {
  margin: 0 !important;
 }

-.#{iv.$class-prefix}paddingless {
+.paddingless {
  padding: 0 !important;
 }

@ -34,20 +34,20 @@ $spacing-values: (
@each $property, $shortcut in $spacing-shortcuts {
  @each $name, $value in $spacing-values {
    // All directions
-    .#{iv.$class-prefix}#{$shortcut}-#{$name} {
+    .#{$shortcut}-#{$name} {
      #{$property}: $value !important;
    }

    // Cardinal directions
    @each $direction, $suffix in $spacing-directions {
-      .#{iv.$class-prefix}#{$shortcut}#{$suffix}-#{$name} {
+      .#{$shortcut}#{$suffix}-#{$name} {
        #{$property}-#{$direction}: $value !important;
      }
    }

    // Horizontal axis
    @if $spacing-horizontal != null {
-      .#{iv.$class-prefix}#{$shortcut}#{$spacing-horizontal}-#{$name} {
+      .#{$shortcut}#{$spacing-horizontal}-#{$name} {
        #{$property}-left: $value !important;
        #{$property}-right: $value !important;
      }
@ -55,7 +55,7 @@ $spacing-values: (

    // Vertical axis
    @if $spacing-vertical != null {
-      .#{iv.$class-prefix}#{$shortcut}#{$spacing-vertical}-#{$name} {
+      .#{$shortcut}#{$spacing-vertical}-#{$name} {
        #{$property}-top: $value !important;
        #{$property}-bottom: $value !important;
      }
--- a/sass/helpers/typography.scss
+++ b/sass/helpers/typography.scss
@ -1,14 +1,12 @@
-@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: list.index(dv.$sizes, $size);
+    $i: index(dv.$sizes, $size);

-    .#{iv.$class-prefix}#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
+    .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
      font-size: $size !important;
    }
  }
@ -48,123 +46,123 @@ $alignments: (
 );

@each $alignment, $text-align in $alignments {
-  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment} {
+  .#{iv.$helpers-has-prefix}text-#{$alignment} {
    text-align: #{$text-align} !important;
  }
 }

@each $alignment, $text-align in $alignments {
  @include mx.mobile {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
      text-align: #{$text-align} !important;
    }
  }

  @include mx.tablet {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
      text-align: #{$text-align} !important;
    }
  }

  @include mx.tablet-only {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
      text-align: #{$text-align} !important;
    }
  }

  @include mx.touch {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
      text-align: #{$text-align} !important;
    }
  }

  @include mx.desktop {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
      text-align: #{$text-align} !important;
    }
  }

  @include mx.desktop-only {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
      text-align: #{$text-align} !important;
    }
  }

  @include mx.widescreen {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
      text-align: #{$text-align} !important;
    }
  }

  @include mx.widescreen-only {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
      text-align: #{$text-align} !important;
    }
  }

  @include mx.fullhd {
-    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
      text-align: #{$text-align} !important;
    }
  }
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}capitalized {
+.#{iv.$helpers-prefix}capitalized {
  text-transform: capitalize !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}lowercase {
+.#{iv.$helpers-prefix}lowercase {
  text-transform: lowercase !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}uppercase {
+.#{iv.$helpers-prefix}uppercase {
  text-transform: uppercase !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}italic {
+.#{iv.$helpers-prefix}italic {
  font-style: italic !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}underlined {
+.#{iv.$helpers-prefix}underlined {
  text-decoration: underline !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-light {
+.#{iv.$helpers-has-prefix}text-weight-light {
  font-weight: iv.$weight-light !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-normal {
+.#{iv.$helpers-has-prefix}text-weight-normal {
  font-weight: iv.$weight-normal !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-medium {
+.#{iv.$helpers-has-prefix}text-weight-medium {
  font-weight: iv.$weight-medium !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-semibold {
+.#{iv.$helpers-has-prefix}text-weight-semibold {
  font-weight: iv.$weight-semibold !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-bold {
+.#{iv.$helpers-has-prefix}text-weight-bold {
  font-weight: iv.$weight-bold !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}family-primary {
+.#{iv.$helpers-prefix}family-primary {
  font-family: dv.$family-primary !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}family-secondary {
+.#{iv.$helpers-prefix}family-secondary {
  font-family: dv.$family-secondary !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}family-sans-serif {
+.#{iv.$helpers-prefix}family-sans-serif {
  font-family: iv.$family-sans-serif !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}family-monospace {
+.#{iv.$helpers-prefix}family-monospace {
  font-family: iv.$family-monospace !important;
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}family-code {
+.#{iv.$helpers-prefix}family-code {
  font-family: dv.$family-code !important;
 }
--- a/sass/helpers/visibility.scss
+++ b/sass/helpers/visibility.scss
@ -1,84 +1,84 @@
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;

-.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none,
-.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden {
+.#{iv.$helpers-prefix}display-none,
+.#{iv.$helpers-prefix}hidden {
  display: none !important;
 }

 $displays: block flex inline inline-block inline-flex grid;

@each $display in $displays {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display},
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display} {
+  .#{iv.$helpers-prefix}display-#{$display},
+  .#{iv.$helpers-prefix}#{$display} {
    display: $display !important;
  }

  @include mx.mobile {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-mobile,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-mobile {
+    .#{iv.$helpers-prefix}display-#{$display}-mobile,
+    .#{iv.$helpers-prefix}#{$display}-mobile {
      display: $display !important;
    }
  }

  @include mx.tablet {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet {
+    .#{iv.$helpers-prefix}display-#{$display}-tablet,
+    .#{iv.$helpers-prefix}#{$display}-tablet {
      display: $display !important;
    }
  }

  @include mx.tablet-only {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet-only,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet-only {
+    .#{iv.$helpers-prefix}display-#{$display}-tablet-only,
+    .#{iv.$helpers-prefix}#{$display}-tablet-only {
      display: $display !important;
    }
  }

  @include mx.touch {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-touch,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-touch {
+    .#{iv.$helpers-prefix}display-#{$display}-touch,
+    .#{iv.$helpers-prefix}#{$display}-touch {
      display: $display !important;
    }
  }

  @include mx.desktop {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop {
+    .#{iv.$helpers-prefix}display-#{$display}-desktop,
+    .#{iv.$helpers-prefix}#{$display}-desktop {
      display: $display !important;
    }
  }

  @include mx.desktop-only {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop-only,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop-only {
+    .#{iv.$helpers-prefix}display-#{$display}-desktop-only,
+    .#{iv.$helpers-prefix}#{$display}-desktop-only {
      display: $display !important;
    }
  }

  @include mx.widescreen {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-widescreen,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-widescreen {
+    .#{iv.$helpers-prefix}display-#{$display}-widescreen,
+    .#{iv.$helpers-prefix}#{$display}-widescreen {
      display: $display !important;
    }
  }

  @include mx.widescreen-only {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-widescreen-only {
+    .#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
+    .#{iv.$helpers-prefix}#{$display}-widescreen-only {
      display: $display !important;
    }
  }

  @include mx.fullhd {
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-fullhd,
-    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-fullhd {
+    .#{iv.$helpers-prefix}display-#{$display}-fullhd,
+    .#{iv.$helpers-prefix}#{$display}-fullhd {
      display: $display !important;
    }
  }
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}sr-only {
+.#{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.$class-prefix}#{iv.$helpers-prefix}display-none-mobile,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-mobile {
+  .#{iv.$helpers-prefix}display-none-mobile,
+  .#{iv.$helpers-prefix}hidden-mobile {
    display: none !important;
  }
 }

@include mx.tablet {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet {
+  .#{iv.$helpers-prefix}display-none-tablet,
+  .#{iv.$helpers-prefix}hidden-tablet {
    display: none !important;
  }
 }

@include mx.tablet-only {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet-only,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet-only {
+  .#{iv.$helpers-prefix}display-none-tablet-only,
+  .#{iv.$helpers-prefix}hidden-tablet-only {
    display: none !important;
  }
 }

@include mx.touch {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-touch,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-touch {
+  .#{iv.$helpers-prefix}display-none-touch,
+  .#{iv.$helpers-prefix}hidden-touch {
    display: none !important;
  }
 }

@include mx.desktop {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop {
+  .#{iv.$helpers-prefix}display-none-desktop,
+  .#{iv.$helpers-prefix}hidden-desktop {
    display: none !important;
  }
 }

@include mx.desktop-only {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop-only,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop-only {
+  .#{iv.$helpers-prefix}display-none-desktop-only,
+  .#{iv.$helpers-prefix}hidden-desktop-only {
    display: none !important;
  }
 }

@include mx.widescreen {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-widescreen,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-widescreen {
+  .#{iv.$helpers-prefix}display-none-widescreen,
+  .#{iv.$helpers-prefix}hidden-widescreen {
    display: none !important;
  }
 }

@include mx.widescreen-only {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-widescreen-only,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-widescreen-only {
+  .#{iv.$helpers-prefix}display-none-widescreen-only,
+  .#{iv.$helpers-prefix}hidden-widescreen-only {
    display: none !important;
  }
 }

@include mx.fullhd {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-fullhd,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-fullhd {
+  .#{iv.$helpers-prefix}display-none-fullhd,
+  .#{iv.$helpers-prefix}hidden-fullhd {
    display: none !important;
  }
 }

-.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden,
-.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible {
+.#{iv.$helpers-prefix}visibility-hidden,
+.#{iv.$helpers-prefix}invisible {
  visibility: hidden !important;
 }

@include mx.mobile {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-mobile,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-mobile {
+  .#{iv.$helpers-prefix}visibility-hidden-mobile,
+  .#{iv.$helpers-prefix}invisible-mobile {
    visibility: hidden !important;
  }
 }

@include mx.tablet {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-tablet,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-tablet {
+  .#{iv.$helpers-prefix}visibility-hidden-tablet,
+  .#{iv.$helpers-prefix}invisible-tablet {
    visibility: hidden !important;
  }
 }

@include mx.tablet-only {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-tablet-only,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-tablet-only {
+  .#{iv.$helpers-prefix}visibility-hidden-tablet-only,
+  .#{iv.$helpers-prefix}invisible-tablet-only {
    visibility: hidden !important;
  }
 }

@include mx.touch {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-touch,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-touch {
+  .#{iv.$helpers-prefix}visibility-hidden-touch,
+  .#{iv.$helpers-prefix}invisible-touch {
    visibility: hidden !important;
  }
 }

@include mx.desktop {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop {
+  .#{iv.$helpers-prefix}visibility-hidden-desktop,
+  .#{iv.$helpers-prefix}invisible-desktop {
    visibility: hidden !important;
  }
 }

@include mx.desktop-only {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop-only,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop-only {
+  .#{iv.$helpers-prefix}visibility-hidden-desktop-only,
+  .#{iv.$helpers-prefix}invisible-desktop-only {
    visibility: hidden !important;
  }
 }

@include mx.widescreen {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-widescreen,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-widescreen {
+  .#{iv.$helpers-prefix}visibility-hidden-widescreen,
+  .#{iv.$helpers-prefix}invisible-widescreen {
    visibility: hidden !important;
  }
 }

@include mx.widescreen-only {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-widescreen-only {
+  .#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
+  .#{iv.$helpers-prefix}invisible-widescreen-only {
    visibility: hidden !important;
  }
 }

@include mx.fullhd {
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-fullhd,
-  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-fullhd {
+  .#{iv.$helpers-prefix}visibility-hidden-fullhd,
+  .#{iv.$helpers-prefix}invisible-fullhd {
    visibility: hidden !important;
  }
 }
--- a/sass/themes/dark.scss
+++ b/sass/themes/dark.scss
@ -1,5 +1,4 @@
@use "sass:list";
-@use "sass:meta";

@use "../utilities/initial-variables" as iv;
@use "../utilities/css-variables" as cv;
@ -7,20 +6,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);
-$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
+$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l * 1%);
 $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);

@mixin dark-theme {
  @each $name, $color in dv.$colors {
    $base: $color;

-    @if meta.type-of($color == "list") {
+    @if type-of($color == "list") {
      $base: list.nth($color, 1);
    }

@ -31,8 +30,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,
@ -45,10 +44,13 @@ $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%,
    )
  );
--- a/sass/themes/light.scss
+++ b/sass/themes/light.scss
@ -1,5 +1,4 @@
@use "sass:list";
-@use "sass:meta";

@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@ -8,10 +7,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);
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);

@mixin light-theme {
  @include cv.register-vars(
@ -28,16 +27,20 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
      "bold-invert-l": iv.$light-l,

      // Deltas
-      "hover-background-l-delta": -5%,
-      "active-background-l-delta": -10%,
+      "hover-background-l-delta": -5,
+      "focus-background-l-delta": -5,
+      "active-background-l-delta": -10,

-      "hover-border-l-delta": -10%,
-      "active-border-l-delta": -20%,
+      "hover-border-l-delta": -10,
+      "focus-border-l-delta": -10,
+      "active-border-l-delta": -20,

-      "hover-color-l-delta": -5%,
-      "active-color-l-delta": -10%,
+      "hover-color-l-delta": -5,
+      "focus-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
@ -45,7 +48,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
      "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%,
@ -104,7 +107,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
    $light: null;
    $dark: null;

-    @if meta.type-of($color == "list") {
+    @if type-of($color == "list") {
      $base: list.nth($color, 1);

      @if list.length($color) > 3 {
@ -140,7 +143,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
  @include cv.register-hsl("shadow", dv.$shadow-color);

  @each $size in dv.$sizes {
-    $i: list.index(dv.$sizes, $size);
+    $i: index(dv.$sizes, $size);
    $name: "size-#{$i}";
    @include cv.register-var($name, $size);
  }
--- a/sass/themes/setup.scss
+++ b/sass/themes/setup.scss
@ -8,7 +8,7 @@
        hsl(
          #{cv.getVar("scheme-h")},
          #{cv.getVar("scheme-s")},
-          #{cv.getVar("scheme-main-l")}
+          calc(#{cv.getVar("scheme-main-l")} * 1%)
        ),
      "scheme-main-bis":
        hsl(
--- a/sass/utilities/css-variables.scss
+++ b/sass/utilities/css-variables.scss
@ -10,12 +10,12 @@
  @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
 }

-@function buildHslaString($name, $l, $a: 1) {
+@function buildHslaString($name, $l) {
  $lightness: getVar($name, "", "-l");
  @if ($l) {
    $lightness: $l;
  }
-  @return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})";
+  @return "hsl(from #{getVar($name)} h s #{$lightness})";
 }

@function getVar($name, $prefix: "", $suffix: "") {
@ -48,35 +48,16 @@
@mixin register-rgb($name, $value) {
  @include register-var(
    $name,
-    (
-      color.channel($value, "red", $space: rgb),
-      color.channel($value, "green", $space: rgb),
-      color.channel($value, "blue", $space: rgb)
-    ),
+    (red($value), green($value), blue($value)),
    "",
    "-rgb"
  );
 }

@mixin register-hsl($name, $value) {
-  @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"
-  );
+  @include register-var($name, round(hue($value)), "", "-h");
+  @include register-var($name, round(saturation($value)), "", "-s");
+  @include register-var($name, round(lightness($value)), "", "-l");
 }

@mixin generate-on-scheme-colors($name, $base, $scheme-main) {
@ -95,11 +76,7 @@
      @if $ratio > 5 {
        $found-decent-color: true;
      } @else {
-        $on-scheme-color: color.adjust(
-          $on-scheme-color,
-          $lightness: 5%,
-          $space: hsl
-        );
+        $on-scheme-color: lighten($on-scheme-color, 5%);
        $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
      }
    }
@ -110,21 +87,13 @@
      @if $ratio > 5 {
        $found-decent-color: true;
      } @else {
-        $on-scheme-color: color.adjust(
-          $on-scheme-color,
-          $lightness: -5%,
-          $space: hsl
-        );
+        $on-scheme-color: darken($on-scheme-color, 5%);
        $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
      }
    }
  }

-  $on-scheme-lightness: color.channel(
-    $on-scheme-color,
-    "lightness",
-    $space: hsl
-  );
+  $on-scheme-lightness: lightness($on-scheme-color);
  @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
  $on-scheme-l: getVar($name, "", "-on-scheme-l");
  @include register-var(
@ -141,35 +110,22 @@
  @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: color.adjust(
-        $on-scheme-color,
-        $lightness: -5%,
-        $space: hsl
-      );
+      $on-scheme-color: darken($on-scheme-color, 5%);
    }
  } @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: color.adjust(
-        $on-scheme-color,
-        $lightness: 5%,
-        $space: hsl
-      );
+      $on-scheme-color: lighten($on-scheme-color, 5%);
    }
  }

-  $on-scheme-lightness: color.channel(
-    $on-scheme-color,
-    "lightness",
-    $space: hsl
-  );
+  $on-scheme-lightness: lightness($on-scheme-color);
  @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
 }

@mixin register-base-color($name, $base) {
-  $hsla: buildHslaString($name, getVar($name, "", "-l"));
-  @include register-var($name, $hsla);
-  @include register-var($name, $hsla, "", "-base"); // Just for reference
+  @include register-var($name, $base);
+  @include register-var($name, $base, "", "-base"); // Just for reference
  @include register-rgb($name, $base);
  @include register-hsl($name, $base);
 }
@ -178,12 +134,7 @@
  @include register-base-color($name, $base);

  @if $invert {
-    @include register-var(
-      $name,
-      color.channel($invert, "lightness", $space: hsl),
-      "",
-      "-invert-l"
-    );
+    @include register-var($name, lightness($invert), "", "-invert-l");
    @include register-var("#{$name}-invert", $invert);
  }
 }
@ -191,16 +142,16 @@
@mixin generate-color-palette(
  $name,
  $base,
-  $scheme-main-l: 100%,
+  $scheme-main-l: 100,
  $invert: null,
  $light: null,
  $dark: null
 ) {
-  $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
+  $h: round(hue($base)); // Hue
+  $s: round(saturation($base)); // Saturation
+  $l: round(lightness($base)); // Lightness
  $base-lum: fn.bulmaColorLuminance($base);
-  $l-base: math.round($l % 10); // Get lightness second digit: 53% -> 3%
+  $l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
  $l-0: 0%; // 5% or less
  $l-5: 5%; // More than 5%
  $a: 1; // Alpha
@ -208,8 +159,9 @@

  // Calculate digits like "40" for the scheme-main
  $scheme-l-0: 0%;
-  $scheme-l-base: math.round($scheme-main-l % 10);
-  $closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
+  $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;
  $pct-to-int: math.div($closest-5, 100%) * 100;
  $scheme-main-digits: #{$pct-to-int};

@ -302,10 +254,7 @@
      // Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
      $fg-lum: fn.bulmaColorLuminance($foreground);

-      @if (
-        color.channel($foreground, "lightness", $space: hsl) >
-          color.channel($background, "lightness", $space: hsl)
-      ) {
+      @if (lightness($foreground) > lightness($background)) {
        $is-light-fg: true;
        $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
      } @else {
@ -374,12 +323,7 @@

  // If an invert color is provided by the user
  @if $invert {
-    @include register-var(
-      $name,
-      color.channel($invert, "lightness", $space: hsl),
-      "",
-      "-invert-l"
-    );
+    @include register-var($name, lightness($invert), "", "-invert-l");
    @include register-var("#{$name}-invert", $invert);
  } @else {
    $base-invert-l-digits: map.get($combos, $base-digits);
@ -399,33 +343,13 @@

  // Good color on light background (90% lightness)
  @if $light and $dark {
-    @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, lightness($light), "", "-light-l");
+    @include register-var($name, lightness($light), "", "-dark-invert-l");
    @include register-var("#{$name}-light", $light);
    @include register-var("#{$name}-dark-invert", $light);

-    @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, lightness($dark), "", "-dark-l");
+    @include register-var($name, lightness($dark), "", "-light-invert-l");
    @include register-var("#{$name}-dark", $dark);
    @include register-var("#{$name}-light-invert", $dark);
  } @else {
--- a/sass/utilities/functions.scss
+++ b/sass/utilities/functions.scss
@ -1,29 +1,20 @@
-@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 meta.type-of($custom-colors) == "map" {
+  @if 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 meta.type-of($name) ==
+      @if type-of($name) ==
        "string" and
-        (
-          meta.type-of($components) ==
-            "list" or
-            meta.type-of($components) ==
-            "color"
-        ) and
-        list.length($components) >=
+        (type-of($components) == "list" or type-of($components) == "color") and
+        length($components) >=
        1
      {
        $color-base: null;
@ -34,22 +25,22 @@

        // The param can either be a single color
        // or a list of 2 colors
-        @if meta.type-of($components) == "color" {
+        @if type-of($components) == "color" {
          $color-base: $components;
          $color-invert: bulmaFindColorInvert($color-base);
          $color-light: bulmaFindLightColor($color-base);
          $color-dark: bulmaFindDarkColor($color-base);
-        } @else if meta.type-of($components) == "list" {
+        } @else if type-of($components) == "list" {
          $color-base: list.nth($components, 1);

          // If Invert, Light and Dark are provided
-          @if list.length($components) > 3 {
+          @if 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 list.length($components) > 2 {
+          } @else if length($components) > 2 {
            $color-invert: list.nth($components, 2);
            $color-light: list.nth($components, 3);
            $color-dark: bulmaFindDarkColor($color-base);
@ -65,11 +56,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 meta.type-of($color-base) == "color" {
+        @if 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,
@ -100,14 +91,14 @@
 }

@function bulmaColorLuminance($color) {
-  @if meta.type-of($color) != "color" {
+  @if type-of($color) != "color" {
    @return 0.55;
  }

  $color-rgb: (
-    "red": color.channel($color, "red", $space: rgb),
-    "green": color.channel($color, "green", $space: rgb),
-    "blue": color.channel($color, "blue", $space: rgb),
+    "red": red($color),
+    "green": green($color),
+    "blue": blue($color),
  );

  @each $name, $value in $color-rgb {
@ -121,7 +112,7 @@
      $value: powerNumber($value, 2);
    }

-    $color-rgb: map.merge(
+    $color-rgb: map-merge(
      $color-rgb,
      (
        $name: $value,
@ -129,8 +120,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) {
@ -142,33 +133,33 @@
 }

@function bulmaFindLightColor($color, $l: 96%) {
-  @if meta.type-of($color) == "color" {
+  @if type-of($color) == "color" {
    $l: 96%;

-    @if color.channel($color, "lightness", $space: hsl) > 96% {
-      $l: color.channel($color, "lightness", $space: hsl);
+    @if lightness($color) > 96% {
+      $l: lightness($color);
    }

-    @return color.change($color, $lightness: $l);
+    @return change-color($color, $lightness: $l);
  }

  @return $background;
 }

@function bulmaFindDarkColor($color, $base-l: 29%) {
-  @if meta.type-of($color) == "color" {
+  @if type-of($color) == "color" {
    $luminance: bulmaColorLuminance($color);
    $luminance-delta: 0.53 - $luminance;
-    $target-l: math.round($base-l + $luminance-delta * 53);
+    $target-l: round($base-l + $luminance-delta * 53);

-    @return color.change($color, $lightness: max($base-l, $target-l));
+    @return change-color($color, $lightness: max($base-l, $target-l));
  }

  @return $text-strong;
 }

@function bulmaRgba($color, $alpha) {
-  @if meta.type-of($color) != "color" {
+  @if type-of($color) != "color" {
    @return $color;
  }

@ -176,37 +167,27 @@
 }

@function bulmaDarken($color, $amount) {
-  @if meta.type-of($color) != "color" {
+  @if type-of($color) != "color" {
    @return $color;
  }

-  @return color.adjust($color, $lightness: -$amount, $space: hsl);
+  @return darken($color, $amount);
 }

@function bulmaLighten($color, $amount) {
-  @if meta.type-of($color) != "color" {
+  @if type-of($color) != "color" {
    @return $color;
  }

-  @return color.adjust($color, $lightness: $amount, $space: hsl);
+  @return lighten($color, $amount);
 }

@function bulmaColorBrightness($n) {
-  $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
-    )
+  $color-brightness: round(
+   math.div((red($n) * 299) + (green($n) * 587) + (blue($n) * 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
-    )
+  $light-color: round(
+    math.div((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114), 1000)
  );

  @if abs($color-brightness) < math.div($light-color, 2) {
@ -217,42 +198,12 @@
 }

@function bulmaEnoughContrast($foreground, $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)
-      )
-    );
+  $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)));
  $sum-rgb: $r + $g + $b;

  @if $sum-rgb < 500 {
@ -264,15 +215,15 @@

 // By Cory Simmons https://corysimmons.com/
@function bulmaStringToNumber($value) {
-  @if meta.type-of($value) == "number" {
+  @if type-of($value) == "number" {
    @return $value;
-  } @else if meta.type-of($value) != "string" {
+  } @else if type-of($value) != "string" {
    $_: log("Value for `to-number` should be a number or a string.");
  }

  $result: 0;
  $digits: 0;
-  $minus: string.slice($value, 1, 1) == "-";
+  $minus: str-slice($value, 1, 1) == "-";
  $numbers: (
    "0": 0,
    "1": 1,
@ -286,23 +237,20 @@
    "9": 9,
  );

-  @for $i from if($minus, 2, 1) through string.length($value) {
-    $character: string.slice($value, $i, $i);
+  @for $i from if($minus, 2, 1) through str-length($value) {
+    $character: str-slice($value, $i, $i);

-    @if not(list.index(map.keys($numbers), $character) or $character == ".") {
-      @return to-length(
-        if($minus, -$result, $result),
-        string.slice($value, $i)
-      );
+    @if not(index(map-keys($numbers), $character) or $character == ".") {
+      @return to-length(if($minus, -$result, $result), str-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;
    }
  }

--- a/sass/utilities/mixins.scss
+++ b/sass/utilities/mixins.scss
@ -1,5 +1,3 @@
-@use "sass:map";
-
@use "initial-variables" as iv;
@use "css-variables" as cv;

@ -362,11 +360,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) {
--- a/versions/bulma-no-dark-mode.scss
+++ b/versions/bulma-no-dark-mode.scss
@ -1,6 +1,6 @@
@charset "utf-8";

-/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
@forward "../sass/utilities";
@forward "../sass/base";
@forward "../sass/elements";
--- a/versions/bulma-no-helpers-prefixed.scss
+++ b/versions/bulma-no-helpers-prefixed.scss
@ -1,10 +1,9 @@
@charset "utf-8";

-/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.2 | 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";
--- a/versions/bulma-no-helpers.scss
+++ b/versions/bulma-no-helpers.scss
@ -1,8 +1,7 @@
@charset "utf-8";

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

-/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
@use "../sass" with (
  $class-prefix: "bulma-"
 );
Author	SHA1	Message	Date
Jeremy Thomas	41e046cab3	Update light and dark	2024-10-18 13:45:12 +01:00
Jeremy Thomas	0db6ff07df	Update navbar	2024-09-19 02:02:36 +01:00
Jeremy Thomas	23feb10a7d	Update menu and message	2024-09-18 23:53:25 +01:00
Jeremy Thomas	04d86325e8	Setup base "from" colors	2024-09-18 17:48:30 +01:00