From a25e5988ddc89c2b2541a6798ede0e6bd355cc9f Mon Sep 17 00:00:00 2001 From: Kelly Choyce-Dwan Date: Tue, 9 Feb 2021 19:45:47 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@50278 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 13 ++++++------- src/wp-admin/css/edit.css | 6 +++--- src/wp-admin/css/forms.css | 16 ++++++++-------- src/wp-admin/css/list-tables.css | 2 +- src/wp-admin/css/site-health.css | 6 +++--- src/wp-includes/css/buttons.css | 10 +++++----- 6 files changed, 26 insertions(+), 27 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a863ff44fc..5175972b5a 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -695,7 +695,7 @@ ul.striped > :nth-child(odd), .highlight { background-color: #f0f6fc; - color: #000; + color: #3c434a; } .wp-ui-primary { @@ -708,10 +708,10 @@ ul.striped > :nth-child(odd), .wp-ui-highlight { color: #fff; - background-color: #4f94d4; + background-color: #2271b1; } .wp-ui-text-highlight { - color: #4f94d4; + color: #2271b1; } .wp-ui-notification { @@ -879,7 +879,7 @@ hr { #media-items a.delete-permanently, #nav-menu-footer .menu-delete, #delete-link a.delete { - color: #d63638; + color: #b32d2e; } abbr.required, @@ -896,7 +896,7 @@ span.required, #media-items a.delete-permanently:hover, #nav-menu-footer .menu-delete:hover, #delete-link a.delete:hover { - color: #d63638; + color: #b32d2e; border: none; } @@ -1728,7 +1728,7 @@ p.auto-update-status { padding: 3px 6px 3px 16px; background: #fff; border-radius: 0 0 4px 4px; - color: #787c82; + color: #646970; line-height: 1.7; box-shadow: 0 0 0 transparent; transition: box-shadow 0.1s linear; @@ -1762,7 +1762,6 @@ p.auto-update-status { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; - color: #787c82; } #screen-meta-links .screen-meta-active:after { diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 1ada54c3d5..59929b5c6e 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -858,7 +858,7 @@ form#tags-filter { } .privacy-settings-accordion-trigger .badge.blue { - border: 1px solid #c5d9ed; + border: 1px solid #72aee6; } .privacy-settings-accordion-trigger .badge.orange { @@ -866,11 +866,11 @@ form#tags-filter { } .privacy-settings-accordion-trigger .badge.red { - border: 1px solid #d63638; + border: 1px solid #e65054; } .privacy-settings-accordion-trigger .badge.green { - border: 1px solid #00a32a; + border: 1px solid #00ba37; } .privacy-settings-accordion-trigger .badge.purple { diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 5fddd22fd1..34e9d9a3c4 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -101,8 +101,8 @@ input[type="checkbox"]:focus, input[type="radio"]:focus, select:focus, textarea:focus { - border-color: #3582c4; - box-shadow: 0 0 0 1px #3582c4; + border-color: #2271b1; + box-shadow: 0 0 0 1px #2271b1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -179,7 +179,7 @@ input[type="radio"]:checked::before { input[type="checkbox"]:checked::before { /* Use the "Yes" SVG Dashicon */ - 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"); + 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"); margin: -0.1875rem 0 0 -0.25rem; height: 1.3125rem; width: 1.3125rem; @@ -191,7 +191,7 @@ input[type="radio"]:checked::before { width: 0.5rem; /* 8px */ height: 0.5rem; /* 8px */ margin: 0.1875rem; /* 3px */ - background-color: #4f94d4; + background-color: #3582c4; /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */ line-height: 1.14285714; } @@ -329,13 +329,13 @@ input[type="radio"].disabled:checked:before { } .wp-core-ui select:hover { - color: #3582c4; + color: #2271b1; } .wp-core-ui select:focus { - border-color: #3582c4; + border-color: #2271b1; color: #0a4b78; - box-shadow: 0 0 0 1px #3582c4; + box-shadow: 0 0 0 1px #2271b1; } .wp-core-ui select:active { @@ -370,7 +370,7 @@ input[type="radio"].disabled:checked:before { } .wp-core-ui select:hover::-ms-value { - color: #3582c4; + color: #2271b1; } .wp-core-ui select:focus::-ms-value { diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 283afbf977..cd0b3fb462 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -235,7 +235,7 @@ } #the-comment-list .unapprove a { - color: #bd8600; + color: #996800; } #the-comment-list th, diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css index 75a55f9bc1..51c6b394b0 100644 --- a/src/wp-admin/css/site-health.css +++ b/src/wp-admin/css/site-health.css @@ -349,7 +349,7 @@ } .health-check-accordion-trigger .badge.blue { - border: 1px solid #c5d9ed; + border: 1px solid #72aee6; } .health-check-accordion-trigger .badge.orange { @@ -357,11 +357,11 @@ } .health-check-accordion-trigger .badge.red { - border: 1px solid #d63638; + border: 1px solid #e65054; } .health-check-accordion-trigger .badge.green { - border: 1px solid #00a32a; + border: 1px solid #00ba37; } .health-check-accordion-trigger .badge.purple { diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index c651cab406..6da6da51e0 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -238,8 +238,8 @@ TABLE OF CONTENTS: ---------------------------------------------------------------------------- */ .wp-core-ui .button-primary { - background: #3582c4; - border-color: #3582c4; + background: #2271b1; + border-color: #2271b1; color: #fff; text-decoration: none; text-shadow: none; @@ -249,8 +249,8 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus { - background: #2271b1; - border-color: #2271b1; + background: #135e96; + border-color: #135e96; color: #fff; } @@ -258,7 +258,7 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary:focus { box-shadow: 0 0 0 1px #fff, - 0 0 0 3px #3582c4; + 0 0 0 3px #2271b1; } .wp-core-ui .button-primary.active,