bulma-rails 1.0.0 → 1.0.2

data/app/assets/stylesheets/sass/helpers/color.scss

@@ -34,306 +34,272 @@ $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.$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.$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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-      )
-    );
+    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")},
-        )
-      );
+      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")},
-        )
-      );
+      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")},
-        )
-      );
+      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")},
-        )
-      );
+      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 {
     &: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 {
     &: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;
     }
   }
 
@@ -352,13 +318,27 @@ $digits: (
 }
 
 @each $name, $shade in dv.$shades {
-  .#{iv.$helpers-prefix}color-#{$name},
   .#{iv.$helpers-has-prefix}text-#{$name} {
     color: $shade !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name},
   .#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $shade !important;
   }
 }
+
+.#{iv.$helpers-has-prefix}text-current {
+  color: currentColor !important;
+}
+
+.#{iv.$helpers-has-prefix}text-inherit {
+  color: inherit !important;
+}
+
+.#{iv.$helpers-has-prefix}background-current {
+  background-color: currentColor !important;
+}
+
+.#{iv.$helpers-has-prefix}background-inherit {
+  background-color: inherit !important;
+}

data/app/assets/stylesheets/sass/layout/container.scss

@@ -17,34 +17,42 @@ $container-max-width: iv.$fullhd !default;
     width: 100%;
   }
 
+  &.#{iv.$class-prefix}is-max-tablet {
+    max-width: iv.$tablet - $container-offset;
+  }
+
   @include mx.desktop {
     max-width: iv.$desktop - $container-offset;
   }
 
   @include mx.until-widescreen {
-    &.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) {
+    &.#{iv.$class-prefix}is-widescreen:not(
+        .#{iv.$class-prefix}is-max-tablet
+      ):not(.#{iv.$class-prefix}is-max-desktop) {
       max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.until-fullhd {
-    &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not(
-        .#{iv.$class-prefix}is-max-widescreen
-      ) {
+    &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-tablet):not(
+        .#{iv.$class-prefix}is-max-desktop
+      ):not(.#{iv.$class-prefix}is-max-widescreen) {
       max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.widescreen {
-    &:not(.#{iv.$class-prefix}is-max-desktop) {
+    &:not(.#{iv.$class-prefix}is-max-tablet):not(
+        .#{iv.$class-prefix}is-max-desktop
+      ) {
       max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.fullhd {
-    &:not(.#{iv.$class-prefix}is-max-desktop):not(
-        .#{iv.$class-prefix}is-max-widescreen
-      ) {
+    &:not(.#{iv.$class-prefix}is-max-tablet):not(
+        .#{iv.$class-prefix}is-max-desktop
+      ):not(.#{iv.$class-prefix}is-max-widescreen) {
       max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
     }
   }

data/app/assets/stylesheets/sass/layout/section.scss

@@ -31,4 +31,8 @@ $section-padding-large: 18rem 6rem !default;
       padding: cv.getVar("section-padding-large");
     }
   }
+
+  &.#{iv.$class-prefix}is-fullheight {
+    min-height: 100vh;
+  }
 }

data/app/assets/stylesheets/sass/themes/light.scss

@@ -81,6 +81,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
       "radius-rounded": 9999px,
       "speed": 86ms,
 
+      "arrow-color": #{cv.getVar("link")},
       "loading-color": #{cv.getVar("border")},
       "burger-h": #{cv.getVar("link-h")},
       "burger-s": #{cv.getVar("link-s")},

data/app/assets/stylesheets/sass/utilities/css-variables.scss

@@ -211,8 +211,9 @@
     }
   }
 
-  $shades: map.set($shades, "100", 100%);
-  @include register-var($name, 100%, "", "-100-l");
+  $l-100: math.min($l-0 + 100%, 100%);
+  $shades: map.set($shades, "100", $l-100);
+  @include register-var($name, $l-100, "", "-100-l");
 
   // === STEP 3 ===
   // Find accessible color combinations

data/app/assets/stylesheets/sass/utilities/functions.scss

@@ -184,10 +184,10 @@
 
 @function bulmaColorBrightness($n) {
   $color-brightness: round(
-    (red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000
+   math.div((red($n) * 299) + (green($n) * 587) + (blue($n) * 114), 1000)
   );
   $light-color: round(
-    (red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000
+    math.div((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114), 1000)
   );
 
   @if abs($color-brightness) < math.div($light-color, 2) {

data/app/assets/stylesheets/sass/utilities/initial-variables.scss

@@ -1,9 +1,9 @@
 // Scheme Hue and Saturation
 
-$scheme-h: 221;
-$scheme-s: 14%;
-$dark-l: 20%;
-$light-l: 90%;
+$scheme-h: 221 !default;
+$scheme-s: 14% !default;
+$dark-l: 20% !default;
+$light-l: 90% !default;
 
 // Colors
 

data/app/assets/stylesheets/sass/utilities/mixins.scss

@@ -1,7 +1,7 @@
 @use "initial-variables" as iv;
 @use "css-variables" as cv;
 
-@mixin arrow($color: #{cv.getVar("link")}) {
+@mixin arrow($color: #{cv.getVar("arrow-color")}) {
   border: 0.125em solid $color;
   border-right: 0;
   border-top: 0;

data/bulma-rails.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |gem|
   gem.name          = "bulma-rails"
-  gem.version       = "1.0.0"
+  gem.version       = "1.0.2"
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]
   gem.description   = %q{A modern CSS framework based on Flexbox}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.0.2
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-04-10 00:00:00.000000000 Z
+date: 2024-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dartsass-rails
@@ -73,7 +73,6 @@ files:
 - app/assets/stylesheets/sass/form/shared.scss
 - app/assets/stylesheets/sass/form/tools.scss
 - app/assets/stylesheets/sass/grid/_index.scss
-- app/assets/stylesheets/sass/grid/columns-v2.scss
 - app/assets/stylesheets/sass/grid/columns.scss
 - app/assets/stylesheets/sass/grid/grid.scss
 - app/assets/stylesheets/sass/helpers/_index.scss
@@ -129,7 +128,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3.1
+rubygems_version: 3.3.5
 signing_key: 
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import