In order to have consistent and easy-to-implement alerts, define alert icon styles

[jenniferthibault]

@noahmanger 's keen eye in #157 pointed out a new pattern in alerts that we had not designed for: how alerts and alert icons look on colored backgrounds that may change color.

This meant we needed to take another look at the alert system as a whole, and tinker a bit.

To that point, the alert designs had looked like this:

But we needed to flesh out the system to accommodate colored backgrounds as well, while keeping the number of unique styles to a minimum so that the easiest design to implement will be the best design. Here's an approach I'd like to try:

• Keep the box border as the association for color, but move it to border-left instead of border-top, and make it a bit heavier (3px?). The color keeps it bright and makes it a bit more friendly.
  • success = aqua, error = orange, alert or feedback = neutral (white or tan)
• Make the icons a solid color circle with transparent center graphic
• Make the background color one shade that will work for both primary/secondary background colors

This makes for only two style variances—one for neutral backgrounds, one for primary and secondary backgrounds:

• Neutral backgrounds: Federal blue icons & text (#022C53), box background color (#EEE6DD)
• Primary & secondary backgrounds: white ($cream) icons & text, box background color, white with opacity rgba(255, 255, 255, 0.1)

Those would come together to look like these:

[jenniferthibault]

Using this style, the feedback tool messages should look like this:

[noahmanger]

I like it. I can implement this.

[jenniferthibault]

Cool! I have the images ready: (the last three are white on white, but you get the idea!)

i-alert--neutral

i-error--neutral

i-success--neutral

i-alert--primary

i-error--primary

i-success--primary

Do these names make sense?
If so, should I commit the new png & svg icons to #157 ?

[noahmanger]

Yes please!

On Fri, Oct 23, 2015 at 9:54 AM, Jennifer Thibault <notifications@github.com

wrote:

Cool! I have the images ready: (the last three are white on white, but you
get the idea!)

i-alert--neutral
[image: i-alert--neutral]
https://cloud.githubusercontent.com/assets/11636908/10699434/c0c03c4e-7984-11e5-9420-8384d6628e2a.png

i-error--neutral
[image: i-error--neutral]
https://cloud.githubusercontent.com/assets/11636908/10699433/c0c0196c-7984-11e5-90e0-761418fca8bc.png

i-success--neutral
[image: i-success--neutral]
https://cloud.githubusercontent.com/assets/11636908/10699432/c0bf7886-7984-11e5-848f-2cef982342b4.png

i-alert--primary
[image: i-alert--primary]
https://cloud.githubusercontent.com/assets/11636908/10699464/e242696e-7984-11e5-8af6-763525e62686.png

i-error--primary
[image: i-error--primary]
https://cloud.githubusercontent.com/assets/11636908/10699465/e2436422-7984-11e5-8ecd-6d2d8d65f027.png

i-success--primary
[image: i-success--primary]
https://cloud.githubusercontent.com/assets/11636908/10699463/e23e45c8-7984-11e5-9a28-70937fd10d40.png

Do these names make sense?
If so, should I commit the new png & svg icons to #157
#157 ?

—
Reply to this email directly or view it on GitHub
#158 (comment).

Noah Manger
18F http://18f.gsa.gov | Work: 415-696-6146

[jenniferthibault]

will do! I'm also adding

i-info--neutral

and
i-info--primary

I think the i-info--smalls can stay as they are, unless we should swap the primary/neutral names on them all together, I'm not sure which direction makes the most sense. What makes the most sense with the rest of the system?

[emileighoutlaw]

I'm just popping on to say how impressively fast you iterated on this! Go
Jen!!

On Fri, Oct 23, 2015 at 1:07 PM, Jennifer Thibault <notifications@github.com

wrote:

will do! I'm also adding

i-info--neutral
[image: i-info--neutral]
https://cloud.githubusercontent.com/assets/11636908/10699716/e10afcbc-7986-11e5-9fad-f75f494de051.png

and
i-info--primary
[image: i-info--primary]
https://cloud.githubusercontent.com/assets/11636908/10699720/ef62ff62-7986-11e5-94be-86e27e105f35.png

I think the i-info--smalls can stay as they are, unless we should swap
the primary/neutral names on them all together, I'm not sure which
direction makes the most sense. What makes the most sense with the rest of
the system?

—
Reply to this email directly or view it on GitHub
#158 (comment).

[noahmanger]

Sounds good on the info. For naming scheme, because we're only dealing with either blue or white ones, and the blue ones are default, i just went with:

i-info.svg, i-alert.svg, etc...

And then the white ones are:
i-info--inverse.svg, i-alert--inverse.svg, etc.

These changes are all made in the updating-icons branch.

[jenniferthibault]

Closed by #157