Admin: A11y: Fix visibility of pressed button state.

Increase the style contrast between pressed and un-pressed button states by using enhanced box-shadow to differentiate.

Props wildworks, mukesh27, shailu25, maulikmakwana2008, huzaifaalmesbah, sabernhardt, khushi1501, ozgursar, noruzzaman, gaisma22, sirlouen, joedolson.
Fixes #64856.

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

Author: joedolson

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

@@ -174,7 +174,7 @@ input[type="radio"]:focus {
 
 	.button-group > .button.active {
 		border-color: var(--wp-admin-theme-color);
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 	}
 
 	.wp-ui-primary {

src/wp-includes/css/buttons.css

@@ -190,15 +190,17 @@ TABLE OF CONTENTS:
 /* pressed state e.g. a selected setting */
 .wp-core-ui .button.active,
 .wp-core-ui .button.active:hover {
-	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-	color: var(--wp-admin-theme-color);
+	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+	color: var(--wp-admin-theme-color-darker-20);
 	border-color: var(--wp-admin-theme-color);
-	box-shadow: none;
+	box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
 }
 
 .wp-core-ui .button.active:focus {
-	border-color: var(--wp-admin-theme-color);
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
+	background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+	color: var(--wp-admin-theme-color-darker-20);
+	border-color: var(--wp-admin-theme-color-darker-20);
+	box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 }
 
 .wp-core-ui .button[disabled],
@@ -361,17 +363,13 @@ TABLE OF CONTENTS:
 
 /* pressed state e.g. a selected setting */
 .wp-core-ui .button-group > .button.active {
-	background-color: #dcdcde;
-	color: #135e96;
-	border-color: #0a4b78;
-	box-shadow: inset 0 2px 5px -3px #0a4b78;
+	border-color: var(--wp-admin-theme-color);
+	box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
 }
 
 .wp-core-ui .button-group > .button.active:focus {
-	border-color: #3582c4;
-	box-shadow:
-		inset 0 2px 5px -3px #0a4b78,
-		0 0 0 1px #3582c4;
+	border-color: var(--wp-admin-theme-color);
+	box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 }
 
 /* ----------------------------------------------------------------------------