Enhance theme colors (#6438)

It's thursday, and I'm AFK tomorrow for a long weekend! Danish holiday, yeees! For that reason, I treated myself to a nice little color tweaking PR. It's like eating dessert, but in PR form.

In this case, I polished up the mixin that colors Gutenberg according to your WordPress admin color scheme. For most schemes this means that the colors are a tad more accurate, and that their 2nd spot colors are now registered as SCSS variables, even if not yet used.

However in the case of Sunrise and Midnight themes, this 2nd spot color now _is_ being used, to color the Switch. Specifically, we want the _activated_ switch to always have a bright color that stays away from "warning" hues like red or orange. In the case of the Midnight theme, the switch used to be red (dark pink), and in Sunrise it used to be orange. This PR switches those to use the new 2nd spot colors (these are traditionally used for the "notification" color in wp-admin, such as you have 1 plugin update). This makes them light blue and olive, respectively.

edit-post/assets/stylesheets/_admin-schemes.scss

@@ -2,32 +2,53 @@
  * Admin Color Scheme Overrides
  */
 
-// All color schemes, body.admin-color ...
+// List of spot colors
+// - Spot color 1 is used for most decorative elements, eyedropped from the profile color swatches
+// - Spot color 2 is use for notifications and switches, this color as such can be overlaid on spot color 1, eye dropped from the Primary button
+// - Spot color 2 is not often used in Gutenberg, but can be used when spot color 1 is not a good choice for the element to be recolored, like the red switch in Midnight
+
 // -fresh (default, needs no overriding)
-// -light (needs no overriding)
-// -blue
-// -coffee
-// -ectoplasm
-// -midnight
-// -ocean
-// -sunrise
-
-// List of Gutenberg elements that need to be overridden
-// - primary buttons (parent bleeds in)
-// - switches
-// - tab indicators
-
-// List of spot colors (eyedropped from the primary button)
-$scheme-fresh__spot-color: #0083b8;
-$scheme-blue__spot-color: #e1a84b;
-$scheme-coffee__spot-color: #c6a488;
-$scheme-ectoplasm__spot-color: #a0b748;
+$scheme-fresh__spot-color: $blue-medium-500;
+$scheme-fresh__spot-color-2: $blue-wordpress;
+
+// .admin-color-light
+$scheme-light__spot-color: $blue-medium-500;
+$scheme-light__spot-color-2: #c75726;
+
+// .admin-color-blue
+$scheme-blue__spot-color: #82b4cb;
+$scheme-blue__spot-color-2: #d9ab59;
+
+// .admin-color-coffee
+$scheme-coffee__spot-color: #c2a68c;
+$scheme-coffee__spot-color-2: #9fa47b;
+
+// .admin-color-ectoplasm
+$scheme-ectoplasm__spot-color: #a7b656;
+$scheme-ectoplasm__spot-color-2: #c77430;
+
+// .admin-color-midnight
 $scheme-midnight__spot-color: #e34e46;
-$scheme-ocean__spot-color: #9bb99f;
-$scheme-sunrise__spot-color: #de823f;
+$scheme-midnight__spot-color-2: #77a6b9;
+
+// .admin-color-ocean
+$scheme-ocean__spot-color: #a3b9a2;
+$scheme-ocean__spot-color-2: #a89d8a;
+
+// .admin-color-sunrise
+$scheme-sunrise__spot-color: #d1864a;
+$scheme-sunrise__spot-color-2: #c8b03c;
+
+
+// Apply those colors to these Gutenberg elements
+// - primary buttons (spot color)
+// - tab indicators (spot color)
+// - switches (spot color 2)
+
+
 
 // Color override mixin
-@mixin admin-scheme-color-overrides( $scheme: fresh, $spot-color: $scheme-fresh__spot-color ) {
+@mixin admin-scheme-color-overrides( $scheme: fresh, $spot-color: $scheme-fresh__spot-color, $spot-color-2: $scheme-fresh__spot-color-2 ) {
 	body.admin-color-#{ ( $scheme ) } {
 		// Tab indicators
 		.edit-post-sidebar__panel-tab.is-active,
@@ -38,12 +59,12 @@ $scheme-sunrise__spot-color: #de823f;
 		// Switch
 		.components-form-toggle.is-checked {
 			.components-form-toggle__track {
-				background-color: $spot-color;
-				border-color: $spot-color;
+				background-color: $spot-color-2;
+				border-color: $spot-color-2;
 			}
 
 			&:before {
-				background-color: $spot-color;
+				background-color: $spot-color-2;
 			}
 		}
 

edit-post/assets/stylesheets/_colors.scss

@@ -27,8 +27,8 @@ $white: #fff;
 
 // Additional colors
 // some from https://make.wordpress.org/design/handbook/foundations/colors/
-$blue-wordpress-700: #00669b;
 $blue-wordpress: #0073aa;
+$blue-wordpress-700: #00669b;
 $blue-dark-900: #0071a1;
 
 $blue-medium-900: #006589;

edit-post/assets/stylesheets/main.scss

@@ -1,11 +1,15 @@
 // Output overrides for each scheme
-@include admin-scheme-color-overrides( 'blue', $scheme-blue__spot-color );
-@include admin-scheme-color-overrides( 'coffee', $scheme-coffee__spot-color );
-@include admin-scheme-color-overrides( 'ectoplasm', $scheme-ectoplasm__spot-color );
-@include admin-scheme-color-overrides( 'midnight', $scheme-midnight__spot-color );
-@include admin-scheme-color-overrides( 'ocean', $scheme-ocean__spot-color );
-@include admin-scheme-color-overrides( 'sunrise', $scheme-sunrise__spot-color );
-
+// Almost all schemes use only one color swatch, a few have exceptions to ensure usability
+@include admin-scheme-color-overrides( 'fresh', $scheme-fresh__spot-color, $scheme-fresh__spot-color );
+@include admin-scheme-color-overrides( 'light', $scheme-light__spot-color, $scheme-light__spot-color );
+@include admin-scheme-color-overrides( 'blue', $scheme-blue__spot-color, $scheme-blue__spot-color );
+@include admin-scheme-color-overrides( 'coffee', $scheme-coffee__spot-color, $scheme-coffee__spot-color );
+@include admin-scheme-color-overrides( 'ectoplasm', $scheme-ectoplasm__spot-color, $scheme-ectoplasm__spot-color );
+@include admin-scheme-color-overrides( 'midnight', $scheme-midnight__spot-color, $scheme-midnight__spot-color-2 ); // exception to ensure usability
+@include admin-scheme-color-overrides( 'ocean', $scheme-ocean__spot-color, $scheme-ocean__spot-color );
+@include admin-scheme-color-overrides( 'sunrise', $scheme-sunrise__spot-color, $scheme-sunrise__spot-color-2 ); // exception to ensure usability
+
+// Fade animations
 @keyframes animate_fade {
 	from {
 		opacity: 0;