Apply our gentler color theming to Alert stylings

[armahillo]

Ref: https://github.com/radiusnetworks/iris/issues/3167

The colors were originally defined in Iris overrides, but those colors
were only being applied to flash hashes. Error blocks and other bits
here and there would have the original themed alerts come through, and
these colors are more saturated and a bit "harsher".

The original colors have been preserved in case they are used elsewhere,
but the alerts themselves have been re-skinned to use the new color
variables, which have been named in alignment with flashhash keys.

Post Deploy

All apps using this gem will need to be updated.

[armahillo]

I updated the gem version (patch bump) -- I don't need to build this gem or anything, right? We're just referencing it on the GH?

[jcavena]

I updated the gem version (patch bump) -- I don't need to build this gem or anything, right? We're just referencing it on the GH?

From the bundler docs it looks like that is the case. Bundler should see there's a new version and get latest code.

[jcavena]

@armahillo From the issue, were we wanting to name the color groups more generically? If we want to use the colors in a div, it'll look funky to use .alert-info instead of .info?

[armahillo]

@armahillo From the issue, were we wanting to name the color groups more generically? If we want to use the colors in a div, it'll look funky to use .alert-info instead of .info?

There are some additional styles defined in Iris, but I wanted to change as little as possible in the CSS, since this applies to many different apps. We should be able to define app-specific classes like:

.foo {
  @include alert-variant($alert-flash-notice-bg, $alert-flash-notice-border, $alert-flash-notice-color);
}

though I suppose I could define a parallel set that are used by the flashhash directly, like changing:

.alert-success {
  @include alert-variant($alert-flash-notice-bg, $alert-flash-notice-border, $alert-flash-notice-color);
}

to

.alert-success, .flash.notice {
  @include alert-variant($alert-flash-notice-bg, $alert-flash-notice-border, $alert-flash-notice-color);
}

That would let us remove those definitions from our CSS in the apps.

[armahillo]

@jcavena OK added definitions for that!