Add table variables

sass/elements/button.sass

@@ -55,7 +55,7 @@
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      border-color: transparent
+      border-width: 0
       color: $color-invert
       &:hover,
       &:focus,
@@ -63,8 +63,6 @@
         background-color: darken($color, 5%)
         border-color: transparent
         color: $color-invert
-      &:active
-        border-color: transparent
       &.is-inverted
         background-color: $color-invert
         color: $color
@@ -76,6 +74,7 @@
       &.is-outlined
         background-color: transparent
         border-color: $color
+        border-width: 1px
         color: $color
         &:hover,
         &:focus
@@ -84,12 +83,12 @@
           color: $color-invert
   &.is-link
     background-color: transparent
-    border-color: transparent
+    border-width: 0
     color: $text
     text-decoration: underline
     &:hover,
     &:focus
-      background-color: $border
+      background-color: $background
       color: $text-strong
   // Sizes
   &.is-small

sass/elements/form.sass

@@ -53,7 +53,7 @@
   &:hover
     color: $control-hover
   &.is-disabled
-    color: $text-light
+    color: $control-disabled
     pointer-events: none
     input
       pointer-events: none
@@ -82,13 +82,13 @@
     select
       width: 100%
   &:after
-    +arrow($link)
+    +arrow($control-active)
     margin-top: -6px
     right: 16px
     top: 50%
   &:hover
     &:after
-      border-color: $link-hover
+      border-color: $control-hover
   &.is-small
     height: 24px
     select
@@ -106,7 +106,7 @@
       padding-right: 52px
 
 .label
-  color: $text-strong
+  color: $control
   display: block
   font-weight: bold
   &:not(:last-child)
@@ -114,7 +114,7 @@
 
 .help
   display: block
-  font-size: $size-small
+  font-size: $control-size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -155,13 +155,13 @@
       &:focus
         z-index: 3
       &:first-child
-        border-radius: $radius 0 0 $radius
+        border-radius: $control-radius 0 0 $control-radius
         select
-          border-radius: $radius 0 0 $radius
+          border-radius: $control-radius 0 0 $control-radius
       &:last-child
-        border-radius: 0 $radius $radius 0
+        border-radius: 0 $control-radius $control-radius 0
         select
-          border-radius: 0 $radius $radius 0
+          border-radius: 0 $control-radius $control-radius 0
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0
@@ -178,14 +178,14 @@
   &.has-icon
     & > .fa
       +fa(14px, 24px)
-      color: $text-light
+      color: $control-icon
       pointer-events: none
       position: absolute
       top: 4px
       z-index: 4
     .input
       &:focus + .fa
-        color: $text-strong
+        color: $control-icon-active
       &.is-small + .fa
         font-size: 10.5px
         top: 0

sass/elements/other.sass

@@ -24,9 +24,6 @@
   text-align: center
   vertical-align: top
 
-.hamburger
-  +hamburger
-
 .icon
   +fa(21px, 24px)
   .fa

sass/elements/table.sass

@@ -1,14 +1,23 @@
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
+$table: $text-strong !default
+$table-background: $white !default
+$table-border: $border !default
+
+$table-head: $text-light !default
+
+$table-row-hover-background: $white-ter !default
+$table-row-even-background: $white-bis !default
+
 .table
-  background-color: $white
-  color: $text-strong
+  background-color: $table-background
+  color: $table
   margin-bottom: 20px
   width: 100%
   td,
   th
-    border: 1px solid $border
+    border: 1px solid $table-border
     border-width: 0 0 1px
     padding: 8px 10px
     vertical-align: top
@@ -40,13 +49,12 @@
     text-align: left
   tr
     &:hover
-      background-color: $background
-      color: $text-strong
+      background-color: $table-row-hover-background
   thead
     td,
     th
       border-width: 0 0 2px
-      color: $text-light
+      color: $table-head
   tbody
     tr
       &:last-child
@@ -57,7 +65,7 @@
     td,
     th
       border-width: 2px 0 0
-      color: $text-light
+      color: $table-head
   // Modifiers
   &.is-bordered
     td,
@@ -86,9 +94,7 @@
   &.is-striped
     tbody
       tr
-        &:hover
-          background-color: darken($background, 2%)
-        &:nth-child(2n)
-          background-color: $background
+        &:nth-child(even)
+          background-color: $table-row-even-background
           &:hover
-            background-color: darken($background, 2%)
+            background-color: $table-row-hover-background