Add SASS variables for colors

assets/sass/_button.sass

@@ -1,46 +1,49 @@
-.btn
-  +appearance
-  font-size: $text-medium
-  font-weight: normal
-  cursor: pointer
-  display: inline-block
-  color: #333
-  background: #f5f5f5
-  border: 1px solid #ddd
-  border-radius: 2px
-  padding: 3px 10px
-  margin: 0
+@import variables
 
 a.btn
   text-decoration: none
 
-.btn:hover
-  border: 1px solid #bbb
-  color: #000
-  background: #fafafa
+.btn
+  +appearance
+  font-size: size('medium')
+  font-weight: normal
+  cursor: pointer
+  display: inline-block
+  border-radius: 2px
+  padding: 3px 10px
+  margin: 0
+  border: 1px solid button-border-color('default')
+  background: button-bg-color('default')
+  color: button-color('default')
+  &:hover, &:focus
+    border-color: button-hover-border-color('default')
+    background: button-hover-bg-color('default')
+    color: button-hover-color('default')
 
 .btn-red
-  border-color: #b0281a
-  background: #d14836
-  color: #fff
+  border-color: button-border-color('red')
+  background: button-bg-color('red')
+  color: button-color('red')
   &:hover, &:focus
-    color: #fff
-    background: #c53727
+    border-color: button-hover-border-color('red')
+    background: button-hover-bg-color('red')
+    color: button-hover-color('red')
 
 .btn-blue
-  border-color: #3079ed
-  background: #4d90fe
-  color: #fff
+  border-color: button-border-color('blue')
+  background: button-bg-color('blue')
+  color: button-color('blue')
   &:hover, &:focus
-    border-color: #2f5bb7
-    background: #357ae8
-    color: #fff
+    border-color: button-hover-border-color('blue')
+    background: button-hover-bg-color('blue')
+    color: button-hover-color('blue')
 
 .btn:disabled
-  color: #ccc
-  border: 1px solid #ccc
-  background: #f7f7f7
+  color: button-color('disabled')
+  border-color: button-border-color('disabled')
+  background: button-bg-color('disabled')
 
 .buttons-header
-  font-size: 0.9em
+  font-size: size('small')
+  margin-top: 5px
   margin-bottom: 15px