Accessibility: Improve and modernize user interface controls: Improve the buttons active CSS class.

- improves the buttons `.active` CSS class for buttons that need to be styled as "pressed"
- update the alternate color schemes `.active` CSS class accordingly
- improves a few icons colors in the alternate color schemes

See #34904.

Built from https://develop.svn.wordpress.org/trunk@46423


git-svn-id: http://core.svn.wordpress.org/trunk@46221 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors/_admin.scss

@@ -28,7 +28,7 @@ a {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-	color: $link-focus;
+	color: currentColor;
 }
 
 
@@ -99,6 +99,19 @@ textarea:focus {
 		box-shadow: 0 0 0 1px $button-color;
 	}
 
+	.button:active {
+		background: darken( $button-color, 5% );
+		border-color: darken( $button-color, 5% );
+	}
+
+	.button.active,
+	.button.active:focus,
+	.button.active:hover {
+		border-color: darken( $button-color, 5% );
+		color: darken( $button-color, 5% );
+		box-shadow: inset 0 2px 5px -3px darken( $button-color, 5% );
+	}
+
 	.button-primary {
 		@include button( $button-color );
 	}

wp-admin/css/colors/_mixins.scss

@@ -20,12 +20,19 @@
 			0 0 0 3px $button-color;
 	}
 
-	&:active,
+	&:active {
+		background: darken( $button-color, 5% );
+		border-color: darken( $button-color, 5% );
+		color: $text-color;
+	}
+
 	&.active,
 	&.active:focus,
 	&.active:hover {
-		background: darken( $button-color, 5% );
+		background: $button-color;
-		border-color: darken( $button-color, 5% );
+		color: $text-color;
+		border-color: darken( $button-color, 15% );
+		box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
 	}
 
 	&[disabled],

wp-admin/css/colors/blue/colors-rtl.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #e1a948;
 }
 
+.wp-core-ui .button:active {
+  background: #dd9f32;
+  border-color: #dd9f32;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #dd9f32;
+  color: #dd9f32;
+  box-shadow: inset 0 2px 5px -3px #dd9f32;
+}
+
 .wp-core-ui .button-primary {
   background: #e1a948;
   border-color: #e1a948;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e1a948;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #dd9f32;
   border-color: #dd9f32;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #e1a948;
+  color: #fff;
+  border-color: #bd831f;
+  box-shadow: inset 0 2px 5px -3px #241906;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/blue/colors.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #e1a948;
 }
 
+.wp-core-ui .button:active {
+  background: #dd9f32;
+  border-color: #dd9f32;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #dd9f32;
+  color: #dd9f32;
+  box-shadow: inset 0 2px 5px -3px #dd9f32;
+}
+
 .wp-core-ui .button-primary {
   background: #e1a948;
   border-color: #e1a948;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e1a948;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #dd9f32;
   border-color: #dd9f32;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #e1a948;
+  color: #fff;
+  border-color: #bd831f;
+  box-shadow: inset 0 2px 5px -3px #241906;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/coffee/colors-rtl.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #c7a589;
 }
 
+.wp-core-ui .button:active {
+  background: #bf9878;
+  border-color: #bf9878;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #bf9878;
+  color: #bf9878;
+  box-shadow: inset 0 2px 5px -3px #bf9878;
+}
+
 .wp-core-ui .button-primary {
   background: #c7a589;
   border-color: #c7a589;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #bf9878;
   border-color: #bf9878;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #c7a589;
+  color: #fff;
+  border-color: #ae7d55;
+  box-shadow: inset 0 2px 5px -3px #37271a;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/coffee/colors.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #c7a589;
 }
 
+.wp-core-ui .button:active {
+  background: #bf9878;
+  border-color: #bf9878;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #bf9878;
+  color: #bf9878;
+  box-shadow: inset 0 2px 5px -3px #bf9878;
+}
+
 .wp-core-ui .button-primary {
   background: #c7a589;
   border-color: #c7a589;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7a589;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #bf9878;
   border-color: #bf9878;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #c7a589;
+  color: #fff;
+  border-color: #ae7d55;
+  box-shadow: inset 0 2px 5px -3px #37271a;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/ectoplasm/colors-rtl.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #a3b745;
 }
 
+.wp-core-ui .button:active {
+  background: #93a43e;
+  border-color: #93a43e;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #93a43e;
+  color: #93a43e;
+  box-shadow: inset 0 2px 5px -3px #93a43e;
+}
+
 .wp-core-ui .button-primary {
   background: #a3b745;
   border-color: #a3b745;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #93a43e;
   border-color: #93a43e;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #a3b745;
+  color: #fff;
+  border-color: #727f30;
+  box-shadow: inset 0 2px 5px -3px black;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/ectoplasm/colors.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #a3b745;
 }
 
+.wp-core-ui .button:active {
+  background: #93a43e;
+  border-color: #93a43e;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #93a43e;
+  color: #93a43e;
+  box-shadow: inset 0 2px 5px -3px #93a43e;
+}
+
 .wp-core-ui .button-primary {
   background: #a3b745;
   border-color: #a3b745;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #a3b745;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #93a43e;
   border-color: #93a43e;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #a3b745;
+  color: #fff;
+  border-color: #727f30;
+  box-shadow: inset 0 2px 5px -3px black;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/light/colors-rtl.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #04a4cc;
 }
 
+.wp-core-ui .button:active {
+  background: #0490b3;
+  border-color: #0490b3;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #0490b3;
+  color: #0490b3;
+  box-shadow: inset 0 2px 5px -3px #0490b3;
+}
+
 .wp-core-ui .button-primary {
   background: #04a4cc;
   border-color: #04a4cc;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #04a4cc;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #0490b3;
   border-color: #0490b3;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #04a4cc;
+  color: #fff;
+  border-color: #036881;
+  box-shadow: inset 0 2px 5px -3px black;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/light/colors.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #04a4cc;
 }
 
+.wp-core-ui .button:active {
+  background: #0490b3;
+  border-color: #0490b3;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #0490b3;
+  color: #0490b3;
+  box-shadow: inset 0 2px 5px -3px #0490b3;
+}
+
 .wp-core-ui .button-primary {
   background: #04a4cc;
   border-color: #04a4cc;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #04a4cc;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #0490b3;
   border-color: #0490b3;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #04a4cc;
+  color: #fff;
+  border-color: #036881;
+  box-shadow: inset 0 2px 5px -3px black;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/midnight/colors-rtl.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #e14d43;
 }
 
+.wp-core-ui .button:active {
+  background: #dd382d;
+  border-color: #dd382d;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #dd382d;
+  color: #dd382d;
+  box-shadow: inset 0 2px 5px -3px #dd382d;
+}
+
 .wp-core-ui .button-primary {
   background: #e14d43;
   border-color: #e14d43;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e14d43;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #dd382d;
   border-color: #dd382d;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #e14d43;
+  color: #fff;
+  border-color: #ba281e;
+  box-shadow: inset 0 2px 5px -3px #200705;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/midnight/colors.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #e14d43;
 }
 
+.wp-core-ui .button:active {
+  background: #dd382d;
+  border-color: #dd382d;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #dd382d;
+  color: #dd382d;
+  box-shadow: inset 0 2px 5px -3px #dd382d;
+}
+
 .wp-core-ui .button-primary {
   background: #e14d43;
   border-color: #e14d43;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #e14d43;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #dd382d;
   border-color: #dd382d;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #e14d43;
+  color: #fff;
+  border-color: #ba281e;
+  box-shadow: inset 0 2px 5px -3px #200705;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/ocean/colors-rtl.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #9ebaa0;
 }
 
+.wp-core-ui .button:active {
+  background: #8faf91;
+  border-color: #8faf91;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #8faf91;
+  color: #8faf91;
+  box-shadow: inset 0 2px 5px -3px #8faf91;
+}
+
 .wp-core-ui .button-primary {
   background: #9ebaa0;
   border-color: #9ebaa0;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #9ebaa0;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #8faf91;
   border-color: #8faf91;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #9ebaa0;
+  color: #fff;
+  border-color: #719a74;
+  box-shadow: inset 0 2px 5px -3px #253426;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/ocean/colors.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #9ebaa0;
 }
 
+.wp-core-ui .button:active {
+  background: #8faf91;
+  border-color: #8faf91;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #8faf91;
+  color: #8faf91;
+  box-shadow: inset 0 2px 5px -3px #8faf91;
+}
+
 .wp-core-ui .button-primary {
   background: #9ebaa0;
   border-color: #9ebaa0;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #9ebaa0;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #8faf91;
   border-color: #8faf91;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #9ebaa0;
+  color: #fff;
+  border-color: #719a74;
+  box-shadow: inset 0 2px 5px -3px #253426;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/sunrise/colors-rtl.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #dd823b;
 }
 
+.wp-core-ui .button:active {
+  background: #d97426;
+  border-color: #d97426;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #d97426;
+  color: #d97426;
+  box-shadow: inset 0 2px 5px -3px #d97426;
+}
+
 .wp-core-ui .button-primary {
   background: #dd823b;
   border-color: #dd823b;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dd823b;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #d97426;
   border-color: #d97426;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #dd823b;
+  color: #fff;
+  border-color: #ad5d1e;
+  box-shadow: inset 0 2px 5px -3px #150b04;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-admin/css/colors/sunrise/colors.css

@@ -21,7 +21,7 @@ a:hover, a:active, a:focus {
 .curtime #timestamp:before,
 #post-body .misc-pub-revisions:before,
 span.wp-media-buttons-icon:before {
-  color: #0096dd;
+  color: currentColor;
 }
 
 /* Forms */
@@ -86,6 +86,19 @@ textarea:focus {
   box-shadow: 0 0 0 1px #dd823b;
 }
 
+.wp-core-ui .button:active {
+  background: #d97426;
+  border-color: #d97426;
+}
+
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:focus,
+.wp-core-ui .button.active:hover {
+  border-color: #d97426;
+  color: #d97426;
+  box-shadow: inset 0 2px 5px -3px #d97426;
+}
+
 .wp-core-ui .button-primary {
   background: #dd823b;
   border-color: #dd823b;
@@ -102,9 +115,17 @@ textarea:focus {
   box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dd823b;
 }
 
-.wp-core-ui .button-primary:active, .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+.wp-core-ui .button-primary:active {
   background: #d97426;
   border-color: #d97426;
+  color: #fff;
+}
+
+.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover {
+  background: #dd823b;
+  color: #fff;
+  border-color: #ad5d1e;
+  box-shadow: inset 0 2px 5px -3px #150b04;
 }
 
 .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled, .wp-core-ui .button-primary.disabled {

wp-includes/css/buttons-rtl.css

@@ -146,8 +146,7 @@ TABLE OF CONTENTS:
 	outline-offset: 0;
 }
 
-.wp-core-ui .button.active,
+/* :active state */
-.wp-core-ui .button.active:hover,
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
 	background: #f3f5f6;
@@ -155,9 +154,20 @@ TABLE OF CONTENTS:
 	box-shadow: none;
 }
 
+/* pressed state e.g. a selected setting */
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:hover {
+	background-color: #e2e4e7;
+	color: #00669b;
+	border-color: #016087;
+	box-shadow: inset 0 2px 5px -3px #016087;
+}
+
 .wp-core-ui .button.active:focus {
-	border-color: #7e8993;
+	border-color: #007cba;
-	box-shadow: 0 0 0 1px #7e8993;
+	box-shadow:
+		inset 0 2px 5px -3px #016087,
+		0 0 0 1px #007cba;
 }
 
 .wp-core-ui .button[disabled],
@@ -258,6 +268,7 @@ TABLE OF CONTENTS:
 	background: #00669b;
 	border-color: #00669b;
 	box-shadow: none;
+	color: #fff;
 }
 
 .wp-core-ui .button-primary[disabled],
@@ -307,10 +318,19 @@ TABLE OF CONTENTS:
 	z-index: 1;
 }
 
+/* pressed state e.g. a selected setting */
 .wp-core-ui .button-group > .button.active {
 	background-color: #e2e4e7;
-	box-shadow: inset 0 1px 0 0 #999;
+	color: #00669b;
 	border-color: #016087;
+	box-shadow: inset 0 2px 5px -3px #016087;
+}
+
+.wp-core-ui .button-group > .button.active:focus {
+	border-color: #007cba;
+	box-shadow:
+		inset 0 2px 5px -3px #016087,
+		0 0 0 1px #007cba;
 }
 
 /* ----------------------------------------------------------------------------

wp-includes/css/buttons.css

@@ -146,8 +146,7 @@ TABLE OF CONTENTS:
 	outline-offset: 0;
 }
 
-.wp-core-ui .button.active,
+/* :active state */
-.wp-core-ui .button.active:hover,
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
 	background: #f3f5f6;
@@ -155,9 +154,20 @@ TABLE OF CONTENTS:
 	box-shadow: none;
 }
 
+/* pressed state e.g. a selected setting */
+.wp-core-ui .button.active,
+.wp-core-ui .button.active:hover {
+	background-color: #e2e4e7;
+	color: #00669b;
+	border-color: #016087;
+	box-shadow: inset 0 2px 5px -3px #016087;
+}
+
 .wp-core-ui .button.active:focus {
-	border-color: #7e8993;
+	border-color: #007cba;
-	box-shadow: 0 0 0 1px #7e8993;
+	box-shadow:
+		inset 0 2px 5px -3px #016087,
+		0 0 0 1px #007cba;
 }
 
 .wp-core-ui .button[disabled],
@@ -258,6 +268,7 @@ TABLE OF CONTENTS:
 	background: #00669b;
 	border-color: #00669b;
 	box-shadow: none;
+	color: #fff;
 }
 
 .wp-core-ui .button-primary[disabled],
@@ -307,10 +318,19 @@ TABLE OF CONTENTS:
 	z-index: 1;
 }
 
+/* pressed state e.g. a selected setting */
 .wp-core-ui .button-group > .button.active {
 	background-color: #e2e4e7;
-	box-shadow: inset 0 1px 0 0 #999;
+	color: #00669b;
 	border-color: #016087;
+	box-shadow: inset 0 2px 5px -3px #016087;
+}
+
+.wp-core-ui .button-group > .button.active:focus {
+	border-color: #007cba;
+	box-shadow:
+		inset 0 2px 5px -3px #016087,
+		0 0 0 1px #007cba;
 }
 
 /* ----------------------------------------------------------------------------

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.3-beta2-46422';
+$wp_version = '5.3-beta2-46423';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.