Add vars for yiq color contrast function

[mdo]

Adds two vars instead of the hardcoded colors we had previously. This supersedes #23440, getting us close to what that implementation provides without all the additional Sass map merges.

[danijelGombac]

@mdo

I have a question about yiq color contrast function. Why this function don't' use darken, lighten function to got the contrast?

Like:

$color-yiq-dark-amount: 60% !default;
$color-yiq-light-amount: 60% !default;

@function color-yiq($color, $dark-amount: $color-yiq-dark-amount, $light-amount: $color-yiq-light-amount) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq >= 150) {
    @return darken($color, $dark-amount);
  } @else {
    @return lighten($color, $light-amount);
  }
}

[mdo]

The function determines brightness for us and makes a call on whether a #fff or #111 color passed color contrast against the background. A fixed percentage doesn't work here.

[danijelGombac]

@mdo

I understand how it works, but there isn't fixed percentage. Here is a demo if you have time.

https://www.sassmeister.com/gist/efc3b9eafddadb17dd4c0b0873fd47e5