WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 4 weeks ago

#40633 new enhancement

Update wp-admin gray colors aka 50 Shades of WordPress

Reported by: netweb Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords: color-contrast needs-screenshots
Focuses: ui, administration Cc:

Description

Via https://github.com/WordPress/gutenberg/issues/573#issuecomment-298542708

My process was one of matching values (how light or dark a color is) with the old ones to attempt and reduce them to a smaller list of grays.

The thing with this is, these new ones haven't actually been used in wp-admin - What needs to happen is a search and replace for each color on the left, for their corresponding substitute on the right column, and look at them to make sure everything looks (aesthetically balanced) and works (accessibility-wise) well.

I could use some help with structuring this process. Do we go by individual color form the left column (a ticket per color)? Or a one per color on the right column? Or per groups of colors (dark vs light grays)? etc... help!

Related resources and discussions:

  • https://codepen.io/hugobaeta/full/grJjVp/ - This codepen serves as a playground to analyse and improve the use of colors (specifically the numerous shades of gray) in the WordPress Admin. There are currently 174 colors in the Admin. The right column is a proposal to merge multiple values together for consistency and brevity.
  • Previously #31234 Update wp-admin default colors

Attachments (10)

40633-light-gray-100.diff (8.5 KB) - added by melchoyce 6 weeks ago.
40633-light-gray-100.2.diff (9.4 KB) - added by melchoyce 6 weeks ago.
40633-light-gray-200.diff (10.1 KB) - added by melchoyce 6 weeks ago.
40633-light-gray-300.diff (14.5 KB) - added by melchoyce 6 weeks ago.
40633-light-gray-400.diff (867 bytes) - added by melchoyce 6 weeks ago.
40633-light-gray-500.diff (7.5 KB) - added by melchoyce 6 weeks ago.
40633-light-gray-600.diff (28.0 KB) - added by melchoyce 6 weeks ago.
40633-light-gray-700.diff (9.0 KB) - added by melchoyce 6 weeks ago.
40633-light-gray-800.diff (5.8 KB) - added by melchoyce 6 weeks ago.
40633-light-gray-900.diff (5.0 KB) - added by melchoyce 6 weeks ago.

Download all attachments as: .zip

Change History (30)

This ticket was mentioned in Slack in #core-editor by netweb. View the logs.


7 months ago

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


7 months ago

#3 @afercia
7 months ago

  • Keywords color-contrast added

Linking to all the other colors-related tickets (keyword: color-contrast).

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


2 months ago

#5 @melchoyce
6 weeks ago

Trying out just one grey change. in 40633-light-gray-100.diff, I've taken all the (non-tinted) greys from https://codepen.io/hugobaeta/pen/grJjVp and converted to light-gray-100 (##f8f9f9):

  • #fdfdfd
  • #fcfcfc
  • #fbfbfb
  • #fafafa
  • #f9f9f9
  • #f7f7f7

#6 @melchoyce
6 weeks ago

Note: looks like I missed one instance of #f7f7f7 on line 314 of edit.css. @hugobaeta Do you me to try those light blues in this patch too? I can add those in my fix. Your call.

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


6 weeks ago

#8 @melchoyce
6 weeks ago

@hugobaeta said he'll take a look next weekend, so I went ahead and updated the patch. We agreed that we should try patch these one replacement grey at a time.

#9 @melchoyce
6 weeks ago

40633-light-gray-200.diff converts greys to light-gray-200 (#f3f4f5).

This includes:

  • #f5f5f5
  • #f3f3f3
  • #f1f1f1
  • #e4f2fd

It purposely omits #ecf7ed and #e5f5fa, because they are used in .notice-alt classes. It also looks like #E9F5F9 no longer exists in wp-admin.

#10 @melchoyce
6 weeks ago

40633-light-gray-300.diff converts #eee to light-gray-300 (#edeff0).

I didn't find any instances of #ededed in wp-admin.

#11 @melchoyce
6 weeks ago

40633-light-gray-400.diff converts greys to light-gray-400 (#e8eaeb).

This includes:

  • #e8e8e8
  • #eaeaea

#12 @melchoyce
6 weeks ago

40633-light-gray-500.diff converts greys to light-gray-500 (#e2e4e7).

This includes:

  • rgb(229, 229, 229)
  • #e5e5e5
  • rgb(227, 227, 227)
  • #e1e1e1

#13 @melchoyce
6 weeks ago

40633-light-gray-600.diff​ converts #ddd to light-gray-600 (#d7dade).

#14 @melchoyce
6 weeks ago

40633-light-gray-700.diff converts greys to light-gray-700 (#ccd0d4).

This includes:

  • #d8d8d8
  • #d5d5d5
  • #d5d2ca
  • #cccccc
  • #ccc

#15 @melchoyce
6 weeks ago

40633-light-gray-800.diff converts greys to light-gray-800 (#b5bcc2).

This includes:

  • #c4c4c4
  • #b4b9be

#16 @melchoyce
6 weeks ago

40633-light-gray-900.diff converts #a0a5aa to light-gray-900 (#a2aab2).

I couldn't find any instances of #9ea7af in wp-admin.

#17 @melchoyce
6 weeks ago

That's it for all the light greys.

#18 @celloexpressions
6 weeks ago

  • Keywords needs-screenshots added

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


6 weeks ago

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


4 weeks ago

Note: See TracTickets for help on using tickets.