Problem/Motivation
Buttons are an integral part of the admin UI experience, and currently there are many different styles of buttons used in core (dropbutton, manage display cog button, form buttons). None of these are aligned in style.
This has largely happened because we lacked of a styleguide for Drupal’s admin UI. Even though great, coherent UX work was done for Drupal 7, and we have functional UI standards, there was no central guide for the visual conventions used in Drupal’s core admin theme, Seven.
Since then, we developed Proposal: A Style Guide for Seven. This issue aims to introduce the proposed styling for buttons to core to create a unified and consistent look and behavior.
To quote the rationale provided:
Buttons should be clearly identifiable as such, with normal and primary actions inviting interaction. At the same time – for visual conciseness – graphic effects are limited to a subtle gradient (and border, where necessary for contrast with a background). For an informal, friendly appearance, identifiability among other UI controls, and for continuity with Drupal 7, discrete buttons have a fully rounded “pill” shape.
As with input fields, focus is communicated with a blue halo. The hover state brightens the button (optically, light colours ‘advance’) and adds a small shadow beneath, causing it to ‘stand up’ and invite a click. Primary buttons – the save button on a node form, for example – are emphasized using Drupal blue. This carries through the main brand colour, and, since blue is a calming colour, the added emphasis remains respectful, not yelling or rushing the action.
Delete buttons – those that perform a destructive action such as deleting a node – are colored red, since they must call attention and signal caution. However, they should not draw the eye away from more common actions, so their border and background is removed, appearing instead as a plain link. An underline provides an affordance, since danger buttons have neither the standard link colour nor the standard button style.
Note that all button colours pass WCAG 2.0, except for the primary button’s hover state, which warrants some consideration.
Proposed resolution
In #1945522: Add remaining buttons we laid the ground work for this change.
We propose to change the font, change the styling to be more round and finally a new color revised color palette. Just the last two changes are part of this patch.
Remaining tasks
- Make a patch
- Review accessibility
User interface changes
The button style will be changed, no functional differences.
API changes
None
Related Issues
| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| Screen Shot 2013-05-03 at 3.46.01 PM.png | 104.24 KB | Ignored: Check issue status. | None | None |