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.
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:
.ui.toast
,.ui.segment
, etc..ui.message
uses muted, unsaturated colors.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:<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.