Accessibility: Improve and modernize user interface controls: Make th…

…e secondary buttons border blue.

Props drw158, youknowriad, kjellr, melchoyce, talldanwp, audrasjb.
See #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46344 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/colors/_admin.scss

@@ -23,10 +23,11 @@ a {
 	}
 }
 
-#media-upload a.del-link:hover,
-div.dashboard-widget-submit input:hover,
-.subsubsub a:hover,
-.subsubsub a.current:hover {
+#post-body .misc-pub-post-status:before,
+#post-body #visibility:before,
+.curtime #timestamp:before,
+#post-body .misc-pub-revisions:before,
+span.wp-media-buttons-icon:before {
 	color: $link-focus;
 }
 
@@ -73,6 +74,23 @@ textarea:focus {
 /* Core UI */
 
 .wp-core-ui {
+
+	.button,
+	.button-secondary {
+		color: $button-color;
+		border-color: $button-color;
+	}
+
+	.button.hover,
+	.button:hover,
+	.button-secondary:hover,
+	.button.focus,
+	.button:focus,
+	.button-secondary:focus {
+		border-color: darken( $button-color, 5% );
+		color: darken( $button-color, 5% );
+	}
+
 	.button.focus,
 	.button:focus,
 	.button-secondary:focus {
@@ -85,6 +103,10 @@ textarea:focus {
 		@include button( $button-color );
 	}
 
+	.button-group > .button.active {
+		border-color: $button-color;
+	}
+
 	.wp-ui-primary {
 		color: $text-color;
 		background-color: $base-color;

src/wp-admin/css/common.css

@@ -617,13 +617,14 @@ code {
 	position: relative;
 	top: -3px;
 	text-decoration: none;
-	border: 1px solid #7e8993;
+	border: 1px solid #0071a1;
 	border-radius: 2px;
 	text-shadow: none;
 	font-weight: 600;
 	font-size: 13px;
 	line-height: normal; /* IE8-IE11 need this for buttons */
-	color: #555; /* use the standard color used for buttons */
+	color: #0071a1; /* use the standard color used for buttons */
+	background: #f3f5f6;
 	cursor: pointer;
 }
 
@@ -633,9 +634,9 @@ code {
 
 .wrap .add-new-h2:hover, /* deprecated */
 .wrap .page-title-action:hover {
-	background: #f3f5f6;
-	border-color: #7e8993;
-	color: #007cba;
+	background: #f1f1f1;
+	border-color: #016087;
+	color: #016087;
 }
 
 /* lower specificity: color needs to be overridden by :hover and :active */

src/wp-admin/css/edit.css

@@ -448,8 +448,7 @@ form#tags-filter {
 #post-body .misc-pub-post-status:before,
 #post-body #visibility:before,
 .curtime #timestamp:before,
-#post-body .misc-pub-revisions:before,
-span.wp-media-buttons-icon:before {
+#post-body .misc-pub-revisions:before {
 	color: #82878c;
 }
 

src/wp-admin/css/media.css

@@ -931,7 +931,6 @@ border color while dragging a file over the uploader drop area */
 	line-height: 2;
 	margin: 0 8px 8px 0;
 	padding: 0 10px;
-	color: #555;
 }
 
 .imgedit-menu .button:before {

src/wp-includes/css/buttons.css

@@ -123,9 +123,9 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button,
 .wp-core-ui .button-secondary {
-	color: #555;
-	border-color: #7e8993;
-	background: #f1f1f1;
+	color: #0071a1;
+	border-color: #0071a1;
+	background: #f3f5f6;
 	vertical-align: top;
 }
 
@@ -139,9 +139,9 @@ TABLE OF CONTENTS:
 .wp-core-ui .button.focus,
 .wp-core-ui .button:focus,
 .wp-core-ui .button-secondary:focus {
-	background: #f3f5f6;
-	border-color: #7e8993;
-	color: #007cba;
+	background: #f1f1f1;
+	border-color: #016087;
+	color: #016087;
 }
 
 .wp-core-ui .button.focus,
@@ -157,15 +157,15 @@ TABLE OF CONTENTS:
 .wp-core-ui .button.active:hover,
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
-	background: #eee;
-	border-color: #999;
+	background: #f3f5f6;
+	border-color: #7e8993;
 	transform: translateY(1px);
 	box-shadow: none;
 }
 
 .wp-core-ui .button.active:focus {
-	border-color: #999;
-	box-shadow: 0 0 0 1px #999;
+	border-color: #7e8993;
+	box-shadow: 0 0 0 1px #7e8993;
 }
 
 .wp-core-ui .button[disabled],
@@ -319,6 +319,7 @@ TABLE OF CONTENTS:
 .wp-core-ui .button-group > .button.active {
 	background-color: #e2e4e7;
 	box-shadow: inset 0 1px 0 0 #999;
+	border-color: #016087;
 }
 
 .wp-core-ui .button-group > .button:active,