Update wp-admin gray colors aka 50 Shades of WordPress

[netweb]

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.

• ​https://codepen.io/hugobaeta/full/RNOzoV/ '- 'The official color palette repository for WordPress (core, .org, and related projects). More information available on the Design Handbook pages.

• ​https://make.wordpress.org/design/handbook/design-guide/foundations/colors/#grays

• ​https://make.wordpress.org/design/2015/04/05/default-admin-color-scheme-update/

• Previously #31234 Update wp-admin default colors

[afercia]

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

[melchoyce]

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

[melchoyce]

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.

[melchoyce]

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

[melchoyce]

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.

[melchoyce]

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

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

[melchoyce]

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

This includes:

• #e8e8e8
• #eaeaea

[melchoyce]

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

This includes:

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

[melchoyce]

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

[melchoyce]

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

This includes:

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

[melchoyce]

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

This includes:

• #c4c4c4
• #b4b9be

[melchoyce]

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

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

[melchoyce]

That's it for all the light greys.

[sabernhardt]

As of WordPress 5.7 (#49999), the color palette includes only 13 gray shades.
​https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7/

Closing as fixed.