WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 4 months ago

#31604 closed defect (bug) (fixed)

Weird selection blue in the Theme Editor

Reported by: samuelsidler Owned by: melchoyce
Milestone: 4.9 Priority: lowest
Severity: trivial Version:
Component: Administration Keywords: has-patch ui-feedback
Focuses: ui Cc:

Description

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.

Attachments (11)

Screen Shot 2015-03-12 at 12.00.28 AM.png (11.5 KB) - added by samuelsidler 3 years ago.
I'm a weird blue!
31604.patch (533 bytes) - added by monopine 2 years ago.
PluginEditor.png (10.8 KB) - added by monopine 2 years ago.
31604.2.patch (521 bytes) - added by monopine 2 years ago.
Revision to earlier patch (wrong directory structure)
Bildschirmfoto 2017-03-17 um 15.27.42.png (623.4 KB) - added by Travel_girl 10 months ago.
Mockup 1
Screen Shot 2017-03-17 at 12.12.02 PM.png (38.3 KB) - added by melchoyce 10 months ago.
Screen Shot 2017-03-21 at 6.39.52 PM.png (27.4 KB) - added by melchoyce 10 months ago.
highlight-test.diff (1.6 KB) - added by karmatosed 4 months ago.
Test of highlight button
highlight-test.2.diff (1.7 KB) - added by melchoyce 4 months ago.
theme-editor-highlight-spacing.png (26.3 KB) - added by melchoyce 4 months ago.
highlight-test3.diff (1.8 KB) - added by karmatosed 4 months ago.
Highlight iterations

Download all attachments as: .zip

Change History (45)

#1 @samuelsidler
3 years ago

  • Owner set to hugobaeta
  • Status changed from new to assigned

#2 @obenland
3 years ago

@hugobaeta, how is this coming along?

This ticket was mentioned in Slack in #design by hugobaeta. View the logs.


3 years ago

#4 @kekkakokkers
3 years ago

https://cldup.com/pV6OHuq-bt.png

  • 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

Last edited 3 years ago by kekkakokkers (previous) (diff)

#5 follow-up: @melchoyce
3 years ago

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

#6 in reply to: ↑ 5 @kekkakokkers
3 years ago

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
2 years ago

@monopine
2 years ago

#7 @monopine
2 years ago

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
2 years ago

Revision to earlier patch (wrong directory structure)

#8 @monopine
2 years ago

  • Keywords has-patch added

#9 @swissspidy
12 months ago

  • Component changed from Themes to Administration
  • Keywords ui-feedback added
  • Milestone changed from Awaiting Review to Future Release

Perhaps something that should change depending on the color scheme?

#10 @Travel_girl
10 months ago

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;
}
Last edited 10 months ago by swissspidy (previous) (diff)

#11 @melchoyce
10 months ago

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.

#12 @melchoyce
10 months ago

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.

#13 follow-up: @Travel_girl
10 months ago

@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.

#14 in reply to: ↑ 13 @melchoyce
10 months ago

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?

#15 @afercia
10 months ago

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:

https://cldup.com/y2LYBpr3gq.png

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

#16 @Travel_girl
10 months ago

@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.

#17 @melchoyce
10 months ago

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.

#18 @Travel_girl
10 months ago

@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?

#19 @melchoyce
10 months ago

@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."

#20 @Travel_girl
10 months ago

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

#21 follow-up: @melchoyce
10 months ago

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

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


10 months ago

#23 in reply to: ↑ 21 @Travel_girl
10 months ago

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.

#24 @karmatosed
10 months ago

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.

#25 @melchoyce
10 months ago

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.

#26 @melchoyce
10 months ago

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

This ticket was mentioned in Slack in #design by travelgirl. View the logs.


5 months ago

#28 @melchoyce
5 months ago

  • Milestone changed from Future Release to 4.9
  • Owner changed from hugobaeta to melchoyce

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 months ago

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


4 months ago

@karmatosed
4 months ago

Test of highlight button

#31 @melchoyce
4 months ago

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
4 months ago

Highlight iterations

#32 @karmatosed
4 months ago

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

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


4 months ago

#34 @westonruter
4 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.