WordPress.org

Make WordPress Core

Changeset 50278


Ignore:
Timestamp:
02/09/2021 07:45:47 PM (9 months ago)
Author:
ryelle
Message:

Administration: Update color contrast on UI elements.

The color palette changes in #49999 introduced some contrast issues on buttons, input elements, and links. This change ensures that all interactive elements have an appropriate contrast ratio.

Follow-up to [50025].
Props audrasjb, joedolson.
Fixes #52402.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r50162 r50278  
    696696.highlight {
    697697    background-color: #f0f6fc;
    698     color: #000;
     698    color: #3c434a;
    699699}
    700700
     
    709709.wp-ui-highlight {
    710710    color: #fff;
    711     background-color: #4f94d4;
     711    background-color: #2271b1;
    712712}
    713713.wp-ui-text-highlight {
    714     color: #4f94d4;
     714    color: #2271b1;
    715715}
    716716
     
    880880#nav-menu-footer .menu-delete,
    881881#delete-link a.delete {
    882     color: #d63638;
     882    color: #b32d2e;
    883883}
    884884
     
    897897#nav-menu-footer .menu-delete:hover,
    898898#delete-link a.delete:hover {
    899     color: #d63638;
     899    color: #b32d2e;
    900900    border: none;
    901901}
     
    17291729    background: #fff;
    17301730    border-radius: 0 0 4px 4px;
    1731     color: #787c82;
     1731    color: #646970;
    17321732    line-height: 1.7;
    17331733    box-shadow: 0 0 0 transparent;
     
    17631763    -moz-osx-font-smoothing: grayscale;
    17641764    text-decoration: none;
    1765     color: #787c82;
    17661765}
    17671766
  • trunk/src/wp-admin/css/edit.css

    r50238 r50278  
    859859
    860860.privacy-settings-accordion-trigger .badge.blue {
    861     border: 1px solid #c5d9ed;
     861    border: 1px solid #72aee6;
    862862}
    863863
     
    867867
    868868.privacy-settings-accordion-trigger .badge.red {
    869     border: 1px solid #d63638;
     869    border: 1px solid #e65054;
    870870}
    871871
    872872.privacy-settings-accordion-trigger .badge.green {
    873     border: 1px solid #00a32a;
     873    border: 1px solid #00ba37;
    874874}
    875875
  • trunk/src/wp-admin/css/forms.css

    r50159 r50278  
    102102select:focus,
    103103textarea:focus {
    104     border-color: #3582c4;
    105     box-shadow: 0 0 0 1px #3582c4;
     104    border-color: #2271b1;
     105    box-shadow: 0 0 0 1px #2271b1;
    106106    /* Only visible in Windows High Contrast mode */
    107107    outline: 2px solid transparent;
     
    180180input[type="checkbox"]:checked::before {
    181181    /* Use the "Yes" SVG Dashicon */
    182     content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E");
     182    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E");
    183183    margin: -0.1875rem 0 0 -0.25rem;
    184184    height: 1.3125rem;
     
    192192    height: 0.5rem; /* 8px */
    193193    margin: 0.1875rem; /* 3px */
    194     background-color: #4f94d4;
     194    background-color: #3582c4;
    195195    /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */
    196196    line-height: 1.14285714;
     
    330330
    331331.wp-core-ui select:hover {
    332     color: #3582c4;
     332    color: #2271b1;
    333333}
    334334
    335335.wp-core-ui select:focus {
    336     border-color: #3582c4;
     336    border-color: #2271b1;
    337337    color: #0a4b78;
    338     box-shadow: 0 0 0 1px #3582c4;
     338    box-shadow: 0 0 0 1px #2271b1;
    339339}
    340340
     
    371371
    372372.wp-core-ui select:hover::-ms-value {
    373     color: #3582c4;
     373    color: #2271b1;
    374374}
    375375
  • trunk/src/wp-admin/css/list-tables.css

    r50237 r50278  
    236236
    237237#the-comment-list .unapprove a {
    238     color: #bd8600;
     238    color: #996800;
    239239}
    240240
  • trunk/src/wp-admin/css/site-health.css

    r50025 r50278  
    350350
    351351.health-check-accordion-trigger .badge.blue {
    352     border: 1px solid #c5d9ed;
     352    border: 1px solid #72aee6;
    353353}
    354354
     
    358358
    359359.health-check-accordion-trigger .badge.red {
    360     border: 1px solid #d63638;
     360    border: 1px solid #e65054;
    361361}
    362362
    363363.health-check-accordion-trigger .badge.green {
    364     border: 1px solid #00a32a;
     364    border: 1px solid #00ba37;
    365365}
    366366
  • trunk/src/wp-includes/css/buttons.css

    r50025 r50278  
    239239
    240240.wp-core-ui .button-primary {
    241     background: #3582c4;
    242     border-color: #3582c4;
     241    background: #2271b1;
     242    border-color: #2271b1;
    243243    color: #fff;
    244244    text-decoration: none;
     
    250250.wp-core-ui .button-primary.focus,
    251251.wp-core-ui .button-primary:focus {
    252     background: #2271b1;
    253     border-color: #2271b1;
     252    background: #135e96;
     253    border-color: #135e96;
    254254    color: #fff;
    255255}
     
    259259    box-shadow:
    260260        0 0 0 1px #fff,
    261         0 0 0 3px #3582c4;
     261        0 0 0 3px #2271b1;
    262262}
    263263
Note: See TracChangeset for help on using the changeset viewer.