diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index 721a98078f0d6..267b71cf90fac 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -37,7 +37,7 @@ --accent-gradient: linear-gradient(90deg, #000000 4.7%, var(--accent-1) 83.84%)/*rtl:linear-gradient(-90deg, #000000 4.7%, var(--accent-1) 83.84%)*/; /* Navigation colors. */ - --nav-background: #fff; + --nav-background: var(--wp-admin-bg-card); --nav-border: transparent; --nav-color: var(--text); --nav-current: var(--accent-1); @@ -56,7 +56,7 @@ .freedoms-php, .privacy-php, .contribute-php { - background: #fff; + background: var(--wp-admin-bg-card); } .about-php #wpcontent, @@ -64,7 +64,7 @@ .freedoms-php #wpcontent, .privacy-php #wpcontent, .contribute-php #wpcontent { - background: #fff; + background: var(--wp-admin-bg-card); padding: 0 24px; } @@ -993,7 +993,7 @@ background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat; background-position: center 25px; background-size: 80px 80px; - color: #fff; + color: var(--wp-admin-text-inverse); font-size: 14px; text-align: center; font-weight: 600; diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index c4b32ac4b9e87..f789266ac998b 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -3,7 +3,7 @@ #adminmenu, #adminmenu .wp-submenu { width: 160px; - background-color: #1d2327; + background-color: var(--wp-admin-text-primary); } #adminmenuback { @@ -83,11 +83,11 @@ display: block; line-height: 1.3; padding: 2px 5px; - color: #f0f0f1; + color: var(--wp-admin-bg-page); } #adminmenu .wp-submenu a { - color: #c3c4c7; + color: var(--wp-admin-border-default); color: rgba(240, 246, 252, 0.7); font-size: 13px; line-height: 1.4; @@ -104,7 +104,7 @@ #adminmenu li.menu-top > a:focus, #adminmenu .wp-submenu a:hover, #adminmenu .wp-submenu a:focus { - color: #72aee6; + color: var(--wp-admin-status-info); } #adminmenu a:hover, @@ -130,7 +130,7 @@ word-wrap: break-word; padding: 6px 0; z-index: 9999; - background-color: #2c3338; + background-color: var(--wp-admin-border-emphasis); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } @@ -169,8 +169,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-text-primary); + color: var(--wp-admin-status-info); } .folded #adminmenu li.menu-top:hover, @@ -182,8 +182,8 @@ #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head { - background: #2271b1; - color: #fff; + background: var(--wp-admin-status-info-dark); + color: var(--wp-admin-text-inverse); } .folded #adminmenu .wp-submenu.sub-open, @@ -217,7 +217,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-text-inverse); } #adminmenu .wp-not-current-submenu li > a, @@ -289,14 +289,14 @@ } div.wp-menu-image:before { - color: #a7aaad; + color: var(--wp-admin-text-placeholder); color: rgba(240, 246, 252, 0.6); padding: 7px 0; transition: all .1s ease-in-out; } #adminmenu div.wp-menu-image:before { - color: #a7aaad; + color: var(--wp-admin-text-placeholder); color: rgba(240, 246, 252, 0.6); } @@ -307,13 +307,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-text-inverse); } #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-status-info); } .folded #adminmenu div.wp-menu-image { @@ -345,7 +345,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-bg-page); top: 50%; margin-top: -8px; } @@ -384,7 +384,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-border-emphasis); } #adminmenu li.menu-top:hover .wp-menu-image img, @@ -407,7 +407,7 @@ ul#adminmenu > li.current > a.current:after { } #adminmenu .wp-submenu .wp-submenu-head { - color: #fff; + color: var(--wp-admin-text-inverse); font-weight: 400; font-size: 14px; padding: 5px 4px 5px 11px; @@ -434,8 +434,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-status-error); + color: var(--wp-admin-text-inverse); font-size: 11px; line-height: 1.6; text-align: center; @@ -444,8 +444,8 @@ 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; + background-color: var(--wp-admin-status-error); + color: var(--wp-admin-text-inverse); } #adminmenu li span.count-0 { @@ -462,16 +462,16 @@ ul#adminmenu > li.current > a.current:after { position: relative; overflow: visible; background: none; - color: #a7aaad; + color: var(--wp-admin-text-placeholder); cursor: pointer; } #collapse-button:hover { - color: #72aee6; + color: var(--wp-admin-status-info); } #collapse-button:focus { - color: #72aee6; + color: var(--wp-admin-status-info); /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; outline-offset: -1px; @@ -803,7 +803,7 @@ li#wp-admin-bar-menu-toggle { } .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { - background: #2c3338; + background: var(--wp-admin-border-emphasis); } li#wp-admin-bar-menu-toggle { @@ -834,7 +834,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-status-info); } } diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 63e960b482c00..9e41d00c3bdf9 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1,3 +1,51 @@ +/*------------------------------------------------------------------------------ + WordPress Admin Color Tokens + All admin interface colors are defined here as CSS custom properties. + Color schemes (including Dark mode) override these values. + See: src/wp-admin/css/colors/ +------------------------------------------------------------------------------*/ + +:root { + /* Backgrounds */ + --wp-admin-bg-page: #f0f0f1; + --wp-admin-bg-card: #fff; + --wp-admin-bg-alt: #f6f7f7; + --wp-admin-bg-hover: #f0f0f1; + --wp-admin-bg-disabled: #f0f0f1; + + /* Text */ + --wp-admin-text-primary: #1d2327; + --wp-admin-text-body: #3c434a; + --wp-admin-text-secondary: #646970; + --wp-admin-text-tertiary: #50575e; + --wp-admin-text-placeholder: #a7aaad; + --wp-admin-text-inverse: #fff; + + /* Borders */ + --wp-admin-border-default: #c3c4c7; + --wp-admin-border-light: #dcdcde; + --wp-admin-border-emphasis: #2c3338; + --wp-admin-border-subtle: #8c8f94; + + /* Status */ + --wp-admin-status-error: #d63638; + --wp-admin-status-error-dark: #b32d2e; + --wp-admin-status-error-bg: #fcf0f0; + --wp-admin-status-error-border: #cc1818; + --wp-admin-status-warning: #dba617; + --wp-admin-status-warning-bg: #fef8ee; + --wp-admin-status-warning-border: #f0b849; + --wp-admin-status-success: #00a32a; + --wp-admin-status-success-bg: #eff9f1; + --wp-admin-status-success-border: #4ab866; + --wp-admin-status-info: #72aee6; + --wp-admin-status-info-dark: #2271b1; + + /* Shadows & Overlays */ + --wp-admin-shadow-color: rgba(0, 0, 0, 0.04); + --wp-admin-overlay-dark: rgba(0, 0, 0, 0.07); +} + /* 2 column liquid layout */ #wpwrap { height: auto; @@ -198,7 +246,7 @@ p.popular-tags, .popular-tags, .feature-filter, .comment-ays { - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } @@ -210,7 +258,7 @@ p.popular-tags, .popular-tags, .feature-filter, .comment-ays { - background: #fff; + background: var(--wp-admin-bg-card); } /* general */ @@ -222,8 +270,8 @@ body { } body { - background: #f0f0f1; - color: #3c434a; + background: var(--wp-admin-bg-page); + color: var(--wp-admin-text-body); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4em; @@ -259,7 +307,7 @@ td { /* Any change to the default link style must be applied to button-link too. */ a { - color: #2271b1; + color: var(--wp-admin-status-info-dark); transition-property: border, background, color; transition-duration: .05s; transition-timing-function: ease-in-out; @@ -338,14 +386,14 @@ h6 { } h1 { - color: #1d2327; + color: var(--wp-admin-text-primary); font-size: 2em; margin: .67em 0; } h2, h3 { - color: #1d2327; + color: var(--wp-admin-text-primary); font-size: 1.3em; margin: 1em 0; } @@ -426,7 +474,7 @@ kbd, code { padding: 3px 5px 2px; margin: 0 1px; - background: #f0f0f1; + background: var(--wp-admin-bg-page); background: rgba(0, 0, 0, 0.07); font-size: 13px; } @@ -437,7 +485,7 @@ code { padding: 0; font-size: 13px; float: left; - color: #646970; + color: var(--wp-admin-text-secondary); } .subsubsub a { @@ -448,7 +496,7 @@ code { .subsubsub a .count, .subsubsub a.current .count { - color: #50575e; /* #f1f1f1 background */ + color: var(--wp-admin-text-tertiary); /* #f1f1f1 background */ font-weight: 400; } @@ -488,12 +536,12 @@ code { .widefat thead th, .widefat thead td { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin-border-default); } .widefat tfoot th, .widefat tfoot td { - border-top: 1px solid #c3c4c7; + border-top: 1px solid var(--wp-admin-border-default); border-bottom: none; } @@ -611,7 +659,7 @@ code { .subtitle { margin: 0; padding-left: 25px; - color: #50575e; + color: var(--wp-admin-text-tertiary); font-size: 14px; font-weight: 400; line-height: 1; @@ -634,14 +682,14 @@ code { text-shadow: none; top: -3px; margin-left: 4px; - border: 1px solid #2271b1; + border: 1px solid var(--wp-admin-status-info-dark); border-radius: 2px; background: transparent; font-size: 13px; font-weight: 500; min-height: 32px; line-height: 2.30769231; /* 30px for 32px height */ - color: #2271b1; /* use the standard color used for buttons */ + color: var(--wp-admin-status-info-dark); /* use the standard color used for buttons */ padding: 0 12px; -webkit-appearance: none; @@ -680,7 +728,7 @@ code { } .wp-dialog { - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .widgets-chooser ul, @@ -688,7 +736,7 @@ code { #available-widgets .widget-top:hover, div#widgets-right .widget-top:hover, #widgets-left .widget-top:hover { - border-color: #8c8f94; + border-color: var(--wp-admin-border-subtle); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } @@ -704,11 +752,11 @@ div#widgets-right .widget-top:hover, .striped > tbody > :nth-child(odd), ul.striped > :nth-child(odd), .alternate { - background-color: #f6f7f7; + background-color: var(--wp-admin-bg-alt); } .bar { - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); border-right-color: var(--wp-admin-theme-color); } @@ -716,35 +764,35 @@ ul.striped > :nth-child(odd), .highlight { background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08); - color: #3c434a; + color: var(--wp-admin-text-body); } .wp-ui-primary { - color: #fff; - background-color: #2c3338; + color: var(--wp-admin-text-inverse); + background-color: var(--wp-admin-border-emphasis); } .wp-ui-text-primary { - color: #2c3338; + color: var(--wp-admin-border-emphasis); } .wp-ui-highlight { - color: #fff; - background-color: #2271b1; + color: var(--wp-admin-text-inverse); + background-color: var(--wp-admin-status-info-dark); } .wp-ui-text-highlight { - color: #2271b1; + color: var(--wp-admin-status-info-dark); } .wp-ui-notification { - color: #fff; - background-color: #d63638; + color: var(--wp-admin-text-inverse); + background-color: var(--wp-admin-status-error); } .wp-ui-text-notification { - color: #d63638; + color: var(--wp-admin-status-error); } .wp-ui-text-icon { - color: #8c8f94; /* same as new icons */ + color: var(--wp-admin-border-subtle); /* same as new icons */ } /* For emoji replacement images */ @@ -784,16 +832,16 @@ img.emoji { .widget .widget-top, .menu-item-handle { - background: #f6f7f7; - color: #1d2327; + background: var(--wp-admin-bg-alt); + color: var(--wp-admin-text-primary); } .stuffbox .hndle { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin-border-default); } .quicktags { - background-color: #c3c4c7; + background-color: var(--wp-admin-border-default); color: #000; font-size: 12px; } @@ -840,7 +888,7 @@ img.emoji { .tagchecklist .ntdelbutton:focus .remove-tag-icon:before, #bulk-titles .ntdelbutton:hover:before, #bulk-titles .ntdelbutton:focus:before { - color: #d63638; + color: var(--wp-admin-status-error); } .tagchecklist .ntdelbutton:focus .remove-tag-icon:before { @@ -864,7 +912,7 @@ strong, b { } .howto { - color: #646970; + color: var(--wp-admin-text-secondary); display: block; } @@ -879,8 +927,8 @@ p.install-help { hr { border: 0; - border-top: 1px solid #dcdcde; - border-bottom: 1px solid #f6f7f7; + border-top: 1px solid var(--wp-admin-border-light); + border-bottom: 1px solid var(--wp-admin-bg-alt); } .row-actions span.delete a, @@ -896,7 +944,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-status-error-dark); } abbr.required, @@ -915,7 +963,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-status-error-dark); border: none; } @@ -931,8 +979,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-border-light); + background: var(--wp-admin-bg-alt); display: flex; align-items: center; justify-content: space-between; @@ -1016,9 +1064,9 @@ th.action-links { padding: 0 10px; width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - border: 1px solid #c3c4c7; - background: #fff; - color: #50575e; + border: 1px solid var(--wp-admin-border-default); + background: var(--wp-admin-bg-card); + color: var(--wp-admin-text-tertiary); font-size: 13px; } @@ -1039,8 +1087,8 @@ th.action-links { top: -1px; padding: 4px 10px; border-radius: 30px; - background: #646970; - color: #fff; + background: var(--wp-admin-text-secondary); + color: var(--wp-admin-text-inverse); font-size: 14px; font-weight: 600; } @@ -1071,15 +1119,15 @@ 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-bg-card); + color: var(--wp-admin-text-secondary); cursor: pointer; } .filter-links .current { box-shadow: none; border-bottom: 4px solid var(--wp-admin-theme-color); - color: #1d2327; + color: var(--wp-admin-text-primary); } .filter-links li > a:hover, @@ -1144,7 +1192,7 @@ th.action-links { padding: 0 10px 0 6px; border-color: transparent; background-color: transparent; - color: #646970; + color: var(--wp-admin-text-secondary); vertical-align: baseline; box-shadow: none; } @@ -1153,7 +1201,7 @@ th.action-links { content: "\f111"; content: "\f111" / ''; margin: 0 5px 0 0; - color: #646970; + color: var(--wp-admin-text-secondary); font: normal 16px/1 dashicons; vertical-align: text-bottom; -webkit-font-smoothing: antialiased; @@ -1184,7 +1232,7 @@ th.action-links { } .wp-filter .drawer-toggle.current:before { - color: #fff; + color: var(--wp-admin-text-inverse); } .filter-drawer, @@ -1192,8 +1240,8 @@ th.action-links { display: none; margin: 0 -10px 0 -20px; padding: 20px; - border-top: 1px solid #f0f0f1; - background: #f6f7f7; + border-top: 1px solid var(--wp-admin-bg-page); + background: var(--wp-admin-bg-alt); overflow: hidden; } @@ -1219,8 +1267,8 @@ th.action-links { .show-filters .wp-filter .button.drawer-toggle { border-radius: 2px; - background: #646970; - color: #fff; + background: var(--wp-admin-text-secondary); + color: var(--wp-admin-text-inverse); } .show-filters .wp-filter .drawer-toggle:hover, @@ -1229,7 +1277,7 @@ th.action-links { } .show-filters .wp-filter .drawer-toggle:before { - color: #fff; + color: var(--wp-admin-text-inverse); } .filter-group { @@ -1239,8 +1287,8 @@ th.action-links { margin: 0 1% 0 0; padding: 20px 10px 10px; width: 24%; - background: #fff; - border: 1px solid #dcdcde; + background: var(--wp-admin-bg-card); + border: 1px solid var(--wp-admin-border-light); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } @@ -1324,9 +1372,9 @@ th.action-links { .filtered-by .tag { padding: 4px 8px; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - background: #fff; + background: var(--wp-admin-bg-card); font-size: 11px; } @@ -1379,7 +1427,7 @@ th.action-links { @media only screen and (max-width: 1120px) { .filter-drawer { - border-bottom: 1px solid #f0f0f1; + border-bottom: 1px solid var(--wp-admin-bg-page); } .filter-group { @@ -1441,9 +1489,9 @@ th.action-links { .notice, div.updated, div.error { - background: #fff; + background: var(--wp-admin-bg-card); border: none; - border-left: 4px solid #c3c4c7; + border-left: 4px solid var(--wp-admin-border-default); box-shadow: none; margin: 5px 15px 2px; padding: 8px 12px; @@ -1496,7 +1544,7 @@ div.updated a:focus { .notice-title { display: inline-block; - color: #1d2327; + color: var(--wp-admin-text-primary); font-size: 18px; } @@ -1541,46 +1589,46 @@ div.updated a:focus { .notice-success, div.updated { - border-left-color: #4ab866; - background-color: #eff9f1; + border-left-color: var(--wp-admin-status-success-border); + background-color: var(--wp-admin-status-success-bg); } .notice-success.notice-alt, div.updated.notice-alt { - background-color: #eff9f1; + background-color: var(--wp-admin-status-success-bg); } .notice-warning { - border-left-color: #f0b849; - background-color: #fef8ee; + border-left-color: var(--wp-admin-status-warning-border); + background-color: var(--wp-admin-status-warning-bg); } .notice-warning.notice-alt { - background-color: #fef8ee; + background-color: var(--wp-admin-status-warning-bg); } .notice-error, div.error { - border-left-color: #cc1818; - background-color: #fcf0f0; + border-left-color: var(--wp-admin-status-error-border); + background-color: var(--wp-admin-status-error-bg); } .notice-error.notice-alt, div.error.notice-alt { - background-color: #fcf0f0; + background-color: var(--wp-admin-status-error-bg); } .notice-info { border-left-color: #3858e9; - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .notice-info.notice-alt { - background-color: #fff; + background-color: var(--wp-admin-bg-card); } #plugin-information-footer .update-now:not(.button-disabled):before { - color: #d63638; + color: var(--wp-admin-status-error); content: "\f463"; content: "\f463" / ''; display: inline-block; @@ -1643,7 +1691,7 @@ div.error.notice-alt { .button.updating-message:before, .button.installing:before, .button.activating-message:before { - color: #d63638; + color: var(--wp-admin-status-error); content: "\f463"; content: "\f463" / ''; } @@ -1687,7 +1735,7 @@ div.error.notice-alt { /* Error icon. */ .update-message.notice-error p:before { - color: #d63638; + color: var(--wp-admin-status-error); content: "\f534"; content: "\f534" / ''; } @@ -1800,7 +1848,7 @@ p.auto-update-status { .button-primary.updating-message:before, .button-primary.activating-message:before { - color: #fff; + color: var(--wp-admin-text-inverse); } .button-primary.updated-message:before, @@ -1852,8 +1900,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-bg-card); + border: 1px solid var(--wp-admin-border-default); border-top: none; box-shadow: 0 0 0 transparent; } @@ -1870,14 +1918,14 @@ p.auto-update-status { } #screen-meta-links .show-settings { - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); border-top: none; height: auto; margin-bottom: 0; padding: 0 6px 0 16px; - background: #fff; + background: var(--wp-admin-bg-card); border-radius: 0 0 4px 4px; - color: #646970; + color: var(--wp-admin-text-secondary); box-shadow: 0 0 0 transparent; transition: box-shadow 0.1s linear; } @@ -1885,7 +1933,7 @@ 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-border-emphasis); } #screen-meta-links .show-settings:focus { @@ -2015,7 +2063,7 @@ p.auto-update-status { bottom: 0; left: 150px; right: 170px; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); border-top: none; border-bottom: none; background: rgba(var(--wp-admin-theme-color--rgb), 0.08); @@ -2056,7 +2104,7 @@ p.auto-update-status { } .contextual-help-tabs a:hover { - color: #2c3338; + color: var(--wp-admin-border-emphasis); } .contextual-help-tabs .active { @@ -2068,8 +2116,8 @@ p.auto-update-status { } .contextual-help-tabs .active a { - border-color: #c3c4c7; - color: #2c3338; + border-color: var(--wp-admin-border-default); + color: var(--wp-admin-border-emphasis); } .contextual-help-tabs-wrap { @@ -2111,7 +2159,7 @@ html.wp-toolbar { .widefat th, .widefat td { - color: #50575e; + color: var(--wp-admin-text-tertiary); } .widefat th, @@ -2124,7 +2172,7 @@ html.wp-toolbar { .widefat thead tr td, .widefat tfoot tr th, .widefat tfoot tr td { - color: #2c3338; + color: var(--wp-admin-border-emphasis); } .widefat td p { @@ -2134,7 +2182,7 @@ html.wp-toolbar { .widefat p, .widefat ol, .widefat ul { - color: #2c3338; + color: var(--wp-admin-border-emphasis); } .widefat .column-comment p { @@ -2210,7 +2258,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-border-default); } .postbox-header .hndle { @@ -2240,7 +2288,7 @@ html.wp-toolbar { .postbox .handle-order-higher, .postbox .handle-order-lower { - color: #646970; + color: var(--wp-admin-text-secondary); width: 1.62rem; } @@ -2249,17 +2297,17 @@ html.wp-toolbar { .edit-post-meta-boxes-area .postbox .handle-order-lower { width: 44px; height: 44px; - color: #1d2327 + color: var(--wp-admin-text-primary) } .postbox .handle-order-higher[aria-disabled="true"], .postbox .handle-order-lower[aria-disabled="true"] { cursor: default; - color: #a7aaad; + color: var(--wp-admin-text-placeholder); } .sortable-placeholder:not(.empty-container .sortable-placeholder) { - border: 1px dashed #c3c4c7; + border: 1px dashed var(--wp-admin-border-default); border-radius: 8px; margin-bottom: 20px; } @@ -2319,7 +2367,7 @@ html.wp-toolbar { } .temp-border { - border: 1px dotted #c3c4c7; + border: 1px dotted var(--wp-admin-border-default); } .columns-prefs label { @@ -2354,7 +2402,7 @@ html.wp-toolbar { left: 0; right: 0; padding: 10px 20px; - color: #50575e; + color: var(--wp-admin-text-tertiary); } #wpfooter p { @@ -2373,15 +2421,15 @@ html.wp-toolbar { .nav-tab { float: left; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); 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-border-light); + color: var(--wp-admin-text-tertiary); text-decoration: none; white-space: nowrap; } @@ -2395,8 +2443,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-bg-card); + color: var(--wp-admin-text-body); } .nav-tab-active, @@ -2406,22 +2454,22 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */ .nav-tab-active { margin-bottom: -1px; - color: #3c434a; + color: var(--wp-admin-text-body); } .nav-tab-active, .nav-tab-active:hover, .nav-tab-active:focus, .nav-tab-active:focus:active { - border-bottom: 1px solid #f0f0f1; - background: #f0f0f1; + border-bottom: 1px solid var(--wp-admin-bg-page); + background: var(--wp-admin-bg-page); color: #000; } 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-border-default); margin: 0; padding-top: 9px; padding-bottom: 0; @@ -2495,7 +2543,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ .accordion-section-title button.accordion-trigger, .nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger { background: inherit; - color: #1d2327; + color: var(--wp-admin-text-primary); display: block; position: relative; text-align: left; @@ -2526,7 +2574,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ .accordion-section-title:hover span.dashicons.dashicons-arrow-down, .nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down { - color: #1d2327; + color: var(--wp-admin-text-primary); } .accordion-section-title span.dashicons.dashicons-arrow-down::before, @@ -2557,7 +2605,7 @@ table .column-rating { .attention, .error-message { - color: #d63638; + color: var(--wp-admin-status-error); font-weight: 600; } @@ -2583,7 +2631,7 @@ body.iframe { } .media-icon img { - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); border: 1px solid rgba(0, 0, 0, 0.07); } @@ -2626,7 +2674,7 @@ body.iframe { .importer-action { line-height: 1.55; /* Same as with .updating-message */ - color: #50575e; + color: var(--wp-admin-text-tertiary); margin-bottom: 1em; } @@ -2636,8 +2684,8 @@ body.iframe { } .edit-comment-author { - color: #1d2327; - border-bottom: 1px solid #f0f0f1; + color: var(--wp-admin-text-primary); + border-bottom: 1px solid var(--wp-admin-bg-page); } #namediv h3 label, /* Back-compat for pre-4.4 */ @@ -2733,7 +2781,7 @@ div.star-holder .star-rating { vertical-align: top; transition: color .1s ease-in; text-align: center; - color: #dba617; + color: var(--wp-admin-status-warning); } .star-rating .star-full:before { @@ -2762,7 +2810,7 @@ div.action-links { /* Plugin install thickbox */ #plugin-information { - background: #fff; + background: var(--wp-admin-bg-card); position: fixed; top: 0; right: 0; @@ -2780,7 +2828,7 @@ div.action-links { #plugin-information-title { padding: 0 26px; - background: #f6f7f7; + background: var(--wp-admin-bg-alt); font-size: 22px; font-weight: 600; line-height: 2.4; @@ -2814,7 +2862,7 @@ div.action-links { max-width: 100%; padding: 0 15px; margin-top: 174px; - color: #fff; + color: var(--wp-admin-text-inverse); 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); @@ -2844,8 +2892,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-border-light); + background: var(--wp-admin-bg-alt); } #plugin-information-tabs a { @@ -2862,11 +2910,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-bg-card); + border: 1px solid var(--wp-admin-border-light); + border-bottom-color: var(--wp-admin-text-inverse); padding-top: 8px; - color: #2c3338; + color: var(--wp-admin-border-emphasis); } #plugin-information-tabs.with-banner a.current { @@ -2881,7 +2929,7 @@ div.action-links { #plugin-information-content { overflow: hidden; /* equal height column trick */ - background: #fff; + background: var(--wp-admin-bg-card); position: relative; top: 0; right: 0; @@ -2924,20 +2972,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-border-light); + background: var(--wp-admin-bg-alt); + color: var(--wp-admin-text-secondary); } #plugin-information .fyi strong { - color: #3c434a; + color: var(--wp-admin-text-body); } #plugin-information .fyi h3 { font-weight: 600; text-transform: uppercase; font-size: 12px; - color: #646970; + color: var(--wp-admin-text-secondary); margin: 24px 0 8px; } @@ -2974,7 +3022,7 @@ div.action-links { #plugin-information .counter-back { height: 17px; width: 92px; - background-color: #dcdcde; + background-color: var(--wp-admin-border-light); float: left; } @@ -3016,8 +3064,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-border-light); + background: var(--wp-admin-bg-alt); } /* rtl:ignore */ @@ -3061,12 +3109,12 @@ div.action-links { #plugin-information pre { padding: 7px; overflow: auto; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); } #plugin-information blockquote { - border-left: 2px solid #dcdcde; - color: #646970; + border-left: 2px solid var(--wp-admin-border-light); + color: var(--wp-admin-text-secondary); font-style: italic; margin: 1em 0; padding: 0 0 0 1em; @@ -3077,7 +3125,7 @@ div.action-links { overflow: hidden; /* clearfix */ width: 100%; margin-bottom: 20px; - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); } #plugin-information .review-title-section { @@ -3158,7 +3206,7 @@ div.action-links { #plugin-information .fyi { float: none; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); position: static; width: auto; margin: 26px 26px 0; @@ -3184,7 +3232,7 @@ div.action-links { /* Thickbox for the Plugin details modal. */ #TB_window.plugin-details-modal { - background: #fff; + background: var(--wp-admin-bg-card); } #TB_window.plugin-details-modal.thickbox-loading:before { @@ -3197,7 +3245,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-bg-card) url(../images/spinner.gif) no-repeat center; background-size: 20px 20px; transform: translateZ(0); } @@ -3222,7 +3270,7 @@ div.action-links { .plugin-details-modal #TB_closeWindowButton { left: auto; right: -30px; - color: #f0f0f1; + color: var(--wp-admin-bg-page); } .plugin-details-modal #TB_closeWindowButton:hover, @@ -3358,7 +3406,7 @@ img { #template textarea { font-family: Consolas, Monaco, monospace; font-size: 13px; - background: #f6f7f7; + background: var(--wp-admin-bg-alt); tab-size: 4; } @@ -3367,7 +3415,7 @@ img { width: 100%; min-height: 60vh; height: calc( 100vh - 295px ); - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); box-sizing: border-box; } @@ -3389,8 +3437,8 @@ img { padding: 0; min-height: 60vh; height: calc(100vh - 295px); - background-color: #f6f7f7; - border: 1px solid #dcdcde; + background-color: var(--wp-admin-bg-alt); + border: 1px solid var(--wp-admin-border-light); border-left: none; } #templateside ul ul { @@ -3448,7 +3496,7 @@ img { [role="treeitem"].hover, [role="treeitem"] .folder-label.hover { - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); } .tree-folder { @@ -3465,7 +3513,7 @@ img { display: block; position: absolute; left: 2px; - border-left: 1px solid #c3c4c7; + border-left: 1px solid var(--wp-admin-border-default); top: -13px; bottom: 10px; } @@ -3473,18 +3521,18 @@ img { content: ""; position: absolute; display: block; - border-left: 1px solid #c3c4c7; + border-left: 1px solid var(--wp-admin-border-default); left: 2px; top: -5px; height: 18px; width: 7px; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin-border-default); } .tree-folder > li::after { content: ""; position: absolute; display: block; - border-left: 1px solid #c3c4c7; + border-left: 1px solid var(--wp-admin-border-default); left: 2px; bottom: -7px; top: 0; @@ -3609,7 +3657,7 @@ img { } .nonessential { - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 11px; font-style: italic; padding-left: 12px; @@ -3656,11 +3704,11 @@ img { .postbox .handlediv.button-link, .item-edit, .toggle-indicator { - color: #646970; + color: var(--wp-admin-text-secondary); } .widget-action { - color: #50575e; /* #fafafa background in the Widgets screen */ + color: var(--wp-admin-text-tertiary); /* #fafafa background in the Widgets screen */ } .widget-top:hover .widget-action, @@ -3672,7 +3720,7 @@ img { .item-edit:hover, .item-edit:focus, .sidebar-name:hover .toggle-indicator { - color: #1d2327; + color: var(--wp-admin-text-primary); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -3706,7 +3754,7 @@ img { /* Accordion */ .accordion-section { - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); margin: 0; } @@ -3716,21 +3764,21 @@ img { } .accordion-section.open:hover { - border-bottom-color: #dcdcde; + border-bottom-color: var(--wp-admin-border-light); } .accordion-section-content { display: none; padding: 10px 20px 15px; overflow: hidden; - background: #fff; + background: var(--wp-admin-bg-card); } .accordion-section-title { margin: 0; position: relative; - border-left: 1px solid #dcdcde; - border-right: 1px solid #dcdcde; + border-left: 1px solid var(--wp-admin-border-light); + border-right: 1px solid var(--wp-admin-border-light); -webkit-user-select: none; user-select: none; } @@ -3753,7 +3801,7 @@ img { .accordion-section-title:hover:after, .accordion-section-title:focus:after { - border-color: #a7aaad transparent; + border-color: var(--wp-admin-text-placeholder) transparent; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } @@ -3772,7 +3820,7 @@ img { border-right: none; padding: 10px 10px 11px 14px; line-height: 1.55; - background: #fff; + background: var(--wp-admin-bg-card); } .control-section .accordion-section-title:after, @@ -3784,13 +3832,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-text-primary); + background: var(--wp-admin-bg-alt); } .control-section.open .accordion-section-title { /* When expanded */ - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); } /* Edit Site */ @@ -3820,7 +3868,7 @@ img { @media only screen and (min-width: 600px) { .my-sites.striped li { - background-color: #fff; + background-color: var(--wp-admin-bg-card); position: relative; } .my-sites.striped li:after { @@ -3830,7 +3878,7 @@ img { position: absolute; top: 0; right: 0; - background: #c3c4c7; + background: var(--wp-admin-border-default); } } @@ -3840,7 +3888,7 @@ img { width: 44%; } .my-sites.striped li { - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .my-sites.striped li:nth-of-type(2n+1) { clear: left; @@ -3850,7 +3898,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-bg-alt); } } @@ -3859,7 +3907,7 @@ img { .my-sites li { float: left; width: 27.333333%; - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .my-sites.striped li:nth-of-type(3n+3):after { content: none; @@ -3867,7 +3915,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-bg-alt); } } @@ -3876,7 +3924,7 @@ img { float: left; width: 21%; padding: 8px 2%; - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .my-sites.striped li:nth-of-type(4n+1) { clear: left; @@ -3888,7 +3936,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-bg-alt); } } @@ -3897,7 +3945,7 @@ img { float: left; width: 16%; padding: 8px 2%; - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .my-sites.striped li:nth-of-type(5n+1) { clear: left; @@ -3910,7 +3958,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-bg-alt); } } @@ -3919,7 +3967,7 @@ img { float: left; width: 12.666666%; padding: 8px 2%; - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .my-sites.striped li:nth-of-type(6n+1) { clear: left; @@ -3933,7 +3981,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-bg-alt); } } @@ -4111,7 +4159,7 @@ img { } #templateside > ul { - border-left: 1px solid #dcdcde; + border-left: 1px solid var(--wp-admin-border-light); } #templateside li { @@ -4325,13 +4373,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-border-default); } .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-border-default); } .wp-filter .search-form.search-plugins label { diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 3dfdfea790fb3..fbb221b3143b4 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -33,7 +33,7 @@ body { width: auto; padding: 25px; position: relative; - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); line-height: 1.5; overflow-y: auto; @@ -65,7 +65,7 @@ body { } #customize-controls .description { - color: #50575e; + color: var(--wp-admin-text-tertiary); } #customize-save-button-wrapper { @@ -98,10 +98,10 @@ body:not(.ready) #customize-save-button-wrapper .save { width: 100%; margin: 0; z-index: -1; - background: #f0f0f1; + background: var(--wp-admin-bg-page); transition: left .18s; - border-right: 1px solid #dcdcde; - border-left: 1px solid #dcdcde; + border-right: 1px solid var(--wp-admin-border-light); + border-left: 1px solid var(--wp-admin-border-light); height: 100%; } @@ -191,7 +191,7 @@ body.trashing #publish-settings { } #customize-header-actions { - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); } #customize-controls .wp-full-overlay-sidebar-content { @@ -200,19 +200,19 @@ body.trashing #publish-settings { } .outer-section-open #customize-controls .wp-full-overlay-sidebar-content { - background: #f0f0f1; + background: var(--wp-admin-bg-page); } #customize-controls .customize-info { border: none; - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); margin-bottom: 15px; } #customize-control-changeset_status .customize-inside-control-row, #customize-control-changeset_preview_link input { - background-color: #fff; - border-bottom: 1px solid #dcdcde; + background-color: var(--wp-admin-bg-card); + border-bottom: 1px solid var(--wp-admin-border-light); box-sizing: content-box; width: 100%; margin-left: -12px; @@ -239,7 +239,7 @@ body.trashing #publish-settings { } #customize-controls .date-input:invalid { - border-color: #d63638; + border-color: var(--wp-admin-status-error); } #customize-control-changeset_status .customize-inside-control-row { @@ -249,7 +249,7 @@ body.trashing #publish-settings { } #customize-control-changeset_status .customize-inside-control-row:first-of-type { - border-top: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); } #customize-control-changeset_status .customize-control-title { @@ -271,7 +271,7 @@ body.trashing #publish-settings { top: 50%; transform: translateY(-50%) !important; right: 0; - background: #fff !important; + background: var(--wp-admin-bg-card) !important; } .preview-link-wrapper { @@ -283,7 +283,7 @@ body.trashing #publish-settings { content: ""; height: 40px; position: absolute; - background: #fff; + background: var(--wp-admin-bg-card); top: 0; } @@ -301,11 +301,11 @@ body.trashing #publish-settings { #customize-control-changeset_preview_link input { line-height: 2.85714286; /* 40px */ - border-top: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); border-left: none; border-right: none; text-indent: -999px; - color: #fff; + color: var(--wp-admin-text-inverse); /* Only necessary for IE11 */ min-height: 40px; } @@ -395,8 +395,8 @@ body.trashing #publish-settings { width: 100%; margin-left: -12px; padding: 12px; - background: #fff; - border-bottom: 1px solid #dcdcde; + background: var(--wp-admin-bg-card); + border-bottom: 1px solid var(--wp-admin-border-light); margin-bottom: 0; } @@ -428,8 +428,8 @@ body.trashing #publish-settings { } #customize-controls .customize-info .accordion-section-title { - background: #fff; - color: #50575e; + background: var(--wp-admin-bg-card); + color: var(--wp-admin-text-tertiary); border-left: none; border-right: none; border-bottom: none; @@ -440,7 +440,7 @@ body.trashing #publish-settings { #customize-controls .customize-info.open .accordion-section-title:after, #customize-controls .customize-info .accordion-section-title:hover:after, #customize-controls .customize-info .accordion-section-title:focus:after { - color: #2c3338; + color: var(--wp-admin-border-emphasis); } #customize-controls .customize-info .accordion-section-title:after { @@ -452,7 +452,7 @@ body.trashing #publish-settings { line-height: 1.9; margin: 0; font-weight: 400; - color: #50575e; + color: var(--wp-admin-text-tertiary); } #customize-controls .customize-pane-child .customize-section-title h3, @@ -485,7 +485,7 @@ body.trashing #publish-settings { cursor: pointer; box-shadow: none; background: transparent; - color: #50575e; + color: var(--wp-admin-text-tertiary); border: none; } @@ -499,11 +499,11 @@ body.trashing #publish-settings { #customize-controls .customize-info .customize-section-description, #customize-outer-theme-controls .customize-info .customize-section-description, #customize-controls .no-widget-areas-rendered-notice { - color: #50575e; + color: var(--wp-admin-text-tertiary); display: none; - background: #fff; + background: var(--wp-admin-bg-card); padding: 12px 15px; - border-top: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); } #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice { @@ -544,10 +544,10 @@ body.trashing #publish-settings { #customize-theme-controls .accordion-section-title, #customize-outer-theme-controls .accordion-section-title { - color: #50575e; - background-color: #fff; - border-bottom: 1px solid #dcdcde; - border-left: 4px solid #fff; + color: var(--wp-admin-text-tertiary); + background-color: var(--wp-admin-bg-card); + border-bottom: 1px solid var(--wp-admin-border-light); + border-left: 4px solid var(--wp-admin-bg-card); transition: .15s color ease-in-out, .15s background-color ease-in-out, @@ -584,54 +584,54 @@ body.trashing #publish-settings { } #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title { - color: #50575e; - background-color: #fff; - border-left: 4px solid #fff; + color: var(--wp-admin-text-tertiary); + background-color: var(--wp-admin-bg-card); + border-left: 4px solid var(--wp-admin-bg-card); } #customize-theme-controls .accordion-section-title:after, #customize-outer-theme-controls .accordion-section-title:after { content: "\f345"; content: "\f345" / ''; - color: #a7aaad; + color: var(--wp-admin-text-placeholder); pointer-events: none; } #customize-theme-controls .accordion-section-content, #customize-outer-theme-controls .accordion-section-content { - color: #50575e; + color: var(--wp-admin-text-tertiary); background: transparent; } #accordion-section-themes + .control-section { - border-top: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); } .js .control-section:hover .accordion-section-title, .js .control-section .accordion-section-title:hover, .js .control-section.open .accordion-section-title, .js .control-section .accordion-section-title:focus { - background: #f6f7f7; + background: var(--wp-admin-bg-alt); } #customize-theme-controls .control-section.open { - border-bottom: 1px solid #f0f0f1; + border-bottom: 1px solid var(--wp-admin-bg-page); } #customize-theme-controls .control-section.open .accordion-section-title, #customize-outer-theme-controls .control-section.open .accordion-section-title { - border-bottom-color: #f0f0f1 !important; + border-bottom-color: var(--wp-admin-bg-page) !important; } #customize-theme-controls .control-section:last-of-type.open, #customize-theme-controls .control-section:last-of-type > .accordion-section-title { - border-bottom-color: #dcdcde; + border-bottom-color: var(--wp-admin-border-light); } #customize-theme-controls .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2), #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu, #customize-theme-controls .control-section-nav_menu_locations .accordion-section-title { - border-top: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); } #customize-theme-controls .control-panel-nav_menus .control-section-nav_menu + .control-section-nav_menu { @@ -753,8 +753,8 @@ body.trashing #publish-settings { .customize-section-title { margin: -12px -12px 0; - border-bottom: 1px solid #dcdcde; - background: #fff; + border-bottom: 1px solid var(--wp-admin-border-light); + background: var(--wp-admin-bg-card); } div.customize-section-description { @@ -774,7 +774,7 @@ div.customize-section-description p:last-child { } #customize-theme-controls .customize-themes-panel h3.customize-section-title:first-child { - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); padding: 12px; } @@ -787,7 +787,7 @@ h3.customize-section-title { padding: 10px 10px 12px 14px; margin: 0; line-height: 21px; - color: #50575e; + color: var(--wp-admin-text-tertiary); } .accordion-sub-container.control-panel-content { @@ -813,11 +813,11 @@ h3.customize-section-title { width: 45px; height: 41px; padding: 0 2px 0 0; - background: #f0f0f1; + background: var(--wp-admin-bg-page); border: none; - border-top: 4px solid #f0f0f1; - border-right: 1px solid #dcdcde; - color: #3c434a; + border-top: 4px solid var(--wp-admin-bg-page); + border-right: 1px solid var(--wp-admin-border-light); + color: var(--wp-admin-text-body); text-align: left; cursor: pointer; box-sizing: content-box; @@ -840,10 +840,10 @@ h3.customize-section-title { height: 71px; padding: 0 24px 0 0; margin: 0; - background: #fff; + background: var(--wp-admin-bg-card); border: none; - border-right: 1px solid #dcdcde; - border-left: 4px solid #fff; + border-right: 1px solid var(--wp-admin-border-light); + border-left: 4px solid var(--wp-admin-bg-card); box-shadow: none; cursor: pointer; transition: @@ -871,16 +871,16 @@ h3.customize-section-title { #customize-controls .panel-meta.customize-info .accordion-section-title:hover, #customize-controls .cannot-expand:hover .accordion-section-title { - background: #fff; - color: #50575e; - border-left-color: #fff; + background: var(--wp-admin-bg-card); + color: var(--wp-admin-text-tertiary); + border-left-color: var(--wp-admin-text-inverse); } .customize-controls-close:focus, .customize-controls-close:hover, .customize-controls-preview-toggle:focus, .customize-controls-preview-toggle:hover { - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: none; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; @@ -896,7 +896,7 @@ h3.customize-section-title { .customize-panel-back:focus, .customize-section-back:hover, .customize-section-back:focus { - background: #f6f7f7; + background: var(--wp-admin-bg-alt); box-shadow: none; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; @@ -922,7 +922,7 @@ h3.customize-section-title { } .wp-full-overlay-sidebar .wp-full-overlay-header { - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); transition: padding ease-in-out .18s; } @@ -1099,7 +1099,7 @@ p.customize-section-description { position: absolute; bottom: 0; z-index: 10; - background: #f0f0f1; + background: var(--wp-admin-bg-page); } .customize-control-dropdown-pages .new-content-item-wrapper { @@ -1156,7 +1156,7 @@ p.customize-section-description { } .customize-control-dropdown-pages .new-content-item .create-item-input.invalid { - border: 1px solid #d63638; + border: 1px solid var(--wp-admin-status-error); } .customize-control-dropdown-pages .add-new-toggle { @@ -1175,8 +1175,8 @@ p.customize-section-description { } .wp-full-overlay-sidebar { - background: #f0f0f1; - border-right: 1px solid #dcdcde; + background: var(--wp-admin-bg-page); + border-right: 1px solid var(--wp-admin-border-light); } @@ -1192,7 +1192,7 @@ p.customize-section-description { #customize-controls .customize-control-widget_form.has-error .widget .widget-top, .customize-control-nav_menu_item.has-error .menu-item-bar .menu-item-handle { - box-shadow: inset 0 0 0 2px #d63638; + box-shadow: inset 0 0 0 2px var(--wp-admin-status-error); transition: .15s box-shadow linear; } @@ -1219,14 +1219,14 @@ p.customize-section-description { } .customize-control-text.has-error input { - outline: 2px solid #d63638; + outline: 2px solid var(--wp-admin-status-error); } #customize-controls #customize-notifications-area { position: absolute; top: 46px; width: 100%; - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); display: block; padding: 0; margin: 0; @@ -1254,7 +1254,7 @@ p.customize-section-description { } #customize-controls .panel-meta > .customize-control-notifications-container, #customize-controls .customize-section-title > .customize-control-notifications-container { - border-top: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); } #customize-controls #customize-notifications-area .notice, #customize-controls .panel-meta > .customize-control-notifications-container .notice, @@ -1291,7 +1291,7 @@ p.customize-section-description { /* Note: Styles for this are also defined in themes.css */ #customize-controls #customize-notifications-area .notice.notification-overlay .notification-message { clear: both; - color: #1d2327; + color: var(--wp-admin-text-primary); font-size: 18px; font-style: normal; margin: 0; @@ -1335,7 +1335,7 @@ p.customize-section-description { line-height: 16px; margin-right: 16px; padding: 4px 5px; - border: 2px solid #f0f0f1; + border: 2px solid var(--wp-admin-bg-page); -webkit-user-select: none; user-select: none; } @@ -1347,7 +1347,7 @@ p.customize-section-description { bottom: 0; right: 0; width: 20px; - background: #f0f0f1; + background: var(--wp-admin-bg-page); } .customize-control .dropdown-arrow:after { @@ -1362,12 +1362,12 @@ p.customize-section-description { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; - color: #2c3338; + color: var(--wp-admin-border-emphasis); } .customize-control .dropdown-status { - color: #2c3338; - background: #f0f0f1; + color: var(--wp-admin-border-emphasis); + background: var(--wp-admin-bg-page); display: none; max-width: 112px; } @@ -1378,7 +1378,7 @@ p.customize-section-description { } .customize-control-color .dropdown .dropdown-content { - background-color: #50575e; + background-color: var(--wp-admin-text-tertiary); border: 1px solid rgba(0, 0, 0, 0.15); } @@ -1461,7 +1461,7 @@ p.customize-section-description { position: relative; text-align: center; cursor: default; - border: 1px dashed #c3c4c7; + border: 1px dashed var(--wp-admin-border-default); box-sizing: border-box; padding: 9px 0; line-height: 1.6; @@ -1469,16 +1469,16 @@ p.customize-section-description { .customize-control .attachment-media-view .button-add-media { cursor: pointer; - background-color: #f0f0f1; - color: #2c3338; + background-color: var(--wp-admin-bg-page); + color: var(--wp-admin-border-emphasis); } .customize-control .attachment-media-view .button-add-media:hover { - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .customize-control .attachment-media-view .button-add-media:focus { - background-color: #fff; + background-color: var(--wp-admin-bg-card); border-color: #3582c4; border-style: solid; box-shadow: 0 0 0 1px #3582c4; @@ -1490,7 +1490,7 @@ p.customize-section-description { display: none; position: absolute; width: 100%; - color: #50575e; + color: var(--wp-admin-text-tertiary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -1534,7 +1534,7 @@ p.customize-section-description { left: 0; bottom: 0; right: 0; - border: 4px solid #72aee6; + border: 4px solid var(--wp-admin-status-info); border-radius: 2px; } @@ -1546,8 +1546,8 @@ p.customize-section-description { .customize-control-header .uploaded .header-view .close { font-size: 20px; - color: #fff; - background: #50575e; + color: var(--wp-admin-text-inverse); + background: var(--wp-admin-text-tertiary); background: rgba(0, 0, 0, 0.5); position: absolute; top: 10px; @@ -1744,10 +1744,10 @@ p.customize-section-description { #customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */ #customize-theme-controls .control-panel-themes > .accordion-section-title { cursor: default; - background: #fff; - color: #50575e; - border-top: 1px solid #dcdcde; - border-bottom: 1px solid #dcdcde; + background: var(--wp-admin-bg-card); + color: var(--wp-admin-text-tertiary); + border-top: 1px solid var(--wp-admin-border-light); + border-bottom: 1px solid var(--wp-admin-border-light); border-left: none; border-right: none; margin: 0 0 15px; @@ -1811,7 +1811,7 @@ p.customize-section-description { overflow-y: scroll; width: calc(100% - 300px); height: calc(100% - 96px); - background: #f0f0f1; + background: var(--wp-admin-bg-page); z-index: 20; } @@ -1854,7 +1854,7 @@ p.customize-section-description { } .wp-full-overlay.in-themes-panel { - background: #f0f0f1; /* Prevents a black flash when fading in the panel */ + background: var(--wp-admin-bg-page); /* Prevents a black flash when fading in the panel */ } .in-themes-panel #customize-save-button-wrapper, @@ -1893,8 +1893,8 @@ p.customize-section-description { } .themes-filter-bar .feature-filter-toggle.open { - background: #f0f0f1; - border-color: #8c8f94; + background: var(--wp-admin-bg-page); + border-color: var(--wp-admin-border-subtle); box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); } @@ -1911,8 +1911,8 @@ p.customize-section-description { padding: 25px 0 25px 25px; border-top: 0; margin: 0; - background: #f0f0f1; - border-bottom: 1px solid #dcdcde; + background: var(--wp-admin-bg-page); + border-bottom: 1px solid var(--wp-admin-border-light); } .filter-drawer .filter-group { @@ -1945,7 +1945,7 @@ p.customize-section-description { .control-panel-themes .filter-themes-count .themes-displayed { font-weight: 600; - color: #50575e; + color: var(--wp-admin-text-tertiary); } .customize-themes-notifications { @@ -1969,18 +1969,18 @@ p.customize-section-description { padding: 0 0 8px 15px; margin: 15px 0 0; line-height: 16px; - border-bottom: 1px solid #dcdcde; - color: #50575e; + border-bottom: 1px solid var(--wp-admin-border-light); + color: var(--wp-admin-text-tertiary); } .control-panel-themes .customize-themes-section-title { width: 100%; - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: none; outline: none; border-top: none; - border-bottom: 1px solid #dcdcde; - border-left: 4px solid #fff; + border-bottom: 1px solid var(--wp-admin-border-light); + border-left: 4px solid var(--wp-admin-bg-card); border-right: none; cursor: pointer; padding: 10px 15px; @@ -1988,12 +1988,12 @@ p.customize-section-description { text-align: left; font-size: 14px; font-weight: 600; - color: #50575e; + color: var(--wp-admin-text-tertiary); text-shadow: none; } .control-panel-themes #accordion-section-installed_themes { - border-top: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); } .control-panel-themes .theme-section { @@ -2003,7 +2003,7 @@ p.customize-section-description { .control-panel-themes .customize-themes-section-title:focus, .control-panel-themes .customize-themes-section-title:hover { - background: #f6f7f7; + background: var(--wp-admin-bg-alt); } .customize-themes-section-title:not(.selected):after { @@ -2015,8 +2015,8 @@ p.customize-section-description { width: 18px; height: 18px; border-radius: 100%; - border: 1px solid #c3c4c7; - background: #fff; + border: 1px solid var(--wp-admin-border-default); + background: var(--wp-admin-bg-card); } .control-panel-themes .theme-section .customize-themes-section-title.selected:after { @@ -2031,7 +2031,7 @@ p.customize-section-description { position: absolute; top: 9px; right: 15px; - color: #fff; + color: var(--wp-admin-text-inverse); } #customize-theme-controls .themes.accordion-section-content { @@ -2065,12 +2065,12 @@ p.customize-section-description { .customize-control-theme .theme { width: 100%; margin: 0; - border: 1px solid #dcdcde; - background: #fff; + border: 1px solid var(--wp-admin-border-light); + background: var(--wp-admin-bg-card); } .customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions { - background: #fff; + background: var(--wp-admin-bg-card); border: none; } @@ -2142,11 +2142,11 @@ p.customize-section-description { left: 300px; width: calc(100% - 300px); height: 46px; - background: #f0f0f1; + background: var(--wp-admin-bg-page); z-index: 10; padding: 6px 25px; box-sizing: border-box; - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); } .customize-preview-header.themes-filter-bar, .customize-preview-header.themes-filter-bar .search-form { @@ -2304,8 +2304,8 @@ p.customize-section-description { position: fixed; top: 0; left: 0; - background: #f0f0f1; - color: #3c434a; + background: var(--wp-admin-bg-page); + color: var(--wp-admin-text-body); border-radius: 0; box-shadow: none; border: none; @@ -2314,7 +2314,7 @@ p.customize-section-description { z-index: 10; text-align: left; text-shadow: none; - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); border-left: 4px solid transparent; margin: 0; padding: 0; @@ -2330,12 +2330,12 @@ p.customize-section-description { display: block; line-height: 2.3; padding: 0 8px; - border-right: 1px solid #dcdcde; + border-right: 1px solid var(--wp-admin-border-light); } .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover, .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus { - background: #f6f7f7; + background: var(--wp-admin-bg-alt); box-shadow: none; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; @@ -2403,8 +2403,8 @@ p.customize-section-description { .wp-customizer .theme-overlay .theme-actions { text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */ padding: 10px 25px 5px; - background: #f0f0f1; - border-top: 1px solid #dcdcde; + background: var(--wp-admin-bg-page); + border-top: 1px solid var(--wp-admin-border-light); } .wp-customizer .theme-overlay .theme-actions .theme-install.preview { @@ -2416,12 +2416,12 @@ p.customize-section-description { } .wp-customizer .theme-header { - background: #f0f0f1; + background: var(--wp-admin-bg-page); } .wp-customizer .theme-overlay .theme-header button, .wp-customizer .theme-overlay .theme-header .close:before { - color: #3c434a; + color: var(--wp-admin-text-body); } .wp-customizer .theme-overlay .theme-header .close:focus, @@ -2430,7 +2430,7 @@ p.customize-section-description { .wp-customizer .theme-overlay .theme-header .right:hover, .wp-customizer .theme-overlay .theme-header .left:focus, .wp-customizer .theme-overlay .theme-header .left:hover { - background: #fff; + background: var(--wp-admin-bg-card); } .wp-customizer .theme-overlay .theme-header .close:focus:before, @@ -2443,7 +2443,7 @@ p.customize-section-description { .wp-customizer .theme-overlay .theme-header button.disabled:focus { border-bottom: none; background: transparent; - color: #c3c4c7; + color: var(--wp-admin-border-default); } /* Small Screens */ @@ -2464,8 +2464,8 @@ p.customize-section-description { body.cheatin { font-size: medium; height: auto; - background: #fff; - border: 1px solid #c3c4c7; + background: var(--wp-admin-bg-card); + border: 1px solid var(--wp-admin-border-default); margin: 50px auto 2em; padding: 1em 2em; max-width: 700px; @@ -2474,9 +2474,9 @@ body.cheatin { } body.cheatin h1 { - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); clear: both; - color: #50575e; + color: var(--wp-admin-text-tertiary); font-size: 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; margin: 30px 0 0; @@ -2556,7 +2556,7 @@ body.cheatin p { display: block; width: 33px; /* was 42px for mobile */ height: 43px; - color: #8c8f94; + color: var(--wp-admin-border-subtle); text-indent: -9999px; cursor: pointer; outline: none; @@ -2589,8 +2589,8 @@ body.cheatin p { .widget-reorder-nav span:focus, .menu-item-reorder-nav button:hover, .menu-item-reorder-nav button:focus { - color: #1d2327; - background: #f0f0f1; + color: var(--wp-admin-text-primary); + background: var(--wp-admin-bg-page); } .move-widget-down:before, @@ -2611,8 +2611,8 @@ body.cheatin p { .move-down-disabled .menus-move-down, .move-right-disabled .menus-move-right, .move-left-disabled .menus-move-left { - color: #dcdcde; - background-color: #fff; + color: var(--wp-admin-border-light); + background-color: var(--wp-admin-bg-card); cursor: default; pointer-events: none; } @@ -2632,9 +2632,9 @@ body.adding-widget .add-new-widget:hover, .adding-menu-items .add-new-menu-item:hover, .add-menu-toggle.open, .add-menu-toggle.open:hover { - background: #f0f0f1; - border-color: #8c8f94; - color: #2c3338; + background: var(--wp-admin-bg-page); + border-color: var(--wp-admin-border-subtle); + color: var(--wp-admin-border-emphasis); box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); } @@ -2656,9 +2656,9 @@ body.adding-widget .add-new-widget:before, width: 300px; margin: 0; z-index: 4; - background: #f0f0f1; + background: var(--wp-admin-bg-page); transition: left .18s; - border-right: 1px solid #dcdcde; + border-right: 1px solid var(--wp-admin-border-light); } #available-widgets .accordion-section-title, @@ -2692,7 +2692,7 @@ body.adding-widget .add-new-widget:before, overflow: auto; bottom: 0; width: 100%; - border-top: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); } .no-widgets-found #available-widgets-list { @@ -2704,7 +2704,7 @@ body.adding-widget .add-new-widget:before, top: 0; z-index: 1; width: 300px; - background: #f0f0f1; + background: var(--wp-admin-bg-page); } /* search field container */ @@ -2737,7 +2737,7 @@ body.adding-widget .add-new-widget:before, height: 30px; line-height: 2.1; text-align: center; - color: #646970; + color: var(--wp-admin-text-secondary); } #available-widgets-filter .clear-results, @@ -2751,7 +2751,7 @@ body.adding-widget .add-new-widget:before, border: 0; cursor: pointer; background: none; - color: #d63638; + color: var(--wp-admin-status-error); text-decoration: none; outline: 0; } @@ -2781,7 +2781,7 @@ body.adding-widget .add-new-widget:before, #available-widgets-filter .clear-results:focus, #available-menu-items-search .clear-results:hover, #available-menu-items-search .clear-results:focus { - color: #d63638; + color: var(--wp-admin-status-error); } #available-widgets-filter .clear-results:focus, @@ -2807,7 +2807,7 @@ body.adding-widget .add-new-widget:before, top: 2px; left: 2px; z-index: 1; - color: #646970; + color: var(--wp-admin-text-secondary); height: 30px; width: 30px; line-height: 2; @@ -2838,9 +2838,9 @@ body.adding-widget .add-new-widget:before, #available-menu-items .item-tpl { position: relative; padding: 15px 15px 15px 60px; - background: #fff; - border-bottom: 1px solid #dcdcde; - border-left: 4px solid #fff; + background: var(--wp-admin-bg-card); + border-bottom: 1px solid var(--wp-admin-border-light); + border-left: 4px solid var(--wp-admin-bg-card); transition: .15s color ease-in-out, .15s background-color ease-in-out, @@ -2954,11 +2954,11 @@ body.adding-widget .add-new-widget:before, padding: 0 12px 4px; margin: 0; height: 45px; - background: #f0f0f1; + background: var(--wp-admin-bg-page); border: 0; - border-right: 1px solid #dcdcde; - border-top: 4px solid #f0f0f1; - color: #50575e; + border-right: 1px solid var(--wp-admin-border-light); + border-top: 4px solid var(--wp-admin-bg-page); + color: var(--wp-admin-text-tertiary); cursor: pointer; transition: color .1s ease-in-out, background .1s ease-in-out; } @@ -3049,7 +3049,7 @@ body.adding-widget .add-new-widget:before, padding: 9px 10px 12px 14px; margin: 0; line-height: 24px; - color: #50575e; + color: var(--wp-admin-text-tertiary); display: block; overflow: hidden; white-space: nowrap; diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index ab73f828f7067..2e062d98b4fb4 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -95,7 +95,7 @@ transform: translateY( -50% ); padding: 0 2em; text-align: center; - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 16px; line-height: 1.5; display: none; @@ -166,7 +166,7 @@ .welcome-panel-header { position: relative; - color: #fff; + color: var(--wp-admin-text-inverse); } .welcome-panel-header-image { @@ -232,11 +232,11 @@ transition: all .1s ease-in-out; content: '\f335'; font-size: 24px; - color: #fff; + color: var(--wp-admin-text-inverse); } .welcome-panel .welcome-panel-close { - color: #fff; + color: var(--wp-admin-text-inverse); } .welcome-panel .welcome-panel-close:hover, @@ -286,7 +286,7 @@ gap: 32px; align-self: flex-end; background: #ffffff; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); border-top: 0; border-radius: 0 0 8px 8px; } @@ -361,7 +361,7 @@ #dashboard_right_now li a:before, #dashboard_right_now li span:before, #dashboard_right_now .search-engines-info:before { - color: #646970; + color: var(--wp-admin-text-secondary); font: normal 20px/1 dashicons; display: inline-block; padding: 0 10px 0 0; @@ -484,7 +484,7 @@ #dashboard_right_now .search-engines-info:before { content: "\f348"; content: "\f348" / ''; - color: #d63638; + color: var(--wp-admin-status-error); } /* Dashboard WordPress events */ @@ -577,7 +577,7 @@ .community-events li { margin: 0; padding: 8px 12px; - color: #2c3338; + color: var(--wp-admin-border-emphasis); } .community-events li:first-child { border-top: 1px solid #e9e9ed; @@ -610,7 +610,7 @@ } .event-icon:before { - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 18px; } .event-meetup .event-icon:before { @@ -636,8 +636,8 @@ margin-top: 0; margin-bottom: 0; padding: 12px; - border-top: 1px solid #f0f0f1; - color: #646970; + border-top: 1px solid var(--wp-admin-bg-page); + color: var(--wp-admin-text-secondary); } /* Safari 10 + VoiceOver specific: without this, the hidden text gets read out before the link. */ @@ -673,7 +673,7 @@ body #dashboard-widgets .postbox form .submit { } .rssSummary { - color: #646970; + color: var(--wp-admin-text-secondary); margin-top: 4px; } @@ -693,7 +693,7 @@ body #dashboard-widgets .postbox form .submit { #dashboard_primary .rss-widget span, #dashboard_primary .rss-widget span.rss-date { - color: #646970; + color: var(--wp-admin-text-secondary); } #dashboard_primary .rss-widget span.rss-date { @@ -754,14 +754,14 @@ body #dashboard-widgets .postbox form .submit { /* Dashboard right now - Colors */ #dashboard_right_now .sub { - color: #50575e; - background: #f6f7f7; - border-top: 1px solid #f0f0f1; + color: var(--wp-admin-text-tertiary); + background: var(--wp-admin-bg-alt); + border-top: 1px solid var(--wp-admin-bg-page); padding: 10px 12px 6px; } #dashboard_right_now .sub h3 { - color: #50575e; + color: var(--wp-admin-text-tertiary); } #dashboard_right_now .sub p { @@ -770,7 +770,7 @@ body #dashboard-widgets .postbox form .submit { #dashboard_right_now .warning a:before, #dashboard_right_now .warning span:before { - color: #d63638; + color: var(--wp-admin-status-error); } /* Dashboard Quick Draft */ @@ -782,7 +782,7 @@ body #dashboard-widgets .postbox form .submit { #dashboard_quick_press div.updated { margin-bottom: 10px; - border: 1px solid #f0f0f1; + border: 1px solid var(--wp-admin-bg-page); border-width: 1px 1px 1px 0; } @@ -827,7 +827,7 @@ body #dashboard-widgets .postbox form .submit { /* Dashboard Quick Draft - Drafts list */ .js #dashboard_quick_press .drafts { - border-top: 1px solid #f0f0f1; + border-top: 1px solid var(--wp-admin-bg-page); } #dashboard_quick_press .drafts abbr { @@ -851,7 +851,7 @@ body #dashboard-widgets .postbox form .submit { margin-bottom: 1em; } #dashboard_quick_press .drafts li time { - color: #646970; + color: var(--wp-admin-text-secondary); } #dashboard_quick_press .drafts p { @@ -877,7 +877,7 @@ body #dashboard-widgets .postbox form .submit { padding: 0; font-size: 14px; font-weight: 400; - color: #1d2327; + color: var(--wp-admin-text-primary); } #dashboard_quick_press .drafts h2 { @@ -915,20 +915,20 @@ body #dashboard-widgets .postbox form .submit { } #dashboard_activity .no-activity p { - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 16px; } #dashboard_activity .subsubsub { float: none; - border-top: 1px solid #f0f0f1; + border-top: 1px solid var(--wp-admin-bg-page); margin: 0 -12px; padding: 8px 12px 4px; } #dashboard_activity .subsubsub a .count, #dashboard_activity .subsubsub a.current .count { - color: #646970; /* white background on the dashboard but #f0f0f1 on list tables */ + color: var(--wp-admin-text-secondary); /* white background on the dashboard but var(--wp-admin-bg-page) on list tables */ } #future-posts ul, @@ -941,17 +941,17 @@ body #dashboard-widgets .postbox form .submit { display: grid; grid-template-columns: clamp(160px, calc(2vw + 140px), 200px) auto; column-gap: 10px; - color: #646970; + color: var(--wp-admin-text-secondary); padding: 4px 12px; } #future-posts li:nth-child(odd), #published-posts li:nth-child(odd) { - background-color: #f6f7f7; + background-color: var(--wp-admin-bg-alt); } .activity-block { - border-bottom: 1px solid #f0f0f1; + border-bottom: 1px solid var(--wp-admin-bg-page); margin: 0 -12px 6px -12px; padding: 8px 12px 4px; } @@ -962,7 +962,7 @@ body #dashboard-widgets .postbox form .submit { } .activity-block .subsubsub li { - color: #646970; + color: var(--wp-admin-text-secondary); } /* Dashboard activity widget - Comments */ @@ -976,7 +976,7 @@ body #dashboard-widgets .postbox form .submit { } #activity-widget #the-comment-list .comment-item { - background: #f6f7f7; + background: var(--wp-admin-bg-alt); padding: 12px; position: relative; } @@ -999,7 +999,7 @@ body #dashboard-widgets .postbox form .submit { } #activity-widget #the-comment-list .comment-item:first-child { - border-top: 1px solid #f0f0f1; + border-top: 1px solid var(--wp-admin-bg-page); } #activity-widget #the-comment-list .unapproved { @@ -1013,7 +1013,7 @@ body #dashboard-widgets .postbox form .submit { left: 0; top: 0; bottom: 0; - background: #d63638; + background: var(--wp-admin-status-error); width: 4px; } @@ -1115,7 +1115,7 @@ body #dashboard-widgets .postbox form .submit { #latest-comments #the-comment-list .comment-meta { line-height: 1.5; margin: 0; - color: #646970; + color: var(--wp-admin-text-secondary); } #latest-comments #the-comment-list .comment-meta cite { @@ -1155,7 +1155,7 @@ a.rsswidget { } .rss-widget span.rss-date { - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 13px; margin-left: 3px; } @@ -1195,22 +1195,22 @@ a.rsswidget { } #dashboard_browser_nag.postbox { - background-color: #b32d2e; + background-color: var(--wp-admin-status-error-dark); background-image: none; - border-color: #b32d2e; - color: #fff; + border-color: var(--wp-admin-status-error-dark); + color: var(--wp-admin-text-inverse); box-shadow: none; } #dashboard_browser_nag.postbox h2 { border-bottom-color: transparent; background: transparent none; - color: #fff; + color: var(--wp-admin-text-inverse); box-shadow: none; } #dashboard_browser_nag a { - color: #fff; + color: var(--wp-admin-text-inverse); } #dashboard_browser_nag.postbox .postbox-header { @@ -1236,13 +1236,13 @@ a.rsswidget { /* PHP Nag */ #dashboard_php_nag .dashicons-warning { - color: #dba617; + color: var(--wp-admin-status-warning); padding-right: 6px; } #dashboard_php_nag.php-no-security-updates .dashicons-warning, #dashboard_php_nag.php-version-lower-than-future-minimum .dashicons-warning { - color: #d63638; + color: var(--wp-admin-status-error); } #dashboard_php_nag h2 { diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index f1dd76ac31474..65970a002fb69 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-bg-card); } #titlediv #title-prompt-text { - color: #646970; + color: var(--wp-admin-text-secondary); position: absolute; font-size: 1.7em; padding: 10px; @@ -76,7 +76,7 @@ } #titlewrap .skiplink { - background: #fff; + background: var(--wp-admin-bg-card); line-height: 2.30769231; /* 30px for 32px min-height */ min-height: 32px; right: 4px; @@ -108,7 +108,7 @@ input#link_url { min-height: 25px; margin-top: 5px; padding: 0 10px; - color: #646970; + color: var(--wp-admin-text-secondary); } #sample-permalink { @@ -189,9 +189,9 @@ body.post-type-wp_navigation .inline-edit-status { .postbox { position: relative; min-width: 255px; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - background: #fff; + background: var(--wp-admin-bg-card); } #trackback_url { @@ -241,7 +241,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-border-emphasis); } .category-tabs { @@ -293,9 +293,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-border-light); + border-bottom-color: var(--wp-admin-text-inverse); + background-color: var(--wp-admin-bg-card); } ul.category-tabs li, @@ -313,7 +313,7 @@ ul.wp-tab-bar li { max-width: 100%; height: 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: linear-gradient(45deg, var(--wp-admin-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)), linear-gradient(45deg, var(--wp-admin-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)); background-position: 0 0, 10px 10px; background-size: 20px 20px; } @@ -346,9 +346,9 @@ form#tags-filter { #post-status-info { width: 100%; border-spacing: 0; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); border-top: none; - background-color: #f6f7f7; + background-color: var(--wp-admin-bg-alt); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); z-index: 999; } @@ -396,7 +396,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-border-default); } .wp-editor-expand #wp-content-editor-container { @@ -413,7 +413,7 @@ form#tags-filter { } .wp-editor-expand #post-status-info { - border-top: 1px solid #c3c4c7; + border-top: 1px solid var(--wp-admin-border-default); } .wp-editor-expand div.mce-toolbar-grp { @@ -445,7 +445,7 @@ form#tags-filter { /* End TinyMCE native fullscreen mode override */ #wp-content-editor-tools { - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); padding-top: 20px; } @@ -487,7 +487,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-border-subtle); } #post-body .misc-pub-post-status:before, @@ -569,7 +569,7 @@ form#tags-filter { left: 50%; width: 450px; margin-left: -225px; - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); line-height: 1.5; z-index: 1000005; @@ -676,7 +676,7 @@ form#tags-filter { } #poststuff .stuffbox > h2 { - border-bottom: 1px solid #f0f0f1; + border-bottom: 1px solid var(--wp-admin-bg-page); } #poststuff .inside { @@ -771,8 +771,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-bg-card); + border-bottom: 1px solid var(--wp-admin-border-light); } .privacy-settings-title-section, @@ -815,7 +815,7 @@ form#tags-filter { .privacy-settings-tab:focus, .health-check-tab:focus { - color: #1d2327; + color: var(--wp-admin-text-primary); outline: 1px solid #787c82; box-shadow: none; } @@ -845,13 +845,13 @@ form#tags-filter { /* Accordions */ .privacy-settings-accordion, .health-check-accordion { - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); } .privacy-settings-accordion-heading, .health-check-accordion-heading { margin: 0; - border-top: 1px solid #c3c4c7; + border-top: 1px solid var(--wp-admin-border-default); font-size: inherit; line-height: inherit; font-weight: 600; @@ -865,9 +865,9 @@ form#tags-filter { .privacy-settings-accordion-trigger, .health-check-accordion-trigger { - background: #fff; + background: var(--wp-admin-bg-card); border: 0; - color: #2c3338; + color: var(--wp-admin-border-emphasis); cursor: pointer; display: flex; font-weight: 400; @@ -887,17 +887,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-bg-alt); } .privacy-settings-accordion-trigger:focus, .health-check-accordion-trigger:focus { - color: #1d2327; + color: var(--wp-admin-text-primary); border: none; box-shadow: none; outline-offset: -1px; outline: 2px solid var(--wp-admin-theme-color); - background-color: #f6f7f7; + background-color: var(--wp-admin-bg-alt); } .privacy-settings-accordion-trigger .title, @@ -911,7 +911,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-text-tertiary); border-width: 0 2px 2px 0; height: 0.5rem; pointer-events: none; @@ -925,7 +925,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-border-emphasis); font-weight: 600; } @@ -940,7 +940,7 @@ form#tags-filter { .privacy-settings-accordion-trigger .badge.orange, .health-check-accordion-trigger .badge.orange { - border: 1px solid #dba617; + border: 1px solid var(--wp-admin-status-warning); } .privacy-settings-accordion-trigger .badge.red, @@ -955,12 +955,12 @@ form#tags-filter { .privacy-settings-accordion-trigger .badge.purple, .health-check-accordion-trigger .badge.purple { - border: 1px solid #2271b1; + border: 1px solid var(--wp-admin-status-info-dark); } .privacy-settings-accordion-trigger .badge.gray, .health-check-accordion-trigger .badge.gray { - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); } .privacy-settings-accordion-trigger[aria-expanded="true"] .icon, @@ -974,7 +974,7 @@ form#tags-filter { .health-check-accordion-panel { margin: 0; padding: 1em 1.5em; - background: #fff; + background: var(--wp-admin-bg-card); } .privacy-settings-accordion-panel[hidden], @@ -1087,7 +1087,7 @@ form#tags-filter { #postcustomstuff thead th { padding: 5px 8px 8px; - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); } #postcustom #postcustomstuff .submit { @@ -1118,9 +1118,9 @@ form#tags-filter { #postcustomstuff table { margin: 0; width: 100%; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); border-spacing: 0; - background-color: #f6f7f7; + background-color: var(--wp-admin-bg-alt); } #postcustomstuff tr { @@ -1214,7 +1214,7 @@ form#tags-filter { width: 20px; margin-top: -4px; margin-right: 7px; - color: #dcdcde; + color: var(--wp-admin-border-light); font: normal 20px/1 dashicons; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -1317,8 +1317,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-border-light); + background-color: var(--wp-admin-bg-card); } div.tabs-panel-active { @@ -1387,7 +1387,7 @@ ul.categorychecklist li { p.description, .form-wrap p { margin: 2px 0 5px; - color: #646970; + color: var(--wp-admin-text-secondary); } p.help, @@ -1403,7 +1403,7 @@ p.description code { p.description code, .form-wrap p code { - color: #50575e; + color: var(--wp-admin-text-tertiary); } .form-wrap .form-field { @@ -1484,7 +1484,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-border-light); line-height: 1.2; word-spacing: 3px; } @@ -1506,7 +1506,7 @@ p.popular-tags a { position: absolute; z-index: 10000; border: 1px solid #4f94d4; - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .wp-customizer .ac_results { @@ -1522,8 +1522,8 @@ p.popular-tags a { .ac_results .ac_over, .ac_over .ac_match { - background-color: #2271b1; - color: #fff; + background-color: var(--wp-admin-status-info-dark); + color: var(--wp-admin-text-inverse); cursor: pointer; } @@ -1567,7 +1567,7 @@ p.popular-tags a { content: "(" attr( href ) ")"; display: inline-block; padding: 0 4px; - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 13px; word-break: break-all; } diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index f2e5f9dcc5b53..fbb78c50d671b 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -50,7 +50,7 @@ textarea { box-shadow: 0 0 0 transparent; border-radius: 2px; border: 1px solid #949494; - background-color: #fff; + background-color: var(--wp-admin-bg-card); color: #1e1e1e; } @@ -127,7 +127,7 @@ input[type="checkbox"], input[type="radio"] { border: 1px solid #1e1e1e; border-radius: 2px; - background: #fff; + background: var(--wp-admin-bg-card); color: #1e1e1e; clear: none; cursor: pointer; @@ -212,7 +212,7 @@ input[type="radio"]:checked::before { width: 0.5rem; /* 8px */ height: 0.5rem; /* 8px */ margin: auto; - background-color: #fff; + background-color: var(--wp-admin-bg-card); /* Only visible in Windows High Contrast mode */ outline: 4px solid transparent; } @@ -264,7 +264,7 @@ textarea[readonly] { .form-invalid.form-required input:focus, .form-invalid.form-required select, .form-invalid.form-required select:focus { - border-color: #d63638 !important; + border-color: var(--wp-admin-status-error) !important; box-shadow: 0 0 2px rgba(214, 54, 56, 0.8); } @@ -272,7 +272,7 @@ textarea[readonly] { content: "\f534"; content: "\f534" / ''; font: normal 20px/1 dashicons; - color: #d63638; + color: var(--wp-admin-status-error); margin-left: -25px; vertical-align: middle; } @@ -286,13 +286,13 @@ textarea[readonly] { content: "\f534"; content: "\f534" / ''; font: normal 20px/1 dashicons; - color: #d63638; + color: var(--wp-admin-status-error); margin: 0 6px 0 -29px; vertical-align: middle; } .form-input-tip { - color: #646970; + color: var(--wp-admin-text-secondary); } input:disabled, @@ -349,7 +349,7 @@ input[type="radio"].disabled:checked:before { max-width: 25rem; -webkit-appearance: none; /* The SVG is arrow-down-alt2 from Dashicons. */ - background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%; + background: var(--wp-admin-bg-card) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%; background-size: 16px 16px; cursor: pointer; vertical-align: middle; @@ -373,9 +373,9 @@ input[type="radio"].disabled:checked:before { .wp-core-ui select.disabled, .wp-core-ui select:disabled { - color: #a7aaad; - border-color: #dcdcde; - background-color: #f6f7f7; + color: var(--wp-admin-text-placeholder); + border-color: var(--wp-admin-border-light); + background-color: var(--wp-admin-bg-alt); /* The SVG is arrow-down-alt2 from Dashicons. */ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E'); box-shadow: none; @@ -398,7 +398,7 @@ input[type="radio"].disabled:checked:before { /* Remove background focus style from IE11 while keeping focus style available on option elements. */ .wp-core-ui select::-ms-value { background: transparent; - color: #50575e; + color: var(--wp-admin-text-tertiary); } .wp-core-ui select:hover::-ms-value { @@ -411,7 +411,7 @@ input[type="radio"].disabled:checked:before { .wp-core-ui select.disabled::-ms-value, .wp-core-ui select:disabled::-ms-value { - color: #a7aaad; + color: var(--wp-admin-text-placeholder); } /* Hide the native down arrow for select element on IE. */ @@ -441,7 +441,7 @@ input[type="radio"].disabled:checked:before { .wp-core-ui select[multiple] { height: auto; padding-right: 8px; - background: #fff; + background: var(--wp-admin-bg-card); } .submit { @@ -780,7 +780,7 @@ fieldset label, position: relative; background: #fcf9e8; border: 1px solid #f0c33c; - color: #1d2327; + color: var(--wp-admin-text-primary); padding: 6px 10px; top: -8px; } @@ -869,7 +869,7 @@ ul#add-to-blog-users { z-index: 10000; border: 1px solid #4f94d4; box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8); - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .ui-autocomplete li { @@ -882,14 +882,14 @@ ul#add-to-blog-users { /* Colors for the wplink toolbar autocomplete. */ .ui-autocomplete .ui-state-focus { - background-color: #dcdcde; + background-color: var(--wp-admin-border-light); } /* Colors for the tags autocomplete. */ .wp-tags-autocomplete .ui-state-focus, .wp-tags-autocomplete [aria-selected="true"] { background-color: var(--wp-admin-theme-color); - color: #fff; + color: var(--wp-admin-text-inverse); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -921,7 +921,7 @@ ul#add-to-blog-users { .form-table th, .form-wrap label { - color: #1d2327; + color: var(--wp-admin-text-primary); font-weight: 400; text-shadow: none; vertical-align: baseline; @@ -1027,7 +1027,7 @@ table.form-table td .updated p { .color-option:hover, .color-option.selected { - background: #dcdcde; + background: var(--wp-admin-border-light); } .color-palette { @@ -1148,10 +1148,10 @@ table.form-table td .updated p { display: inline-block; position: relative; cursor: move; - color: #2c3338; - background: #dcdcde; + color: var(--wp-admin-border-emphasis); + background: var(--wp-admin-border-light); border-radius: 5px; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); font-style: normal; line-height: 16px; font-size: 14px; @@ -1214,7 +1214,7 @@ table.form-table td .updated p { .pressthis-js-toggle .dashicons { margin: 5px 8px 6px 7px; - color: #50575e; + color: var(--wp-admin-text-tertiary); } /*------------------------------------------------------------------------------ @@ -1494,7 +1494,7 @@ table.form-table td .updated p { .privacy_requests tbody th { border-left: 4px solid #fff; - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } @@ -1515,7 +1515,7 @@ table.form-table td .updated p { } .privacy_requests tbody td { - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } @@ -1530,14 +1530,14 @@ table.form-table td .updated p { .privacy_requests .status-request-confirmed th, .privacy_requests .status-request-confirmed td { - background-color: #fff; + background-color: var(--wp-admin-bg-card); border-left-color: #72aee6; } .privacy_requests .status-request-failed th, .privacy_requests .status-request-failed td { - background-color: #f6f7f7; - border-left-color: #d63638; + background-color: var(--wp-admin-bg-alt); + border-left-color: var(--wp-admin-status-error); } .privacy_requests .export_personal_data_failed a { @@ -1551,11 +1551,11 @@ table.form-table td .updated p { .status-label.status-request-pending { font-weight: 400; font-style: italic; - color: #646970; + color: var(--wp-admin-text-secondary); } .status-label.status-request-failed { - color: #d63638; + color: var(--wp-admin-status-error); font-weight: 600; } diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 56d88d6801ddb..7fca2b43cf568 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-text-secondary); + color: var(--wp-admin-text-inverse); 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-text-secondary); border-right: 5px solid transparent; } @@ -97,10 +97,10 @@ padding: 0 5px; min-width: 7px; height: 17px; - border: 2px solid #fff; + border: 2px solid var(--wp-admin-bg-card); border-radius: 11px; - background: #d63638; - color: #fff; + background: var(--wp-admin-status-error); + color: var(--wp-admin-text-inverse); 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-border-default); } .commentlist li li { @@ -131,7 +131,7 @@ #submitted-on, .submitted-on { - color: #50575e; + color: var(--wp-admin-text-tertiary); } /* reply to comments */ @@ -203,8 +203,8 @@ } #replyerror { - border-color: #dcdcde; - background-color: #f6f7f7; + border-color: var(--wp-admin-border-light); + background-color: var(--wp-admin-bg-alt); } /* @todo: is this used? */ @@ -214,7 +214,7 @@ #the-comment-list tr.undo, #the-comment-list div.undo { - background-color: #f6f7f7; + background-color: var(--wp-admin-bg-alt); } #the-comment-list .unapproved th, @@ -223,7 +223,7 @@ } #the-comment-list .unapproved th.check-column { - border-left: 4px solid #d63638; + border-left: 4px solid var(--wp-admin-status-error); } #the-comment-list .unapproved th.check-column input { @@ -280,7 +280,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-body); } /*------------------------------------------------------------------------------ @@ -395,7 +395,7 @@ table.media .column-title .filename { left: 50%; transform: translate(-50%, -100%); background: #000; - color: #fff; + color: var(--wp-admin-text-inverse); border-radius: 5px; margin: 0; padding: 2px 5px; @@ -485,7 +485,7 @@ table.media .column-title .filename { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; - color: #a7aaad; + color: var(--wp-admin-text-placeholder); } .sorting-indicator.asc:before { @@ -499,25 +499,25 @@ table.media .column-title .filename { } th.sorted.desc .sorting-indicator.desc:before { - color: #1d2327; + color: var(--wp-admin-text-primary); } th.sorted.asc .sorting-indicator.asc:before { - color: #1d2327; + color: var(--wp-admin-text-primary); } th.sorted.asc a:focus .sorting-indicator.asc:before, th.sorted.asc:hover .sorting-indicator.asc:before, th.sorted.desc a:focus .sorting-indicator.desc:before, th.sorted.desc:hover .sorting-indicator.desc:before { - color: #a7aaad; + color: var(--wp-admin-text-placeholder); } th.sorted.asc a:focus .sorting-indicator.desc:before, th.sorted.asc:hover .sorting-indicator.desc:before, th.sorted.desc a:focus .sorting-indicator.asc:before, th.sorted.desc:hover .sorting-indicator.asc:before { - color: #1d2327; + color: var(--wp-admin-text-primary); } .wp-list-table .toggle-row { @@ -554,7 +554,7 @@ th.sorted.desc:hover .sorting-indicator.asc:before { border-radius: 50%; display: block; padding: 1px 2px 1px 0; - color: #3c434a; /* same as table headers sort arrows */ + color: var(--wp-admin-text-body); /* same as table headers sort arrows */ content: "\f140"; content: "\f140" / ''; font: normal 20px/1 dashicons; @@ -588,7 +588,7 @@ th.sorted.desc:hover .sorting-indicator.asc:before { } .check-column .label-covers-full-cell:hover + input:not(:disabled) { - box-shadow: 0 0 0 1px #2271b1; + box-shadow: 0 0 0 1px var(--wp-admin-status-info-dark); } .check-column label:hover, @@ -604,7 +604,7 @@ th.sorted.desc:hover .sorting-indicator.asc:before { } .locked-indicator-icon:before { - color: #8c8f94; + color: var(--wp-admin-border-subtle); content: "\f160"; content: "\f160" / ''; display: inline-block; @@ -766,7 +766,7 @@ th.sorted a span { } .view-switch a:before { - color: #c3c4c7; + color: var(--wp-admin-border-default); display: inline-block; font: normal 20px/1 dashicons; vertical-align: middle; @@ -780,7 +780,7 @@ th.sorted a span { } .view-switch a.current:before { - color: #2271b1; + color: var(--wp-admin-status-info-dark); } .view-switch .view-list:before { @@ -853,7 +853,7 @@ p.pagenav { } .row-actions { - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 13px; padding: 2px 0 0; position: relative; @@ -1242,7 +1242,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { } .plugins tr { - background: #fff; + background: var(--wp-admin-bg-card); } .plugins p { @@ -1304,7 +1304,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { .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; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 var(--wp-admin-border-light); } .plugins .update td, @@ -1343,10 +1343,10 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { .plugins .plugin-title .dashicons:before { padding: 2px; - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); box-shadow: inset 0 0 10px rgba(167, 170, 173, 0.15); font-size: 60px; - color: #c3c4c7; + color: var(--wp-admin-border-default); } #update-themes-table .plugin-title img.updates-table-screenshot, @@ -1407,17 +1407,17 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { } .plugins tr.paused th.check-column { - border-left: 4px solid #b32d2e; + border-left: 4px solid var(--wp-admin-status-error-dark); } .plugins tr.paused th, .plugins tr.paused td { - background-color: #f6f7f7; + background-color: var(--wp-admin-bg-alt); } .plugins tr.paused .plugin-title, .plugins .paused .dashicons-warning { - color: #b32d2e; + color: var(--wp-admin-status-error-dark); } .plugins .paused .error-display p, @@ -1427,11 +1427,11 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { } .plugins .resume-link { - color: #b32d2e; + color: var(--wp-admin-status-error-dark); } .plugin-card .update-now:before { - color: #d63638; + color: var(--wp-admin-status-error); content: "\f463"; content: "\f463" / ''; display: inline-block; @@ -1651,7 +1651,7 @@ div.action-links, .plugin-card-bottom { clear: both; padding: 16px; - background-color: #f6f7f7; + background-color: var(--wp-admin-bg-alt); border-top: 1px solid rgb(0, 0, 0, 0.1); overflow: hidden; } @@ -1667,7 +1667,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-border-light); } .plugin-card-update-failed .plugin-card-bottom { @@ -1710,13 +1710,13 @@ div.action-links, -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; - color: #3c434a; + color: var(--wp-admin-text-body); } .plugin-card .column-compatibility .compatibility-incompatible:before { content: "\f158"; content: "\f158" / ''; - color: #d63638; + color: var(--wp-admin-status-error); } .plugin-card .column-compatibility .compatibility-compatible:before { @@ -1739,7 +1739,7 @@ div.action-links, } .no-plugin-results { - color: #646970; /* same as no themes and no media */ + color: var(--wp-admin-text-secondary); /* same as no themes and no media */ font-size: 18px; font-style: normal; margin: 0; @@ -2039,7 +2039,7 @@ div.action-links, border: none; border-radius: 0; background: none; - color: #b32d2e; + color: var(--wp-admin-status-error-dark); font-size: inherit; line-height: inherit; text-align: left; @@ -2047,7 +2047,7 @@ div.action-links, .column-response .post-com-count-pending:hover, .column-comments .post-com-count-pending:hover { - color: #d63638; + color: var(--wp-admin-status-error); } .widefat thead td.check-column, diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index ae21bb77d3f82..8f1e8a3033510 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-border-light); clear: both; cursor: default; } @@ -154,12 +154,12 @@ margin-bottom: 1px; position: relative; width: 100%; - background: #fff; + background: var(--wp-admin-bg-card); } .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-border-light); } #media-items:empty { @@ -193,7 +193,7 @@ padding: 0; overflow: hidden; border-radius: 22px; - background: #dcdcde; + background: var(--wp-admin-border-light); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } @@ -203,7 +203,7 @@ height: 100%; margin-top: -22px; border-radius: 22px; - background-color: #2271b1; + background-color: var(--wp-admin-status-info-dark); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); } @@ -212,7 +212,7 @@ position: relative; width: 200px; padding: 0; - color: #fff; + color: var(--wp-admin-text-inverse); text-align: center; line-height: 22px; font-weight: 400; @@ -256,7 +256,7 @@ ------------------------------------------------------------------------------*/ .find-box { - background-color: #fff; + background-color: var(--wp-admin-bg-card); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); width: 600px; overflow: hidden; @@ -269,8 +269,8 @@ } .find-box-head { - background: #fff; - border-bottom: 1px solid #dcdcde; + background: var(--wp-admin-bg-card); + border-bottom: 1px solid var(--wp-admin-border-light); height: 36px; font-size: 18px; font-weight: 600; @@ -285,7 +285,7 @@ .find-box-inside { overflow: auto; padding: 16px; - background-color: #fff; + background-color: var(--wp-admin-bg-card); position: absolute; top: 37px; bottom: 45px; @@ -336,7 +336,7 @@ cursor: pointer; text-align: center; background: none; - color: #646970; + color: var(--wp-admin-text-secondary); } #find-posts-close:hover, @@ -362,8 +362,8 @@ .find-box-buttons { padding: 8px 16px; - background: #fff; - border-top: 1px solid #dcdcde; + background: var(--wp-admin-bg-card); + border-top: 1px solid var(--wp-admin-border-light); position: absolute; bottom: 0; left: 0; @@ -402,7 +402,7 @@ } .drag-drop #drag-drop-area { - border: 4px dashed #c3c4c7; + border: 4px dashed var(--wp-admin-border-default); height: 200px; } @@ -476,9 +476,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; + border-left: 4px solid var(--wp-admin-status-error); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .upload-php .mode-grid .hide-sidebar .media-sidebar { @@ -511,7 +511,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-border-default); } .media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments, @@ -532,13 +532,13 @@ border color while dragging a file over the uploader drop area */ .media-frame.mode-grid .selected.attachment { box-shadow: - inset 0 0 0 5px #f0f0f1, - inset 0 0 0 7px #c3c4c7; + inset 0 0 0 5px var(--wp-admin-bg-page), + inset 0 0 0 7px var(--wp-admin-border-default); } .media-frame.mode-grid .attachment.details { box-shadow: - inset 0 0 0 3px #f0f0f1, + inset 0 0 0 3px var(--wp-admin-bg-page), inset 0 0 0 7px var(--wp-admin-theme-color, #3858e9); } @@ -627,7 +627,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); /* same as no plugins and no themes */ font-size: 18px; font-style: normal; margin: 0; @@ -667,7 +667,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-border-light); transition: color .1s ease-in-out, background .1s ease-in-out; } @@ -702,8 +702,8 @@ 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; + background: var(--wp-admin-border-light); + border-color: var(--wp-admin-border-default); color: #000; outline: none; box-shadow: none; @@ -734,7 +734,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-border-default); background: inherit; cursor: default; } @@ -778,7 +778,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-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)), linear-gradient(45deg, var(--wp-admin-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)); background-position: 0 0, 10px 10px; background-size: 20px 20px; } @@ -816,8 +816,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-border-light); + background: var(--wp-admin-bg-alt); } .edit-attachment-frame .attachment-info .details, @@ -827,12 +827,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-border-light); } .edit-attachment-frame .attachment-info .filename { font-weight: 400; - color: #646970; + color: var(--wp-admin-text-secondary); } .edit-attachment-frame .attachment-info .thumbnail { @@ -963,7 +963,7 @@ border color while dragging a file over the uploader drop area */ top: 0; bottom: 0; width: 100%; - background: #fff; + background: var(--wp-admin-bg-card); opacity: 0.7; filter: alpha(opacity=70); display: none; @@ -991,7 +991,7 @@ border color while dragging a file over the uploader drop area */ .image-editor .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-text-placeholder); } .A1B1 { @@ -1040,9 +1040,9 @@ 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-text-placeholder); + border-color: var(--wp-admin-border-light); + background: var(--wp-admin-bg-alt); box-shadow: none; text-shadow: 0 1px 0 #fff; cursor: default; @@ -1079,14 +1079,14 @@ 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-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)), linear-gradient(45deg, var(--wp-admin-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .imgedit-crop-wrap { padding: 20px; - 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-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)), linear-gradient(45deg, var(--wp-admin-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)); background-position: 0 0, 10px 10px; background-size: 20px 20px; } @@ -1132,7 +1132,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-text-primary); } .imgedit-applyto .imgedit-label { @@ -1156,7 +1156,7 @@ border color while dragging a file over the uploader drop area */ .imgedit-popup-menu { width: calc( 100% - 20px ); position: absolute; - background: #fff; + background: var(--wp-admin-bg-card); padding: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); } @@ -1187,7 +1187,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-status-info-dark); font-size: 20px; line-height: 1; cursor: pointer; @@ -1196,9 +1196,9 @@ border color while dragging a file over the uploader drop area */ } .image-editor .imgedit-settings .imgedit-help-toggle:focus { - color: #2271b1; - border-color: #2271b1; - box-shadow: 0 0 0 1px #2271b1; + color: var(--wp-admin-status-info-dark); + border-color: var(--wp-admin-status-info-dark); + box-shadow: 0 0 0 1px var(--wp-admin-status-info-dark); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -1222,7 +1222,7 @@ span.imgedit-scale-warn { align-items: center; margin: 4px; gap: 4px; - color: #b32d2e; + color: var(--wp-admin-status-error-dark); font-style: normal; visibility: hidden; vertical-align: middle; @@ -1260,7 +1260,7 @@ span.imgedit-scale-warn { width: 7px; text-align: center; font-size: 13px; - color: #3c434a; + color: var(--wp-admin-text-body); } .image-editor .imgedit-scale-button-wrapper { diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css index 8e3eadaad53bc..bbfc7d89b7bd1 100644 --- a/src/wp-admin/css/nav-menus.css +++ b/src/wp-admin/css/nav-menus.css @@ -87,7 +87,7 @@ ul.add-menu-item-tabs li { } .is-submenu { - color: #50575e; /* #fafafa background */ + color: var(--wp-admin-text-tertiary); /* #fafafa background */ font-style: italic; font-weight: 400; margin-left: 4px; @@ -97,7 +97,7 @@ ul.add-menu-item-tabs li { margin-top: 23px; padding: 10px; overflow: hidden; - background: #fff; + background: var(--wp-admin-bg-card); } .manage-menus .selected-menu, @@ -139,9 +139,9 @@ ul.add-menu-item-tabs li { line-height: 2.15384615; height: auto; min-height: 30px; - background: #f6f7f7; + background: var(--wp-admin-bg-alt); vertical-align: top; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); margin: 0; cursor: pointer; border-radius: 3px; @@ -150,9 +150,9 @@ ul.add-menu-item-tabs li { } .bulk-selection .bulk-select-button { - color: #2271b1; - border-color: #2271b1; - background: #f6f7f7; + color: var(--wp-admin-status-info-dark); + border-color: var(--wp-admin-status-info-dark); + background: var(--wp-admin-bg-alt); vertical-align: top; } @@ -185,7 +185,7 @@ 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; + background: var(--wp-admin-bg-page); border-color: #0a4b78; color: #0a4b78; } @@ -202,11 +202,11 @@ input.bulk-select-switcher:focus + .bulk-select-button-label { background: none; cursor: pointer; text-decoration: underline; - color: #b32d2e; + color: var(--wp-admin-status-error-dark); } .bulk-actions input.menu-items-delete:hover { - color: #b32d2e; + color: var(--wp-admin-status-error-dark); border: none; } @@ -215,7 +215,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label { } .menu-settings { - border-top: 1px solid #f0f0f1; + border-top: 1px solid var(--wp-admin-bg-page); margin-top: 2em; } @@ -251,7 +251,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label { } .theme-location-set { - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 11px; } @@ -278,19 +278,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-bg-card); + border-bottom: 1px solid var(--wp-admin-border-light); + background: var(--wp-admin-bg-card); } #nav-menu-header, #nav-menu-footer { padding: 0 10px; - background: #f6f7f7; + background: var(--wp-admin-bg-alt); } #nav-menu-header { - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); margin-bottom: 0; } @@ -367,7 +367,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-border-default); } #menu-management .inside { @@ -556,7 +556,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-border-light); position: relative; padding: 10px 15px; height: auto; @@ -568,12 +568,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-border-subtle); } #menu-to-edit .menu-item-invalid .menu-item-handle { background: #fcf0f1; - border-color: #d63638; + border-color: var(--wp-admin-status-error); } .no-js .menu-item-edit-active .item-edit { @@ -608,7 +608,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); } /* Sortables */ @@ -675,7 +675,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); font-size: 12px; line-height: 1.5; } @@ -716,7 +716,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-status-info-dark); text-decoration: underline; font-size: 12px; line-height: 1.5; @@ -767,7 +767,7 @@ 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-border-default); border-top: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } @@ -813,8 +813,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-border-light); + color: var(--wp-admin-text-secondary); font-size: 12px; } diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css index da238456178fc..dcfbefd0a2808 100644 --- a/src/wp-admin/css/revisions.css +++ b/src/wp-admin/css/revisions.css @@ -25,7 +25,7 @@ position: fixed; top: 0; height: 82px; - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } @@ -36,13 +36,13 @@ top: 7px; max-width: 70%; box-sizing: border-box; - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .revisions-tickmarks > div { position: absolute; height: 100%; - border-left: 1px solid #a7aaad; + border-left: 1px solid var(--wp-admin-text-placeholder); box-sizing: border-box; } @@ -109,7 +109,7 @@ body.folded .revisions .loading-indicator { .revisions-meta { margin-top: 20px; - background-color: #fff; + background-color: var(--wp-admin-bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow: hidden; } @@ -131,11 +131,11 @@ body.folded .revisions .loading-indicator { } .revisions-controls .author-card .date { - color: #646970; + color: var(--wp-admin-text-secondary); } .revisions-controls .author-card.autosave { - color: #d63638; + color: var(--wp-admin-status-error); } .revisions-controls .author-card .author-name { @@ -172,7 +172,7 @@ body.folded .revisions .loading-indicator { .revisions-diff { padding: 15px; - background-color: #fff; + background-color: var(--wp-admin-bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } @@ -379,8 +379,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-border-light); + background-color: var(--wp-admin-bg-card); } .revisions-tooltip { @@ -400,7 +400,7 @@ table.diff .diff-addedline ins { .arrow:after { z-index: 9999; - background-color: #fff; + background-color: var(--wp-admin-bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } @@ -440,7 +440,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-border-light); text-align: left; cursor: pointer; } @@ -458,29 +458,29 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { } .wp-slider .ui-slider-handle { - background: #f6f7f7; - border: 1px solid #c3c4c7; - box-shadow: 0 1px 0 #c3c4c7; + background: var(--wp-admin-bg-alt); + border: 1px solid var(--wp-admin-border-default); + box-shadow: 0 1px 0 var(--wp-admin-border-default); } .wp-slider .ui-slider-handle:hover, .wp-slider .ui-slider-handle.ui-state-hover { - background: #f6f7f7; - border-color: #8c8f94; + background: var(--wp-admin-bg-alt); + border-color: var(--wp-admin-border-subtle); } .wp-slider .ui-slider-handle:active, .wp-slider .ui-slider-handle.ui-state-active { - background: #f0f0f1; - border-color: #8c8f94; + background: var(--wp-admin-bg-page); + border-color: var(--wp-admin-border-subtle); box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); transform: translateY(1px); } .wp-slider .ui-slider-handle:focus, .wp-slider .ui-slider-handle.ui-state-focus { - background: #f0f0f1; - border-color: #8c8f94; + background: var(--wp-admin-bg-page); + border-color: var(--wp-admin-border-subtle); box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; @@ -491,7 +491,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { position: absolute; top: 2px; left: 2px; - color: #50575e; + color: var(--wp-admin-text-tertiary); content: "\f229"; content: "\f229" / ''; font: normal 18px/1 dashicons; @@ -501,7 +501,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-text-primary); } .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 cf6c24e4a955c..1cb29a02aaa96 100644 --- a/src/wp-admin/css/site-health.css +++ b/src/wp-admin/css/site-health.css @@ -42,34 +42,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-border-default); 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-border-default); stroke-width: 2em; } .site-health-progress svg #bar { stroke-dashoffset: 565; - stroke: #d63638; + stroke: var(--wp-admin-status-error); } .green .site-health-progress #bar { - stroke: #00a32a; + stroke: var(--wp-admin-status-success); } .green .site-health-progress .site-health-progress-label { - color: #00a32a; + color: var(--wp-admin-status-success); } .orange .site-health-progress #bar { - stroke: #dba617; + stroke: var(--wp-admin-status-warning); } .orange .site-health-progress .site-health-progress-label { - color: #dba617; + color: var(--wp-admin-status-warning); } .site-health-progress-label { @@ -80,13 +80,13 @@ are styled in the Privacy section of edit.css */ @keyframes loadingPulse { 0% { - stroke: #c3c4c7; + stroke: var(--wp-admin-border-default); } 50% { stroke: var(--wp-admin-theme-color); } 100% { - stroke: #c3c4c7; + stroke: var(--wp-admin-border-default); } } @@ -152,7 +152,7 @@ are styled in the Privacy section of edit.css */ } .health-check-offscreen-nav .health-check-tab { - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: 0 2px 5px 0 rgba( 0, 0, 0, 0.75 ); } @@ -191,26 +191,26 @@ are styled in the Privacy section of edit.css */ .health-check-body .good::before { content: "\f147"; content: "\f147" / ''; - color: #00a32a; + color: var(--wp-admin-status-success); } .health-check-body .warning::before { content: "\f460"; content: "\f460" / ''; - color: #dba617; + color: var(--wp-admin-status-warning); } .health-check-body .info::before { content: "\f348"; content: "\f348" / ''; - color: #72aee6; + color: var(--wp-admin-status-info); } .health-check-body .fail::before, .health-check-body .error::before { content: "\f335"; content: "\f335" / ''; - color: #d63638; + color: var(--wp-admin-status-error); } .site-health-copy-buttons { diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 4a644974c50c4..247289996ec58 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -134,7 +134,7 @@ body.js .theme-browser.search-loading { /* Secondary buttons need white background for visibility on semi-transparent overlay */ .theme-browser .theme .theme-actions .button:not(.button-primary) { - background: #fff; + background: var(--wp-admin-bg-card); } .theme-browser .theme .theme-actions .button:not(.button-primary):hover { @@ -142,7 +142,7 @@ body.js .theme-browser.search-loading { } .theme-browser .theme .theme-actions .button:not(.button-primary):focus { - background: #fff; + background: var(--wp-admin-bg-card); } /** @@ -176,7 +176,7 @@ body.js .theme-browser.search-loading { .theme-browser .theme:hover .theme-screenshot, .theme-browser .theme.focus .theme-screenshot { - background: #fff; + background: var(--wp-admin-bg-card); } .theme-browser.rendered .theme:hover .theme-screenshot img, @@ -192,9 +192,9 @@ body.js .theme-browser.search-loading { right: 20%; left: 20%; width: 60%; - background: #1d2327; + background: var(--wp-admin-text-primary); background: rgba(0, 0, 0, 0.7); - color: #fff; + color: var(--wp-admin-text-inverse); font-size: 15px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); -webkit-font-smoothing: antialiased; @@ -237,8 +237,8 @@ body.js .theme-browser.search-loading { * The currently active theme */ .theme-browser .theme.active .theme-name { - background: #1d2327; - color: #fff; + background: var(--wp-admin-text-primary); + color: var(--wp-admin-text-inverse); padding-right: 115px; font-weight: 300; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); @@ -259,7 +259,7 @@ body.js .theme-browser.search-loading { } .theme-browser .theme.active .theme-actions .button-primary { - border-color: #fff; + border-color: var(--wp-admin-text-inverse); } .theme-id-container { @@ -285,7 +285,7 @@ body.js .theme-browser.search-loading { /* Active theme secondary buttons need white background for visibility on dark overlay */ .theme-browser .theme.active .theme-actions .button:not(.button-primary) { - background: #fff; + background: var(--wp-admin-bg-card); } .theme-browser .theme.active .theme-actions .button:not(.button-primary):hover { @@ -293,12 +293,12 @@ body.js .theme-browser.search-loading { } .theme-browser .theme.active .theme-actions .button:not(.button-primary):focus { - background: #fff; + background: var(--wp-admin-bg-card); } .theme-browser .theme .theme-author { - background: #1d2327; - color: #f0f0f1; + background: var(--wp-admin-text-primary); + color: var(--wp-admin-bg-page); display: none; font-size: 14px; margin: 0 10px; @@ -343,13 +343,13 @@ body.js .theme-browser.search-loading { bottom: 0; padding: 0; text-shadow: none; - border: 5px dashed #dcdcde; + border: 5px dashed var(--wp-admin-border-light); border: 5px dashed rgba(0, 0, 0, 0.1); box-sizing: border-box; } .theme-browser .theme.add-new-theme span:after { - background: #dcdcde; + background: var(--wp-admin-border-light); background: rgba(140, 143, 148, 0.1); border-radius: 50%; display: inline-block; @@ -361,7 +361,7 @@ body.js .theme-browser.search-loading { height: 100px; vertical-align: middle; text-align: center; - color: #8c8f94; + color: var(--wp-admin-border-subtle); position: absolute; top: 30%; left: 50%; @@ -383,15 +383,15 @@ body.js .theme-browser.search-loading { .theme-browser .theme.add-new-theme a:hover span:after, .theme-browser .theme.add-new-theme a:focus span:after { - background: #fff; - color: #2271b1; + background: var(--wp-admin-bg-card); + color: var(--wp-admin-status-info-dark); } .theme-browser .theme.add-new-theme a:hover:after, .theme-browser .theme.add-new-theme a:focus:after { border-color: transparent; - color: #fff; - background: #2271b1; + color: var(--wp-admin-text-inverse); + background: var(--wp-admin-status-info-dark); content: ""; } @@ -409,7 +409,7 @@ body.js .theme-browser.search-loading { .theme-browser .theme.add-new-theme a:hover .theme-name, .theme-browser .theme.add-new-theme a:focus .theme-name { - color: #fff; + color: var(--wp-admin-text-inverse); z-index: 2; } @@ -423,7 +423,7 @@ body.js .theme-browser.search-loading { right: 0; top: 0; bottom: 0; - background: #f0f0f1; + background: var(--wp-admin-bg-page); background: rgba(240, 240, 241, 0.9); z-index: 10000; /* Over WP Pointers. */ min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); @@ -435,7 +435,7 @@ body.js .theme-browser.search-loading { left: 0; right: 0; height: 48px; - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin-border-light); } .theme-overlay .theme-header button { @@ -449,7 +449,7 @@ body.js .theme-browser.search-loading { text-align: center; float: right; border: 0; - border-left: 1px solid #dcdcde; + border-left: 1px solid var(--wp-admin-border-light); background-color: transparent; transition: color .1s ease-in-out, background .1s ease-in-out; } @@ -474,7 +474,7 @@ body.js .theme-browser.search-loading { float: left; text-align: center; border: 0; - border-right: 1px solid #dcdcde; + border-right: 1px solid var(--wp-admin-border-light); transition: color .1s ease-in-out, background .1s ease-in-out; } @@ -484,8 +484,8 @@ body.js .theme-browser.search-loading { .theme-overlay .theme-header .right:hover, .theme-overlay .theme-header .left:focus, .theme-overlay .theme-header .left:hover { - background: #dcdcde; - border-color: #c3c4c7; + background: var(--wp-admin-border-light); + border-color: var(--wp-admin-border-default); color: #000; } @@ -505,7 +505,7 @@ body.js .theme-browser.search-loading { .theme-overlay .theme-header .right.disabled, .theme-overlay .theme-header .left.disabled:hover, .theme-overlay .theme-header .right.disabled:hover { - color: #c3c4c7; + color: var(--wp-admin-border-default); background: inherit; cursor: inherit; } @@ -534,7 +534,7 @@ body.js .theme-browser.search-loading { left: 190px; right: 30px; bottom: 3%; - background: #fff; + background: var(--wp-admin-bg-card); box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); z-index: 10000; /* Over WP Pointers. */ box-sizing: border-box; @@ -562,10 +562,10 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { left: 0; right: 0; padding: 10px 25px 5px; - background: #f6f7f7; + background: var(--wp-admin-bg-alt); z-index: 30; box-sizing: border-box; - border-top: 1px solid #f0f0f1; + border-top: 1px solid var(--wp-admin-bg-page); display: flex; justify-content: center; gap: 5px; @@ -583,7 +583,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { .broken-themes a.delete-theme, .theme-overlay .theme-actions .delete-theme { - color: #b32d2e; + color: var(--wp-admin-status-error-dark); text-decoration: none; border-color: transparent; box-shadow: none; @@ -594,10 +594,10 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { .broken-themes a.delete-theme:focus, .theme-overlay .theme-actions .delete-theme:hover, .theme-overlay .theme-actions .delete-theme:focus { - background: #b32d2e; - color: #fff; - border-color: #b32d2e; - box-shadow: 0 0 0 1px #b32d2e; + background: var(--wp-admin-status-error-dark); + color: var(--wp-admin-text-inverse); + border-color: var(--wp-admin-status-error-dark); + box-shadow: 0 0 0 1px var(--wp-admin-status-error-dark); } .theme-overlay .theme-actions .active-theme, @@ -623,7 +623,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { /* First screenshot, shown big */ .theme-overlay .screenshot { - border: 1px solid #fff; + border: 1px solid var(--wp-admin-bg-card); box-sizing: border-box; overflow: hidden; position: relative; @@ -655,8 +655,8 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { /* Other screenshots, shown small and square */ .theme-overlay .screenshot.thumb { - background: #c3c4c7; - border: 1px solid #f0f0f1; + background: var(--wp-admin-border-default); + border: 1px solid var(--wp-admin-bg-page); float: none; display: inline-block; margin: 10px 5px 0; @@ -683,7 +683,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { .theme-overlay .screenshot.selected { background: transparent; - border: 2px solid #72aee6; + border: 2px solid var(--wp-admin-status-info); } .theme-overlay .screenshot.selected img { @@ -705,8 +705,8 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { } .theme-overlay .current-label { - background: #2c3338; - color: #fff; + background: var(--wp-admin-border-emphasis); + color: var(--wp-admin-text-inverse); font-size: 11px; display: inline-block; padding: 2px 8px; @@ -717,7 +717,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { } .theme-overlay .theme-name { - color: #1d2327; + color: var(--wp-admin-text-primary); font-size: 32px; font-weight: 100; margin: 10px 0 0; @@ -727,7 +727,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { } .theme-overlay .theme-version { - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 13px; font-weight: 400; float: none; @@ -737,7 +737,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { .theme-overlay .theme-author { margin: 15px 0 25px; - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 16px; font-weight: 400; line-height: inherit; @@ -761,7 +761,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { } .theme-overlay .theme-description { - color: #50575e; + color: var(--wp-admin-text-tertiary); font-size: 15px; font-weight: 400; line-height: 1.5; @@ -769,8 +769,8 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { } .theme-overlay .theme-tags { - border-top: 3px solid #f0f0f1; - color: #646970; + border-top: 3px solid var(--wp-admin-bg-page); + color: var(--wp-admin-text-secondary); font-size: 13px; font-weight: 400; margin: 30px 0 0; @@ -778,15 +778,15 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { } .theme-overlay .theme-tags span { - color: #3c434a; + color: var(--wp-admin-text-body); font-weight: 600; margin-right: 5px; } .theme-overlay .parent-theme { - background: #fff; - border: 1px solid #f0f0f1; - border-left: 4px solid #72aee6; + background: var(--wp-admin-bg-card); + border: 1px solid var(--wp-admin-bg-page); + border-left: 4px solid var(--wp-admin-status-info); font-size: 14px; font-weight: 400; margin-top: 30px; @@ -1070,7 +1070,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { /* Already installed theme */ .theme-browser .theme .theme-installed { - background: #2271b1; + background: var(--wp-admin-status-info-dark); } .theme-browser .theme .notice-success p:before { @@ -1140,8 +1140,8 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { display: inline-flex; justify-content: space-between; align-items: center; - border: 1px solid #c3c4c7; - background: #f6f7f7; + border: 1px solid var(--wp-admin-border-default); + background: var(--wp-admin-bg-alt); } .upload-theme .wp-upload-form input[type="file"], @@ -1157,7 +1157,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { .upload-theme .install-help, .upload-plugin .install-help { - color: #50575e; /* #f1f1f1 background */ + color: var(--wp-admin-text-tertiary); /* #f1f1f1 background */ font-size: 18px; font-style: normal; margin: 0; @@ -1168,7 +1168,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { p.no-themes, p.no-themes-local { clear: both; - color: #646970; + color: var(--wp-admin-text-secondary); font-size: 18px; font-style: normal; margin: 0; @@ -1208,7 +1208,7 @@ p.no-themes-local { .theme-details .num-ratings, .theme-details .no-rating { font-size: 11px; - color: #646970; + color: var(--wp-admin-text-secondary); } .theme-details .no-rating { @@ -1217,8 +1217,8 @@ p.no-themes-local { } .update-from-upload-comparison { - border-top: 1px solid #dcdcde; - border-bottom: 1px solid #dcdcde; + border-top: 1px solid var(--wp-admin-border-light); + border-bottom: 1px solid var(--wp-admin-border-light); text-align: left; margin: 1rem 0 1.4rem; border-collapse: collapse; @@ -1246,7 +1246,7 @@ p.no-themes-local { } .update-from-upload-comparison td.warning { - color: #d63638; + color: var(--wp-admin-status-error); } .update-from-upload-actions { @@ -1258,7 +1258,7 @@ p.no-themes-local { ------------------------------------------------------------------------------*/ .appearance_page_custom-header #headimg { - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); overflow: hidden; width: 100%; } @@ -1294,7 +1294,7 @@ p.no-themes-local { div#custom-background-image { min-height: 100px; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); } div#custom-background-image img { @@ -1303,8 +1303,8 @@ div#custom-background-image img { } .background-position-control input[type="radio"]:checked ~ .button { - background: #f0f0f1; - border-color: #8c8f94; + background: var(--wp-admin-bg-page); + border-color: var(--wp-admin-border-subtle); box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); z-index: 1; } @@ -1312,7 +1312,7 @@ div#custom-background-image img { .background-position-control input[type="radio"]:focus ~ .button { border-color: #4f94d4; box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(34, 113, 177, 0.8); - color: #1d2327; + color: var(--wp-admin-text-primary); } .background-position-control .background-position-center-icon, @@ -1331,7 +1331,7 @@ div#custom-background-image img { } .background-position-control .background-position-center-icon:before { - background-color: #50575e; + background-color: var(--wp-admin-text-tertiary); border-radius: 50%; content: ""; height: 12px; @@ -1340,7 +1340,7 @@ div#custom-background-image img { .background-position-control .button:hover .background-position-center-icon:before, .background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before { - background-color: #1d2327; + background-color: var(--wp-admin-text-primary); } .background-position-control .button-group { @@ -1365,7 +1365,7 @@ div#custom-background-image img { } .background-position-control .button-group:last-child .button { - box-shadow: 0 1px 0 #c3c4c7; + box-shadow: 0 1px 0 var(--wp-admin-border-default); } .background-position-control .button-group > label { @@ -1444,7 +1444,7 @@ body.full-overlay-active { padding: 0; margin: 0; z-index: 10; - background: #f0f0f1; + background: var(--wp-admin-bg-page); border-right: none; } @@ -1551,9 +1551,9 @@ body.full-overlay-active { float: left; width: 45px; height: 45px; - background: #f0f0f1; - border-right: 1px solid #dcdcde; - color: #3c434a; + background: var(--wp-admin-bg-page); + border-right: 1px solid var(--wp-admin-border-light); + color: var(--wp-admin-text-body); cursor: pointer; text-decoration: none; transition: color .1s ease-in-out, background .1s ease-in-out; @@ -1565,8 +1565,8 @@ body.full-overlay-active { .theme-install-overlay .previous-theme:focus, .theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:focus { - background: #dcdcde; - border-color: #c3c4c7; + background: var(--wp-admin-border-light); + border-color: var(--wp-admin-border-default); color: #000; outline: none; box-shadow: none; @@ -1605,8 +1605,8 @@ body.full-overlay-active { .theme-install-overlay .previous-theme.disabled:focus, .theme-install-overlay .next-theme.disabled:hover, .theme-install-overlay .next-theme.disabled:focus { - color: #c3c4c7; - background: #f0f0f1; + color: var(--wp-admin-border-default); + background: var(--wp-admin-bg-page); cursor: default; pointer-events: none; } @@ -1633,7 +1633,7 @@ body.full-overlay-active { left: 0; padding: 9px 0 9px 10px; height: 45px; - color: #646970; + color: var(--wp-admin-text-secondary); outline: 0; line-height: 1; background-color: transparent !important; @@ -1644,7 +1644,7 @@ body.full-overlay-active { .wp-core-ui .wp-full-overlay .collapse-sidebar:hover, .wp-core-ui .wp-full-overlay .collapse-sidebar:focus { - color: #2271b1; + color: var(--wp-admin-status-info-dark); } .wp-full-overlay .collapse-sidebar-arrow, @@ -1681,7 +1681,7 @@ body.full-overlay-active { display: block; content: "\f148"; content: "\f148" / ''; - background: #f0f0f1; + background: var(--wp-admin-bg-page); font: normal 20px/1 dashicons; padding: 0; -webkit-font-smoothing: antialiased; @@ -1716,11 +1716,11 @@ body.full-overlay-active { /* Device/preview size toggles */ .wp-full-overlay { - background: #1d2327; + background: var(--wp-admin-text-primary); } .wp-full-overlay-main { - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); } .expanded .wp-full-overlay-footer { @@ -1732,8 +1732,8 @@ body.full-overlay-active { width: 18%; width: calc( 18% - 1px ); height: 45px; - border-top: 1px solid #dcdcde; - background: #f0f0f1; + border-top: 1px solid var(--wp-admin-border-light); + background: var(--wp-admin-bg-page); } .wp-full-overlay-footer .devices-wrapper { @@ -1742,8 +1742,8 @@ body.full-overlay-active { .wp-full-overlay-footer .devices { position: relative; - background: #f0f0f1; - box-shadow: -20px 0 10px -5px #f0f0f1; + background: var(--wp-admin-bg-page); + box-shadow: -20px 0 10px -5px var(--wp-admin-bg-page); } .wp-full-overlay-footer .devices button { @@ -1774,30 +1774,30 @@ body.full-overlay-active { vertical-align: top; margin: 3px 0; padding: 4px 8px; - color: #646970; + color: var(--wp-admin-text-secondary); } .wp-full-overlay-footer .devices button.active { - border-bottom-color: #1d2327; + border-bottom-color: var(--wp-admin-text-primary); } .wp-full-overlay-footer .devices button:hover, .wp-full-overlay-footer .devices button:focus { - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .wp-full-overlay-footer .devices button:focus, .wp-full-overlay-footer .devices button.active:hover { - border-bottom-color: #2271b1; + border-bottom-color: var(--wp-admin-status-info-dark); } .wp-full-overlay-footer .devices button.active:before { - color: #1d2327; + color: var(--wp-admin-text-primary); } .wp-full-overlay-footer .devices button:hover:before, .wp-full-overlay-footer .devices button:focus:before { - color: #2271b1; + color: var(--wp-admin-status-info-dark); } .wp-full-overlay-footer .devices .preview-desktop:before { @@ -1859,7 +1859,7 @@ body.full-overlay-active { #customize-container, #customize-controls .notice.notification-overlay { - background: #f0f0f1; + background: var(--wp-admin-bg-page); z-index: 500000; position: fixed; overflow: visible; @@ -1931,7 +1931,7 @@ body.full-overlay-active { .install-theme-info .theme-screenshot { margin: 15px 0; width: 258px; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); position: relative; overflow: hidden; } @@ -1960,7 +1960,7 @@ body.full-overlay-active { .theme-details .theme-description { float: left; - color: #646970; + color: var(--wp-admin-text-secondary); line-height: 1.6; max-width: 100%; } @@ -1971,24 +1971,24 @@ body.full-overlay-active { } .theme-install-overlay .wp-full-overlay-sidebar { - background: #f0f0f1; - border-right: 1px solid #dcdcde; + background: var(--wp-admin-bg-page); + border-right: 1px solid var(--wp-admin-border-light); } .theme-install-overlay .wp-full-overlay-sidebar-content { - background: #fff; - border-top: 1px solid #dcdcde; - border-bottom: 1px solid #dcdcde; + background: var(--wp-admin-bg-card); + border-top: 1px solid var(--wp-admin-border-light); + border-bottom: 1px solid var(--wp-admin-border-light); } .theme-install-overlay .wp-full-overlay-main { position: absolute; z-index: 0; - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); } .customize-loading #customize-container { - background-color: #f0f0f1; + background-color: var(--wp-admin-bg-page); } #customize-preview.wp-full-overlay-main:before, diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 99039d3c7c66a..9e2c146e48f2f 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-bg-alt); } .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); } .deleting .widget-title, .deleting .widget-top .widget-action .toggle-indicator:before { - color: #a7aaad; + color: var(--wp-admin-text-placeholder); } /* 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-border-default); box-sizing: border-box; cursor: pointer; line-height: 1.6; @@ -102,16 +102,16 @@ .media-widget-control .attachment-media-view .button-add-media { cursor: pointer; - background-color: #f0f0f1; - color: #2c3338; + background-color: var(--wp-admin-bg-page); + color: var(--wp-admin-border-emphasis); } .media-widget-control .attachment-media-view .button-add-media:hover { - background-color: #fff; + background-color: var(--wp-admin-bg-card); } .media-widget-control .attachment-media-view .button-add-media:focus { - background-color: #fff; + background-color: var(--wp-admin-bg-card); border-style: solid; border-color: #4f94d4; box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); @@ -137,7 +137,7 @@ .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: linear-gradient(45deg, var(--wp-admin-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)), linear-gradient(45deg, var(--wp-admin-border-default) 25%, transparent 25%, transparent 75%, var(--wp-admin-border-default) 75%, var(--wp-admin-border-default)); background-position: 0 0, 10px 10px; background-size: 20px 20px; } @@ -175,7 +175,7 @@ position: relative; width: 100%; top: -90px; - color: #fff; + color: var(--wp-admin-text-inverse); 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-status-error); } .media-widget-image-link { @@ -205,7 +205,7 @@ } .media-widget-preview .placeholder { - background: #f0f0f1; + background: var(--wp-admin-bg-page); } .media-widget-gallery-preview .gallery-item { @@ -257,7 +257,7 @@ .media-widget-gallery-preview .gallery-icon-placeholder-text { font-weight: 600; font-size: 2em; - color: #fff; + color: var(--wp-admin-text-inverse); } @@ -271,7 +271,7 @@ } .widget-placeholder { - border: 1px dashed #c3c4c7; + border: 1px dashed var(--wp-admin-border-default); margin: 0 auto 10px; height: 45px; width: 100%; @@ -354,12 +354,12 @@ padding: 0 0 15px; margin: 0; font-style: normal; - color: #646970; + color: var(--wp-admin-text-secondary); } .widget-holder .description, .inactive-sidebar .description { - color: #50575e; + color: var(--wp-admin-text-tertiary); } #widgets-right .widgets-holder-wrap .description { @@ -538,7 +538,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-border-light); } #available-widgets .widget-control-edit .edit, @@ -552,19 +552,19 @@ div#widgets-right .closed .widgets-sortables { .widget-control-edit { display: block; - color: #646970; - background: #f0f0f1; + color: var(--wp-admin-text-secondary); + background: var(--wp-admin-bg-page); padding: 0 15px; line-height: 3.30769230; - border-left: 1px solid #dcdcde; + border-left: 1px solid var(--wp-admin-border-light); } #widgets-left .widget-control-edit:hover, #widgets-right .widget-control-edit:hover { - color: #fff; - background: #3c434a; + color: var(--wp-admin-text-inverse); + background: var(--wp-admin-text-body); border-left: 0; - outline: 1px solid #3c434a; + outline: 1px solid var(--wp-admin-text-body); } .widgets-holder-wrap .sidebar-name, @@ -611,7 +611,7 @@ div#widgets-right .closed .widgets-sortables { } .widget-inside { - background: #fff; + background: var(--wp-admin-bg-card); } .widget-inside select { @@ -629,7 +629,7 @@ div#widgets-right .closed .widgets-sortables { } .js #removing-widget { - color: #72aee6; + color: var(--wp-admin-status-info); } .widget-control-noform, @@ -681,7 +681,7 @@ 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; + border-color: var(--wp-admin-border-subtle); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } @@ -697,12 +697,12 @@ div#widgets-right .widget-top:hover, } .widgets-chooser ul { - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin-border-default); } .widgets-chooser li { - border-bottom: 1px solid #c3c4c7; - background: #fff; + border-bottom: 1px solid var(--wp-admin-border-default); + background: var(--wp-admin-bg-card); margin: 0; position: relative; } @@ -731,7 +731,7 @@ div#widgets-right .widget-top:hover, .widgets-chooser .widgets-chooser-selected .widgets-chooser-button { background: var(--wp-admin-theme-color, #3858e9); - color: #fff; + color: var(--wp-admin-text-inverse); } .widgets-chooser .widgets-chooser-selected:before { @@ -740,7 +740,7 @@ div#widgets-right .widget-top:hover, display: block; -webkit-font-smoothing: antialiased; font: normal 26px/1 dashicons; - color: #fff; + color: var(--wp-admin-text-inverse); position: absolute; top: 7px; left: 5px; @@ -783,7 +783,7 @@ div#widgets-right .widget-top:hover, } .custom-html-widget-fields > p > .CodeMirror { - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin-border-light); } .custom-html-widget-fields code { padding-top: 1px;