Admin color schemes: improve contrast to make sidebar compatible with Gutenberg editor chrome

[fushar]

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.

Trac ticket: https://core.trac.wordpress.org/ticket/65382

## Summary

The block editor and Site Editor are moving toward applying 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()). 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).

This PR updates the core admin color schemes to satisfy both, while maintaining each scheme's characteristics.

Several notes:

• With this PR I also try to reduce the number of distinct colors in each scheme. Except for the Light scheme, the primary button's background color is made equal to the currently selected sidebar menu's background color. This simplifies the color schemes.
• I believe some color schemes currently being low-contrast is expected. However, the buildBgRamp() function CANNOT produce low-contrast colors. So, for each such schemes (like Coffee, Ocean) I tried to produce the color with the lowest contrast possible while still being similar to the original color.
• This PR: ​https://github.com/WordPress/gutenberg/pull/23048 changed the primary button color to be the sidebar color, for several schemes (such as Ectoplasm). This PR reverts that behavior due to the reason mentioned before.

[!WARNING]
The ​linked Gutenberg PR must also be backported, because the primary colors are also being updated in base-styles.

### Sidebar contrast (white/black text vs sidebar background)

And whether they pass WCAG 2.x AA (it requires > 4.5:1 for normal text)

Scheme	Before	After
Modern	16.67 ✅	*unchanged*
Fresh	15.89 ✅	*unchanged*
Light	10.03 ✅	10.03 ✅
Blue	2.58 ❌	8.23 ✅
Coffee	7.68 ✅	8.19 ✅
Ectoplasm	9.17 ✅	10.67 ✅
Midnight	11.33 ✅	11.26 ✅
Ocean	3.48 ❌	8.21 ✅
Sunrise	4.48 ❌	8.21 ✅

### Primary button contrast (white text vs button background)

Note that except for Light scheme, this primary button background color is now equal to that of the currently selected menu item.

Scheme	Before	After
Modern	5.61 ✅	*unchanged*
Fresh	5.17 ✅	*unchanged*
Light	4.15 ❌	4.57 ✅
Blue	6.63 ✅	4.58 ✅
Coffee	10.2 ✅	4.96 ✅
Ectoplasm	9.17 ✅	5.59 ✅
Midnight	3.93 ❌	4.65 ✅
Ocean	4.44 ❌	4.92 ✅
Sunrise	2.86 ❌	4.58 ✅

### Screenshots

Before	After
Blue<br>	Blue<br>
Coffee<br>	Coffee<br>
Ectoplasm<br>	Ectoplasm<br>
Light<br>	Light<br>
Midnight<br>	Midnight<br>
Ocean<br>	Ocean<br>
Sunrise<br>	Sunrise<br>

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Opus 4.7-4.8
Used for: iterating the color gradients

I didn't test yet but adding a note to test non-site-editor pages built with WP Build; Fonts, Connectors, etc.
Similarly also plugins building pages with WP Build; a good check would be core AI plugin's settings page.

I didn't test yet but adding a note to test non-site-editor pages built with WP Build

Yep, this is addressed in the Gutenberg PR ​https://github.com/WordPress/gutenberg/pull/78397. Together with that PR, this PR even fixes an existing bug with "disconnected" black chrome surrounding such pages. Copying here for easy reference:

Appearance -> Fonts

(see the gutter/border at bottom-left)

Before	After