Add white black light dark colors, Fix button inverted

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
 

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
+  background: $white
-  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)
   color: $text
   max-width: 100%
   position: relative

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)

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

sass/components/tabs.sass

@@ -49,7 +49,7 @@
       // Modifiers
       &.is-active
         a
-          background: white
+          background: $white
           border-color: $border
           border-bottom-color: transparent
     // Modifiers

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

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%)
+          background: $color
-          color: darken($color, 10%)
+          border-color: $color
+          color: $color-invert
   &.is-link
     background: transparent
     border-color: transparent

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"]

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

sass/elements/table.sass

@@ -1,5 +1,5 @@
 .table
-  background: white
+  background: $white
   color: $text-strong
   margin-bottom: 20px
   width: 100%

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)

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

sass/layout/section.sass

@@ -1,5 +1,5 @@
 .section
-  background: white
+  background: $white
   padding: 40px 20px
   // Responsiveness
   +desktop

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

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