WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 7 months 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 8 months ago.
52670.diff (812 bytes) - added by johnjamesjacoby 8 months ago.
Darker
52670.2.diff (405 bytes) - added by johnjamesjacoby 8 months ago.
Lighter
pointers.png (121.7 KB) - added by ryelle 7 months ago.

Download all attachments as: .zip

Change History (14)

@johnjamesjacoby
8 months ago

Darker

@johnjamesjacoby
8 months ago

Lighter

#1 @johnjamesjacoby
8 months 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
8 months ago

  • Milestone changed from Awaiting Review to 5.8

@ryelle
7 months ago

#3 @ryelle
7 months 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
7 months ago

Agreed, let's go with the darker border 👍

#5 @SergeyBiryukov
7 months 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
7 months 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
7 months ago

Should this also be backported to the 5.7 branch?

#8 @ryelle
7 months 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
7 months 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
7 months 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.