Set up sass functions folder, add new functions for color contrast #628

snide · 2018-04-03T19:14:26Z

In a very roundabout way fixes #604

What this PR does:

Separates Sass functions into a new /global_styling/functions/ folder so that they don't dirty up the rest of the files. These get imported along with global_styling genetically like our other mixins.
Adds new math and color functions:
- A bunch of math functions for the single purpose of calculating luminosity is Sass
- Using luminosity, we now have functions to checkContrast, chooseLightOrDarkText and makeHighContrastColor.

In total, these new functions allow us to automatically set accessible safe colors when used together. This works regardless of theme, because it allows you to pass both a foreground and background color (which should be variablized through the theme).

Here's a simple example in .euiCallout

@each $name, $color in $callOutTypes {
  .euiCallOut--#{$name} {
    $backgroundColor: tintOrShade($color, 90%, 70%);
    
    // The below function gives us a text color that works against the tinted callout background.
    $textColor: makeHighContrastColor($color, $backgroundColor);

    border-color: $color;
    background-color: $backgroundColor;

    .euiCallOutHeader__icon {
      fill: $textColor;
    }

    .euiCallOutHeader__title {
      color: $textColor;
    }
  }
}

snide · 2018-04-03T19:16:58Z

src/global_styling/functions/_colors.scss

+
+  $highContrastTextColor: $forground;
+
+  @while ($contrast < 4.5) {


Someone more engineery might have a better way to do this, but it seems to work perfectly fine and outputs decent looking results. Basically keeps adjusting the shadeOrTint by 5% of a passed color until it gets passed 4.5.

Seems simple enough to me. Not sure what the load is on compilation but at 5% increments I don't think it should run too long.

snide · 2018-04-03T19:18:02Z

src/global_styling/variables/_colors.scss

@@ -37,7 +9,7 @@ $euiColorGhost: #FFF !default;
 // Status
 $euiColorSuccess: $euiColorSecondary !default;
 $euiColorDanger: #A30000 !default;
-$euiColorWarning: #CF3800 !default;
+$euiColorWarning: #E5830E !default;


This reverts back to our "yellow" color for warnings so everything looks ok again. It becomes darker through use of the functions as we need it.

snide · 2018-04-03T19:23:21Z

jenkins, test this

cchaos

This makes it sooo much simpler to just have contrast compliant colors! Awesome!

Overall, I would just like to see more explanation/examples of the SASS functions to know how to use them as it's not always super obvious without having to read through the code and understand what the function is doing.

cchaos · 2018-04-03T19:37:55Z

src/global_styling/functions/_index.scss

@@ -0,0 +1,2 @@
+@import 'math';


Can you just add a comment in here that 'math' needs to come first to be used in all subsequent function files?

cchaos · 2018-04-03T19:39:46Z

src/global_styling/functions/_colors.scss

+// Calculate contrast
+@function contrastRatio($background, $foreground) {
+  $backgroundLum: luminance($background) + .05;
+  $foregroundLum: luminance($foreground) + .05;


Out of curiosity, why the + .05?

https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef

It's part of the formula for calculating contrast ratios when given relative luminance. To be honest, I barely understand how the math works, but I did check using @debug to make sure the value calculations along the functions work against WebAIM and other supported tools.

cchaos · 2018-04-03T19:41:39Z

src/global_styling/functions/_colors.scss

+  @return max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum);
+}
+
+// Compare the contrast against both light and white text, then pick the highest.


Compare against 'light and dark' or 'white and black'? I'm assuming it's not supposed to be 'light and white'.

Also, I think adding example usages in the comments would be really helpful.

cchaos · 2018-04-03T19:43:10Z

src/global_styling/functions/_colors.scss

+// Given a color and a background, make that color AA accessibility by slightly
+// adjusting it till it works
+@function makeHighContrastColor($forground, $background) {
+  $contrast: contrastRatio($forground, $background);


sp: forground => foreground

cchaos · 2018-04-03T19:46:02Z

src/global_styling/functions/_colors.scss

+
+  $highContrastTextColor: $forground;
+
+  @while ($contrast < 4.5) {


Seems simple enough to me. Not sure what the load is on compilation but at 5% increments I don't think it should run too long.

cchaos · 2018-04-03T19:55:21Z

src/components/button/_button.scss

@@ -78,21 +78,16 @@ $buttonTypes: (
 // Create button modifiders based upon the map.
 @each $name, $color in $buttonTypes {
  .euiButton--#{$name} {
-    color: $color;
+    color: makeHighContrastColor($color, $euiColorEmptyShade);


This doesn't seem to work for the ghost (non-fill) text color:

Good catch.

snide · 2018-04-03T21:53:57Z

K, think this should be good to go. Added some more docs / examples.

cchaos

LGTM!

snide added 3 commits April 2, 2018 12:49

warning coloring needs two colors, bleh

2c8125f

New color functions for accessibility

1183ee8

rename contrast ratio

0e91f7d

snide requested a review from cchaos April 3, 2018 19:14

snide commented Apr 3, 2018

View reviewed changes

cchaos suggested changes Apr 3, 2018

View reviewed changes

snide added 2 commits April 3, 2018 14:10

address feedback

a94f4f1

more comments, changelog

c61d43e

cchaos approved these changes Apr 3, 2018

View reviewed changes

Merge branch 'master' into colors/warning

a8ccc1c

snide merged commit cb878e2 into elastic:master Apr 4, 2018

snide deleted the colors/warning branch April 4, 2018 01:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set up sass functions folder, add new functions for color contrast #628

Set up sass functions folder, add new functions for color contrast #628

snide commented Apr 3, 2018 •

edited

Loading

snide Apr 3, 2018

cchaos Apr 3, 2018

snide Apr 3, 2018

cchaos Apr 3, 2018

snide commented Apr 3, 2018

cchaos left a comment

cchaos Apr 3, 2018

cchaos Apr 3, 2018

snide Apr 3, 2018 •

edited

Loading

cchaos Apr 3, 2018

cchaos Apr 3, 2018

cchaos Apr 3, 2018

cchaos Apr 3, 2018

cchaos Apr 3, 2018

snide Apr 3, 2018

snide commented Apr 3, 2018

cchaos left a comment


		$highContrastTextColor: $forground;

		@while ($contrast < 4.5) {

Set up sass functions folder, add new functions for color contrast #628

Set up sass functions folder, add new functions for color contrast #628

Conversation

snide commented Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide commented Apr 3, 2018

cchaos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide commented Apr 3, 2018

cchaos left a comment

Choose a reason for hiding this comment

snide commented Apr 3, 2018 •

edited

Loading

snide Apr 3, 2018 •

edited

Loading