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
mmistakes · Sep 12, 2017 · 93c4fbc · 93c4fbc
1 parent d67aa11
commit 93c4fbc
Show file tree

Hide file tree

Showing 86 changed files with 1,356 additions and 946 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 - Test strict Front Matter in `/test` site. [#1236](https://github.com/mmistakes/minimal-mistakes/pull/1236)
 - Rename `gems` key to `plugins`. [#1239](https://github.com/mmistakes/minimal-mistakes/pull/1239)
+- Add [YIQ Color Contrast](https://github.com/easy-designs/yiq-color-contrast) mixin for determining lightness of a color.
+- DRY up button CSS using Sass lists and YIQ Color Contrast mixin.
+- Add `btn--primary` button class. **Note:** elements that were previously using only a `.btn` class will now also need `.btn--primary` (eg. `<a class="btn btn--primary" href="#">my link</a>`).
+- Add `air`, `contrast`, `dark`, `dirt`, `mint`, and `sunrise` skin color options. [#1208](https://github.com/mmistakes/minimal-mistakes/issues/1208)
 
 ## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)
 
@@ -27,7 +31,7 @@
 - Reduce amount of blank pages when printing in Chrome. [#1196](https://github.com/mmistakes/minimal-mistakes/issues/1196)
 - Remove `#disqus_thread` duplicate  from `comments-providers/disqus.html` as it is already in `comments.html` include. [#1199](https://github.com/mmistakes/minimal-mistakes/issues/1199)
 - Fix Liquid syntax errors in `tag-list.html` and `category-list.html` includes by removing parenthesis in `assign`s. [#1223](https://github.com/mmistakes/minimal-mistakes/issues/1223)
-- Fix Liquid syntax error: "Expected id but found open_square in `"{{page.[include.id] }}"`" in `gallery` and `feature_row` includes.
+- Fix Liquid syntax error: "Expected id but found open_square in `"{{ page.[include.id] }}"`" in `gallery` and `feature_row` includes.
 - Fix Liquid syntax error: "Expected end_of_string but found pipe in `"name in __names | sort"`" in `group-by-array` include.
 
 ## [4.5.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.1)

diff --git a/_config.yml b/_config.yml
@@ -5,6 +5,8 @@
 # For technical reasons, this file is *NOT* reloaded automatically when you use
 # `jekyll serve`. If you change this file, please restart the server process.
 
+minimal_mistakes_skin    : "default" # "air", "contrast", "dark", "dirt", "mint", "sunrise"
+
 # Site Settings
 locale                   : "en"
 title                    : "Site Title"

diff --git a/_includes/comments.html b/_includes/comments.html
@@ -84,7 +84,7 @@ <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_labe
                 </p>
                 <!-- End comment form alert messaging -->
                 <fieldset>
-                  <button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
+                  <button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
                 </fieldset>
               </form>
             </div>
@@ -94,4 +94,4 @@ <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_labe
       {% when "custom" %}
         <section id="custom-comments"></section>
   {% endcase %}
-</div>
+</div>
diff --git a/_layouts/single.html b/_layouts/single.html
@@ -35,7 +35,7 @@
 
       <section class="page__content" itemprop="text">
         {{ content }}
-        {% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
+        {% if page.link %}<div><a href="{{ page.link }}" class="btn btn--primary">{{ site.data.ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
       </section>
 
       <footer class="page__meta">

diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
@@ -26,7 +26,7 @@
   margin: 1.414em 0 0;
   padding-bottom: 0.5em;
   font-size: $type-size-5;
-  color: mix(#fff, $gray, 25%);
+  color: $muted-text-color;
   border-bottom: 1px solid $border-color;
 
   + .list__item .archive__item-title {
@@ -72,6 +72,7 @@
 }
 
 .archive__item:hover {
+
   .archive__item-teaser {
     box-shadow: 0 0 10px rgba(#000, 0.25);
   }

diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss
@@ -118,8 +118,13 @@ a {
 
   &:hover,
   &:active {
+    color: $link-color-hover;
     outline: 0;
   }
+
+  &:visited {
+    color: $link-color-visited;
+  }
 }
 
 /* code */
@@ -141,7 +146,7 @@ td > code {
   padding-bottom: 0.1rem;
   font-size: $type-size-6;
   background: $code-background-color;
-  border: 1px solid $lighter-gray;
+  border: 1px solid $border-color;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 
@@ -236,20 +241,16 @@ figure {
 
 figcaption {
   margin-bottom: 0.5em;
-  color: mix(#fff, $text-color, 25%);
+  color: $muted-text-color;
   font-family: $caption-font-family;
   font-size: $type-size-6;
 
   a {
-    color: inherit;
-    text-decoration: none;
-    border-bottom: 1px solid $light-gray;
     -webkit-transition: $global-transition;
     transition: $global-transition;
 
     &:hover {
-      color: #000;
-      border-bottom-color: #000;
+      color: $link-color-hover;
     }
   }
 }

diff --git a/_sass/minimal-mistakes/_buttons.scss b/_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,79 +28,51 @@
     margin-left: -0.5em; /* override for hidden text*/
   }
 
-  /* fills width of parent container */
-
-  &--block {
-    display: block;
-    width: 100%;
-
-    + .btn--block {
-      margin-top: 0.25em;
-    }
-  }
-
-  /* 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%);
-    }
-  }
+  /* 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);
 
-  /* success */
+  @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;
+      }
 
-  &--success {
-    background-color: $success-color;
+      &:hover {
+        @include yiq-contrasted(mix(#000, $color, 20%));
+      }
 
-    &:hover {
-      background-color: mix(#000, $success-color, 20%);
+      &:visited {
+        @include yiq-contrasted($color);
+      }
     }
   }
 
-  /* danger */
-
-  &--danger {
-    background-color: $danger-color;
+  /* fills width of parent container */
+  &--block {
+    display: block;
+    width: 100%;
 
-    &:hover {
-      background-color: mix(#000, $danger-color, 20%);
+    + .btn--block {
+      margin-top: 0.25em;
     }
   }
 
   /* 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;
   }

diff --git a/_sass/minimal-mistakes/_footer.scss b/_sass/minimal-mistakes/_footer.scss
@@ -15,13 +15,12 @@
   height: auto;
   /* sticky footer fix end */
   margin-top: 3em;
-  color: mix(#fff, $gray, 25%);
+  color: $muted-text-color;
   -webkit-animation: $intro-transition;
           animation: $intro-transition;
   -webkit-animation-delay: 0.45s;
           animation-delay: 0.45s;
-  background-color: $lighter-gray;
-  border-top: 1px solid $light-gray;
+  background-color: $footer-background-color;
 
   footer {
     @include clearfix;
@@ -46,7 +45,7 @@
   }
 
   .fa {
-    color: mix(#fff, $gray, 25%);
+    color: $muted-text-color;
   }
 }
 

diff --git a/_sass/minimal-mistakes/_forms.scss b/_sass/minimal-mistakes/_forms.scss
@@ -4,6 +4,8 @@
 
 form {
   margin: 0 0 5px 0;
+  padding: 1em;
+  background-color: $form-background-color;
 
   fieldset {
     margin-bottom: 5px;
@@ -19,7 +21,6 @@ form {
     padding: 0;
     color: $text-color;
     border: 0;
-    border-bottom: 1px solid mix(#fff, #000, 80%);
     white-space: normal;
   }
 
@@ -80,14 +81,10 @@ select {
   padding: 0.25em;
   margin-bottom: 0.5em;
   color: $text-color;
-  background-color: #fff;
-  border: 1px solid mix(#fff, #000, 80%);
+  background-color: $background-color;
+  border: $border-color;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
-
-  &:hover {
-    border-color: mix(#fff, $primary-color, 50%);
-  }
 }
 
 .input-mini {
@@ -224,6 +221,7 @@ textarea:focus {
   border-color: $primary-color;
   outline: 0;
   outline: thin dotted \9;
+  box-shadow: inset 0 1px 3px rgba($text-color, 0.06), 0 0 5px rgba($primary-color, 0.7);
 }
 
 input[type="file"]:focus,
@@ -240,7 +238,7 @@ select:focus {
 
 .help-block,
 .help-inline {
-  color: $info-color;
+  color: $muted-text-color;
 }
 
 .help-block {
@@ -382,7 +380,7 @@ select:focus {
   color: #000;
   border-width: 2px !important;
   border-style: solid !important;
-  border-color: lighten(#000,50);
+  border-color: $border-color;
   border-radius: $border-radius;
 }