Color "skins" (#1242)

* Add YIQ Color Contrast mixin
* Remove text underline from `.btn` links
* Move YIQ variables
* Simplify button classes using YIQ color contrast mixin
  - DRY up button CSS using Sass list and YIQ color contrast mixin.
  - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them.
* Add `.btn--primary` to buttons that just had `.btn`
* Apply changes to `/docs`
* Add `.btn--primary` class
* Update CHANGELOG and history
* Add sample form
* Abstract colors away into Sass variables for easier themeing
* Add "dark" skin
* Replace hardcoded color with SCSS variable
* Invert Font Awesome icons' colors in author sidebar and footer
* Add Sass changes to `/docs`
* Use primary button type instead of inverse
* Add missing `!default` on `$muted-text-color`
* Add `contrast` and `sunrise` skin colors
* Add `dirt` skin color
* Add `air` skin color option
* Add `mint` skin color
* Add `btn--primary` class to Submit Comment button
* Set skin to `default`
* Document skin color options
* Add note about skin SCSS import

Close #1208

docs/_sass/minimal-mistakes/_buttons.scss

@@ -7,25 +7,19 @@
    ========================================================================== */
 
 .btn {
-  /* default button */
+  /* default */
   display: inline-block;
   margin-bottom: 0.25em;
   padding: 0.5em 1em;
-  color: #fff !important;
   font-family: $sans-serif;
   font-size: $type-size-6;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
-  background-color: $primary-color;
-  border: 0 !important;
+  border-width: 0;
   border-radius: $border-radius;
   cursor: pointer;
 
-  &:hover {
-    background-color: mix(white, #000, 20%);
-  }
-
   .icon {
     margin-right: 0.5em;
   }
@@ -34,8 +28,41 @@
     margin-left: -0.5em; /* override for hidden text*/
   }
 
-  /* fills width of parent container */
+  /* button colors */
+  $buttoncolors:
+  (primary, $primary-color),
+  (inverse, #fff),
+  (light-outline, transparent),
+  (success, $success-color),
+  (warning, $warning-color),
+  (danger, $danger-color),
+  (info, $info-color),
+  (facebook, $facebook-color),
+  (twitter, $twitter-color),
+  (google-plus, $google-plus-color),
+  (linkedin, $linkedin-color);
 
+  @each $buttoncolor, $color in $buttoncolors {
+    &--#{$buttoncolor} {
+      @include yiq-contrasted($color);
+      @if ($buttoncolor == inverse) {
+        border: 1px solid $border-color;
+      }
+      @if ($buttoncolor == light-outline) {
+        border: 1px solid #fff;
+      }
+
+      &:hover {
+        @include yiq-contrasted(mix(#000, $color, 20%));
+      }
+
+      &:visited {
+        @include yiq-contrasted($color);
+      }
+    }
+  }
+
+  /* fills width of parent container */
   &--block {
     display: block;
     width: 100%;
@@ -45,68 +72,7 @@
     }
   }
 
-  /* for dark backgrounds */
-
-  &--inverse {
-    color: $gray !important;
-    border: 1px solid $light-gray !important; /* override*/
-    background-color: #fff;
-
-    &:hover {
-      color: #fff !important;
-      border-color: $gray;
-    }
-  }
-
-  /* light outline */
-
-  &--light-outline {
-    border: 1px solid #fff !important; /* override*/
-    background-color: transparent;
-  }
-
-  /* information */
-
-  &--info {
-    background-color: $info-color;
-
-    &:hover {
-      background-color: mix(#000, $info-color, 20%);
-    }
-  }
-
-  /* warning */
-
-  &--warning {
-    background-color: $warning-color;
-
-    &:hover {
-      background-color: mix(#000, $warning-color, 20%);
-    }
-  }
-
-  /* success */
-
-  &--success {
-    background-color: $success-color;
-
-    &:hover {
-      background-color: mix(#000, $success-color, 20%);
-    }
-  }
-
-  /* danger */
-
-  &--danger {
-    background-color: $danger-color;
-
-    &:hover {
-      background-color: mix(#000, $danger-color, 20%);
-    }
-  }
-
   /* disabled */
-
   &--disabled {
     pointer-events: none;
     cursor: not-allowed;
@@ -115,38 +81,17 @@
     opacity: 0.65;
   }
 
-  /* social buttons */
-
-  $social:
-  (facebook, $facebook-color),
-  (twitter, $twitter-color),
-  (google-plus, $google-plus-color),
-  (linkedin, $linkedin-color);
-
-  @each $socialnetwork, $color in $social {
-    &--#{$socialnetwork} {
-      background-color: $color;
-
-      &:hover {
-        background-color: mix(#000, $color, 20%);
-      }
-    }
-  }
-
   /* extra large button */
-
   &--x-large {
     font-size: $type-size-4;
   }
 
   /* large button */
-
   &--large {
     font-size: $type-size-5;
   }
 
   /* small button */
-
   &--small {
     font-size: $type-size-7;
   }