Skip to content

Commit d3d0745

Browse files
youknowriadyouknowriad
committed
Administration: Improve admin color scheme contrast for the editor chrome.
Update the core admin color schemes so their sidebar and primary button colors work well when the block editor and Site Editor apply the user's admin color scheme to the editor chrome. The chrome background is generated from a seed through the WPDS ramp algorithm, which only emits surface colors within specific luminance bands and cannot reproduce arbitrary colors, so several schemes could never match. Adjust the Blue, Coffee, Ectoplasm, Light, Midnight, Ocean, and Sunrise schemes to bring sidebar and primary button text contrast to WCAG 2.x AA (4.5:1), keep each scheme's character, and reduce the number of distinct colors per scheme by reusing the selected menu item's background for the primary button (except for Light). Props fushar, simison, youknowriad, joen. Fixes #65382. git-svn-id: https://develop.svn.wordpress.org/trunk@62454 602fd350-edb4-49c9-b593-d223f7449a82
1 parent c5618d1 commit d3d0745

8 files changed

Lines changed: 47 additions & 36 deletions

File tree

‎src/wp-admin/css/colors/blue/colors.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
$highlight-color: #096484;
1+
$highlight-color: #437aa8;
22

33
@use "../_admin.scss" with (
44
$scheme-name: "blue",
5-
$base-color: #52accc,
5+
$base-color: #245278,
66
$icon-color: #e5f8ff,
77
$highlight-color: $highlight-color,
88
$notification-color: #e1a948,
9-
$button-color: #e1a948,
10-
9+
$menu-highlight-text: #fff,
10+
$menu-highlight-icon: #fff,
11+
$menu-bubble-text: #1e1e1e,
1112
$menu-submenu-text: #e2ecf1,
1213
$menu-submenu-focus-text: #fff,
13-
$menu-submenu-background: #4796b3,
1414

1515
$dashboard-icon-background: $highlight-color
1616
);

‎src/wp-admin/css/colors/coffee/colors.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
$base-color: #59524c;
1+
$base-color: #5c4c40;
22

33
@use "../_admin.scss" with (
44
$scheme-name: "coffee",
55
$base-color: $base-color,
6-
$highlight-color: #c7a589,
6+
$highlight-color: #916745,
77
$notification-color: #9ea476,
8+
$menu-highlight-text: #fff,
9+
$menu-highlight-icon: #fff,
10+
$menu-bubble-text: #1e1e1e,
11+
$menu-submenu-focus-text: #fff,
812
$form-checked: $base-color,
9-
10-
$low-contrast-theme: "true"
1113
);

‎src/wp-admin/css/colors/ectoplasm/colors.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
$base-color: #523f6d;
1+
$base-color: #4a3369;
22

33
@use "../_admin.scss" with (
44
$scheme-name: "ectoplasm",
55
$base-color: $base-color,
66
$icon-color: #ece6f6,
7-
$highlight-color: #a3b745,
7+
$highlight-color: #646c3e,
88
$notification-color: #d46f15,
9+
$menu-highlight-text: #fff,
10+
$menu-highlight-icon: #fff,
11+
$menu-bubble-text: #1e1e1e,
12+
$menu-submenu-focus-text: #fff,
913

1014
$form-checked: $base-color,
1115
);

‎src/wp-admin/css/colors/light/colors.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
@use "sass:color";
22

3-
$highlight-color: #04a4cc;
3+
$highlight-color: #007cba;
44
$text-color: #333;
55
$menu-avatar-frame: #aaa;
66

77
@use "../_admin.scss" with (
88
$scheme-name: "light",
99
$base-color: #e5e5e5,
10-
$icon-color: #999,
10+
$icon-color: #6a6a6a,
1111
$text-color: $text-color,
1212
$highlight-color: $highlight-color,
13-
$notification-color: #d64e07,
13+
$notification-color: #c64606,
1414

1515
$body-background: #f5f5f5,
1616

1717
$menu-highlight-text: #fff,
18-
$menu-highlight-icon: #ccc,
19-
$menu-highlight-background: #888,
18+
$menu-highlight-icon: #fff,
19+
$menu-highlight-background: #6e6e6e,
2020

2121
$menu-bubble-text: #fff,
2222
$menu-submenu-background: #fff,

‎src/wp-admin/css/colors/midnight/colors.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
@use "sass:color";
22

3-
$base-color: #363b3f;
4-
$highlight-color: #e14d43;
3+
$base-color: #333c42;
4+
$highlight-color: #cf4339;
55
$notification-color: #69a8bb;
66

77
@use "../_admin.scss" with (
88
$scheme-name: "midnight",
99
$base-color: $base-color,
1010
$highlight-color: $highlight-color,
1111
$notification-color: $notification-color,
12+
$menu-highlight-text: #fff,
13+
$menu-highlight-icon: #fff,
14+
$menu-bubble-text: #1e1e1e,
15+
$menu-submenu-focus-text: #fff,
1216

1317
$dashboard-accent-2: color.mix($base-color, $notification-color, 90%),
1418
);

‎src/wp-admin/css/colors/ocean/colors.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
$base-color: #738e96;
1+
$base-color: #39535a;
22

33
@use "../_admin.scss" with (
44
$scheme-name: "ocean",
55
$base-color: $base-color,
66
$icon-color: #f2fcff,
7-
$highlight-color: #9ebaa0,
7+
$highlight-color: #567958,
88
$notification-color: #aa9d88,
9+
$menu-highlight-text: #fff,
10+
$menu-highlight-icon: #fff,
11+
$menu-bubble-text: #1e1e1e,
12+
$menu-submenu-focus-text: #fff,
913
$form-checked: $base-color,
10-
11-
$low-contrast-theme: "true"
1214
);

‎src/wp-admin/css/colors/sunrise/colors.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
@use "sass:color";
2-
3-
$highlight-color: #dd823b;
4-
51
@use "../_admin.scss" with (
62
$scheme-name: "sunrise",
7-
$base-color: #cf4944,
8-
$highlight-color: $highlight-color,
3+
$base-color: #8a312d,
4+
$highlight-color: #ad631e,
95
$notification-color: #ccaf0b,
10-
$menu-submenu-focus-text: color.adjust($highlight-color, $lightness: 35%)
6+
$menu-highlight-text: #fff,
7+
$menu-highlight-icon: #fff,
8+
$menu-bubble-text: #1e1e1e,
9+
$menu-submenu-focus-text: #fff
1110
);

‎src/wp-includes/general-template.php‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4941,7 +4941,7 @@ function register_admin_color_schemes() {
49414941
'light',
49424942
_x( 'Light', 'admin color scheme' ),
49434943
admin_url( "css/colors/light/colors$suffix.css" ),
4944-
array( '#e5e5e5', '#999', '#d64e07', '#04a4cc' ),
4944+
array( '#e5e5e5', '#6a6a6a', '#c64606', '#007cba' ),
49454945
array(
49464946
'base' => '#999',
49474947
'focus' => '#ccc',
@@ -4953,7 +4953,7 @@ function register_admin_color_schemes() {
49534953
'blue',
49544954
_x( 'Blue', 'admin color scheme' ),
49554955
admin_url( "css/colors/blue/colors$suffix.css" ),
4956-
array( '#096484', '#4796b3', '#52accc', '#74B6CE' ),
4956+
array( '#183751', '#245278', '#437aa8', '#e1a948' ),
49574957
array(
49584958
'base' => '#e5f8ff',
49594959
'focus' => '#fff',
@@ -4965,7 +4965,7 @@ function register_admin_color_schemes() {
49654965
'midnight',
49664966
_x( 'Midnight', 'admin color scheme' ),
49674967
admin_url( "css/colors/midnight/colors$suffix.css" ),
4968-
array( '#25282b', '#363b3f', '#69a8bb', '#e14d43' ),
4968+
array( '#232a2e', '#333c42', '#69a8bb', '#cf4339' ),
49694969
array(
49704970
'base' => '#f1f2f3',
49714971
'focus' => '#fff',
@@ -4977,7 +4977,7 @@ function register_admin_color_schemes() {
49774977
'sunrise',
49784978
_x( 'Sunrise', 'admin color scheme' ),
49794979
admin_url( "css/colors/sunrise/colors$suffix.css" ),
4980-
array( '#b43c38', '#cf4944', '#dd823b', '#ccaf0b' ),
4980+
array( '#6f2724', '#8a312d', '#ad631e', '#ccaf0b' ),
49814981
array(
49824982
'base' => '#f3f1f1',
49834983
'focus' => '#fff',
@@ -4989,7 +4989,7 @@ function register_admin_color_schemes() {
49894989
'ectoplasm',
49904990
_x( 'Ectoplasm', 'admin color scheme' ),
49914991
admin_url( "css/colors/ectoplasm/colors$suffix.css" ),
4992-
array( '#413256', '#523f6d', '#a3b745', '#d46f15' ),
4992+
array( '#392751', '#4a3369', '#646c3e', '#d46f15' ),
49934993
array(
49944994
'base' => '#ece6f6',
49954995
'focus' => '#fff',
@@ -5001,7 +5001,7 @@ function register_admin_color_schemes() {
50015001
'ocean',
50025002
_x( 'Ocean', 'admin color scheme' ),
50035003
admin_url( "css/colors/ocean/colors$suffix.css" ),
5004-
array( '#627c83', '#738e96', '#9ebaa0', '#aa9d88' ),
5004+
array( '#2b3f44', '#39535a', '#567958', '#aa9d88' ),
50055005
array(
50065006
'base' => '#f2fcff',
50075007
'focus' => '#fff',
@@ -5013,7 +5013,7 @@ function register_admin_color_schemes() {
50135013
'coffee',
50145014
_x( 'Coffee', 'admin color scheme' ),
50155015
admin_url( "css/colors/coffee/colors$suffix.css" ),
5016-
array( '#46403c', '#59524c', '#c7a589', '#9ea476' ),
5016+
array( '#382e27', '#5c4c40', '#916745', '#9ea476' ),
50175017
array(
50185018
'base' => '#f3f2f1',
50195019
'focus' => '#fff',

0 commit comments

Comments
 (0)