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

test/_config.yml

@@ -6,6 +6,7 @@
 # `jekyll serve`. If you change this file, please restart the server process.
 
 theme                    : "minimal-mistakes-jekyll"
+minimal_mistakes_skin    : "default" # "air", "contrast", "dark", "dirt", "mint", "sunrise"
 
 # Site Settings
 locale                   : "en"

test/_pages/splash-page.md

@@ -24,7 +24,7 @@ feature_row:
     excerpt: "This is some sample content that goes here with **Markdown** formatting."
     url: "#test-link"
     btn_label: "Read More"
-    btn_class: "btn--inverse"
+    btn_class: "btn--primary"
   - image_path: /assets/images/unsplash-gallery-image-3-th.jpg
     title: "Placeholder 3"
     excerpt: "This is some sample content that goes here with **Markdown** formatting."
@@ -35,7 +35,7 @@ feature_row2:
     excerpt: 'This is some sample content that goes here with **Markdown** formatting. Left aligned with `type="left"`'
     url: "#test-link"
     btn_label: "Read More"
-    btn_class: "btn--inverse"
+    btn_class: "btn--primary"
 feature_row3:
   - image_path: /assets/images/unsplash-gallery-image-2-th.jpg
     alt: "placeholder image 2"
@@ -43,7 +43,7 @@ feature_row3:
     excerpt: 'This is some sample content that goes here with **Markdown** formatting. Right aligned with `type="right"`'
     url: "#test-link"
     btn_label: "Read More"
-    btn_class: "btn--inverse"
+    btn_class: "btn--primary"
 feature_row4:
   - image_path: /assets/images/unsplash-gallery-image-2-th.jpg
     alt: "placeholder image 2"
@@ -51,7 +51,7 @@ feature_row4:
     excerpt: 'This is some sample content that goes here with **Markdown** formatting. Centered with `type="center"`'
     url: "#test-link"
     btn_label: "Read More"
-    btn_class: "btn--inverse"
+    btn_class: "btn--primary"
 ---
 
 {% include feature_row id="intro" type="center" %}

test/_posts/2013-01-11-markup-html-tags-and-formatting.md

@@ -102,6 +102,17 @@ Do It Live
   3. List item three
   4. List item four
 
+## Forms
+
+<form>
+  <fieldset>
+    <legend>Personalia:</legend>
+    Name: <input type="text" size="30"><br>
+    Email: <input type="text" size="30"><br>
+    Date of birth: <input type="text" size="10">
+  </fieldset>
+</form>
+
 ## Buttons
 
 Make any link standout more when applying the `.btn` class.
@@ -110,7 +121,8 @@ Make any link standout more when applying the `.btn` class.
 <a href="#" class="btn--success">Success Button</a>
 ```
 
-[Primary Button](#){: .btn}
+[Default Button](#){: .btn}
+[Primary Button](#){: .btn .btn--primary}
 [Success Button](#){: .btn .btn--success}
 [Warning Button](#){: .btn .btn--warning}
 [Danger Button](#){: .btn .btn--danger}
@@ -119,7 +131,8 @@ Make any link standout more when applying the `.btn` class.
 [Light Outline Button](#){: .btn .btn--light-outline}
 
 ```markdown
-[Primary Button Text](#link){: .btn}
+[Default Button Text](#link){: .btn}
+[Primary Button Text](#link){: .btn .btn--primary}
 [Success Button Text](#link){: .btn .btn--success}
 [Warning Button Text](#link){: .btn .btn--warning}
 [Danger Button Text](#link){: .btn .btn--danger}
@@ -128,23 +141,38 @@ Make any link standout more when applying the `.btn` class.
 [Light Outline Button](#link){: .btn .btn--light-outline}
 ```
 
-[X-Large Button](#){: .btn .btn--x-large}
-[Large Button](#){: .btn .btn--large}
-[Default Button](#){: .btn}
-[Small Button](#){: .btn .btn--small}
+[X-Large Button](#){: .btn .btn--primary .btn--x-large}
+[Large Button](#){: .btn .btn--primary .btn--large}
+[Default Button](#){: .btn .btn--primary }
+[Small Button](#){: .btn .btn--primary .btn--small}
 
 ```markdown
-[X-Large Button](#link){: .btn .btn--x-large}
-[Large Button](#link){: .btn .btn--large}
-[Default Button](#link){: .btn}
-[Small Button](#link){: .btn .btn--small}
+[X-Large Button](#link){: .btn .btn--primary .btn--x-large}
+[Large Button](#link){: .btn .btn--primary .btn--large}
+[Default Button](#link){: .btn .btn--primary }
+[Small Button](#link){: .btn .btn--primary .btn--small}
 ```
 
 ## Notices
 
-**Watch out!** You can also add notices by appending `{: .notice}` to a paragraph.
+**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice}` class.
 {: .notice}
 
+**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--primary}` class.
+{: .notice--primary}
+
+**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--info}` class.
+{: .notice--info}
+
+**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--warning}` class.
+{: .notice--warning}
+
+**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--success}` class.
+{: .notice--success}
+
+**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--danger}` class.
+{: .notice--danger}
+
 ## HTML Tags
 
 ### Address Tag