Merge branch 'main' into initial-variables-duration

sass/elements/button.scss

@@ -383,6 +383,12 @@ $no-palette: ("white", "black", "light", "dark");
     @include cv.register-vars(
       (
         "button-border-width": max(1px, 0.0625em),
+        "loading-color":
+        hsl(
+          #{cv.getVar("button-h")},
+          #{cv.getVar("button-s")},
+          #{cv.getVar("button-l")}
+        ),
       )
     );
 

sass/helpers/aspect-ratio.scss

@@ -6,7 +6,7 @@
   $w: list.nth($pair, 1);
   $h: list.nth($pair, 2);
 
-  .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
     aspect-ratio: #{$w} / #{$h};
   }
 }

sass/helpers/border.scss

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

sass/helpers/color.scss

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

sass/helpers/flexbox.scss

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

sass/helpers/float.scss

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

sass/helpers/gap.scss

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

sass/helpers/other.scss

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

sass/helpers/overflow.scss

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

sass/helpers/position.scss

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

sass/helpers/spacing.scss

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

sass/helpers/typography.scss

@@ -8,7 +8,7 @@
   @each $size in dv.$sizes {
     $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;
     }
   }
@@ -48,123 +48,127 @@ $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-has-prefix}text-weight-extrabold {
+  font-weight: iv.$weight-extrabold !important;
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-primary {
   font-family: dv.$family-primary !important;
 }
 
-.#{iv.$helpers-prefix}family-secondary {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-secondary {
   font-family: dv.$family-secondary !important;
 }
 
-.#{iv.$helpers-prefix}family-sans-serif {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-sans-serif {
   font-family: iv.$family-sans-serif !important;
 }
 
-.#{iv.$helpers-prefix}family-monospace {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-monospace {
   font-family: iv.$family-monospace !important;
 }
 
-.#{iv.$helpers-prefix}family-code {
+.#{iv.$class-prefix}#{iv.$helpers-prefix}family-code {
   font-family: dv.$family-code !important;
 }

sass/helpers/visibility.scss

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

sass/layout/hero.scss

@@ -122,9 +122,9 @@ $hero-colors: dv.$colors !default;
       // Modifiers
       &.#{iv.$class-prefix}is-bold {
         $gradient-top-left: hsl(
-          calc(#{cv.getVar("hero-h")} - $hero-gradient-h-offset),
-          calc(#{cv.getVar("hero-s")} + $hero-gradient-s-offset),
-          calc(#{cv.getVar("hero-background-l")} + $hero-gradient-l-offset)
+          calc(#{cv.getVar("hero-h")} - #{$hero-gradient-h-offset}),
+          calc(#{cv.getVar("hero-s")} + #{$hero-gradient-s-offset}),
+          calc(#{cv.getVar("hero-background-l")} + #{$hero-gradient-l-offset})
         );
         $gradient-middle: hsl(
           #{cv.getVar("hero-h")},
@@ -132,9 +132,9 @@ $hero-colors: dv.$colors !default;
           #{cv.getVar("hero-background-l")}
         );
         $gradient-bottom-right: hsl(
-          calc(#{cv.getVar("hero-h")} + $hero-gradient-h-offset),
-          calc(#{cv.getVar("hero-s")} - $hero-gradient-s-offset),
-          calc(#{cv.getVar("hero-background-l")} - $hero-gradient-l-offset)
+          calc(#{cv.getVar("hero-h")} + #{$hero-gradient-h-offset}),
+          calc(#{cv.getVar("hero-s")} - #{$hero-gradient-s-offset}),
+          calc(#{cv.getVar("hero-background-l")} - #{$hero-gradient-l-offset})
         );
 
         background-image: linear-gradient(