Fixing highContrastTextColor sass function (#1275)

CHANGELOG.md

@@ -11,6 +11,7 @@
 - `Escape` key now closes `EuiComboBox` options list ([#1258](https://github.com/elastic/eui/pull/1258))
 - Fixed margin issue around `EuiFlexGrid` in mobile displays ([#1257](https://github.com/elastic/eui/pull/1257))
 - Fixed positioning and padding display issue in `EuiRange` ([#1257](https://github.com/elastic/eui/pull/1257))
+- Fixed `highContrastTextColor` SASS function to account for background lightness and exit possible infinite loops ([#1275](https://github.com/elastic/eui/pull/1275))
 
 ## [`4.6.1`](https://github.com/elastic/eui/tree/v4.6.1)
 

src/global_styling/functions/_colors.scss

@@ -87,11 +87,30 @@
 @function makeHighContrastColor($foreground, $background) {
   $contrast: contrastRatio($foreground, $background);
 
+  // Determine the lightness factor of the background color first to
+  // determine whether to shade or tint the foreground.
+  $brightness: lightness($background);
+
   $highContrastTextColor: $foreground;
 
   @while ($contrast < 4.5) {
-    $highContrastTextColor: shadeOrTint($highContrastTextColor, 5%, 5%);
+    @if ($brightness > 50) {
+      $highContrastTextColor: shade($highContrastTextColor, 5%);
+    } @else {
+      $highContrastTextColor: tint($highContrastTextColor, 5%);
+    }
+
     $contrast: contrastRatio($highContrastTextColor, $background);
+
+    @if (lightness($highContrastTextColor) < 5) {
+      @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.';
+      @return $highContrastTextColor;
+    }
+
+    @if (lightness($highContrastTextColor) > 95) {
+      @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.';
+      @return $highContrastTextColor;
+    }
   }
 
   @return $highContrastTextColor;