Changeset 46241 for trunk/src/wp-admin/css/colors/_mixins.scss

Timestamp:

09/23/2019 02:42:36 PM (6 years ago)

Author:

afercia

Message:

Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.

• Introduces new styles for the buttons, with better contrast for borders and better focus style.
• Introduces a new focus style for links.
• The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).

Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.

File:

• trunk/src/wp-admin/css/colors/_mixins.scss (modified) (3 diffs)

trunk/src/wp-admin/css/colors/_mixins.scss

@@ -1 +1 @@
 /*
- * Button mixin- creates 3d-ish button effect with correct
+ * Button mixin- creates a button effect with correct
  * highlights/shadows, based on a base color.
  */
 @mixin button( $button-color, $text-color: #fff ) {
     background: $button-color;
-    border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% );
+    border-color: $button-color;
     color: $text-color;
-    box-shadow: 0 1px 0 darken( $button-color, 15% );
-    text-shadow: 0 -1px 1px darken( $button-color, 15% ),
-        1px 0 1px darken( $button-color, 15% ),
-        0 1px 1px darken( $button-color, 15% ),
-        -1px 0 1px darken( $button-color, 15% );
 
     &:hover,
     &:focus {
         background: lighten( $button-color, 3% );
-        border-color: darken( $button-color, 15% );
+        border-color: darken( $button-color, 3% );
         color: $text-color;
-        box-shadow: 0 1px 0 darken( $button-color, 15% );
     }
 
     &:focus {
-        box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
-                    0 0 2px 1px #33b3db;
+        box-shadow:
+            0 0 0 1px #fff,
+            0 0 0 3px $button-color;
     }
 
@@ -30 +25 @@
     &.active:focus,
     &.active:hover {
-        background: darken( $button-color, 10% );
-        border-color: darken( $button-color, 15% );
-        box-shadow: inset 0 2px 0 darken( $button-color, 15% );
+        background: darken( $button-color, 5% );
+        border-color: darken( $button-color, 5% );
     }
 
@@ -40 +34 @@
     &.disabled {
         color: hsl( hue( $button-color ), 10%, 80% ) !important;
-        background: darken( $button-color, 8% ) !important;
-        border-color: darken( $button-color, 15% ) !important;
+        background: lighten( $button-color, 15% ) !important;
+        border-color: lighten( $button-color, 15% ) !important;
         text-shadow: none !important;
     }
-
-    &.button-hero {
-        box-shadow: 0 2px 0 darken( $button-color, 15% ) !important;
-        &:active {
-            box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important;
-        }
-    }
-
 }