[wp-trac] [WordPress Trac] #29158: Customizer UI Design lacks contrast for visual hierarchy and does not match wp-admin

[WordPress Trac]

#29158: Customizer UI Design lacks contrast for visual hierarchy and does not match
wp-admin
------------------------------+-----------------------------------
 Reporter:  celloexpressions  |      Owner:
     Type:  enhancement       |     Status:  new
 Priority:  normal            |  Milestone:  Awaiting Review
Component:  Customize         |    Version:  3.8
 Severity:  normal            |   Keywords:  has-patch ui-feedback
  Focuses:  ui                |
------------------------------+-----------------------------------
 WordPress 3.8 (and the mp6 project) introduced a new design language for
 the WordPress admin, including a flatened design, higher contrast, more
 color, an icon font, and more. While it reskinned the Customizer, further
 work on the Customizer UI has proven difficult because the Customizer
 still lacks enough contrast for proper focus/hover/active styling.

 Implementing things like Widgets, Menus, and Panels into the Customizer,
 has shown that most background colors need to be between #fff (the section
 heading color) and #eee. This makes it extremely difficult to create
 visual hierarchy between UI elements using color.

 Customizer controls themselves are on a white background, not the off-
 white that is now used in wp-admin, making input elements stand out less
 and generally making something about the Customizer UI not feel very
 "WordPress". While the other accordion in the admin (in Menus) also uses
 this convention, it doesn't fit well in the Customizer since the
 Customizer accordion contains the primary actions.

 The goal of this ticket is to introduce more breathing room for stronger
 visual hierarchy in new development with the Customizer, and to resolve
 the lack of contrast for focus/hover and active (open/current-section)
 states. Additionally, we should address concerns that the Customizer
 doesn't really match wp-admin (or the front-end toolbar, for that matter,
 which it should be more similar to given the front-end context) in the
 process.

 MP6 did experiment with a considerably different design for the Customizer
 at one point, but it was pulled because the dark styling, which was keyed
 to color schemes, was too heavy, and felt more appropriate for a menu than
 for tools. However, one potential option for addressing this ticket is to
 re-explore color scheme integration, since color schemes are under-
 utilized in the Customizer. This is one approach I'm proposing, but not
 the only possible solution here. Many options have been explored, and I
 like this the best, but this is design so not everyone will. I'm open to
 anything that addresses the issues above.

 The coming patch uses admin menu colors (keyed to colorschemes) for the
 navigation components of the Customizer, but uses wp-admin body styling
 (the off-white background and light UI) for the functional tools/controls
 regions of the Customizer. Not perfect, but an interesting proof-of-
 concept at the very least, and does address some of the issues with this
 approach in mp6.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/29158>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform