Derive ‘-invert’ sass variables from primary colors (Fixes #706)

[WesselKuipers]

This is a bugfix. Fixes #706.

Proposed solution

When overriding the primary color variables, the corresponding -invert variables do not get updated since these are derived from their parent's base color, like so: $primary: $turquoise, $primary-invert: $turquoise-invert.

Issues arise when attempting to override one of these variables with your own colors, since their corresponding -invert variable will still be based on its parent's base color instead of its parent.

Since the -invert variables are supposed to find an appropriate contrast to its parent color, I think it is better to derive it from its parent variable directly using findColorInvert().

Tradeoffs

This solution can impact any user that overrides variables such as $primary without also overriding its corresponding -invert variable, possibly causing some light text to become dark and vice versa.

Testing Done

Tested by setting $primary to #fff in derived-variables.sass and building the css, resulting in:

.button.is-primary {
  background-color: #fff;
  border-color: transparent;
  color: rgba(0, 0, 0, 0.7);
}

Compared to what it previously outputted when doing the same thing:

.button.is-primary {
  background-color: #fff;
  border-color: transparent;
  color: #fff;
}

Changelog updated?

Yes.