feat(colors): improve .text-body & .text-muted utilities to ensure pr…

…oper contrasts, to close #274
Orange-OpenSource · Jan 8, 2020 · 0d62c74 · 0d62c74
1 parent 33b94e7
commit 0d62c74
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -401,6 +401,7 @@ $small-font-size: $font-size-sm !default; // Boosted mod → 14px
 $small-line-height: $line-height-sm !default; // Boosted mod → 16px
 
 $text-muted: $gray-700 !default;
+$text-muted-dark: $gray-600 !default; // Boosted mod: ensure contrast on dark background
 
 $blockquote-small-color: $gray-700 !default;
 $blockquote-small-font-size: $small-font-size !default;

diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
@@ -5,7 +5,7 @@
 @mixin bg-variant($parent, $color, $ignore-warning: false) {
  $contrast: color-yiq($color); // Boosted mod: ensure contrast
  #{$parent} {
- color: $contrast; // Boosted mod: ensure contrast
+ color: $contrast !important; // Boosted mod: ensure contrast
  background-color: $color !important;
  }
  a#{$parent},

diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
@@ -45,10 +45,12 @@
 
 // Contextual colors
 
+// Boosted mod: ensure contrast
 .text-white {
  color: $white !important;
  background-color: $black !important;
 }
+// end mod
 
 @each $color, $value in $theme-colors {
  // Boosted mod: disallow functionnal colors for text
@@ -58,17 +60,34 @@
  // end mod
 }
 
-// Boosted mod
+// Boosted mod: ensure contrast
+.text-body {
+ color: $body-color !important;
+ background-color: $body-bg !important;
+}
+
+.text-muted {
+ color: $text-muted !important;
+ background-color: $white !important;
+}
+
 .bg-dark,
 .table-dark,
 .navbar-dark {
  @include text-emphasis-variant(".text-primary", $orange-2, true);
+
+ .text-body {
+ color: $body-bg !important;
+ background-color: $body-color !important;
+ }
+
+ .text-muted {
+ color: $text-muted-dark !important;
+ background-color: $black !important;
+ }
 }
 // end mod
 
-.text-body { color: $body-color !important; }
-.text-muted { color: $text-muted !important; }
-
 //.text-black-50 { color: rgba($black, .5) !important; } // Boosted mod
 //.text-white-50 { color: rgba($white, .5) !important; } // Boosted mod