Make WordPress Core

Changeset 46815


Ignore:
Timestamp:
12/05/2019 09:30:58 PM (5 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:
3 edited

Legend:

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

    r46423 r46815  
    7676.wp-core-ui {
    7777
    78     .button,
    79     .button-secondary {
    80         color: $button-color;
    81         border-color: $button-color;
     78    .button {
     79        border-color: #7e8993;
     80        color: #32373c;
    8281    }
    8382
    8483    .button.hover,
    8584    .button:hover,
    86     .button-secondary:hover,
    8785    .button.focus,
    88     .button:focus,
    89     .button-secondary:focus {
    90         border-color: darken( $button-color, 5% );
    91         color: darken( $button-color, 5% );
     86    .button:focus {
     87        border-color: darken( #7e8993, 5% );
     88        color: darken( #32373c, 5% );
    9289    }
    9390
    9491    .button.focus,
    95     .button:focus,
    96     .button-secondary:focus {
    97         border-color: $button-color;
    98         color: darken( $button-color, 5% );
    99         box-shadow: 0 0 0 1px $button-color;
     92    .button:focus {
     93        border-color: $highlight-color;
     94        box-shadow: 0 0 0 1px $highlight-color;
    10095    }
    10196
    10297    .button:active {
    103         background: darken( $button-color, 5% );
    104         border-color: darken( $button-color, 5% );
     98        border-color: #7e8993;
     99        color: darken( #32373c, 5% );
     100        box-shadow: none;
    105101    }
    106102
     
    109105    .button.active:hover {
    110106        border-color: darken( $button-color, 5% );
    111         color: darken( $button-color, 5% );
    112         box-shadow: inset 0 2px 5px -3px darken( $button-color, 5% );
     107        color: darken( $button-text-color, 5% );
    113108    }
    114109
  • trunk/src/wp-admin/css/colors/_mixins.scss

    r46575 r46815  
    66    background: $button-color;
    77    border-color: $button-color;
    8     color: $text-color;
     8    color: $button-text-color;
    99
    1010    &:hover,
     
    1212        background: lighten( $button-color, 3% );
    1313        border-color: darken( $button-color, 3% );
    14         color: $text-color;
     14        color: $button-text-color;
    1515    }
    1616
     
    2424        background: darken( $button-color, 5% );
    2525        border-color: darken( $button-color, 5% );
    26         color: $text-color;
     26        color: $button-text-color;
    2727    }
    2828
     
    3131    &.active:hover {
    3232        background: $button-color;
    33         color: $text-color;
     33        color: $button-text-color;
    3434        border-color: darken( $button-color, 15% );
    3535        box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
  • trunk/src/wp-admin/css/colors/_variables.scss

    r45117 r46815  
    1919
    2020$button-color: $highlight-color !default;
    21 $form-checked: $highlight-color !default;
     21$button-text-color: $text-color !default;
    2222
     23$form-checked: #7e8993 !default;
    2324
    2425// admin menu & admin-bar
Note: See TracChangeset for help on using the changeset viewer.