Merge branch 'jgthms:main' into main

2026-03-15 02:04:29 -07:00 · 2025-03-21 11:19:07 +01:00
parent 646d520b62 7f4c17bb55
commit 22557ffc84
127 changed files with 30385 additions and 22494 deletions
--- a/sass/elements/button.scss
+++ b/sass/elements/button.scss
@@ -410,6 +410,12 @@ $no-palette: ("white", "black", "light", "dark");
    &:active {
      @include cv.register-vars(());
    }
+
+    &[disabled],
+    fieldset[disabled] & {
+      background-color: transparent;
+      box-shadow: none;
+    }
  }

  &.#{iv.$class-prefix}is-inverted {
--- a/sass/elements/image.scss
+++ b/sass/elements/image.scss
@@ -1,3 +1,5 @@
+@use "sass:list";
+
@use "../utilities/initial-variables" as iv;
@use "../utilities/css-variables" as cv;
@use "../utilities/mixins" as mx;
@@ -37,8 +39,8 @@ $dimensions: 16 24 32 48 64 96 128 !default;
  }

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

    &.#{iv.$class-prefix}is-#{$w}by#{$h} {
      aspect-ratio: #{$w} / #{$h};
--- a/sass/elements/title.scss
+++ b/sass/elements/title.scss
@@ -1,3 +1,5 @@
+@use "sass:list";
+
@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@use "../utilities/initial-variables" as iv;
@@ -90,7 +92,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;

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

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

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

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

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

    &.#{iv.$class-prefix}is-#{$name} {
      @include cv.register-vars(
--- a/sass/form/shared.scss
+++ b/sass/form/shared.scss
@@ -13,6 +13,11 @@ $input-border-style: solid !default;
 $input-border-width: cv.getVar("control-border-width") !default;
 $input-border-l: cv.getVar("border-l") !default;
 $input-border-l-delta: 0% !default;
+$input-border-color: hsl(
+  cv.getVar("input-h"),
+  cv.getVar("input-s"),
+  calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
+) !default;
 $input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
 $input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
 $input-color-l: cv.getVar("text-strong-l") !default;
@@ -70,6 +75,7 @@ $input-radius: cv.getVar("radius") !default;
      "input-border-width": #{$input-border-width},
      "input-border-l": #{$input-border-l},
      "input-border-l-delta": #{$input-border-l-delta},
+      "input-border-color": #{$input-border-color},
      "input-hover-border-l-delta": #{$input-hover-border-l-delta},
      "input-active-border-l-delta": #{$input-active-border-l-delta},
      "input-focus-h": #{$input-focus-h},
@@ -107,11 +113,7 @@ $input-radius: cv.getVar("radius") !default;
        )}
    )
  );
-  border-color: hsl(
-    cv.getVar("input-h"),
-    cv.getVar("input-s"),
-    calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
-  );
+  border-color: cv.getVar("input-border-color");
  border-radius: cv.getVar("input-radius");
  color: hsl(
    #{cv.getVar("input-h")},
--- a/sass/helpers/aspect-ratio.scss
+++ b/sass/helpers/aspect-ratio.scss
@@ -1,10 +1,12 @@
+@use "sass:list";
+
@use "../utilities/initial-variables" as iv;

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

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

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

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

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

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

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

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-invert {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -69,7 +69,7 @@ $digits: (
  }

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -86,7 +86,7 @@ $digits: (
  }

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-light {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -102,7 +102,7 @@ $digits: (
    ) !important;
  }

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -119,7 +119,7 @@ $digits: (
  }

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-dark {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -135,7 +135,7 @@ $digits: (
    ) !important;
  }

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -152,7 +152,7 @@ $digits: (
  }

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-soft {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -168,7 +168,7 @@ $digits: (
    ) !important;
  }

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-bold {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -184,7 +184,7 @@ $digits: (
    ) !important;
  }

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

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

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

-  .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
    background-color: hsl(
      #{cv.getVar($name, "", "-h")},
      #{cv.getVar($name, "", "-s")},
@@ -217,7 +217,7 @@ $digits: (
  }

  @each $digit in $digits {
-    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
      color: hsl(
        #{cv.getVar($name, "", "-h")},
        #{cv.getVar($name, "", "-s")},
@@ -225,7 +225,7 @@ $digits: (
      ) !important;
    }

-    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
      background-color: hsl(
        #{cv.getVar($name, "", "-h")},
        #{cv.getVar($name, "", "-s")},
@@ -233,7 +233,7 @@ $digits: (
      ) !important;
    }

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

-    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
      background-color: hsl(
        #{cv.getVar($name, "", "-h")},
        #{cv.getVar($name, "", "-s")},
@@ -251,9 +251,9 @@ $digits: (
  }

  // Hover
-  a.#{iv.$helpers-has-prefix}text-#{$name},
-  button.#{iv.$helpers-has-prefix}text-#{$name},
-  #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
+  a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
+  button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
+  #{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
    &:hover,
    &:focus-visible {
      color: hsl(
@@ -276,9 +276,9 @@ $digits: (
    }
  }

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

  // Palettes
-  .#{iv.$helpers-prefix}palette-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}palette-#{$name} {
    --h: #{cv.getVar($name, "", "-h")};
    --s: #{cv.getVar($name, "", "-s")};
    --l: #{cv.getVar($name, "", "-l")};
@@ -318,27 +318,27 @@ $digits: (
 }

@each $name, $shade in dv.$shades {
-  .#{iv.$helpers-has-prefix}text-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
    color: $shade !important;
  }

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

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

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

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

-.#{iv.$helpers-has-prefix}background-inherit {
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-inherit {
  background-color: inherit !important;
 }
--- 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.$helpers-prefix}flex-direction-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-direction-#{$value} {
    flex-direction: $value !important;
  }
 }
@@ -11,7 +11,7 @@ $flex-direction-values: row, row-reverse, column, column-reverse;
 $flex-wrap-values: nowrap, wrap, wrap-reverse;

@each $value in $flex-wrap-values {
-  .#{iv.$helpers-prefix}flex-wrap-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-wrap-#{$value} {
    flex-wrap: $value !important;
  }
 }
@@ -20,7 +20,7 @@ $justify-content-values: flex-start, flex-end, center, space-between,
  space-around, space-evenly, start, end, left, right;

@each $value in $justify-content-values {
-  .#{iv.$helpers-prefix}justify-content-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}justify-content-#{$value} {
    justify-content: $value !important;
  }
 }
@@ -29,7 +29,7 @@ $align-content-values: flex-start, flex-end, center, space-between, space-around
  space-evenly, stretch, start, end, baseline;

@each $value in $align-content-values {
-  .#{iv.$helpers-prefix}align-content-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-content-#{$value} {
    align-content: $value !important;
  }
 }
@@ -38,7 +38,7 @@ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end
  self-start, self-end;

@each $value in $align-items-values {
-  .#{iv.$helpers-prefix}align-items-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-items-#{$value} {
    align-items: $value !important;
  }
 }
@@ -46,7 +46,7 @@ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end
 $align-self-values: auto, flex-start, flex-end, center, baseline, stretch;

@each $value in $align-self-values {
-  .#{iv.$helpers-prefix}align-self-#{$value} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}align-self-#{$value} {
    align-self: $value !important;
  }
 }
@@ -55,7 +55,7 @@ $flex-operators: grow, shrink;

@each $operator in $flex-operators {
  @for $i from 0 through 5 {
-    .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
      flex-#{$operator}: $i !important;
    }
  }
--- 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.$helpers-prefix}clearfix {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}clearfix {
  @include mx.clearfix;
 }

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

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

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

 $clears: both left none right;

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

-.#{iv.$helpers-prefix}gapless {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}gapless {
  gap: 0 !important;
 }

@@ -11,12 +11,12 @@ $gap-base: 0.5rem;

@each $gap in $gaps {
  @for $i from 0 through 8 {
-    .#{iv.$helpers-prefix}#{$gap}-#{$i} {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i} {
      #{$gap}: ($gap-base * $i) !important;
    }

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

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

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

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

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

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

 $overflows: auto clip hidden scroll visible;

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

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

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

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

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

 $positions: absolute fixed relative static sticky;

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

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

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

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

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

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

    // Vertical axis
    @if $spacing-vertical != null {
-      .#{$shortcut}#{$spacing-vertical}-#{$name} {
+      .#{iv.$class-prefix}#{$shortcut}#{$spacing-vertical}-#{$name} {
        #{$property}-top: $value !important;
        #{$property}-bottom: $value !important;
      }
--- a/sass/helpers/typography.scss
+++ b/sass/helpers/typography.scss
@@ -1,12 +1,14 @@
+@use "sass:list";
+
@use "../utilities/derived-variables" as dv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;

@mixin typography-size($target: "") {
  @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-.#{iv.$helpers-prefix}family-code {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-code {
  font-family: dv.$family-code !important;
 }
--- 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.$helpers-prefix}display-none,
-.#{iv.$helpers-prefix}hidden {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden {
  display: none !important;
 }

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

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

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

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

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

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

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

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

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

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

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

-.#{iv.$helpers-prefix}sr-only {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}sr-only {
  border: none !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 0.01em !important;
@@ -90,132 +90,132 @@ $displays: block flex inline inline-block inline-flex grid;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@include mx.fullhd {
-  .#{iv.$helpers-prefix}visibility-hidden-fullhd,
-  .#{iv.$helpers-prefix}invisible-fullhd {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-fullhd,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-fullhd {
    visibility: hidden !important;
  }
 }
--- a/sass/layout/hero.scss
+++ b/sass/layout/hero.scss
@@ -10,9 +10,9 @@ $hero-body-padding-small: 1.5rem !default;
 $hero-body-padding-medium: 9rem 4.5rem !default;
 $hero-body-padding-large: 18rem 6rem !default;

-$hero-gradient-h-offset: 5deg;
-$hero-gradient-s-offset: 10%;
-$hero-gradient-l-offset: 5%;
+$hero-gradient-h-offset: 5deg !default;
+$hero-gradient-s-offset: 10% !default;
+$hero-gradient-l-offset: 5% !default;

 $hero-colors: dv.$colors !default;

@@ -25,6 +25,9 @@ $hero-colors: dv.$colors !default;
      "hero-body-padding-small": #{$hero-body-padding-small},
      "hero-body-padding-medium": #{$hero-body-padding-medium},
      "hero-body-padding-large": #{$hero-body-padding-large},
+      "hero-gradient-h-offset": #{$hero-gradient-h-offset},
+      "hero-gradient-s-offset": #{$hero-gradient-s-offset},
+      "hero-gradient-l-offset": #{$hero-gradient-l-offset},
    )
  );
 }
--- a/sass/themes/dark.scss
+++ b/sass/themes/dark.scss
@@ -1,4 +1,5 @@
@use "sass:list";
+@use "sass:meta";

@use "../utilities/initial-variables" as iv;
@use "../utilities/css-variables" as cv;
@@ -19,7 +20,7 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
  @each $name, $color in dv.$colors {
    $base: $color;

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

--- a/sass/themes/light.scss
+++ b/sass/themes/light.scss
@@ -1,4 +1,5 @@
@use "sass:list";
+@use "sass:meta";

@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@@ -73,13 +74,13 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
      // Other
      "block-spacing": iv.$block-spacing,
      "duration": 294ms,
-      "easing": ease-out,
+      "easing": iv.$easing,
      "radius-small": iv.$radius-small,
      "radius": iv.$radius,
      "radius-medium": iv.$radius-medium,
      "radius-large": iv.$radius-large,
-      "radius-rounded": 9999px,
-      "speed": 86ms,
+      "radius-rounded": iv.$radius-rounded,
+      "speed": iv.$speed,

      "arrow-color": #{cv.getVar("link")},
      "loading-color": #{cv.getVar("border")},
@@ -103,7 +104,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
    $light: null;
    $dark: null;

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

      @if list.length($color) > 3 {
@@ -139,7 +140,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: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
    $name: "size-#{$i}";
    @include cv.register-var($name, $size);
  }
--- a/sass/utilities/css-variables.scss
+++ b/sass/utilities/css-variables.scss
@@ -50,16 +50,35 @@ $variables-host: iv.$variables-host;
@mixin register-rgb($name, $value) {
  @include register-var(
    $name,
-    (red($value), green($value), blue($value)),
+    (
+      color.channel($value, "red", $space: rgb),
+      color.channel($value, "green", $space: rgb),
+      color.channel($value, "blue", $space: rgb)
+    ),
    "",
    "-rgb"
  );
 }

@mixin register-hsl($name, $value) {
-  @include register-var($name, round(hue($value)), "", "-h");
-  @include register-var($name, round(saturation($value)), "", "-s");
-  @include register-var($name, round(lightness($value)), "", "-l");
+  @include register-var(
+    $name,
+    math.round(color.channel($value, "hue", $space: hsl)),
+    "",
+    "-h"
+  );
+  @include register-var(
+    $name,
+    math.round(color.channel($value, "saturation", $space: hsl)),
+    "",
+    "-s"
+  );
+  @include register-var(
+    $name,
+    math.round(color.channel($value, "lightness", $space: hsl)),
+    "",
+    "-l"
+  );
 }

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

-  $on-scheme-lightness: lightness($on-scheme-color);
+  $on-scheme-lightness: color.channel(
+    $on-scheme-color,
+    "lightness",
+    $space: hsl
+  );
  @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
  $on-scheme-l: getVar($name, "", "-on-scheme-l");
  @include register-var(
@@ -112,16 +143,28 @@ $variables-host: iv.$variables-host;
  @if ($scheme-main-brightness == "bright") {
    @while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) {
      // We're on a light background, so we'll darken the test color step by step.
-      $on-scheme-color: darken($on-scheme-color, 5%);
+      $on-scheme-color: color.adjust(
+        $on-scheme-color,
+        $lightness: -5%,
+        $space: hsl
+      );
    }
  } @else {
    @while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) {
      // We're on a dark background, so we'll lighten the test color step by step.
-      $on-scheme-color: lighten($on-scheme-color, 5%);
+      $on-scheme-color: color.adjust(
+        $on-scheme-color,
+        $lightness: 5%,
+        $space: hsl
+      );
    }
  }

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

@@ -137,7 +180,12 @@ $variables-host: iv.$variables-host;
  @include register-base-color($name, $base);

  @if $invert {
-    @include register-var($name, lightness($invert), "", "-invert-l");
+    @include register-var(
+      $name,
+      color.channel($invert, "lightness", $space: hsl),
+      "",
+      "-invert-l"
+    );
    @include register-var("#{$name}-invert", $invert);
  }
 }
@@ -150,11 +198,11 @@ $variables-host: iv.$variables-host;
  $light: null,
  $dark: null
 ) {
-  $h: round(hue($base)); // Hue
-  $s: round(saturation($base)); // Saturation
-  $l: round(lightness($base)); // Lightness
+  $h:math.round(color.channel($base, "hue", $space: hsl)); // Hue
+  $s:math.round(color.channel($base, "saturation", $space: hsl)); // Saturation
+  $l:math.round(color.channel($base, "lightness", $space: hsl)); // Lightness
  $base-lum: fn.bulmaColorLuminance($base);
-  $l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
+  $l-base: math.round($l % 10); // Get lightness second digit: 53% -> 3%
  $l-0: 0%; // 5% or less
  $l-5: 5%; // More than 5%
  $a: 1; // Alpha
@@ -162,7 +210,7 @@ $variables-host: iv.$variables-host;

  // Calculate digits like "40" for the scheme-main
  $scheme-l-0: 0%;
-  $scheme-l-base: round($scheme-main-l % 10);
+  $scheme-l-base: math.round($scheme-main-l % 10);
  $closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
  $pct-to-int: math.div($closest-5, 100%) * 100;
  $scheme-main-digits: #{$pct-to-int};
@@ -256,7 +304,10 @@ $variables-host: iv.$variables-host;
      // Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
      $fg-lum: fn.bulmaColorLuminance($foreground);

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

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

  // Good color on light background (90% lightness)
  @if $light and $dark {
-    @include register-var($name, lightness($light), "", "-light-l");
-    @include register-var($name, lightness($light), "", "-dark-invert-l");
+    @include register-var(
+      $name,
+      color.channel($light, "lightness", $space: hsl),
+      "",
+      "-light-l"
+    );
+    @include register-var(
+      $name,
+      color.channel($light, "lightness", $space: hsl),
+      "",
+      "-dark-invert-l"
+    );
    @include register-var("#{$name}-light", $light);
    @include register-var("#{$name}-dark-invert", $light);

-    @include register-var($name, lightness($dark), "", "-dark-l");
-    @include register-var($name, lightness($dark), "", "-light-invert-l");
+    @include register-var(
+      $name,
+      color.channel($dark, "lightness", $space: hsl),
+      "",
+      "-dark-l"
+    );
+    @include register-var(
+      $name,
+      color.channel($dark, "lightness", $space: hsl),
+      "",
+      "-light-invert-l"
+    );
    @include register-var("#{$name}-dark", $dark);
    @include register-var("#{$name}-light-invert", $dark);
  } @else {
--- a/sass/utilities/functions.scss
+++ b/sass/utilities/functions.scss
@@ -1,20 +1,29 @@
+@use "sass:color";
@use "sass:list";
+@use "sass:map";
@use "sass:math";
+@use "sass:meta";
+@use "sass:string";

@function mergeColorMaps($bulma-colors, $custom-colors) {
  // We return at least Bulma's hard-coded colors
  $merged-colors: $bulma-colors;

  // We want a map as input
-  @if type-of($custom-colors) == "map" {
+  @if meta.type-of($custom-colors) == "map" {
    @each $name, $components in $custom-colors {
      // The color name should be a string
      // and the components either a single color
      // or a colors list with at least one element
-      @if type-of($name) ==
+      @if meta.type-of($name) ==
        "string" and
-        (type-of($components) == "list" or type-of($components) == "color") and
-        length($components) >=
+        (
+          meta.type-of($components) ==
+            "list" or
+            meta.type-of($components) ==
+            "color"
+        ) and
+        list.length($components) >=
        1
      {
        $color-base: null;
@@ -25,22 +34,22 @@

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

          // If Invert, Light and Dark are provided
-          @if length($components) > 3 {
+          @if list.length($components) > 3 {
            $color-invert: list.nth($components, 2);
            $color-light: list.nth($components, 3);
            $color-dark: list.nth($components, 4);

            // If only Invert and Light are provided
-          } @else if length($components) > 2 {
+          } @else if list.length($components) > 2 {
            $color-invert: list.nth($components, 2);
            $color-light: list.nth($components, 3);
            $color-dark: bulmaFindDarkColor($color-base);
@@ -56,11 +65,11 @@
        $value: $color-base, $color-invert, $color-light, $color-dark;

        // We only want to merge the map if the color base is an actual color
-        @if type-of($color-base) == "color" {
+        @if meta.type-of($color-base) == "color" {
          // We merge this colors elements as map with Bulma's colors map
          // (we can override them this way, no multiple definition for the same name)
          // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
-          $merged-colors: map_merge(
+          $merged-colors: map.merge(
            $merged-colors,
            (
              $name: $value,
@@ -91,14 +100,14 @@
 }

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

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

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

-    $color-rgb: map-merge(
+    $color-rgb: map.merge(
      $color-rgb,
      (
        $name: $value,
@@ -120,8 +129,8 @@
    );
  }

-  @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") *
-    0.7152 + map-get($color-rgb, "blue") * 0.0722;
+  @return map.get($color-rgb, "red") * 0.2126 + map.get($color-rgb, "green") *
+    0.7152 + map.get($color-rgb, "blue") * 0.0722;
 }

@function bulmaFindColorInvert($color) {
@@ -133,33 +142,33 @@
 }

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

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

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

  @return $background;
 }

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

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

  @return $text-strong;
 }

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

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

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

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

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

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

@function bulmaColorBrightness($n) {
-  $color-brightness: round(
-   math.div((red($n) * 299) + (green($n) * 587) + (blue($n) * 114), 1000)
+  $color-brightness: math.round(
+    math.div(
+      (color.channel($n, "red", $space: rgb) * 299) +
+        (color.channel($n, "green", $space: rgb) * 587) +
+        (color.channel($n, "blue", $space: rgb) * 114),
+      1000
+    )
  );
-  $light-color: round(
-    math.div((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114), 1000)
+  $light-color: math.round(
+    math.div(
+      (color.channel(#ffffff, "red", $space: rgb) * 299) +
+        (color.channel(#ffffff, "green", $space: rgb) * 587) +
+        (color.channel(#ffffff, "blue", $space: rgb) * 114),
+      1000
+    )
  );

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

@function bulmaEnoughContrast($foreground, $background) {
-  $r: (max(red($foreground), red($background))) -
-    (min(red($foreground), red($background)));
-  $g: (max(green($foreground), green($background))) -
-    (min(green($foreground), green($background)));
-  $b: (max(blue($foreground), blue($background))) -
-    (min(blue($foreground), blue($background)));
+  $r: (
+      max(
+        color.channel($foreground, "red", $space: rgb),
+        color.channel($background, "red", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "red", $space: rgb),
+        color.channel($background, "red", $space: rgb)
+      )
+    );
+  $g: (
+      max(
+        color.channel($foreground, "green", $space: rgb),
+        color.channel($background, "green", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "green", $space: rgb),
+        color.channel($background, "green", $space: rgb)
+      )
+    );
+  $b: (
+      max(
+        color.channel($foreground, "blue", $space: rgb),
+        color.channel($background, "blue", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "blue", $space: rgb),
+        color.channel($background, "blue", $space: rgb)
+      )
+    );
  $sum-rgb: $r + $g + $b;

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

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

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

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

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

    @if $character == "." {
      $digits: 1;
    } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);
+      $result: $result * 10 + map.get($numbers, $character);
    } @else {
      $digits: $digits * 10;
-      $result: $result + map-get($numbers, $character) / $digits;
+      $result: $result + map.get($numbers, $character) / $digits;
    }
  }

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

@@ -360,11 +362,11 @@
 }

@mixin breakpoint($name) {
-  $breakpoint: map-get(iv.$breakpoints, $name);
+  $breakpoint: map.get(iv.$breakpoints, $name);

  @if $breakpoint {
-    $from: map-get($breakpoint, "from");
-    $until: map-get($breakpoint, "until");
+    $from: map.get($breakpoint, "from");
+    $until: map.get($breakpoint, "until");

    @if $from and $until {
      @include between($from, $until) {