Changeset 50278

Timestamp:

02/09/2021 07:45:47 PM (6 years 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:

• wp-admin/css/common.css (modified) (6 diffs)
• wp-admin/css/edit.css (modified) (2 diffs)
• wp-admin/css/forms.css (modified) (5 diffs)
• wp-admin/css/list-tables.css (modified) (1 diff)
• wp-admin/css/site-health.css (modified) (2 diffs)
• wp-includes/css/buttons.css (modified) (3 diffs)

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

@@ -696 +696 @@
 .highlight {
         background-color: #f0f6fc;
-        color: #000;
+        color: #3c434a;
 }
 
@@ -709 +709 @@
 .wp-ui-highlight {
         color: #fff;
-        background-color: #4f94d4;
+        background-color: #2271b1;
 }
 .wp-ui-text-highlight {
-        color: #4f94d4;
+        color: #2271b1;
 }
 
@@ -880 +880 @@
 #nav-menu-footer .menu-delete,
 #delete-link a.delete {
-        color: #d63638;
+        color: #b32d2e;
 }
 
@@ -897 +897 @@
 #nav-menu-footer .menu-delete:hover,
 #delete-link a.delete:hover {
-        color: #d63638;
+        color: #b32d2e;
         border: none;
 }
@@ -1729 +1729 @@
         background: #fff;
         border-radius: 0 0 4px 4px;
-        color: #787c82;
+        color: #646970;
         line-height: 1.7;
         box-shadow: 0 0 0 transparent;
@@ -1763 +1763 @@
         -moz-osx-font-smoothing: grayscale;
         text-decoration: none;
-        color: #787c82;
 }
 

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

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

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

@@ -102 +102 @@
 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 +180 @@
 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;
@@ -192 +192 @@
         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 +330 @@
 
 .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;
 }
 
@@ -371 +371 @@
 
 .wp-core-ui select:hover::-ms-value {
-        color: #3582c4;
+        color: #2271b1;
 }
 

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

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

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

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

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

@@ -239 +239 @@
 
 .wp-core-ui .button-primary {
-        background: #3582c4;
-        border-color: #3582c4;
+        background: #2271b1;
+        border-color: #2271b1;
         color: #fff;
         text-decoration: none;
@@ -250 +250 @@
 .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 +259 @@
         box-shadow:
                 0 0 0 1px #fff,
-                0 0 0 3px #3582c4;
+                0 0 0 3px #2271b1;
 }