Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 293248

Message style update

$
0
0

Problem/Motivation

For Drupal 7 we did a massive overhaul to how our messages visually look, combining messages, simplifying the text and making it compliant with WCAG 2.0. We went a little overboard with that strategy, currently messages have a conflicting palette making them hard to read and often ignored. The proposed styling is more "smooth" calling for better integration with the color styles.

This style also includes new icons, sadly this is not within scope of this issue. We will need to update our icon library.

We developed Proposal: A Style Guide for Seven. This issue aims to introduce the proposed styling for messages in core

To quote the rationale provided:

Messages are proposed to follow closely from a style proposed for D7. This style attempts to make messages very noticeable (with a bright colour bar and icon(s) at the left margin) while preventing them from being visually overwhelming (avoiding a full border). Message colors are slightly modified from current values, both for contrast with white and to distinguish one from another.

The messages also propose simplified (one-color) versions of the existing icons and the theme-wide 2px border-radius.

Proposed resolution

In #1945554: Add Messages component we laid the ground work for this change.

Screen Shot 2013-05-03 at 9.58.22 PM.png

We propose to add a small border to the left, reduce the color background and with that contrast. And increase some of the white space.

Remaining tasks

  • Make a patch
  • Add icons in separate issue
  • Review accessibility

User interface changes

The message style will be changed, no functional differences.

API changes

None

AttachmentSizeStatusTest resultOperations
Screen Shot 2013-05-03 at 9.58.22 PM.png70.61 KBIgnored: Check issue status.NoneNone

Viewing all articles
Browse latest Browse all 293248

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>