WordPress.org
Get WordPress

Make WordPress Core

Ticket #48585: secondary-colors.diff

File secondary-colors.diff, 3.0 KB (added by melchoyce, 5 years ago)

Assigns a fixed design to all secondary buttons across all color schemes. Co-written with @ryelle.

  • src/wp-admin/css/colors/_admin.scss

     
    7575
    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
    107103        .button.active,
    … …  
    108104        .button.active:focus,
    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
    115110        .button-primary {

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

     
    55@mixin button( $button-color, $text-color: #fff ) {
    66        background: $button-color;
    77        border-color: $button-color;
    8         color: $text-color;
     8        color: $button-text-color;
    99
    1010        &:hover,
    1111        &:focus {
    1212                background: lighten( $button-color, 3% );
    1313                border-color: darken( $button-color, 3% );
    14                 color: $text-color;
     14                color: $button-text-color;
    1515        }
    1616
    1717        &:focus {
    … …  
    2323        &:active {
    2424                background: darken( $button-color, 5% );
    2525                border-color: darken( $button-color, 5% );
    26                 color: $text-color;
     26                color: $button-text-color;
    2727        }
    2828
    2929        &.active,
    … …  
    3030        &.active:focus,
    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% );
    3636        }

  • src/wp-admin/css/colors/_variables.scss

     
    1818$link-focus: lighten( $link, 10% ) !default;
    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
    2526