Gutenberg: Colors and grays

[afercia]

I see most of the colors used in the plugin comes from @hugobaeta great work to reduce the amount of colors in WP. They refer to this codepen: http://codepen.io/hugobaeta/full/grJjVp/

However, the WP handbook still refers to the old codepen:
https://make.wordpress.org/design/handbook/foundations/colors/
http://codepen.io/hugobaeta/full/RNOzoV/

I'm all for improvements and for the introduction of the new colors. This should be brought to some public discussion though, for an "official" adoption of the new colors, and then update the handbook.

From an a11y perspective, worth considering that in the old palette, the grey with the minimum allowed contrast ratio against a white background was #72777c which is now replaced by the slightly darker #6c7781 so the gray variable to use for text and controls should be at least $dark-gray-300 or darker (on a white background).
See https://jdlsn.com/color/?type=hex&color=6c7781&color2=FFFFFF

[nylen]

I didn't see this issue until after I created #587 about a specific instance of this.

[hugobaeta]

However, the WP handbook still refers to the old codepen

Yes, this is my bad. Lack of time to update it, mostly because those new grays found in http://codepen.io/hugobaeta/full/grJjVp/ are _conceptual abstracted creations_. 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!

[jasmussen]

So, here's my approach to this, and I would appreciate any help from volunteers to get this spread further.

1. Hugo's colors are on point. There are fewer, they are prettier, they are all round better, for all of WordPress.
2. This editor being a plugin, is a great vehicle to test and showcase these new colors, demonstrate exactly why they are so much better, even if they appear only subtly changed.
3. Because this editor uses new tech and a build process, there was no reason not to "look at where the puck is going to be", and use the hopefully future colors of WordPress.
4. Because the colors are inspired by the existing colors, and only subtly tuned and polished, I see no visual reason why they can't coexist with the current colors.

Incidentally, that also means we are using scss variables. You can see them all defined here:

https://github.com/WordPress/gutenberg/blob/master/editor/assets/stylesheets/_variables.scss

And so, no matter what happens, I would like those Hugo colors to stay. If for whatever reason we are unable to get them approved for use when this plugin is ready to ship, it will be one tiny pull request from me to comment out Hugo's colors, and use the same named variables to refer to the old colors. And in one fell swoop we will have switched back to the old set. Hopefully temporarily.

So technically, this ticket is easily resolved. However I would strongly encourage anyone able to help Hugo get these colors approved for use. Item 4 on this list, I think is important to remember. Maybe we could create a trac ticket to replace the old colors in WP-admin on a piecemeal basis — I don't think we necessarily need to rip them out of the editor even if they aren't fully applied yet.

[ntwb]

I've gone ahead and created a ticket in Trac to discuss the WordPress Core side of this

https://core.trac.wordpress.org/ticket/40633

[karmatosed]

I am closing this as we have a core issue to work through this.