Administration: Update color contrast on UI elements.

The color palette changes in  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 .


Built from https://develop.svn.wordpress.org/trunk@50278


git-svn-id: http://core.svn.wordpress.org/trunk@49923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryelle 2021-02-09 19:47:03 +00:00
parent ac126c1062
commit 10d1280ff3
25 changed files with 65 additions and 67 deletions

@ -696,7 +696,7 @@ ul.striped > :nth-child(odd),
.highlight {
background-color: #f0f6fc;
color: #000;
color: #3c434a;
}
.wp-ui-primary {
@ -709,10 +709,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 {
@ -880,7 +880,7 @@ hr {
#media-items a.delete-permanently,
#nav-menu-footer .menu-delete,
#delete-link a.delete {
color: #d63638;
color: #b32d2e;
}
abbr.required,
@ -897,7 +897,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;
}
@ -1729,7 +1729,7 @@ p.auto-update-status {
padding: 3px 16px 3px 6px;
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;
@ -1763,7 +1763,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 {

File diff suppressed because one or more lines are too long

@ -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 {

File diff suppressed because one or more lines are too long

@ -859,7 +859,7 @@ form#tags-filter {
}
.privacy-settings-accordion-trigger .badge.blue {
border: 1px solid #c5d9ed;
border: 1px solid #72aee6;
}
.privacy-settings-accordion-trigger .badge.orange {
@ -867,11 +867,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 {

File diff suppressed because one or more lines are too long

@ -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 {

File diff suppressed because one or more lines are too long

@ -102,8 +102,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;
}
@ -180,7 +180,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.25rem 0 0;
height: 1.3125rem;
width: 1.3125rem;
@ -192,7 +192,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;
}
@ -330,13 +330,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 {
@ -371,7 +371,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 {

File diff suppressed because one or more lines are too long

@ -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 {

File diff suppressed because one or more lines are too long

@ -236,7 +236,7 @@
}
#the-comment-list .unapprove a {
color: #bd8600;
color: #996800;
}
#the-comment-list th,

File diff suppressed because one or more lines are too long

@ -235,7 +235,7 @@
}
#the-comment-list .unapprove a {
color: #bd8600;
color: #996800;
}
#the-comment-list th,

File diff suppressed because one or more lines are too long

@ -350,7 +350,7 @@
}
.health-check-accordion-trigger .badge.blue {
border: 1px solid #c5d9ed;
border: 1px solid #72aee6;
}
.health-check-accordion-trigger .badge.orange {
@ -358,11 +358,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 {

File diff suppressed because one or more lines are too long

@ -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 {

File diff suppressed because one or more lines are too long

@ -239,8 +239,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;
@ -250,8 +250,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;
}
@ -259,7 +259,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,

File diff suppressed because one or more lines are too long

@ -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,

File diff suppressed because one or more lines are too long

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.7-beta1-50277';
$wp_version = '5.7-beta1-50278';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.