diff --git a/scss/_alert.scss b/scss/_alert.scss index f67dcc6a1d9e..24fa2bd14075 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -43,9 +43,15 @@ // scss-docs-start alert-modifiers // Generate contextual modifier classes for colorizing the alert. -@each $color, $value in $theme-colors { - .alert-#{$color} { - @include alert-variant(scale-color($value, $alert-bg-scale), scale-color($value, $alert-border-scale), scale-color($value, $alert-color-scale)); +@each $state, $value in $theme-colors { + $background: scale-color($value, $alert-bg-scale); + $border: scale-color($value, $alert-border-scale); + $color: scale-color($value, $alert-color-scale); + @if (contrast-ratio($background, $color) < $min-contrast-ratio) { + $color: mix($value, color-contrast($background), abs($alert-color-scale)); + } + .alert-#{$state} { + @include alert-variant($background, $border, $color); } } // scss-docs-end alert-modifiers diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 84fbb1b0eec9..2ce0c8b159b7 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -151,7 +151,13 @@ // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. -@each $color, $value in $theme-colors { - @include list-group-item-variant($color, scale-color($value, $list-group-item-bg-scale), scale-color($value, $list-group-item-color-scale)); +@each $state, $value in $theme-colors { + $background: scale-color($value, $list-group-item-bg-scale); + $color: scale-color($value, $list-group-item-color-scale); + @if (contrast-ratio($background, $color) < $min-contrast-ratio) { + $color: mix($value, color-contrast($background), abs($alert-color-scale)); + } + + @include list-group-item-variant($state, $background, $color); } // scss-docs-end list-group-modifiers diff --git a/scss/_variables.scss b/scss/_variables.scss index de7656e9179e..358b43dd52ec 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1182,7 +1182,7 @@ $alert-border-width: $border-width !default; $alert-bg-scale: -80% !default; $alert-border-scale: -70% !default; -$alert-color-scale: 50% !default; +$alert-color-scale: 40% !default; $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side @@ -1211,7 +1211,7 @@ $list-group-border-radius: $border-radius !default; $list-group-item-padding-y: $spacer / 2 !default; $list-group-item-padding-x: $spacer !default; $list-group-item-bg-scale: -80% !default; -$list-group-item-color-scale: 50% !default; +$list-group-item-color-scale: 40% !default; $list-group-hover-bg: $gray-100 !default; $list-group-active-color: $component-active-color !default;