Add white black light dark colors, Fix button inverted

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