From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Thu, 5 May 2016 23:23:00 +0000 (+0100)
Subject: Add white black light dark colors, Fix button inverted
X-Git-Tag: 0.0.25~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=15e6ecde1cc666dbb2d14c4323ac125b234ebe7b;p=thirdparty%2Fbulma.git

Add white black light dark colors, Fix button inverted
---

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ae65c9b2..69531428e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,8 @@
 ## 0.0.25
 
 * Added: `utilities/controls.sass` and `elements/form.sass`
+* Added: new responsive classes
+* Added: white/black and light/dark colors
 * Changed: `.tabs` need `.icon` now
 * Changed: cdnjs link doesn't include version
 
diff --git a/sass/components/card.sass b/sass/components/card.sass
index 991c63059..f5d33411a 100644
--- a/sass/components/card.sass
+++ b/sass/components/card.sass
@@ -1,6 +1,6 @@
 .card-header
   align-items: stretch
-  box-shadow: 0 1px 2px rgba(black, 0.1)
+  box-shadow: 0 1px 2px rgba($black, 0.1)
   display: flex
   min-height: 40px
 
@@ -43,8 +43,8 @@
     border-right: 1px solid $border
 
 .card
-  background: white
-  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  background: $white
+  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   color: $text
   max-width: 100%
   position: relative
diff --git a/sass/components/message.sass b/sass/components/message.sass
index 33d5e8c3c..83b8424e2 100644
--- a/sass/components/message.sass
+++ b/sass/components/message.sass
@@ -24,7 +24,7 @@
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
-    $lightning: (100% - lightness($color)) - 4%
+    $lightning: max((100% - lightness($color)) - 4%, 0%)
     $darkness: max(lightness($color) - 10%, lightness($color))
     &.is-#{$name}
       background: lighten($color, $lightning)
diff --git a/sass/components/modal.sass b/sass/components/modal.sass
index 87e7843eb..09d40ff0d 100644
--- a/sass/components/modal.sass
+++ b/sass/components/modal.sass
@@ -1,6 +1,6 @@
 .modal-background
   +overlay
-  background: rgba(black, 0.86)
+  background: rgba($black, 0.86)
 
 .modal-content
   margin: 0 20px
diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass
index 0e3aa9521..20bf23309 100644
--- a/sass/components/tabs.sass
+++ b/sass/components/tabs.sass
@@ -49,7 +49,7 @@
       // Modifiers
       &.is-active
         a
-          background: white
+          background: $white
           border-color: $border
           border-bottom-color: transparent
     // Modifiers
diff --git a/sass/elements/box.sass b/sass/elements/box.sass
index caf9c6ad7..23f02e517 100644
--- a/sass/elements/box.sass
+++ b/sass/elements/box.sass
@@ -1,14 +1,14 @@
 .box
   @extend .block
-  background: white
+  background: $white
   border-radius: 5px
-  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   display: block
   padding: 20px
 
 a.box
   &:hover,
   &:focus
-    box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
   &:active
-    box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
+    box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index db9e3d477..6f5327aeb 100644
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -42,7 +42,7 @@
   &:hover
     color: $control-hover
   &:active
-    box-shadow: inset 0 1px 2px rgba(black, 0.2)
+    box-shadow: inset 0 1px 2px rgba($black, 0.2)
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -63,14 +63,6 @@
         color: $color
         &:hover
           background: darken($color-invert, 5%)
-        &.is-outlined
-          background-color: transparent
-          border-color: $color-invert
-          color: $color-invert
-          &:hover
-            background: rgba(black, 0.05)
-            border-color: $color-invert
-            color: $color-invert
       &.is-loading
         &:after
           border-color: transparent transparent $color-invert $color-invert !important
@@ -80,8 +72,9 @@
         color: $color
         &:hover,
         &:focus
-          border-color: darken($color, 10%)
-          color: darken($color, 10%)
+          background: $color
+          border-color: $color
+          color: $color-invert
   &.is-link
     background: transparent
     border-color: transparent
diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 9a9bed083..5e38db858 100644
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -7,7 +7,7 @@
 
 .input
   +form-control
-  box-shadow: inset 0 1px 2px rgba(black, 0.1)
+  box-shadow: inset 0 1px 2px rgba($black, 0.1)
   max-width: 100%
   width: 100%
   &[type="search"]
diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index 42642e46e..9f78d0879 100644
--- a/sass/elements/other.sass
+++ b/sass/elements/other.sass
@@ -2,7 +2,7 @@
   +unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background: rgba(black, 0.2)
+  background: rgba($black, 0.2)
   border: none
   border-radius: 290486px
   cursor: pointer
@@ -13,7 +13,7 @@
   width: 24px
   &:before,
   &:after
-    background: white
+    background: $white
     content: ""
     display: block
     height: 2px
@@ -28,7 +28,7 @@
   &:after
     transform: rotate(-45deg)
   &:hover
-    background: rgba(black, 0.5)
+    background: rgba($black, 0.5)
   // Sizes
   &.is-small
     height: 16px
@@ -160,9 +160,6 @@
     &.is-#{$name}
       background: $color
       color: $color-invert
-  &.is-dark
-    background: $text
-    color: $text-invert
   // Sizes
   &.is-small
     font-size: $size-small
diff --git a/sass/elements/table.sass b/sass/elements/table.sass
index 1f994939f..192dfb56f 100644
--- a/sass/elements/table.sass
+++ b/sass/elements/table.sass
@@ -1,5 +1,5 @@
 .table
-  background: white
+  background: $white
   color: $text-strong
   margin-bottom: 20px
   width: 100%
diff --git a/sass/layout/header.sass b/sass/layout/header.sass
index 3b23f69ac..b1ed6c0ca 100644
--- a/sass/layout/header.sass
+++ b/sass/layout/header.sass
@@ -1,6 +1,6 @@
 .header
   +clearfix
-  background: white
+  background: $white
   display: flex
   line-height: 24px
   position: relative
@@ -12,7 +12,7 @@
     width: 100%
   // Modifiers
   &.has-shadow
-    box-shadow: 0 1px 2px rgba(black, 0.1)
+    box-shadow: 0 1px 2px rgba($black, 0.1)
   // Responsiveness
   +mobile
     .container
@@ -128,7 +128,7 @@ a.header-item
 .header-menu
   // Responsiveness
   +mobile
-    box-shadow: 0 4px 7px rgba(black, 0.1)
+    box-shadow: 0 4px 7px rgba($black, 0.1)
     display: none
     .header-item
       border-top: 1px solid rgba($border, 0.5)
diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass
index 1feff9066..b9d8de050 100644
--- a/sass/layout/hero.sass
+++ b/sass/layout/hero.sass
@@ -36,7 +36,7 @@
       margin-right: 20px
 
 .hero
-  background: white
+  background: $white
   .header
     background: none
     .container
@@ -89,7 +89,7 @@
           a
             color: $color-invert
             &:hover
-              background: rgba(black, 0.1)
+              background: rgba($black, 0.1)
           li.is-active a
             &,
             &:hover
@@ -106,7 +106,7 @@
           span
             background: $color-invert
           &:hover
-            background: rgba(black, 0.1)
+            background: rgba($black, 0.1)
           &.is-active
             span
               background: $color-invert
diff --git a/sass/layout/section.sass b/sass/layout/section.sass
index 98271a5ce..7b82c341a 100644
--- a/sass/layout/section.sass
+++ b/sass/layout/section.sass
@@ -1,5 +1,5 @@
 .section
-  background: white
+  background: $white
   padding: 40px 20px
   // Responsiveness
   +desktop
diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index ca7f72bee..661a72cc4 100644
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -29,6 +29,6 @@
 
 @function findColorInvert($color)
   @if (colorLuminance($color) > 0.8)
-    @return rgba(black, 0.5)
+    @return rgba($black, 0.5)
   @else
     @return white
diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass
index f6212acc6..5b1635ea5 100644
--- a/sass/utilities/variables.sass
+++ b/sass/utilities/variables.sass
@@ -2,11 +2,13 @@
 
 // Colors
 
+$black: #111 !default
 $grey-darker: #222324 !default
 $grey-dark: #69707a !default
 $grey: #aeb1b5 !default
 $grey-light: #d3d6db !default
 $grey-lighter: #f5f7fa !default
+$white: #fff !default
 
 $blue: #42afe3 !default
 $green: #97cd76 !default
@@ -62,7 +64,8 @@ $success: $green !default
 $warning: $yellow !default
 $danger: $red !default
 
-$dark: $grey-darker !default
+$light: $grey-lighter !default
+$dark: $grey-dark !default
 
 $text: $grey-dark !default
 
@@ -77,7 +80,8 @@ $success-invert: findColorInvert($success) !default
 $warning-invert: findColorInvert($warning) !default
 $danger-invert: findColorInvert($danger) !default
 
-$dark-invert: findColorInvert($dark) !default
+$light-invert: $dark !default
+$dark-invert: $light !default
 
 // General colors
 
@@ -142,6 +146,6 @@ $size-huge: $size-1 !default
 
 // 4. Lists and maps
 
-$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
+$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default