WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/23/2019 02:42:36 PM (2 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/colors/_mixins.scss

    r41984 r46241  
    11/*
    2  * Button mixin- creates 3d-ish button effect with correct
     2 * Button mixin- creates a button effect with correct
    33 * highlights/shadows, based on a base color.
    44 */
    55@mixin button( $button-color, $text-color: #fff ) {
    66    background: $button-color;
    7     border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% );
     7    border-color: $button-color;
    88    color: $text-color;
    9     box-shadow: 0 1px 0 darken( $button-color, 15% );
    10     text-shadow: 0 -1px 1px darken( $button-color, 15% ),
    11         1px 0 1px darken( $button-color, 15% ),
    12         0 1px 1px darken( $button-color, 15% ),
    13         -1px 0 1px darken( $button-color, 15% );
    149
    1510    &:hover,
    1611    &:focus {
    1712        background: lighten( $button-color, 3% );
    18         border-color: darken( $button-color, 15% );
     13        border-color: darken( $button-color, 3% );
    1914        color: $text-color;
    20         box-shadow: 0 1px 0 darken( $button-color, 15% );
    2115    }
    2216
    2317    &:focus {
    24         box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
    25                     0 0 2px 1px #33b3db;
     18        box-shadow:
     19            0 0 0 1px #fff,
     20            0 0 0 3px $button-color;
    2621    }
    2722
     
    3025    &.active:focus,
    3126    &.active:hover {
    32         background: darken( $button-color, 10% );
    33         border-color: darken( $button-color, 15% );
    34         box-shadow: inset 0 2px 0 darken( $button-color, 15% );
     27        background: darken( $button-color, 5% );
     28        border-color: darken( $button-color, 5% );
    3529    }
    3630
     
    4034    &.disabled {
    4135        color: hsl( hue( $button-color ), 10%, 80% ) !important;
    42         background: darken( $button-color, 8% ) !important;
    43         border-color: darken( $button-color, 15% ) !important;
     36        background: lighten( $button-color, 15% ) !important;
     37        border-color: lighten( $button-color, 15% ) !important;
    4438        text-shadow: none !important;
    4539    }
    46 
    47     &.button-hero {
    48         box-shadow: 0 2px 0 darken( $button-color, 15% ) !important;
    49         &:active {
    50             box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important;
    51         }
    52     }
    53 
    5440}
Note: See TracChangeset for help on using the changeset viewer.