Changeset 46815

Timestamp:

12/05/2019 09:30:58 PM (4 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.
Fixes #48585.

Location:

trunk/src/wp-admin/css/colors

Files:

• _admin.scss (modified) (2 diffs)
• _mixins.scss (modified) (4 diffs)
• _variables.scss (modified) (1 diff)

trunk/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% );
     }
 

trunk/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% );

trunk/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