Add white black light dark colors, Fix button inverted

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ae65c9b2e7dd2f18c2f093b43769c73add68dd6..69531428edcd257dfa9b4310541dbd0a202a389a 100644 (file)
--- 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 991c630595bc4f7e950609315dd13ce8cae3187d..f5d33411a95b579ce984fdbcf5a2a21cb72111a0 100644 (file)
--- 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 33d5e8c3c1d8dc9d8351055c091e218c6044d5ae..83b8424e231a9cd506044192bfe445aa52e4eedf 100644 (file)
--- 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 87e7843ebdec27419593c253146fb0c39d4a1ca1..09d40ff0de65b4673bd13cf4878ebaf452a7c1f1 100644 (file)
--- 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 0e3aa9521163ba8f31340484b387ddd7f9e99312..20bf233096cdb2851dca220bcbbbc05e37fe0940 100644 (file)
--- 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 caf9c6ad7056620961ddbb8c22639abaf703fdf8..23f02e5178624d12d1b32b00246a544059fdc89c 100644 (file)
--- 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 db9e3d4771232b740317310493af2cac249fa89d..6f5327aeb24797f04103220904abed0e2bab6b4f 100644 (file)
--- 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 9a9bed083c1336e756aec5ffbdd95b8faf6760bc..5e38db8580adf8193a7ea459e7a1d7aaf946a966 100644 (file)
--- 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 42642e46e3fa02c2a3ddb1f39dc706bcaf054fce..9f78d087967b17656c60cc1ad7fd686c0cf71af7 100644 (file)
--- 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 1f994939f7f6bc39e7c80f15435815f5c05dd661..192dfb56fb555d58f2751662843d83b940db361e 100644 (file)
--- 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 3b23f69acf978a7857f8f2fc31a3fef4cf8b8ca1..b1ed6c0ca6548ba4f2de83aabc8fb4663c57e637 100644 (file)
--- 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 1feff90669cc47fad242e5ee28a605f698c125d7..b9d8de05080c24c61f0b1777dc56b44101bb1e2c 100644 (file)
--- 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 98271a5ce6aca59a58891a9f2aa4afe6aabcf196..7b82c341ad519234716e658f267162e7c422f7c8 100644 (file)
--- 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 ca7f72beed203cec5f057a0bc0f14fc522299152..661a72cc446ea5958b60e4f98493ca5fa6964f21 100644 (file)
--- 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 f6212acc6f9d0c745943ecfd852d5cecd07b8279..5b1635ea5c33abb13f9b0532edcac182174a8f7c 100644 (file)
--- 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