bulma-rails 0.9.0 → 1.0.0

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

@@ -0,0 +1,145 @@
+@use "sass:list";
+
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/functions" as fn;
+@use "setup";
+
+// The main lightness of this theme
+$scheme-main-l: 100%;
+
+// The main scheme color, used to make calculations
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
+
+@mixin light-theme {
+  @include cv.register-vars(
+    (
+      "scheme-h": iv.$scheme-h,
+      "scheme-s": iv.$scheme-s,
+      "light-l": iv.$light-l,
+      "light-invert-l": iv.$dark-l,
+      "dark-l": iv.$dark-l,
+      "dark-invert-l": iv.$light-l,
+      "soft-l": iv.$light-l,
+      "bold-l": iv.$dark-l,
+      "soft-invert-l": iv.$dark-l,
+      "bold-invert-l": iv.$light-l,
+
+      // Deltas
+      "hover-background-l-delta": -5%,
+      "active-background-l-delta": -10%,
+
+      "hover-border-l-delta": -10%,
+      "active-border-l-delta": -20%,
+
+      "hover-color-l-delta": -5%,
+      "active-color-l-delta": -10%,
+
+      "hover-shadow-a-delta": -0.05,
+      "active-shadow-a-delta": -0.1,
+
+      // Light only
+      "scheme-brightness": "light",
+      "scheme-main-l": $scheme-main-l,
+      "scheme-main-bis-l": 98%,
+      "scheme-main-ter-l": 96%,
+      "background-l": 96%,
+      "border-weak-l": 93%,
+      "border-l": 86%,
+      "text-weak-l": 48%,
+      "text-l": 29%,
+      "text-strong-l": 21%,
+      "text-title-l": 14%,
+      "scheme-invert-ter-l": 14%,
+      "scheme-invert-bis-l": 7%,
+      "scheme-invert-l": 4%,
+
+      // Typography
+      "family-primary": dv.$family-primary,
+      "family-secondary": dv.$family-secondary,
+      "family-code": dv.$family-code,
+      "size-small": dv.$size-small,
+      "size-normal": dv.$size-normal,
+      "size-medium": dv.$size-medium,
+      "size-large": dv.$size-large,
+      "weight-light": iv.$weight-light,
+      "weight-normal": iv.$weight-normal,
+      "weight-medium": iv.$weight-medium,
+      "weight-semibold": iv.$weight-semibold,
+      "weight-bold": iv.$weight-bold,
+      "weight-extrabold": iv.$weight-extrabold,
+
+      // Other
+      "block-spacing": iv.$block-spacing,
+      "duration": 294ms,
+      "easing": ease-out,
+      "radius-small": iv.$radius-small,
+      "radius": iv.$radius,
+      "radius-medium": iv.$radius-medium,
+      "radius-large": iv.$radius-large,
+      "radius-rounded": 9999px,
+      "speed": 86ms,
+
+      "loading-color": #{cv.getVar("border")},
+      "burger-h": #{cv.getVar("link-h")},
+      "burger-s": #{cv.getVar("link-s")},
+      "burger-l": #{cv.getVar("link-l")},
+      "burger-border-radius": 0.5em,
+      // Using px values to prevent half pixel issues
+      "burger-gap": 5px,
+      "burger-item-height": 2px,
+      "burger-item-width": 20px,
+    )
+  );
+
+  // Colors
+  $no-palette: ("white", "black", "light", "dark");
+
+  @each $name, $color in dv.$colors {
+    $base: $color;
+    $invert: null;
+    $light: null;
+    $dark: null;
+
+    @if type-of($color == "list") {
+      $base: list.nth($color, 1);
+
+      @if list.length($color) > 3 {
+        $invert: list.nth($color, 2);
+        $light: list.nth($color, 3);
+        $dark: list.nth($color, 4);
+      } @else if list.length($color) > 1 {
+        $invert: list.nth($color, 2);
+      }
+    }
+
+    @if list.index($no-palette, $name) {
+      @include cv.generate-basic-palette($name, $base, $invert);
+    } @else {
+      @include cv.generate-color-palette(
+        $name,
+        $base,
+        $scheme-main-l,
+        $invert,
+        $light,
+        $dark
+      );
+    }
+
+    @include cv.generate-on-scheme-colors($name, $base, $scheme-main);
+  }
+
+  // Shades
+  @each $name, $shade in dv.$shades {
+    @include cv.register-var($name, $shade);
+  }
+
+  @include cv.register-hsl("shadow", dv.$shadow-color);
+
+  @each $size in dv.$sizes {
+    $i: index(dv.$sizes, $size);
+    $name: "size-#{$i}";
+    @include cv.register-var($name, $size);
+  }
+}

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

@@ -0,0 +1,174 @@
+@use "../utilities/css-variables" as cv;
+
+@mixin setup-theme() {
+  @include cv.register-vars(
+    (
+      // Computed
+      "scheme-main":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("scheme-main-l")}
+        ),
+      "scheme-main-bis":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("scheme-main-bis-l")}
+        ),
+      "scheme-main-ter":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("scheme-main-ter-l")}
+        ),
+      "background":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("background-l")}
+        ),
+      "background-hover":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          calc(
+            #{cv.getVar("background-l")} + #{cv.getVar(
+                "hover-background-l-delta"
+              )}
+          )
+        ),
+      "background-active":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          calc(
+            #{cv.getVar("background-l")} + #{cv.getVar(
+                "active-background-l-delta"
+              )}
+          )
+        ),
+      "border-weak":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("border-weak-l")}
+        ),
+      "border":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("border-l")}
+        ),
+      "border-hover":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          calc(#{cv.getVar("border-l")} + #{cv.getVar("hover-border-l-delta")})
+        ),
+      "border-active":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          calc(#{cv.getVar("border-l")} + #{cv.getVar("active-border-l-delta")})
+        ),
+      "text-weak":
+        hsl(
+          #{cv.getVar("text-h")},
+          #{cv.getVar("text-s")},
+          #{cv.getVar("text-weak-l")}
+        ),
+      "text":
+        hsl(
+          #{cv.getVar("text-h")},
+          #{cv.getVar("text-s")},
+          #{cv.getVar("text-l")}
+        ),
+      "text-strong":
+        hsl(
+          #{cv.getVar("text-h")},
+          #{cv.getVar("text-s")},
+          #{cv.getVar("text-strong-l")}
+        ),
+      "scheme-invert-ter":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("scheme-invert-ter-l")}
+        ),
+      "scheme-invert-bis":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("scheme-invert-bis-l")}
+        ),
+      "scheme-invert":
+        hsl(
+          #{cv.getVar("scheme-h")},
+          #{cv.getVar("scheme-s")},
+          #{cv.getVar("scheme-invert-l")}
+        ),
+      "link":
+        hsl(
+          #{cv.getVar("link-h")},
+          #{cv.getVar("link-s")},
+          #{cv.getVar("link-l")}
+        ),
+      "link-text":
+        hsl(
+          #{cv.getVar("link-h")},
+          #{cv.getVar("link-s")},
+          #{cv.getVar("link-on-scheme-l")}
+        ),
+      "link-text-hover":
+        hsl(
+          #{cv.getVar("link-h")},
+          #{cv.getVar("link-s")},
+          calc(
+            #{cv.getVar("link-on-scheme-l")} + #{cv.getVar(
+                "hover-color-l-delta"
+              )}
+          )
+        ),
+      "link-text-active":
+        hsl(
+          #{cv.getVar("link-h")},
+          #{cv.getVar("link-s")},
+          calc(
+            #{cv.getVar("link-on-scheme-l")} + #{cv.getVar(
+                "active-color-l-delta"
+              )}
+          )
+        ),
+      "focus-h": #{cv.getVar("link-h")},
+      "focus-s": #{cv.getVar("link-s")},
+      "focus-l": #{cv.getVar("link-l")},
+      "focus-offset": 1px,
+      "focus-style": solid,
+      "focus-width": 2px,
+      "focus-shadow-size": 0 0 0 0.1875em,
+      "focus-shadow-alpha": 0.25,
+      "code":
+        hsl(
+          #{cv.getVar("danger-h")},
+          #{cv.getVar("danger-s")},
+          #{cv.getVar("danger-on-scheme-l")}
+        ),
+      "code-background": #{cv.getVar("background")},
+      "pre": #{cv.getVar("text")},
+      "pre-background": #{cv.getVar("background")},
+      "shadow": (
+        0 0.5em 1em -0.125em hsla(#{cv.getVar("shadow-h")}, #{cv.getVar(
+                "shadow-s"
+              )}, #{cv.getVar("shadow-l")}, 0.1),
+        0 0px 0 1px
+          hsla(
+            #{cv.getVar("shadow-h")},
+            #{cv.getVar("shadow-s")},
+            #{cv.getVar("shadow-l")},
+            0.02
+          )
+      )
+    )
+  );
+}

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

@@ -0,0 +1,7 @@
+/* Bulma Utilities */
+@charset "utf-8";
+
+@forward "initial-variables";
+@forward "functions";
+@forward "derived-variables";
+@forward "controls";

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

@@ -0,0 +1,85 @@
+@use "css-variables" as cv;
+@use "derived-variables" as dv;
+@use "initial-variables" as iv;
+
+$control-radius: cv.getVar("radius") !default;
+$control-radius-small: cv.getVar("radius-small") !default;
+
+$control-border-width: 1px !default;
+$control-size: cv.getVar("size-normal") !default;
+
+$control-height: 2.5em !default;
+$control-line-height: 1.5 !default;
+
+$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default;
+$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
+
+$control-focus-shadow-l: 50% !default;
+
+:root {
+  @include cv.register-vars(
+    (
+      "control-radius": #{$control-radius},
+      "control-radius-small": #{$control-radius-small},
+      "control-border-width": #{$control-border-width},
+      "control-height": #{$control-height},
+      "control-line-height": #{$control-line-height},
+      "control-padding-vertical": #{$control-padding-vertical},
+      "control-padding-horizontal": #{$control-padding-horizontal},
+      "control-size": #{$control-size},
+      "control-focus-shadow-l": #{$control-focus-shadow-l},
+    )
+  );
+}
+
+@mixin control {
+  align-items: center;
+  appearance: none;
+  border-color: transparent;
+  border-style: solid;
+  border-width: cv.getVar("control-border-width");
+  border-radius: cv.getVar("control-radius");
+  box-shadow: none;
+  display: inline-flex;
+  font-size: cv.getVar("control-size");
+  height: cv.getVar("control-height");
+  justify-content: flex-start;
+  line-height: cv.getVar("control-line-height");
+  padding-bottom: cv.getVar("control-padding-vertical");
+  padding-left: cv.getVar("control-padding-horizontal");
+  padding-right: cv.getVar("control-padding-horizontal");
+  padding-top: cv.getVar("control-padding-vertical");
+  position: relative;
+  transition-duration: cv.getVar("duration");
+  transition-property: background-color, border-color, box-shadow, color;
+  vertical-align: top;
+
+  // States
+  &:focus,
+  &:focus-visible,
+  &:focus-within,
+  &.#{iv.$class-prefix}is-focused,
+  &:active,
+  &.#{iv.$class-prefix}is-active {
+    outline: none;
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
+}
+
+// The controls sizes use mixins so they can be used at different breakpoints
+@mixin control-small {
+  border-radius: $control-radius-small;
+  font-size: cv.getVar("size-small");
+}
+
+@mixin control-medium {
+  font-size: cv.getVar("size-medium");
+}
+
+@mixin control-large {
+  font-size: cv.getVar("size-large");
+}