feat(bg-utilities): .bg-{success|warning|danger|info} now uses suppor…

…ting colours instead of functionnal ones
Orange-OpenSource · Dec 20, 2019 · f2b11dd · f2b11dd
1 parent 1ecdbe0
commit f2b11dd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -96,6 +96,18 @@ $theme-colors: map-merge(
 );
 
 // Boosted mod
+$supporting-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$supporting-colors: map-merge(
+  (
+    "success":    $teal,
+    "info":       $cyan,
+    "warning":    $yellow-2,
+    "danger":     $pink,
+    "purple":     $purple
+  ),
+  $supporting-colors
+);
 $chevron-icon:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path d='M9 2L7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
 $chevron-icon-hover:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path fill='#{$white}' d='M9 2L7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
 $chevron-icon-active: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path fill='#{$primary}' d='M9 2L7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;

diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
@@ -1,9 +1,23 @@
 // stylelint-disable declaration-no-important
 
 @each $color, $value in $theme-colors {
-  @include bg-variant(".bg-#{$color}", $value, true);
+  // Boosted mod: disallow functionnal colors for background
+  @if ($value != $success) and ($value != $danger) and ($value != $info) and ($value != $warning) {
+    @include bg-variant(".bg-#{$color}", $value, true);
+  }
+}
+
+// Boosted mod: supporting colour as background
+@each $color, $value in $supporting-colors {
+  @include bg-variant(".bg-#{$color}", $value);
 }
 
+.bg-teal   { @extend .bg-success; }
+.bg-cyan   { @extend .bg-info; }
+.bg-yellow { @extend .bg-warning; }
+.bg-pink   { @extend .bg-danger; }
+// end mod
+
 @if $enable-gradients {
   @each $color, $value in $theme-colors {
     @include bg-gradient-variant(".bg-gradient-#{$color}", $value);

diff --git a/site/docs/4.4/utilities/colors.md b/site/docs/4.4/utilities/colors.md
@@ -50,10 +50,16 @@ Similar to the contextual text color classes, easily set the background of an el
 
 {% capture example %}
 <!-- Boosted mod -->
-{% for color in site.data.theme-colors %}
-<div class="p-3 mb-2 bg-{{ color.name }}">.bg-{{ color.name }}</div>{% endfor %}
-<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+<div class="p-3 mb-2 bg-primary">.bg-primary</div>
+<div class="p-3 mb-2 bg-secondary">.bg-secondary</div>
+<div class="p-3 mb-2 bg-success">.bg-success or .bg-teal</div>
+<div class="p-3 mb-2 bg-danger">.bg-danger or .bg-pink</div>
+<div class="p-3 mb-2 bg-warning">.bg-warning or .bg-yellow</div>
+<div class="p-3 mb-2 bg-info">.bg-info or .bg-cyan</div>
+<div class="p-3 mb-2 bg-purple">.bg-purple</div>
+<div class="p-3 mb-2 bg-light">.bg-light</div>
+<div class="p-3 mb-2 bg-white">.bg-white</div>
+<div class="p-3 mb-2 bg-transparent">.bg-transparent</div>
 <!-- end mod -->
 {% endcapture %}
 {% include example.html content=example %}