Adds variable for color yiq threshold (#24886)

diff --git a/scss/_functions.scss b/scss/_functions.scss
index 5580dfa9adab55f7c43b055ebad77492cfeaddb3..1266d34bd9029922e92809b52827b479c7d9e8f9 100644 (file)
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -56,7 +56,7 @@
 
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
-  @if ($yiq >= 150) {
+  @if ($yiq >= $yiq-contrasted-threshold) {
     @return $yiq-text-dark;
   } @else {
     @return $yiq-text-light;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 788c55a4921320831f281ba68fc11a062bd0e80d..be3dd69b5f39cfb92cafc344285fb5e5d5a78d12 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -87,11 +87,13 @@ $theme-colors: map-merge((
 // Set a specific jump point for requesting color jumps
 $theme-color-interval:      8% !default;
 
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
 // Customize the light and dark text colors for use in our YIQ color contrast function.
 $yiq-text-dark: $gray-900 !default;
 $yiq-text-light: $white !default;
 
-
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.