Styles: continue altering base message styles

[agjohnson]

I have had a number of issues with the default FUI theme styles for .ui.message class elements and would like to unify around two styles: a normal message style for subtle messages to the user and a solid color background for bringing direct attention to errors, warnings, and important information.

Issues

The issues with FUI base styles are:

• Styles don't match visually with other components like .ui.toast, .ui.segment, etc.
• They use colors not used anywhere else in the theme. Toast/segment/etc elements use bold, solid color backgrounds where .ui.message uses muted, unsaturated colors.
• Contrast is too low for accessibility standards on most variations, because of the unsaturated colors.
• Link colors do not match the message body color

Normal

A light version of .ui.message with a colored icon and bold header. Using a light background and color on some of the text allows the message to stand out just enough, without calling for immediate user attention:

For example, a message reworked:

Inverted

In FUI terms, this is .ui.inverted.message. These blocks are used for more important messages -- errors, warning, and important information -- places we always want the user to notice and read the notification. These don't fit in well in form prose content, but do work really well as alerts:

Changes

To look like a purposeful change, the existing examples of .ui.info.message will need to be reworked a little bit:

• Add header text. This is for faster scanning and matches all the other examples of notificaitons/form errors we're using.
• Add an icon to help unify the look and feel of all of our notifications/messages.
• Add a <p> wrapper to make the styles work correctly.

We can do this incrementally by using the .ui.info.notification.message variant for all existing .ui.info.message instances.

[agjohnson]

Note for ourselves later: all of the above is about extending the message styling used in notification messages to all .ui.messages.