Weird selection blue in the Theme Editor

[samuelsidler]

The theme editor uses a background color to show which file is selected. By default, it's this weird light blue that doesn't really blend with anything.

The entire selection style is weird, but that blue just feels off. Hugo has some ideas about a better color.

[samuelsidler]

I'm a weird blue!

[obenland]

@hugobaeta, how is this coming along?

[kekkakokkers]

• Changed the highlight background to 75% tint #BFE7F3
• Changed the color of the filename (class=nonessential) to #585858 to improve contrast

Colors passes WCAG 2.0 AA

​https://cloudup.com/cLn19pMMLiu

[melchoyce]

Hi @kekkakokkers, I think that screenshot might be private. Can you upload it as an attachment to the ticket? Thanks!

[kekkakokkers]

Replying to melchoyce:

Hi @kekkakokkers, I think that screenshot might be private. Can you upload it as an attachment to the ticket? Thanks!

Updated the screenshot

[monopine]

Created a patch based on @kekkakokkers color values - #BFE7F3 for the background color (span.highlight), and #585858 for (.nonessential). I stumbled upon one other view to be considerate of (slight variation in colors) when choosing these highlight colors, which can be seen in Plugins -> Editor. (screenshot attached above).

[monopine]

Revision to earlier patch (wrong directory structure)

[swissspidy]

Perhaps something that should change depending on the color scheme?

[Travel_girl]

I would suggest, to change the background-color and make it a bit darker . so the contrast is a bit higher.

I addition we could ad a style like on the plugin site. In this way the design is more consistent and the selected file is a easier to see.

#templateside .highlight {
    border-left: 4px solid #00a0d2;
}

.highlight {
    background-color: #CDEFFB;
}

[Travel_girl]

Mockup 1

[melchoyce]

How about:

Background: #BFE7F3 (Blue tint 75%)
Border: #00A0D2 (Medium blue)
Title: #23282D (Dark gray)
Filename: #555D66 (Dark medium gray)

Background + Title contrast ratio: 11.28:1
Background + Filename contrast ratio: 5.07:1

Colors pulled from ​https://codepen.io/hugobaeta/pen/RNOzoV. Attaching image after comment.

[melchoyce]

The filename is still a little muddy — may need to swap to a bluer grey. @Travel_girl or @hugobaeta if you have any suggestions there, please chime in.

[Travel_girl]

@melchoyce looks good.

Yes I also think the filename is not clear enough and the contrast between background and fourground is not high enhough for a good accessibility --> ​http://www.etre.com/tools/colourcheck/

I think the question is: how important is the different between filename and title. The filename can be darker, but I´m not sure, how different it would be to the title.

[melchoyce]

Replying to Travel_girl:

@melchoyce looks good.

Yes I also think the filename is not clear enough and the contrast between background and fourground is not high enhough for a good accessibility --> ​http://www.etre.com/tools/colourcheck/

I think the question is: how important is the different between filename and title. The filename can be darker, but I´m not sure, how different it would be to the title.

AFAIK, we're only trying to pass AA, not AAA. 5.07:1 should be sufficient contrast: ​https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#color-contrast

@afercia can you chime in?

[afercia]

Yep, the minimum contrast ratio we aim for is 4.5:1 (level AA for normal text). About background and border, why not simply use the notice notice-info notice-alt classes? Quickly tried without touching the text color, margin, padding, etc. that should be adjusted as suggested above, of course:

Also: is the italic style really necessary? To me, it's a bit disturbing and doesn't add any important information.

[Travel_girl]

@afercia and @melchoyce thanks for the links and the explanation.

I find the current background color not dark enough to have an highlight and I think just the border is not visible enough.

I'm not sure with the italic. I think it makes the different between title and description a bit more clear.

[melchoyce]

notice-alt is only for white backgrounds. On grey backgrounds, it blends in with the page. I'll upload a version that uses the regular notice class, for comparison.

I'm fine either way re: italics on the filename. It's probably there to provide more hierarchy, but it between the color and the size I think it's fine without being italic.

[Travel_girl]

@melchoyce I think the last version (https://core.trac.wordpress.org/attachment/ticket/31604/Screen%20Shot%202017-03-21%20at%206.39.52%20PM.png) is the best so far.

Did you just changed the class or also css?

[melchoyce]

@Travel_girl I added the notice notice-info classes to the container li, and removed the highlight class from the span inside of it.

I'm kind of torn — on one side, I think this is an improvement on the existing highlight. On the other side, this isn't a notice, so should we be repurposing the notice styles here? I'm leaning towards "maybe it's not a big deal to reuse those styles here."

[Travel_girl]

Could we add another class to WordPress? Like "Highlight grey background"

[melchoyce]

We can probably change the highlight class itself, we'll just want to check and see where else it's used.

[Travel_girl]

Replying to melchoyce:

We can probably change the highlight class itself, we'll just want to check and see where else it's used.

Can you check this? I'm not sure where to start with this task.

[karmatosed]

The use or notice makes a lot of sense. I do agree its a little odd as not a notice, visually though it is less jarring. In this case reusing to me makes sense.

https://core.trac.wordpress.org/attachment/ticket/31604/Screen%20Shot%202017-03-21%20at%206.39.52%20PM.png gets my +1 vote.

[melchoyce]

Thanks @karmatosed, let's go with re-using the notice classes then.

I'll take a look later today to see where else highlight is used.

[melchoyce]

Just checked — the highlight class only seems to be used in the theme and plugin editors in core.

[karmatosed]

Test of highlight button

[melchoyce]

Tweaked some spacing in highlight-test.2.diff​.

I tried to move the highlighted file 12px to the left in the Theme Editor, but for the life of me can't get it to move without messing up other elements. Attaching a before/after of what I'm looking to do, if anyone can hop in and help.

The top margin between theme and plugin editors is also a little inconsistent, if someone wants to fix that.

[karmatosed]

Highlight iterations

[karmatosed]

Did some iterations in highlight-test.3.diff.

• Adding margin - to the class
• Removed link class and highlight class on the plugin editor that isn't needed

[westonruter]

In 41595:

Code Editors: Update the current file highlight to use notice styling.

Improves color contrast and readability, and reuses a core design pattern.

Props kekkakokkers, monopine, Travel_girl, afercia, melchoyce, karmatosed.
Fixes #31604.