From 344704feaefb3f94bc57fd7bc6ac96bc815820ab Mon Sep 17 00:00:00 2001
From: Jim Campbell <jcampbell@drwholdings.com>
Date: Thu, 26 Mar 2020 11:35:29 -0500
Subject: [PATCH] Bulma 0.8.1

---
 LICENSE                     |  4 ++--
 README.md                   |  2 +-
 base/_helpers.scss          |  2 +-
 bulma.scss                  |  2 +-
 components/_media.scss      |  2 +-
 components/_modal.scss      |  2 +-
 components/_navbar.scss     | 21 ++++++++-----------
 components/_panel.scss      |  3 ++-
 elements/_button.scss       | 19 +++++++++--------
 elements/_notification.scss | 11 ++++++++++
 form/_file.scss             | 14 ++++++-------
 form/_input-textarea.scss   |  2 +-
 form/_select.scss           |  4 ++--
 form/_shared.scss           |  6 +++---
 layout/_hero.scss           | 41 ++++++++++++++++++++-----------------
 package.json                |  2 +-
 utilities/_functions.scss   | 20 ++++++++++++++++++
 utilities/_mixins.scss      |  8 ++++----
 18 files changed, 99 insertions(+), 66 deletions(-)

diff --git a/LICENSE b/LICENSE
index 9efaed3..b60e6eb 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Jeremy Thomas
-Copyright (c) 2019 Jim Campbell
+Copyright (c) 2020 Jeremy Thomas
+Copyright (c) 2020 Jim Campbell
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 57ba250..29f3dfe 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 This is a port of the [Bulma](https://bulma.io/) project SASS files to the
 SCSS syntax.
 
-Currently, these files are based on Bulma version 0.8.0, and will be updated
+Currently, these files are based on Bulma version 0.8.1, and will be updated
 with later releases. The files are converted to SCSS with
 [this script](https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164).
 
diff --git a/base/_helpers.scss b/base/_helpers.scss
index 463628f..420d10a 100644
--- a/base/_helpers.scss
+++ b/base/_helpers.scss
@@ -166,7 +166,7 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig
   a.has-text-#{$name} {
     &:hover,
     &:focus {
-      color: darken($color, 10%) !important;
+      color: bulmaDarken($color, 10%) !important;
     }
   }
 
diff --git a/bulma.scss b/bulma.scss
index 37feff9..2414daa 100644
--- a/bulma.scss
+++ b/bulma.scss
@@ -1,4 +1,4 @@
-/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.8.1 | MIT License | github.com/jgthms/bulma */
 @import "utilities/_all";
 @import "base/_all";
 @import "elements/_all";
diff --git a/components/_media.scss b/components/_media.scss
index 08b8c6b..cfe9b92 100644
--- a/components/_media.scss
+++ b/components/_media.scss
@@ -1,4 +1,4 @@
-$media-border-color: rgba($border, 0.5) !default;
+$media-border-color: bulmaRgba($border, 0.5) !default;
 
 .media {
   align-items: flex-start;
diff --git a/components/_modal.scss b/components/_modal.scss
index 4d239e5..8d2854e 100644
--- a/components/_modal.scss
+++ b/components/_modal.scss
@@ -1,6 +1,6 @@
 $modal-z: 40 !default;
 
-$modal-background-background-color: rgba($scheme-invert, 0.86) !default;
+$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default;
 
 $modal-content-width: 640px !default;
 $modal-content-margin-mobile: 20px !default;
diff --git a/components/_navbar.scss b/components/_navbar.scss
index e9dd914..3d3b893 100644
--- a/components/_navbar.scss
+++ b/components/_navbar.scss
@@ -32,7 +32,7 @@ $navbar-dropdown-radius: $radius-large !default;
 $navbar-dropdown-z: 20 !default;
 
 $navbar-dropdown-boxed-radius: $radius-large !default;
-$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default;
+$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default;
 
 $navbar-dropdown-item-hover-color: $scheme-invert !default;
 $navbar-dropdown-item-hover-background-color: $background !default;
@@ -78,7 +78,7 @@ $navbar-breakpoint: $desktop !default;
           &:focus,
           &:hover,
           &.is-active {
-            background-color: darken($color, 5%);
+            background-color: bulmaDarken($color, 5%);
             color: $color-invert;
           }
         }
@@ -107,7 +107,7 @@ $navbar-breakpoint: $desktop !default;
             &:focus,
             &:hover,
             &.is-active {
-              background-color: darken($color, 5%);
+              background-color: bulmaDarken($color, 5%);
               color: $color-invert;
             }
           }
@@ -122,7 +122,7 @@ $navbar-breakpoint: $desktop !default;
         .navbar-item.has-dropdown:focus .navbar-link,
         .navbar-item.has-dropdown:hover .navbar-link,
         .navbar-item.has-dropdown.is-active .navbar-link {
-          background-color: darken($color, 5%);
+          background-color: bulmaDarken($color, 5%);
           color: $color-invert;
         }
 
@@ -245,7 +245,6 @@ a.navbar-item,
 }
 
 .navbar-item {
-  display: block;
   flex-grow: 0;
   flex-shrink: 0;
 
@@ -341,7 +340,7 @@ a.navbar-item,
 
   .navbar-menu {
     background-color: $navbar-background-color;
-    box-shadow: 0 8px 16px rgba($scheme-invert, 0.1);
+    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
     padding: 0.5rem 0;
 
     &.is-active {
@@ -360,7 +359,7 @@ a.navbar-item,
       bottom: 0;
 
       &.has-shadow {
-        box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1);
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1);
       }
     }
 
@@ -467,8 +466,6 @@ a.navbar-item,
   }
 
   .navbar-item {
-    display: flex;
-
     &.has-dropdown {
       align-items: stretch;
     }
@@ -483,7 +480,7 @@ a.navbar-item,
         border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0;
         border-top: none;
         bottom: 100%;
-        box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1);
+        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1);
         top: auto;
       }
     }
@@ -525,7 +522,7 @@ a.navbar-item,
     border-bottom-left-radius: $navbar-dropdown-radius;
     border-bottom-right-radius: $navbar-dropdown-radius;
     border-top: $navbar-dropdown-border-top;
-    box-shadow: 0 8px 8px rgba($scheme-invert, 0.1);
+    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1);
     display: none;
     font-size: 0.875rem;
     left: 0;
@@ -600,7 +597,7 @@ a.navbar-item,
       bottom: 0;
 
       &.has-shadow {
-        box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1);
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1);
       }
     }
 
diff --git a/components/_panel.scss b/components/_panel.scss
index 26c3376..cefd9c8 100644
--- a/components/_panel.scss
+++ b/components/_panel.scss
@@ -26,6 +26,7 @@ $panel-block-active-color: $link-active !default;
 $panel-block-active-icon-color: $link !default;
 
 $panel-icon-color: $text-light !default;
+$panel-colors: $colors !default;
 
 .panel {
   border-radius: $panel-radius;
@@ -37,7 +38,7 @@ $panel-icon-color: $text-light !default;
   }
 
   // Colors
-  @each $name, $components in $message-colors {
+  @each $name, $components in $panel-colors {
     $color: nth($components, 1);
     $color-invert: nth($components, 2);
 
diff --git a/elements/_button.scss b/elements/_button.scss
index e954f35..0f06219 100644
--- a/elements/_button.scss
+++ b/elements/_button.scss
@@ -14,12 +14,13 @@ $button-hover-border-color: $link-hover-border !default;
 $button-focus-color: $link-focus !default;
 $button-focus-border-color: $link-focus-border !default;
 $button-focus-box-shadow-size: 0 0 0 0.125em !default;
-$button-focus-box-shadow-color: rgba($link, 0.25) !default;
+$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
 
 $button-active-color: $link-active !default;
 $button-active-border-color: $link-active-border !default;
 
 $button-text-color: $text !default;
+$button-text-decoration: underline !default;
 $button-text-hover-background-color: $background !default;
 $button-text-hover-color: $text-strong !default;
 
@@ -130,7 +131,7 @@ $button-static-border-color: $border !default;
     background-color: transparent;
     border-color: transparent;
     color: $button-text-color;
-    text-decoration: underline;
+    text-decoration: $button-text-decoration;
 
     &:hover,
     &.is-hovered,
@@ -142,7 +143,7 @@ $button-static-border-color: $border !default;
 
     &:active,
     &.is-active {
-      background-color: darken($button-text-hover-background-color, 5%);
+      background-color: bulmaDarken($button-text-hover-background-color, 5%);
       color: $button-text-hover-color;
     }
 
@@ -165,7 +166,7 @@ $button-static-border-color: $border !default;
 
       &:hover,
       &.is-hovered {
-        background-color: darken($color, 2.5%);
+        background-color: bulmaDarken($color, 2.5%);
         border-color: transparent;
         color: $color-invert;
       }
@@ -176,13 +177,13 @@ $button-static-border-color: $border !default;
         color: $color-invert;
 
         &:not(:active) {
-          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25);
+          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25);
         }
       }
 
       &:active,
       &.is-active {
-        background-color: darken($color, 5%);
+        background-color: bulmaDarken($color, 5%);
         border-color: transparent;
         color: $color-invert;
       }
@@ -200,7 +201,7 @@ $button-static-border-color: $border !default;
 
         &:hover,
         &.is-hovered {
-          background-color: darken($color-invert, 5%);
+          background-color: bulmaDarken($color-invert, 5%);
         }
 
         &[disabled],
@@ -300,14 +301,14 @@ $button-static-border-color: $border !default;
 
           &:hover,
           &.is-hovered {
-            background-color: darken($color-light, 2.5%);
+            background-color: bulmaDarken($color-light, 2.5%);
             border-color: transparent;
             color: $color-dark;
           }
 
           &:active,
           &.is-active {
-            background-color: darken($color-light, 5%);
+            background-color: bulmaDarken($color-light, 5%);
             border-color: transparent;
             color: $color-dark;
           }
diff --git a/elements/_notification.scss b/elements/_notification.scss
index 71e8898..1577357 100644
--- a/elements/_notification.scss
+++ b/elements/_notification.scss
@@ -49,6 +49,17 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;
     &.is-#{$name} {
       background-color: $color;
       color: $color-invert;
+
+      // If light and dark colors are provided
+      @if length($pair) >= 4 {
+        $color-light: nth($pair, 3);
+        $color-dark: nth($pair, 4);
+
+        &.is-light {
+          background-color: $color-light;
+          color: $color-dark;
+        }
+      }
     }
   }
 }
diff --git a/form/_file.scss b/form/_file.scss
index 378135e..1ef7b95 100644
--- a/form/_file.scss
+++ b/form/_file.scss
@@ -34,7 +34,7 @@ $file-name-max-width: 16em !default;
       &:hover,
       &.is-hovered {
         .file-cta {
-          background-color: darken($color, 2.5%);
+          background-color: bulmaDarken($color, 2.5%);
           border-color: transparent;
           color: $color-invert;
         }
@@ -44,7 +44,7 @@ $file-name-max-width: 16em !default;
       &.is-focused {
         .file-cta {
           border-color: transparent;
-          box-shadow: 0 0 0.5em rgba($color, 0.25);
+          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25);
           color: $color-invert;
         }
       }
@@ -52,7 +52,7 @@ $file-name-max-width: 16em !default;
       &:active,
       &.is-active {
         .file-cta {
-          background-color: darken($color, 5%);
+          background-color: bulmaDarken($color, 5%);
           border-color: transparent;
           color: $color-invert;
         }
@@ -202,23 +202,23 @@ $file-name-max-width: 16em !default;
 
   &:hover {
     .file-cta {
-      background-color: darken($file-cta-background-color, 2.5%);
+      background-color: bulmaDarken($file-cta-background-color, 2.5%);
       color: $file-cta-hover-color;
     }
 
     .file-name {
-      border-color: darken($file-name-border-color, 2.5%);
+      border-color: bulmaDarken($file-name-border-color, 2.5%);
     }
   }
 
   &:active {
     .file-cta {
-      background-color: darken($file-cta-background-color, 5%);
+      background-color: bulmaDarken($file-cta-background-color, 5%);
       color: $file-cta-active-color;
     }
 
     .file-name {
-      border-color: darken($file-name-border-color, 5%);
+      border-color: bulmaDarken($file-name-border-color, 5%);
     }
   }
 }
diff --git a/form/_input-textarea.scss b/form/_input-textarea.scss
index 798940e..37bf4dc 100644
--- a/form/_input-textarea.scss
+++ b/form/_input-textarea.scss
@@ -24,7 +24,7 @@ $textarea-min-height: 8em !default;
       &.is-focused,
       &:active,
       &.is-active {
-        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25);
+        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
       }
     }
   }
diff --git a/form/_select.scss b/form/_select.scss
index 03a1be2..99182ea 100644
--- a/form/_select.scss
+++ b/form/_select.scss
@@ -78,14 +78,14 @@
 
         &:hover,
         &.is-hovered {
-          border-color: darken($color, 5%);
+          border-color: bulmaDarken($color, 5%);
         }
 
         &:focus,
         &.is-focused,
         &:active,
         &.is-active {
-          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25);
+          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
         }
       }
     }
diff --git a/form/_shared.scss b/form/_shared.scss
index c2efbf2..4e36f87 100644
--- a/form/_shared.scss
+++ b/form/_shared.scss
@@ -3,7 +3,7 @@ $input-background-color: $scheme-main !default;
 $input-border-color: $border !default;
 $input-height: $control-height !default;
 $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default;
-$input-placeholder-color: rgba($input-color, 0.3) !default;
+$input-placeholder-color: bulmaRgba($input-color, 0.3) !default;
 
 $input-hover-color: $text-strong !default;
 $input-hover-border-color: $border-hover !default;
@@ -11,12 +11,12 @@ $input-hover-border-color: $border-hover !default;
 $input-focus-color: $text-strong !default;
 $input-focus-border-color: $link !default;
 $input-focus-box-shadow-size: 0 0 0 0.125em !default;
-$input-focus-box-shadow-color: rgba($link, 0.25) !default;
+$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
 
 $input-disabled-color: $text-light !default;
 $input-disabled-background-color: $background !default;
 $input-disabled-border-color: $background !default;
-$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default;
+$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default;
 
 $input-arrow: $link !default;
 
diff --git a/layout/_hero.scss b/layout/_hero.scss
index 80d9988..31cb3a3 100644
--- a/layout/_hero.scss
+++ b/layout/_hero.scss
@@ -1,5 +1,9 @@
-// Main container
+$hero-body-padding: 3rem 1.5rem !default;
+$hero-body-padding-small: 1.5rem !default;
+$hero-body-padding-medium: 9rem 1.5rem !default;
+$hero-body-padding-large: 18rem 1.5rem !default;
 
+// Main container
 .hero {
   align-items: stretch;
   display: flex;
@@ -35,7 +39,7 @@
       }
 
       .subtitle {
-        color: rgba($color-invert, 0.9);
+        color: bulmaRgba($color-invert, 0.9);
 
         a:not(.button),
         strong {
@@ -51,14 +55,14 @@
 
       .navbar-item,
       .navbar-link {
-        color: rgba($color-invert, 0.7);
+        color: bulmaRgba($color-invert, 0.7);
       }
 
       a.navbar-item,
       .navbar-link {
         &:hover,
         &.is-active {
-          background-color: darken($color, 5%);
+          background-color: bulmaDarken($color, 5%);
           color: $color-invert;
         }
       }
@@ -85,7 +89,7 @@
             color: $color-invert;
 
             &:hover {
-              background-color: rgba($scheme-invert, 0.1);
+              background-color: bulmaRgba($scheme-invert, 0.1);
             }
           }
 
@@ -101,15 +105,17 @@
       }
 
       // Modifiers
-      &.is-bold {
-        $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%);
-        $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%);
+      @if type-of($color) == "color" {
+        &.is-bold {
+          $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%);
+          $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%);
 
-        background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%);
+          background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%);
 
-        @include mobile {
-          .navbar-menu {
-            background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%);
+          @include mobile {
+            .navbar-menu {
+              background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%);
+            }
           }
         }
       }
@@ -119,16 +125,14 @@
   // Sizes
   &.is-small {
     .hero-body {
-      padding-bottom: 1.5rem;
-      padding-top: 1.5rem;
+      padding: $hero-body-padding-small;
     }
   }
 
   &.is-medium {
     @include tablet {
       .hero-body {
-        padding-bottom: 9rem;
-        padding-top: 9rem;
+        padding: $hero-body-padding-medium;
       }
     }
   }
@@ -136,8 +140,7 @@
   &.is-large {
     @include tablet {
       .hero-body {
-        padding-bottom: 18rem;
-        padding-top: 18rem;
+        padding: $hero-body-padding-large;
       }
     }
   }
@@ -228,5 +231,5 @@
 .hero-body {
   flex-grow: 1;
   flex-shrink: 0;
-  padding: 3rem 1.5rem;
+  padding: $hero-body-padding;
 }
diff --git a/package.json b/package.json
index c084662..e26cc84 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bulma-scss",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "The Bulma CSS Framework files converted to SCSS syntax",
   "main": "bulma.scss",
   "scripts": {
diff --git a/utilities/_functions.scss b/utilities/_functions.scss
index 2b5163c..bd9623e 100644
--- a/utilities/_functions.scss
+++ b/utilities/_functions.scss
@@ -82,6 +82,10 @@
 }
 
 @function colorLuminance($color) {
+  @if type-of($color) != "color" {
+    @return 0.55;
+  }
+
   $color-rgb: ("red": red($color), "green": green($color), "blue": blue($color));
 
   @each $name, $value in $color-rgb {
@@ -137,3 +141,19 @@
 
   @return $text-strong;
 }
+
+@function bulmaRgba($color, $alpha) {
+  @if type-of($color) != "color" {
+    @return $color;
+  }
+
+  @return rgba($color, $alpha);
+}
+
+@function bulmaDarken($color, $amount) {
+  @if type-of($color) != "color" {
+    @return $color;
+  }
+
+  @return darken($color, $amount);
+}
diff --git a/utilities/_mixins.scss b/utilities/_mixins.scss
index b4f88a5..294f524 100644
--- a/utilities/_mixins.scss
+++ b/utilities/_mixins.scss
@@ -64,7 +64,7 @@
   }
 
   &:hover {
-    background-color: rgba(black, 0.05);
+    background-color: bulmaRgba(black, 0.05);
   }
 
   // Modifers
@@ -241,7 +241,7 @@
 
   -moz-appearance: none;
   -webkit-appearance: none;
-  background-color: rgba($scheme-invert, 0.2);
+  background-color: bulmaRgba($scheme-invert, 0.2);
   border: none;
   border-radius: $radius-rounded;
   cursor: pointer;
@@ -284,11 +284,11 @@
 
   &:hover,
   &:focus {
-    background-color: rgba($scheme-invert, 0.3);
+    background-color: bulmaRgba($scheme-invert, 0.3);
   }
 
   &:active {
-    background-color: rgba($scheme-invert, 0.4);
+    background-color: bulmaRgba($scheme-invert, 0.4);
   }
 
   // Sizes