bulma-rails 1.0.1 → 1.0.3

data/app/assets/stylesheets/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");
 }
 
@@ -34,311 +34,277 @@ $digits: (
   $background: hsl(
     #{cv.getVar($name, "", "-h")},
     #{cv.getVar($name, "", "-s")},
-    calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")})
+    #{cv.getVar($name, "", "-l")}
   );
 
   $color: hsl(
     #{cv.getVar($name, "", "-h")},
     #{cv.getVar($name, "", "-s")},
-    calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")})
+    #{cv.getVar($name, "", "-l")}
   );
 
-  [class*="#{iv.$helpers-prefix}color-#{$name}"],
-  [class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-l")},
-        "color-l-delta": 0%,
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
     color: $color !important;
   }
 
-  [class*="#{iv.$helpers-prefix}background-#{$name}"],
-  [class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-l")},
-        "background-l-delta": 0%,
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $background !important;
   }
 
   // Invert
-  .#{iv.$helpers-prefix}color-#{$name}-invert,
-  .#{iv.$helpers-has-prefix}text-#{$name}-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-invert {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-invert,
-  .#{iv.$helpers-has-prefix}background-#{$name}-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-invert {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-invert-l")}
+    ) !important;
   }
 
   // On Scheme
-  .#{iv.$helpers-prefix}color-#{$name}-on-scheme,
-  .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-on-scheme-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-on-scheme-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-on-scheme,
-  .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-on-scheme-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-on-scheme-l")}
+    ) !important;
   }
 
   // Light
-  .#{iv.$helpers-prefix}color-#{$name}-light,
-  .#{iv.$helpers-has-prefix}text-#{$name}-light {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-light-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-light-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-light,
-  .#{iv.$helpers-has-prefix}background-#{$name}-light {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-light-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-light-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-light-invert,
-  .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-light-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-light-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-light-invert,
-  .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-light-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-light-invert-l")}
+    ) !important;
   }
 
   // Dark
-  .#{iv.$helpers-prefix}color-#{$name}-dark,
-  .#{iv.$helpers-has-prefix}text-#{$name}-dark {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-dark-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-dark-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-dark,
-  .#{iv.$helpers-has-prefix}background-#{$name}-dark {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-dark-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-dark-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-dark-invert,
-  .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-dark-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-dark-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-dark-invert,
-  .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-dark-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-dark-invert-l")}
+    ) !important;
   }
 
   // Soft/Bold
-  .#{iv.$helpers-prefix}color-#{$name}-soft,
-  .#{iv.$helpers-has-prefix}text-#{$name}-soft {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar("soft-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("soft-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-soft,
-  .#{iv.$helpers-has-prefix}background-#{$name}-soft {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar("soft-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("soft-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-bold,
-  .#{iv.$helpers-has-prefix}text-#{$name}-bold {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar("bold-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("bold-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-bold,
-  .#{iv.$helpers-has-prefix}background-#{$name}-bold {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar("bold-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("bold-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-soft-invert,
-  .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar("soft-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("soft-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-soft-invert,
-  .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar("soft-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("soft-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-bold-invert,
-  .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar("bold-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("bold-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-bold-invert,
-  .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar("bold-invert-l")},
-      )
-    );
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("bold-invert-l")}
+    ) !important;
   }
 
   @each $digit in $digits {
-    .#{iv.$helpers-prefix}color-#{$name}-#{$digit},
-    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
-      @include cv.register-vars(
-        (
-          "color-l": #{cv.getVar($name, "", "-#{$digit}-l")},
-        )
-      );
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-#{$digit}-l")}
+      ) !important;
     }
 
-    .#{iv.$helpers-prefix}background-#{$name}-#{$digit},
-    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
-      @include cv.register-vars(
-        (
-          "background-l": #{cv.getVar($name, "", "-#{$digit}-l")},
-        )
-      );
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
+      background-color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-#{$digit}-l")}
+      ) !important;
     }
 
-    .#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
-    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
-      @include cv.register-vars(
-        (
-          "color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
-        )
-      );
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-#{$digit}-invert-l")}
+      ) !important;
     }
 
-    .#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
-    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
-      @include cv.register-vars(
-        (
-          "background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
-        )
-      );
+    .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
+      background-color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-#{$digit}-invert-l")}
+      ) !important;
     }
   }
 
   // Hover
-  a.#{iv.$helpers-prefix}color-#{$name},
-  button.#{iv.$helpers-prefix}color-#{$name},
-  #{iv.$helpers-prefix}color-#{$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 {
+  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 {
-      @include cv.register-vars(
-        (
-          "color-l-delta": #{cv.getVar("hover-color-l-delta")},
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        calc(
+          #{cv.getVar($name, "", "-l")} + #{cv.getVar("hover-color-l-delta")}
         )
-      );
+      ) !important;
     }
 
     &:active {
-      @include cv.register-vars(
-        (
-          "color-l-delta": #{cv.getVar("active-color-l-delta")},
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        calc(
+          #{cv.getVar($name, "", "-l")} + #{cv.getVar("active-color-l-delta")}
         )
-      );
+      ) !important;
     }
   }
 
-  a.#{iv.$helpers-prefix}background-#{$name},
-  button.#{iv.$helpers-prefix}background-#{$name},
-  #{iv.$helpers-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 {
+  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 {
-      @include cv.register-vars(
-        (
-          "background-l-delta": #{cv.getVar("hover-background-l-delta")},
+      background-color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        calc(
+          #{cv.getVar($name, "", "-l")} +
+            #{cv.getVar("hover-background-l-delta")}
         )
-      );
+      ) !important;
     }
 
     &:active {
-      @include cv.register-vars(
-        (
-          "background-l-delta": #{cv.getVar("active-background-l-delta")},
+      background-color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        calc(
+          #{cv.getVar($name, "", "-l")} +
+            #{cv.getVar("active-background-l-delta")}
         )
-      );
+      ) !important;
     }
   }
 
   // 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")};
@@ -352,13 +318,27 @@ $digits: (
 }
 
 @each $name, $shade in dv.$shades {
-  .#{iv.$helpers-prefix}color-#{$name},
-  .#{iv.$helpers-has-prefix}text-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
     color: $shade !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name},
-  .#{iv.$helpers-has-prefix}background-#{$name} {
+  .#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $shade !important;
   }
 }
+
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-current {
+  color: currentColor !important;
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-inherit {
+  color: inherit !important;
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-current {
+  background-color: currentColor !important;
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-inherit {
+  background-color: inherit !important;
+}

data/app/assets/stylesheets/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;
     }
   }

data/app/assets/stylesheets/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;
   }
 }

data/app/assets/stylesheets/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;
       }
     }