Skip to content

Commit a25e598

Browse files
ryelleryelle
committed
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
1 parent c35f0ed commit a25e598

6 files changed

Lines changed: 26 additions & 27 deletions

File tree

‎src/wp-admin/css/common.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -695,7 +695,7 @@ ul.striped > :nth-child(odd),
695695

696696
.highlight {
697697
background-color: #f0f6fc;
698-
color: #000;
698+
color: #3c434a;
699699
}
700700

701701
.wp-ui-primary {
@@ -708,10 +708,10 @@ ul.striped > :nth-child(odd),
708708

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

717717
.wp-ui-notification {
@@ -879,7 +879,7 @@ hr {
879879
#media-items a.delete-permanently,
880880
#nav-menu-footer .menu-delete,
881881
#delete-link a.delete {
882-
color: #d63638;
882+
color: #b32d2e;
883883
}
884884

885885
abbr.required,
@@ -896,7 +896,7 @@ span.required,
896896
#media-items a.delete-permanently:hover,
897897
#nav-menu-footer .menu-delete:hover,
898898
#delete-link a.delete:hover {
899-
color: #d63638;
899+
color: #b32d2e;
900900
border: none;
901901
}
902902

@@ -1728,7 +1728,7 @@ p.auto-update-status {
17281728
padding: 3px 6px 3px 16px;
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;
17341734
transition: box-shadow 0.1s linear;
@@ -1762,7 +1762,6 @@ p.auto-update-status {
17621762
-webkit-font-smoothing: antialiased;
17631763
-moz-osx-font-smoothing: grayscale;
17641764
text-decoration: none;
1765-
color: #787c82;
17661765
}
17671766

17681767
#screen-meta-links .screen-meta-active:after {

‎src/wp-admin/css/edit.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -858,19 +858,19 @@ form#tags-filter {
858858
}
859859

860860
.privacy-settings-accordion-trigger .badge.blue {
861-
border: 1px solid #c5d9ed;
861+
border: 1px solid #72aee6;
862862
}
863863

864864
.privacy-settings-accordion-trigger .badge.orange {
865865
border: 1px solid #dba617;
866866
}
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

876876
.privacy-settings-accordion-trigger .badge.purple {

‎src/wp-admin/css/forms.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@ input[type="checkbox"]:focus,
101101
input[type="radio"]:focus,
102102
select:focus,
103103
textarea: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;
108108
}
@@ -179,7 +179,7 @@ input[type="radio"]:checked::before {
179179

180180
input[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;
185185
width: 1.3125rem;
@@ -191,7 +191,7 @@ input[type="radio"]:checked::before {
191191
width: 0.5rem; /* 8px */
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;
197197
}
@@ -329,13 +329,13 @@ input[type="radio"].disabled:checked:before {
329329
}
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

341341
.wp-core-ui select:active {
@@ -370,7 +370,7 @@ input[type="radio"].disabled:checked:before {
370370
}
371371

372372
.wp-core-ui select:hover::-ms-value {
373-
color: #3582c4;
373+
color: #2271b1;
374374
}
375375

376376
.wp-core-ui select:focus::-ms-value {

‎src/wp-admin/css/list-tables.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@
235235
}
236236

237237
#the-comment-list .unapprove a {
238-
color: #bd8600;
238+
color: #996800;
239239
}
240240

241241
#the-comment-list th,

‎src/wp-admin/css/site-health.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -349,19 +349,19 @@
349349
}
350350

351351
.health-check-accordion-trigger .badge.blue {
352-
border: 1px solid #c5d9ed;
352+
border: 1px solid #72aee6;
353353
}
354354

355355
.health-check-accordion-trigger .badge.orange {
356356
border: 1px solid #dba617;
357357
}
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

367367
.health-check-accordion-trigger .badge.purple {

‎src/wp-includes/css/buttons.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -238,8 +238,8 @@ TABLE OF CONTENTS:
238238
---------------------------------------------------------------------------- */
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;
245245
text-shadow: none;
@@ -249,16 +249,16 @@ TABLE OF CONTENTS:
249249
.wp-core-ui .button-primary:hover,
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
}
256256

257257
.wp-core-ui .button-primary.focus,
258258
.wp-core-ui .button-primary:focus {
259259
box-shadow:
260260
0 0 0 1px #fff,
261-
0 0 0 3px #3582c4;
261+
0 0 0 3px #2271b1;
262262
}
263263

264264
.wp-core-ui .button-primary.active,

0 commit comments

Comments
 (0)