Modal and Customizer close/previous/next icons and focus states

[helen]

We took some cues from the theme details modal in other places (#29012, #28655) but it's not feeling quite right in the context of the WordPress admin or our general "feel", particularly the largeness and the background color in the default scheme. Let's try smaller icons instead, along with arrows without the horizontal.

[helen]

Possible example for icon changes, please ignore the wonky spacing:

Initial feedback on this came from nacin, markjaquith, koop, and myself. Soliciting feedback from MT and other designers.

[celloexpressions]

Noting that we should make the media modal consistent with whatever we end up doing here for icon sizing, coloration, and focus styling, as its (auto-focused) focus styling is really bad, re: #29012.

I do think the smaller icons feel better, unsure about other potential changes.

Related: #29021.

[helen]

#29208 was marked as a duplicate.

[helen]

In 29542:

Align and unify (most) modal and customizer icons. fixes #29147.

[helen]

I closed this fixed, but some notes for reference:

• The plugins one is purposefully different, due to the banner. I don't necessarily love it, but it is not an uncommon paradigm and, since clicking the whole backdrop closes the modal, gives many users a larger target.
• The in-post media modals (library and edit image) still use the slightly heavier X. I am open to going with the thinner one, but without the context of the other arrows and the "button" look in other modals, it seemed to stand better.
• I did make some changes to the above so that the box shadow focus style doesn't look horribly misplaced. However, whether in this release or the next, we should probably re-evaluate and have initial focus go to an input field if at all possible, only falling back to the close button if we have to.
• Some of these icons don't have focus styling beyond the same color change as on hover - this is less than ideal, but given keyboard navigation (escape, arrow keys), I am less concerned about it for this release.

[celloexpressions]

This needs some more work in the Customizer. The icon is horizontally misaligned, see screenshot.

But I think we need to revert to a larger close icon here too, as with plugins. The 22px icon is way too small to really tell that it's a close icon (requires a really close look for me), and it should have hierarchy over the section and panel-expansion icons. It also feels like it should be larger to carry a similar visual weight to the save button. (all of this is also the reason it was set at that size initially). We also need to consider that this is a UI change in 4.0 - users are unlikely to react well to a text button being replaced with a tiny icon, and without the background change it's unclear that the click target is actually much larger than the icon itself. I'm okay with the smaller panel-back icon if we make my next proposed change, but not in love with it - the other type of arrow seems more intuitive to me for this particular action.

We should also make this match our panel arrow thing by changing the background color to the darker gray on hover/focus. Won't be consistent with the admin, but at least we can be consistent within the Customizer, which is front-end rather than admin context anyway, and not functionally the same as a modal. This isn't great either, and I hugely prefer the bolder use of colors that [29542] ripped out, but at least it's consistent with the panel titles. I'm working on a patch for this.

[celloexpressions]

Match the panel-title coloration for hover/focus styling in the Customizer, correct customizer close icon alignment.

[celloexpressions]

Use Customizer panels hover-state colors throughout.

[helen]

In 29608:

Better visual focus syling in customizer, theme preview, and attachment details modals.

props celloexpressions.
fixes #29147.

[helen]

Noticed a couple blue glows left for these - see 29147.4.diff​.

[celloexpressions]

+1 for 29147.4.diff​ - I had removed those at one point but they were added back at one point too so I figured you wanted them. With the current focus states, definitely better without.

[tollmanz]

Close icon misalignment

[tollmanz]

Close icon alignment fix

[tollmanz]

I just noticed that the close icon is misaligned in the Customizer. I have added a simple patch. I hope this is a good place to add this information and fix.

[tollmanz]

Ugh...please ignore my last comment and fix. It appears to be a plugin that was causing the issue. Carry on...

[helen]

In 29674:

Modals: Remove some remnant unnecessary blue glow focus styling.

fixes #29147.

[helen]

Color schemes are still getting blue icons on hover: ​https://cloudup.com/cs8wqB92pBQ

[celloexpressions]

Remove icon color change from color schemes.

[ocean90]

Customizer's close icon too, see ​https://cloudup.com/caWorlWwP3K and ​https://wordpress.org/support/topic/wp-40-rc-1-customize-panel-issue

[celloexpressions]

29147.5.diff​ is untested but should grab them all.

[helen]

Looks good.

[azaozz]

Looks good here too.

[helen]

In 29697:

Modals: Remove yet more cruft that was causing unwanted coloration of icons.

props celloexpressions.
fixes #29147 (for real this time).