Add contrast colors Sass map

scss/_alert.scss

@@ -42,7 +42,7 @@
 //
 // Generate contextual modifier classes for colorizing the alert.
 
-@each $color, $value in $theme-colors {
+@each $color, $value in $alert-theme-colors {
   .alert-#{$color} {
     @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
   }

scss/_badge.scss

@@ -40,7 +40,7 @@
 //
 // Contextual variations (linked badges get darker on :hover).
 
-@each $color, $value in $theme-colors {
+@each $color, $value in $badge-theme-colors {
   .badge-#{$color} {
     @include badge-variant($value);
   }

scss/_buttons.scss

@@ -50,16 +50,18 @@ fieldset[disabled] a.btn {
 // Alternate buttons
 //
 
-@each $color, $value in $theme-colors {
+@each $color, $value in $btn-theme-colors {
   .btn-#{$color} {
-    @include button-variant($value, $value);
+    @if $value == $white {
+      @include button-variant($value, color-yiq($value, $btn-contrast-colors));
+    } @else {
+      @include button-variant($value, $value);
+    }
   }
-}
 
-@each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
-    @if $color == "light" {
-      @include button-outline-variant($value, $gray-900);
+    @if $value == $white {
+      @include button-outline-variant(color-yiq($value, $btn-contrast-colors), $white);
     } @else {
       @include button-outline-variant($value, $white);
     }

scss/_functions.scss

@@ -49,20 +49,28 @@
 }
 
 // Color contrast
-@mixin color-yiq($color) {
+@function color-yiq($color, $contrast-colors: ()) {
+  @if map-has-key($contrast-colors, $color) {
+    @return map-get($contrast-colors, $color);
+  }
+
   $r: red($color);
   $g: green($color);
   $b: blue($color);
 
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= 150) {
-    color: #111;
+    @return #111;
   } @else {
-    color: #fff;
+    @return #fff;
   }
 }
 
+@mixin color-yiq($color, $contrast-colors: ()) {
+  color: color-yiq($color, $contrast-colors);
+}
+
 // Retreive color Sass maps
 @function color($key: "blue") {
   @return map-get($colors, $key);

scss/_variables.scss

@@ -78,6 +78,10 @@ $theme-colors: map-merge((
 // Set a specific jump point for requesting color jumps
 $theme-color-interval: 8% !default;
 
+// Set a specific contrast color to be used for a given color
+// This will override the default behavior of the "color-yiq" function
+$contrast-colors: () !default;
+
 
 // Options
 //
@@ -311,6 +315,12 @@ $input-btn-padding-y-lg:    .5rem !default;
 $input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  $line-height-lg !default;
 
+$btn-theme-colors: () !default;
+$btn-theme-colors: map-merge($theme-colors, $btn-theme-colors);
+
+$btn-contrast-colors: () !default;
+$btn-contrast-colors: map-merge($contrast-colors, $btn-contrast-colors);
+
 $btn-font-weight:                $font-weight-normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
 $btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25) !default;
@@ -650,6 +660,12 @@ $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !defau
 
 // Badges
 
+$badge-theme-colors: () !default;
+$badge-theme-colors: map-merge($theme-colors, $badge-theme-colors);
+
+$badge-contrast-colors: () !default;
+$badge-contrast-colors: map-merge($contrast-colors, $badge-contrast-colors);
+
 $badge-font-size:             75% !default;
 $badge-font-weight:           $font-weight-bold !default;
 $badge-padding-y:             .25em !default;
@@ -697,6 +713,9 @@ $modal-transition:            transform .3s ease-out !default;
 //
 // Define alert colors, border radius, and padding.
 
+$alert-theme-colors: () !default;
+$alert-theme-colors: map-merge($theme-colors, $alert-theme-colors);
+
 $alert-padding-y:             .75rem !default;
 $alert-padding-x:             1.25rem !default;
 $alert-margin-bottom:         1rem !default;

scss/mixins/_badge.scss

@@ -1,10 +1,10 @@
-@mixin badge-variant($bg) {
-  @include color-yiq($bg);
+@mixin badge-variant($bg, $contrast-colors: $badge-contrast-colors) {
+  @include color-yiq($bg, $contrast-colors);
   background-color: $bg;
 
   &[href] {
     @include hover-focus {
-      @include color-yiq($bg);
+      @include color-yiq($bg, $contrast-colors);
       text-decoration: none;
       background-color: darken($bg, 10%);
     }

scss/mixins/_buttons.scss

@@ -3,14 +3,14 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
-  @include color-yiq($background);
+@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%), $contrast-colors: $btn-contrast-colors) {
+  @include color-yiq($background, $contrast-colors);
   background-color: $background;
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
   @include hover {
-    @include color-yiq($active-background);
+    @include color-yiq($active-background, $contrast-colors);
     background-color: $active-background;
     border-color: $active-border;
   }