Update shades of grey

docs/documentation/elements/form.html

@@ -479,7 +479,7 @@ doc-subtab: form
     </select>
   </span>
   <input class="input is-expanded" type="text" placeholder="Amount of money">
-  <a class="button is-success">
+  <a class="button">
     Transfer
   </a>
 </p>
@@ -494,7 +494,7 @@ doc-subtab: form
     </select>
   </span>
   <input class="input is-expanded" type="text" placeholder="Amount of money">
-  <a class="button is-success">
+  <a class="button">
     Transfer
   </a>
 </p>
@@ -512,7 +512,7 @@ doc-subtab: form
     </select>
   </span>
   <input class="input" type="text" placeholder="Amount of money">
-  <a class="button is-success">
+  <a class="button is-primary">
     Transfer
   </a>
 </p>
@@ -527,7 +527,7 @@ doc-subtab: form
     </select>
   </span>
   <input class="input" type="text" placeholder="Amount of money">
-  <a class="button is-success">
+  <a class="button is-primary">
     Transfer
   </a>
 </p>
@@ -542,7 +542,7 @@ doc-subtab: form
     </select>
   </span>
   <input class="input" type="text" placeholder="Amount of money">
-  <a class="button is-success">
+  <a class="button is-primary">
     Transfer
   </a>
 </p>
@@ -557,7 +557,7 @@ doc-subtab: form
     </select>
   </span>
   <input class="input" type="text" placeholder="Amount of money">
-  <a class="button is-success">
+  <a class="button is-primary">
     Transfer
   </a>
 </p>

sass/utilities/variables.sass

@@ -2,21 +2,13 @@
 
 // Colors
 
-$black: #111 !default
-$grey-darker: #222324 !default
-$grey-dark: #69707a !default
-$grey: #aeb1b5 !default
-$grey-light: #d3d6db !default
-$grey-lighter: #f5f7fa !default
-$white: #fff !default
-
-// $blue: #42afe3 !default
-// $green: #97cd76 !default
-// $orange: #f68b39 !default
-// $purple: #847bb9 !default
-// $red: #ed6c63 !default
-// $turquoise: #1fc8db !default
-// $yellow: #fce473 !default
+$black:        hsl(0, 0%, 7%) !default
+$grey-darker:  hsl(0, 0%, 14%) !default
+$grey-dark:    hsl(0, 0%, 48%) !default
+$grey:         hsl(0, 0%, 71%) !default
+$grey-light:   hsl(0, 0%, 86%) !default
+$grey-lighter: hsl(0, 0%, 96%) !default
+$white:        hsl(0, 0%, 100%) !default
 
 $orange:    hsl(14,  100%, 53%) !default
 $yellow:    hsl(48,  100%, 53%) !default
@@ -28,8 +20,8 @@ $red:       hsl(348, 100%, 53%) !default
 
 // Typography
 
-$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace !default
+$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
 $size-1: 48px !default
 $size-2: 40px !default