WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/26/2021 06:53:55 PM (3 years ago)
Author:
ryelle
Message:

Administration: Standardize colors used in CSS to a single palette.

This is part of a larger project in cleaning up core's admin CSS. This collapses all colors used in the CSS to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white. The colors are perceptually uniform from light to dark, half of each range has a 4.5 or higher contrast against white, the other half has a 4.5 or higher contrast against black.

Standardizing on this set of colors will help contributors make consistent, accessible design decisions. The full color palette can be seen here: ​https://codepen.io/ryelle/full/WNGVEjw

Props notlaura, danfarrow, kburgoine, drw158, audrasjb, Joen, hedgefield, ibdz, melchoyce.
See #49999.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/dashboard.css

    r49325 r50025  
    5656
    5757#dashboard-widgets .postbox-container .empty-container {
    58     outline: 3px dashed #b4b9be;
     58    outline: 3px dashed #c3c4c7;
    5959    height: 250px;
    6060}
    … …  
    6262/* Only highlight drop zones when dragging and only in the 2 columns layout. */
    6363.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
    64     outline: 3px dashed #606a73;
     64    outline: 3px dashed #646970;
    6565    /* Prevent margin on the child from collapsing with margin on the parent. */
    6666    display: flow-root;
    … …  
    7777    padding: 0 2em;
    7878    text-align: center;
    79     color: #606a73;
     79    color: #646970;
    8080    font-size: 16px;
    8181    line-height: 1.5;
    … …  
    117117    margin: 16px 0;
    118118    padding: 23px 10px 0;
    119     border: 1px solid #ccd0d4;
     119    border: 1px solid #c3c4c7;
    120120    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    121121    background: #fff;
    … …  
    141141
    142142.welcome-panel p {
    143     color: #72777c;
     143    color: #787c82;
    144144}
    145145
    … …  
    204204.welcome-panel-column p {
    205205    margin-top: 7px;
    206     color: #444;
     206    color: #3c434a;
    207207}
    208208
    … …  
    231231#dashboard_right_now li span:before,
    232232#dashboard_right_now .search-engines-info:before {
    233     color: #606a73;
     233    color: #646970;
    234234    font: normal 20px/1 dashicons;
    235235    speak: never;
    … …  
    377377
    378378.community-events li.event-none {
    379     border-left: 4px solid #00a0d2;
     379    border-left: 4px solid #72aee6;
    380380}
    381381
    … …  
    415415
    416416.community-events ul {
    417     background-color: #fafafa;
     417    background-color: #f6f7f7;
    418418    padding-left: 0;
    419419    padding-right: 0;
    … …  
    424424    margin: 0;
    425425    padding: 8px 12px;
    426     color: #32373c;
     426    color: #2c3338;
    427427}
    428428.community-events li:first-child {
    429     border-top: 1px solid #eee;
     429    border-top: 1px solid #f0f0f1;
    430430}
    431431
    432432.community-events li ~ li {
    433     border-top: 1px solid #eee;
     433    border-top: 1px solid #f0f0f1;
    434434}
    435435
    436436.community-events .activity-block.last {
    437     border-bottom: 1px solid #eee;
     437    border-bottom: 1px solid #f0f0f1;
    438438    padding-top: 0;
    439439    margin-top: -1px;
    … …  
    452452
    453453.event-icon:before {
    454     color: #606a73;
     454    color: #646970;
    455455    font-size: 18px;
    456456}
    … …  
    476476    margin-bottom: 0;
    477477    padding: 12px;
    478     border-top: 1px solid #eee;
    479     color: #ddd;
     478    border-top: 1px solid #f0f0f1;
     479    color: #dcdcde;
    480480}
    481481
    … …  
    513513
    514514.rssSummary {
    515     color: #72777c;
     515    color: #787c82;
    516516    margin-top: 4px;
    517517}
    … …  
    533533#dashboard_primary .rss-widget span,
    534534#dashboard_primary .rss-widget span.rss-date {
    535     color: #72777c;
     535    color: #787c82;
    536536}
    537537
    … …  
    597597
    598598#dashboard_right_now .sub {
    599     color: #555d66;
    600     background: #f5f5f5;
    601     border-top: 1px solid #eee;
     599    color: #50575e;
     600    background: #f6f7f7;
     601    border-top: 1px solid #f0f0f1;
    602602    padding: 10px 12px 6px 12px;
    603603}
    604604
    605605#dashboard_right_now .sub h3 {
    606     color: #555;
     606    color: #50575e;
    607607}
    608608
    … …  
    613613#dashboard_right_now .warning a:before,
    614614#dashboard_right_now .warning span:before {
    615     color: #d54e21;
     615    color: #d63638;
    616616}
    617617
    … …  
    625625#dashboard_quick_press div.updated {
    626626    margin-bottom: 10px;
    627     border: 1px solid #eee;
     627    border: 1px solid #f0f0f1;
    628628    border-width: 1px 1px 1px 0;
    629629}
    … …  
    670670
    671671.js #dashboard_quick_press .drafts {
    672     border-top: 1px solid #eee;
     672    border-top: 1px solid #f0f0f1;
    673673}
    674674
    … …  
    694694}
    695695#dashboard_quick_press .drafts li time {
    696     color: #72777c;
     696    color: #787c82;
    697697}
    698698
    … …  
    720720    font-size: 14px;
    721721    font-weight: 400;
    722     color: #23282d;
     722    color: #1d2327;
    723723}
    724724
    … …  
    757757
    758758#dashboard_activity .no-activity p {
    759     color: #72777c;
     759    color: #787c82;
    760760    font-size: 16px;
    761761}
    … …  
    763763#dashboard_activity .subsubsub {
    764764    float: none;
    765     border-top: 1px solid #eee;
     765    border-top: 1px solid #f0f0f1;
    766766    margin: 0 -12px;
    767767    padding: 8px 12px 4px;
    … …  
    770770#dashboard_activity .subsubsub a .count,
    771771#dashboard_activity .subsubsub a.current .count {
    772     color: #72777c; /* white background on the dashboard but #f1f1f1 on list tables */
     772    color: #787c82; /* white background on the dashboard but #f1f1f1 on list tables */
    773773}
    774774
    … …  
    789789    margin-right: 5px;
    790790    min-width: 150px;
    791     color: #72777c;
     791    color: #787c82;
    792792}
    793793
    794794.activity-block {
    795     border-bottom: 1px solid #eee;
     795    border-bottom: 1px solid #f0f0f1;
    796796    margin: 0 -12px;
    797797    padding: 8px 12px 4px;
    … …  
    803803
    804804.activity-block .subsubsub li {
    805     color: #ddd;
     805    color: #dcdcde;
    806806}
    807807
    … …  
    817817
    818818#activity-widget #the-comment-list .comment-item {
    819     background: #fafafa;
     819    background: #f6f7f7;
    820820    padding: 12px;
    821821    position: relative;
    … …  
    840840
    841841#activity-widget #the-comment-list .comment-item:first-child {
    842     border-top: 1px solid #eeeeee;
     842    border-top: 1px solid #f0f0f1;
    843843}
    844844
    845845#activity-widget #the-comment-list .unapproved {
    846     background-color: #fef7f1;
     846    background-color: #fcf9e8;
    847847}
    848848
    … …  
    854854    top: 0;
    855855    bottom: 0;
    856     background: #d54e21;
     856    background: #d63638;
    857857    width: 4px;
    858858}
    … …  
    956956    line-height: 1.5;
    957957    margin: 0;
    958     color: #666;
     958    color: #646970;
    959959}
    960960
    … …  
    996996
    997997.rss-widget span.rss-date {
    998     color: #72777c;
     998    color: #787c82;
    999999    font-size: 13px;
    10001000    margin-left: 3px;
    … …  
    10351035
    10361036#dashboard_browser_nag.postbox.browser-insecure {
    1037     background-color: #ac1b1b;
    1038     border-color: #ac1b1b;
     1037    background-color: #b32d2e;
     1038    border-color: #b32d2e;
    10391039}
    10401040
    10411041#dashboard_browser_nag.postbox {
    1042     background-color: #e29808;
     1042    background-color: #dba617;
    10431043    background-image: none;
    1044     border-color: #edc048;
     1044    border-color: #f0c33c;
    10451045    color: #fff;
    10461046    box-shadow: none;
    … …  
    10481048
    10491049#dashboard_browser_nag.postbox.browser-insecure h2 {
    1050     border-bottom-color: #cd5a5a;
     1050    border-bottom-color: #e65054;
    10511051    color: #fff;
    10521052}
    10531053
    10541054#dashboard_browser_nag.postbox h2 {
    1055     border-bottom-color: #f6e2ac;
     1055    border-bottom-color: #f5e6ab;
    10561056    background: transparent none;
    10571057    color: #fff;
    … …  
    10821082/* PHP Nag */
    10831083#dashboard_php_nag .dashicons-warning {
    1084     color: #ffb900;
     1084    color: #dba617;
    10851085    padding-right: 6px;
    10861086}
    10871087
    10881088#dashboard_php_nag.php-insecure .dashicons-warning {
    1089     color: #df3232;
     1089    color: #d63638;
    10901090}
    10911091
Note: See TracChangeset for help on using the changeset viewer.