Stop using hex values for form state and alert colors

Created by: oktalk

Color definitions for form states and alerts should derive from the 'general variable structure' where all other colors are defined.

As often as we can, we should follow our convention of defining values off of our base variables. So for instance, state-success, state-info, state-warning, etc. should all modify the base value of brand-success, brand-info, brand-warning, etc. To ovoid creating new colors.

The Bootstrap framework should take the position of not assuming too much. Bootstrap should not assume that your form state and alert colors would differ from your established brand colors (as most instances they wouldn't). This would lighten the initial configuration of Bootstrap.

The following is a bad practice. It defines new colors outside of our main color definitions, and makes configuration more cumbersome:

$state-success-text:             #3c763d !default;
$state-success-bg:               #dff0d8 !default;
$state-success-border:           darken($state-success-bg, 5%) !default;

Instead we should have something like the following:

$state-success-text:             invert($brand-success) !default;
$state-success-bg:               darken($brand-success, 10) !default;
$state-success-border:           darken($state-success-bg, 5%) !default;