Widgets inside customiser lack contrast

[paulwilde]

Ever since #31336 was introduced the contract of the widget borders has gotten worst.

The border colours for the customiser interface seem to all be #ddd, whereas the border colour for the widgets are currently set as #e5e5e5. My suggestion would be to use #ddd.

#e5e5e5 is used inside the admin where the widgets (and menus) are on top of a white background, however the background has been changed to #eee so the edges of the widgets now look blurry and a little foreign from the rest of the interface.

See my attached screenshot of its current state and then what I would suggest.

Also for reference #29158.

[celloexpressions]

Left a bunch of comments in slack, but we never redesigned these in #31336. The current proposed design is what was merged with Menu Customizer, once we finalize that we'll want to make widgets match.

[designsimply]

#32727 was marked as a duplicate.

[celloexpressions]

Waiting for a decision on #29158 to patch this, but we need to make widgets and menus match. Currently leaning towards doing white backgrounds for titles, dark borders on hover and expanded, and an in between gray shared by the heading and the form in expanded controls. The titles definitely need to be on a white background when they aren't expanded for visual contrast reasons (especially noticeable with menus). Would like to look at darkening border colors on inputs universally as well.

[obenland]

#29158 got moved out of the milestone, let's look at them together in a future release.

[celloexpressions]

Widget styling needs to be updated to match the newer menus UI, where contrast decisions were carefully considered around the principles established in #31336 (primarily using white backgrounds for interaction elements). This is largely independent of #29158 at this point, although I'm going to cover the available widgets panel in that patch.

[celloexpressions]

My latest comment still stands. This needs a patch accordingly.

Replying to celloexpressions:

Widget styling needs to be updated to match the newer menus UI, where contrast decisions were carefully considered around the principles established in #31336 (primarily using white backgrounds for interaction elements). This is largely independent of #29158 at this point, although I'm going to cover the available widgets panel in that patch.

[dlh]

@paulwilde @celloexpressions Is this ticket still needed following the ​admin CSS changes in WordPress 5.3?

[dlh]

As far as I can tell, the borders referenced here that were #e5e5e5 are now #ccd0d4 after the admin CSS changes in 5.3. Accordingly, I'm thinking that the context in which this ticket was written has been superseded, and that any subsequent discussions about the widgets in the Customizer would get better feedback in a new ticket referencing the admin CSS tickets. If I'm wrong about this, please feel free to reopen.