[wp-trac] [WordPress Trac] #65382: Admin color schemes: improve contrast to make sidebar compatible with Gutenberg editor chrome

[WordPress Trac]

#65382: Admin color schemes: improve contrast to make sidebar compatible with
Gutenberg editor chrome
------------------------------------+-----------------------------
 Reporter:  fushar                  |      Owner:  (none)
     Type:  enhancement             |     Status:  new
 Priority:  normal                  |  Milestone:  Awaiting Review
Component:  Administration          |    Version:
 Severity:  normal                  |   Keywords:
  Focuses:  ui, accessibility, css  |
------------------------------------+-----------------------------
 We want the block editor and Site Editor to follow the user's admin color
 scheme (see https://github.com/WordPress/gutenberg/pull/78397). With that,
 the editor chrome will use the color scheme, instead of being always
 black. However, as also discussed in the linked PR, this has a few
 problems with the current color schemes:

 1. The editor chrome's background color is generated from a seed, through
 the WPDS ramp algorithm
 buildBgRamp()(https://github.com/WordPress/gutenberg/blob/35487a041c6569399988a96d5956b92cd3da0a71/packages/theme/src
 /color-ramps/index.ts#L18). This function emits surface colors within a
 specific luminance bands, and cannot reproduce arbitrary colors. Most of
 the current scheme sidebars are outside the bands, so the editor chrome
 will NEVER match them regardless of the seed.
 2. The primary button may appear in the editor chrome, e.g. as `Review X
 changes...` button. So, the background color should be distinct enough
 from the sidebar. Currently several schemes have similar colors (e.g. the
 purple Ectoplasm).

 === Proposed change ===

 Update the admin color schemes so that they:

 - Use sidebar colors that the editor's ramp can reproduce, so the editor
 chrome can match the wp-admin sidebar
 - Use primary button colors that are distinct from the sidebar colors.
 - While doing that, improve the contrast for better legibility.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65382>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform