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 d69c15998328..cd948dfc28b2 100644 --- a/scss/_buttons.scss +++ b/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); } diff --git a/scss/_functions.scss b/scss/_functions.scss index 5d43b57087b7..a694f6d37bd5 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); diff --git a/scss/_variables.scss b/scss/_variables.scss index 4e987373cdde..0044456e0aa2 100644 --- a/scss/_variables.scss +++ b/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; diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss index 257a6abb7d88..97ee66444c44 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: $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%); } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 44ce4f72e264..858a6bd9cfec 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: $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; }