Add white black light dark colors, Fix button inverted

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%)
-          color: darken($color, 10%)
+          background: $color
+          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%