From e9f19035864e432453ff0978eaa5a6379ccdc6c5 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 15 Feb 2016 21:10:17 +0000
Subject: [PATCH] Accessibility: improve the color contrast ratio for the
 TinyMCE button icons.

Also, tries to use the new grays from the Design Handbook wherever applicable.

Props michaelarestad, afercia.
Fixes #35604.

git-svn-id: https://develop.svn.wordpress.org/trunk@36528 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/editor.css | 44 ++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css
index af0f7ce991..acfdee384a 100644
--- a/src/wp-includes/css/editor.css
+++ b/src/wp-includes/css/editor.css
@@ -377,7 +377,7 @@ div.mce-path {
 .qt-dfw:hover,
 .qt-dfw:focus {
 	background: #fafafa;
-	border-color: #999;
+	border-color: #555d66;
 	color: #23282d;
 	-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
 	box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
@@ -388,17 +388,14 @@ div.mce-path {
 .mce-toolbar .mce-btn-group .mce-btn:active,
 .qt-dfw.active {
 	background: #ebebeb;
-	border-color: #999;
+	border-color: #555d66;
 	-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
 	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 );
 }
 
-.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover {
-	border-color: #555;
-}
-
-.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover i.mce-ico {
-	color: #555;
+.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover,
+.mce-toolbar .mce-btn-group .mce-btn.mce-active:focus {
+	border-color: #23282d;
 }
 
 .mce-toolbar .mce-btn-group .mce-btn.mce-disabled:hover,
@@ -411,6 +408,10 @@ div.mce-path {
 	box-shadow: none;
 }
 
+.mce-toolbar .mce-btn-group .mce-btn.mce-disabled:focus {
+	border-color: #555d66;
+}
+
 .mce-toolbar .mce-btn-group .mce-first,
 .mce-toolbar .mce-btn-group .mce-last {
 	border-color: transparent;
@@ -449,6 +450,7 @@ div.mce-path {
 	left: 3px;
 	height: 3px;
 	width: 20px;
+	background: #555d66;
 }
 
 .mce-toolbar .mce-btn-group .mce-btn.mce-primary {
@@ -502,12 +504,13 @@ div.mce-path {
     box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, .2);
 }
 
-.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
+.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover,
+.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:focus {
 	border-color: #b4b9be;
 }
 
 .mce-panel .mce-btn i.mce-caret {
-	border-top: 6px solid #777;
+	border-top: 6px solid #555d66;
 	margin-left: 2px;
 	margin-right: 2px;
 }
@@ -516,13 +519,14 @@ div.mce-path {
 	right: 4px;
 }
 
-.mce-panel .mce-btn:hover i.mce-caret {
-	border-top-color: #32373c;
+.mce-panel .mce-btn:hover i.mce-caret,
+.mce-panel .mce-btn:focus i.mce-caret {
+	border-top-color: #23282d;
 }
 
 .mce-panel .mce-active i.mce-caret {
 	border-top: 0;
-	border-bottom: 6px solid #32373c;
+	border-bottom: 6px solid #23282d;
 	margin-top: 7px;
 }
 
@@ -647,7 +651,7 @@ div.mce-menu .mce-menu-item-sep,
 .mce-window .mce-btn:hover,
 .mce-window .mce-btn:focus {
 	background: #fafafa;
-	border-color: #999;
+	border-color: #555d66;
 	color: #23282d;
 }
 
@@ -662,8 +666,8 @@ div.mce-menu .mce-menu-item-sep,
 
 .mce-window .mce-btn:active {
 	background: #eee;
-	border-color: #999;
-	color: #32373c;
+	border-color: #555d66;
+	color: #23282d;
 	-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
 	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
 }
@@ -778,7 +782,7 @@ div.mce-menu .mce-menu-item-sep,
 }
 
 .mce-toolbar .mce-ico {
-	color: #777;
+	color: #555d66;
 	line-height: 20px;
 	width: 20px;
 	height: 20px;
@@ -789,7 +793,7 @@ div.mce-menu .mce-menu-item-sep,
 }
 
 .qt-dfw {
-	color: #777;
+	color: #555d66;
 	line-height: 20px;
 	width: 28px;
 	height: 26px;
@@ -804,7 +808,7 @@ div.mce-menu .mce-menu-item-sep,
 .mce-toolbar .mce-btn:hover .mce-open,
 .mce-toolbar .mce-btn:focus .mce-open,
 .mce-toolbar .mce-btn.mce-active .mce-open {
-	border-left-color: #999;
+	border-left-color: #23282d;
 }
 
 i.mce-i-bold,
@@ -1067,7 +1071,7 @@ i.mce-i-wp_code:before {
 	position: relative;
 	top: 1px;
 	background: #ebebeb;
-	color: #777;
+	color: #666;
 	cursor: pointer;
 	font: 13px/19px "Open Sans", sans-serif;
 	height: 20px;