Color notices based on skin colors instead of fixed values (#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 <tsmanner@us.ibm.com>
mmistakes · Apr 13, 2021 · 5ffad0d · 5ffad0d
1 parent b1e4881
commit 5ffad0d
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 7 deletions.
diff --git a/_sass/minimal-mistakes/_notices.scss b/_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 {

diff --git a/_sass/minimal-mistakes/_variables.scss b/_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;

diff --git a/_sass/minimal-mistakes/skins/_aqua.scss b/_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;
diff --git a/_sass/minimal-mistakes/skins/_dark.scss b/_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;
-}
+}
diff --git a/_sass/minimal-mistakes/skins/_neon.scss b/_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;

diff --git a/_sass/minimal-mistakes/skins/_plum.scss b/_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;

diff --git a/_sass/minimal-mistakes/skins/_sunrise.scss b/_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;