From e91adfc1487dadc3c16dabc2ca0ea8ed48c31458 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 31 Oct 2018 13:56:49 -0400 Subject: [PATCH 1/2] Fixing `highContrastTextColor` sass function MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The foreground is now adjusted based on the backgrounds brightness not the theme. It also includes fail safes to stop the `@while` from running if it reaches a certain lightness level (can’t lighten/darken any further). --- src/global_styling/functions/_colors.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) 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; From 457d8dbb453aa21da1b687e3541e9d6952b734b1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 31 Oct 2018 14:57:12 -0400 Subject: [PATCH 2/2] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fad37f6263..04a5835d72b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - `EuiComboBox` no longer throws a _Maximum update depth exceeded_ error when used in popovers/modals ([#1258](https://github.com/elastic/eui/pull/1258)) - `Escape` key now closes `EuiComboBox` options list ([#1258](https://github.com/elastic/eui/pull/1258)) +- 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)