WordPress.org

Make WordPress Core

Opened 6 weeks ago

Closed 2 weeks ago

#52670 closed defect (bug) (fixed)

Admin pointer arrow border color darker than pointer content

Reported by: johnjamesjacoby Owned by: ryelle
Milestone: 5.7.1 Priority: normal
Severity: normal Version: 3.5
Component: Administration Keywords: has-screenshots commit fixed-major
Focuses: ui, css Cc:

Description

Previous to 5.7 and r50025, the pointer arrows were #ccc and the content was #ddd.

Currently, for 5.7, the arrows are #c3c4c7 and the content is #dcdcde.

Looking back at the changelog of wp-pointer.css, they have always been different colors.

I don't think they are different enough to be providing much value, so let's consider making them the same.

Screen shot imminent.

Attachments (4)

jjj-on-2021-02-26-at-22-37-58@2x.png (990.4 KB) - added by johnjamesjacoby 6 weeks ago.
52670.diff (812 bytes) - added by johnjamesjacoby 6 weeks ago.
Darker
52670.2.diff (405 bytes) - added by johnjamesjacoby 6 weeks ago.
Lighter
pointers.png (121.7 KB) - added by ryelle 4 weeks ago.

Download all attachments as: .zip

Change History (14)

@johnjamesjacoby
6 weeks ago

Darker

@johnjamesjacoby
6 weeks ago

Lighter

#1 @johnjamesjacoby
6 weeks ago

One possibility for the arrow border being darker than the content, is that a diagonal line may be perceived as lighter by human eyes thanks to its pixels being feathered from not being perfectly horizontally or vertically aligned, which my screen shot makes easy to see when zoomed in 800%.

On a more modern display than one from when Pointers were originally introduced (2014?) the trick isn't necessary, and the darker color simply appears erroneous.

I prefer the darker border for everything, as I think the higher contrast of the darker border both looks nicer and makes the pointer UI appear more visually separated from the content underneath it.

#2 @SergeyBiryukov
6 weeks ago

  • Milestone changed from Awaiting Review to 5.8

@ryelle
4 weeks ago

#3 @ryelle
4 weeks ago

I'm pretty sure you're right about the darker color on the diagonal being perceptually lighter, but I don't think we need to do that anymore for modern browsers/screens.

Added some screenshots from the patches. I agree that the darker border around the pointer looks better, and that's the same border color as the dashboard cards - points for consistency. So my vote is for the approach in 52670.2.diff

#4 @melchoyce
3 weeks ago

Agreed, let's go with the darker border 👍

#5 @SergeyBiryukov
3 weeks ago

  • Keywords commit added

Just noting that there appears to be some confusion with the patch descriptions, as 52670.diff has a description of "Darker" but actually suggests lighter colors. Conversely, 52670.2.diff has a description of "Lighter" but suggests a darker color.

Based on the comments above, it looks like 52670.2.diff is the way to go.

#6 @ryelle
3 weeks ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

In 50551:

Pointers: Make pointer border darker to match arrow tip.

Props johnjamesjacoby, melchoyce, SergeyBiryukov.
Fixes #52670.

#7 follow-up: @ryelle
3 weeks ago

Should this also be backported to the 5.7 branch?

#8 @ryelle
2 weeks ago

  • Milestone changed from 5.8 to 5.7.1
  • Resolution fixed deleted
  • Status changed from closed to reopened

#9 in reply to: ↑ 7 @SergeyBiryukov
2 weeks ago

  • Keywords fixed-major added

Replying to ryelle:

Should this also be backported to the 5.7 branch?

I think so, good catch :)

#10 @ryelle
2 weeks ago

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

In 50581:

Pointers: Make pointer border darker to match arrow tip.

Props johnjamesjacoby, melchoyce, SergeyBiryukov.
Merges [50551] to the 5.7 branch.
Fixes #52670.

Note: See TracTickets for help on using tickets.