diff --git a/CHANGELOG.md b/CHANGELOG.md index 91fd264562d..40dbf6fd876 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss index 3a71b6ed882..87681664b49 100644 --- a/src/global_styling/functions/_colors.scss +++ b/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;