UI/UX: Inconsistent patterns for active/selected control colors

[richtabor]

Just starting a conversation around developing a consistent active/selected color for controls primarily within the Settings Sidebar/InspectorControls.

For active/selected button states within InspectorControls regions, should folks be employing the editor's primary color? Or perhaps the dark gray color that is used on the Setting Sidebar button and within the HeadingToolbar? While G2 is looking good, we can work to establish a pattern now - that will be naturally adopted into G2. We briefly discussed this in the Slack #design channel.

Looking through our current UI, here are a few variants of active/selected states that are employed today (screenshots below).

A. Settings Sidebar button

Uses a dark gray color for the active/selected state.

--

B. Heading block HeadingToolbar

Also uses a dark gray color for the active/selected state:

--

C. Image dimensions ButtonGroup

Uses the primary theme color (blue in this case) to signify a selected button within the group:

--

D. ToggleControl

This example is from the Paragraph block. Note that the control utilizes a different blue in the default theme:

--

E. Gradient tabs

Here's a ButtonGroup that is utilizing secondary and primary button styles (primary signifying the active tab):

--

F. Radio/Checkbox controls

--

G. Third party blocks/controls

This is an example from a CoBlocks block utilizing the ButtonGroup component with primary and secondary button styles.

--

After reviewing the different cases, an applied standard would be nice here - again, one that we could roll right into G2. I could be convinced either way if active states should be using the primary color, or the (currently) darker gray color - though I lean towards a color that is not so heavy - simplifying the UI - rather than flashing color. And we're not signifying a primary action (whereas the "Publish/Update" does) - but instead identifying a selection.

Thoughts?

[karmatosed]

What a great deep dive @richtabor, let me loop in @jasmussen as there certainly is some connecting work here with the iterations on interface going on.

[jasmussen]

For active/selected button states within InspectorControls regions, should folks be employing the editor's primary color? Or perhaps the dark gray color that is used on the Setting Sidebar button and within the HeadingToolbar? While G2 is looking good, we can work to establish a pattern now - that will be naturally adopted into G2. We briefly discussed this in the Slack #design channel.

Delightful question to be asking, and one that, as you allude to, the G2 efforts have tried to address. In that design, the treatment for a toggled state is a (very) dark background. The two exceptions are the Switch control, and the Checkbox control, both of which use the theme color.

It would be only reasonable to explore those with the UI we have today, to help inform it and shape it. In that vein, what would it look like if we employed the same gray inversion/toggled state across the elements you mention? In my minds eye, it surfaces some design challenges with how buttons look after the latest iteration. While the stronger focus styles are helpful, the blue border and gray material inside has not worked as well. In exploring the dark gray toggled state, we may need to look also at how secondary buttons look.

[richtabor]

We should add the ResizableBox handles to this as well, as they're using a different color blue than the current G2 primary color.

The handles are using theme(primary) whereas the primary blue buttons are using theme(button) shade(6%). Source: https://github.com/WordPress/gutenberg/blob/0552712059ac5519fad0aeab6dddc5b84f049192/packages/components/src/button/style.scss#L25`

[jasmussen]

We should add the ResizableBox handles to this as well, as they're using a different color blue than the current G2 primary color.

😱

I have to fix this. Thank you for bringing it to my attention. I hope to get to this soon.

[jasmussen]

@richtabor I'm taking a look at a few of these items here today, but it appears this one, #19904 (comment), might have been fixed.

Looking at the latest version of the button style in https://github.com/WordPress/gutenberg/blob/master/packages/components/src/button/style.scss#L45 it uses the same $theme-color as the resize handles do. If I'm missing something, happy to fix, otherwise I'll assume this one is done.