refactor: add contrast ratio checker

Author: mrholek

scss/_alert.scss

@@ -48,9 +48,13 @@
   $border: var(--#{$variable-prefix}alert-#{$state}-border-color, map-get($map, "border"));
   $color: var(--#{$variable-prefix}alert-#{$state}-color, map-get($map, "color"));
   $link-color: var(--#{$variable-prefix}alert-#{$state}-link-color, map-get($map, "link-color"));
-  // @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-  //   $color: mix($value, color-contrast($background), abs($alert-color-scale));
-  // }
+  // TODO: refactor
+  @if ($enable-contrast-ratio-correction and contrast-ratio(map-get($map, "background"), map-get($map, "color")) < $min-contrast-ratio) {
+    @if $enable-contrast-ratio-warnings {
+      @warn "Alert #{$state} contrast ratio #{contrast-ratio(map-get($map, "background"), map-get($map, "color"))}.";
+    }
+    $color: var(--#{$variable-prefix}alert-#{$state}-color, mix(map-get($map, "color"), color-contrast(map-get($map, "background")), abs($alert-color-scale)));
+  }
   .alert-#{$state} {
     @include alert-variant($background, $border, $color, $link-color);
   }

scss/_list-group.scss

@@ -155,9 +155,13 @@
   $background: var(--#{$variable-prefix}list-group-#{$state}-background, map-get($map, "background"));
   $background-hover: var(--#{$variable-prefix}list-group-#{$state}-background-hover, map-get($map, "background-hover"));
   $color: var(--#{$variable-prefix}list-group-#{$state}-color, map-get($map, "color"));
-  // @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-  //   $color: mix($value, color-contrast($background), abs($alert-color-scale));
-  // }
+  // TODO: refactor
+  @if ($enable-contrast-ratio-correction and contrast-ratio(map-get($map, "background"), map-get($map, "color")) < $min-contrast-ratio) {
+    @if $enable-contrast-ratio-warnings {
+      @warn "List group item #{$state} contrast ratio #{contrast-ratio(map-get($map, "background"), map-get($map, "color"))}.";
+    }
+    $color: var(--#{$variable-prefix}list-group-#{$state}-color, mix(map-get($map, "color"), color-contrast(map-get($map, "background")), abs($alert-color-scale)));
+  }
 
   @include list-group-item-variant($state, $background, $background-hover, $color);
 }

scss/_variables.scss

@@ -262,20 +262,22 @@ $escaped-characters: (
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-caret:                true !default;
-$enable-rounded:              true !default;
-$enable-shadows:              false !default;
-$enable-gradients:            false !default;
-$enable-transitions:          true !default;
-$enable-reduced-motion:       true !default;
-$enable-smooth-scroll:        true !default;
-$enable-grid-classes:         true !default;
-$enable-button-pointers:      true !default;
-$enable-rfs:                  true !default;
-$enable-validation-icons:     true !default;
-$enable-negative-margins:     false !default;
-$enable-deprecation-messages: true !default;
-$enable-important-utilities:  true !default;
+$enable-caret:                      true !default;
+$enable-rounded:                    true !default;
+$enable-shadows:                    false !default;
+$enable-gradients:                  false !default;
+$enable-transitions:                true !default;
+$enable-reduced-motion:             true !default;
+$enable-smooth-scroll:              true !default;
+$enable-grid-classes:               true !default;
+$enable-button-pointers:            true !default;
+$enable-rfs:                        true !default;
+$enable-validation-icons:           true !default;
+$enable-negative-margins:           false !default;
+$enable-deprecation-messages:       true !default;
+$enable-important-utilities:        true !default;
+$enable-contrast-ratio-correction:  true !default;
+$enable-contrast-ratio-warnings:    true !default;
 
 // Set mobile breakpoint