Add white black light dark colors, Fix button inverted

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

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