bulma-rails 1.0.2 → 1.0.4

data/app/assets/stylesheets/{sass → bulma_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;
 }

data/app/assets/stylesheets/{sass → bulma_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;
   }
 }

data/app/assets/stylesheets/{sass → bulma_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;
   }
 }

data/app/assets/stylesheets/{sass → bulma_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;
       }

data/app/assets/stylesheets/{sass → bulma_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,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;
 }

data/app/assets/stylesheets/bulma_sass/helpers/visibility.scss

@@ -0,0 +1,221 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden {
+  display: none !important;
+}
+
+$displays: block flex inline inline-block inline-flex grid;
+
+@each $display in $displays {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display},
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display} {
+    display: $display !important;
+  }
+
+  @include mx.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.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet {
+      display: $display !important;
+    }
+  }
+
+  @include mx.tablet-only {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet-only,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet-only {
+      display: $display !important;
+    }
+  }
+
+  @include mx.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.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop {
+      display: $display !important;
+    }
+  }
+
+  @include mx.desktop-only {
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop-only,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop-only {
+      display: $display !important;
+    }
+  }
+
+  @include mx.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.$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.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-fullhd,
+    .#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-fullhd {
+      display: $display !important;
+    }
+  }
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-prefix}sr-only {
+  border: none !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 0.01em !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 0.01em !important;
+}
+
+@include mx.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.$class-prefix}#{iv.$helpers-prefix}display-none-tablet,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet {
+    display: none !important;
+  }
+}
+
+@include mx.tablet-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet-only {
+    display: none !important;
+  }
+}
+
+@include mx.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.$class-prefix}#{iv.$helpers-prefix}display-none-desktop,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop {
+    display: none !important;
+  }
+}
+
+@include mx.desktop-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop-only {
+    display: none !important;
+  }
+}
+
+@include mx.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.$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.$class-prefix}#{iv.$helpers-prefix}display-none-fullhd,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-fullhd {
+    display: none !important;
+  }
+}
+
+.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden,
+.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible {
+  visibility: hidden !important;
+}
+
+@include mx.mobile {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-mobile,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-mobile {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.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.$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.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-touch,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-touch {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.desktop {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.desktop-only {
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop-only,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop-only {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.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.$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.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-fullhd,
+  .#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-fullhd {
+    visibility: hidden !important;
+  }
+}

data/app/assets/stylesheets/{sass → bulma_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},
     )
   );
 }
@@ -119,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")},
@@ -129,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(

data/app/assets/stylesheets/{sass → bulma_sass}/themes/_index.scss

@@ -1,13 +1,14 @@
 /* Bulma Themes */
 @charset "utf-8";
 
+@use "../utilities/initial-variables" as iv;
 @use "../utilities/css-variables" as cv;
 
 @use "light";
 @use "dark";
 @use "setup";
 
-:root {
+#{iv.$variables-host} {
   @include light.light-theme;
   @include setup.setup-theme;
 }

data/app/assets/stylesheets/{sass → bulma_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);
     }
 

data/app/assets/stylesheets/{sass → bulma_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;
@@ -72,14 +73,14 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
 
       // Other
       "block-spacing": iv.$block-spacing,
-      "duration": 294ms,
-      "easing": ease-out,
+      "duration": iv.$duration,
+      "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);
   }

data/app/assets/stylesheets/{sass → bulma_sass}/utilities/controls.scss

@@ -16,7 +16,7 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
 
 $control-focus-shadow-l: 50% !default;
 
-:root {
+#{iv.$variables-host} {
   @include cv.register-vars(
     (
       "control-radius": #{$control-radius},