diff --git a/src/wp-admin/admin-header.php b/src/wp-admin/admin-header.php
index 2f7ae3b8c5009..636b4020d62ec 100644
--- a/src/wp-admin/admin-header.php
+++ b/src/wp-admin/admin-header.php
@@ -74,6 +74,7 @@
<?php echo esc_html( $admin_title ); ?>
a:focus,
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
- color: #72aee6;
+ color: var(--wp-admin--admin-menu--link--color--hover);
}
#adminmenu a:hover,
@@ -213,8 +212,8 @@
word-wrap: break-word;
padding: 7px 0 8px;
z-index: 9999;
- background-color: #2c3338;
- box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+ background-color: var(--wp-admin--admin-menu--submenu--background);
+ box-shadow: 0 3px 5px var(--wp-admin--admin-menu--submenu--box-shadow);
}
.js #adminmenu .sub-open,
@@ -244,7 +243,7 @@
}
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
- box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 3px 5px var(--wp-admin--admin-menu--submenu--box-shadow);
}
/* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */
@@ -252,8 +251,8 @@
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
position: relative;
- background-color: #1d2327;
- color: #72aee6;
+ background-color: var(--wp-admin--admin-menu--link--background--hover);
+ color: var(--wp-admin--admin-menu--link--color--hover);
}
.folded #adminmenu li.menu-top:hover,
@@ -267,8 +266,8 @@
#adminmenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow div {
- background: #2271b1;
- color: #fff;
+ background: var(--wp-admin--admin-menu--link--background--current);
+ color: var(--wp-admin--admin-menu--link--color--current);
}
.folded #adminmenu .wp-submenu.sub-open,
@@ -301,7 +300,7 @@
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:hover,
#adminmenu .wp-submenu li.current a:focus {
- color: #fff;
+ color: var(--wp-admin--admin-menu--link--color--current);
}
#adminmenu .wp-not-current-submenu li > a,
@@ -374,15 +373,13 @@
}
div.wp-menu-image:before {
- color: #a7aaad;
- color: rgba(240, 246, 252, 0.6);
+ color: var(--wp-admin--admin-menu--icon--color);
padding: 7px 0;
transition: all .1s ease-in-out;
}
#adminmenu div.wp-menu-image:before {
- color: #a7aaad;
- color: rgba(240, 246, 252, 0.6);
+ color: var(--wp-admin--admin-menu--icon--color);
}
#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
@@ -392,13 +389,13 @@ div.wp-menu-image:before {
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
- color: #fff;
+ color: var(--wp-admin--admin-menu--icon--color--current);
}
#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before {
- color: #72aee6;
+ color: var(--wp-admin--admin-menu--icon--color--highlight);
}
.folded #adminmenu div.wp-menu-image {
@@ -436,7 +433,7 @@ ul#adminmenu > li.current > a.current:after {
width: 0;
position: absolute;
pointer-events: none;
- border-right-color: #f0f0f1;
+ border-right-color: var(--wp-admin--page--background);
top: 50%;
margin-top: -8px;
}
@@ -475,7 +472,7 @@ ul#adminmenu > li.current > a.current:after {
#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
- border-right-color: #2c3338;
+ border-right-color: var(--wp-admin--admin-menu--submenu--background);
}
#adminmenu li.menu-top:hover .wp-menu-image img,
@@ -498,7 +495,7 @@ ul#adminmenu > li.current > a.current:after {
}
#adminmenu .wp-submenu .wp-submenu-head {
- color: #fff;
+ color: var(--wp-admin--admin-menu--submenu-header--color);
font-weight: 400;
font-size: 14px;
padding: 5px 4px 5px 11px;
@@ -524,8 +521,8 @@ ul#adminmenu > li.current > a.current:after {
min-width: 18px;
height: 18px;
border-radius: 9px;
- background-color: #d63638;
- color: #fff;
+ background-color: var(--wp-admin--admin-menu--notification--background);
+ color: var(--wp-admin--admin-menu--notification--color);
font-size: 11px;
line-height: 1.6;
text-align: center;
@@ -533,9 +530,11 @@ ul#adminmenu > li.current > a.current:after {
}
#adminmenu li.current a .awaiting-mod,
-#adminmenu li a.wp-has-current-submenu .update-plugins {
- background-color: #d63638;
- color: #fff;
+#adminmenu li a.wp-has-current-submenu .update-plugins,
+#adminmenu li:hover a .awaiting-mod,
+#adminmenu li.menu-top:hover > a .update-plugins {
+ background-color: var(--wp-admin--admin-menu--notification--background--current);
+ color: var(--wp-admin--admin-menu--notification--color--current);
}
#adminmenu li span.count-0 {
@@ -552,16 +551,16 @@ ul#adminmenu > li.current > a.current:after {
position: relative;
overflow: visible;
background: none;
- color: #a7aaad;
+ color: var(--wp-admin--admin-menu--icon--color);
cursor: pointer;
}
#collapse-button:hover {
- color: #72aee6;
+ color: var(--wp-admin--admin-menu--icon--color--hover);
}
#collapse-button:focus {
- color: #72aee6;
+ color: var(--wp-admin--admin-menu--icon--color--hover);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
outline-offset: -1px;
@@ -890,7 +889,7 @@ li#wp-admin-bar-menu-toggle {
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
- background: #2c3338;
+ background: var(--wp-admin--admin-menu--submenu--background);
}
li#wp-admin-bar-menu-toggle {
@@ -921,7 +920,7 @@ li#wp-admin-bar-menu-toggle {
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
- color: #72aee6;
+ color: var(--wp-admin--admin-menu--icon--color--hover);
}
}
diff --git a/src/wp-admin/css/code-editor.css b/src/wp-admin/css/code-editor.css
index 92c39405ba147..a7aeb37206708 100644
--- a/src/wp-admin/css/code-editor.css
+++ b/src/wp-admin/css/code-editor.css
@@ -34,25 +34,25 @@
}
.wp-core-ui .CodeMirror-lint-message-warning {
- background-color: #fcf9e8;
- border-left: 4px solid #dba617;
+ background-color: var(--wp-admin--notice-warning--background);
+ border-left: var(--wp-admin--notice-warning--border);
}
.wrap .CodeMirror-lint-marker-warning:before,
.wp-core-ui .CodeMirror-lint-message-warning:before {
content: "\f534";
- color: #dba617;
+ color: var(--wp-admin--notice-warning--border);
}
.wp-core-ui .CodeMirror-lint-message-error {
- background-color: #fcf0f1;
- border-left: 4px solid #d63638;
+ background-color: var(--wp-admin--notice-error--background);
+ border-left: 4px solid var(--wp-admin--notice-error--border);
}
.wrap .CodeMirror-lint-marker-error:before,
.wp-core-ui .CodeMirror-lint-message-error:before {
content: "\f153";
- color: #d63638;
+ color: var(--wp-admin--notice-error--color);
}
.wp-core-ui .CodeMirror-lint-tooltip {
@@ -63,7 +63,7 @@
}
.wrap .CodeMirror .CodeMirror-matchingbracket {
- background: rgba(219, 166, 23, 0.3);
+ background: var(--wp-admin--code-highlight--background);
color: inherit;
}
@@ -72,5 +72,5 @@
}
.wrap .CodeMirror .CodeMirror-linenumber {
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css
index 89513949579b6..6417ab7c046a4 100644
--- a/src/wp-admin/css/color-picker.css
+++ b/src/wp-admin/css/color-picker.css
@@ -17,39 +17,20 @@
}
.wp-color-result-text {
- background: #f6f7f7;
+ background: var(--wp-admin--button);
border-radius: 0 2px 2px 0;
- border-left: 1px solid #c3c4c7;
- color: #50575e;
+ border-left: 1px solid var(--wp-admin--surface--border);
+ color: var(--wp-admin--heading-secondary--color);
display: block;
line-height: 2.54545455; /* 28px */
padding: 0 6px;
text-align: center;
}
-.wp-color-result:hover,
-.wp-color-result:focus {
- background: #f6f7f7;
- border-color: #8c8f94;
- color: #1d2327;
-}
-
-.wp-color-result:hover:after,
-.wp-color-result:focus:after {
- color: #1d2327;
- border-color: #a7aaad;
- border-left: 1px solid #8c8f94;
-}
-
.wp-picker-container {
display: inline-block;
}
-.wp-color-result:focus {
- border-color: #4f94d4;
- box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
-}
-
.wp-color-result:active {
/* See Trac ticket #39662 */
transform: none !important;
@@ -81,12 +62,12 @@
}
.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
- background-color: #50575e
+ background-color: var(--wp-admin--slider-handle--color);
}
.wp-picker-container .iris-picker {
border-radius: 0;
- border-color: #dcdcde;
+ border-color: var(--wp-admin--surface--border);
margin-top: 6px;
}
@@ -102,34 +83,33 @@
}
.wp-color-picker::-webkit-input-placeholder {
- color: #646970;
+ color: var(--wp-admin--input--color--placeholder);
}
.wp-color-picker::-moz-placeholder {
- color: #646970;
+ color: var(--wp-admin--input--color--placeholder);
opacity: 1;
}
.wp-color-picker:-ms-input-placeholder {
- color: #646970;
+ color: var(--wp-admin--input--color--placeholder);
}
.wp-picker-container input[type="text"].iris-error {
- background-color: #fcf0f1;
- border-color: #d63638;
- color: #000;
+ background-color: var(--wp-admin--notice-error--background);
+ border-color: var(--wp-admin--notice-error--border);
}
.iris-picker .ui-square-handle:focus,
.iris-picker .iris-strip .ui-slider-handle:focus {
- border-color: #3582c4;
+ border-color: var(--wp-admin--button--focus);
border-style: solid;
- box-shadow: 0 0 0 1px #3582c4;
+ box-shadow: 0 0 0 1px var(--wp-admin--button--focus);
outline: 2px solid transparent;
}
.iris-picker .iris-palette:focus {
- box-shadow: 0 0 0 2px #3582c4;
+ box-shadow: 0 0 0 2px var(--wp-admin--button--focus);
}
@media screen and (max-width: 782px) {
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index f75d9b55e1ef6..c5e66a3809343 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -152,11 +152,11 @@
font-size: 14px;
font-weight: 600;
padding: 15px 23px 14px;
- background: #f0f0f1;
- color: #2271b1;
+ background: var(--wp-admin--screen-reader-text--background);
+ color: var(--wp-admin--screen-reader-text--color);
z-index: 100000;
line-height: normal;
- box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+ box-shadow: 0 0 2px 2px rgb(var(--wp-admin--shadow) / 0.6);
text-decoration: none;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
@@ -190,8 +190,8 @@ p.popular-tags,
.feature-filter,
.imgedit-group,
.comment-ays {
- border: 1px solid #c3c4c7;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+ border: 1px solid var(--wp-admin--surface--border-step-1);
+ box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04);
}
table.widefat,
@@ -203,7 +203,7 @@ p.popular-tags,
.feature-filter,
.imgedit-group,
.comment-ays {
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
/* general */
@@ -215,8 +215,8 @@ body {
}
body {
- background: #f0f0f1;
- color: #3c434a;
+ background: var(--wp-admin--page--background);
+ color: var(--wp-admin--text--color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
line-height: 1.4em;
@@ -252,7 +252,7 @@ td {
/* Any change to the default link style must be applied to button-link too. */
a {
- color: #2271b1;
+ color: var(--wp-admin--link--color);
transition-property: border, background, color;
transition-duration: .05s;
transition-timing-function: ease-in-out;
@@ -265,18 +265,18 @@ div {
a:hover,
a:active {
- color: #135e96;
+ color: var(--wp-admin--link--color--hover);
}
a:focus,
a:focus .media-icon img,
.wp-person a:focus .gravatar {
- color: #043959;
+ color: var(--wp-admin--link--color--hover);
box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
- /* Only visible in Windows High Contrast mode */
- outline: 1px solid transparent;
+ 0 0 0 1px var(--wp-admin--button-primary--hover),
+ 0 0 2px 1px var(--wp-admin--button-primary);
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
}
#adminmenu a:focus {
@@ -331,14 +331,14 @@ h6 {
}
h1 {
- color: #1d2327;
+ color: var(--wp-admin--heading--color);
font-size: 2em;
margin: .67em 0;
}
h2,
h3 {
- color: #1d2327;
+ color: var(--wp-admin--heading--color);
font-size: 1.3em;
margin: 1em 0;
}
@@ -419,8 +419,7 @@ kbd,
code {
padding: 3px 5px 2px;
margin: 0 1px;
- background: #f0f0f1;
- background: rgba(0, 0, 0, 0.07);
+ background: var(--wp-admin--code--background);
font-size: 13px;
}
@@ -430,7 +429,7 @@ code {
padding: 0;
font-size: 13px;
float: left;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
.subsubsub a {
@@ -441,7 +440,7 @@ code {
.subsubsub a .count,
.subsubsub a.current .count {
- color: #50575e; /* #f1f1f1 background */
+ color: var(--wp-admin--heading-secondary--color);
font-weight: 400;
}
@@ -481,12 +480,12 @@ code {
.widefat thead th,
.widefat thead td {
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-1);
}
.widefat tfoot th,
.widefat tfoot td {
- border-top: 1px solid #c3c4c7;
+ border-top: 1px solid var(--wp-admin--surface--border-step-1);
border-bottom: none;
}
@@ -599,7 +598,7 @@ code {
.subtitle {
margin: 0;
padding-left: 25px;
- color: #50575e;
+ color: var(--wp-admin--heading-secondary--color);
font-size: 14px;
font-weight: 400;
line-height: 1;
@@ -618,14 +617,14 @@ code {
position: relative;
top: -3px;
text-decoration: none;
- border: 1px solid #2271b1;
+ border: 1px solid var(--wp-admin--button-primary);
border-radius: 2px;
text-shadow: none;
font-weight: 600;
font-size: 13px;
line-height: normal; /* IE8-IE11 need this for buttons */
- color: #2271b1; /* use the standard color used for buttons */
- background: #f6f7f7;
+ color: var(--wp-admin--button--text);
+ background: var(--wp-admin--button);
cursor: pointer;
}
@@ -635,14 +634,14 @@ code {
.wrap .add-new-h2:hover, /* deprecated */
.wrap .page-title-action:hover {
- background: #f0f0f1;
- border-color: #0a4b78;
- color: #0a4b78;
+ background: var(--wp-admin--button--hover);
+ border-color: var(--wp-admin--button-primary--hover);
+ color: var(--wp-admin--button--text);
}
/* lower specificity: color needs to be overridden by :hover and :active */
.page-title-action:focus {
- color: #0a4b78;
+ color: var(--wp-admin--button--text);
}
/* Dashicon for language options on General Settings and Profile screens */
@@ -652,8 +651,8 @@ code {
}
.wrap .page-title-action:focus {
- border-color: #3582c4;
- box-shadow: 0 0 0 1px #3582c4;
+ border-color: var(--wp-admin--button-primary--hover);
+ box-shadow: 0 0 0 1px var(--wp-admin--button-primary);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@@ -663,71 +662,65 @@ code {
}
.wp-dialog {
- background-color: #fff;
-}
-
-.widgets-chooser ul,
-#widgets-left .widget-in-question .widget-top,
-#available-widgets .widget-top:hover,
-div#widgets-right .widget-top:hover,
-#widgets-left .widget-top:hover {
- border-color: #8c8f94;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ background-color: var(--wp-admin--surface--background);
}
+/* @todo Move to `deprecated-media.css` */
.sorthelper {
- background-color: #c5d9ed;
+ background-color: transparent;
}
.ac_match,
.subsubsub a.current {
- color: #000;
+ color: var(--wp-admin--text--color);
}
.striped > tbody > :nth-child(odd),
ul.striped > :nth-child(odd),
.alternate {
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
.bar {
- background-color: #f0f0f1;
- border-right-color: #4f94d4;
+ background-color: var(--wp-admin--page--background);
+ border-right-color: var(--wp-admin--theme--primary);
}
/* Helper classes for plugins to leverage the active WordPress color scheme */
.highlight {
- background-color: #f0f6fc;
- color: #3c434a;
+ background-color: var(--wp-admin--surface--background-alternate);
+ color: var(--wp-admin--text--color);
}
+/* "Primary" uses the menu background variable for backwards compatibility. */
.wp-ui-primary {
- color: #fff;
- background-color: #2c3338;
+ color: var(--wp-admin--admin-menu--link--color);
+ background-color: var(--wp-admin--admin-menu--background);
}
.wp-ui-text-primary {
- color: #2c3338;
+ color: var(--wp-admin--admin-menu--background);
}
+/* "Highlight" uses the primary variable for backwards compatibility. */
.wp-ui-highlight {
- color: #fff;
- background-color: #2271b1;
+ color: var(--wp-admin--theme--primary--contrast);
+ background-color: var(--wp-admin--theme--primary);
}
.wp-ui-text-highlight {
- color: #2271b1;
+ color: var(--wp-admin--theme--primary);
}
.wp-ui-notification {
- color: #fff;
- background-color: #d63638;
+ color: var(--wp-admin--theme--notification--contrast);
+ background-color: var(--wp-admin--theme--notification);
}
.wp-ui-text-notification {
- color: #d63638;
+ color: var(--wp-admin--theme--notification);
}
.wp-ui-text-icon {
- color: #8c8f94; /* same as new icons */
+ color: var(--wp-admin--admin-menu--icon--color);
}
/* For emoji replacement images */
@@ -767,19 +760,20 @@ img.emoji {
.widget .widget-top,
.menu-item-handle {
- background: #f6f7f7;
- color: #1d2327;
+ background: var(--wp-admin--surface--background-alternate);
+ color: var(--wp-admin--heading--color);
}
.stuffbox .hndle {
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-1);
}
-.quicktags {
+/* @deprecated I think this class was never used (it should be an ID). */
+/* .quicktags {
background-color: #c3c4c7;
color: #000;
font-size: 12px;
-}
+} */
.icon32 {
display: none;
@@ -791,7 +785,7 @@ img.emoji {
#bulk-titles div a:before,
.notice-dismiss:before {
background: none;
- color: #787c82;
+ color: var(--wp-admin--icon--fill);
content: "\f153";
display: block;
font: normal 16px/20px dashicons;
@@ -814,7 +808,7 @@ img.emoji {
.tagchecklist .ntdelbutton .remove-tag-icon:before {
margin-left: 2px;
border-radius: 50%;
- color: #2271b1;
+ color: var(--wp-admin--button-primary);
/* vertically center the icon cross browsers */
line-height: 1.28;
}
@@ -829,13 +823,13 @@ img.emoji {
.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
#bulk-titles div a:hover:before,
#bulk-titles div a:focus:before {
- color: #d63638;
+ color: var(--wp-admin--icon-destructive--fill);
}
.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ 0 0 0 1px var(--wp-admin--button-primary--hover),
+ 0 0 2px 1px var(--wp-admin--button-primary);
}
.key-labels label {
@@ -853,7 +847,7 @@ strong, b {
}
.howto {
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
display: block;
}
@@ -868,8 +862,8 @@ p.install-help {
hr {
border: 0;
- border-top: 1px solid #dcdcde;
- border-bottom: 1px solid #f6f7f7;
+ border-top: 1px solid var(--wp-admin--surface--border-step-1);
+ border-bottom: 1px solid var(--wp-admin--surface--background-alternate);
}
.row-actions span.delete a,
@@ -885,7 +879,7 @@ hr {
#delete-link a.delete,
a#remove-post-thumbnail,
.privacy_requests .remove-personal-data .remove-personal-data-handle {
- color: #b32d2e;
+ color: var(--wp-admin--link-delete--color);
}
abbr.required,
@@ -904,7 +898,7 @@ span.required,
#delete-link a.delete:hover,
a#remove-post-thumbnail:hover,
.privacy_requests .remove-personal-data .remove-personal-data-handle:hover {
- color: #b32d2e;
+ color: var(--wp-admin--link-delete--color--hover);
border: none;
}
@@ -915,8 +909,8 @@ a#remove-post-thumbnail:hover,
#major-publishing-actions {
padding: 10px;
clear: both;
- border-top: 1px solid #dcdcde;
- background: #f6f7f7;
+ border-top: 1px solid var(--wp-admin--surface--border-step-2);
+ background: var(--wp-admin--surface--background-alternate);
}
#delete-action {
@@ -1004,10 +998,10 @@ th.action-links {
margin: 12px 0 25px;
padding: 0 10px;
width: 100%;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
- border: 1px solid #c3c4c7;
- background: #fff;
- color: #50575e;
+ box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04);
+ border: 1px solid var(--wp-admin--surface--border-step-1);
+ background: var(--wp-admin--surface--background);
+ color: ;
font-size: 13px;
}
@@ -1028,8 +1022,8 @@ th.action-links {
top: -1px;
padding: 4px 10px;
border-radius: 30px;
- background: #646970;
- color: #fff;
+ background: var(--wp-admin--bubble--background);
+ color: var(--wp-admin--bubble--color);
font-size: 14px;
font-weight: 600;
}
@@ -1060,22 +1054,22 @@ th.action-links {
display: inline-block;
margin: 0 10px;
padding: 15px 0;
- border-bottom: 4px solid #fff;
- color: #646970;
+ border-bottom: 4px solid var(--wp-admin--surface--background);
+ color: var(--wp-admin--text-secondary--color);
cursor: pointer;
}
.filter-links .current {
box-shadow: none;
- border-bottom: 4px solid #646970;
- color: #1d2327;
+ border-bottom: 4px solid var(--wp-admin--text-secondary--color);
+ color: var(--wp-admin--text--color);
}
.filter-links li > a:hover,
.filter-links li > a:focus,
.show-filters .filter-links a.current:hover,
.show-filters .filter-links a.current:focus {
- color: #135e96;
+ color: var(--wp-admin--link--color--hover);
}
.wp-filter .search-form {
@@ -1118,7 +1112,7 @@ th.action-links {
padding: 0 10px 0 6px;
border-color: transparent;
background-color: transparent;
- color: #646970;
+ color: var(--wp-admin--filter-button--color);
vertical-align: baseline;
box-shadow: none;
}
@@ -1126,7 +1120,7 @@ th.action-links {
.wp-filter .drawer-toggle:before {
content: "\f111";
margin: 0 5px 0 0;
- color: #646970;
+ color: var(--wp-admin--filter-button--color);
font: normal 16px/1 dashicons;
vertical-align: text-bottom;
-webkit-font-smoothing: antialiased;
@@ -1138,7 +1132,7 @@ th.action-links {
.wp-filter .button.drawer-toggle:focus,
.wp-filter .drawer-toggle:focus:before {
background-color: transparent;
- color: #135e96;
+ color: var(--wp-admin--filter-button--color--hover);
}
.wp-filter .button.drawer-toggle:hover,
@@ -1147,7 +1141,7 @@ th.action-links {
}
.wp-filter .button.drawer-toggle:focus {
- border-color: #4f94d4;
+ border-color: var(--wp-admin--button-primary);
}
.wp-filter .button.drawer-toggle:active {
@@ -1156,17 +1150,13 @@ th.action-links {
transform: none;
}
-.wp-filter .drawer-toggle.current:before {
- color: #fff;
-}
-
.filter-drawer,
.wp-filter .favorites-form {
display: none;
margin: 0 -10px 0 -20px;
padding: 20px;
- border-top: 1px solid #f0f0f1;
- background: #f6f7f7;
+ border-top: 1px solid var(--wp-admin--surface--border-step-3);
+ background: var(--wp-admin--surface--background-alternate);
overflow: hidden;
}
@@ -1181,17 +1171,17 @@ th.action-links {
.show-filters .wp-filter .button.drawer-toggle {
border-radius: 2px;
- background: #646970;
- color: #fff;
+ background: var(--wp-admin--filter-button--background--active);
+ color: var(--wp-admin--filter-button--color--active);
}
.show-filters .wp-filter .drawer-toggle:hover,
.show-filters .wp-filter .drawer-toggle:focus {
- background: #2271b1;
+ background: var(--wp-admin--filter-button--background--active-hover);
}
.show-filters .wp-filter .drawer-toggle:before {
- color: #fff;
+ color: var(--wp-admin--filter-button--color--active);
}
.filter-group {
@@ -1201,9 +1191,9 @@ th.action-links {
margin: 0 1% 0 0;
padding: 20px 10px 10px;
width: 24%;
- background: #fff;
- border: 1px solid #dcdcde;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+ background: var(--wp-admin--surface--background);
+ border: 1px solid var(--wp-admin--surface--border-step-2);
+ box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04);
}
.filter-group legend {
@@ -1284,9 +1274,9 @@ th.action-links {
.filtered-by .tag {
margin: 0 5px;
padding: 4px 8px;
- border: 1px solid #dcdcde;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
- background: #fff;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
+ box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04);
+ background: var(--wp-admin--surface--background);
font-size: 11px;
}
@@ -1323,10 +1313,6 @@ th.action-links {
}
@media only screen and (max-width: 1120px) {
- .filter-drawer {
- border-bottom: 1px solid #f0f0f1;
- }
-
.filter-group {
margin-bottom: 0;
margin-top: 5px;
@@ -1381,10 +1367,10 @@ th.action-links {
.notice,
div.updated,
div.error {
- background: #fff;
- border: 1px solid #c3c4c7;
+ background: var(--wp-admin--surface--background);
+ border: 1px solid var(--wp-admin--surface--border-step-1);
border-left-width: 4px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+ box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04);
margin: 5px 15px 2px;
padding: 1px 12px;
}
@@ -1420,7 +1406,7 @@ div.error p,
.notice-title {
display: inline-block;
- color: #1d2327;
+ color: var(--wp-admin--heading--color);
font-size: 18px;
}
@@ -1437,55 +1423,55 @@ div.error p,
margin: 0;
padding: 9px;
background: none;
- color: #787c82;
+ color: var(--wp-admin--icon--fill);
cursor: pointer;
}
.notice-dismiss:hover:before,
.notice-dismiss:active:before,
.notice-dismiss:focus:before {
- color: #d63638;
+ color: var(--wp-admin--icon-destructive--fill);
}
.notice-dismiss:focus {
outline: none;
box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ 0 0 0 1px var(--wp-admin--button-primary--hover),
+ 0 0 2px 1px var(--wp-admin--button-primary);
}
.notice-success,
div.updated {
- border-left-color: #00a32a;
+ border-left-color: var(--wp-admin--notice-success--border);
}
.notice-success.notice-alt {
- background-color: #edfaef;
+ background-color: var(--wp-admin--notice-success--background);
}
.notice-warning {
- border-left-color: #dba617;
+ border-left-color: var(--wp-admin--notice-warning--border);
}
.notice-warning.notice-alt {
- background-color: #fcf9e8;
+ background-color: var(--wp-admin--notice-warning--background);
}
.notice-error,
div.error {
- border-left-color: #d63638;
+ border-left-color: var(--wp-admin--notice-error--border);
}
.notice-error.notice-alt {
- background-color: #fcf0f1;
+ background-color: var(--wp-admin--notice-error--background);
}
.notice-info {
- border-left-color: #72aee6;
+ border-left-color: var(--wp-admin--notice-info--border);
}
.notice-info.notice-alt {
- background-color: #f0f6fc;
+ background-color: var(--wp-admin--notice-info--background);
}
.update-message p:before,
@@ -1533,7 +1519,7 @@ div.error {
.import-php .updating-message:before,
.button.updating-message:before,
.button.installing:before {
- color: #d63638;
+ color: var(--wp-admin--icon-destructive--fill);
content: "\f463";
}
@@ -1566,13 +1552,13 @@ div.error {
.updated-message p:before,
.installed p:before,
.button.updated-message:before {
- color: #68de7c;
+ color: var(--wp-admin--icon-success--fill);
content: "\f147";
}
/* Error icon. */
.update-message.notice-error p:before {
- color: #d63638;
+ color: var(--wp-admin--icon-error--fill);
content: "\f534";
}
@@ -1652,11 +1638,11 @@ p.auto-update-status {
}
.button-primary.updating-message:before {
- color: #fff;
+ color: var(--wp-admin--button-primary--text);
}
.button-primary.updated-message:before {
- color: #9ec2e6;
+ color: var(--wp-admin--button-primary--text);
}
.button.updated-message {
@@ -1711,8 +1697,8 @@ p.auto-update-status {
display: none;
margin: 0 20px -1px 0;
position: relative;
- background-color: #fff;
- border: 1px solid #c3c4c7;
+ background-color: var(--wp-admin--surface--background);
+ border: 1px solid var(--wp-admin--surface--border-step-1);
border-top: none;
box-shadow: 0 0 0 transparent;
}
@@ -1729,14 +1715,14 @@ p.auto-update-status {
}
#screen-meta-links .show-settings {
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--surface--border-step-1);
border-top: none;
height: auto;
margin-bottom: 0;
padding: 3px 6px 3px 16px;
- background: #fff;
+ background: var(--wp-admin--surface--background);
border-radius: 0 0 4px 4px;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
line-height: 1.7;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
@@ -1745,12 +1731,12 @@ p.auto-update-status {
#screen-meta-links .show-settings:hover,
#screen-meta-links .show-settings:active,
#screen-meta-links .show-settings:focus {
- color: #2c3338;
+ color: var(--wp-admin--text--color);
}
#screen-meta-links .show-settings:focus {
- border-color: #4f94d4;
- box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+ border-color: var(--wp-admin--button-primary--hover);
+ box-shadow: 0 0 2px 1px var(--wp-admin--button-primary);
}
#screen-meta-links .show-settings:active {
@@ -1873,10 +1859,10 @@ p.auto-update-status {
bottom: 0;
left: 150px;
right: 170px;
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--surface--border-step-1);
border-top: none;
border-bottom: none;
- background: #f0f6fc;
+ background: var(--wp-admin--help-tab--background);
}
#contextual-help-wrap.no-sidebar #contextual-help-back {
@@ -1914,20 +1900,22 @@ p.auto-update-status {
}
.contextual-help-tabs a:hover {
- color: #2c3338;
+ color: var(--wp-admin--text--color);
}
.contextual-help-tabs .active {
padding: 0;
margin: 0 -1px 0 0;
- border-left: 2px solid #72aee6;
- background: #f0f6fc;
- box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02);
+ border-left: 2px solid var(--wp-admin--help-tab--border--active);
+ background: var(--wp-admin--help-tab--background);
+ box-shadow:
+ 0 2px 0 rgb(var(--wp-admin--shadow) / 0.02),
+ 0 1px 0 rgb(var(--wp-admin--shadow) / 0.02);
}
.contextual-help-tabs .active a {
- border-color: #c3c4c7;
- color: #2c3338;
+ border-color: var(--wp-admin--surface--border-step-1);
+ color: var(--wp-admin--text--color);
}
.contextual-help-tabs-wrap {
@@ -1969,7 +1957,7 @@ html.wp-toolbar {
.widefat th,
.widefat td {
- color: #50575e;
+ color: var(--wp-admin--text--color);
}
.widefat th,
@@ -1982,7 +1970,7 @@ html.wp-toolbar {
.widefat thead tr td,
.widefat tfoot tr th,
.widefat tfoot tr td {
- color: #2c3338;
+ color: var(--wp-admin--heading--color);
}
.widefat td p {
@@ -1992,7 +1980,7 @@ html.wp-toolbar {
.widefat p,
.widefat ol,
.widefat ul {
- color: #2c3338;
+ color: var(--wp-admin--text--color);
}
.widefat .column-comment p {
@@ -2068,7 +2056,7 @@ html.wp-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-1);
}
.postbox-header .hndle {
@@ -2098,7 +2086,7 @@ html.wp-toolbar {
.postbox .handle-order-higher,
.postbox .handle-order-lower {
- color: #787c82;
+ color: var(--wp-admin--icon--fill);
width: 1.62rem;
}
@@ -2107,17 +2095,17 @@ html.wp-toolbar {
.edit-post-meta-boxes-area .postbox .handle-order-lower {
width: 44px;
height: 44px;
- color: #1d2327
+ color: var(--wp-admin--editor--color);
}
.postbox .handle-order-higher[aria-disabled="true"],
.postbox .handle-order-lower[aria-disabled="true"] {
cursor: default;
- color: #a7aaad;
+ color: var(--wp-admin--icon--fill--disabled);
}
.sortable-placeholder {
- border: 1px dashed #c3c4c7;
+ border: 1px dashed var(--wp-admin--surface--border-step-1);
margin-bottom: 20px;
}
@@ -2176,7 +2164,7 @@ html.wp-toolbar {
}
.temp-border {
- border: 1px dotted #c3c4c7;
+ border: 1px dotted var(--wp-admin--surface--border-step-1);
}
.columns-prefs label {
@@ -2211,7 +2199,7 @@ html.wp-toolbar {
left: 0;
right: 0;
padding: 10px 20px;
- color: #50575e;
+ color: var(--wp-admin--text-secondary--color);
}
#wpfooter p {
@@ -2230,15 +2218,15 @@ html.wp-toolbar {
.nav-tab {
float: left;
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--nav-tab--border);
border-bottom: none;
margin-left: 0.5em; /* half the font size so set the font size properly */
padding: 5px 10px;
font-size: 14px;
line-height: 1.71428571;
font-weight: 600;
- background: #dcdcde;
- color: #50575e;
+ background: var(--wp-admin--nav-tab--background);
+ color: var(--wp-admin--nav-tab--color);
text-decoration: none;
white-space: nowrap;
}
@@ -2252,8 +2240,8 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */
.nav-tab:hover,
.nav-tab:focus {
- background-color: #fff;
- color: #3c434a;
+ background-color: var(--wp-admin--nav-tab--background--hover);
+ color: var(--wp-admin--nav-tab--color--hover);
}
.nav-tab-active,
@@ -2263,22 +2251,21 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */
.nav-tab-active {
margin-bottom: -1px;
- color: #3c434a;
}
.nav-tab-active,
.nav-tab-active:hover,
.nav-tab-active:focus,
.nav-tab-active:focus:active {
- border-bottom: 1px solid #f0f0f1;
- background: #f0f0f1;
- color: #000;
+ border-bottom: 1px solid var(--wp-admin--nav-tab--background--active);
+ background: var(--wp-admin--nav-tab--background--active);
+ color: var(--wp-admin--nav-tab--color--active);
}
h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
.wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
.nav-tab-wrapper {
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-1);
margin: 0;
padding-top: 9px;
padding-bottom: 0;
@@ -2362,7 +2349,7 @@ table .column-rating {
.attention,
.error-message {
- color: #d63638;
+ color: var(--wp-admin--notice-error--color);
font-weight: 600;
}
@@ -2388,8 +2375,7 @@ body.iframe {
}
.media-icon img {
- border: 1px solid #dcdcde;
- border: 1px solid rgba(0, 0, 0, 0.07);
+ border: 1px solid var(--wp-admin--surface--border-step-2);
}
#howto {
@@ -2423,7 +2409,7 @@ body.iframe {
}
.importer-title {
- color: #000;
+ color: var(--wp-admin--heading--color);
font-size: 14px;
font-weight: 400;
margin-bottom: .2em;
@@ -2431,7 +2417,7 @@ body.iframe {
.importer-action {
line-height: 1.55; /* Same as with .updating-message */
- color: #50575e;
+ color: ;
margin-bottom: 1em;
}
@@ -2441,8 +2427,8 @@ body.iframe {
}
.edit-comment-author {
- color: #1d2327;
- border-bottom: 1px solid #f0f0f1;
+ color: var(--wp-admin--heading--color);
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-3);
}
#namediv h3 label, /* Back-compat for pre-4.4 */
@@ -2538,7 +2524,7 @@ div.star-holder .star-rating {
vertical-align: top;
transition: color .1s ease-in;
text-align: center;
- color: #dba617;
+ color: var(--wp-admin--rating--fill);
}
.star-rating .star-full:before {
@@ -2564,7 +2550,7 @@ div.action-links {
/* Plugin install thickbox */
#plugin-information {
- background: #fff;
+ background: var(--wp-admin--surface--background);
position: fixed;
top: 0;
right: 0;
@@ -2582,7 +2568,7 @@ div.action-links {
#plugin-information-title {
padding: 0 26px;
- background: #f6f7f7;
+ background: var(--wp-admin--page--background);
font-size: 22px;
font-weight: 600;
line-height: 2.4;
@@ -2616,10 +2602,9 @@ div.action-links {
max-width: 100%;
padding: 0 15px;
margin-top: 174px;
- color: #fff;
- background: rgba(29, 35, 39, 0.9);
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
- box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
+ color: var(--wp-admin--plugin-modal-banner-title--color);
+ background: var(--wp-admin--plugin-modal-banner-title--background);
+ box-shadow: 0 0 30px rgb(var(--wp-admin--highlight) / 0.1);
border-radius: 8px;
}
@@ -2635,7 +2620,9 @@ div.action-links {
height: 250px;
width: 100%;
background: transparent;
- box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow:
+ inset 0 0 50px 4px rgb(var(--wp-admin--shadow) / 0.2),
+ inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1);
}
#plugin-information-tabs {
@@ -2646,8 +2633,8 @@ div.action-links {
min-height: 36px;
font-size: 0;
z-index: 1;
- border-bottom: 1px solid #dcdcde;
- background: #f6f7f7;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
+ background: var(--wp-admin--page--background);
}
#plugin-information-tabs a {
@@ -2664,11 +2651,11 @@ div.action-links {
#plugin-information-tabs a.current {
margin: 0 -1px -1px;
- background: #fff;
- border: 1px solid #dcdcde;
- border-bottom-color: #fff;
+ background: var(--wp-admin--surface--background);
+ border: 1px solid var(--wp-admin--surface--border-step-2);
+ border-bottom-color: var(--wp-admin--surface--background);
padding-top: 8px;
- color: #2c3338;
+ color: var(--wp-admin--text--color);
}
#plugin-information-tabs.with-banner a.current {
@@ -2683,7 +2670,7 @@ div.action-links {
#plugin-information-content {
overflow: hidden; /* equal height column trick */
- background: #fff;
+ background: var(--wp-admin--surface--background);
position: relative;
top: 0;
right: 0;
@@ -2726,20 +2713,20 @@ div.action-links {
padding: 16px 16px 99999px; /* equal height column trick */
margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
width: 217px;
- border-left: 1px solid #dcdcde;
- background: #f6f7f7;
- color: #646970;
+ border-left: 1px solid var(--wp-admin--surface--border-step-2);
+ background: var(--wp-admin--page--background);
+ color: var(--wp-admin--text-secondary--color);
}
#plugin-information .fyi strong {
- color: #3c434a;
+ color: var(--wp-admin--text--color);
}
#plugin-information .fyi h3 {
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
margin: 24px 0 8px;
}
@@ -2776,13 +2763,13 @@ div.action-links {
#plugin-information .counter-back {
height: 17px;
width: 92px;
- background-color: #dcdcde;
+ background-color: var(--wp-admin--rating--base);
float: left;
}
#plugin-information .counter-bar {
height: 17px;
- background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */
+ background-color: var(--wp-admin--rating--fill);
float: left;
}
@@ -2818,8 +2805,8 @@ div.action-links {
bottom: 0;
left: 0;
height: 40px; /* actual height: 40+13+13+1=67 */
- border-top: 1px solid #dcdcde;
- background: #f6f7f7;
+ border-top: 1px solid var(--wp-admin--surface--border-step-2);
+ background: var(--wp-admin--page--background);
}
/* rtl:ignore */
@@ -2851,7 +2838,7 @@ div.action-links {
max-width: 100%;
width: auto;
height: auto;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 2px rgb(var(--wp-admin--shadow) / 0.3);
}
/* rtl:ignore */
@@ -2863,12 +2850,12 @@ div.action-links {
#plugin-information pre {
padding: 7px;
overflow: auto;
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--surface--border-step-1);
}
#plugin-information blockquote {
- border-left: 2px solid #dcdcde;
- color: #646970;
+ border-left: 2px solid var(--wp-admin--surface--border-step-2);
+ color: var(--wp-admin--text-secondary--color);
font-style: italic;
margin: 1em 0;
padding: 0 0 0 1em;
@@ -2879,7 +2866,7 @@ div.action-links {
overflow: hidden; /* clearfix */
width: 100%;
margin-bottom: 20px;
- border-bottom: 1px solid #dcdcde;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
}
#plugin-information .review-title-section {
@@ -2960,7 +2947,7 @@ div.action-links {
#plugin-information .fyi {
float: none;
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
position: static;
width: auto;
margin: 26px 26px 0;
@@ -2986,7 +2973,7 @@ div.action-links {
/* Thickbox for the Plugin details modal. */
#TB_window.plugin-details-modal {
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
#TB_window.plugin-details-modal.thickbox-loading:before {
@@ -2999,7 +2986,7 @@ div.action-links {
top: 50%;
z-index: -1;
margin: -10px 0 0 -10px;
- background: #fff url(../images/spinner.gif) no-repeat center;
+ background: var(--wp-admin--surface--background) url(../images/spinner.gif) no-repeat center;
background-size: 20px 20px;
transform: translateZ(0);
}
@@ -3025,12 +3012,12 @@ div.action-links {
.plugin-details-modal #TB_closeWindowButton {
left: auto;
right: -30px;
- color: #f0f0f1;
+ color: var(--wp-admin--button);
}
.plugin-details-modal #TB_closeWindowButton:hover,
.plugin-details-modal #TB_closeWindowButton:focus {
- color: #135e96;
+ color: var(--wp-admin--button-primary);
outline: none;
box-shadow: none;
}
@@ -3119,15 +3106,15 @@ img {
.bulk-action-notice .toggle-indicator::before {
line-height: 16px;
vertical-align: top;
- color: #787c82;
+ color: var(--wp-admin--icon--fill);
}
.postbox .handle-order-higher:focus,
.postbox .handle-order-lower:focus,
.postbox .handlediv:focus {
box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ 0 0 0 1px var(--wp-admin--button-primary--hover),
+ 0 0 2px 1px var(--wp-admin--button-primary);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
@@ -3153,7 +3140,7 @@ img {
#template textarea {
font-family: Consolas, Monaco, monospace;
font-size: 13px;
- background: #f6f7f7;
+ background: var(--wp-admin--surface--background);
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
@@ -3164,7 +3151,7 @@ img {
width: 100%;
min-height: 60vh;
height: calc( 100vh - 295px );
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
box-sizing: border-box;
}
@@ -3186,8 +3173,8 @@ img {
padding: 0;
min-height: 60vh;
height: calc(100vh - 295px);
- background-color: #f6f7f7;
- border: 1px solid #dcdcde;
+ background-color: var(--wp-admin--surface--background-alternate);
+ border: 1px solid var(--wp-admin--surface--border-step-2);
border-left: none;
}
#templateside ul ul {
@@ -3231,14 +3218,13 @@ img {
outline: 0;
}
[role="treeitem"] .folder-label.focus {
- color: #043959;
box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ 0 0 0 1px var(--wp-admin--button-primary--hover),
+ 0 0 2px 1px var(--wp-admin--button-primary);
}
[role="treeitem"].hover,
[role="treeitem"] .folder-label.hover {
- background-color: #f0f0f1;
+ background-color: var(--wp-admin--button--hover);
}
.tree-folder {
@@ -3255,7 +3241,7 @@ img {
display: block;
position: absolute;
left: 2px;
- border-left: 1px solid #c3c4c7;
+ border-left: 1px solid var(--wp-admin--surface--border-step-1);
top: -13px;
bottom: 10px;
}
@@ -3263,18 +3249,18 @@ img {
content: "";
position: absolute;
display: block;
- border-left: 1px solid #c3c4c7;
+ border-left: 1px solid var(--wp-admin--surface--border-step-1);
left: 2px;
top: -5px;
height: 18px;
width: 7px;
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-1);
}
.tree-folder > li::after {
content: "";
position: absolute;
display: block;
- border-left: 1px solid #c3c4c7;
+ border-left: 1px solid var(--wp-admin--surface--border-step-1);
left: 2px;
bottom: -7px;
top: 0;
@@ -3395,7 +3381,7 @@ img {
}
.nonessential {
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
font-size: 11px;
font-style: italic;
padding-left: 12px;
@@ -3443,11 +3429,11 @@ img {
.item-edit,
.toggle-indicator,
.accordion-section-title:after {
- color: #787c82;
+ color: var(--wp-admin--icon--fill);
}
.widget-action {
- color: #50575e; /* #fafafa background in the Widgets screen */
+ color: var(--wp-admin--icon--fill); /* #fafafa background in the Widgets screen */
}
.widget-top:hover .widget-action,
@@ -3460,15 +3446,15 @@ img {
.item-edit:focus,
.sidebar-name:hover .toggle-indicator,
.accordion-section-title:hover:after {
- color: #1d2327;
+ color: var(--wp-admin--heading--color);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.widget-top .widget-action:focus .toggle-indicator:before {
box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ 0 0 0 1px var(--wp-admin--button-primary--hover),
+ 0 0 2px 1px var(--wp-admin--button-primary);
}
.control-section .accordion-section-title:after,
@@ -3501,7 +3487,7 @@ img {
/* Accordion */
.accordion-section {
- border-bottom: 1px solid #dcdcde;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
margin: 0;
}
@@ -3511,22 +3497,22 @@ img {
}
.accordion-section.open:hover {
- border-bottom-color: #dcdcde;
+ border-bottom-color: var(--wp-admin--surface--border-step-2);
}
.accordion-section-content {
display: none;
padding: 10px 20px 15px;
overflow: hidden;
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
.accordion-section-title {
margin: 0;
padding: 12px 15px 15px;
position: relative;
- border-left: 1px solid #dcdcde;
- border-right: 1px solid #dcdcde;
+ border-left: 1px solid var(--wp-admin--surface--border-step-2);
+ border-right: 1px solid var(--wp-admin--surface--border-step-2);
-webkit-user-select: none;
user-select: none;
}
@@ -3549,7 +3535,8 @@ img {
.accordion-section-title:hover:after,
.accordion-section-title:focus:after {
- border-color: #a7aaad transparent;
+ /* @todo is this also only used on High Contrast mode? */
+ border-color: transparent;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
@@ -3568,7 +3555,7 @@ img {
border-right: none;
padding: 10px 10px 11px 14px;
line-height: 1.55;
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
.control-section .accordion-section-title:after,
@@ -3580,13 +3567,13 @@ img {
.js .control-section .accordion-section-title:hover,
.js .control-section.open .accordion-section-title,
.js .control-section .accordion-section-title:focus {
- color: #1d2327;
- background: #f6f7f7;
+ color: var(--wp-admin--heading--color);
+ background: var(--wp-admin--surface--background-alternate);
}
.control-section.open .accordion-section-title {
/* When expanded */
- border-bottom: 1px solid #dcdcde;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
}
/* Edit Site */
@@ -3606,6 +3593,7 @@ img {
padding: 8px 3%;
min-height: 130px;
margin: 0;
+ background-color: var(--wp-admin--surface--background);
}
@media only screen and (max-width: 599px) {
@@ -3616,7 +3604,7 @@ img {
@media only screen and (min-width: 600px) {
.my-sites.striped li {
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
position: relative;
}
.my-sites.striped li:after {
@@ -3626,7 +3614,7 @@ img {
position: absolute;
top: 0;
right: 0;
- background: #c3c4c7;
+ background: var(--wp-admin--surface--border-step-1);
}
}
@@ -3636,7 +3624,7 @@ img {
width: 44%;
}
.my-sites.striped li {
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
.my-sites.striped li:nth-of-type(2n+1) {
clear: left;
@@ -3646,7 +3634,7 @@ img {
}
.my-sites li:nth-of-type(4n+1),
.my-sites li:nth-of-type(4n+2) {
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
}
@@ -3655,7 +3643,7 @@ img {
.my-sites li {
float: left;
width: 27.333333%;
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
.my-sites.striped li:nth-of-type(3n+3):after {
content: none;
@@ -3663,7 +3651,7 @@ img {
.my-sites li:nth-of-type(6n+1),
.my-sites li:nth-of-type(6n+2),
.my-sites li:nth-of-type(6n+3) {
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
}
@@ -3672,7 +3660,7 @@ img {
float: left;
width: 21%;
padding: 8px 2%;
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
.my-sites.striped li:nth-of-type(4n+1) {
clear: left;
@@ -3684,7 +3672,7 @@ img {
.my-sites li:nth-of-type(8n+2),
.my-sites li:nth-of-type(8n+3),
.my-sites li:nth-of-type(8n+4) {
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
}
@@ -3693,7 +3681,7 @@ img {
float: left;
width: 16%;
padding: 8px 2%;
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
.my-sites.striped li:nth-of-type(5n+1) {
clear: left;
@@ -3706,7 +3694,7 @@ img {
.my-sites li:nth-of-type(10n+3),
.my-sites li:nth-of-type(10n+4),
.my-sites li:nth-of-type(10n+5) {
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
}
@@ -3715,7 +3703,7 @@ img {
float: left;
width: 12.666666%;
padding: 8px 2%;
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
.my-sites.striped li:nth-of-type(6n+1) {
clear: left;
@@ -3729,7 +3717,7 @@ img {
.my-sites li:nth-of-type(12n+4),
.my-sites li:nth-of-type(12n+5),
.my-sites li:nth-of-type(12n+6) {
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
}
@@ -3774,7 +3762,7 @@ img {
}
body * {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+ -webkit-tap-highlight-color: rgb(var(--wp-admin--shadow) / 0) !important;
}
#wpcontent {
@@ -3893,7 +3881,7 @@ img {
}
#templateside > ul {
- border-left: 1px solid #dcdcde;
+ border-left: 1px solid var(--wp-admin--surface--border-step-2);
}
#templateside li {
@@ -4103,13 +4091,13 @@ img {
h3 .nav-tab,
nav .nav-tab {
margin: 10px 10px 0 0;
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-1);
}
.nav-tab-active:hover,
.nav-tab-active:focus,
.nav-tab-active:focus:active {
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-1);
}
.wp-filter .search-form input[type="search"] {
diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 44a444b7140c6..cd8dc404ce1b6 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -64,11 +64,11 @@
width: 100%;
outline: none;
margin: 0 0 3px;
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
#titlediv #title-prompt-text {
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
position: absolute;
font-size: 1.7em;
padding: 10px;
@@ -94,7 +94,7 @@ input#link_url {
min-height: 25px;
margin-top: 5px;
padding: 0 10px;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
#edit-slug-box .cancel {
@@ -150,7 +150,7 @@ body.post-new-php .submitbox .submitdelete {
/* Only highlight drop zones when dragging and only in the 2 columns layout. */
.is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables {
- outline: 3px dashed #646970;
+ outline: 3px dashed var(--wp-admin--text-secondary--color);
/* Prevent margin on the child from collapsing with margin on the parent. */
display: flow-root;
/*
@@ -166,9 +166,9 @@ body.post-new-php .submitbox .submitdelete {
.postbox {
position: relative;
min-width: 255px;
- border: 1px solid #c3c4c7;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
- background: #fff;
+ border: 1px solid var(--wp-admin--surface--border);
+ box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04);
+ background: var(--wp-admin--surface--background);
}
#trackback_url {
@@ -218,7 +218,7 @@ ul.category-tabs li,
.wp-tab-bar .wp-tab-active a,
#post-body ul.category-tabs li.tabs a,
#post-body ul.add-menu-item-tabs li.tabs a {
- color: #2c3338;
+ color: var(--wp-admin--tab-bar--color);
}
.category-tabs {
@@ -270,9 +270,9 @@ ul.add-menu-item-tabs li {
ul.category-tabs li.tabs,
ul.add-menu-item-tabs li.tabs,
.wp-tab-active {
- border: 1px solid #dcdcde;
- border-bottom-color: #fff;
- background-color: #fff;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
+ border-bottom-color: var(--wp-admin--surface--background);
+ background-color: var(--wp-admin--surface--background);
}
ul.category-tabs li,
@@ -291,7 +291,7 @@ ul.wp-tab-bar li {
height: auto;
width: auto;
vertical-align: top;
- background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
+ background-image: var(--wp-admin--tranparent-checkerboard--gradient);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
@@ -322,10 +322,10 @@ form#tags-filter {
#post-status-info {
width: 100%;
border-spacing: 0;
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--surface--border);
border-top: none;
- background-color: #f6f7f7;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+ background-color: var(--wp-admin--surface--background-alternate);
+ box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04);
z-index: 999;
}
@@ -372,7 +372,7 @@ form#tags-filter {
.wp-editor-expand #wp-content-editor-tools {
z-index: 1000;
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border);
}
.wp-editor-expand #wp-content-editor-container {
@@ -389,7 +389,7 @@ form#tags-filter {
}
.wp-editor-expand #post-status-info {
- border-top: 1px solid #c3c4c7;
+ border-top: 1px solid var(--wp-admin--surface--border);
}
.wp-editor-expand div.mce-toolbar-grp {
@@ -421,7 +421,7 @@ form#tags-filter {
/* End TinyMCE native fullscreen mode override */
#wp-content-editor-tools {
- background-color: #f0f0f1;
+ background-color: var(--wp-admin--page--background);
padding-top: 20px;
}
@@ -463,7 +463,7 @@ form#tags-filter {
#post-body .misc-pub-revisions:before,
#post-body .misc-pub-response-to:before,
#post-body .misc-pub-comment-status:before {
- color: #8c8f94;
+ color: var(--wp-admin--post-submit-meta-box--icon--color);
}
#post-body .misc-pub-post-status:before,
@@ -539,8 +539,8 @@ form#tags-filter {
left: 50%;
width: 450px;
margin-left: -225px;
- background: #fff;
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+ background: var(--wp-admin--surface--background);
+ box-shadow: 0 3px 6px rgb(var(--wp-admin--shadow) / 0.3);
line-height: 1.5;
z-index: 1000005;
overflow-y: auto;
@@ -552,7 +552,7 @@ form#tags-filter {
left: 0;
right: 0;
bottom: 0;
- background: #000;
+ background: var(--wp-admin--surface--background-contrast);
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 1000000;
@@ -646,7 +646,7 @@ form#tags-filter {
}
#poststuff .stuffbox > h2 {
- border-bottom: 1px solid #f0f0f1;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-3);
}
#poststuff .inside {
@@ -730,8 +730,8 @@ form#tags-filter {
.health-check-header {
text-align: center;
margin: 0 0 1rem;
- background: #fff;
- border-bottom: 1px solid #dcdcde;
+ background: var(--wp-admin--surface--background);
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
}
.privacy-settings-title-section,
@@ -774,14 +774,14 @@ form#tags-filter {
.privacy-settings-tab:focus,
.health-check-tab:focus {
- color: #1d2327;
- outline: 1px solid #787c82;
+ color: var(--wp-admin--modern-tabbed-page--color--focus);
+ outline: 1px solid var(--wp-admin--modern-tabbed-page--outline--focus);
box-shadow: none;
}
.privacy-settings-tab.active,
.health-check-tab.active {
- box-shadow: inset 0 -3px #3582c4;
+ box-shadow: var(--wp-admin--modern-tabbed-page--box-shadow);
font-weight: 600;
}
@@ -804,13 +804,13 @@ form#tags-filter {
/* Accordions */
.privacy-settings-accordion,
.health-check-accordion {
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--surface--border);
}
.privacy-settings-accordion-heading,
.health-check-accordion-heading {
margin: 0;
- border-top: 1px solid #c3c4c7;
+ border-top: 1px solid var(--wp-admin--surface--border);
font-size: inherit;
line-height: inherit;
font-weight: 600;
@@ -824,9 +824,9 @@ form#tags-filter {
.privacy-settings-accordion-trigger,
.health-check-accordion-trigger {
- background: #fff;
+ background: var(--wp-admin--surface--background);
border: 0;
- color: #2c3338;
+ color: var(--wp-admin--tab-bar--color);
cursor: pointer;
display: flex;
font-weight: 400;
@@ -846,17 +846,17 @@ form#tags-filter {
.privacy-settings-accordion-trigger:active,
.health-check-accordion-trigger:hover,
.health-check-accordion-trigger:active {
- background: #f6f7f7;
+ background: var(--wp-admin--surface--background-alternate);
}
.privacy-settings-accordion-trigger:focus,
.health-check-accordion-trigger:focus {
- color: #1d2327;
+ color: var(--wp-admin--tab-bar--color-focus);
border: none;
box-shadow: none;
outline-offset: -1px;
- outline: 2px solid #2271b1;
- background-color: #f6f7f7;
+ outline: 2px solid var(--wp-admin--theme--primary);
+ background-color: var(--wp-admin--theme--primary--contrast);
}
.privacy-settings-accordion-trigger .title,
@@ -870,7 +870,7 @@ form#tags-filter {
.privacy-settings-view-read .icon,
.health-check-accordion-trigger .icon,
.site-health-view-passed .icon {
- border: solid #50575e;
+ border: solid var(--wp-admin--modern-tabbed-page-icon--border);
border-width: 0 2px 2px 0;
height: 0.5rem;
pointer-events: none;
@@ -884,7 +884,7 @@ form#tags-filter {
.privacy-settings-accordion-trigger .badge,
.health-check-accordion-trigger .badge {
padding: 0.1rem 0.5rem 0.15rem;
- color: #2c3338;
+ color: var(--wp-admin--tab-bar--color);
font-weight: 600;
}
@@ -894,32 +894,32 @@ form#tags-filter {
.privacy-settings-accordion-trigger .badge.blue,
.health-check-accordion-trigger .badge.blue {
- border: 1px solid #72aee6;
+ border: 1px solid var(--wp-admin--theme--info);
}
.privacy-settings-accordion-trigger .badge.orange,
.health-check-accordion-trigger .badge.orange {
- border: 1px solid #dba617;
+ border: 1px solid var(--wp-admin--theme--warning);
}
.privacy-settings-accordion-trigger .badge.red,
.health-check-accordion-trigger .badge.red {
- border: 1px solid #e65054;
+ border: 1px solid var(--wp-admin--theme--error);
}
.privacy-settings-accordion-trigger .badge.green,
.health-check-accordion-trigger .badge.green {
- border: 1px solid #00ba37;
+ border: 1px solid var(--wp-admin--theme--success);
}
.privacy-settings-accordion-trigger .badge.purple,
.health-check-accordion-trigger .badge.purple {
- border: 1px solid #2271b1;
+ border: 1px solid var(--wp-admin--theme--primary);
}
.privacy-settings-accordion-trigger .badge.gray,
.health-check-accordion-trigger .badge.gray {
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--surface--border);
}
.privacy-settings-accordion-trigger[aria-expanded="true"] .icon,
@@ -933,7 +933,7 @@ form#tags-filter {
.health-check-accordion-panel {
margin: 0;
padding: 1em 1.5em;
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
.privacy-settings-accordion-panel[hidden],
@@ -953,7 +953,7 @@ form#tags-filter {
.privacy-settings-accordion-actions .success {
display: none;
- color: #008a20;
+ color: var(--wp-admin--theme--success);
padding-right: 1em;
padding-top: 6px;
}
@@ -985,7 +985,7 @@ form#tags-filter {
.privacy-settings-accordion-panel div > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(div):not(.privacy-policy-tutorial):not(.wp-policy-help):not(.privacy-text-copy):not(span.success):not(.notice p) {
margin: 0;
padding: 1em;
- border-left: 2px solid #787c82;
+ border-left: 2px solid var(--wp-admin--modern-tabbed-page-accordion--border);
}
/* Media queries */
@@ -1037,7 +1037,7 @@ form#tags-filter {
#postcustomstuff thead th {
padding: 5px 8px 8px;
- background-color: #f0f0f1;
+ background-color: var(--wp-admin--page--background);
}
#postcustom #postcustomstuff .submit {
@@ -1064,9 +1064,9 @@ form#tags-filter {
#postcustomstuff table {
margin: 0;
width: 100%;
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
border-spacing: 0;
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
#postcustomstuff tr {
@@ -1159,7 +1159,7 @@ form#tags-filter {
width: 20px;
margin-top: -4px;
margin-right: 7px;
- color: #dcdcde;
+ color: var(--wp-admin--post-format-icon--color);
font: normal 20px/1 dashicons;
speak: never;
-webkit-font-smoothing: antialiased;
@@ -1167,7 +1167,7 @@ form#tags-filter {
}
a.post-format-icon:hover:before {
- color: #135e96;
+ color: var(--wp-admin--post-format-icon--color--hover);
}
#post-formats-select {
@@ -1253,8 +1253,8 @@ label.post-format-icon {
max-height: 200px;
overflow: auto;
padding: 0 0.9em;
- border: solid 1px #dcdcde;
- background-color: #fff;
+ border: solid 1px var(--wp-admin--surface--border-step-2);
+ background-color: var(--wp-admin--surface--background);
}
div.tabs-panel-active {
@@ -1266,7 +1266,7 @@ div.tabs-panel-inactive {
}
div.tabs-panel-active:focus {
- box-shadow: inset 0 0 0 1px #4f94d4, inset 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: inset 0 0 0 1px var(--wp-admin--tabs-panel-active--box-shadow--focus), inset 0 0 2px 1px rgba(79, 148, 212, 0.8);
outline: 0 none;
}
@@ -1322,7 +1322,7 @@ ul.categorychecklist li {
p.description,
.form-wrap p {
margin: 2px 0 5px;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
p.help,
@@ -1410,7 +1410,7 @@ p.popular-tags a {
#poststuff .inside .the-tagcloud {
margin: 5px 0 10px;
padding: 8px;
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
line-height: 1.2;
word-spacing: 3px;
}
@@ -1431,8 +1431,8 @@ p.popular-tags a {
list-style: none;
position: absolute;
z-index: 10000;
- border: 1px solid #4f94d4;
- background-color: #fff;
+ border: 1px solid var(--wp-admin--ac-results--border);
+ background-color: var(--wp-admin--surface--background);
}
.wp-customizer .ac_results {
@@ -1448,8 +1448,8 @@ p.popular-tags a {
.ac_results .ac_over,
.ac_over .ac_match {
- background-color: #2271b1;
- color: #fff;
+ background-color: var(--wp-admin--ac-results-match--background);
+ color: var(--wp-admin--text-contrast--color);
cursor: pointer;
}
@@ -1490,7 +1490,7 @@ p.popular-tags a {
content: "(" attr( href ) ")";
display: inline-block;
padding: 0 4px;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
font-size: 13px;
word-break: break-all;
}
diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css
index 62a596f0fe1fa..b2b053a57674e 100644
--- a/src/wp-admin/css/install.css
+++ b/src/wp-admin/css/install.css
@@ -1,40 +1,39 @@
html {
- background: #f0f0f1;
+ background: var(--wp-admin--page--background, #f0f0f1);
margin: 0 20px;
}
body {
- background: #fff;
- border: 1px solid #c3c4c7;
- color: #3c434a;
+ background: var(--wp-admin--surface--background);
+ border: 1px solid var(--wp-admin--surface--border);
+ color: var(--wp-admin--text--color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ height: auto;
margin: 140px auto 25px;
padding: 20px 20px 10px;
max-width: 700px;
-webkit-font-smoothing: subpixel-antialiased;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+ box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04);
}
a {
- color: #2271b1;
+ color: var(--wp-admin--link--color);
}
a:hover,
a:active {
- color: #135e96;
+ color: var(--wp-admin--link--color--hover);
}
a:focus {
- color: #043959;
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ color: var(--wp-admin--link--color--hover);
+ box-shadow: var(--wp-admin--box-shadow--focus);
}
h1, h2 {
- border-bottom: 1px solid #dcdcde;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-3);
clear: both;
- color: #646970;
+ color: var(--wp-admin--heading-secondary--color);
font-size: 24px;
padding: 0 0 7px;
font-weight: 400;
@@ -59,7 +58,7 @@ ul, ol, dl {
}
a img {
- border: 0
+ border: 0;
}
abbr {
border: 0;
@@ -87,7 +86,7 @@ label {
background-size: 84px;
background-position: center top;
background-repeat: no-repeat;
- color: #3c434a; /* same as login.css */
+ color: var(--wp-admin--text--color); /* same as login.css */
font-size: 20px;
font-weight: 400;
line-height: 1.3em;
@@ -108,7 +107,7 @@ label {
font-size: 14px;
}
textarea {
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
width: 100%;
box-sizing: border-box;
@@ -124,7 +123,7 @@ textarea {
margin-bottom: 9px;
padding: 10px 20px 10px 0;
font-size: 14px;
- vertical-align: top
+ vertical-align: top;
}
.form-table th {
@@ -199,9 +198,9 @@ submit {
}
.message {
- border-left: 4px solid #d63638;
- padding: .7em .6em;
- background-color: #fcf0f1;
+ border-left: 4px solid var(--wp-admin--notice-error--border);
+ padding: 0.7em 0.6em;
+ background-color: var(--wp-admin--page--background);
}
/* rtl:ignore */
@@ -217,7 +216,6 @@ submit {
direction: ltr;
}
-
/* localization */
body.rtl,
.rtl textarea,
@@ -243,7 +241,6 @@ body.rtl,
}
@media screen and (max-width: 782px) {
-
.form-table {
margin-top: 0;
}
@@ -307,21 +304,21 @@ body.language-chooser {
padding: 8px;
width: 100%;
display: block;
- border: 1px solid #dcdcde;
- background: #fff;
- color: #2c3338;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
+ background: var(--wp-admin--surface--background);
+ color: var(--wp-admin--input--color);
font-size: 16px;
font-family: Arial, sans-serif;
font-weight: 400;
}
.language-chooser select:focus {
- color: #2c3338;
+ color: var(--wp-admin--input--color);
}
.language-chooser select option:hover,
.language-chooser select option:focus {
- color: #0a4b78;
+ color: var(--wp-admin--button-primary--hover);
}
.language-chooser .step {
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index a39a3b725cd34..6396ca4001aea 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -55,8 +55,8 @@
min-width: 24px;
height: 2em;
border-radius: 5px;
- background-color: #646970;
- color: #fff;
+ background-color: var(--wp-admin--bubble--background);
+ color: var(--wp-admin--bubble--color);
font-size: 11px;
line-height: 1.90909090;
text-align: center;
@@ -71,7 +71,7 @@
margin-left: 8px;
width: 0;
height: 0;
- border-top: 5px solid #646970;
+ border-top: 5px solid var(--wp-admin--bubble--background);
border-right: 5px solid transparent;
}
@@ -79,14 +79,14 @@
.column-response a.post-com-count-approved:focus .comment-count-approved,
.column-comments a.post-com-count-approved:hover .comment-count-approved,
.column-comments a.post-com-count-approved:focus .comment-count-approved {
- background: #2271b1;
+ background: var(--wp-admin--theme--primary);
}
.column-response a.post-com-count-approved:hover:after,
.column-response a.post-com-count-approved:focus:after,
.column-comments a.post-com-count-approved:hover:after,
.column-comments a.post-com-count-approved:focus:after {
- border-top-color: #2271b1;
+ border-top-color: var(--wp-admin--theme--primary);
}
/* @todo: consider to use a single rule for these counters and the admin menu counters. */
@@ -97,10 +97,10 @@
padding: 0 5px;
min-width: 7px;
height: 17px;
- border: 2px solid #fff;
+ border: 2px solid var(--wp-admin--surface--background);
border-radius: 11px;
- background: #d63638;
- color: #fff;
+ background: var(--wp-admin--theme--notification);
+ color: var(--wp-admin--theme--notification--contrast);
font-size: 9px;
line-height: 1.88888888;
text-align: center;
@@ -116,7 +116,7 @@
.commentlist li {
padding: 1em 1em .2em;
margin: 0;
- border-bottom: 1px solid #c3c4c7;
+ border-bottom: 1px solid var(--wp-admin--surface--border);
}
.commentlist li li {
@@ -131,7 +131,7 @@
#submitted-on,
.submitted-on {
- color: #50575e;
+ color: var(--wp-admin--text-secondary--color);
}
/* reply to comments */
@@ -203,8 +203,8 @@
}
#replyerror {
- border-color: #dcdcde;
- background-color: #f6f7f7;
+ border-color: var(--wp-admin--surface--border-step-2);
+ background-color: var(--wp-admin--surface--background-alternate);
}
/* @todo: is this used? */
@@ -214,16 +214,16 @@
#the-comment-list tr.undo,
#the-comment-list div.undo {
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
#the-comment-list .unapproved th,
#the-comment-list .unapproved td {
- background-color: #fcf9e8;
+ background-color: var(--wp-admin--notice-warning--background);
}
#the-comment-list .unapproved th.check-column {
- border-left: 4px solid #d63638;
+ border-left: 4px solid var(--wp-admin--notice-error--border);
}
#the-comment-list .unapproved th.check-column input {
@@ -231,16 +231,16 @@
}
#the-comment-list .approve a {
- color: #007017;
+ color: var(--wp-admin--action-approve--color);
}
#the-comment-list .unapprove a {
- color: #996800;
+ color: var(--wp-admin--action-unpprove--color);
}
#the-comment-list th,
#the-comment-list td {
- box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1);
}
#the-comment-list tr:last-child th,
@@ -250,14 +250,14 @@
#the-comment-list tr.unapproved + tr.approved th,
#the-comment-list tr.unapproved + tr.approved td {
- border-top: 1px solid rgba(0, 0, 0, 0.03);
+ border-top: 1px solid rgb(var(--wp-admin--shadow) / 0.03);
}
/* table vim shortcuts */
.vim-current,
.vim-current th,
.vim-current td {
- background-color: #f0f6fc !important;
+ background-color: var(--wp-admin--help-tab--background) !important;
}
th .comment-grey-bubble {
@@ -278,7 +278,7 @@ th .comment-grey-bubble:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
- color: #3c434a;
+ color: var(--wp-admin--text--color);
}
/*------------------------------------------------------------------------------
@@ -461,14 +461,13 @@ table.media .column-title .filename {
padding: 0;
top: -4px;
left: -8px;
- color: #3c434a;
+ color: var(--wp-admin--text--color);
line-height: 0.5;
position: relative;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
- color: #3c434a;
}
.column-comments .sorting-indicator:before {
@@ -506,9 +505,7 @@ th.asc a:focus span.sorting-indicator:before {
}
.wp-list-table .toggle-row:focus:before {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: var(--wp-admin--box-shadow--focus);
}
.wp-list-table .toggle-row:active {
@@ -522,7 +519,7 @@ th.asc a:focus span.sorting-indicator:before {
border-radius: 50%;
display: block;
padding: 1px 2px 1px 0;
- color: #3c434a; /* same as table headers sort arrows */
+ color: var(--wp-admin--text--color);
content: "\f140";
font: normal 20px/1 dashicons;
line-height: 1;
@@ -543,7 +540,7 @@ th.asc a:focus span.sorting-indicator:before {
}
.locked-indicator-icon:before {
- color: #8c8f94;
+ color: var(--wp-admin--icon--fill);
content: "\f160";
display: inline-block;
font: normal 20px/1 dashicons;
@@ -712,7 +709,7 @@ th.asc a:focus span.sorting-indicator {
}
.view-switch a:before {
- color: #c3c4c7;
+ color: var(--wp-admin--icon--fill--inactive);
display: inline-block;
font: normal 20px/1 dashicons;
speak: never;
@@ -723,11 +720,11 @@ th.asc a:focus span.sorting-indicator {
.view-switch a:hover:before,
.view-switch a:focus:before {
- color: #787c82;
+ color: var(--wp-admin--icon--fill);
}
.view-switch a.current:before {
- color: #2271b1;
+ color: var(--wp-admin--theme--primary);
}
.view-switch .view-list:before {
@@ -797,7 +794,7 @@ p.pagenav {
}
.row-actions {
- color: #a7aaad;
+ color: var(--wp-admin--surface--border-step-2);
font-size: 13px;
padding: 2px 0 0;
position: relative;
@@ -811,7 +808,7 @@ p.pagenav {
.row-actions .network_only,
.row-actions .network_active {
- color: #000;
+ color: var(--wp-admin--heading--color);
}
.no-js .row-actions,
@@ -1033,17 +1030,17 @@ tr.inline-edit-row td,
ul.cat-checklist {
height: 12em;
- border: solid 1px #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
overflow-y: scroll;
padding: 0 5px;
margin: 0;
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
#bulk-titles {
display: block;
height: 12em;
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
overflow-y: scroll;
padding: 0 5px;
margin: 0 0 5px;
@@ -1127,11 +1124,11 @@ ul.cat-checklist {
.plugins,
.plugins th,
.plugins td {
- color: #000;
+ color: var(--wp-admin--heading--color);
}
.plugins tr {
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
.plugins p {
@@ -1170,7 +1167,7 @@ ul.cat-checklist {
.plugins .active td,
.plugins .active th {
- background-color: #f0f6fc;
+ background-color: var(--wp-admin--notice-info--background);
}
.plugins .update th,
@@ -1185,15 +1182,15 @@ ul.cat-checklist {
.plugin-install #the-list td,
.upgrade .plugins td,
.upgrade .plugins th {
- box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1);
}
.plugins tr.active.plugin-update-tr + tr.inactive th,
.plugins tr.active.plugin-update-tr + tr.inactive td,
.plugins tr.active + tr.inactive th,
.plugins tr.active + tr.inactive td {
- border-top: 1px solid rgba(0, 0, 0, 0.03);
- box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #dcdcde;
+ border-top: 1px solid rgb(var(--wp-admin--shadow) / 0.03);
+ box-shadow: inset 0 1px 0 rgb(var(--wp-admin--shadow) / 0.02), inset 0 -1px 0 var(--wp-admin--surface--border-step-2);
}
.plugins .update td,
@@ -1211,7 +1208,7 @@ ul.cat-checklist {
.plugins .active th.check-column,
.plugin-update-tr.active td {
- border-left: 4px solid #72aee6;
+ border-left: 4px solid var(--wp-admin--notice-info--border);
}
.wp-list-table.plugins .plugin-title,
@@ -1230,10 +1227,10 @@ ul.cat-checklist {
.plugins .plugin-title .dashicons:before {
padding: 2px;
- background-color: #f0f0f1;
- box-shadow: inset 0 0 10px rgba(167, 170, 173, 0.15);
+ background-color: var(--wp-admin--page--background);
+ box-shadow: inset 0 0 10px var(--wp-admin--icon--shadow);
font-size: 60px;
- color: #c3c4c7;
+ color: var(--wp-admin--icon--fill--disabled);
}
#update-themes-table .plugin-title img,
@@ -1273,7 +1270,7 @@ ul.cat-checklist {
}
.plugins .plugin-update-tr .plugin-update {
- box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1);
overflow: hidden; /* clearfix */
padding: 0;
}
@@ -1294,31 +1291,31 @@ ul.cat-checklist {
}
.plugins tr.paused th.check-column {
- border-left: 4px solid #d63638;
+ border-left: 4px solid var(--wp-admin--notice-error--border);
}
.plugins tr.paused th,
.plugins tr.paused td {
- background-color: #f6f7f7;
+ background-color: var(--wp-admin--surface--background-alternate);
}
.plugins tr.paused .plugin-title,
.plugins .paused .dashicons-warning {
- color: #d63638;
+ color: var(--wp-admin--notice-error--color);
}
.plugins .paused .error-display p,
.plugins .paused .error-display code {
font-size: 90%;
- color: rgba(0, 0, 0, 0.7);
+ color: var(--wp-admin--text--color);
}
.plugins .resume-link {
- color: #d63638;
+ color: var(--wp-admin--notice-error--color);
}
.plugin-card .update-now:before {
- color: #d63638;
+ color: var(--wp-admin--notice-error--color);
content: "\f463";
display: inline-block;
font: normal 20px/1 dashicons;
@@ -1344,7 +1341,7 @@ ul.cat-checklist {
}
.plugin-card .updated-message:before {
- color: #68de7c;
+ color: var(--wp-admin--icon-success--fill);
content: "\f147";
}
@@ -1375,8 +1372,8 @@ ul.cat-checklist {
margin: 0 8px 16px;
width: 48.5%;
width: calc( 50% - 8px );
- background-color: #fff;
- border: 1px solid #dcdcde;
+ background-color: var(--wp-admin--surface--background);
+ border: 1px solid var(--wp-admin--surface--border-step-2);
box-sizing: border-box;
}
@@ -1483,8 +1480,8 @@ div.action-links,
.plugin-card-bottom {
clear: both;
padding: 12px 20px;
- background-color: #f6f7f7;
- border-top: 1px solid #dcdcde;
+ background-color: var(--wp-admin--surface--background-alternate);
+ border-top: 1px solid var(--wp-admin--surface--border-step-2);
overflow: hidden;
}
@@ -1499,7 +1496,7 @@ div.action-links,
.plugin-card-update-failed .notice-error {
margin: 0;
padding-left: 16px;
- box-shadow: 0 -1px 0 #dcdcde;
+ box-shadow: 0 -1px 0 var(--wp-admin--notice-error--shadow);
}
.plugin-card-update-failed .plugin-card-bottom {
@@ -1543,17 +1540,17 @@ div.action-links,
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
- color: #3c434a;
+ color: var(--wp-admin--text--color);
}
.plugin-card .column-compatibility .compatibility-incompatible:before {
content: "\f158";
- color: #d63638;
+ color: var(--wp-admin--notice-error--color);
}
.plugin-card .column-compatibility .compatibility-compatible:before {
content: "\f147";
- color: #007017;
+ color: var(--wp-admin--action-approve--color);
}
.plugin-card .notice {
@@ -1570,7 +1567,7 @@ div.action-links,
}
.no-plugin-results {
- color: #646970; /* same as no themes and no media */
+ color: var(--wp-admin--text-secondary--color);
font-size: 18px;
font-style: normal;
margin: 0;
@@ -1584,13 +1581,13 @@ div.action-links,
.wp-list-table tr.site-deleted,
.wp-list-table .site-archived,
.wp-list-table tr.site-archived {
- background: #fcf0f1;
+ background: var(--wp-admin--notice-error--background);
}
.wp-list-table .site-spammed,
.wp-list-table tr.site-spammed,
.wp-list-table .site-mature,
.wp-list-table tr.site-mature {
- background: #fcf9e8;
+ background: var(--wp-admin--notice-warning--background);
}
.sites.fixed .column-lastupdated,
@@ -1808,7 +1805,7 @@ div.action-links,
}
#the-comment-list .is-expanded td:last-child {
- box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1);
}
/* Show comment bubble as text instead */
@@ -1860,7 +1857,7 @@ div.action-links,
border: none;
border-radius: 0;
background: none;
- color: #b32d2e;
+ color: var(--wp-admin--pending--color);
font-size: inherit;
line-height: inherit;
text-align: left;
@@ -1868,7 +1865,7 @@ div.action-links,
.column-response .post-com-count-pending:hover,
.column-comments .post-com-count-pending:hover {
- color: #d63638;
+ color: var(--wp-admin--pending--color--hover);
}
.widefat thead td.check-column,
@@ -2060,7 +2057,7 @@ div.action-links,
.plugins tr.active + tr.inactive th.check-column,
.plugins tr.active + tr.inactive td.column-description,
.plugins .plugin-update-tr:before {
- box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1);
}
.plugins tr.active + tr.inactive th.check-column,
@@ -2084,8 +2081,8 @@ div.action-links,
.plugins .active.update + .plugin-update-tr:before,
.plugins .active.updated + .plugin-update-tr:before {
- background-color: #f0f6fc;
- border-left: 4px solid #72aee6;
+ background-color: var(--wp-admin--notice-info--background);
+ border-left: 4px solid var(-wp-admin--notice-info--border);
}
.plugins .plugin-update-tr .update-message {
@@ -2135,7 +2132,7 @@ div.action-links,
table.plugin-install #the-list tr {
display: block;
- box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1);
}
.plugin-card {
diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
index 3c795ebab5c42..178aacca11785 100644
--- a/src/wp-admin/css/login.css
+++ b/src/wp-admin/css/login.css
@@ -6,16 +6,16 @@ body {
}
body {
- background: #f0f0f1;
+ background: var(--wp-admin--page--background);
min-width: 0;
- color: #3c434a;
+ color: var(--wp-admin--text--color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
line-height: 1.4;
}
a {
- color: #2271b1;
+ color: var(--wp-admin--link--color);
transition-property: border, background, color;
transition-duration: .05s;
transition-timing-function: ease-in-out;
@@ -27,14 +27,12 @@ a {
a:hover,
a:active {
- color: #135e96;
+ color: var(--wp-admin--link--color--hover);
}
a:focus {
- color: #043959;
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ color: var(--wp-admin--link--color--hover);
+ box-shadow: var(--wp-admin--box-shadow--focus);
}
p {
@@ -44,20 +42,20 @@ p {
.login .message,
.login .success,
.login #login_error {
- border-left: 4px solid #72aee6;
+ border-left: 4px solid var(--wp-admin--notice-info--border);
padding: 12px;
margin-left: 0;
margin-bottom: 20px;
- background-color: #fff;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ background-color: var(--wp-admin--surface--background);
+ box-shadow: 0 1px 1px 0 rgb(var(--wp-admin--shadow) / 0.1);
}
.login .success {
- border-left-color: #00a32a;
+ border-left-color: var(--wp-admin--notice-success--border);
}
.login #login_error {
- border-left-color: #d63638;
+ border-left-color: var(--wp-admin--notice-error--border);
}
#loginform p.submit,
@@ -102,8 +100,8 @@ p {
.login .button.wp-hide-pw:focus {
background: transparent;
- border-color: #3582c4;
- box-shadow: 0 0 0 1px #3582c4;
+ border-color: var(--wp-admin--button--focus);
+ box-shadow: 0 0 0 1px var(--wp-admin--button--focus);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@@ -134,9 +132,9 @@ p {
padding: 26px 24px 34px;
font-weight: 400;
overflow: hidden;
- background: #fff;
- border: 1px solid #c3c4c7;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+ background: var(--wp-admin--surface--background);
+ border: 1px solid var(--wp-admin--surface--border);
+ box-shadow: 0 1px 3px rgb(var(--wp-admin--shadow) / 0.04);
}
.login form.shake {
@@ -215,8 +213,8 @@ p {
}
.login h1.admin-email__heading {
- border-bottom: 1px #f0f0f1 solid;
- color: #50575e;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-3);
+ color: var(--wp-admin--heading-secondary--color);
font-weight: normal;
padding-bottom: 0.5em;
text-align: left;
@@ -264,7 +262,7 @@ p {
background-size: 84px;
background-position: center top;
background-repeat: no-repeat;
- color: #3c434a;
+ color: var(--wp-admin--text--color);
height: 84px;
font-size: 20px;
font-weight: 400;
@@ -303,19 +301,19 @@ p {
.login #nav a,
.login #backtoblog a {
text-decoration: none;
- color: #50575e;
+ color: var(--wp-admin--login--link--color);
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login h1 a:hover {
- color: #135e96;
+ color: var(--wp-admin--login--link--color--hover);
}
.login #nav a:focus,
.login #backtoblog a:focus,
.login h1 a:focus {
- color: #043959;
+ color: var(--wp-admin--login--link--color--focus);
}
.login .privacy-policy-page-link {
@@ -350,7 +348,7 @@ p {
.login form .input,
.login input[type="text"],
.login form input[type="checkbox"] {
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
.js.login-action-rp input[type="text"],
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index 5aaf859ad4cfb..362c1f1e8e863 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -5,7 +5,7 @@
.media-item .describe {
border-collapse: collapse;
width: 100%;
- border-top: 1px solid #dcdcde;
+ border-top: 1px solid var(--wp-admin--surface--border-step-2);
clear: both;
cursor: default;
}
@@ -159,12 +159,12 @@
margin-bottom: 1px;
position: relative;
width: 100%;
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
.media-upload-form .media-item,
.media-upload-form .media-item .error {
- box-shadow: 0 1px 0 #dcdcde;
+ box-shadow: 0 1px 0 var(--wp-admin--surface--border-step-2);
}
#media-items:empty {
@@ -203,8 +203,8 @@
padding: 0;
overflow: hidden;
border-radius: 22px;
- background: #dcdcde;
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+ background: var(--wp-admin--code--background);
+ box-shadow: inset 0 1px 2px rgb(var(--wp-admin--shadow) / 0.1);
}
.media-item .bar {
@@ -213,8 +213,8 @@
height: 100%;
margin-top: -22px;
border-radius: 22px;
- background-color: #2271b1;
- box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+ background-color: var(--wp-admin--theme--primary);
+ box-shadow: inset 0 0 2px rgb(var(--wp-admin--shadow) / 0.3);
}
.media-item .progress .percent {
@@ -222,11 +222,11 @@
position: relative;
width: 200px;
padding: 0;
- color: #fff;
+ color: var(--wp-admin--text-contrast--color);
text-align: center;
line-height: 22px;
font-weight: 400;
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ text-shadow: 0 1px 2px rgb(var(--wp-admin--shadow) / 0.2);
}
.upload-php .fixed .column-parent {
@@ -266,8 +266,8 @@
------------------------------------------------------------------------------*/
.find-box {
- background-color: #fff;
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+ background-color: var(--wp-admin--surface--background);
+ box-shadow: 0 3px 6px rgb(var(--wp-admin--shadow) / 0.3);
width: 600px;
overflow: hidden;
margin-left: -300px;
@@ -279,8 +279,8 @@
}
.find-box-head {
- background: #fff;
- border-bottom: 1px solid #dcdcde;
+ background: var(--wp-admin--surface--background);
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
height: 36px;
font-size: 18px;
font-weight: 600;
@@ -295,7 +295,7 @@
.find-box-inside {
overflow: auto;
padding: 16px;
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
position: absolute;
top: 37px;
bottom: 45px;
@@ -346,18 +346,16 @@
cursor: pointer;
text-align: center;
background: none;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
#find-posts-close:hover,
#find-posts-close:focus {
- color: #135e96;
+ color: var(--wp-admin--find-posts-close-active--color);
}
#find-posts-close:focus {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: var(--wp-admin--find-posts-close--box-shadow--focus);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
@@ -374,8 +372,8 @@
.find-box-buttons {
padding: 8px 16px;
- background: #fff;
- border-top: 1px solid #dcdcde;
+ background: var(--wp-admin--surface--background);
+ border-top: 1px solid var(--wp-admin--surface--border-step-2);
position: absolute;
bottom: 0;
left: 0;
@@ -407,14 +405,14 @@
left: 0;
right: 0;
bottom: 0;
- background: #000;
+ background: var(--wp-admin--surface--background-contrast);
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 100100;
}
.drag-drop #drag-drop-area {
- border: 4px dashed #c3c4c7;
+ border: 4px dashed var(--wp-admin--surface--border);
height: 200px;
}
@@ -448,7 +446,7 @@
}
border color while dragging a file over the uploader drop area */
.drag-drop.drag-over #drag-drop-area {
- border-color: #9ec2e6;
+ border-color: var(--wp-admin--media-drag-drop--border);
}
#plupload-upload-ui {
@@ -484,9 +482,9 @@ border color while dragging a file over the uploader drop area */
width: auto;
margin-top: 12px;
padding: 0 16px;
- border-left: 4px solid #d63638;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- background-color: #fff;
+ border-left: 4px solid var(--wp-admin--theme--error);
+ box-shadow: 0 1px 1px 0 rgb(var(--wp-admin--shadow) / 0.1);
+ background-color: var(--wp-admin--surface--background);
}
.upload-php .mode-grid .hide-sidebar .media-sidebar {
@@ -517,12 +515,12 @@ border color while dragging a file over the uploader drop area */
content: "\f153";
display: block;
font: normal 16px/1 dashicons;
- color: #787c82;
+ color: var(--wp-admin--icon--fill);
}
.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
- color: #d63638;
+ color: var(--wp-admin--theme--error);
}
.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
@@ -537,7 +535,7 @@ border color while dragging a file over the uploader drop area */
bottom: auto;
padding-top: 0;
margin-top: 20px;
- border: 4px dashed #c3c4c7;
+ border: 4px dashed var(--wp-admin--surface--border);
}
.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
@@ -550,24 +548,18 @@ border color while dragging a file over the uploader drop area */
.media-frame.mode-grid .attachment:focus,
.media-frame.mode-grid .selected.attachment:focus,
.media-frame.mode-grid .attachment.details:focus {
- box-shadow:
- inset 0 0 2px 3px #f0f0f1,
- inset 0 0 0 7px #4f94d4;
+ box-shadow: var( --wp-admin--media-attachment--box-shadow--focus);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -6px;
}
.media-frame.mode-grid .selected.attachment {
- box-shadow:
- inset 0 0 0 5px #f0f0f1,
- inset 0 0 0 7px #c3c4c7;
+ box-shadow: var(--wp-admin--media-attachment-selected--box-shadow--focus);
}
.media-frame.mode-grid .attachment.details {
- box-shadow:
- inset 0 0 0 3px #f0f0f1,
- inset 0 0 0 7px #4f94d4;
+ box-shadow: var(--wp-admin--media-attachment-details--box-shadow);
}
.media-frame.mode-grid.mode-select .attachment .thumbnail {
@@ -632,7 +624,7 @@ border color while dragging a file over the uploader drop area */
}
.media-frame.mode-grid .attachments-browser .no-media {
- color: #646970; /* same as no plugins and no themes */
+ color: var(--wp-admin--text-secondary--color);
font-size: 18px;
font-style: normal;
margin: 0;
@@ -663,7 +655,7 @@ border color while dragging a file over the uploader drop area */
.edit-attachment-frame .edit-media-header .left,
.edit-attachment-frame .edit-media-header .right {
cursor: pointer;
- color: #787c82;
+ color: var(--wp-admin--icon--fill);
background-color: transparent;
height: 50px;
width: 50px;
@@ -671,7 +663,7 @@ border color while dragging a file over the uploader drop area */
position: absolute;
text-align: center;
border: 0;
- border-left: 1px solid #dcdcde;
+ border-left: 1px solid var(--wp-admin--surface--border-step-2);
transition: color .1s ease-in-out, background .1s ease-in-out;
}
@@ -706,9 +698,9 @@ border color while dragging a file over the uploader drop area */
.edit-attachment-frame .edit-media-header .right:hover,
.edit-attachment-frame .edit-media-header .left:focus,
.edit-attachment-frame .edit-media-header .right:focus {
- background: #dcdcde;
- border-color: #c3c4c7;
- color: #000;
+ background: var(--wp-admin--surface--border-2);
+ border-color: var(--wp-admin--surface--border);
+ color: var(--wp-admin--surface--background-contrast);
outline: none;
box-shadow: none;
}
@@ -723,7 +715,7 @@ border color while dragging a file over the uploader drop area */
.upload-php .media-modal-close:focus .media-modal-icon:before,
.upload-php .media-modal-close:hover .media-modal-icon:before {
- color: #000;
+ color: var(--wp-admin--surface--background-contrast);
}
.edit-attachment-frame .edit-media-header .left:before {
@@ -736,7 +728,7 @@ border color while dragging a file over the uploader drop area */
.edit-attachment-frame .edit-media-header [disabled],
.edit-attachment-frame .edit-media-header [disabled]:hover {
- color: #c3c4c7;
+ color: var(--wp-admin--surface--border);
background: inherit;
cursor: default;
}
@@ -759,7 +751,7 @@ border color while dragging a file over the uploader drop area */
bottom: 0;
right: 0;
left: 0;
- box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 4px 4px -4px rgb(var(--wp-admin--shadow) / 0.1);
}
.edit-attachment-frame .attachment-media-view {
@@ -780,7 +772,7 @@ border color while dragging a file over the uploader drop area */
max-width: 100%;
max-height: 90%;
max-height: calc( 100% - 42px ); /* leave space for actions underneath */
- background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
+ background-image: linear-gradient(45deg, var(--wp-admin--surface--border) 25%, transparent 25%, transparent 75%, var(--wp-admin--surface--border) 75%, var(--wp-admin--surface--border)), linear-gradient(45deg, var(--wp-admin--surface--border) 25%, transparent 25%, transparent 75%, var(--wp-admin--surface--border) 75%, var(--wp-admin--surface--border));
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
@@ -812,8 +804,8 @@ border color while dragging a file over the uploader drop area */
height: 100%;
box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
border-bottom: 0;
- border-left: 1px solid #dcdcde;
- background: #f6f7f7;
+ border-left: 1px solid var(--wp-admin--surface--border-step-2);
+ background: var(--wp-admin--page--background);
}
.edit-attachment-frame .attachment-info .details,
@@ -823,12 +815,12 @@ border color while dragging a file over the uploader drop area */
float: none;
margin-bottom: 15px;
padding-bottom: 15px;
- border-bottom: 1px solid #dcdcde;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
}
.edit-attachment-frame .attachment-info .filename {
font-weight: 400;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
.edit-attachment-frame .attachment-info .thumbnail {
@@ -856,7 +848,7 @@ border color while dragging a file over the uploader drop area */
}
.copy-to-clipboard-container .success {
- color: #008a20;
+ color: var(--wp-admin--theme--success);
margin-left: 8px;
}
@@ -933,7 +925,7 @@ border color while dragging a file over the uploader drop area */
top: 0;
bottom: 0;
width: 100%;
- background: #fff;
+ background: var(--wp-admin--surface--background);
opacity: 0.7;
filter: alpha(opacity=70);
display: none;
@@ -961,7 +953,7 @@ border color while dragging a file over the uploader drop area */
.imgedit-settings .disabled {
/* WCAG 1.4.3 Text or images of text that are part of an inactive user
interface component ... have no contrast requirement. */
- color: #a7aaad;
+ color: var(--wp-admin--link-delete--color--disabled);
}
.A1B1 {
@@ -1014,11 +1006,11 @@ border color while dragging a file over the uploader drop area */
}
.imgedit-menu .button.disabled {
- color: #a7aaad;
- border-color: #dcdcde;
- background: #f6f7f7;
+ color: var(--wp-admin--link-delete--color--disabled);
+ border-color: var(--wp-admin--surface--border-step-2);
+ background: var(--wp-admin--surface--background--alternate);
box-shadow: none;
- text-shadow: 0 1px 0 #fff;
+ text-shadow: 0 1px 0 var(--wp-admin--surface--background);
cursor: default;
transform: none;
}
@@ -1056,7 +1048,7 @@ border color while dragging a file over the uploader drop area */
}
.imgedit-crop-wrap img {
- background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
+ background-image: linear-gradient(45deg, var(--wp-admin--surface--border) 25%, transparent 25%, transparent 75%, var(--wp-admin--surface--border) 75%, var(--wp-admin--surface--border)), linear-gradient(45deg, var(--wp-admin--surface--border) 25%, transparent 25%, transparent 75%, var(--wp-admin--surface--border) 75%, var(--wp-admin--surface--border));
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
@@ -1107,7 +1099,7 @@ border color while dragging a file over the uploader drop area */
#poststuff .imgedit-group-top .button-link {
text-decoration: none;
- color: #1d2327;
+ color: var(--wp-admin--heading--color);
}
.imgedit-applyto .imgedit-label {
@@ -1132,7 +1124,7 @@ border color while dragging a file over the uploader drop area */
margin: -1px 0 0 -1px;
padding: 0;
background: transparent;
- color: #2271b1;
+ color: var(--wp-admin--theme--primary);
font-size: 20px;
line-height: 1;
cursor: pointer;
@@ -1141,9 +1133,9 @@ border color while dragging a file over the uploader drop area */
}
.image-editor .imgedit-settings .imgedit-help-toggle:focus {
- color: #2271b1;
- border-color: #4f94d4;
- box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+ color: var(--wp-admin--theme--primary);
+ border-color: var(--wp-admin--imgedit-help--border--focus);
+ box-shadow: 0 0 3px var(--wp-admin--imgedit-help--box-shadow--focus);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@@ -1167,7 +1159,7 @@ border color while dragging a file over the uploader drop area */
}
span.imgedit-scale-warn {
- color: #d63638;
+ color: var(--wp-admin--theme--error);
font-size: 20px;
font-style: normal;
visibility: hidden;
@@ -1204,7 +1196,7 @@ span.imgedit-scale-warn {
width: 7px;
text-align: center;
font-size: 13px;
- color: #3c434a;
+ color: var(--wp-admin--text--color);
}
.imgedit-settings .imgedit-scale-button-wrapper {
diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css
index 086ceafad807f..1b4850a56d514 100644
--- a/src/wp-admin/css/nav-menus.css
+++ b/src/wp-admin/css/nav-menus.css
@@ -66,7 +66,7 @@ ul.add-menu-item-tabs li {
}
.is-submenu {
- color: #50575e; /* #fafafa background */
+ color: var(--wp-admin--text-secondary--color);
font-style: italic;
font-weight: 400;
margin-left: 4px;
@@ -76,7 +76,7 @@ ul.add-menu-item-tabs li {
margin-top: 23px;
padding: 10px;
overflow: hidden;
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
.manage-menus .selected-menu,
@@ -103,7 +103,7 @@ ul.add-menu-item-tabs li {
#nav-menu-bulk-actions-bottom {
margin: 1em 0;
- margin: calc( 1em + 9px ) 0 ;
+ margin: calc( 1em + 9px ) 0 ;
}
.bulk-actions input.button {
@@ -118,9 +118,9 @@ ul.add-menu-item-tabs li {
line-height: 2.15384615;
height: auto;
min-height: 30px;
- background: #f6f7f7;
+ background: var(--wp-admin--surface--background-alternate);
vertical-align: top;
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
margin: 0;
cursor: pointer;
border-radius: 3px;
@@ -129,9 +129,9 @@ ul.add-menu-item-tabs li {
}
.bulk-selection .bulk-select-button {
- color: #2271b1;
- border-color: #2271b1;
- background: #f6f7f7;
+ color: var(--wp-admin--theme--primary);
+ border-color: var(--wp-admin--theme--primary);
+ background: var(--wp-admin--surface--background-alternate);
vertical-align: top;
}
@@ -164,13 +164,13 @@ input.bulk-select-switcher + .bulk-select-button-label {
label.bulk-select-button:hover,
label.bulk-select-button:active,
label.bulk-select-button:focus-within {
- background: #f0f0f1;
- border-color: #0a4b78;
- color: #0a4b78;
+ background: var(--wp-admin--button--hover);
+ border-color: var(--wp-admin--button-primary--hover);
+ color: var(--wp-admin--button-primary--hover);
}
input.bulk-select-switcher:focus + .bulk-select-button-label{
- color: #0a4b78;
+ color: var(--wp-admin--button-primary--hover);
}
.bulk-actions input.menu-items-delete {
@@ -182,22 +182,22 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{
background: none;
cursor: pointer;
text-decoration: underline;
- color: #b32d2e;
+ color: var(--wp-admin--link-delete--color);
}
.bulk-actions input.menu-items-delete:hover {
- color: #b32d2e;
+ color: var(--wp-admin--link-delete--color--hover);
border: none;
}
.bulk-actions input.menu-items-delete.disabled {
cursor: default;
- color: #a7aaad;
+ color: var(--wp-admin--link-delete--color--disabled);
box-shadow: none;
}
.menu-settings {
- border-top: 1px solid #f0f0f1;
+ border-top: 1px solid var(--wp-admin--surface--border-step-3);
margin-top: 2em;
}
@@ -234,7 +234,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{
}
.theme-location-set {
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
font-size: 11px;
}
@@ -261,19 +261,19 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{
.nav-menus-php #post-body {
padding: 0 10px;
- border-top: 1px solid #fff;
- border-bottom: 1px solid #dcdcde;
- background: #fff;
+ border-top: 1px solid var(--wp-admin--surface--background);
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
+ background: var(--wp-admin--surface--background);
}
#nav-menu-header,
#nav-menu-footer {
padding: 0 10px;
- background: #f6f7f7;
+ background: var(--wp-admin--surface--background-alternate);
}
#nav-menu-header {
- border-bottom: 1px solid #dcdcde;
+ border-bottom: 1px solid var(--wp-admin--surface--border-step-2);
margin-bottom: 0;
}
@@ -350,7 +350,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{
.locations-edit-menu-link {
padding-right: 3px;
- border-right: 1px solid #c3c4c7;
+ border-right: 1px solid var(--wp-admin--surface--border);
}
#menu-management .inside {
@@ -538,7 +538,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{
}
.menu-item-bar .menu-item-handle {
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
position: relative;
padding: 10px 15px;
height: auto;
@@ -550,12 +550,12 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{
}
.menu-item-bar .menu-item-handle:hover {
- border-color: #8c8f94;
+ border-color: var(--wp-admin--surface--border-contrast);
}
#menu-to-edit .menu-item-invalid .menu-item-handle {
- background: #fcf0f1;
- border-color: #d63638;
+ background: var(--wp-admin--notice-error--background);
+ border-color: var(--wp-admin--notice-error--border);
}
.no-js .menu-item-edit-active .item-edit {
@@ -568,7 +568,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{
.menu li.deleting .menu-item-handle {
background-image: none;
- background-color: #f86368;
+ background-color: var(--wp-admin--notice-error--background);
}
.menu-item-handle .item-title {
@@ -590,7 +590,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{
}
.menu-item-handle .menu-item-title.no-title {
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
/* Sortables */
@@ -657,7 +657,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
.item-type {
display: inline-block;
padding: 12px 16px;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
font-size: 12px;
line-height: 1.5;
}
@@ -698,7 +698,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
height: auto;
margin: 12px -10px 12px 0;
padding: 0;
- color: #2271b1;
+ color: var(--wp-admin--link--color);
text-decoration: underline;
font-size: 12px;
line-height: 1.5;
@@ -734,9 +734,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
}
.nav-menus-php .item-edit:focus:before {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: var(--wp-admin--box-shadow--focus);
}
/* Menu editing */
@@ -750,9 +748,9 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
padding: 10px;
position: relative;
z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--surface--border);
border-top: none;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+ box-shadow: 0 1px 1px rgba(var(--wp-admin--shadow), 0.04);
}
.menu-item-settings .field-move {
@@ -796,8 +794,8 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
display: block;
margin: 0 0 15px;
padding: 3px 5px 5px;
- border: 1px solid #dcdcde;
- color: #646970;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
+ color: var(--wp-admin--text-secondary--color);
font-size: 12px;
}
@@ -1000,12 +998,12 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
@media only screen and (min-width: 783px) {
@supports (position: sticky) and (scroll-margin-bottom: 130px) {
-
+
#nav-menu-footer {
position: sticky;
bottom: 0;
z-index: 10;
- box-shadow: 0 -1px 0 0 #ddd;
+ box-shadow: 0 -1px 0 0 var(--wp-admin--surface--border-step-2);
}
#save_menu_header {
diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css
index c06f87d8d26b1..5c904ffd40e24 100644
--- a/src/wp-admin/css/revisions.css
+++ b/src/wp-admin/css/revisions.css
@@ -25,8 +25,8 @@
position: fixed;
top: 0;
height: 82px;
- background: #fff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: var(--wp-admin--surface--background);
+ box-shadow: 0 1px 3px var(--wp-admin--surface--box-shadow);
}
.revisions-tickmarks {
@@ -36,13 +36,13 @@
top: 7px;
max-width: 70%;
box-sizing: border-box;
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
.revisions-tickmarks > div {
position: absolute;
height: 100%;
- border-left: 1px solid #a7aaad;
+ border-left: 1px solid var(--wp-admin--icon--fill--disabled);
box-sizing: border-box;
}
@@ -109,8 +109,8 @@ body.folded .revisions .loading-indicator {
.revisions-meta {
margin-top: 20px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: var(--wp-admin--surface--background);
+ box-shadow: 0 1px 3px var(--wp-admin--surface--box-shadow);
overflow: hidden;
}
@@ -131,11 +131,11 @@ body.folded .revisions .loading-indicator {
}
.revisions-controls .author-card .date {
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
.revisions-controls .author-card.autosave {
- color: #d63638;
+ color: var(--wp-admin--notice-error--color);
}
.revisions-controls .author-card .author-name {
@@ -172,8 +172,8 @@ body.folded .revisions .loading-indicator {
.revisions-diff {
padding: 15px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: var(--wp-admin--surface--background);
+ box-shadow: 0 1px 3px var(--wp-admin--surface--box-shadow);
}
.revisions-diff h3:first-child {
@@ -242,16 +242,16 @@ table.diff .diff-addedline ins {
table.diff .diff-deletedline {
position: relative;
- background-color: #fcf0f1;
+ background-color: var(--wp-admin--diff--deletedline--background);
}
table.diff .diff-deletedline del {
- background-color: #ffabaf;
+ background-color: var(--wp-admin--diff--deletedline-del--background);
}
table.diff .diff-addedline {
position: relative;
- background-color: #edfaef;
+ background-color: var(--wp-admin--diff--addedline--background);
}
table.diff .diff-deletedline .dashicons,
@@ -271,7 +271,7 @@ table.diff .diff-addedline .dashicons {
}
table.diff .diff-addedline ins {
- background-color: #68de7c;
+ background-color: var(--wp-admin--diff--addedline-ins--background);
}
.diff-meta {
@@ -384,8 +384,8 @@ table.diff .diff-addedline ins {
.revisions-tooltip,
.revisions-tooltip-arrow > span {
- border: 1px solid #dcdcde;
- background-color: #fff;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
+ background-color: var(--wp-admin--surface--background);
}
.revisions-tooltip {
@@ -405,8 +405,8 @@ table.diff .diff-addedline ins {
.arrow:after {
z-index: 9999;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: var(--wp-admin--surface--background);
+ box-shadow: 0 1px 3px var(--wp-admin--surface--box-shadow);
}
.arrow.top {
@@ -445,7 +445,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
/* jQuery UI Slider */
.wp-slider.ui-slider {
position: relative;
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
text-align: left;
cursor: pointer;
}
@@ -464,22 +464,22 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
.wp-slider .ui-slider-handle,
.wp-slider .ui-slider-handle.focus {
- background: #f6f7f7;
- border: 1px solid #c3c4c7;
- box-shadow: 0 1px 0 #c3c4c7;
+ background: var(--wp-admin--slider-handle--background);
+ border: 1px solid var(--wp-admin--slider-handle--border);
+ box-shadow: 0 1px 0 var(--wp-admin--slider-handle--border);
}
.wp-slider .ui-slider-handle:hover,
.wp-slider .ui-slider-handle.ui-state-hover {
- background: #f6f7f7;
- border-color: #8c8f94;
+ background: var(--wp-admin--slider-handle--background);
+ border-color: var(--wp-admin--slider-handle--border--hover);
}
.wp-slider .ui-slider-handle:active,
.wp-slider .ui-slider-handle.ui-state-active {
- background: #f0f0f1;
- border-color: #8c8f94;
- box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
+ background: var(--wp-admin--slider-handle--background--active);
+ border-color: var(--wp-admin--slider-handle--border--hover);
+ box-shadow: inset 0 2px 5px -3px rgb(var(--wp-admin--shadow) / 0.5);
transform: translateY(1px);
}
@@ -488,7 +488,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
position: absolute;
top: 2px;
left: 2px;
- color: #50575e;
+ color: var(--wp-admin--slider-handle--color);
content: "\f229";
font: normal 18px/1 dashicons;
speak: never;
@@ -498,7 +498,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
.wp-slider .ui-slider-handle:hover:before,
.wp-slider .ui-slider-handle.ui-state-hover:before {
- color: #1d2327;
+ color: var(--wp-admin--slider-handle--color--hover);
}
.wp-slider .ui-slider-handle.from-handle:before,
diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
index 60f07f2d0d09d..f49bc429bcd3f 100644
--- a/src/wp-admin/css/site-health.css
+++ b/src/wp-admin/css/site-health.css
@@ -46,34 +46,34 @@ are styled in the Privacy section of edit.css */
.loading .site-health-progress svg #bar {
stroke-dashoffset: 0;
- stroke: #c3c4c7;
+ stroke: var(--wp-admin--surface--border);
animation: loadingPulse 3s infinite ease-in-out;
}
.site-health-progress svg circle {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
- stroke: #c3c4c7;
+ stroke: var(--wp-admin--surface--border);
stroke-width: 2em;
}
.site-health-progress svg #bar {
stroke-dashoffset: 565;
- stroke: #d63638;
+ stroke: var(--wp-admin--theme--error);
}
.green .site-health-progress #bar {
- stroke: #00a32a;
+ stroke: var(--wp-admin--theme--success);
}
.green .site-health-progress .site-health-progress-label {
- color: #00a32a;
+ color: var(--wp-admin--theme--success);
}
.orange .site-health-progress #bar {
- stroke: #dba617;
+ stroke: var(--wp-admin--theme--warning);
}
.orange .site-health-progress .site-health-progress-label {
- color: #dba617;
+ color: var(--wp-admin--theme--warning);
}
.site-health-progress-label {
@@ -84,13 +84,13 @@ are styled in the Privacy section of edit.css */
@keyframes loadingPulse {
0% {
- stroke: #c3c4c7;
+ stroke: var(--wp-admin--surface--border);
}
50% {
- stroke: #72aee6;
+ stroke: var(--wp-admin--theme--info);
}
100% {
- stroke: #c3c4c7;
+ stroke: var(--wp-admin--surface--border);
}
}
@@ -150,18 +150,18 @@ are styled in the Privacy section of edit.css */
height: 0;
border-style: solid;
border-width: 0 10px 5px;
- border-color: transparent transparent #ffffff;
+ border-color: transparent transparent var(--wp-admin--surface--background);
right: 20px;
top: 5px;
}
.health-check-offscreen-nav .health-check-tab {
- background: #fff;
- box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 );
+ background: var(--wp-admin--surface--background);
+ box-shadow: 0 2px 5px 0 rgb(var(--wp-admin--shadow) / 0.75 );
}
.health-check-offscreen-nav .health-check-tab.active {
- box-shadow: inset 3px 0 #3582c4;
+ box-shadow: var(--wp-admin--modern-tabbed-page--box-shadow);
font-weight: 600;
}
@@ -190,23 +190,23 @@ are styled in the Privacy section of edit.css */
.health-check-body .pass::before,
.health-check-body .good::before {
content: "\f147";
- color: #00a32a;
+ color: var(--wp-admin--theme--success);
}
.health-check-body .warning::before {
content: "\f460";
- color: #dba617;
+ color: var(--wp-admin--theme--warning);
}
.health-check-body .info::before {
content: "\f348";
- color: #72aee6;
+ color: var(--wp-admin--theme--info);
}
.health-check-body .fail::before,
.health-check-body .error::before {
content: "\f335";
- color: #d63638;
+ color: var(--wp-admin--theme--error);
}
.site-health-copy-buttons {
@@ -220,7 +220,7 @@ are styled in the Privacy section of edit.css */
}
.site-health-copy-buttons .success {
- color: #008a20;
+ color: var(--wp-admin--theme--success);
margin-left: 0.5rem;
}
diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css
index eae9a576357a8..f886aaeca8dc8 100644
--- a/src/wp-admin/css/site-icon.css
+++ b/src/wp-admin/css/site-icon.css
@@ -29,7 +29,7 @@
}
.site-icon-preview .app-icon-preview {
- background-color: #000;
+ background-color: var(--wp-admin--site-icon--background-color);
border-radius: 16px;
height: 64px;
overflow: hidden;
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 04bfdd00f7f7d..24eeb945d5ddf 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -275,7 +275,6 @@ body.js .theme-browser.search-loading {
display: block;
content: "";
background: transparent;
- background: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index 9d64f979702b4..a0b528a040593 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -16,7 +16,7 @@
.widget-top {
font-size: 13px;
font-weight: 600;
- background: #f6f7f7;
+ background: var(--wp-admin--surface--background-alternate);
}
.widget-top .widget-action {
@@ -53,12 +53,12 @@
.in-widget-title,
#widgets-right a.widget-control-edit,
#available-widgets .widget-description {
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
.deleting .widget-title,
.deleting .widget-top .widget-action .toggle-indicator:before {
- color: #a7aaad;
+ color: var(--wp-admin--link-delete--color--disabled);
}
/* Media Widgets */
@@ -90,7 +90,7 @@
.media-widget-control .attachment-media-view .button-add-media,
.media-widget-control .placeholder {
- border: 1px dashed #c3c4c7;
+ border: 1px dashed var(--wp-admin--surface--border);
box-sizing: border-box;
cursor: pointer;
line-height: 1.6;
@@ -102,19 +102,19 @@
.media-widget-control .attachment-media-view .button-add-media {
cursor: pointer;
- background-color: #f0f0f1;
- color: #2c3338;
+ background-color: var(--wp-admin--page--background);
+ color: var(--wp-admin--input--color);
}
.media-widget-control .attachment-media-view .button-add-media:hover {
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
}
.media-widget-control .attachment-media-view .button-add-media:focus {
- background-color: #fff;
+ background-color: var(--wp-admin--surface--background);
border-style: solid;
- border-color: #4f94d4;
- box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
+ border-color: var(--wp-admin--button--focus);
+ box-shadow: 0 0 3px var(--wp-admin--button--focus);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
@@ -137,12 +137,12 @@
.media-widget-control .media-widget-preview img {
max-width: 100%;
vertical-align: middle;
- background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
+ background-image: var(--wp-admin--tranparent-checkerboard--gradient);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
.media-widget-control .media-widget-preview .wp-video-shortcode {
- background: #000;
+ background: var(--wp-admin--media-widget-preview--video--background);
}
.media-frame.media-widget .media-toolbar-secondary {
@@ -167,7 +167,7 @@
display: inline-block;
min-height: 132px;
width: 100%;
- background: #000;
+ background: var(--wp-admin--surface--background-contrast);
}
.media-widget-video-link .dashicons {
@@ -175,7 +175,7 @@
position: relative;
width: 100%;
top: -90px;
- color: #fff;
+ color: var(--wp-admin--icon-contrast--fill);
text-decoration: none;
}
@@ -185,7 +185,7 @@
.media-frame #embed-url-field.invalid,
.media-widget-image-link > .link:invalid {
- border: 1px solid #d63638;
+ border: 1px solid var(--wp-admin--theme--notification);
}
.media-widget-image-link {
@@ -205,7 +205,7 @@
}
.media-widget-preview .placeholder {
- background: #f0f0f1;
+ background: var(--wp-admin--page--background);
}
.media-widget-gallery-preview .gallery-item {
@@ -251,13 +251,13 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgb(var(--wp-admin--shadow) / 0.5);
}
.media-widget-gallery-preview .gallery-icon-placeholder-text {
font-weight: 600;
font-size: 2em;
- color: #fff;
+ color: var(--wp-admin--text-contrast--color);
}
@@ -271,7 +271,7 @@
}
.widget-placeholder {
- border: 1px dashed #c3c4c7;
+ border: 1px dashed var(--wp-admin--surface--border);
margin: 0 auto 10px;
height: 45px;
width: 100%;
@@ -336,9 +336,7 @@
}
.sidebar-name .handlediv:focus .toggle-indicator:before {
- box-shadow:
- 0 0 0 1px #4f94d4,
- 0 0 2px 1px rgba(79, 148, 212, 0.8);
+ box-shadow: var(--wp-admin--box-shadow--focus);
}
.sidebar-name h2,
@@ -353,12 +351,12 @@
padding: 0 0 15px;
margin: 0;
font-style: normal;
- color: #646970;
+ color: var(--wp-admin--text-secondary--color);
}
.widget-holder .description,
.inactive-sidebar .description {
- color: #50575e;
+ color: var(--wp-admin--heading-secondary--color);
}
#widgets-right .widgets-holder-wrap .description {
@@ -510,8 +508,8 @@ div#widgets-right .closed .widgets-sortables {
/* Dragging a widget over a closed sidebar */
#widgets-right .widgets-holder-wrap.widget-hover {
- border-color: #787c82;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+ border-color: var(--wp-admin--widgets-holder--border--hover);
+ box-shadow: 0 1px 2px rgb(var(--wp-admin--shadow) / 0.3);
}
/* Accessibility Mode */
@@ -532,7 +530,7 @@ div#widgets-right .closed .widgets-sortables {
.widgets_access #widgets-left .widget .widget-top:hover,
.widgets_access #widgets-right .widget .widget-top:hover {
- border-color: #dcdcde;
+ border-color: var(--wp-admin--surface--border-step-2);
}
#available-widgets .widget-control-edit .edit,
@@ -546,19 +544,19 @@ div#widgets-right .closed .widgets-sortables {
.widget-control-edit {
display: block;
- color: #646970;
- background: #f0f0f1;
+ color: var(--wp-admin--text-secondary--color);
+ background: var(--wp-admin--page--background);
padding: 0 15px;
line-height: 3.30769230;
- border-left: 1px solid #dcdcde;
+ border-left: 1px solid var(--wp-admin--surface--border-step-2);
}
#widgets-left .widget-control-edit:hover,
#widgets-right .widget-control-edit:hover {
- color: #fff;
- background: #3c434a;
+ color: var(--wp-admin--surface--background);
+ background: var(--wp-admin--text--color);
border-left: 0;
- outline: 1px solid #3c434a;
+ outline: 1px solid var(--wp-admin--text--color);
}
.widgets-holder-wrap .sidebar-name,
@@ -599,7 +597,7 @@ div#widgets-right .closed .widgets-sortables {
}
.widget-inside {
- background: #fff;
+ background: var(--wp-admin--surface--background);
}
.widget-inside select {
@@ -613,11 +611,11 @@ div#widgets-right .closed .widgets-sortables {
padding-left: 15px;
font-size: 12px;
line-height: 1;
- color: #000;
+ color: var(--wp-admin--notice-info--color);
}
.js #removing-widget {
- color: #72aee6;
+ color: var(--wp-admin--notice-info--color);
}
.widget-control-noform,
@@ -669,8 +667,8 @@ div#widgets-right .closed .widgets-sortables {
#available-widgets .widget-top:hover,
div#widgets-right .widget-top:hover,
#widgets-left .widget-top:hover {
- border-color: #8c8f94;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ border-color: var(--wp-admin--widget-chooser--border);
+ box-shadow: 0 1px 2px rgb(var(--wp-admin--shadow) / 0.1);
}
.widgets-chooser ul.widgets-chooser-sidebars {
@@ -685,12 +683,12 @@ div#widgets-right .widget-top:hover,
}
.widgets-chooser ul {
- border: 1px solid #c3c4c7;
+ border: 1px solid var(--wp-admin--surface--border);
}
.widgets-chooser li {
- border-bottom: 1px solid #c3c4c7;
- background: #fff;
+ border-bottom: 1px solid var(--wp-admin--surface--border);
+ background: var(--wp-admin--surface--background);
margin: 0;
position: relative;
}
@@ -718,8 +716,8 @@ div#widgets-right .widget-top:hover,
}
.widgets-chooser .widgets-chooser-selected .widgets-chooser-button {
- background: #2271b1;
- color: #fff;
+ background: var(--wp-admin--button-primary);
+ color: var(--wp-admin--button-primary--text);
}
.widgets-chooser .widgets-chooser-selected:before {
@@ -727,7 +725,7 @@ div#widgets-right .widget-top:hover,
display: block;
-webkit-font-smoothing: antialiased;
font: normal 26px/1 dashicons;
- color: #fff;
+ color: var(--wp-admin--button-primary--text);
position: absolute;
top: 7px;
left: 5px;
@@ -770,7 +768,7 @@ div#widgets-right .widget-top:hover,
}
.custom-html-widget-fields > p > .CodeMirror {
- border: 1px solid #dcdcde;
+ border: 1px solid var(--wp-admin--surface--border-step-2);
}
.custom-html-widget-fields code {
padding-top: 1px;
diff --git a/src/wp-admin/includes/media.php b/src/wp-admin/includes/media.php
index 3cb96b2bb4106..5395bb620b5a4 100644
--- a/src/wp-admin/includes/media.php
+++ b/src/wp-admin/includes/media.php
@@ -522,6 +522,7 @@ function wp_iframe( $content_func, ...$args ) {
<?php bloginfo( 'name' ); ?> › <?php _e( 'Uploads' ); ?> — <?php _e( 'WordPress' ); ?>
<?php bloginfo( 'name' ); ?> › <?php echo $title; ?> — <?php _e( 'WordPress' ); ?>