lib/styles/functions.scss

Summary

Maintainability
Test Coverage
@use "sass:math";
/*------------------------
mixin that calculates if text needs to be light or dark
depending on the background color passed.
From this W3C document: http://www.webmasterworld.com/r.cgi?f=88&d=9769&url=http://www.w3.org/TR/AERT#color-contrast
Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
------------------------*/

@function text-contrast($n) {
  $color-brightness: round((red($n) * 299) + (green($n) * 587) + math.div(blue($n) * 114, 1000));
  $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + math.div(blue(#ffffff) * 114, 1000));

  @if abs($color-brightness) < ($light-color * 0.5){
    @return white;
  }
  @else {
    @return black;
  }
}