From facbb702b865a3f1e103b02d64f5e4f99989aad7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 14 Aug 2017 21:48:06 +0200
Subject: [PATCH 1/6] Add `$contrast-colors` SASS map

---
 scss/_variables.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index e68fb23c833f..52af5fbfb1f0 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -117,6 +117,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
 //

From 33887acc6de3b81e0efa7a2c98543017310630ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 14 Aug 2017 21:49:23 +0200
Subject: [PATCH 2/6] Creata a `color-yiq` function an perfer the
 `$contrast-colors` map

---
 scss/_functions.scss | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/scss/_functions.scss b/scss/_functions.scss
index 6c0601c50df4..a361380c9786 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -49,7 +49,11 @@
 }
 
 // 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);
@@ -57,12 +61,16 @@
   $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);

From e451c6dc0bcc75519a7d1673322a4408de045b83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 14 Aug 2017 21:55:06 +0200
Subject: [PATCH 3/6] Pass `$contrast-colors` map to `color-yiq` mixin

---
 scss/mixins/_badge.scss   | 6 +++---
 scss/mixins/_buttons.scss | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index 257a6abb7d88..b6dc26a7b278 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -1,10 +1,10 @@
-@mixin badge-variant($bg) {
-  @include color-yiq($bg);
+@mixin badge-variant($bg, $contrast-colors: $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%);
     }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 312a18f1d8f9..e36d0bfd94e3 100644
--- a/scss/mixins/_buttons.scss
+++ b/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: $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($background);
+    @include color-yiq($background, $contrast-colors);
     background-color: $active-background;
     border-color: $active-border;
   }

From e6f7daf3e573c0ece14a130e709a71cbd011da91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Mon, 14 Aug 2017 21:57:03 +0200
Subject: [PATCH 4/6] Use contrast color when button color is white

---
 scss/_buttons.scss | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index a708560b3e26..90e159f65022 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -52,13 +52,21 @@ fieldset[disabled] a.btn {
 
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
-    @include button-variant($value, $value);
+    @if $value == $white {
+      @include button-variant($value, color-yiq($value, $contrast-colors));
+    } @else {
+      @include button-variant($value, $value);
+    }
   }
 }
 
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
-    @include button-outline-variant($value, #fff);
+    @if $value == $white {
+      @include button-outline-variant(color-yiq($value, $contrast-colors), $white);
+    } @else {
+      @include button-outline-variant($value, $white);
+    }
   }
 }
 

From b1489a6556a6eb98bb247031583684a3bcbf02fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 5 Oct 2017 13:19:02 +0200
Subject: [PATCH 5/6] Add seperate contrast color maps for buttons and badges

---
 scss/_buttons.scss        | 4 ++--
 scss/_variables.scss      | 6 ++++++
 scss/mixins/_badge.scss   | 2 +-
 scss/mixins/_buttons.scss | 2 +-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 1ca4cea43e15..4ee2ea97b447 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -53,7 +53,7 @@ fieldset[disabled] a.btn {
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     @if $value == $white {
-      @include button-variant($value, color-yiq($value, $contrast-colors));
+      @include button-variant($value, color-yiq($value, $btn-contrast-colors));
     } @else {
       @include button-variant($value, $value);
     }
@@ -63,7 +63,7 @@ fieldset[disabled] a.btn {
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @if $value == $white {
-      @include button-outline-variant(color-yiq($value, $contrast-colors), $white);
+      @include button-outline-variant(color-yiq($value, $btn-contrast-colors), $white);
     } @else {
       @include button-outline-variant($value, $white);
     }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4aeb844a71c2..6e960bd216e5 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -315,6 +315,9 @@ $input-btn-padding-y-lg:    .5rem !default;
 $input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  $line-height-lg !default;
 
+$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;
@@ -654,6 +657,9 @@ $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !defau
 
 // Badges
 
+$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;
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index b6dc26a7b278..97ee66444c44 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -1,4 +1,4 @@
-@mixin badge-variant($bg, $contrast-colors: $contrast-colors) {
+@mixin badge-variant($bg, $contrast-colors: $badge-contrast-colors) {
   @include color-yiq($bg, $contrast-colors);
   background-color: $bg;
 
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 97b81a220fdf..858a6bd9cfec 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -3,7 +3,7 @@
 // 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%), $contrast-colors: $contrast-colors) {
+@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;

From e1232bf1cdd1568e4c4a1aeaac776ed2354809c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 5 Oct 2017 14:30:55 +0200
Subject: [PATCH 6/6] Add seperate theme color sass maps for buttons, badges
 and alerts

---
 scss/_alert.scss     | 2 +-
 scss/_badge.scss     | 2 +-
 scss/_buttons.scss   | 4 +---
 scss/_variables.scss | 9 +++++++++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 66fba24ead2b..12c1eebf01cf 100644
--- a/scss/_alert.scss
+++ b/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));
   }
diff --git a/scss/_badge.scss b/scss/_badge.scss
index b87a1b00495a..57f4f3196557 100644
--- a/scss/_badge.scss
+++ b/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);
   }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 4ee2ea97b447..cd948dfc28b2 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -50,7 +50,7 @@ fieldset[disabled] a.btn {
 // Alternate buttons
 //
 
-@each $color, $value in $theme-colors {
+@each $color, $value in $btn-theme-colors {
   .btn-#{$color} {
     @if $value == $white {
       @include button-variant($value, color-yiq($value, $btn-contrast-colors));
@@ -58,9 +58,7 @@ fieldset[disabled] a.btn {
       @include button-variant($value, $value);
     }
   }
-}
 
-@each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @if $value == $white {
       @include button-outline-variant(color-yiq($value, $btn-contrast-colors), $white);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6e960bd216e5..0044456e0aa2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -315,6 +315,9 @@ $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);
 
@@ -657,6 +660,9 @@ $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);
 
@@ -707,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;