Changeset 46816

Timestamp:

12/05/2019 09:32:26 PM (7 years ago)

Author:

SergeyBiryukov

Message:

Accessibility: Administration: Apply a unified design to all secondary buttons across all color schemes.

This ensures that secondary buttons have an appropriate color contrast in the alternative color schemes.

Props melchoyce, ryelle, audrasjb, ate-up-with-motor, afercia, sabernhardt.
Merges [46815] to the 5.3 branch.
Fixes #48585.

Location:

branches/5.3

Files:

• . (modified) (1 prop)
• src/wp-admin/css/colors/_admin.scss (modified) (2 diffs)
• src/wp-admin/css/colors/_mixins.scss (modified) (4 diffs)
• src/wp-admin/css/colors/_variables.scss (modified) (1 diff)

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

@@ -76 +76 @@
 .wp-core-ui {
 
-        .button,
-        .button-secondary {
-                color: $button-color;
-                border-color: $button-color;
+        .button {
+                border-color: #7e8993;
+                color: #32373c;
         }
 
         .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 {
+                border-color: darken( #7e8993, 5% );
+                color: darken( #32373c, 5% );
         }
 
         .button.focus,
-        .button:focus,
-        .button-secondary:focus {
-                border-color: $button-color;
-                color: darken( $button-color, 5% );
-                box-shadow: 0 0 0 1px $button-color;
+        .button:focus {
+                border-color: $highlight-color;
+                box-shadow: 0 0 0 1px $highlight-color;
         }
 
         .button:active {
-                background: darken( $button-color, 5% );
-                border-color: darken( $button-color, 5% );
+                border-color: #7e8993;
+                color: darken( #32373c, 5% );
+                box-shadow: none;
         }
 
@@ -109 +105 @@
         .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% );
+                color: darken( $button-text-color, 5% );
         }
 

branches/5.3/src/wp-admin/css/colors/_mixins.scss

@@ -6 +6 @@
         background: $button-color;
         border-color: $button-color;
-        color: $text-color;
+        color: $button-text-color;
 
         &:hover,
@@ -12 +12 @@
                 background: lighten( $button-color, 3% );
                 border-color: darken( $button-color, 3% );
-                color: $text-color;
+                color: $button-text-color;
         }
 
@@ -24 +24 @@
                 background: darken( $button-color, 5% );
                 border-color: darken( $button-color, 5% );
-                color: $text-color;
+                color: $button-text-color;
         }
 
@@ -31 +31 @@
         &.active:hover {
                 background: $button-color;
-                color: $text-color;
+                color: $button-text-color;
                 border-color: darken( $button-color, 15% );
                 box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );

branches/5.3/src/wp-admin/css/colors/_variables.scss

@@ -19 +19 @@
 
 $button-color: $highlight-color !default;
-$form-checked: $highlight-color !default;
+$button-text-color: $text-color !default;
 
+$form-checked: #7e8993 !default;
 
 // admin menu & admin-bar