Color notices based on skin colors instead of fixed values (mmistakes#2887)

* Made notice Sass color mixing in based on $background-color and $text-color instead of hard-coded black and white values.

* Made some style adjustments to notices to improve readability.

Notice links are slightly darkened from the notice color, mostly because the gray-on-gray default notice links were very hard to read.  Rather than being $notice-color, they are `mix(#000, $notice-color, 10%)`.
The notice background mix and code-background mix can now be set with the SCSS variables $notice-background-mix and $code-notice-background-mix.
The default mix for background was adjusted to 80%, from 90%.
The default mix for code-background was adjusted to 90%, from 95%.
Skins that still didn't read well were adjusted individually.

* Adjusted sunrise $notice-background-mix to 75%

* Adjusted dark theme notice background mix colors back to the default

Co-authored-by: Tom Manner <[email protected]>

Author: tsmanner

_sass/minimal-mistakes/_notices.scss

@@ -13,11 +13,11 @@
 @mixin notice($notice-color) {
   margin: 2em 0 !important;  /* override*/
   padding: 1em;
-  color: $dark-gray;
+  color: $text-color;
   font-family: $global-font-family;
   font-size: $type-size-6 !important;
   text-indent: initial; /* override*/
-  background-color: mix(#fff, $notice-color, 90%);
+  background-color: mix($background-color, $notice-color, $notice-background-mix);
   border-radius: $border-radius;
   box-shadow: 0 1px 1px rgba($notice-color, 0.25);
 
@@ -46,15 +46,15 @@
   }
 
   a {
-    color: $notice-color;
+    color: mix(#000, $notice-color, 10%);
 
     &:hover {
-      color: mix(#000, $notice-color, 40%);
+      color: mix(#000, $notice-color, 50%);
     }
   }
 
   code {
-    background-color: mix(#fff, $notice-color, 95%)
+    background-color: mix($background-color, $notice-color, $code-notice-background-mix)
   }
 
 	pre code {

_sass/minimal-mistakes/_variables.scss

@@ -118,6 +118,10 @@ $masthead-link-color: $primary-color !default;
 $masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
 $navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
 
+/* notices */
+$notice-background-mix: 80% !default;
+$code-notice-background-mix: 90% !default;
+
 /* syntax highlighting (base16) */
 $base00: #263238 !default;
 $base01: #2e3c43 !default;

_sass/minimal-mistakes/skins/_aqua.scss

@@ -27,4 +27,8 @@ $link-color                 : $info-color !default;
 $link-color-hover           : mix(#000, $link-color, 25%) !default;
 $link-color-visited         : mix(#fff, $link-color, 25%) !default;
 $masthead-link-color        : $primary-color !default;
-$masthead-link-color-hover  : mix(#000, $primary-color, 25%) !default;
+$masthead-link-color-hover  : mix(#000, $primary-color, 25%) !default;
+
+/* notices */
+$notice-background-mix: 90% !default;
+$code-notice-background-mix: 95% !default;

_sass/minimal-mistakes/skins/_dark.scss

@@ -27,4 +27,4 @@ $navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
 
 .ais-search-box .ais-search-box--input {
   background-color: $form-background-color;
-}
+}

_sass/minimal-mistakes/skins/_neon.scss

@@ -18,6 +18,10 @@ $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
 $navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
 
+/* notices */
+$notice-background-mix: 90% !default;
+$code-notice-background-mix: 95% !default;
+
 /* neon syntax highlighting (base16) */
 $base00: #ffffff !default;
 $base01: #e0e0e0 !default;

_sass/minimal-mistakes/skins/_plum.scss

@@ -18,6 +18,10 @@ $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
 $navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
 
+/* notices */
+$notice-background-mix: 70% !default;
+$code-notice-background-mix: 80% !default;
+
 /* plum syntax highlighting (base16) */
 $base00: #ffffff !default;
 $base01: #e0e0e0 !default;

_sass/minimal-mistakes/skins/_sunrise.scss

@@ -20,6 +20,9 @@ $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
 $navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
 
+/* notices */
+$notice-background-mix: 75% !default;
+
 /* sunrise syntax highlighting (base16) */
 $base00: #1d1f21 !default;
 $base01: #282a2e !default;