Try: High-luminance default colors

These are colors that are explored through the G2 visual refresh (see #18667).

The color change does a few things:

- It is chosen and balanced against the rest of the visual refresh.
- It reduces the overall color palette, removing secondary colors used for toggles or checkmarks, unifying on a single blue.
- It increases contrast against white, quite a bit, which is good for toggles, focus, form widgets and buttons.

The new blue has a contrast of 5.61:1 compared to 4.57:1 for the previously used WordPress blue (#007cba).

packages/base-styles/_colors.scss

@@ -31,7 +31,7 @@ $medium-gray-text: #757575;
 $light-gray-secondary: #ccc;
 $light-gray-tertiary: #e7e8e9;
 $theme-color: theme(button);
-$blue-medium-focus: #007cba;	// @todo: Currently being used as "spot" color. Needs to be considered in context of themes.
+$blue-medium-focus: #3858e9;	// @todo: Currently being used as "spot" color. Needs to be considered in context of themes.
 $blue-medium-focus-dark: #fff;
 
 // Dark opacities, for use with light themes.

packages/base-styles/index.js

@@ -1,18 +1,18 @@
 exports.adminColorSchemes = {
 	defaults: {
 		primary: '#0085ba',
-		secondary: '#11a0d2',
-		toggle: '#11a0d2',
-		button: '#007cba',
-		outlines: '#007cba',
+		secondary: '#3858e9',
+		toggle: '#3858e9',
+		button: '#3858e9',
+		outlines: '#3858e9',
 	},
 	themes: {
 		'admin-color-light': {
 			primary: '#0085ba',
 			secondary: '#c75726',
-			toggle: '#11a0d2',
+			toggle: '#3858e9',
 			button: '#0085ba',
-			outlines: '#007cba',
+			outlines: '#3858e9',
 		},
 		'admin-color-blue': {
 			primary: '#82b4cb',

packages/components/src/utils/colors-values.js

@@ -91,7 +91,7 @@ export const BLUE = {
 		200: '#bfe7f3',
 		100: '#e5f5fa',
 		highlight: '#b3e7fe',
-		focus: '#007cba',
+		focus: '#3858e9',
 	},
 };