From 88e2f22213add8cf5c04b6c136f4e298a55ce8fc Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 20 Apr 2021 12:36:03 -0400 Subject: [PATCH 01/62] Update buttons --- src/wp-admin/css/common.css | 92 ++++++++++++++++++++++--------- src/wp-includes/css/buttons.css | 98 ++++++++++++++++----------------- 2 files changed, 115 insertions(+), 75 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index ee0aaaf4c8921..234b1c3f6cc36 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1,3 +1,46 @@ +body { + --wp-admin--page--background: #f0f0f1; + --wp-admin--surface--background: #fff; + --wp-admin--surface--border: #c3c4c7; + + --wp-admin--text--color: #3c434a; + --wp-admin--text-secondary--color: #646970; + --wp-admin--heading--color: #1d2327; + + --wp-admin--code--background: #dcdcde; + + --wp-admin--admin-menu--background: #1d2327; + + --wp-admin--link--color: #2271b1; + --wp-admin--link--color--hover: #135e96; + --wp-admin--link--color--delete: #d63638; + --wp-admin--link--color--delete-hover: #d63638; + + --wp-admin--button-primary: #2271b1; + --wp-admin--button-primary--hover: #135e96; + --wp-admin--button-secondary: #f6f7f7; + --wp-admin--button-secondary--hover: #f0f0f1; + --wp-admin--button-secondary--shadow: #dcdcde; + --wp-admin--button--border--disabled: #dcdcde; + --wp-admin--button-primary--text: var(--wp-admin--button-secondary); + --wp-admin--button-secondary--text: var(--wp-admin--button-primary); + --wp-admin--input--border: var(--wp-admin--surface--border); + --wp-admin--input--background: var(--wp-admin--surface--background); + --wp-admin--input--color: #2c3338; + --wp-admin--input--border--focus: var(--wp-admin--button-primary); + --wp-admin--input--background--readonly: #f0f0f1; + --wp-admin--input--color--placeholder: #646970; + --wp-admin--checkbox--fill: var(--wp-admin--button-primary); +} + +body { + --wp-admin--button-primary: #3858e9; + --wp-admin--button-primary--hover: #4664eb; + --wp-admin--link--color: #3858e9; + --wp-admin--link--color--hover: #183ad6; +} + + /* 2 column liquid layout */ #wpwrap { height: auto; @@ -152,8 +195,8 @@ font-size: 14px; font-weight: 600; padding: 15px 23px 14px; - background: #f0f0f1; - color: #2271b1; + background: var(--wp-admin--page--background); + color: var(--wp-admin--link--color); z-index: 100000; line-height: normal; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); @@ -215,8 +258,8 @@ body { } body { - background: #f0f0f1; - color: #3c434a; + background: var(--wp-admin--page--background); + color: var(--wp-admin--text--color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4em; @@ -252,7 +295,7 @@ td { /* Any change to the default link style must be applied to button-link too. */ a { - color: #2271b1; + color: var(--wp-admin--link--color); transition-property: border, background, color; transition-duration: .05s; transition-timing-function: ease-in-out; @@ -265,18 +308,18 @@ div { a:hover, a:active { - color: #135e96; + color: var(--wp-admin--link--color--hover); } a:focus, a:focus .media-icon img, .wp-person a:focus .gravatar { - color: #043959; + color: var(--wp-admin--link--color--hover); box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); - /* Only visible in Windows High Contrast mode */ - outline: 1px solid transparent; + 0 0 0 1px var(--wp-admin--button-primary--hover), + 0 0 2px 1px var(--wp-admin--button-primary); + /* Only visible in Windows High Contrast mode */ + outline: 1px solid transparent; } #adminmenu a:focus { @@ -331,14 +374,14 @@ h6 { } h1 { - color: #1d2327; + color: var(--wp-admin--heading--color); font-size: 2em; margin: .67em 0; } h2, h3 { - color: #1d2327; + color: var(--wp-admin--heading--color); font-size: 1.3em; margin: 1em 0; } @@ -419,8 +462,7 @@ kbd, code { padding: 3px 5px 2px 5px; margin: 0 1px; - background: #f0f0f1; - background: rgba(0, 0, 0, 0.07); + background: var(--wp-admin--code--background); font-size: 13px; } @@ -430,7 +472,7 @@ code { padding: 0; font-size: 13px; float: left; - color: #646970; + color: var(--wp-admin--text-secondary--color); } .subsubsub a { @@ -618,14 +660,14 @@ code { position: relative; top: -3px; text-decoration: none; - border: 1px solid #2271b1; + border: 1px solid var(--wp-admin--button-primary); border-radius: 2px; text-shadow: none; font-weight: 600; font-size: 13px; line-height: normal; /* IE8-IE11 need this for buttons */ - color: #2271b1; /* use the standard color used for buttons */ - background: #f6f7f7; + color: var(--wp-admin--button-secondary--text); + background: var(--wp-admin--button-secondary); cursor: pointer; } @@ -635,14 +677,14 @@ code { .wrap .add-new-h2:hover, /* deprecated */ .wrap .page-title-action:hover { - background: #f0f0f1; - border-color: #0a4b78; - color: #0a4b78; + background: var(--wp-admin--button-secondary--hover); + border-color: var(--wp-admin--button-primary--hover); + color: var(--wp-admin--button-secondary--text); } /* lower specificity: color needs to be overridden by :hover and :active */ .page-title-action:focus { - color: #0a4b78; + color: var(--wp-admin--button-secondary--text); } /* Dashicon for language options on General Settings and Profile screens */ @@ -652,8 +694,8 @@ code { } .wrap .page-title-action:focus { - border-color: #3582c4; - box-shadow: 0 0 0 1px #3582c4; + border-color: var(--wp-admin--button-primary--hover); + box-shadow: 0 0 0 1px var(--wp-admin--button-primary); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 6da6da51e07d4..2b8d2486ba166 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -115,9 +115,9 @@ TABLE OF CONTENTS: .wp-core-ui .button, .wp-core-ui .button-secondary { - color: #2271b1; - border-color: #2271b1; - background: #f6f7f7; + background: var(--wp-admin--button-secondary); + border-color: var(--wp-admin--button-primary); + color: var(--wp-admin--button-secondary--text); vertical-align: top; } @@ -128,18 +128,18 @@ TABLE OF CONTENTS: .wp-core-ui .button.hover, .wp-core-ui .button:hover, .wp-core-ui .button-secondary:hover{ - background: #f0f0f1; - border-color: #0a4b78; - color: #0a4b78; + background: var(--wp-admin--button-secondary--hover); + border-color: var(--wp-admin--button-primary--hover); + color: var(--wp-admin--button-secondary--text); } .wp-core-ui .button.focus, .wp-core-ui .button:focus, .wp-core-ui .button-secondary:focus { - background: #f6f7f7; - border-color: #3582c4; - color: #0a4b78; - box-shadow: 0 0 0 1px #3582c4; + background: var(--wp-admin--button-secondary--hover); + border-color: var(--wp-admin--button-primary--hover); + box-shadow: 0 0 0 1px var(--wp-admin--button-primary); + color: var(--wp-admin--button-secondary--text); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; /* Reset inherited offset from Gutenberg */ @@ -149,25 +149,23 @@ TABLE OF CONTENTS: /* :active state */ .wp-core-ui .button:active, .wp-core-ui .button-secondary:active { - background: #f6f7f7; - border-color: #8c8f94; box-shadow: none; } /* pressed state e.g. a selected setting */ .wp-core-ui .button.active, .wp-core-ui .button.active:hover { - background-color: #dcdcde; - color: #135e96; - border-color: #0a4b78; - box-shadow: inset 0 2px 5px -3px #0a4b78; + background-color: var(--wp-admin--button-secondary--shadow); + border-color: var(--wp-admin--button-primary--hover); + box-shadow: inset 0 2px 5px -3px var(--wp-admin--button-primary--hover); + color: var(--wp-admin--button-secondary--text); } .wp-core-ui .button.active:focus { - border-color: #3582c4; + border-color: var(--wp-admin--button-primary); box-shadow: - inset 0 2px 5px -3px #0a4b78, - 0 0 0 1px #3582c4; + inset 0 2px 5px -3px var(--wp-admin--button-primary--hover), + 0 0 0 1px var(--wp-admin--button-primary); } .wp-core-ui .button[disabled], @@ -177,10 +175,10 @@ TABLE OF CONTENTS: .wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled, .wp-core-ui .button-disabled { - color: #a7aaad !important; - border-color: #dcdcde !important; - background: #f6f7f7 !important; + background: var(--wp-admin--button-secondary) !important; + border-color: var(--wp-admin--button--border--disabled) !important; box-shadow: none !important; + color: var(--wp-admin--text-secondary--color) !important; cursor: default; transform: none !important; } @@ -196,7 +194,7 @@ TABLE OF CONTENTS: cursor: pointer; text-align: left; /* Mimics the default link style in common.css */ - color: #2271b1; + color: var(--wp-admin--link--color); text-decoration: underline; transition-property: border, background, color; transition-duration: .05s; @@ -205,25 +203,25 @@ TABLE OF CONTENTS: .wp-core-ui .button-link:hover, .wp-core-ui .button-link:active { - color: #135e96; + color: var(--wp-admin--link--color--hover); } .wp-core-ui .button-link:focus { - color: #043959; + color: var(--wp-admin--link--color--hover); box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + 0 0 0 1px var(--wp-admin--button-primary--hover), + 0 0 2px 1px var(--wp-admin--button-primary); /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } .wp-core-ui .button-link-delete { - color: #d63638; + color: var(--wp-admin--link--color--delete); } .wp-core-ui .button-link-delete:hover, .wp-core-ui .button-link-delete:focus { - color: #d63638; + color: var(--wp-admin--link--color--delete-hover); background: transparent; } @@ -238,9 +236,9 @@ TABLE OF CONTENTS: ---------------------------------------------------------------------------- */ .wp-core-ui .button-primary { - background: #2271b1; - border-color: #2271b1; - color: #fff; + background: var(--wp-admin--button-primary); + border-color: var(--wp-admin--button-primary); + color: var(--wp-admin--button-primary--text); text-decoration: none; text-shadow: none; } @@ -249,36 +247,36 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus { - background: #135e96; - border-color: #135e96; - color: #fff; + background: var(--wp-admin--button-primary--hover); + border-color: var(--wp-admin--button-primary--hover); + color: var(--wp-admin--button-primary--text); } .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus { box-shadow: - 0 0 0 1px #fff, - 0 0 0 3px #2271b1; + 0 0 0 1px var(--wp-admin--button-secondary), + 0 0 0 3px var(--wp-admin--button-primary); } .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary:active { - background: #135e96; - border-color: #135e96; + background: var(--wp-admin--button-primary--hover); + border-color: var(--wp-admin--button-primary--hover); box-shadow: none; - color: #fff; + color: var(--wp-admin--button-primary--text); } .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary-disabled, .wp-core-ui .button-primary.disabled { - color: #a7aaad !important; - background: #f6f7f7 !important; - border-color: #dcdcde !important; + background: var(--wp-admin--button-secondary) !important; + border-color: var(--wp-admin--button--border--disabled) !important; box-shadow: none !important; + color: var(--wp-admin--text-secondary--color) !important; text-shadow: none !important; cursor: default; } @@ -320,17 +318,17 @@ TABLE OF CONTENTS: /* pressed state e.g. a selected setting */ .wp-core-ui .button-group > .button.active { - background-color: #dcdcde; - color: #135e96; - border-color: #0a4b78; - box-shadow: inset 0 2px 5px -3px #0a4b78; + background-color: var(--wp-admin--button-secondary--shadow); + border-color: var(--wp-admin--button-primary--hover); + box-shadow: inset 0 2px 5px -3px var(--wp-admin--button-primary--hover); + color: var(--wp-admin--button-secondary--text); } .wp-core-ui .button-group > .button.active:focus { - border-color: #3582c4; + border-color: var(--wp-admin--button-primary); box-shadow: - inset 0 2px 5px -3px #0a4b78, - 0 0 0 1px #3582c4; + inset 0 2px 5px -3px var(--wp-admin--button-primary--hover), + 0 0 0 1px var(--wp-admin--button-primary); } /* ---------------------------------------------------------------------------- From e75dcde832df3bb8c4f39baa2d10f3e97da47691 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 20 Apr 2021 12:47:49 -0400 Subject: [PATCH 02/62] Update borders --- src/wp-admin/css/common.css | 38 ++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 234b1c3f6cc36..54ab419b82d8e 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -233,7 +233,7 @@ p.popular-tags, .feature-filter, .imgedit-group, .comment-ays { - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } @@ -523,12 +523,12 @@ code { .widefat thead th, .widefat thead td { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin--surface--border); } .widefat tfoot th, .widefat tfoot td { - border-top: 1px solid #c3c4c7; + border-top: 1px solid var(--wp-admin--surface--border); border-bottom: none; } @@ -814,7 +814,7 @@ img.emoji { } .stuffbox .hndle { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin--surface--border); } .quicktags { @@ -1045,7 +1045,7 @@ th.action-links { padding: 0 10px; width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); background: #fff; color: #50575e; font-size: 13px; @@ -1422,7 +1422,7 @@ th.action-links { div.updated, div.error { background: #fff; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); border-left-width: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); margin: 5px 15px 2px; @@ -1752,7 +1752,7 @@ p.auto-update-status { margin: 0 20px -1px 0px; position: relative; background-color: #fff; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); border-top: none; box-shadow: 0 0 0 transparent; } @@ -1769,7 +1769,7 @@ p.auto-update-status { } #screen-meta-links .show-settings { - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); border-top: none; height: auto; margin-bottom: 0; @@ -1913,7 +1913,7 @@ p.auto-update-status { bottom: 0; left: 150px; right: 170px; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); border-top: none; border-bottom: none; background: #f0f6fc; @@ -2108,7 +2108,7 @@ html.wp-toolbar { display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin--surface--border); } .postbox-header .hndle { @@ -2270,7 +2270,7 @@ html.wp-toolbar { .nav-tab { float: left; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); border-bottom: none; margin-left: 0.5em; /* half the font size so set the font size properly */ padding: 5px 10px; @@ -2318,7 +2318,7 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ .wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */ .nav-tab-wrapper { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin--surface--border); margin: 0; padding-top: 9px; padding-bottom: 0; @@ -2903,7 +2903,7 @@ div.action-links { #plugin-information pre { padding: 7px; overflow: auto; - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); } #plugin-information blockquote { @@ -3294,7 +3294,7 @@ img { display: block; position: absolute; left: 2px; - border-left: 1px solid #c3c4c7; + border-left: 1px solid var(--wp-admin--surface--border); top: -13px; bottom: 10px; } @@ -3302,18 +3302,18 @@ img { content: ""; position: absolute; display: block; - border-left: 1px solid #c3c4c7; + border-left: 1px solid var(--wp-admin--surface--border); left: 2px; top: -5px; height: 18px; width: 7px; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin--surface--border); } .tree-folder > li::after { content: ""; position: absolute; display: block; - border-left: 1px solid #c3c4c7; + border-left: 1px solid var(--wp-admin--surface--border); left: 2px; bottom: -7px; top: 0; @@ -4142,13 +4142,13 @@ img { h3 .nav-tab, nav .nav-tab { margin: 10px 10px 0 0; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin--surface--border); } .nav-tab-active:hover, .nav-tab-active:focus, .nav-tab-active:focus:active { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin--surface--border); } .wp-filter .search-form input[type="search"] { From 6df783e58ea242d07338f20c76b263700a321177 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 20 Apr 2021 12:47:56 -0400 Subject: [PATCH 03/62] Contextual help --- src/wp-admin/css/common.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 54ab419b82d8e..d03506bf2fc69 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -3,9 +3,9 @@ body { --wp-admin--surface--background: #fff; --wp-admin--surface--border: #c3c4c7; + --wp-admin--heading--color: #1d2327; --wp-admin--text--color: #3c434a; --wp-admin--text-secondary--color: #646970; - --wp-admin--heading--color: #1d2327; --wp-admin--code--background: #dcdcde; @@ -31,6 +31,9 @@ body { --wp-admin--input--background--readonly: #f0f0f1; --wp-admin--input--color--placeholder: #646970; --wp-admin--checkbox--fill: var(--wp-admin--button-primary); + + --wp-admin--help-tab--background: #f0f6fc; + --wp-admin--help-tab--border--active: #72aee6; } body { @@ -38,6 +41,9 @@ body { --wp-admin--button-primary--hover: #4664eb; --wp-admin--link--color: #3858e9; --wp-admin--link--color--hover: #183ad6; + + --wp-admin--help-tab--background: #f0f2ff; + --wp-admin--help-tab--border--active: #3858e9; } @@ -1916,7 +1922,7 @@ p.auto-update-status { border: 1px solid var(--wp-admin--surface--border); border-top: none; border-bottom: none; - background: #f0f6fc; + background: var(--wp-admin--help-tab--background); } #contextual-help-wrap.no-sidebar #contextual-help-back { @@ -1954,20 +1960,20 @@ p.auto-update-status { } .contextual-help-tabs a:hover { - color: #2c3338; + color: var(--wp-admin--text--color); } .contextual-help-tabs .active { padding: 0; margin: 0 -1px 0 0; - border-left: 2px solid #72aee6; - background: #f0f6fc; + border-left: 2px solid var(--wp-admin--help-tab--border--active); + background: var(--wp-admin--help-tab--background); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02); } .contextual-help-tabs .active a { - border-color: #c3c4c7; - color: #2c3338; + border-color: var(--wp-admin--surface--border); + color: var(--wp-admin--text--color); } .contextual-help-tabs-wrap { From 66c782683a71ae83e67f6d42bc15bae986be19a0 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 20 Apr 2021 12:58:54 -0400 Subject: [PATCH 04/62] list table text --- src/wp-admin/css/common.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index d03506bf2fc69..a47b0a9c41d54 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2015,7 +2015,7 @@ html.wp-toolbar { .widefat th, .widefat td { - color: #50575e; + color: var(--wp-admin--text--color); } .widefat th, @@ -2028,7 +2028,7 @@ html.wp-toolbar { .widefat thead tr td, .widefat tfoot tr th, .widefat tfoot tr td { - color: #2c3338; + color: var(--wp-admin--heading--color); } .widefat td p { @@ -2038,7 +2038,7 @@ html.wp-toolbar { .widefat p, .widefat ol, .widefat ul { - color: #2c3338; + color: var(--wp-admin--text--color); } .widefat .column-comment p { @@ -2257,7 +2257,7 @@ html.wp-toolbar { left: 0; right: 0; padding: 10px 20px; - color: #50575e; + color: var(--wp-admin--text-secondary--color); } #wpfooter p { From 5a990630f28f04639672c9698976fe84495cc9bd Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 20 Apr 2021 12:59:00 -0400 Subject: [PATCH 05/62] Nav tabs --- src/wp-admin/css/common.css | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a47b0a9c41d54..5bdec16b7b0c6 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -34,6 +34,16 @@ body { --wp-admin--help-tab--background: #f0f6fc; --wp-admin--help-tab--border--active: #72aee6; + + --wp-admin--nav-tab--background: #dcdcde; + --wp-admin--nav-tab--border: var(--wp-admin--surface--border); + --wp-admin--nav-tab--color: #50575e; + + --wp-admin--nav-tab--background--hover: var(--wp-admin--surface--background); + --wp-admin--nav-tab--color--hover: #3c434a; + + --wp-admin--nav-tab--background--active: var(--wp-admin--page--background); + --wp-admin--nav-tab--color--active: var(--wp-admin--heading--color); } body { @@ -2276,15 +2286,15 @@ html.wp-toolbar { .nav-tab { float: left; - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--nav-tab--border); border-bottom: none; margin-left: 0.5em; /* half the font size so set the font size properly */ padding: 5px 10px; font-size: 14px; line-height: 1.71428571; font-weight: 600; - background: #dcdcde; - color: #50575e; + background: var(--wp-admin--nav-tab--background); + color: var(--wp-admin--nav-tab--color); text-decoration: none; white-space: nowrap; } @@ -2298,8 +2308,8 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */ .nav-tab:hover, .nav-tab:focus { - background-color: #fff; - color: #3c434a; + background-color: var(--wp-admin--nav-tab--background--hover); + color: var(--wp-admin--nav-tab--color--hover); } .nav-tab-active, @@ -2309,16 +2319,15 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */ .nav-tab-active { margin-bottom: -1px; - color: #3c434a; } .nav-tab-active, .nav-tab-active:hover, .nav-tab-active:focus, .nav-tab-active:focus:active { - border-bottom: 1px solid #f0f0f1; - background: #f0f0f1; - color: #000; + border-bottom: 1px solid var(--wp-admin--nav-tab--background--active); + background: var(--wp-admin--nav-tab--background--active); + color: var(--wp-admin--nav-tab--color--active); } h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ From 6e00d76ecf0adc2e4d8331a7cd1b6a63bc7c1142 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 20 Apr 2021 13:04:37 -0400 Subject: [PATCH 06/62] Star rating icons --- src/wp-admin/css/common.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 5bdec16b7b0c6..ec3974b5e5357 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -44,6 +44,8 @@ body { --wp-admin--nav-tab--background--active: var(--wp-admin--page--background); --wp-admin--nav-tab--color--active: var(--wp-admin--heading--color); + + --wp-admin--rating--fill: #dba617; } body { @@ -54,6 +56,8 @@ body { --wp-admin--help-tab--background: #f0f2ff; --wp-admin--help-tab--border--active: #3858e9; + + --wp-admin--rating--fill: #f2a60f; } @@ -2593,7 +2597,7 @@ div.star-holder .star-rating { vertical-align: top; transition: color .1s ease-in; text-align: center; - color: #dba617; + color: var(--wp-admin--rating--fill); } .star-rating .star-full:before { From 723fab63ee51cb6bcaa4a4fad6b6375cebbe9ccf Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 20 Apr 2021 13:12:55 -0400 Subject: [PATCH 07/62] Plugin install modal --- src/wp-admin/css/common.css | 41 +++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index ec3974b5e5357..82aadfbe8810d 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -46,6 +46,11 @@ body { --wp-admin--nav-tab--color--active: var(--wp-admin--heading--color); --wp-admin--rating--fill: #dba617; + --wp-admin--rating--base: #dcdcde; + + /* --wp-admin--notice-warning--background: #f6f7f7; + --wp-admin--notice-warning--border: #dcdcde; + --wp-admin--notice-warning--color: */ } body { @@ -2623,7 +2628,7 @@ div.action-links { /* Plugin install thickbox */ #plugin-information { - background: #fff; + background: var(--wp-admin--surface--background); position: fixed; top: 0; right: 0; @@ -2641,7 +2646,7 @@ div.action-links { #plugin-information-title { padding: 0 26px; - background: #f6f7f7; + background: var(--wp-admin--page--background); font-size: 22px; font-weight: 600; line-height: 2.4; @@ -2705,8 +2710,8 @@ div.action-links { min-height: 36px; font-size: 0; z-index: 1; - border-bottom: 1px solid #dcdcde; - background: #f6f7f7; + border-bottom: 1px solid var(--wp-admin--surface--border); + background: var(--wp-admin--page--background); } #plugin-information-tabs a { @@ -2723,11 +2728,11 @@ div.action-links { #plugin-information-tabs a.current { margin: 0 -1px -1px; - background: #fff; - border: 1px solid #dcdcde; - border-bottom-color: #fff; + background: var(--wp-admin--surface--background); + border: 1px solid var(--wp-admin--surface--border); + border-bottom-color: var(--wp-admin--surface--background); padding-top: 8px; - color: #2c3338; + color: var(--wp-admin--text--color); } #plugin-information-tabs.with-banner a.current { @@ -2742,7 +2747,7 @@ div.action-links { #plugin-information-content { overflow: hidden; /* equal height column trick */ - background: #fff; + background: var(--wp-admin--surface--background); position: relative; top: 0; right: 0; @@ -2785,20 +2790,20 @@ div.action-links { padding: 16px 16px 99999px; /* equal height column trick */ margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */ width: 217px; - border-left: 1px solid #dcdcde; - background: #f6f7f7; - color: #646970; + border-left: 1px solid var(--wp-admin--surface--border); + background: var(--wp-admin--page--background); + color: var(--wp-admin--text-secondary--color); } #plugin-information .fyi strong { - color: #3c434a; + color: var(--wp-admin--text--color); } #plugin-information .fyi h3 { font-weight: 600; text-transform: uppercase; font-size: 12px; - color: #646970; + color: var(--wp-admin--text-secondary--color); margin: 24px 0 8px; } @@ -2835,13 +2840,13 @@ div.action-links { #plugin-information .counter-back { height: 17px; width: 92px; - background-color: #dcdcde; + background-color: var(--wp-admin--rating--base); float: left; } #plugin-information .counter-bar { height: 17px; - background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */ + background-color: var(--wp-admin--rating--fill); float: left; } @@ -2877,8 +2882,8 @@ div.action-links { bottom: 0; left: 0; height: 40px; /* actual height: 40+13+13+1=67 */ - border-top: 1px solid #dcdcde; - background: #f6f7f7; + border-top: 1px solid var(--wp-admin--surface--border); + background: var(--wp-admin--page--background); } /* rtl:ignore */ From c7e68fd77c16d072864b11ddf562f46fdbe38746 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 22 Apr 2021 12:43:42 -0400 Subject: [PATCH 08/62] Tweak variable names --- src/wp-admin/css/common.css | 68 ++++++++++++++------------------- src/wp-includes/css/buttons.css | 30 +++++++-------- 2 files changed, 43 insertions(+), 55 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 82aadfbe8810d..5adf9c4632939 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -4,6 +4,7 @@ body { --wp-admin--surface--border: #c3c4c7; --wp-admin--heading--color: #1d2327; + --wp-admin--heading-secondary--color: #50575e; --wp-admin--text--color: #3c434a; --wp-admin--text-secondary--color: #646970; @@ -13,37 +14,37 @@ body { --wp-admin--link--color: #2271b1; --wp-admin--link--color--hover: #135e96; - --wp-admin--link--color--delete: #d63638; - --wp-admin--link--color--delete-hover: #d63638; + --wp-admin--link-delete--color: #d63638; + --wp-admin--link-delete--color--hover: #d63638; + --wp-admin--button: #f6f7f7; + --wp-admin--button--hover: #f0f0f1; + --wp-admin--button--shadow: #dcdcde; + --wp-admin--button--border--disabled: #dcdcde; --wp-admin--button-primary: #2271b1; --wp-admin--button-primary--hover: #135e96; - --wp-admin--button-secondary: #f6f7f7; - --wp-admin--button-secondary--hover: #f0f0f1; - --wp-admin--button-secondary--shadow: #dcdcde; - --wp-admin--button--border--disabled: #dcdcde; - --wp-admin--button-primary--text: var(--wp-admin--button-secondary); - --wp-admin--button-secondary--text: var(--wp-admin--button-primary); - --wp-admin--input--border: var(--wp-admin--surface--border); - --wp-admin--input--background: var(--wp-admin--surface--background); + + --wp-admin--button--text: var(--wp-admin--button-primary); + --wp-admin--button-primary--text: var(--wp-admin--button); + --wp-admin--input--color: #2c3338; + --wp-admin--input--color--placeholder: #646970; + --wp-admin--input--border: var(--wp-admin--surface--border); --wp-admin--input--border--focus: var(--wp-admin--button-primary); + --wp-admin--input--background: var(--wp-admin--surface--background); --wp-admin--input--background--readonly: #f0f0f1; - --wp-admin--input--color--placeholder: #646970; --wp-admin--checkbox--fill: var(--wp-admin--button-primary); --wp-admin--help-tab--background: #f0f6fc; --wp-admin--help-tab--border--active: #72aee6; - --wp-admin--nav-tab--background: #dcdcde; --wp-admin--nav-tab--border: var(--wp-admin--surface--border); --wp-admin--nav-tab--color: #50575e; - - --wp-admin--nav-tab--background--hover: var(--wp-admin--surface--background); --wp-admin--nav-tab--color--hover: #3c434a; - - --wp-admin--nav-tab--background--active: var(--wp-admin--page--background); --wp-admin--nav-tab--color--active: var(--wp-admin--heading--color); + --wp-admin--nav-tab--background: #dcdcde; + --wp-admin--nav-tab--background--hover: var(--wp-admin--surface--background); + --wp-admin--nav-tab--background--active: var(--wp-admin--page--background); --wp-admin--rating--fill: #dba617; --wp-admin--rating--base: #dcdcde; @@ -53,19 +54,6 @@ body { --wp-admin--notice-warning--color: */ } -body { - --wp-admin--button-primary: #3858e9; - --wp-admin--button-primary--hover: #4664eb; - --wp-admin--link--color: #3858e9; - --wp-admin--link--color--hover: #183ad6; - - --wp-admin--help-tab--background: #f0f2ff; - --wp-admin--help-tab--border--active: #3858e9; - - --wp-admin--rating--fill: #f2a60f; -} - - /* 2 column liquid layout */ #wpwrap { height: auto; @@ -508,7 +496,7 @@ code { .subsubsub a .count, .subsubsub a.current .count { - color: #50575e; /* #f1f1f1 background */ + color: var(--wp-admin--heading-secondary--color); font-weight: 400; } @@ -666,7 +654,7 @@ code { .subtitle { margin: 0; padding-left: 25px; - color: #50575e; + color: var(--wp-admin--heading-secondary--color); font-size: 14px; font-weight: 400; line-height: 1; @@ -691,8 +679,8 @@ code { font-weight: 600; font-size: 13px; line-height: normal; /* IE8-IE11 need this for buttons */ - color: var(--wp-admin--button-secondary--text); - background: var(--wp-admin--button-secondary); + color: var(--wp-admin--button--text); + background: var(--wp-admin--button); cursor: pointer; } @@ -702,14 +690,14 @@ code { .wrap .add-new-h2:hover, /* deprecated */ .wrap .page-title-action:hover { - background: var(--wp-admin--button-secondary--hover); + background: var(--wp-admin--button--hover); border-color: var(--wp-admin--button-primary--hover); - color: var(--wp-admin--button-secondary--text); + color: var(--wp-admin--button--text); } /* lower specificity: color needs to be overridden by :hover and :active */ .page-title-action:focus { - color: var(--wp-admin--button-secondary--text); + color: var(--wp-admin--button--text); } /* Dashicon for language options on General Settings and Profile screens */ @@ -748,7 +736,7 @@ div#widgets-right .widget-top:hover, .ac_match, .subsubsub a.current { - color: #000; + color: var(--wp-admin--text--color); } .striped > tbody > :nth-child(odd), @@ -1072,7 +1060,7 @@ th.action-links { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); border: 1px solid var(--wp-admin--surface--border); background: #fff; - color: #50575e; + color: ; font-size: 13px; } @@ -2495,7 +2483,7 @@ body.iframe { .importer-action { line-height: 1.55; /* Same as with .updating-message */ - color: #50575e; + color: ; margin-bottom: 1em; } @@ -3510,7 +3498,7 @@ img { } .widget-action { - color: #50575e; /* #fafafa background in the Widgets screen */ + color: ; /* #fafafa background in the Widgets screen */ } .widget-top:hover .widget-action, diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 2b8d2486ba166..bc282e057132e 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -115,9 +115,9 @@ TABLE OF CONTENTS: .wp-core-ui .button, .wp-core-ui .button-secondary { - background: var(--wp-admin--button-secondary); + background: var(--wp-admin--button); border-color: var(--wp-admin--button-primary); - color: var(--wp-admin--button-secondary--text); + color: var(--wp-admin--button--text); vertical-align: top; } @@ -128,18 +128,18 @@ TABLE OF CONTENTS: .wp-core-ui .button.hover, .wp-core-ui .button:hover, .wp-core-ui .button-secondary:hover{ - background: var(--wp-admin--button-secondary--hover); + background: var(--wp-admin--button--hover); border-color: var(--wp-admin--button-primary--hover); - color: var(--wp-admin--button-secondary--text); + color: var(--wp-admin--button--text); } .wp-core-ui .button.focus, .wp-core-ui .button:focus, .wp-core-ui .button-secondary:focus { - background: var(--wp-admin--button-secondary--hover); + background: var(--wp-admin--button--hover); border-color: var(--wp-admin--button-primary--hover); box-shadow: 0 0 0 1px var(--wp-admin--button-primary); - color: var(--wp-admin--button-secondary--text); + color: var(--wp-admin--button--text); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; /* Reset inherited offset from Gutenberg */ @@ -155,10 +155,10 @@ TABLE OF CONTENTS: /* pressed state e.g. a selected setting */ .wp-core-ui .button.active, .wp-core-ui .button.active:hover { - background-color: var(--wp-admin--button-secondary--shadow); + background-color: var(--wp-admin--button--shadow); border-color: var(--wp-admin--button-primary--hover); box-shadow: inset 0 2px 5px -3px var(--wp-admin--button-primary--hover); - color: var(--wp-admin--button-secondary--text); + color: var(--wp-admin--button--text); } .wp-core-ui .button.active:focus { @@ -175,7 +175,7 @@ TABLE OF CONTENTS: .wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled, .wp-core-ui .button-disabled { - background: var(--wp-admin--button-secondary) !important; + background: var(--wp-admin--button) !important; border-color: var(--wp-admin--button--border--disabled) !important; box-shadow: none !important; color: var(--wp-admin--text-secondary--color) !important; @@ -216,12 +216,12 @@ TABLE OF CONTENTS: } .wp-core-ui .button-link-delete { - color: var(--wp-admin--link--color--delete); + color: var(--wp-admin--link-delete--color); } .wp-core-ui .button-link-delete:hover, .wp-core-ui .button-link-delete:focus { - color: var(--wp-admin--link--color--delete-hover); + color: var(--wp-admin--link-delete--color--hover); background: transparent; } @@ -255,7 +255,7 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus { box-shadow: - 0 0 0 1px var(--wp-admin--button-secondary), + 0 0 0 1px var(--wp-admin--button), 0 0 0 3px var(--wp-admin--button-primary); } @@ -273,7 +273,7 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary-disabled, .wp-core-ui .button-primary.disabled { - background: var(--wp-admin--button-secondary) !important; + background: var(--wp-admin--button) !important; border-color: var(--wp-admin--button--border--disabled) !important; box-shadow: none !important; color: var(--wp-admin--text-secondary--color) !important; @@ -318,10 +318,10 @@ TABLE OF CONTENTS: /* pressed state e.g. a selected setting */ .wp-core-ui .button-group > .button.active { - background-color: var(--wp-admin--button-secondary--shadow); + background-color: var(--wp-admin--button--shadow); border-color: var(--wp-admin--button-primary--hover); box-shadow: inset 0 2px 5px -3px var(--wp-admin--button-primary--hover); - color: var(--wp-admin--button-secondary--text); + color: var(--wp-admin--button--text); } .wp-core-ui .button-group > .button.active:focus { From a9d30cb996faefe5bd07b077914ec8ee7ab6e65c Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 22 Apr 2021 12:54:16 -0400 Subject: [PATCH 09/62] Add alternate row background --- src/wp-admin/css/common.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 5adf9c4632939..5442f514ba586 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1,6 +1,7 @@ body { --wp-admin--page--background: #f0f0f1; --wp-admin--surface--background: #fff; + --wp-admin--surface--background-alternate: #f6f7f7; --wp-admin--surface--border: #c3c4c7; --wp-admin--heading--color: #1d2327; @@ -742,7 +743,7 @@ 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--surface--background-alternate); } .bar { From 9f57dd0791e9b7192bfa31a231bebee841a39f85 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 22 Apr 2021 14:36:27 -0400 Subject: [PATCH 10/62] Move properties to a new stylesheet --- src/wp-admin/css/common.css | 57 --------------------- src/wp-includes/css/custom-properties.css | 60 +++++++++++++++++++++++ src/wp-includes/script-loader.php | 27 +--------- 3 files changed, 61 insertions(+), 83 deletions(-) create mode 100644 src/wp-includes/css/custom-properties.css diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 5442f514ba586..74f08812746d6 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1,60 +1,3 @@ -body { - --wp-admin--page--background: #f0f0f1; - --wp-admin--surface--background: #fff; - --wp-admin--surface--background-alternate: #f6f7f7; - --wp-admin--surface--border: #c3c4c7; - - --wp-admin--heading--color: #1d2327; - --wp-admin--heading-secondary--color: #50575e; - --wp-admin--text--color: #3c434a; - --wp-admin--text-secondary--color: #646970; - - --wp-admin--code--background: #dcdcde; - - --wp-admin--admin-menu--background: #1d2327; - - --wp-admin--link--color: #2271b1; - --wp-admin--link--color--hover: #135e96; - --wp-admin--link-delete--color: #d63638; - --wp-admin--link-delete--color--hover: #d63638; - - --wp-admin--button: #f6f7f7; - --wp-admin--button--hover: #f0f0f1; - --wp-admin--button--shadow: #dcdcde; - --wp-admin--button--border--disabled: #dcdcde; - --wp-admin--button-primary: #2271b1; - --wp-admin--button-primary--hover: #135e96; - - --wp-admin--button--text: var(--wp-admin--button-primary); - --wp-admin--button-primary--text: var(--wp-admin--button); - - --wp-admin--input--color: #2c3338; - --wp-admin--input--color--placeholder: #646970; - --wp-admin--input--border: var(--wp-admin--surface--border); - --wp-admin--input--border--focus: var(--wp-admin--button-primary); - --wp-admin--input--background: var(--wp-admin--surface--background); - --wp-admin--input--background--readonly: #f0f0f1; - --wp-admin--checkbox--fill: var(--wp-admin--button-primary); - - --wp-admin--help-tab--background: #f0f6fc; - --wp-admin--help-tab--border--active: #72aee6; - - --wp-admin--nav-tab--border: var(--wp-admin--surface--border); - --wp-admin--nav-tab--color: #50575e; - --wp-admin--nav-tab--color--hover: #3c434a; - --wp-admin--nav-tab--color--active: var(--wp-admin--heading--color); - --wp-admin--nav-tab--background: #dcdcde; - --wp-admin--nav-tab--background--hover: var(--wp-admin--surface--background); - --wp-admin--nav-tab--background--active: var(--wp-admin--page--background); - - --wp-admin--rating--fill: #dba617; - --wp-admin--rating--base: #dcdcde; - - /* --wp-admin--notice-warning--background: #f6f7f7; - --wp-admin--notice-warning--border: #dcdcde; - --wp-admin--notice-warning--color: */ -} - /* 2 column liquid layout */ #wpwrap { height: auto; diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css new file mode 100644 index 0000000000000..2cf84dfe7248b --- /dev/null +++ b/src/wp-includes/css/custom-properties.css @@ -0,0 +1,60 @@ +body { + --wp-admin--page--background: #f0f0f1; + --wp-admin--surface--background: #fff; + --wp-admin--surface--background-alternate: #f6f7f7; + --wp-admin--surface--border: #c3c4c7; + + --wp-admin--heading--color: #1d2327; + --wp-admin--heading-secondary--color: #50575e; + --wp-admin--text--color: #3c434a; + --wp-admin--text-secondary--color: #646970; + + --wp-admin--code--background: #dcdcde; + + --wp-admin--admin-menu--background: #1d2327; + + --wp-admin--link--color: #2271b1; + --wp-admin--link--color--hover: #135e96; + --wp-admin--link-delete--color: #b32d2e; + --wp-admin--link-delete--color--hover: #b32d2e; + + --wp-admin--button: #f6f7f7; + --wp-admin--button--hover: #f0f0f1; + --wp-admin--button--shadow: #dcdcde; + --wp-admin--button--border--disabled: #dcdcde; + --wp-admin--button-primary: #2271b1; + --wp-admin--button-primary--hover: #135e96; + + --wp-admin--button--text: var(--wp-admin--button-primary); + --wp-admin--button-primary--text: var(--wp-admin--button); + + --wp-admin--input--color: #2c3338; + --wp-admin--input--color--placeholder: #646970; + --wp-admin--input--border: var(--wp-admin--surface--border); + --wp-admin--input--border--focus: var(--wp-admin--button-primary); + --wp-admin--input--background: var(--wp-admin--surface--background); + --wp-admin--input--background--readonly: #f0f0f1; + --wp-admin--checkbox--fill: var(--wp-admin--button-primary); + + --wp-admin--help-tab--background: #f0f6fc; + --wp-admin--help-tab--border--active: #72aee6; + + --wp-admin--nav-tab--border: var(--wp-admin--surface--border); + --wp-admin--nav-tab--color: #50575e; + --wp-admin--nav-tab--color--hover: #3c434a; + --wp-admin--nav-tab--color--active: var(--wp-admin--heading--color); + --wp-admin--nav-tab--background: #dcdcde; + --wp-admin--nav-tab--background--hover: var(--wp-admin--surface--background); + --wp-admin--nav-tab--background--active: var(--wp-admin--page--background); + + /* Needs work */ + --wp-admin--rating--fill: #dba617; + --wp-admin--rating--base: #dcdcde; + + --wp-admin--bubble--color: #fff; + --wp-admin--bubble--background: #646970; + + /* --wp-admin--notice-warning--background: #f6f7f7; + --wp-admin--notice-warning--border: #dcdcde; + --wp-admin--notice-warning--color: */ +} diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index d1c2450b5dfa2..bd571e9f114f1 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1414,7 +1414,7 @@ function wp_default_styles( $styles ) { } // Register a stylesheet for the selected admin color scheme. - $styles->add( 'colors', true, array( 'wp-admin', 'buttons' ) ); + $styles->add( 'colors', '/wp-includes/css/custom-properties.css', array( 'wp-admin', 'buttons' ) ); $suffix = SCRIPT_DEBUG ? '' : '.min'; @@ -1849,35 +1849,10 @@ function wp_localize_community_events() { * @return string|false URL path to CSS stylesheet for Administration Screens. */ function wp_style_loader_src( $src, $handle ) { - global $_wp_admin_css_colors; - if ( wp_installing() ) { return preg_replace( '#^wp-admin/#', './', $src ); } - if ( 'colors' === $handle ) { - $color = get_user_option( 'admin_color' ); - - if ( empty( $color ) || ! isset( $_wp_admin_css_colors[ $color ] ) ) { - $color = 'fresh'; - } - - $color = $_wp_admin_css_colors[ $color ]; - $url = $color->url; - - if ( ! $url ) { - return false; - } - - $parsed = parse_url( $src ); - if ( isset( $parsed['query'] ) && $parsed['query'] ) { - wp_parse_str( $parsed['query'], $qv ); - $url = add_query_arg( $qv, $url ); - } - - return $url; - } - return $src; } From a0f750b5e52eadcee4b33ca683f5ae77701b2763 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 22 Apr 2021 14:36:40 -0400 Subject: [PATCH 11/62] Update filters --- src/wp-admin/css/common.css | 58 ++++++++++------------- src/wp-includes/css/custom-properties.css | 12 ++++- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 74f08812746d6..a71d6fa78ced4 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -662,7 +662,7 @@ code { } .wp-dialog { - background-color: #fff; + background-color: var(--wp-admin--surface--background); } .widgets-chooser ul, @@ -883,7 +883,7 @@ hr { #nav-menu-footer .menu-delete, #delete-link a.delete, a#remove-post-thumbnail { - color: #b32d2e; + color: var(--wp-admin--link-delete--color); } abbr.required, @@ -901,7 +901,7 @@ span.required, #nav-menu-footer .menu-delete:hover, #delete-link a.delete:hover, a#remove-post-thumbnail:hover { - color: #b32d2e; + color: var(--wp-admin--link-delete--color--hover); border: none; } @@ -1003,7 +1003,7 @@ th.action-links { width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); border: 1px solid var(--wp-admin--surface--border); - background: #fff; + background: var(--wp-admin--surface--background); color: ; font-size: 13px; } @@ -1025,8 +1025,8 @@ th.action-links { top: -1px; padding: 4px 10px; border-radius: 30px; - background: #646970; - color: #fff; + background: var(--wp-admin--bubble--background); + color: var(--wp-admin--bubble--color); font-size: 14px; font-weight: 600; } @@ -1057,22 +1057,22 @@ th.action-links { display: inline-block; margin: 0 10px; padding: 15px 0; - border-bottom: 4px solid #fff; - color: #646970; + border-bottom: 4px solid var(--wp-admin--surface--background); + color: var(--wp-admin--text-secondary--color); cursor: pointer; } .filter-links .current { box-shadow: none; - border-bottom: 4px solid #646970; - color: #1d2327; + border-bottom: 4px solid var(--wp-admin--text-secondary--color); + color: var(--wp-admin--text--color); } .filter-links li > a:hover, .filter-links li > a:focus, .show-filters .filter-links a.current:hover, .show-filters .filter-links a.current:focus { - color: #135e96; + color: var(--wp-admin--link--color--hover); } .wp-filter .search-form { @@ -1115,7 +1115,7 @@ th.action-links { padding: 0 10px 0 6px; border-color: transparent; background-color: transparent; - color: #646970; + color: var(--wp-admin--filter-button--color); vertical-align: baseline; box-shadow: none; } @@ -1123,7 +1123,7 @@ th.action-links { .wp-filter .drawer-toggle:before { content: "\f111"; margin: 0 5px 0 0; - color: #646970; + color: var(--wp-admin--filter-button--color); font: normal 16px/1 dashicons; vertical-align: text-bottom; -webkit-font-smoothing: antialiased; @@ -1135,7 +1135,7 @@ th.action-links { .wp-filter .button.drawer-toggle:focus, .wp-filter .drawer-toggle:focus:before { background-color: transparent; - color: #135e96; + color: var(--wp-admin--filter-button--color--hover); } .wp-filter .button.drawer-toggle:hover, @@ -1144,7 +1144,7 @@ th.action-links { } .wp-filter .button.drawer-toggle:focus { - border-color: #4f94d4; + border-color: var(--wp-admin--button-primary); } .wp-filter .button.drawer-toggle:active { @@ -1153,17 +1153,13 @@ th.action-links { transform: none; } -.wp-filter .drawer-toggle.current:before { - color: #fff; -} - .filter-drawer, .wp-filter .favorites-form { display: none; margin: 0 -10px 0 -20px; padding: 20px; - border-top: 1px solid #f0f0f1; - background: #f6f7f7; + border-top: 1px solid var(--wp-admin--surface--border-alternate); + background: var(--wp-admin--surface--background-alternate); overflow: hidden; } @@ -1178,17 +1174,17 @@ th.action-links { .show-filters .wp-filter .button.drawer-toggle { border-radius: 2px; - background: #646970; - color: #fff; + background: var(--wp-admin--filter-button--background--active); + color: var(--wp-admin--filter-button--color--active); } .show-filters .wp-filter .drawer-toggle:hover, .show-filters .wp-filter .drawer-toggle:focus { - background: #2271b1; + background: var(--wp-admin--filter-button--background--active-hover); } .show-filters .wp-filter .drawer-toggle:before { - color: #fff; + color: var(--wp-admin--filter-button--color--active); } .filter-group { @@ -1198,8 +1194,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--surface--background); + border: 1px solid var(--wp-admin--surface--border); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } @@ -1281,9 +1277,9 @@ th.action-links { .filtered-by .tag { margin: 0 5px; padding: 4px 8px; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin--surface--border); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - background: #fff; + background: var(--wp-admin--surface--background); font-size: 11px; } @@ -1320,10 +1316,6 @@ th.action-links { } @media only screen and (max-width: 1120px) { - .filter-drawer { - border-bottom: 1px solid #f0f0f1; - } - .filter-group { margin-bottom: 0; margin-top: 5px; diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 2cf84dfe7248b..79b162e7d0265 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -3,6 +3,7 @@ body { --wp-admin--surface--background: #fff; --wp-admin--surface--background-alternate: #f6f7f7; --wp-admin--surface--border: #c3c4c7; + --wp-admin--surface--border-alternate: #f0f0f1; --wp-admin--heading--color: #1d2327; --wp-admin--heading-secondary--color: #50575e; @@ -51,8 +52,15 @@ body { --wp-admin--rating--fill: #dba617; --wp-admin--rating--base: #dcdcde; - --wp-admin--bubble--color: #fff; - --wp-admin--bubble--background: #646970; + --wp-admin--bubble--color: var(--wp-admin--surface--background); + --wp-admin--bubble--background: var(--wp-admin--text-secondary--color); + + --wp-admin--filter-button--color: var(--wp-admin--text-secondary--color); + --wp-admin--filter-button--color--hover: var(--wp-admin--link--color--hover); + --wp-admin--filter-button--color--active: var(--wp-admin--surface--background); + --wp-admin--filter-button--background--active: var(--wp-admin--text-secondary--color); + --wp-admin--filter-button--background--active-hover: var(--wp-admin--button-primary); + /* --wp-admin--notice-warning--background: #f6f7f7; --wp-admin--notice-warning--border: #dcdcde; From 9c3329c746dd722ef7660b151968b20bcb6e487a Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 22 Apr 2021 15:20:13 -0400 Subject: [PATCH 12/62] Notices --- src/wp-admin/css/common.css | 30 +++++++++++------------ src/wp-includes/css/custom-properties.css | 15 +++++++++--- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a71d6fa78ced4..d3b56fa92264d 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1370,7 +1370,7 @@ th.action-links { .notice, div.updated, div.error { - background: #fff; + background: var(--wp-admin--surface--background); border: 1px solid var(--wp-admin--surface--border); border-left-width: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); @@ -1409,7 +1409,7 @@ div.error p, .notice-title { display: inline-block; - color: #1d2327; + color: var(--wp-admin--heading--color); font-size: 18px; } @@ -1426,14 +1426,14 @@ div.error p, margin: 0; padding: 9px; background: none; - color: #787c82; + color: var(--wp-admin--icon--fill); cursor: pointer; } .notice-dismiss:hover:before, .notice-dismiss:active:before, .notice-dismiss:focus:before { - color: #d63638; + color: var(--wp-admin--icon-destructive--fill); } .notice-dismiss:focus { @@ -1445,36 +1445,36 @@ div.error p, .notice-success, div.updated { - border-left-color: #00a32a; + border-left-color: var(--wp-admin--notice-success--border); } .notice-success.notice-alt { - background-color: #edfaef; + background-color: var(--wp-admin--notice-success--background); } .notice-warning { - border-left-color: #dba617; + border-left-color: var(--wp-admin--notice-warning--border); } .notice-warning.notice-alt { - background-color: #fcf9e8; + background-color: var(--wp-admin--notice-warning--background); } .notice-error, div.error { - border-left-color: #d63638; + border-left-color: var(--wp-admin--notice-error--border); } .notice-error.notice-alt { - background-color: #fcf0f1; + background-color: var(--wp-admin--notice-error--background); } .notice-info { - border-left-color: #72aee6; + border-left-color: var(--wp-admin--notice-info--border); } .notice-info.notice-alt { - background-color: #f0f6fc; + background-color: var(--wp-admin--notice-info--background); } .update-message p:before, @@ -1522,7 +1522,7 @@ div.error { .import-php .updating-message:before, .button.updating-message:before, .button.installing:before { - color: #d63638; + color: var(--wp-admin--icon-destructive--fill); content: "\f463"; } @@ -1555,13 +1555,13 @@ div.error { .updated-message p:before, .installed p:before, .button.updated-message:before { - color: #68de7c; + color: var(--wp-admin--icon-success--fill); content: "\f147"; } /* Error icon. */ .update-message.notice-error p:before { - color: #d63638; + color: var(--wp-admin--icon-error--fill); content: "\f534"; } diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 79b162e7d0265..12523c6f58447 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -61,8 +61,17 @@ body { --wp-admin--filter-button--background--active: var(--wp-admin--text-secondary--color); --wp-admin--filter-button--background--active-hover: var(--wp-admin--button-primary); + --wp-admin--notice-success--background: #edfaef; + --wp-admin--notice-success--border: #00a32a; + --wp-admin--notice-info--background: #f0f6fc; + --wp-admin--notice-info--border: #72aee6; + --wp-admin--notice-warning--background: #fcf9e8; + --wp-admin--notice-warning--border: #dba617; + --wp-admin--notice-error--background: #fcf0f1; + --wp-admin--notice-error--border: #d63638; - /* --wp-admin--notice-warning--background: #f6f7f7; - --wp-admin--notice-warning--border: #dcdcde; - --wp-admin--notice-warning--color: */ + --wp-admin--icon--fill: #787c82; + --wp-admin--icon-destructive--fill: #d63638; + --wp-admin--icon-error--fill: var(--wp-admin--icon-destructive--fill); + --wp-admin--icon-success--fill: #68de7c; } From bb580148e7517c9af870e33e158db8df930de01f Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 27 Apr 2021 17:52:45 -0400 Subject: [PATCH 13/62] Drop in a stylelint to flag color values --- stylelint.config.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 stylelint.config.js diff --git a/stylelint.config.js b/stylelint.config.js new file mode 100644 index 0000000000000..7a2ab908dd02c --- /dev/null +++ b/stylelint.config.js @@ -0,0 +1,14 @@ +const reHex = "/#[0-9a-f]{3}([0-9a-f]{3})?/i"; +const reRgba = "/rgba?\(([0-9]+.?[0-9]*,? ?){3,4}\)/i"; + +module.exports = { + rules: { + "declaration-property-value-disallowed-list": { + "/^color/": [reHex, reRgba], + "/^border/": [reHex, reRgba], + "/^background/": [reHex, reRgba], + "/^outline/": [reHex, reRgba], + "/^box-shadow/": [reHex, reRgba], + }, + }, +}; From 59f8c6a151945ce7ffc61ea5a6a90575de50fe7d Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 30 Apr 2021 19:14:39 -0400 Subject: [PATCH 14/62] Admin menu colors --- src/wp-admin/css/admin-menu.css | 90 +++++++++++++++++++++------------ 1 file changed, 57 insertions(+), 33 deletions(-) diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index 801d518a859f5..42de3d911616d 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -1,9 +1,34 @@ +body { + --wp-admin-menu--background: #1d2327; + + --wp-admin-menu--icon--color: #a7aaad; + --wp-admin-menu--link--color: #f0f0f1; + + --wp-admin-menu--submenu--background: #2c3338; + --wp-admin-menu--submenu-link--color: #c3c4c7; + --wp-admin-menu--submenu-header--color: #fff; + --wp-admin-menu--submenu--box-shadow: rgba(0, 0, 0, 0.2); + + --wp-admin-menu--link--background--hover: var(--wp-admin-menu--background); + --wp-admin-menu--link--color--hover: #72aee6; + --wp-admin-menu--icon--color--hover: var(--wp-admin-menu--link--color--hover); + + --wp-admin-menu--link--background--current: #2271b1; + --wp-admin-menu--link--color--current: #fff; + --wp-admin-menu--icon--color--current: var(--wp-admin-menu--link--color--current); + + --wp-admin-menu--notification--background: #d63638; + --wp-admin-menu--notification--color: #fff; + --wp-admin-menu--notification--background--current: var(--wp-admin-menu--notification--background); + --wp-admin-menu--notification--color--current: var(--wp-admin-menu--notification--color); +} + #adminmenuback, #adminmenuwrap, #adminmenu, #adminmenu .wp-submenu { width: 160px; - background-color: #1d2327; + background-color: var(--wp-admin-menu--background); } #adminmenuback { @@ -47,7 +72,7 @@ /* New Menu icons */ .icon16:before { - color: #8c8f94; /* same as new icons */ + color: var(--wp-admin-menu--icon--color); /* same as new icons */ font: normal 20px/1 dashicons; speak: never; padding: 6px 0; @@ -168,12 +193,11 @@ display: block; line-height: 1.3; padding: 2px 5px; - color: #f0f0f1; + color: var(--wp-admin-menu--link--color); } #adminmenu .wp-submenu a { - color: #c3c4c7; - color: rgba(240, 246, 252, 0.7); + color: var(--wp-admin-menu--submenu-link--color); font-size: 13px; line-height: 1.4; margin: 0; @@ -189,7 +213,7 @@ #adminmenu li.menu-top > a:focus, #adminmenu .wp-submenu a:hover, #adminmenu .wp-submenu a:focus { - color: #72aee6; + color: var(--wp-admin-menu--link--color--hover); } #adminmenu a:hover, @@ -214,8 +238,8 @@ word-wrap: break-word; padding: 7px 0 8px; z-index: 9999; - background-color: #2c3338; - box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); + background-color: var(--wp-admin-menu--submenu--background); + box-shadow: 0 3px 5px var(--wp-admin-menu--submenu--box-shadow); } .js #adminmenu .sub-open, @@ -245,7 +269,7 @@ } .folded #adminmenu .wp-has-current-submenu .wp-submenu { - box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 5px var(--wp-admin-menu--submenu--box-shadow); } /* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ @@ -253,8 +277,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-menu--link--background--hover); + color: var(--wp-admin-menu--link--color--hover); } .folded #adminmenu li.menu-top:hover, @@ -268,8 +292,8 @@ #adminmenu .wp-menu-arrow, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow div { - background: #2271b1; - color: #fff; + background: var(--wp-admin-menu--link--background--current); + color: var(--wp-admin-menu--link--color--current); } .folded #adminmenu .wp-submenu.sub-open, @@ -302,7 +326,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-menu--link--color--current); } #adminmenu .wp-not-current-submenu li > a, @@ -375,15 +399,13 @@ } div.wp-menu-image:before { - color: #a7aaad; - color: rgba(240, 246, 252, 0.6); + color: var(--wp-admin-menu--icon--color); padding: 7px 0; transition: all .1s ease-in-out; } #adminmenu div.wp-menu-image:before { - color: #a7aaad; - color: rgba(240, 246, 252, 0.6); + color: var(--wp-admin-menu--icon--color); } #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, @@ -393,13 +415,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-menu--icon--color--current); } #adminmenu li:hover div.wp-menu-image:before, #adminmenu li a:focus div.wp-menu-image:before, #adminmenu li.opensub div.wp-menu-image:before { - color: #72aee6; + color: var(--wp-admin-menu--icon--color--highlight); } .folded #adminmenu div.wp-menu-image { @@ -437,7 +459,7 @@ ul#adminmenu > li.current > a.current:after { width: 0; position: absolute; pointer-events: none; - border-right-color: #f0f0f1; + border-right-color: var(--wp-admin--page--background); top: 50%; margin-top: -8px; } @@ -476,7 +498,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-menu--submenu--background); } #adminmenu li.menu-top:hover .wp-menu-image img, @@ -499,7 +521,7 @@ ul#adminmenu > li.current > a.current:after { } #adminmenu .wp-submenu .wp-submenu-head { - color: #fff; + color: var(--wp-admin-menu--submenu-header--color); font-weight: 400; font-size: 14px; padding: 5px 4px 5px 11px; @@ -525,8 +547,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-menu--notification--background); + color: var(--wp-admin-menu--notification--color); font-size: 11px; line-height: 1.6; text-align: center; @@ -534,9 +556,11 @@ ul#adminmenu > li.current > a.current:after { } #adminmenu li.current a .awaiting-mod, -#adminmenu li a.wp-has-current-submenu .update-plugins { - background-color: #d63638; - color: #fff; +#adminmenu li a.wp-has-current-submenu .update-plugins, +#adminmenu li:hover a .awaiting-mod, +#adminmenu li.menu-top:hover > a .update-plugins { + background-color: var(--wp-admin-menu--notification--background--current); + color: var(--wp-admin-menu--notification--color--current); } #adminmenu li span.count-0 { @@ -553,16 +577,16 @@ ul#adminmenu > li.current > a.current:after { position: relative; overflow: visible; background: none; - color: #a7aaad; + color: var(--wp-admin-menu--icon--color); cursor: pointer; } #collapse-button:hover { - color: #72aee6; + color: var(--wp-admin-menu--icon--color--hover); } #collapse-button:focus { - color: #72aee6; + color: var(--wp-admin-menu--icon--color--hover); /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; outline-offset: -1px; @@ -891,7 +915,7 @@ li#wp-admin-bar-menu-toggle { } .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { - background: #2c3338; + background: var(--wp-admin-menu--submenu--background); } li#wp-admin-bar-menu-toggle { @@ -922,7 +946,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-menu--icon--color--hover); } } From 3a3926b3d7f7632f48c80a0569f6fda4b0a971ee Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 30 Apr 2021 19:15:31 -0400 Subject: [PATCH 15/62] WIP: ectoplasm demo --- src/wp-admin/css/admin-menu.css | 19 +++++++++++++++++++ src/wp-includes/css/custom-properties.css | 6 ++++++ 2 files changed, 25 insertions(+) diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index 42de3d911616d..fba6f033790ea 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -23,6 +23,25 @@ body { --wp-admin-menu--notification--color--current: var(--wp-admin-menu--notification--color); } +body.admin-color-ectoplasm { + --wp-admin-menu--background: #523f6d; + + --wp-admin-menu--icon--color: #ece6f6; + --wp-admin-menu--link--color: #fff; + + --wp-admin-menu--submenu--background: #413256; + --wp-admin-menu--submenu-link--color: #cbc5d3; + --wp-admin-menu--submenu-header--color: #cbc5d3; + + --wp-admin-menu--link--background--hover: #a3b745; + --wp-admin-menu--link--color--hover: #fff; + + --wp-admin-menu--link--background--current: #a3b745; + + --wp-admin-menu--notification--background: #d46f15; + --wp-admin-menu--notification--background--current: #413256; +} + #adminmenuback, #adminmenuwrap, #adminmenu, diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 12523c6f58447..37b8fd2c80701 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -75,3 +75,9 @@ body { --wp-admin--icon-error--fill: var(--wp-admin--icon-destructive--fill); --wp-admin--icon-success--fill: #68de7c; } + +body.admin-color-ectoplasm { + --wp-admin--button-primary: #a3b745; + --wp-admin--button-primary--hover: #99ac41; + --wp-admin--button--text: #68753e; +} From 2caacd09a81fc5d83fd85cae051398a36c9c7e1a Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 1 May 2021 16:16:09 -0400 Subject: [PATCH 16/62] Admin bar styles --- src/wp-admin/css/admin-menu.css | 2 + src/wp-admin/css/common.css | 4 +- src/wp-includes/css/admin-bar.css | 73 +++++++++-------------- src/wp-includes/css/custom-properties.css | 3 + 4 files changed, 35 insertions(+), 47 deletions(-) diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index fba6f033790ea..61313703a93d9 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -9,6 +9,8 @@ body { --wp-admin-menu--submenu-header--color: #fff; --wp-admin-menu--submenu--box-shadow: rgba(0, 0, 0, 0.2); + --wp-admin-menu--tertiary--background: #3c434a; + --wp-admin-menu--link--background--hover: var(--wp-admin-menu--background); --wp-admin-menu--link--color--hover: #72aee6; --wp-admin-menu--icon--color--hover: var(--wp-admin-menu--link--color--hover); diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index d3b56fa92264d..2646efc32747a 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -152,8 +152,8 @@ font-size: 14px; font-weight: 600; padding: 15px 23px 14px; - background: var(--wp-admin--page--background); - color: var(--wp-admin--link--color); + background: var(--wp-admin--screen-reader-text--background); + color: var(--wp-admin--screen-reader-text--color); z-index: 100000; line-height: normal; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 78224650569ea..98f4c505360e2 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -34,7 +34,7 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon { - color: #f0f0f1; + color: var(--wp-admin-menu--link--color, #f0f0f1); } #wpadminbar #wp-admin-bar-site-name a.ab-item, @@ -78,7 +78,6 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar { direction: ltr; - color: #c3c4c7; font-size: 13px; font-weight: 400; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -90,7 +89,7 @@ html:lang(he-il) .rtl #wpadminbar * { width: 100%; min-width: 600px; /* match the min-width of the body in wp-admin/css/common.css */ z-index: 99999; - background: #1d2327; + background: var(--wp-admin-menu--background, #1d2327); } #wpadminbar .ab-sub-wrapper, @@ -143,8 +142,8 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar .shortlink-input { margin: 0; padding: 0; - box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); - background: #2c3338; + box-shadow: 0 3px 5px var(--wp-admin-menu--submenu--box-shadow, rgba(0, 0, 0, 0.2)); + background: var(--wp-admin-menu--submenu--background, #2c3338); display: none; position: absolute; float: none; @@ -212,14 +211,14 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li.hover > .ab-item { - background: #2c3338; - color: #72aee6; + background: var(--wp-admin-menu--submenu--background, #2c3338); + color: var(--wp-admin-menu--link--color--hover, #72aee6); } #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, #wpadminbar > #wp-toolbar li.hover span.ab-label, #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { - color: #72aee6; + color: var(--wp-admin-menu--link--color--hover, #72aee6); } #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon, @@ -240,8 +239,7 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar .ab-icon:before, #wpadminbar .ab-item:before, #wpadminbar #adminbarsearch:before { - color: #a7aaad; - color: rgba(240, 246, 252, 0.6); + color: var(--wp-admin-menu--icon--color, #a7aaad); } #wpadminbar .ab-icon:before, @@ -257,16 +255,14 @@ html:lang(he-il) .rtl #wpadminbar * { } #wpadminbar .ab-submenu .ab-item { - color: #c3c4c7; - color: rgba(240, 246, 252, 0.7); + color: var(--wp-admin-menu--submenu-link--color, #c3c4c7); } #wpadminbar .quicklinks .menupop ul li a, #wpadminbar .quicklinks .menupop ul li a strong, #wpadminbar .quicklinks .menupop.hover ul li a, #wpadminbar.nojs .quicklinks .menupop:hover ul li a { - color: #c3c4c7; - color: rgba(240, 246, 252, 0.7); + color: var(--wp-admin-menu--submenu-link--color, #c3c4c7); } #wpadminbar .quicklinks .menupop ul li a:hover, @@ -289,17 +285,17 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar li.hover .ab-item:before, #wpadminbar li:hover #adminbarsearch:before, #wpadminbar li #adminbarsearch.adminbar-focused:before { - color: #72aee6; + color: var(--wp-admin-menu--link--color--hover, #72aee6); } #wpadminbar.mobile .quicklinks .ab-icon:before, #wpadminbar.mobile .quicklinks .ab-item:before { - color: #c3c4c7; + color: var(--wp-admin-menu--submenu-link--color, #c3c4c7); } #wpadminbar.mobile .quicklinks .hover .ab-icon:before, #wpadminbar.mobile .quicklinks .hover .ab-item:before { - color: #72aee6; + color: var(--wp-admin-menu--link--color--hover, #72aee6); } #wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before, @@ -345,28 +341,17 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar .quicklinks .menupop ul.ab-sub-secondary, #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { - background: #3c434a; + background: var(--wp-admin-menu--tertiary--background, #3c434a); } #wpadminbar .quicklinks .menupop .ab-sub-secondary > li > a:hover, #wpadminbar .quicklinks .menupop .ab-sub-secondary > li .ab-item:focus a { - color: #72aee6; + color: var(--wp-admin-menu--link--color--hover, #72aee6); } -#wpadminbar .quicklinks a span#ab-updates { - background: #f0f0f1; - color: #2c3338; - display: inline; - padding: 2px 5px; - font-size: 10px; - font-weight: 600; - border-radius: 10px; -} - -#wpadminbar .quicklinks a:hover span#ab-updates { - background: #fff; - color: #000; -} +/* #ab-updates was removed in r19516 */ +#wpadminbar .quicklinks a span#ab-updates {} +#wpadminbar .quicklinks a:hover span#ab-updates {} #wpadminbar .ab-top-secondary { float: right; @@ -381,16 +366,16 @@ html:lang(he-il) .rtl #wpadminbar * { * Recovery Mode */ #wpadminbar #wp-admin-bar-recovery-mode { - color: #fff; - background-color: #d63638; + color: var(--wp-admin-menu--notification--color, #fff); + background-color: var(--wp-admin-menu--notification--background, #d63638); } #wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { - color: #fff; - background-color: #d63638; + color: var(--wp-admin-menu--notification--color--current, #fff); + background-color: var(--wp-admin-menu--notification--background--current, #d63638); } /** @@ -513,13 +498,13 @@ html:lang(he-il) .rtl #wpadminbar * { speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: #f0f0f1; + color: var(--wp-admin-menu--link--color, #f0f0f1); } #wpadminbar .quicklinks li a:hover .blavatar, #wpadminbar .quicklinks li a:focus .blavatar, #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar { - color: #72aee6; + color: var(--wp-admin-menu--link--color--hover, #72aee6); } #wpadminbar .quicklinks li img.blavatar, @@ -651,7 +636,7 @@ html:lang(he-il) .rtl #wpadminbar * { max-width: none; padding: 0 3px 0 24px; margin: 0; - color: #c3c4c7; + color: #000; background-color: rgba(255, 255, 255, 0); border: none; outline: none; @@ -665,7 +650,6 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { z-index: 10; - color: #000; width: 200px; background-color: rgba(255, 255, 255, 0.9); cursor: text; @@ -720,8 +704,8 @@ html:lang(he-il) .rtl #wpadminbar * { font-size: 14px; font-weight: 600; padding: 15px 23px 14px; - background: #f0f0f1; - color: #2271b1; + background: var(--wp-admin--screen-reader-text--background, #f0f0f1); + color: var(--wp-admin--screen-reader-text--color, #2271b1); z-index: 100000; line-height: normal; text-decoration: none; @@ -842,7 +826,6 @@ html:lang(he-il) .rtl #wpadminbar * { overflow: hidden; width: 52px; padding: 0; - color: #a7aaad; /* @todo not needed? this text is hidden */ position: relative; } @@ -948,7 +931,7 @@ html:lang(he-il) .rtl #wpadminbar * { height: auto; font-size: 16px; line-height: 1.5; - color: #f0f0f1; + color: var(--wp-admin-menu--link--color, #f0f0f1); } #wpadminbar #wp-admin-bar-user-info a { diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 37b8fd2c80701..7b7f1349800cc 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -74,6 +74,9 @@ body { --wp-admin--icon-destructive--fill: #d63638; --wp-admin--icon-error--fill: var(--wp-admin--icon-destructive--fill); --wp-admin--icon-success--fill: #68de7c; + + --wp-admin--screen-reader-text--background: var(--wp-admin--page--background); + --wp-admin--screen-reader-text--color: var(--wp-admin--link--color); } body.admin-color-ectoplasm { From 317f9a5a483948a1d65b2d4925c5e12df7527d56 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 1 May 2021 16:16:21 -0400 Subject: [PATCH 17/62] Update hex regex in stylelint config --- stylelint.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stylelint.config.js b/stylelint.config.js index 7a2ab908dd02c..84bf3034fa755 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,5 +1,5 @@ -const reHex = "/#[0-9a-f]{3}([0-9a-f]{3})?/i"; -const reRgba = "/rgba?\(([0-9]+.?[0-9]*,? ?){3,4}\)/i"; +const reHex = "/(?!, )#[0-9a-f]{3}([0-9a-f]{3})?$/i"; +const reRgba = "/rgba?\(([0-9]+(.[0-9]*)?,? ?){3,4}\)/i"; module.exports = { rules: { From b765996758904cad668b46329ad9613384034867 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 8 Jul 2021 11:04:25 -0400 Subject: [PATCH 18/62] Update the `admin-menu` property names --- src/wp-admin/css/admin-menu.css | 114 +++++++++++++++--------------- src/wp-includes/css/admin-bar.css | 44 ++++++------ 2 files changed, 79 insertions(+), 79 deletions(-) diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index 61313703a93d9..48181764041c4 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -1,47 +1,47 @@ body { - --wp-admin-menu--background: #1d2327; + --wp-admin--admin-menu--background: #1d2327; - --wp-admin-menu--icon--color: #a7aaad; - --wp-admin-menu--link--color: #f0f0f1; + --wp-admin--admin-menu--icon--color: #a7aaad; + --wp-admin--admin-menu--link--color: #f0f0f1; - --wp-admin-menu--submenu--background: #2c3338; - --wp-admin-menu--submenu-link--color: #c3c4c7; - --wp-admin-menu--submenu-header--color: #fff; - --wp-admin-menu--submenu--box-shadow: rgba(0, 0, 0, 0.2); + --wp-admin--admin-menu--submenu--background: #2c3338; + --wp-admin--admin-menu--submenu-link--color: #c3c4c7; + --wp-admin--admin-menu--submenu-header--color: #fff; + --wp-admin--admin-menu--submenu--box-shadow: rgba(0, 0, 0, 0.2); - --wp-admin-menu--tertiary--background: #3c434a; + --wp-admin--admin-menu--tertiary--background: #3c434a; - --wp-admin-menu--link--background--hover: var(--wp-admin-menu--background); - --wp-admin-menu--link--color--hover: #72aee6; - --wp-admin-menu--icon--color--hover: var(--wp-admin-menu--link--color--hover); + --wp-admin--admin-menu--link--background--hover: var(--wp-admin--admin-menu--background); + --wp-admin--admin-menu--link--color--hover: #72aee6; + --wp-admin--admin-menu--icon--color--hover: var(--wp-admin--admin-menu--link--color--hover); - --wp-admin-menu--link--background--current: #2271b1; - --wp-admin-menu--link--color--current: #fff; - --wp-admin-menu--icon--color--current: var(--wp-admin-menu--link--color--current); + --wp-admin--admin-menu--link--background--current: #2271b1; + --wp-admin--admin-menu--link--color--current: #fff; + --wp-admin--admin-menu--icon--color--current: var(--wp-admin--admin-menu--link--color--current); - --wp-admin-menu--notification--background: #d63638; - --wp-admin-menu--notification--color: #fff; - --wp-admin-menu--notification--background--current: var(--wp-admin-menu--notification--background); - --wp-admin-menu--notification--color--current: var(--wp-admin-menu--notification--color); + --wp-admin--admin-menu--notification--background: var(--wp-admin--theme--notification); + --wp-admin--admin-menu--notification--color: var(--wp-admin--theme--notification--contrast); + --wp-admin--admin-menu--notification--background--current: var(--wp-admin--admin-menu--notification--background); + --wp-admin--admin-menu--notification--color--current: var(--wp-admin--admin-menu--notification--color); } body.admin-color-ectoplasm { - --wp-admin-menu--background: #523f6d; + --wp-admin--admin-menu--background: #523f6d; - --wp-admin-menu--icon--color: #ece6f6; - --wp-admin-menu--link--color: #fff; + --wp-admin--admin-menu--icon--color: #ece6f6; + --wp-admin--admin-menu--link--color: #fff; - --wp-admin-menu--submenu--background: #413256; - --wp-admin-menu--submenu-link--color: #cbc5d3; - --wp-admin-menu--submenu-header--color: #cbc5d3; + --wp-admin--admin-menu--submenu--background: #413256; + --wp-admin--admin-menu--submenu-link--color: #cbc5d3; + --wp-admin--admin-menu--submenu-header--color: #cbc5d3; - --wp-admin-menu--link--background--hover: #a3b745; - --wp-admin-menu--link--color--hover: #fff; + --wp-admin--admin-menu--link--background--hover: #a3b745; + --wp-admin--admin-menu--link--color--hover: #fff; - --wp-admin-menu--link--background--current: #a3b745; + --wp-admin--admin-menu--link--background--current: #a3b745; - --wp-admin-menu--notification--background: #d46f15; - --wp-admin-menu--notification--background--current: #413256; + --wp-admin--admin-menu--notification--background: #d46f15; + --wp-admin--admin-menu--notification--background--current: #413256; } #adminmenuback, @@ -49,7 +49,7 @@ body.admin-color-ectoplasm { #adminmenu, #adminmenu .wp-submenu { width: 160px; - background-color: var(--wp-admin-menu--background); + background-color: var(--wp-admin--admin-menu--background); } #adminmenuback { @@ -93,7 +93,7 @@ body.admin-color-ectoplasm { /* New Menu icons */ .icon16:before { - color: var(--wp-admin-menu--icon--color); /* same as new icons */ + color: var(--wp-admin--admin-menu--icon--color); /* same as new icons */ font: normal 20px/1 dashicons; speak: never; padding: 6px 0; @@ -214,11 +214,11 @@ body.admin-color-ectoplasm { display: block; line-height: 1.3; padding: 2px 5px; - color: var(--wp-admin-menu--link--color); + color: var(--wp-admin--admin-menu--link--color); } #adminmenu .wp-submenu a { - color: var(--wp-admin-menu--submenu-link--color); + color: var(--wp-admin--admin-menu--submenu-link--color); font-size: 13px; line-height: 1.4; margin: 0; @@ -234,7 +234,7 @@ body.admin-color-ectoplasm { #adminmenu li.menu-top > a:focus, #adminmenu .wp-submenu a:hover, #adminmenu .wp-submenu a:focus { - color: var(--wp-admin-menu--link--color--hover); + color: var(--wp-admin--admin-menu--link--color--hover); } #adminmenu a:hover, @@ -259,8 +259,8 @@ body.admin-color-ectoplasm { word-wrap: break-word; padding: 7px 0 8px; z-index: 9999; - background-color: var(--wp-admin-menu--submenu--background); - box-shadow: 0 3px 5px var(--wp-admin-menu--submenu--box-shadow); + background-color: var(--wp-admin--admin-menu--submenu--background); + box-shadow: 0 3px 5px var(--wp-admin--admin-menu--submenu--box-shadow); } .js #adminmenu .sub-open, @@ -290,7 +290,7 @@ body.admin-color-ectoplasm { } .folded #adminmenu .wp-has-current-submenu .wp-submenu { - box-shadow: 0 3px 5px var(--wp-admin-menu--submenu--box-shadow); + box-shadow: 0 3px 5px var(--wp-admin--admin-menu--submenu--box-shadow); } /* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ @@ -298,8 +298,8 @@ body.admin-color-ectoplasm { #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus { position: relative; - background-color: var(--wp-admin-menu--link--background--hover); - color: var(--wp-admin-menu--link--color--hover); + background-color: var(--wp-admin--admin-menu--link--background--hover); + color: var(--wp-admin--admin-menu--link--color--hover); } .folded #adminmenu li.menu-top:hover, @@ -313,8 +313,8 @@ body.admin-color-ectoplasm { #adminmenu .wp-menu-arrow, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow div { - background: var(--wp-admin-menu--link--background--current); - color: var(--wp-admin-menu--link--color--current); + background: var(--wp-admin--admin-menu--link--background--current); + color: var(--wp-admin--admin-menu--link--color--current); } .folded #adminmenu .wp-submenu.sub-open, @@ -347,7 +347,7 @@ body.admin-color-ectoplasm { #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: var(--wp-admin-menu--link--color--current); + color: var(--wp-admin--admin-menu--link--color--current); } #adminmenu .wp-not-current-submenu li > a, @@ -420,13 +420,13 @@ body.admin-color-ectoplasm { } div.wp-menu-image:before { - color: var(--wp-admin-menu--icon--color); + color: var(--wp-admin--admin-menu--icon--color); padding: 7px 0; transition: all .1s ease-in-out; } #adminmenu div.wp-menu-image:before { - color: var(--wp-admin-menu--icon--color); + color: var(--wp-admin--admin-menu--icon--color); } #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before, @@ -436,13 +436,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: var(--wp-admin-menu--icon--color--current); + color: var(--wp-admin--admin-menu--icon--color--current); } #adminmenu li:hover div.wp-menu-image:before, #adminmenu li a:focus div.wp-menu-image:before, #adminmenu li.opensub div.wp-menu-image:before { - color: var(--wp-admin-menu--icon--color--highlight); + color: var(--wp-admin--admin-menu--icon--color--highlight); } .folded #adminmenu div.wp-menu-image { @@ -519,7 +519,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: var(--wp-admin-menu--submenu--background); + border-right-color: var(--wp-admin--admin-menu--submenu--background); } #adminmenu li.menu-top:hover .wp-menu-image img, @@ -542,7 +542,7 @@ ul#adminmenu > li.current > a.current:after { } #adminmenu .wp-submenu .wp-submenu-head { - color: var(--wp-admin-menu--submenu-header--color); + color: var(--wp-admin--admin-menu--submenu-header--color); font-weight: 400; font-size: 14px; padding: 5px 4px 5px 11px; @@ -568,8 +568,8 @@ ul#adminmenu > li.current > a.current:after { min-width: 18px; height: 18px; border-radius: 9px; - background-color: var(--wp-admin-menu--notification--background); - color: var(--wp-admin-menu--notification--color); + background-color: var(--wp-admin--admin-menu--notification--background); + color: var(--wp-admin--admin-menu--notification--color); font-size: 11px; line-height: 1.6; text-align: center; @@ -580,8 +580,8 @@ ul#adminmenu > li.current > a.current:after { #adminmenu li a.wp-has-current-submenu .update-plugins, #adminmenu li:hover a .awaiting-mod, #adminmenu li.menu-top:hover > a .update-plugins { - background-color: var(--wp-admin-menu--notification--background--current); - color: var(--wp-admin-menu--notification--color--current); + background-color: var(--wp-admin--admin-menu--notification--background--current); + color: var(--wp-admin--admin-menu--notification--color--current); } #adminmenu li span.count-0 { @@ -598,16 +598,16 @@ ul#adminmenu > li.current > a.current:after { position: relative; overflow: visible; background: none; - color: var(--wp-admin-menu--icon--color); + color: var(--wp-admin--admin-menu--icon--color); cursor: pointer; } #collapse-button:hover { - color: var(--wp-admin-menu--icon--color--hover); + color: var(--wp-admin--admin-menu--icon--color--hover); } #collapse-button:focus { - color: var(--wp-admin-menu--icon--color--hover); + color: var(--wp-admin--admin-menu--icon--color--hover); /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; outline-offset: -1px; @@ -936,7 +936,7 @@ li#wp-admin-bar-menu-toggle { } .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { - background: var(--wp-admin-menu--submenu--background); + background: var(--wp-admin--admin-menu--submenu--background); } li#wp-admin-bar-menu-toggle { @@ -967,7 +967,7 @@ li#wp-admin-bar-menu-toggle { } .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { - color: var(--wp-admin-menu--icon--color--hover); + color: var(--wp-admin--admin-menu--icon--color--hover); } } diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 98f4c505360e2..1b66460e89af9 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -34,7 +34,7 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon { - color: var(--wp-admin-menu--link--color, #f0f0f1); + color: var(--wp-admin--admin-menu--link--color, #f0f0f1); } #wpadminbar #wp-admin-bar-site-name a.ab-item, @@ -89,7 +89,7 @@ html:lang(he-il) .rtl #wpadminbar * { width: 100%; min-width: 600px; /* match the min-width of the body in wp-admin/css/common.css */ z-index: 99999; - background: var(--wp-admin-menu--background, #1d2327); + background: var(--wp-admin--admin-menu--background, #1d2327); } #wpadminbar .ab-sub-wrapper, @@ -142,8 +142,8 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar .shortlink-input { margin: 0; padding: 0; - box-shadow: 0 3px 5px var(--wp-admin-menu--submenu--box-shadow, rgba(0, 0, 0, 0.2)); - background: var(--wp-admin-menu--submenu--background, #2c3338); + box-shadow: 0 3px 5px var(--wp-admin--admin-menu--submenu--box-shadow, rgba(0, 0, 0, 0.2)); + background: var(--wp-admin--admin-menu--submenu--background, #2c3338); display: none; position: absolute; float: none; @@ -211,14 +211,14 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li.hover > .ab-item { - background: var(--wp-admin-menu--submenu--background, #2c3338); - color: var(--wp-admin-menu--link--color--hover, #72aee6); + background: var(--wp-admin--admin-menu--submenu--background, #2c3338); + color: var(--wp-admin--admin-menu--link--color--hover, #72aee6); } #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, #wpadminbar > #wp-toolbar li.hover span.ab-label, #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { - color: var(--wp-admin-menu--link--color--hover, #72aee6); + color: var(--wp-admin--admin-menu--link--color--hover, #72aee6); } #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon, @@ -239,7 +239,7 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar .ab-icon:before, #wpadminbar .ab-item:before, #wpadminbar #adminbarsearch:before { - color: var(--wp-admin-menu--icon--color, #a7aaad); + color: var(--wp-admin--admin-menu--icon--color, #a7aaad); } #wpadminbar .ab-icon:before, @@ -255,14 +255,14 @@ html:lang(he-il) .rtl #wpadminbar * { } #wpadminbar .ab-submenu .ab-item { - color: var(--wp-admin-menu--submenu-link--color, #c3c4c7); + color: var(--wp-admin--admin-menu--submenu-link--color, #c3c4c7); } #wpadminbar .quicklinks .menupop ul li a, #wpadminbar .quicklinks .menupop ul li a strong, #wpadminbar .quicklinks .menupop.hover ul li a, #wpadminbar.nojs .quicklinks .menupop:hover ul li a { - color: var(--wp-admin-menu--submenu-link--color, #c3c4c7); + color: var(--wp-admin--admin-menu--submenu-link--color, #c3c4c7); } #wpadminbar .quicklinks .menupop ul li a:hover, @@ -285,17 +285,17 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar li.hover .ab-item:before, #wpadminbar li:hover #adminbarsearch:before, #wpadminbar li #adminbarsearch.adminbar-focused:before { - color: var(--wp-admin-menu--link--color--hover, #72aee6); + color: var(--wp-admin--admin-menu--link--color--hover, #72aee6); } #wpadminbar.mobile .quicklinks .ab-icon:before, #wpadminbar.mobile .quicklinks .ab-item:before { - color: var(--wp-admin-menu--submenu-link--color, #c3c4c7); + color: var(--wp-admin--admin-menu--submenu-link--color, #c3c4c7); } #wpadminbar.mobile .quicklinks .hover .ab-icon:before, #wpadminbar.mobile .quicklinks .hover .ab-item:before { - color: var(--wp-admin-menu--link--color--hover, #72aee6); + color: var(--wp-admin--admin-menu--link--color--hover, #72aee6); } #wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before, @@ -341,12 +341,12 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar .quicklinks .menupop ul.ab-sub-secondary, #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { - background: var(--wp-admin-menu--tertiary--background, #3c434a); + background: var(--wp-admin--admin-menu--tertiary--background, #3c434a); } #wpadminbar .quicklinks .menupop .ab-sub-secondary > li > a:hover, #wpadminbar .quicklinks .menupop .ab-sub-secondary > li .ab-item:focus a { - color: var(--wp-admin-menu--link--color--hover, #72aee6); + color: var(--wp-admin--admin-menu--link--color--hover, #72aee6); } /* #ab-updates was removed in r19516 */ @@ -366,16 +366,16 @@ html:lang(he-il) .rtl #wpadminbar * { * Recovery Mode */ #wpadminbar #wp-admin-bar-recovery-mode { - color: var(--wp-admin-menu--notification--color, #fff); - background-color: var(--wp-admin-menu--notification--background, #d63638); + color: var(--wp-admin--admin-menu--notification--color, #fff); + background-color: var(--wp-admin--admin-menu--notification--background, #d63638); } #wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { - color: var(--wp-admin-menu--notification--color--current, #fff); - background-color: var(--wp-admin-menu--notification--background--current, #d63638); + color: var(--wp-admin--admin-menu--notification--color--current, #fff); + background-color: var(--wp-admin--admin-menu--notification--background--current, #d63638); } /** @@ -498,13 +498,13 @@ html:lang(he-il) .rtl #wpadminbar * { speak: never; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: var(--wp-admin-menu--link--color, #f0f0f1); + color: var(--wp-admin--admin-menu--link--color, #f0f0f1); } #wpadminbar .quicklinks li a:hover .blavatar, #wpadminbar .quicklinks li a:focus .blavatar, #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar { - color: var(--wp-admin-menu--link--color--hover, #72aee6); + color: var(--wp-admin--admin-menu--link--color--hover, #72aee6); } #wpadminbar .quicklinks li img.blavatar, @@ -931,7 +931,7 @@ html:lang(he-il) .rtl #wpadminbar * { height: auto; font-size: 16px; line-height: 1.5; - color: var(--wp-admin-menu--link--color, #f0f0f1); + color: var(--wp-admin--admin-menu--link--color, #f0f0f1); } #wpadminbar #wp-admin-bar-user-info a { From c5c6994aa43803300e2ce4979f2e3cd83b5bb72f Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 8 Jul 2021 12:04:39 -0400 Subject: [PATCH 19/62] Update scheme colors --- src/wp-admin/css/common.css | 22 ++++++++++++---------- src/wp-includes/css/custom-properties.css | 23 ++++++++++++++++------- 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 2646efc32747a..cd7c0ef79d40a 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -701,32 +701,34 @@ ul.striped > :nth-child(odd), color: #3c434a; } +/* "Primary" uses the menu background variable for backwards compatibility. */ .wp-ui-primary { - color: #fff; - background-color: #2c3338; + color: var(--wp-admin--admin-menu--link--color); + background-color: var(--wp-admin--admin-menu--background); } .wp-ui-text-primary { - color: #2c3338; + color: var(--wp-admin--admin-menu--background); } +/* "Highlight" uses the primary variable for backwards compatibility. */ .wp-ui-highlight { - color: #fff; - background-color: #2271b1; + color: var(--wp-admin--theme--primary--contrast); + background-color: var(--wp-admin--theme--primary); } .wp-ui-text-highlight { - color: #2271b1; + color: var(--wp-admin--theme--primary); } .wp-ui-notification { - color: #fff; - background-color: #d63638; + color: var(--wp-admin--theme--notification--contrast); + background-color: var(--wp-admin--theme--notification); } .wp-ui-text-notification { - color: #d63638; + color: var(--wp-admin--theme--notification); } .wp-ui-text-icon { - color: #8c8f94; /* same as new icons */ + color: var(--wp-admin--admin-menu--icon--color); } /* For emoji replacement images */ diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 7b7f1349800cc..c3dac4fe9b84d 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -1,4 +1,10 @@ body { + --wp-admin--theme--primary: #2271b1; + --wp-admin--theme--primary--contrast: #f6f7f7; + --wp-admin--theme--primary--step-10: #1a5686; + --wp-admin--theme--notification: #d63638; + --wp-admin--theme--notification--contrast: #fff; + --wp-admin--page--background: #f0f0f1; --wp-admin--surface--background: #fff; --wp-admin--surface--background-alternate: #f6f7f7; @@ -14,8 +20,8 @@ body { --wp-admin--admin-menu--background: #1d2327; - --wp-admin--link--color: #2271b1; - --wp-admin--link--color--hover: #135e96; + --wp-admin--link--color: var(--wp-admin--theme--primary); + --wp-admin--link--color--hover: var(--wp-admin--theme--primary--step-10); --wp-admin--link-delete--color: #b32d2e; --wp-admin--link-delete--color--hover: #b32d2e; @@ -23,8 +29,8 @@ body { --wp-admin--button--hover: #f0f0f1; --wp-admin--button--shadow: #dcdcde; --wp-admin--button--border--disabled: #dcdcde; - --wp-admin--button-primary: #2271b1; - --wp-admin--button-primary--hover: #135e96; + --wp-admin--button-primary: var(--wp-admin--theme--primary); + --wp-admin--button-primary--hover: var(--wp-admin--theme--primary--step-10); --wp-admin--button--text: var(--wp-admin--button-primary); --wp-admin--button-primary--text: var(--wp-admin--button); @@ -80,7 +86,10 @@ body { } body.admin-color-ectoplasm { - --wp-admin--button-primary: #a3b745; - --wp-admin--button-primary--hover: #99ac41; - --wp-admin--button--text: #68753e; + --wp-admin--theme--primary: #a3b745; + --wp-admin--theme--primary--step-10: #99ac41; + --wp-admin--button--text: #694c93; + --wp-admin--link--color: #694c93; + --wp-admin--link--color--hover: #453261; + --wp-admin--theme--notification: #d46f15; } From c4b8003a78df606daed6582e09c0a531aa155777 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 8 Jul 2021 12:05:00 -0400 Subject: [PATCH 20/62] Misc property updates --- src/wp-admin/css/common.css | 130 +++++++++++----------- src/wp-includes/css/custom-properties.css | 8 ++ 2 files changed, 75 insertions(+), 63 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index cd7c0ef79d40a..d869d2e3e8c1e 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -203,7 +203,7 @@ p.popular-tags, .feature-filter, .imgedit-group, .comment-ays { - background: #fff; + background: var(--wp-admin--surface--background); } /* general */ @@ -768,19 +768,20 @@ img.emoji { .widget .widget-top, .menu-item-handle { - background: #f6f7f7; - color: #1d2327; + background: var(--wp-admin--surface--background-alternate); + color: var(--wp-admin--heading--color); } .stuffbox .hndle { border-bottom: 1px solid var(--wp-admin--surface--border); } -.quicktags { +/* @deprecated I think this class was never used (it should be an ID). */ +/* .quicktags { background-color: #c3c4c7; color: #000; font-size: 12px; -} +} */ .icon32 { display: none; @@ -792,7 +793,7 @@ img.emoji { #bulk-titles div a:before, .notice-dismiss:before { background: none; - color: #787c82; + color: var(--wp-admin--icon--fill); content: "\f153"; display: block; font: normal 16px/20px dashicons; @@ -815,7 +816,7 @@ img.emoji { .tagchecklist .ntdelbutton .remove-tag-icon:before { margin-left: 2px; border-radius: 50%; - color: #2271b1; + color: var(--wp-admin--button-primary); /* vertically center the icon cross browsers */ line-height: 1.28; } @@ -830,13 +831,13 @@ img.emoji { .tagchecklist .ntdelbutton:focus .remove-tag-icon:before, #bulk-titles div a:hover:before, #bulk-titles div a:focus:before { - color: #d63638; + color: var(--wp-admin--icon-destructive--fill); } .tagchecklist .ntdelbutton:focus .remove-tag-icon:before { box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + 0 0 0 1px var(--wp-admin--button-primary--hover), + 0 0 2px 1px var(--wp-admin--button-primary); } .key-labels label { @@ -854,7 +855,7 @@ strong, b { } .howto { - color: #646970; + color: var(--wp-admin--text-secondary--color); display: block; } @@ -869,8 +870,8 @@ p.install-help { hr { border: 0; - border-top: 1px solid #dcdcde; - border-bottom: 1px solid #f6f7f7; + border-top: 1px solid var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--background-alternate); } .row-actions span.delete a, @@ -914,8 +915,8 @@ a#remove-post-thumbnail:hover { #major-publishing-actions { padding: 10px; clear: both; - border-top: 1px solid #dcdcde; - background: #f6f7f7; + border-top: 1px solid var(--wp-admin--surface--border); + background: var(--wp-admin--surface--background-alternate); } #delete-action { @@ -1643,11 +1644,11 @@ p.auto-update-status { } .button-primary.updating-message:before { - color: #fff; + color: var(--wp-admin--button-primary--text); } .button-primary.updated-message:before { - color: #9ec2e6; + color: var(--wp-admin--button-primary--text); } .button.updated-message { @@ -1702,7 +1703,7 @@ p.auto-update-status { display: none; margin: 0 20px -1px 0px; position: relative; - background-color: #fff; + background-color: var(--wp-admin--surface--background); border: 1px solid var(--wp-admin--surface--border); border-top: none; box-shadow: 0 0 0 transparent; @@ -1725,9 +1726,9 @@ p.auto-update-status { height: auto; margin-bottom: 0; padding: 3px 6px 3px 16px; - background: #fff; + background: var(--wp-admin--surface--background); border-radius: 0 0 4px 4px; - color: #646970; + color: var(--wp-admin--text-secondary--color); line-height: 1.7; box-shadow: 0 0 0 transparent; transition: box-shadow 0.1s linear; @@ -1736,12 +1737,12 @@ p.auto-update-status { #screen-meta-links .show-settings:hover, #screen-meta-links .show-settings:active, #screen-meta-links .show-settings:focus { - color: #2c3338; + color: var(--wp-admin--text--color); } #screen-meta-links .show-settings:focus { - border-color: #4f94d4; - box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + border-color: var(--wp-admin--button-primary--hover); + box-shadow: 0 0 2px 1px var(--wp-admin--button-primary); } #screen-meta-links .show-settings:active { @@ -1913,7 +1914,9 @@ p.auto-update-status { margin: 0 -1px 0 0; border-left: 2px solid var(--wp-admin--help-tab--border--active); background: var(--wp-admin--help-tab--background); - box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02); + box-shadow: + 0 2px 0 rgb(var( --wp-admin--shadow ) / 0.02), + 0 1px 0 rgb(var( --wp-admin--shadow ) / 0.02); } .contextual-help-tabs .active a { @@ -2089,7 +2092,7 @@ html.wp-toolbar { .postbox .handle-order-higher, .postbox .handle-order-lower { - color: #787c82; + color: var(--wp-admin--icon--fill); width: 1.62rem; } @@ -2104,11 +2107,11 @@ html.wp-toolbar { .postbox .handle-order-higher[aria-disabled="true"], .postbox .handle-order-lower[aria-disabled="true"] { cursor: default; - color: #a7aaad; + color: var(--wp-admin--icon--fill--disabled); } .sortable-placeholder { - border: 1px dashed #c3c4c7; + border: 1px dashed var(--wp-admin--surface--border); margin-bottom: 20px; } @@ -2167,7 +2170,7 @@ html.wp-toolbar { } .temp-border { - border: 1px dotted #c3c4c7; + border: 1px dotted var(--wp-admin--surface--border); } .columns-prefs label { @@ -2352,7 +2355,7 @@ table .column-rating { .attention, .error-message { - color: #d63638; + color: var(--wp-admin--notice-error--color); font-weight: 600; } @@ -2378,8 +2381,7 @@ body.iframe { } .media-icon img { - border: 1px solid #dcdcde; - border: 1px solid rgba(0, 0, 0, 0.07); + border: 1px solid var(--wp-admin--surface--border-alternate); } #howto { @@ -2413,7 +2415,7 @@ body.iframe { } .importer-title { - color: #000; + color: var(--wp-admin--heading--color); font-size: 14px; font-weight: 400; margin-bottom: .2em; @@ -2431,8 +2433,8 @@ body.iframe { } .edit-comment-author { - color: #1d2327; - border-bottom: 1px solid #f0f0f1; + color: var(--wp-admin--heading--color); + border-bottom: 1px solid var(--wp-admin--surface--border-alternate); } #namediv h3 label, /* Back-compat for pre-4.4 */ @@ -2606,10 +2608,9 @@ div.action-links { max-width: 100%; padding: 0 15px; margin-top: 174px; - color: #fff; - background: rgba(29, 35, 39, 0.9); - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); - box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); + color: var(--wp-admin--plugin-modal-banner-title--color); + background: var(--wp-admin--plugin-modal-banner-title--background); + box-shadow: 0 0 30px rgb(var(--wp-admin--highlight) / 0.1); border-radius: 8px; } @@ -2625,7 +2626,9 @@ div.action-links { height: 250px; width: 100%; background: transparent; - box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: + inset 0 0 50px 4px rgb(var(--wp-admin--shadow) / 0.2), + inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1); } #plugin-information-tabs { @@ -2841,7 +2844,7 @@ div.action-links { max-width: 100%; width: auto; height: auto; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 2px rgb(var(--wp-admin--shadow) / 0.3); } /* rtl:ignore */ @@ -2857,8 +2860,8 @@ div.action-links { } #plugin-information blockquote { - border-left: 2px solid #dcdcde; - color: #646970; + border-left: 2px solid var(--wp-admin--surface--border); + color: var(--wp-admin--text-secondary--color); font-style: italic; margin: 1em 0; padding: 0 0 0 1em; @@ -2869,7 +2872,7 @@ div.action-links { overflow: hidden; /* clearfix */ width: 100%; margin-bottom: 20px; - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin--surface--border-alternate); } #plugin-information .review-title-section { @@ -2950,7 +2953,7 @@ div.action-links { #plugin-information .fyi { float: none; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin--surface--border); position: static; width: auto; margin: 26px 26px 0; @@ -2976,7 +2979,7 @@ div.action-links { /* Thickbox for the Plugin details modal. */ #TB_window.plugin-details-modal { - background: #fff; + background: var(--wp-admin--surface--background); } #TB_window.plugin-details-modal.thickbox-loading:before { @@ -2989,7 +2992,7 @@ div.action-links { top: 50%; z-index: -1; margin: -10px 0 0 -10px; - background: #fff url(../images/spinner.gif) no-repeat center; + background: var(--wp-admin--surface--background) url(../images/spinner.gif) no-repeat center; background-size: 20px 20px; transform: translateZ(0); } @@ -3015,12 +3018,12 @@ div.action-links { .plugin-details-modal #TB_closeWindowButton { left: auto; right: -30px; - color: #f0f0f1; + color: var(--wp-admin--button); } .plugin-details-modal #TB_closeWindowButton:hover, .plugin-details-modal #TB_closeWindowButton:focus { - color: #135e96; + color: var(--wp-admin--button-primary); outline: none; box-shadow: none; } @@ -3109,15 +3112,15 @@ img { .bulk-action-notice .toggle-indicator::before { line-height: 16px; vertical-align: top; - color: #787c82; + color: var(--wp-admin--icon--fill); } .postbox .handle-order-higher:focus, .postbox .handle-order-lower:focus, .postbox .handlediv:focus { box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + 0 0 0 1px var(--wp-admin--button-primary--hover), + 0 0 2px 1px var(--wp-admin--button-primary); /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } @@ -3595,6 +3598,7 @@ img { padding: 8px 3%; min-height: 130px; margin: 0; + background-color: var(--wp-admin--surface--background); } @media only screen and (max-width: 599px) { @@ -3605,7 +3609,7 @@ img { @media only screen and (min-width: 600px) { .my-sites.striped li { - background-color: #fff; + background-color: var(--wp-admin--surface--background); position: relative; } .my-sites.striped li:after { @@ -3615,7 +3619,7 @@ img { position: absolute; top: 0; right: 0; - background: #c3c4c7; + background: var(--wp-admin--surface--border); } } @@ -3625,7 +3629,7 @@ img { width: 44%; } .my-sites.striped li { - background-color: #fff; + background-color: var(--wp-admin--surface--background); } .my-sites.striped li:nth-of-type(2n+1) { clear: left; @@ -3635,7 +3639,7 @@ img { } .my-sites li:nth-of-type(4n+1), .my-sites li:nth-of-type(4n+2) { - background-color: #f6f7f7; + background-color: var(--wp-admin--surface--background-alternate); } } @@ -3644,7 +3648,7 @@ img { .my-sites li { float: left; width: 27.333333%; - background-color: #fff; + background-color: var(--wp-admin--surface--background); } .my-sites.striped li:nth-of-type(3n+3):after { content: none; @@ -3652,7 +3656,7 @@ img { .my-sites li:nth-of-type(6n+1), .my-sites li:nth-of-type(6n+2), .my-sites li:nth-of-type(6n+3) { - background-color: #f6f7f7; + background-color: var(--wp-admin--surface--background-alternate); } } @@ -3661,7 +3665,7 @@ img { float: left; width: 21%; padding: 8px 2%; - background-color: #fff; + background-color: var(--wp-admin--surface--background); } .my-sites.striped li:nth-of-type(4n+1) { clear: left; @@ -3673,7 +3677,7 @@ img { .my-sites li:nth-of-type(8n+2), .my-sites li:nth-of-type(8n+3), .my-sites li:nth-of-type(8n+4) { - background-color: #f6f7f7; + background-color: var(--wp-admin--surface--background-alternate); } } @@ -3682,7 +3686,7 @@ img { float: left; width: 16%; padding: 8px 2%; - background-color: #fff; + background-color: var(--wp-admin--surface--background); } .my-sites.striped li:nth-of-type(5n+1) { clear: left; @@ -3695,7 +3699,7 @@ img { .my-sites li:nth-of-type(10n+3), .my-sites li:nth-of-type(10n+4), .my-sites li:nth-of-type(10n+5) { - background-color: #f6f7f7; + background-color: var(--wp-admin--surface--background-alternate); } } @@ -3704,7 +3708,7 @@ img { float: left; width: 12.666666%; padding: 8px 2%; - background-color: #fff; + background-color: var(--wp-admin--surface--background); } .my-sites.striped li:nth-of-type(6n+1) { clear: left; @@ -3718,7 +3722,7 @@ img { .my-sites li:nth-of-type(12n+4), .my-sites li:nth-of-type(12n+5), .my-sites li:nth-of-type(12n+6) { - background-color: #f6f7f7; + background-color: var(--wp-admin--surface--background-alternate); } } diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index c3dac4fe9b84d..0db04c2715ebf 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -5,6 +5,9 @@ body { --wp-admin--theme--notification: #d63638; --wp-admin--theme--notification--contrast: #fff; + --wp-admin--shadow: 0 0 0; + --wp-admin--highlight: 255 255 255; + --wp-admin--page--background: #f0f0f1; --wp-admin--surface--background: #fff; --wp-admin--surface--background-alternate: #f6f7f7; @@ -75,14 +78,19 @@ body { --wp-admin--notice-warning--border: #dba617; --wp-admin--notice-error--background: #fcf0f1; --wp-admin--notice-error--border: #d63638; + --wp-admin--notice-error--color: #d63638; --wp-admin--icon--fill: #787c82; + --wp-admin--icon--fill--disabled: #a7aaad; --wp-admin--icon-destructive--fill: #d63638; --wp-admin--icon-error--fill: var(--wp-admin--icon-destructive--fill); --wp-admin--icon-success--fill: #68de7c; --wp-admin--screen-reader-text--background: var(--wp-admin--page--background); --wp-admin--screen-reader-text--color: var(--wp-admin--link--color); + + --wp-admin--plugin-modal-banner-title--color: #fff; + --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); } body.admin-color-ectoplasm { From cd883dbdfb47ad81c171c19b97b5191498ea919f Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 8 Jul 2021 16:23:42 -0400 Subject: [PATCH 21/62] Add "editor color", tbd --- src/wp-admin/css/common.css | 2 +- src/wp-includes/css/custom-properties.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index d869d2e3e8c1e..20f48cedefbea 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2101,7 +2101,7 @@ html.wp-toolbar { .edit-post-meta-boxes-area .postbox .handle-order-lower { width: 44px; height: 44px; - color: #1d2327 + color: var(--wp-admin--editor--color); } .postbox .handle-order-higher[aria-disabled="true"], diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 0db04c2715ebf..8cdcfe08c1345 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -7,6 +7,7 @@ body { --wp-admin--shadow: 0 0 0; --wp-admin--highlight: 255 255 255; + --wp-admin--editor--color: #1d2327; --wp-admin--page--background: #f0f0f1; --wp-admin--surface--background: #fff; From 6ac46e2c5cad7a5e2f60c8aafe04847d8301ef15 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 8 Jul 2021 17:01:10 -0400 Subject: [PATCH 22/62] Update plugin & theme editor --- src/wp-admin/css/common.css | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 20f48cedefbea..f8b3b5a719614 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -3146,7 +3146,7 @@ img { #template textarea { font-family: Consolas, Monaco, monospace; font-size: 13px; - background: #f6f7f7; + background: var(--wp-admin--surface--background); -moz-tab-size: 4; tab-size: 4; } @@ -3156,7 +3156,7 @@ img { width: 100%; min-height: 60vh; height: calc( 100vh - 295px ); - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin--surface--border); box-sizing: border-box; } @@ -3178,8 +3178,8 @@ img { padding: 0; min-height: 60vh; height: calc(100vh - 295px); - background-color: #f6f7f7; - border: 1px solid #dcdcde; + background-color: var(--wp-admin--surface--background-alternate); + border: 1px solid var(--wp-admin--surface--border); border-left: none; } #templateside ul ul { @@ -3223,14 +3223,13 @@ img { outline: 0; } [role="treeitem"] .folder-label.focus { - color: #043959; box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + 0 0 0 1px var(--wp-admin--button-primary--hover), + 0 0 2px 1px var(--wp-admin--button-primary); } [role="treeitem"].hover, [role="treeitem"] .folder-label.hover { - background-color: #f0f0f1; + background-color: var(--wp-admin--button--hover); } .tree-folder { @@ -3387,7 +3386,7 @@ img { } .nonessential { - color: #646970; + color: var(--wp-admin--text-secondary--color); font-size: 11px; font-style: italic; padding-left: 12px; From 35165a83f77ecca68f23717a7c9f5f211d96a595 Mon Sep 17 00:00:00 2001 From: Dave Ryan Date: Thu, 22 Jul 2021 18:01:23 -0700 Subject: [PATCH 23/62] First pass at CSS custom props for wp-login.php --- src/wp-admin/css/login.css | 46 +++++++++++------------ src/wp-includes/css/custom-properties.css | 10 +++++ src/wp-includes/script-loader.php | 2 +- 3 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css index 245799fa987eb..c7e89749d37de 100644 --- a/src/wp-admin/css/login.css +++ b/src/wp-admin/css/login.css @@ -6,16 +6,16 @@ body { } body { - background: #f0f0f1; + background: var(-wp-admin--page--background, #f0f0f1); min-width: 0; - color: #3c434a; + color: var(--wp-admin--text--color, #3c434a); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4; } a { - color: #2271b1; + color: var(--wp-admin--theme--primary, #2271b1); transition-property: border, background, color; transition-duration: .05s; transition-timing-function: ease-in-out; @@ -27,14 +27,14 @@ a { a:hover, a:active { - color: #135e96; + color: var(--wp-admin--login-anchor--color--hover, #135e96); } a:focus { - color: #043959; + color: var(--wp-admin--login-anchor--color--focus, #043959); box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + 0 0 0 1px var(--wp-admin--login-anchor--box-shadow-from--focus, #4f94d4), + 0 0 2px 1px var(--wp-admin--login-anchor--box-shadow-to--focus, rgba(79, 148, 212, 0.8)); } p { @@ -44,20 +44,20 @@ p { .login .message, .login .success, .login #login_error { - border-left: 4px solid #72aee6; + border-left: 4px solid var(--wp-admin--notice-info--border, #72aee6); padding: 12px; margin-left: 0; margin-bottom: 20px; background-color: #fff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 0 var(--wp-admin--login--box-shadow, rgba(0, 0, 0, 0.1)); } .login .success { - border-left-color: #00a32a; + border-left-color: var(--wp-admin--notice-success--border, #00a32a); } .login #login_error { - border-left-color: #d63638; + border-left-color: var(--wp-admin--notice-error--border, #d63638); } #loginform p.submit, @@ -102,8 +102,8 @@ p { .login .button.wp-hide-pw:focus { background: transparent; - border-color: #3582c4; - box-shadow: 0 0 0 1px #3582c4; + border-color: var(--wp-admin--login-button--border-color, #3582c4); + box-shadow: 0 0 0 1px var(--wp-admin--login-form--box-shadow,#3582c4); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -134,9 +134,9 @@ p { padding: 26px 24px 34px; font-weight: 400; overflow: hidden; - background: #fff; - border: 1px solid #c3c4c7; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); + background: var(--wp-admin--surface--background, #fff); + border: 1px solid var(--wp-admin--surface--border, #c3c4c7); + box-shadow: 0 1px 3px var(--wp-admin--login-form--box-shadow, rgba(0, 0, 0, 0.04)); } .login form.shake { @@ -215,8 +215,8 @@ p { } .login h1.admin-email__heading { - border-bottom: 1px #f0f0f1 solid; - color: #50575e; + border-bottom: 1px var(--wp-admin--surface--border-alternate, #f0f0f1) solid; + color: var(--wp-admin--heading-secondary--color, #50575e); font-weight: normal; padding-bottom: 0.5em; text-align: left; @@ -264,7 +264,7 @@ p { background-size: 84px; background-position: center top; background-repeat: no-repeat; - color: #3c434a; + color: var(--wp-admin--text--color, #3c434a); height: 84px; font-size: 20px; font-weight: 400; @@ -303,19 +303,19 @@ p { .login #nav a, .login #backtoblog a { text-decoration: none; - color: #50575e; + color: var(--wp-admin--heading-secondary--color, #50575e); } .login #nav a:hover, .login #backtoblog a:hover, .login h1 a:hover { - color: #135e96; + color: var(--wp-admin--login-anchor--color--hover, #135e96); } .login #nav a:focus, .login #backtoblog a:focus, .login h1 a:focus { - color: #043959; + color: var(--wp-admin--login-anchor--color--focus, #043959); } .login .privacy-policy-page-link { @@ -350,7 +350,7 @@ p { .login form .input, .login input[type="text"], .login form input[type="checkbox"] { - background: #fff; + background: var(--wp-admin--surface--background, #fff); } .js.login-action-rp input[type="text"], diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 8cdcfe08c1345..82c21269d94dc 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -92,6 +92,16 @@ body { --wp-admin--plugin-modal-banner-title--color: #fff; --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); + + --wp-admin--login-anchor--color--hover: #135e96; + --wp-admin--login-anchor--color--focus: #043959; + --wp-admin--login-anchor--box-shadow-from--focus: #4f94d4; + --wp-admin--login-anchor--box-shadow-to--focus: rgba(79, 148, 212, 0.8); + --wp-admin--login--box-shadow: rgba(0, 0, 0, 0.1); + --wp-admin--login-button--border-color: #3582c4; + --wp-admin--login-button--box-shadow: var(--wp-admin--login-button--border-color); + --wp-admin--login-form--box-shadow: rgba(0, 0, 0, 0.04); + } body.admin-color-ectoplasm { diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index d63e8384b2e4e..50853fd7ff25c 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1439,7 +1439,7 @@ function wp_default_styles( $styles ) { $styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n' ) ); - $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) ); + $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'colors' ) ); $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) ); $styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" ); $styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'imgareaselect' ) ); From 7a0506e1c4a13667a4dc2993c351861f57f69935 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Fri, 23 Jul 2021 16:03:33 -0700 Subject: [PATCH 24/62] Add custom prop css colors to install page styles Repeating some colors as the existing matches had names that were specific enough that using them didn't make sense. Also adding some others that were not already existing which will hopefully be able to be consolidated. I included the `colors` file as a dependency for the install css which broke the layout, hence the `body { height: auto; }` addition. Idelaly this page would be rebuilt with some more consistent page structure, but that's beyond scope of this PR. --- src/wp-admin/css/install.css | 107 ++++++++++++---------- src/wp-includes/css/custom-properties.css | 28 +++++- src/wp-includes/script-loader.php | 2 +- 3 files changed, 86 insertions(+), 51 deletions(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index b8ddbef0141d0..51395384c5443 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -1,40 +1,49 @@ html { - background: #f0f0f1; + background: var(--wp-admin--page--background, #f0f0f1); margin: 0 20px; } body { - background: #fff; - border: 1px solid #c3c4c7; - color: #3c434a; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + background: var(--wp-admin--surface--background, #fff); + border: 1px solid var(--wp-admin--surface--border, #c3c4c7); + color: var(--wp-admin--text--color, #3c434a); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + height: auto; margin: 140px auto 25px; padding: 20px 20px 10px 20px; max-width: 700px; -webkit-font-smoothing: subpixel-antialiased; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px + var(--wp-admin--install--body--box-shadow, rgba(0, 0, 0, 0.04)); } a { - color: #2271b1; + color: var(--wp-admin--link--color, #2271b1); } a:hover, a:active { - color: #135e96; + color: var(--wp-admin--install--link--color--hover, #135e96); } a:focus { - color: #043959; - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); -} - -h1, h2 { - border-bottom: 1px solid #dcdcde; + color: var(--wp-admin--install--link--color--focus, #043959); + box-shadow: 0 0 0 1px + var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), + 0 0 2px 1px + var( + --wp-admin--install--link--color--focus--box-shadow-alt, + rgba(79, 148, 212, 0.8) + ); +} + +h1, +h2 { + border-bottom: 1px solid + var(--wp-admin--install--heading--border-color, #dcdcde); clear: both; - color: #646970; + color: var(--wp-admin--install--heading--color, #646970); font-size: 24px; padding: 0 0 7px; font-weight: 400; @@ -44,22 +53,28 @@ h3 { font-size: 16px; } -p, li, dd, dt { +p, +li, +dd, +dt { padding-bottom: 2px; font-size: 14px; line-height: 1.5; } -code, .code { +code, +.code { font-family: Consolas, Monaco, monospace; } -ul, ol, dl { +ul, +ol, +dl { padding: 5px 5px 5px 22px; } a img { - border: 0 + border: 0; } abbr { border: 0; @@ -87,7 +102,7 @@ label { background-size: 84px; background-position: center top; background-repeat: no-repeat; - color: #3c434a; /* same as login.css */ + color: var(--wp-admin--text--color, #3c434a); /* same as login.css */ font-size: 20px; font-weight: 400; line-height: 1.3em; @@ -100,7 +115,8 @@ label { .step { margin: 20px 0 15px; } -.step, th { +.step, +th { text-align: left; padding: 0; } @@ -108,8 +124,9 @@ label { font-size: 14px; } textarea { - border: 1px solid #dcdcde; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + border: 1px solid var(--wp-admin--install--textarea--border, #dcdcde); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; width: 100%; box-sizing: border-box; } @@ -124,7 +141,7 @@ textarea { margin-bottom: 9px; padding: 10px 20px 10px 0; font-size: 14px; - vertical-align: top + vertical-align: top; } .form-table th { @@ -153,13 +170,14 @@ textarea { input, submit { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } -.form-table input[type=text], -.form-table input[type=email], -.form-table input[type=url], -.form-table input[type=password], +.form-table input[type="text"], +.form-table input[type="email"], +.form-table input[type="url"], +.form-table input[type="password"], #pass-strength-result { width: 218px; } @@ -194,14 +212,15 @@ submit { margin: 25px 0 20px; } -#error-page code, .code { +#error-page code, +.code { font-family: Consolas, Monaco, monospace; } .message { - border-left: 4px solid #d63638; - padding: .7em .6em; - background-color: #fcf0f1; + border-left: 4px solid var(--wp-admin--theme--notification, #d63638); + padding: 0.7em 0.6em; + background-color: var(--wp-admin--page--background, #fcf0f1); } /* rtl:ignore */ @@ -217,7 +236,6 @@ submit { direction: ltr; } - /* localization */ body.rtl, .rtl textarea, @@ -243,7 +261,6 @@ body.rtl, } @media screen and (max-width: 782px) { - .form-table { margin-top: 0; } @@ -307,21 +324,21 @@ body.language-chooser { padding: 8px; width: 100%; display: block; - border: 1px solid #dcdcde; - background: #fff; - color: #2c3338; + border: 1px solid var(--wp-admin--install--select--border, #dcdcde); + background: var(--wp-admin--surface--background, #fff); + color: var(--wp-admin--input--color, #2c3338); font-size: 16px; font-family: Arial, sans-serif; font-weight: 400; } .language-chooser select:focus { - color: #2c3338; + color: var(--wp-admin--input--color, #2c3338); } .language-chooser select option:hover, .language-chooser select option:focus { - color: #0a4b78; + color: var(--wp-admin--install--select--color--focus, #0a4b78); } .language-chooser .step { @@ -368,12 +385,8 @@ body.language-chooser { /** * HiDPI Displays */ -@media print, - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - +@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { .spinner { background-image: url(../images/spinner-2x.gif); } - } diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 8cdcfe08c1345..2722ef24b1784 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -67,9 +67,15 @@ body { --wp-admin--filter-button--color: var(--wp-admin--text-secondary--color); --wp-admin--filter-button--color--hover: var(--wp-admin--link--color--hover); - --wp-admin--filter-button--color--active: var(--wp-admin--surface--background); - --wp-admin--filter-button--background--active: var(--wp-admin--text-secondary--color); - --wp-admin--filter-button--background--active-hover: var(--wp-admin--button-primary); + --wp-admin--filter-button--color--active: var( + --wp-admin--surface--background + ); + --wp-admin--filter-button--background--active: var( + --wp-admin--text-secondary--color + ); + --wp-admin--filter-button--background--active-hover: var( + --wp-admin--button-primary + ); --wp-admin--notice-success--background: #edfaef; --wp-admin--notice-success--border: #00a32a; @@ -92,6 +98,22 @@ body { --wp-admin--plugin-modal-banner-title--color: #fff; --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); + + --wp-admin--install--body--box-shadow: rgba(0, 0, 0, 0.04); + --wp-admin--install--link--color--hover: #135e96; + --wp-admin--install--link--color--focus: #043959; + --wp-admin--install--link--color--focus--box-shadow: #4f94d4; + --wp-admin--install--link--color--focus--box-shadow-alt: rgba( + 79, + 148, + 212, + 0.8 + ); + --wp-admin--install--heading--border-color: #dcdcde; + --wp-admin--install--heading--color: #646970; + --wp-admin--install--textarea--border: #dcdcde; + --wp-admin--install--select--border: #dcdcde; + --wp-admin--install--select--color--focus: #0a4b78; } body.admin-color-ectoplasm { diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index d63e8384b2e4e..4f99c1357c4e1 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1440,7 +1440,7 @@ function wp_default_styles( $styles ) { $styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n' ) ); $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) ); - $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) ); + $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'colors' ) ); $styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" ); $styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'imgareaselect' ) ); $styles->add( 'customize-widgets', "/wp-admin/css/customize-widgets$suffix.css", array( 'wp-admin', 'colors' ) ); From cda54238818cf4ee0500b497f0d16f5efd15eff5 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 9 Jul 2021 10:47:47 -0400 Subject: [PATCH 25/62] Update the icon color --- src/wp-admin/css/common.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index f8b3b5a719614..024b39ae0301a 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -3434,7 +3434,7 @@ img { .item-edit, .toggle-indicator, .accordion-section-title:after { - color: #787c82; + color: var(--wp-admin--icon--fill); } .widget-action { From dba280adfe69930069e22d92e93128f04bcf82db Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 24 Jul 2021 16:31:46 -0400 Subject: [PATCH 26/62] Update accordion backgrounds & borders --- src/wp-admin/css/common.css | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 5b02667e89b3c..64ce50b323e9f 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -3452,7 +3452,7 @@ img { .item-edit:focus, .sidebar-name:hover .toggle-indicator, .accordion-section-title:hover:after { - color: #1d2327; + color: var(--wp-admin--heading--color); /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } @@ -3493,7 +3493,7 @@ img { /* Accordion */ .accordion-section { - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin--surface--border-alternate-2); margin: 0; } @@ -3503,22 +3503,22 @@ img { } .accordion-section.open:hover { - border-bottom-color: #dcdcde; + border-bottom-color: var(--wp-admin--surface--border-alternate-2); } .accordion-section-content { display: none; padding: 10px 20px 15px; overflow: hidden; - background: #fff; + background: var(--wp-admin--surface--background); } .accordion-section-title { margin: 0; padding: 12px 15px 15px; position: relative; - border-left: 1px solid #dcdcde; - border-right: 1px solid #dcdcde; + border-left: 1px solid var(--wp-admin--surface--border-alternate-2); + border-right: 1px solid var(--wp-admin--surface--border-alternate-2); -webkit-user-select: none; user-select: none; } @@ -3541,7 +3541,8 @@ img { .accordion-section-title:hover:after, .accordion-section-title:focus:after { - border-color: #a7aaad transparent; + /* @todo is this also only used on High Contrast mode? */ + border-color: transparent; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; } @@ -3560,7 +3561,7 @@ img { border-right: none; padding: 10px 10px 11px 14px; line-height: 1.55; - background: #fff; + background: var(--wp-admin--surface--background); } .control-section .accordion-section-title:after, @@ -3572,13 +3573,13 @@ img { .js .control-section .accordion-section-title:hover, .js .control-section.open .accordion-section-title, .js .control-section .accordion-section-title:focus { - color: #1d2327; - background: #f6f7f7; + color: var(--wp-admin--heading--color); + background: var(--wp-admin--surface--background-alternate); } .control-section.open .accordion-section-title { /* When expanded */ - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin--surface--border-alternate-2); } /* Edit Site */ @@ -3886,7 +3887,7 @@ img { } #templateside > ul { - border-left: 1px solid #dcdcde; + border-left: 1px solid var(--wp-admin--surface--border-alternate-2); } #templateside li { From 2f9dc987e364589c32889ed190ae58770a0016b3 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 24 Jul 2021 16:32:10 -0400 Subject: [PATCH 27/62] Update sorthelper (deprecated?) --- src/wp-admin/css/common.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 64ce50b323e9f..711e6ba21d8a0 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -674,8 +674,9 @@ div#widgets-right .widget-top:hover, box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } +/* @todo Move to `deprecated-media.css` */ .sorthelper { - background-color: #c5d9ed; + background-color: transparent; } .ac_match, From 26af397cb00ce26b8284cd980a7527b5d885c884 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 24 Jul 2021 16:37:56 -0400 Subject: [PATCH 28/62] Remove from common, same CSS lives in widgets.css --- src/wp-admin/css/common.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 711e6ba21d8a0..0644f408999c5 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -665,15 +665,6 @@ code { background-color: var(--wp-admin--surface--background); } -.widgets-chooser ul, -#widgets-left .widget-in-question .widget-top, -#available-widgets .widget-top:hover, -div#widgets-right .widget-top:hover, -#widgets-left .widget-top:hover { - border-color: #8c8f94; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} - /* @todo Move to `deprecated-media.css` */ .sorthelper { background-color: transparent; From 951bdcb6b2e271a8626ddaaa2af0f14a7ce76726 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 24 Jul 2021 16:39:33 -0400 Subject: [PATCH 29/62] Update highlight & bar classes --- src/wp-admin/css/common.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 0644f408999c5..3fcf5de97b38b 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -682,15 +682,15 @@ ul.striped > :nth-child(odd), } .bar { - background-color: #f0f0f1; - border-right-color: #4f94d4; + background-color: var(--wp-admin--page--background); + border-right-color: var(--wp-admin--theme--primary); } /* Helper classes for plugins to leverage the active WordPress color scheme */ .highlight { - background-color: #f0f6fc; - color: #3c434a; + background-color: var(--wp-admin--surface--background-alternate); + color: var(--wp-admin--text--color); } /* "Primary" uses the menu background variable for backwards compatibility. */ From 0be30f3dfdda837b6f50f525531a3f929d405985 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 24 Jul 2021 16:47:01 -0400 Subject: [PATCH 30/62] Bring back the 3rd, mid-level border color and create 3 "steps" of border properties --- src/wp-admin/css/common.css | 88 +++++++++++------------ src/wp-includes/css/custom-properties.css | 9 ++- 2 files changed, 50 insertions(+), 47 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 3fcf5de97b38b..a0e3aad6f43d9 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -190,7 +190,7 @@ p.popular-tags, .feature-filter, .imgedit-group, .comment-ays { - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } @@ -480,12 +480,12 @@ code { .widefat thead th, .widefat thead td { - border-bottom: 1px solid var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--border-step-1); } .widefat tfoot th, .widefat tfoot td { - border-top: 1px solid var(--wp-admin--surface--border); + border-top: 1px solid var(--wp-admin--surface--border-step-1); border-bottom: none; } @@ -765,7 +765,7 @@ img.emoji { } .stuffbox .hndle { - border-bottom: 1px solid var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--border-step-1); } /* @deprecated I think this class was never used (it should be an ID). */ @@ -862,7 +862,7 @@ p.install-help { hr { border: 0; - border-top: 1px solid var(--wp-admin--surface--border); + border-top: 1px solid var(--wp-admin--surface--border-step-1); border-bottom: 1px solid var(--wp-admin--surface--background-alternate); } @@ -907,7 +907,7 @@ a#remove-post-thumbnail:hover { #major-publishing-actions { padding: 10px; clear: both; - border-top: 1px solid var(--wp-admin--surface--border); + border-top: 1px solid var(--wp-admin--surface--border-step-2); background: var(--wp-admin--surface--background-alternate); } @@ -997,7 +997,7 @@ th.action-links { padding: 0 10px; width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-1); background: var(--wp-admin--surface--background); color: ; font-size: 13px; @@ -1153,7 +1153,7 @@ th.action-links { display: none; margin: 0 -10px 0 -20px; padding: 20px; - border-top: 1px solid var(--wp-admin--surface--border-alternate); + border-top: 1px solid var(--wp-admin--surface--border-step-3); background: var(--wp-admin--surface--background-alternate); overflow: hidden; } @@ -1190,7 +1190,7 @@ th.action-links { padding: 20px 10px 10px; width: 24%; background: var(--wp-admin--surface--background); - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } @@ -1272,7 +1272,7 @@ th.action-links { .filtered-by .tag { margin: 0 5px; padding: 4px 8px; - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); background: var(--wp-admin--surface--background); font-size: 11px; @@ -1366,7 +1366,7 @@ th.action-links { div.updated, div.error { background: var(--wp-admin--surface--background); - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-1); border-left-width: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); margin: 5px 15px 2px; @@ -1696,7 +1696,7 @@ p.auto-update-status { margin: 0 20px -1px 0px; position: relative; background-color: var(--wp-admin--surface--background); - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-1); border-top: none; box-shadow: 0 0 0 transparent; } @@ -1713,7 +1713,7 @@ p.auto-update-status { } #screen-meta-links .show-settings { - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-1); border-top: none; height: auto; margin-bottom: 0; @@ -1857,7 +1857,7 @@ p.auto-update-status { bottom: 0; left: 150px; right: 170px; - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-1); border-top: none; border-bottom: none; background: var(--wp-admin--help-tab--background); @@ -1912,7 +1912,7 @@ p.auto-update-status { } .contextual-help-tabs .active a { - border-color: var(--wp-admin--surface--border); + border-color: var(--wp-admin--surface--border-step-1); color: var(--wp-admin--text--color); } @@ -2054,7 +2054,7 @@ html.wp-toolbar { display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--border-step-1); } .postbox-header .hndle { @@ -2103,7 +2103,7 @@ html.wp-toolbar { } .sortable-placeholder { - border: 1px dashed var(--wp-admin--surface--border); + border: 1px dashed var(--wp-admin--surface--border-step-1); margin-bottom: 20px; } @@ -2162,7 +2162,7 @@ html.wp-toolbar { } .temp-border { - border: 1px dotted var(--wp-admin--surface--border); + border: 1px dotted var(--wp-admin--surface--border-step-1); } .columns-prefs label { @@ -2263,7 +2263,7 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */ 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 var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--border-step-1); margin: 0; padding-top: 9px; padding-bottom: 0; @@ -2373,7 +2373,7 @@ body.iframe { } .media-icon img { - border: 1px solid var(--wp-admin--surface--border-alternate); + border: 1px solid var(--wp-admin--surface--border-step-2); } #howto { @@ -2426,7 +2426,7 @@ body.iframe { .edit-comment-author { color: var(--wp-admin--heading--color); - border-bottom: 1px solid var(--wp-admin--surface--border-alternate); + border-bottom: 1px solid var(--wp-admin--surface--border-step-3); } #namediv h3 label, /* Back-compat for pre-4.4 */ @@ -2631,7 +2631,7 @@ div.action-links { min-height: 36px; font-size: 0; z-index: 1; - border-bottom: 1px solid var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--border-step-2); background: var(--wp-admin--page--background); } @@ -2650,7 +2650,7 @@ div.action-links { #plugin-information-tabs a.current { margin: 0 -1px -1px; background: var(--wp-admin--surface--background); - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-2); border-bottom-color: var(--wp-admin--surface--background); padding-top: 8px; color: var(--wp-admin--text--color); @@ -2711,7 +2711,7 @@ 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 var(--wp-admin--surface--border); + border-left: 1px solid var(--wp-admin--surface--border-step-2); background: var(--wp-admin--page--background); color: var(--wp-admin--text-secondary--color); } @@ -2803,7 +2803,7 @@ div.action-links { bottom: 0; left: 0; height: 40px; /* actual height: 40+13+13+1=67 */ - border-top: 1px solid var(--wp-admin--surface--border); + border-top: 1px solid var(--wp-admin--surface--border-step-2); background: var(--wp-admin--page--background); } @@ -2848,11 +2848,11 @@ div.action-links { #plugin-information pre { padding: 7px; overflow: auto; - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-1); } #plugin-information blockquote { - border-left: 2px solid var(--wp-admin--surface--border); + border-left: 2px solid var(--wp-admin--surface--border-step-2); color: var(--wp-admin--text-secondary--color); font-style: italic; margin: 1em 0; @@ -2864,7 +2864,7 @@ div.action-links { overflow: hidden; /* clearfix */ width: 100%; margin-bottom: 20px; - border-bottom: 1px solid var(--wp-admin--surface--border-alternate); + border-bottom: 1px solid var(--wp-admin--surface--border-step-2); } #plugin-information .review-title-section { @@ -2945,7 +2945,7 @@ div.action-links { #plugin-information .fyi { float: none; - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-2); position: static; width: auto; margin: 26px 26px 0; @@ -3149,7 +3149,7 @@ img { width: 100%; min-height: 60vh; height: calc( 100vh - 295px ); - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-2); box-sizing: border-box; } @@ -3172,7 +3172,7 @@ img { min-height: 60vh; height: calc(100vh - 295px); background-color: var(--wp-admin--surface--background-alternate); - border: 1px solid var(--wp-admin--surface--border); + border: 1px solid var(--wp-admin--surface--border-step-2); border-left: none; } #templateside ul ul { @@ -3239,7 +3239,7 @@ img { display: block; position: absolute; left: 2px; - border-left: 1px solid var(--wp-admin--surface--border); + border-left: 1px solid var(--wp-admin--surface--border-step-1); top: -13px; bottom: 10px; } @@ -3247,18 +3247,18 @@ img { content: ""; position: absolute; display: block; - border-left: 1px solid var(--wp-admin--surface--border); + border-left: 1px solid var(--wp-admin--surface--border-step-1); left: 2px; top: -5px; height: 18px; width: 7px; - border-bottom: 1px solid var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--border-step-1); } .tree-folder > li::after { content: ""; position: absolute; display: block; - border-left: 1px solid var(--wp-admin--surface--border); + border-left: 1px solid var(--wp-admin--surface--border-step-1); left: 2px; bottom: -7px; top: 0; @@ -3485,7 +3485,7 @@ img { /* Accordion */ .accordion-section { - border-bottom: 1px solid var(--wp-admin--surface--border-alternate-2); + border-bottom: 1px solid var(--wp-admin--surface--border-step-2); margin: 0; } @@ -3495,7 +3495,7 @@ img { } .accordion-section.open:hover { - border-bottom-color: var(--wp-admin--surface--border-alternate-2); + border-bottom-color: var(--wp-admin--surface--border-step-2); } .accordion-section-content { @@ -3509,8 +3509,8 @@ img { margin: 0; padding: 12px 15px 15px; position: relative; - border-left: 1px solid var(--wp-admin--surface--border-alternate-2); - border-right: 1px solid var(--wp-admin--surface--border-alternate-2); + border-left: 1px solid var(--wp-admin--surface--border-step-2); + border-right: 1px solid var(--wp-admin--surface--border-step-2); -webkit-user-select: none; user-select: none; } @@ -3571,7 +3571,7 @@ img { .control-section.open .accordion-section-title { /* When expanded */ - border-bottom: 1px solid var(--wp-admin--surface--border-alternate-2); + border-bottom: 1px solid var(--wp-admin--surface--border-step-2); } /* Edit Site */ @@ -3612,7 +3612,7 @@ img { position: absolute; top: 0; right: 0; - background: var(--wp-admin--surface--border); + background: var(--wp-admin--surface--border-step-1); } } @@ -3879,7 +3879,7 @@ img { } #templateside > ul { - border-left: 1px solid var(--wp-admin--surface--border-alternate-2); + border-left: 1px solid var(--wp-admin--surface--border-step-2); } #templateside li { @@ -4089,13 +4089,13 @@ img { h3 .nav-tab, nav .nav-tab { margin: 10px 10px 0 0; - border-bottom: 1px solid var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--border-step-1); } .nav-tab-active:hover, .nav-tab-active:focus, .nav-tab-active:focus:active { - border-bottom: 1px solid var(--wp-admin--surface--border); + border-bottom: 1px solid var(--wp-admin--surface--border-step-1); } .wp-filter .search-form input[type="search"] { diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 8cdcfe08c1345..8779ee82848fc 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -13,7 +13,10 @@ body { --wp-admin--surface--background: #fff; --wp-admin--surface--background-alternate: #f6f7f7; --wp-admin--surface--border: #c3c4c7; - --wp-admin--surface--border-alternate: #f0f0f1; + --wp-admin--surface--border-step-1: var(--wp-admin--surface--border); /* alias */ + --wp-admin--surface--border-step-2: #dcdcde; + --wp-admin--surface--border-step-3: #f0f0f1; + --wp-admin--heading--color: #1d2327; --wp-admin--heading-secondary--color: #50575e; @@ -41,7 +44,7 @@ body { --wp-admin--input--color: #2c3338; --wp-admin--input--color--placeholder: #646970; - --wp-admin--input--border: var(--wp-admin--surface--border); + --wp-admin--input--border: var(--wp-admin--surface--border-step-1); --wp-admin--input--border--focus: var(--wp-admin--button-primary); --wp-admin--input--background: var(--wp-admin--surface--background); --wp-admin--input--background--readonly: #f0f0f1; @@ -50,7 +53,7 @@ body { --wp-admin--help-tab--background: #f0f6fc; --wp-admin--help-tab--border--active: #72aee6; - --wp-admin--nav-tab--border: var(--wp-admin--surface--border); + --wp-admin--nav-tab--border: var(--wp-admin--surface--border-step-1); --wp-admin--nav-tab--color: #50575e; --wp-admin--nav-tab--color--hover: #3c434a; --wp-admin--nav-tab--color--active: var(--wp-admin--heading--color); From 458a84aa6ccaca138825b4d8f0f12aedcf12677b Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 24 Jul 2021 16:56:47 -0400 Subject: [PATCH 31/62] Update all `rgba` colors --- src/wp-admin/css/common.css | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a0e3aad6f43d9..4b923ca42d231 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -156,7 +156,7 @@ color: var(--wp-admin--screen-reader-text--color); z-index: 100000; line-height: normal; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 2px 2px rgb(var(--wp-admin--shadow) / 0.6); text-decoration: none; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; @@ -191,7 +191,7 @@ p.popular-tags, .imgedit-group, .comment-ays { border: 1px solid var(--wp-admin--surface--border-step-1); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04); } table.widefat, @@ -996,7 +996,7 @@ th.action-links { margin: 12px 0 25px; padding: 0 10px; width: 100%; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04); border: 1px solid var(--wp-admin--surface--border-step-1); background: var(--wp-admin--surface--background); color: ; @@ -1191,7 +1191,7 @@ th.action-links { width: 24%; background: var(--wp-admin--surface--background); border: 1px solid var(--wp-admin--surface--border-step-2); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04); } .filter-group legend { @@ -1273,7 +1273,7 @@ th.action-links { margin: 0 5px; padding: 4px 8px; border: 1px solid var(--wp-admin--surface--border-step-2); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04); background: var(--wp-admin--surface--background); font-size: 11px; } @@ -1368,7 +1368,7 @@ div.error { background: var(--wp-admin--surface--background); border: 1px solid var(--wp-admin--surface--border-step-1); border-left-width: 4px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04); margin: 5px 15px 2px; padding: 1px 12px; } @@ -1434,8 +1434,8 @@ div.error p, .notice-dismiss:focus { outline: none; box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + 0 0 0 1px var(--wp-admin--button-primary--hover), + 0 0 2px 1px var(--wp-admin--button-primary); } .notice-success, @@ -1907,8 +1907,8 @@ p.auto-update-status { border-left: 2px solid var(--wp-admin--help-tab--border--active); background: var(--wp-admin--help-tab--background); box-shadow: - 0 2px 0 rgb(var( --wp-admin--shadow ) / 0.02), - 0 1px 0 rgb(var( --wp-admin--shadow ) / 0.02); + 0 2px 0 rgb(var(--wp-admin--shadow) / 0.02), + 0 1px 0 rgb(var(--wp-admin--shadow) / 0.02); } .contextual-help-tabs .active a { @@ -3451,8 +3451,8 @@ img { .widget-top .widget-action:focus .toggle-indicator:before { box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + 0 0 0 1px var(--wp-admin--button-primary--hover), + 0 0 2px 1px var(--wp-admin--button-primary); } .control-section .accordion-section-title:after, @@ -3760,7 +3760,7 @@ img { } body * { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; + -webkit-tap-highlight-color: rgb(var(--wp-admin--shadow) / 0) !important; } #wpcontent { From eae01c651bf2f540f8441b2fd39d99c872af01ad Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Sat, 24 Jul 2021 17:00:41 -0400 Subject: [PATCH 32/62] Bring back missing value --- src/wp-admin/css/common.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 4b923ca42d231..273aa5f149055 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -3431,7 +3431,7 @@ img { } .widget-action { - color: ; /* #fafafa background in the Widgets screen */ + color: var(--wp-admin--icon--fill); /* #fafafa background in the Widgets screen */ } .widget-top:hover .widget-action, From 20a8b83826f9c113b1e38e913e022d6933c9f101 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 29 Jul 2021 17:02:08 -0400 Subject: [PATCH 33/62] Update remainder of admin-bar.css --- src/wp-includes/css/admin-bar.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index a3144920843fe..c69450d5ec404 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -451,7 +451,7 @@ html:lang(he-il) .rtl #wpadminbar * { } #wpadminbar #wp-admin-bar-user-info .username { - color: #a7aaad; + color: var(--wp-admin--admin-menu--submenu-link--color, #c3c4c7); font-size: 11px; } @@ -460,8 +460,8 @@ html:lang(he-il) .rtl #wpadminbar * { width: auto; height: 16px; padding: 0; - border: 1px solid #8c8f94; - background: #f0f0f1; + border: 1px solid var(--wp-admin--surface--border-step-1, #c3c4c7); + background: var(--wp-admin--page--background, #f0f0f1); line-height: 1.84615384; vertical-align: middle; margin: -4px 0 0 6px; @@ -636,8 +636,8 @@ html:lang(he-il) .rtl #wpadminbar * { max-width: none; padding: 0 3px 0 24px; margin: 0; - color: #000; - background-color: rgba(255, 255, 255, 0); + color: var(--wp-admin--heading--color, #1d2327); + background-color: rgb(var(--wp-admin--highlight, 255 255 255) / 0); border: none; outline: none; cursor: pointer; @@ -651,7 +651,7 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { z-index: 10; width: 200px; - background-color: rgba(255, 255, 255, 0.9); + background-color: rgb(var(--wp-admin--highlight, 255 255 255) / 0.9); cursor: text; border: 0; } @@ -709,7 +709,7 @@ html:lang(he-il) .rtl #wpadminbar * { z-index: 100000; line-height: normal; text-decoration: none; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 2px 2px rgb(var(--wp-admin--shadow, 0 0 0) / 0.6); } @media screen and (max-width: 782px) { From b934b478aa9ea9a88a56a8ebd608de334ef184d8 Mon Sep 17 00:00:00 2001 From: David Ryan <0aveRyan@users.noreply.github.com> Date: Fri, 30 Jul 2021 09:19:18 -0700 Subject: [PATCH 34/62] Update src/wp-admin/css/login.css Missing dash in --wp-admin--page--background Co-authored-by: Kelly Dwan --- src/wp-admin/css/login.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css index c7e89749d37de..96dfe4e66dcde 100644 --- a/src/wp-admin/css/login.css +++ b/src/wp-admin/css/login.css @@ -6,7 +6,7 @@ body { } body { - background: var(-wp-admin--page--background, #f0f0f1); + background: var(--wp-admin--page--background, #f0f0f1); min-width: 0; color: var(--wp-admin--text--color, #3c434a); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; From 7e5c4903e6ac8972fabc45248241a8ec72227f88 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Fri, 30 Jul 2021 13:24:31 -0700 Subject: [PATCH 35/62] site-icon css color update to custom-property --- src/wp-admin/css/site-icon.css | 2 +- src/wp-includes/css/custom-properties.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css index eae9a576357a8..f886aaeca8dc8 100644 --- a/src/wp-admin/css/site-icon.css +++ b/src/wp-admin/css/site-icon.css @@ -29,7 +29,7 @@ } .site-icon-preview .app-icon-preview { - background-color: #000; + background-color: var(--wp-admin--site-icon--background-color); border-radius: 16px; height: 64px; overflow: hidden; diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 8779ee82848fc..66e600c54fd0b 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -95,6 +95,8 @@ body { --wp-admin--plugin-modal-banner-title--color: #fff; --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); + + --wp-admin--site-icon--background-color: #000; } body.admin-color-ectoplasm { From 1ff4c21414c14a1ce2d893054755c0289736266c Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Fri, 6 Aug 2021 15:07:43 -0700 Subject: [PATCH 36/62] migrate revisions colors to custom properties --- src/wp-admin/css/revisions.css | 64 +++++++++++------------ src/wp-includes/css/custom-properties.css | 34 ++++++++++++ 2 files changed, 64 insertions(+), 34 deletions(-) diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css index c06f87d8d26b1..a09918ec0bc8a 100644 --- a/src/wp-admin/css/revisions.css +++ b/src/wp-admin/css/revisions.css @@ -25,8 +25,8 @@ position: fixed; top: 0; height: 82px; - background: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + background-color: var(--wp-admin--revisions--controls--background--pinned); + box-shadow: 0 1px 3px var(--wp-admin--revisions--controls--box-shadow--pinned); } .revisions-tickmarks { @@ -36,13 +36,13 @@ top: 7px; max-width: 70%; box-sizing: border-box; - background-color: #fff; + background-color: var(--wp-admin--revisions--tickmarks--background); } .revisions-tickmarks > div { position: absolute; height: 100%; - border-left: 1px solid #a7aaad; + border-left: 1px solid var(--wp-admin--revisions--tickmark--border); box-sizing: border-box; } @@ -109,8 +109,8 @@ body.folded .revisions .loading-indicator { .revisions-meta { margin-top: 20px; - background-color: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + background-color: var(--wp-admin--revisions--meta--background); + box-shadow: 0 1px 3px var(--wp-admin--revisions--meta--box-shadow); overflow: hidden; } @@ -131,11 +131,11 @@ body.folded .revisions .loading-indicator { } .revisions-controls .author-card .date { - color: #646970; + color: var(--wp-admin--revisions--author-card--date); } .revisions-controls .author-card.autosave { - color: #d63638; + color: var(--wp-admin--revisions--author-card--autosave); } .revisions-controls .author-card .author-name { @@ -172,8 +172,8 @@ body.folded .revisions .loading-indicator { .revisions-diff { padding: 15px; - background-color: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + background-color: var(--wp-admin--revisions--diff--background); + box-shadow: 0 1px 3px var(--wp-admin--revisions--diff--box-shadow); } .revisions-diff h3:first-child { @@ -212,10 +212,6 @@ table.diff col.ltype { width: 30px; } -table.diff tr { - background-color: transparent; -} - table.diff td, table.diff th { font-family: Consolas, Monaco, monospace; @@ -242,16 +238,16 @@ table.diff .diff-addedline ins { table.diff .diff-deletedline { position: relative; - background-color: #fcf0f1; + background-color: var(--wp-admin--revisions--diff--deletedline--background); } table.diff .diff-deletedline del { - background-color: #ffabaf; + background-color: var(--wp-admin--revisions--diff--deletedline--del--background); } table.diff .diff-addedline { position: relative; - background-color: #edfaef; + background-color: var(--wp-admin--revisions--diff--addedline--background); } table.diff .diff-deletedline .dashicons, @@ -271,7 +267,7 @@ table.diff .diff-addedline .dashicons { } table.diff .diff-addedline ins { - background-color: #68de7c; + background-color: var(--wp-admin--revisions--diff--addedline--ins--background); } .diff-meta { @@ -384,8 +380,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--revisions--tooltip--border); + background-color: var(--wp-admin--revisions--tooltip--background); } .revisions-tooltip { @@ -405,8 +401,8 @@ table.diff .diff-addedline ins { .arrow:after { z-index: 9999; - background-color: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + background-color: var(--wp-admin--revisions--tooltip--background); + box-shadow: 0 1px 3px var(--wp-admin--revisions--tooltip--box-shadow); } .arrow.top { @@ -445,7 +441,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--slider--border); text-align: left; cursor: pointer; } @@ -464,22 +460,22 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.focus { - background: #f6f7f7; - border: 1px solid #c3c4c7; - box-shadow: 0 1px 0 #c3c4c7; + background: var(--wp-admin--slider--handle--background); + border: 1px solid var(--wp-admin--slider--handle--border); + box-shadow: 0 1px 0 var(--wp-admin--slider--handle--box-shadow); } .wp-slider .ui-slider-handle:hover, .wp-slider .ui-slider-handle.ui-state-hover { - background: #f6f7f7; - border-color: #8c8f94; + background: var(--wp-admin--slider--handle--background--hover); + border-color: var(--wp-admin--slider--handle--border--hover); } .wp-slider .ui-slider-handle:active, .wp-slider .ui-slider-handle.ui-state-active { - background: #f0f0f1; - border-color: #8c8f94; - box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); + background: var(--wp-admin--slider--handle--background--active); + border-color: var(--wp-admin--slider--handle--border--active); + box-shadow: inset 0 2px 5px -3px var(--wp-admin--slider--handle--box-shadow--active); transform: translateY(1px); } @@ -488,7 +484,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { position: absolute; top: 2px; left: 2px; - color: #50575e; + color: var(--wp-admin--slider--handle--color); content: "\f229"; font: normal 18px/1 dashicons; speak: never; @@ -498,7 +494,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { .wp-slider .ui-slider-handle:hover:before, .wp-slider .ui-slider-handle.ui-state-hover:before { - color: #1d2327; + color: var(--wp-admin--slider--handle--color--hover); } .wp-slider .ui-slider-handle.from-handle:before, @@ -529,7 +525,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { font-size: 0.7em; display: block; border: 0; - background-color: transparent; + background-color: var(--wp-admin--slider--range--background); background-image: none; } diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 8779ee82848fc..64cfd2461a4f4 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -11,6 +11,7 @@ body { --wp-admin--page--background: #f0f0f1; --wp-admin--surface--background: #fff; + --wp-admin--surface--box-shadow: rgba(0, 0, 0, 0.1); --wp-admin--surface--background-alternate: #f6f7f7; --wp-admin--surface--border: #c3c4c7; --wp-admin--surface--border-step-1: var(--wp-admin--surface--border); /* alias */ @@ -95,6 +96,39 @@ body { --wp-admin--plugin-modal-banner-title--color: #fff; --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); + + --wp-admin--revisions--controls--background--pinned: var(--wp-admin--surface--background); + --wp-admin--revisions--controls--box-shadow--pinned: var(--wp-admin--surface--box-shadow); + --wp-admin--revisions--tickmarks--background: #fff; + --wp-admin--revisions--tickmark--border: #a7aaad; + --wp-admin--revisions--meta--background: var(--wp-admin--surface--background); + --wp-admin--revisions--meta--box-shadow: var(--wp-admin--surface--box-shadow); + + --wp-admin--diff--author-card--date: #646970; + --wp-admin--diff--author-card--autosave: #d63638; + --wp-admin--diff--background: var(--wp-admin--surface--background); + --wp-admin--diff--box-shadow: var(--wp-admin--surface--box-shadow); + --wp-admin--diff--deletedline--background: #fcf0f1; + --wp-admin--diff--deletedline--del--background: #ffabaf; + --wp-admin--diff--addedline--background: #edfaef; + --wp-admin--diff--addedline--ins--background: #68de7c; + + --wp-admin--tooltip--background: var(--wp-admin--surface--background); + --wp-admin--tooltip--border: var(--wp-admin--surface--border-step-2); + --wp-admin--tooltip--box-shadow: var(--wp-admin--surface--box-shadow); + + --wp-admin--slider--border: var(--wp-admin--surface--border-step-2); + --wp-admin--slider--handle--background: var(--wp-admin--surface--background-alternate); + --wp-admin--slider--handle--border: var(--wp-admin--surface--border); + --wp-admin--slider--handle--box-shadow: var(--wp-admin--surface--border); + --wp-admin--slider--handle--background--hover: var(--wp-admin--surface--background-alternate); + --wp-admin--slider--handle--border--hover: #8c8f94; + --wp-admin--slider--handle--background--active: #f0f0f1; + --wp-admin--slider--handle--border--active: #8c8f94; + --wp-admin--slider--handle--box-shadow--active: rgba(0, 0, 0, 0.5); + --wp-admin--slider--handle--color: #50575e; + --wp-admin--slider--handle--color--hover: #1d2327; + --wp-admin--slider--range--background: transparent; } body.admin-color-ectoplasm { From 046a8f7afbf8f305c70bb430db36c462f9805c3b Mon Sep 17 00:00:00 2001 From: Dave Ryan Date: Thu, 12 Aug 2021 14:26:44 -0700 Subject: [PATCH 37/62] swap anchor for link in property name --- src/wp-includes/css/custom-properties.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 82c21269d94dc..c5364071da88f 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -93,10 +93,10 @@ body { --wp-admin--plugin-modal-banner-title--color: #fff; --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); - --wp-admin--login-anchor--color--hover: #135e96; - --wp-admin--login-anchor--color--focus: #043959; - --wp-admin--login-anchor--box-shadow-from--focus: #4f94d4; - --wp-admin--login-anchor--box-shadow-to--focus: rgba(79, 148, 212, 0.8); + --wp-admin--login-link--color--hover: #135e96; + --wp-admin--login-link--color--focus: #043959; + --wp-admin--login-link--box-shadow-from--focus: #4f94d4; + --wp-admin--login-link--box-shadow-to--focus: rgba(79, 148, 212, 0.8); --wp-admin--login--box-shadow: rgba(0, 0, 0, 0.1); --wp-admin--login-button--border-color: #3582c4; --wp-admin--login-button--box-shadow: var(--wp-admin--login-button--border-color); From ccbc3f88ae0fb1c2c4a19e8593a2ab40486d25b1 Mon Sep 17 00:00:00 2001 From: Dave Ryan Date: Thu, 12 Aug 2021 14:39:36 -0700 Subject: [PATCH 38/62] double-dash parent loc and property loc --- src/wp-includes/css/custom-properties.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index c5364071da88f..b45e08fc31bd1 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -93,14 +93,14 @@ body { --wp-admin--plugin-modal-banner-title--color: #fff; --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); - --wp-admin--login-link--color--hover: #135e96; - --wp-admin--login-link--color--focus: #043959; - --wp-admin--login-link--box-shadow-from--focus: #4f94d4; - --wp-admin--login-link--box-shadow-to--focus: rgba(79, 148, 212, 0.8); + --wp-admin--login--link--color--hover: #135e96; + --wp-admin--login--link--color--focus: #043959; + --wp-admin--login--link--box-shadow-from--focus: #4f94d4; + --wp-admin--login--link--box-shadow-to--focus: rgba(79, 148, 212, 0.8); --wp-admin--login--box-shadow: rgba(0, 0, 0, 0.1); - --wp-admin--login-button--border-color: #3582c4; - --wp-admin--login-button--box-shadow: var(--wp-admin--login-button--border-color); - --wp-admin--login-form--box-shadow: rgba(0, 0, 0, 0.04); + --wp-admin--login--button--border-color: #3582c4; + --wp-admin--login--button--box-shadow: var(--wp-admin--login-button--border-color); + --wp-admin--login--form--box-shadow: rgba(0, 0, 0, 0.04); } From 5c5aa8c170b2890a04de29bf0d70612d24f0bc55 Mon Sep 17 00:00:00 2001 From: Dave Ryan Date: Fri, 23 Jul 2021 15:49:04 -0700 Subject: [PATCH 39/62] Try a common set of theme-agnostic properties use --theme-- over --common--, restore rating val --- src/wp-includes/css/custom-properties.css | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 66e600c54fd0b..0480c4491a748 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -4,6 +4,10 @@ body { --wp-admin--theme--primary--step-10: #1a5686; --wp-admin--theme--notification: #d63638; --wp-admin--theme--notification--contrast: #fff; + --wp-admin--theme--success: #00a32a; + --wp-admin--theme--info: #72aee6; + --wp-admin--theme--warning: #dba617; + --wp-admin--theme--error: var(--wp-admin--theme--notification); --wp-admin--shadow: 0 0 0; --wp-admin--highlight: 255 255 255; @@ -51,7 +55,7 @@ body { --wp-admin--checkbox--fill: var(--wp-admin--button-primary); --wp-admin--help-tab--background: #f0f6fc; - --wp-admin--help-tab--border--active: #72aee6; + --wp-admin--help-tab--border--active: var(--wp-admin--theme--info); --wp-admin--nav-tab--border: var(--wp-admin--surface--border-step-1); --wp-admin--nav-tab--color: #50575e; @@ -75,18 +79,18 @@ body { --wp-admin--filter-button--background--active-hover: var(--wp-admin--button-primary); --wp-admin--notice-success--background: #edfaef; - --wp-admin--notice-success--border: #00a32a; + --wp-admin--notice-success--border: var(--wp-admin--theme--success); --wp-admin--notice-info--background: #f0f6fc; - --wp-admin--notice-info--border: #72aee6; + --wp-admin--notice-info--border: var(--wp-admin--theme--info); --wp-admin--notice-warning--background: #fcf9e8; - --wp-admin--notice-warning--border: #dba617; + --wp-admin--notice-warning--border: var(--wp-admin--theme--warning); --wp-admin--notice-error--background: #fcf0f1; - --wp-admin--notice-error--border: #d63638; - --wp-admin--notice-error--color: #d63638; + --wp-admin--notice-error--border: var(--wp-admin--theme--error); + --wp-admin--notice-error--color: var(--wp-admin--theme--error); --wp-admin--icon--fill: #787c82; --wp-admin--icon--fill--disabled: #a7aaad; - --wp-admin--icon-destructive--fill: #d63638; + --wp-admin--icon-destructive--fill: var(--wp-admin--theme--error); --wp-admin--icon-error--fill: var(--wp-admin--icon-destructive--fill); --wp-admin--icon-success--fill: #68de7c; From 4aeb39f20d28b0c3e8509ff8a19742bebd7e13fb Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Mon, 16 Aug 2021 15:45:38 -0600 Subject: [PATCH 40/62] Fix formatting issues --- src/wp-admin/css/install.css | 48 +++++++++++++----------------------- 1 file changed, 17 insertions(+), 31 deletions(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 51395384c5443..d34ca4ea368e9 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -7,15 +7,13 @@ body { background: var(--wp-admin--surface--background, #fff); border: 1px solid var(--wp-admin--surface--border, #c3c4c7); color: var(--wp-admin--text--color, #3c434a); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; height: auto; margin: 140px auto 25px; padding: 20px 20px 10px 20px; max-width: 700px; -webkit-font-smoothing: subpixel-antialiased; - box-shadow: 0 1px 1px - var(--wp-admin--install--body--box-shadow, rgba(0, 0, 0, 0.04)); + box-shadow: 0 1px 1px var(--wp-admin--install--body--box-shadow, rgba(0, 0, 0, 0.04)); } a { @@ -29,19 +27,12 @@ a:active { a:focus { color: var(--wp-admin--install--link--color--focus, #043959); - box-shadow: 0 0 0 1px - var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), - 0 0 2px 1px - var( - --wp-admin--install--link--color--focus--box-shadow-alt, - rgba(79, 148, 212, 0.8) - ); + box-shadow: 0 0 0 1px var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), 0 0 2px 1px var(--wp-admin--install--link--color--focus--box-shadow-alt, rgba(79, 148, 212, 0.8)); } h1, h2 { - border-bottom: 1px solid - var(--wp-admin--install--heading--border-color, #dcdcde); + border-bottom: 1px solid var(--wp-admin--install--heading--border-color, #dcdcde); clear: both; color: var(--wp-admin--install--heading--color, #646970); font-size: 24px; @@ -62,14 +53,11 @@ dt { line-height: 1.5; } -code, -.code { +code, .code { font-family: Consolas, Monaco, monospace; } -ul, -ol, -dl { +ul, ol, dl { padding: 5px 5px 5px 22px; } @@ -115,8 +103,7 @@ label { .step { margin: 20px 0 15px; } -.step, -th { +.step, th { text-align: left; padding: 0; } @@ -125,8 +112,7 @@ th { } textarea { border: 1px solid var(--wp-admin--install--textarea--border, #dcdcde); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; width: 100%; box-sizing: border-box; } @@ -170,14 +156,13 @@ textarea { input, submit { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } -.form-table input[type="text"], -.form-table input[type="email"], -.form-table input[type="url"], -.form-table input[type="password"], +.form-table input[type=text], +.form-table input[type=email], +.form-table input[type=url], +.form-table input[type=password], #pass-strength-result { width: 218px; } @@ -212,8 +197,7 @@ submit { margin: 25px 0 20px; } -#error-page code, -.code { +#error-page code, .code { font-family: Consolas, Monaco, monospace; } @@ -385,7 +369,9 @@ body.language-chooser { /** * HiDPI Displays */ -@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { +@media print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { .spinner { background-image: url(../images/spinner-2x.gif); } From 0574783801fbb62c3954a4137394d0b90a852ddf Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Mon, 16 Aug 2021 15:48:48 -0600 Subject: [PATCH 41/62] Fix formatting issues --- src/wp-admin/css/install.css | 12 ++++-------- src/wp-includes/css/custom-properties.css | 19 ++++--------------- 2 files changed, 8 insertions(+), 23 deletions(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index d34ca4ea368e9..de66e1073e6df 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -30,8 +30,7 @@ a:focus { box-shadow: 0 0 0 1px var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), 0 0 2px 1px var(--wp-admin--install--link--color--focus--box-shadow-alt, rgba(79, 148, 212, 0.8)); } -h1, -h2 { +h1, h2 { border-bottom: 1px solid var(--wp-admin--install--heading--border-color, #dcdcde); clear: both; color: var(--wp-admin--install--heading--color, #646970); @@ -44,10 +43,7 @@ h3 { font-size: 16px; } -p, -li, -dd, -dt { +p, li, dd, dt { padding-bottom: 2px; font-size: 14px; line-height: 1.5; @@ -369,8 +365,8 @@ body.language-chooser { /** * HiDPI Displays */ -@media print, - (-webkit-min-device-pixel-ratio: 1.25), +@media print, + (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { .spinner { background-image: url(../images/spinner-2x.gif); diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 2722ef24b1784..c10fb57ddaed1 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -67,15 +67,9 @@ body { --wp-admin--filter-button--color: var(--wp-admin--text-secondary--color); --wp-admin--filter-button--color--hover: var(--wp-admin--link--color--hover); - --wp-admin--filter-button--color--active: var( - --wp-admin--surface--background - ); - --wp-admin--filter-button--background--active: var( - --wp-admin--text-secondary--color - ); - --wp-admin--filter-button--background--active-hover: var( - --wp-admin--button-primary - ); + --wp-admin--filter-button--color--active: var(--wp-admin--surface--background); + --wp-admin--filter-button--background--active: var(--wp-admin--text-secondary--color); + --wp-admin--filter-button--background--active-hover: var(--wp-admin--button-primary); --wp-admin--notice-success--background: #edfaef; --wp-admin--notice-success--border: #00a32a; @@ -103,12 +97,7 @@ body { --wp-admin--install--link--color--hover: #135e96; --wp-admin--install--link--color--focus: #043959; --wp-admin--install--link--color--focus--box-shadow: #4f94d4; - --wp-admin--install--link--color--focus--box-shadow-alt: rgba( - 79, - 148, - 212, - 0.8 - ); + --wp-admin--install--link--color--focus--box-shadow-alt: rgba(79, 148, 212, 0.8); --wp-admin--install--heading--border-color: #dcdcde; --wp-admin--install--heading--color: #646970; --wp-admin--install--textarea--border: #dcdcde; From 43e623666d988bfc7c8b6dc7df4e2cd9c653e170 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Mon, 16 Aug 2021 15:51:49 -0600 Subject: [PATCH 42/62] Fix formatting issues --- src/wp-admin/css/install.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index de66e1073e6df..0398b2105586b 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -27,7 +27,9 @@ a:active { a:focus { color: var(--wp-admin--install--link--color--focus, #043959); - box-shadow: 0 0 0 1px var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), 0 0 2px 1px var(--wp-admin--install--link--color--focus--box-shadow-alt, rgba(79, 148, 212, 0.8)); + box-shadow: + 0 0 0 1px var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), + 0 0 2px 1px var(--wp-admin--install--link--color--focus--box-shadow-alt, rgba(79, 148, 212, 0.8)); } h1, h2 { @@ -368,7 +370,9 @@ body.language-chooser { @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + .spinner { background-image: url(../images/spinner-2x.gif); } + } From 4513a61413f5754d3c8da40faba546de7951e7a5 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Mon, 16 Aug 2021 15:54:03 -0600 Subject: [PATCH 43/62] Fix formatting issues --- src/wp-admin/css/install.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 0398b2105586b..73ca61afdcafd 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -27,8 +27,8 @@ a:active { a:focus { color: var(--wp-admin--install--link--color--focus, #043959); - box-shadow: - 0 0 0 1px var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), + box-shadow: + 0 0 0 1px var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), 0 0 2px 1px var(--wp-admin--install--link--color--focus--box-shadow-alt, rgba(79, 148, 212, 0.8)); } From ede5f7c34f6347013cf38a775687109a23f79977 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Tue, 17 Aug 2021 12:51:32 -0600 Subject: [PATCH 44/62] use existing surface properties in place rather than adding extra vars per use. --- src/wp-admin/css/revisions.css | 50 ++++++++++++----------- src/wp-includes/css/custom-properties.css | 28 ++----------- 2 files changed, 31 insertions(+), 47 deletions(-) diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css index a09918ec0bc8a..cd802f82c51d8 100644 --- a/src/wp-admin/css/revisions.css +++ b/src/wp-admin/css/revisions.css @@ -25,8 +25,8 @@ position: fixed; top: 0; height: 82px; - background-color: var(--wp-admin--revisions--controls--background--pinned); - box-shadow: 0 1px 3px var(--wp-admin--revisions--controls--box-shadow--pinned); + background-color: var(--wp-admin--surface--background); + box-shadow: 0 1px 3px rgb(var(--wp-admin--shadow) / 0.1); } .revisions-tickmarks { @@ -36,13 +36,13 @@ top: 7px; max-width: 70%; box-sizing: border-box; - background-color: var(--wp-admin--revisions--tickmarks--background); + background-color: var(--wp-admin--surface--background); } .revisions-tickmarks > div { position: absolute; height: 100%; - border-left: 1px solid var(--wp-admin--revisions--tickmark--border); + border-left: 1px solid var(--wp-admin--icon--fill--disabled); box-sizing: border-box; } @@ -109,8 +109,8 @@ body.folded .revisions .loading-indicator { .revisions-meta { margin-top: 20px; - background-color: var(--wp-admin--revisions--meta--background); - box-shadow: 0 1px 3px var(--wp-admin--revisions--meta--box-shadow); + background-color: var(--wp-admin--surface--background); + box-shadow: 0 1px 3px var(--wp-admin--surface--box-shadow); overflow: hidden; } @@ -131,11 +131,11 @@ body.folded .revisions .loading-indicator { } .revisions-controls .author-card .date { - color: var(--wp-admin--revisions--author-card--date); + color: var(--wp-admin--text-secondary--color); } .revisions-controls .author-card.autosave { - color: var(--wp-admin--revisions--author-card--autosave); + color: var(--wp-admin--notice-error--color); } .revisions-controls .author-card .author-name { @@ -172,8 +172,8 @@ body.folded .revisions .loading-indicator { .revisions-diff { padding: 15px; - background-color: var(--wp-admin--revisions--diff--background); - box-shadow: 0 1px 3px var(--wp-admin--revisions--diff--box-shadow); + background-color: var(--wp-admin--surface--background); + box-shadow: 0 1px 3px var(--wp-admin--surface--box-shadow); } .revisions-diff h3:first-child { @@ -212,6 +212,10 @@ table.diff col.ltype { width: 30px; } +table.diff tr { + background-color: transparent; +} + table.diff td, table.diff th { font-family: Consolas, Monaco, monospace; @@ -238,16 +242,16 @@ table.diff .diff-addedline ins { table.diff .diff-deletedline { position: relative; - background-color: var(--wp-admin--revisions--diff--deletedline--background); + background-color: var(--wp-admin--diff--deletedline--background); } table.diff .diff-deletedline del { - background-color: var(--wp-admin--revisions--diff--deletedline--del--background); + background-color: var(--wp-admin--diff--deletedline--del--background); } table.diff .diff-addedline { position: relative; - background-color: var(--wp-admin--revisions--diff--addedline--background); + background-color: var(--wp-admin--diff--addedline--background); } table.diff .diff-deletedline .dashicons, @@ -267,7 +271,7 @@ table.diff .diff-addedline .dashicons { } table.diff .diff-addedline ins { - background-color: var(--wp-admin--revisions--diff--addedline--ins--background); + background-color: var(--wp-admin--diff--addedline--ins--background); } .diff-meta { @@ -380,8 +384,8 @@ table.diff .diff-addedline ins { .revisions-tooltip, .revisions-tooltip-arrow > span { - border: 1px solid var(--wp-admin--revisions--tooltip--border); - background-color: var(--wp-admin--revisions--tooltip--background); + border: 1px solid var(--wp-admin--surface--border-step-2); + background-color: var(--wp-admin--surface--background); } .revisions-tooltip { @@ -401,8 +405,8 @@ table.diff .diff-addedline ins { .arrow:after { z-index: 9999; - background-color: var(--wp-admin--revisions--tooltip--background); - box-shadow: 0 1px 3px var(--wp-admin--revisions--tooltip--box-shadow); + background-color: var(--wp-admin--surface--background); + box-shadow: 0 1px 3px var(--wp-admin--surface--box-shadow); } .arrow.top { @@ -441,7 +445,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { /* jQuery UI Slider */ .wp-slider.ui-slider { position: relative; - border: 1px solid var(--wp-admin--slider--border); + border: 1px solid var(--wp-admin--surface--border-step-2); text-align: left; cursor: pointer; } @@ -460,14 +464,14 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.focus { - background: var(--wp-admin--slider--handle--background); - border: 1px solid var(--wp-admin--slider--handle--border); - box-shadow: 0 1px 0 var(--wp-admin--slider--handle--box-shadow); + background: var(--wp-admin--surface--background-alternate); + border: 1px solid var(--wp-admin--surface--border); + box-shadow: 0 1px 0 var(---wp-admin--surface--border); } .wp-slider .ui-slider-handle:hover, .wp-slider .ui-slider-handle.ui-state-hover { - background: var(--wp-admin--slider--handle--background--hover); + background: var(--wp-admin--surface--background-alternate); border-color: var(--wp-admin--slider--handle--border--hover); } diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 64cfd2461a4f4..7e92e1f94938d 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -96,32 +96,12 @@ body { --wp-admin--plugin-modal-banner-title--color: #fff; --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); - - --wp-admin--revisions--controls--background--pinned: var(--wp-admin--surface--background); - --wp-admin--revisions--controls--box-shadow--pinned: var(--wp-admin--surface--box-shadow); - --wp-admin--revisions--tickmarks--background: #fff; - --wp-admin--revisions--tickmark--border: #a7aaad; - --wp-admin--revisions--meta--background: var(--wp-admin--surface--background); - --wp-admin--revisions--meta--box-shadow: var(--wp-admin--surface--box-shadow); - --wp-admin--diff--author-card--date: #646970; - --wp-admin--diff--author-card--autosave: #d63638; - --wp-admin--diff--background: var(--wp-admin--surface--background); - --wp-admin--diff--box-shadow: var(--wp-admin--surface--box-shadow); - --wp-admin--diff--deletedline--background: #fcf0f1; + --wp-admin--diff--deletedline--background: var(--wp-admin--notice-error--background); --wp-admin--diff--deletedline--del--background: #ffabaf; - --wp-admin--diff--addedline--background: #edfaef; - --wp-admin--diff--addedline--ins--background: #68de7c; - - --wp-admin--tooltip--background: var(--wp-admin--surface--background); - --wp-admin--tooltip--border: var(--wp-admin--surface--border-step-2); - --wp-admin--tooltip--box-shadow: var(--wp-admin--surface--box-shadow); - - --wp-admin--slider--border: var(--wp-admin--surface--border-step-2); - --wp-admin--slider--handle--background: var(--wp-admin--surface--background-alternate); - --wp-admin--slider--handle--border: var(--wp-admin--surface--border); - --wp-admin--slider--handle--box-shadow: var(--wp-admin--surface--border); - --wp-admin--slider--handle--background--hover: var(--wp-admin--surface--background-alternate); + --wp-admin--diff--addedline--background: var(--wp-admin--notice-success--background); + --wp-admin--diff--addedline--ins--background: var(--wp-admin--icon-success--fill); + --wp-admin--slider--handle--border--hover: #8c8f94; --wp-admin--slider--handle--background--active: #f0f0f1; --wp-admin--slider--handle--border--active: #8c8f94; From bead20e491492e57b39a7ee0d262d3ef146d9e8c Mon Sep 17 00:00:00 2001 From: Morgan Kay Date: Fri, 6 Aug 2021 12:57:42 -0700 Subject: [PATCH 45/62] use custom properties in the code-editor css file --- src/wp-admin/css/code-editor.css | 16 ++++++++-------- src/wp-includes/css/custom-properties.css | 1 + 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/wp-admin/css/code-editor.css b/src/wp-admin/css/code-editor.css index 92c39405ba147..a7aeb37206708 100644 --- a/src/wp-admin/css/code-editor.css +++ b/src/wp-admin/css/code-editor.css @@ -34,25 +34,25 @@ } .wp-core-ui .CodeMirror-lint-message-warning { - background-color: #fcf9e8; - border-left: 4px solid #dba617; + background-color: var(--wp-admin--notice-warning--background); + border-left: var(--wp-admin--notice-warning--border); } .wrap .CodeMirror-lint-marker-warning:before, .wp-core-ui .CodeMirror-lint-message-warning:before { content: "\f534"; - color: #dba617; + color: var(--wp-admin--notice-warning--border); } .wp-core-ui .CodeMirror-lint-message-error { - background-color: #fcf0f1; - border-left: 4px solid #d63638; + background-color: var(--wp-admin--notice-error--background); + border-left: 4px solid var(--wp-admin--notice-error--border); } .wrap .CodeMirror-lint-marker-error:before, .wp-core-ui .CodeMirror-lint-message-error:before { content: "\f153"; - color: #d63638; + color: var(--wp-admin--notice-error--color); } .wp-core-ui .CodeMirror-lint-tooltip { @@ -63,7 +63,7 @@ } .wrap .CodeMirror .CodeMirror-matchingbracket { - background: rgba(219, 166, 23, 0.3); + background: var(--wp-admin--code-highlight--background); color: inherit; } @@ -72,5 +72,5 @@ } .wrap .CodeMirror .CodeMirror-linenumber { - color: #646970; + color: var(--wp-admin--text-secondary--color); } diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 0480c4491a748..949d234724f31 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -28,6 +28,7 @@ body { --wp-admin--text-secondary--color: #646970; --wp-admin--code--background: #dcdcde; + --wp-admin--code-highlight--background: rgba(219, 166, 23, 0.3); --wp-admin--admin-menu--background: #1d2327; From a9fd8356692016b07496b719f8e230821f64330e Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 19 Aug 2021 18:00:34 -0400 Subject: [PATCH 46/62] Fix some naming schemes, add defaults for the slider properties Combines sub-locations into single location tokens; and creates default `slider-handle--background` etc, inheriting from the existing properties. --- src/wp-admin/css/revisions.css | 26 +++++++++++------------ src/wp-includes/css/custom-properties.css | 24 ++++++++++----------- 2 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css index cd802f82c51d8..f7d6c1cda8d61 100644 --- a/src/wp-admin/css/revisions.css +++ b/src/wp-admin/css/revisions.css @@ -246,7 +246,7 @@ table.diff .diff-deletedline { } table.diff .diff-deletedline del { - background-color: var(--wp-admin--diff--deletedline--del--background); + background-color: var(--wp-admin--diff--deletedline-del--background); } table.diff .diff-addedline { @@ -271,7 +271,7 @@ table.diff .diff-addedline .dashicons { } table.diff .diff-addedline ins { - background-color: var(--wp-admin--diff--addedline--ins--background); + background-color: var(--wp-admin--diff--addedline-ins--background); } .diff-meta { @@ -464,22 +464,22 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.focus { - background: var(--wp-admin--surface--background-alternate); - border: 1px solid var(--wp-admin--surface--border); - box-shadow: 0 1px 0 var(---wp-admin--surface--border); + background: var(--wp-admin--slider-handle--background); + border: 1px solid var(--wp-admin--slider-handle--border); + box-shadow: 0 1px 0 var(--wp-admin--slider-handle--border); } .wp-slider .ui-slider-handle:hover, .wp-slider .ui-slider-handle.ui-state-hover { - background: var(--wp-admin--surface--background-alternate); - border-color: var(--wp-admin--slider--handle--border--hover); + background: var(--wp-admin--slider-handle--background); + border-color: var(--wp-admin--slider-handle--border--hover); } .wp-slider .ui-slider-handle:active, .wp-slider .ui-slider-handle.ui-state-active { - background: var(--wp-admin--slider--handle--background--active); - border-color: var(--wp-admin--slider--handle--border--active); - box-shadow: inset 0 2px 5px -3px var(--wp-admin--slider--handle--box-shadow--active); + background: var(--wp-admin--slider-handle--background--active); + border-color: var(--wp-admin--slider-handle--border--hover); + box-shadow: inset 0 2px 5px -3px rgb(var(--wp-admin--shadow) / 0.5); transform: translateY(1px); } @@ -488,7 +488,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { position: absolute; top: 2px; left: 2px; - color: var(--wp-admin--slider--handle--color); + color: var(--wp-admin--slider-handle--color); content: "\f229"; font: normal 18px/1 dashicons; speak: never; @@ -498,7 +498,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { .wp-slider .ui-slider-handle:hover:before, .wp-slider .ui-slider-handle.ui-state-hover:before { - color: var(--wp-admin--slider--handle--color--hover); + color: var(--wp-admin--slider-handle--color--hover); } .wp-slider .ui-slider-handle.from-handle:before, @@ -529,7 +529,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle { font-size: 0.7em; display: block; border: 0; - background-color: var(--wp-admin--slider--range--background); + background-color: transparent; background-image: none; } diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index c85a4324a5c25..839e12533da24 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -15,13 +15,12 @@ body { --wp-admin--page--background: #f0f0f1; --wp-admin--surface--background: #fff; - --wp-admin--surface--box-shadow: rgba(0, 0, 0, 0.1); --wp-admin--surface--background-alternate: #f6f7f7; --wp-admin--surface--border: #c3c4c7; --wp-admin--surface--border-step-1: var(--wp-admin--surface--border); /* alias */ --wp-admin--surface--border-step-2: #dcdcde; --wp-admin--surface--border-step-3: #f0f0f1; - + --wp-admin--surface--box-shadow: rgba(0, 0, 0, 0.1); --wp-admin--heading--color: #1d2327; --wp-admin--heading-secondary--color: #50575e; @@ -101,19 +100,18 @@ body { --wp-admin--plugin-modal-banner-title--color: #fff; --wp-admin--plugin-modal-banner-title--background: rgba(29, 35, 39, 0.9); - + --wp-admin--diff--deletedline--background: var(--wp-admin--notice-error--background); - --wp-admin--diff--deletedline--del--background: #ffabaf; + --wp-admin--diff--deletedline-del--background: #ffabaf; --wp-admin--diff--addedline--background: var(--wp-admin--notice-success--background); - --wp-admin--diff--addedline--ins--background: var(--wp-admin--icon-success--fill); - - --wp-admin--slider--handle--border--hover: #8c8f94; - --wp-admin--slider--handle--background--active: #f0f0f1; - --wp-admin--slider--handle--border--active: #8c8f94; - --wp-admin--slider--handle--box-shadow--active: rgba(0, 0, 0, 0.5); - --wp-admin--slider--handle--color: #50575e; - --wp-admin--slider--handle--color--hover: #1d2327; - --wp-admin--slider--range--background: transparent; + --wp-admin--diff--addedline-ins--background: var(--wp-admin--icon-success--fill); + + --wp-admin--slider-handle--background: var(--wp-admin--surface--background-alternate); + --wp-admin--slider-handle--background--active: var(--wp-admin--page--background); + --wp-admin--slider-handle--border: var(--wp-admin--surface--border); + --wp-admin--slider-handle--border--hover: #8c8f94; + --wp-admin--slider-handle--color: #50575e; + --wp-admin--slider-handle--color--hover: #1d2327; --wp-admin--site-icon--background-color: #000; } From d8c7187fb89bccb3cf105517f0d4665c55dd87bf Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 19 Aug 2021 18:06:21 -0400 Subject: [PATCH 47/62] Use the `--wp-admin--surface--box-shadow` property --- src/wp-admin/css/revisions.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css index f7d6c1cda8d61..5c904ffd40e24 100644 --- a/src/wp-admin/css/revisions.css +++ b/src/wp-admin/css/revisions.css @@ -26,7 +26,7 @@ top: 0; height: 82px; background-color: var(--wp-admin--surface--background); - box-shadow: 0 1px 3px rgb(var(--wp-admin--shadow) / 0.1); + box-shadow: 0 1px 3px var(--wp-admin--surface--box-shadow); } .revisions-tickmarks { From 8b03b1c11a04a7f92b961fc43318405eb62a595c Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Fri, 20 Aug 2021 16:05:10 -0600 Subject: [PATCH 48/62] update wp-pointer colors to use custom properties --- src/wp-includes/css/custom-properties.css | 2 ++ src/wp-includes/css/wp-pointer.css | 36 +++++++++++------------ 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 839e12533da24..db677e191fca2 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -114,6 +114,8 @@ body { --wp-admin--slider-handle--color--hover: #1d2327; --wp-admin--site-icon--background-color: #000; + + --wp-admin--pointer-content--box-shadow: rgba(0, 0, 0, 0.08); } body.admin-color-ectoplasm { diff --git a/src/wp-includes/css/wp-pointer.css b/src/wp-includes/css/wp-pointer.css index 9263346e06eb2..550a6e447d6ba 100644 --- a/src/wp-includes/css/wp-pointer.css +++ b/src/wp-includes/css/wp-pointer.css @@ -2,27 +2,27 @@ padding: 0 0 10px; position: relative; font-size: 13px; - background: #fff; - border: 1px solid #c3c4c7; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); + background: var(--wp-admin--surface--background); + border: 1px solid var(--wp-admin--surface--border); + box-shadow: 0 3px 6px var(--wp-admin--pointer-content--box-shadow); } .wp-pointer-content h3 { position: relative; margin: -1px -1px 5px; padding: 15px 18px 14px 60px; - border: 1px solid #2271b1; + border: 1px solid var(--wp-admin--theme--primary); border-bottom: none; line-height: 1.4; font-size: 14px; - color: #fff; - background: #2271b1; + color: var(--wp-admin--surface--background); + background: var(--wp-admin--theme--primary); } .wp-pointer-content h3:before { - background: #fff; + background: var(--wp-admin--surface--background); border-radius: 50%; - color: #2271b1; + color: var(--wp-admin--theme--primary); content: "\f227"; font: normal 20px/1.6 dashicons; position: absolute; @@ -64,7 +64,7 @@ .wp-pointer-buttons a.close:before { background: none; - color: #787c82; + color: var(--wp-admin--icon--fill); content: "\f153"; display: block !important; font: normal 16px/1 dashicons; @@ -80,7 +80,7 @@ } .wp-pointer-buttons a.close:hover:before { - color: #d63638; + color: var(--wp-admin--theme--notification); } /* The arrow base class must take up no space, even with transparent borders. */ @@ -141,7 +141,7 @@ .wp-pointer-undefined .wp-pointer-arrow { top: 0; border-width: 0 13px 13px 13px; - border-bottom-color: #2271b1; + border-bottom-color: var(--wp-admin--theme--primary); } .wp-pointer-top .wp-pointer-arrow-inner, @@ -150,7 +150,7 @@ margin-left: -13px; margin-top: -13px; border: 13px solid transparent; - border-bottom-color: #2271b1; + border-bottom-color: var(--wp-admin--theme--primary); display: block; content: " "; } @@ -158,7 +158,7 @@ .wp-pointer-bottom .wp-pointer-arrow { bottom: 0; border-width: 13px 13px 0 13px; - border-top-color: #c3c4c7; + border-top-color: var(--wp-admin--surface--border); } .wp-pointer-bottom .wp-pointer-arrow-inner { @@ -166,7 +166,7 @@ margin-left: -13px; margin-bottom: -13px; border: 13px solid transparent; - border-top-color: #fff; + border-top-color: var(--wp-admin--surface--background); display: block; content: " "; } @@ -175,7 +175,7 @@ .wp-pointer-left .wp-pointer-arrow { left: 0; border-width: 13px 13px 13px 0; - border-right-color: #c3c4c7; + border-right-color: var(--wp-admin--surface--border); } /* rtl:ignore */ @@ -184,7 +184,7 @@ margin-left: -13px; margin-top: -13px; border: 13px solid transparent; - border-right-color: #fff; + border-right-color: var(--wp-admin--surface--background); display: block; content: " "; } @@ -193,7 +193,7 @@ .wp-pointer-right .wp-pointer-arrow { right: 0; border-width: 13px 0 13px 13px; - border-left-color: #c3c4c7; + border-left-color: var(--wp-admin--surface--border); } /* rtl:ignore */ @@ -202,7 +202,7 @@ margin-right: -13px; margin-top: -13px; border: 13px solid transparent; - border-left-color: #fff; + border-left-color: var(--wp-admin--surface--background); display: block; content: " "; } From 44d927937a8d637017d90acbf703d37fb2acd4ca Mon Sep 17 00:00:00 2001 From: Morgan Kay Date: Fri, 6 Aug 2021 17:18:49 -0700 Subject: [PATCH 49/62] Update colors in list-tables CSS Fixes #11 --- src/wp-admin/css/list-tables.css | 141 +++++++++++----------- src/wp-includes/css/custom-properties.css | 15 +++ 2 files changed, 84 insertions(+), 72 deletions(-) diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 2cb19dcd6c012..803725da59418 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -55,8 +55,8 @@ min-width: 24px; height: 2em; border-radius: 5px; - background-color: #646970; - color: #fff; + background-color: var(--wp-admin--bubble--background); + color: var(--wp-admin--bubble--color); font-size: 11px; line-height: 1.90909090; text-align: center; @@ -71,7 +71,7 @@ margin-left: 8px; width: 0; height: 0; - border-top: 5px solid #646970; + border-top: 5px solid var(--wp-admin--bubble--background); border-right: 5px solid transparent; } @@ -79,14 +79,14 @@ .column-response a.post-com-count-approved:focus .comment-count-approved, .column-comments a.post-com-count-approved:hover .comment-count-approved, .column-comments a.post-com-count-approved:focus .comment-count-approved { - background: #2271b1; + background: var(--wp-admin--theme--primary); } .column-response a.post-com-count-approved:hover:after, .column-response a.post-com-count-approved:focus:after, .column-comments a.post-com-count-approved:hover:after, .column-comments a.post-com-count-approved:focus:after { - border-top-color: #2271b1; + border-top-color: var(--wp-admin--theme--primary); } /* @todo: consider to use a single rule for these counters and the admin menu counters. */ @@ -97,10 +97,10 @@ padding: 0 5px; min-width: 7px; height: 17px; - border: 2px solid #fff; + border: 2px solid var(--wp-admin--surface--background); border-radius: 11px; - background: #d63638; - color: #fff; + background: var(--wp-admin--theme--notification); + color: var(--wp-admin--theme--notification--contrast); font-size: 9px; line-height: 1.88888888; text-align: center; @@ -116,7 +116,7 @@ .commentlist li { padding: 1em 1em .2em; margin: 0; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid var(--wp-admin--surface--border); } .commentlist li li { @@ -131,7 +131,7 @@ #submitted-on, .submitted-on { - color: #50575e; + color: var(--wp-admin--text-secondary--color); } /* reply to comments */ @@ -203,8 +203,8 @@ } #replyerror { - border-color: #dcdcde; - background-color: #f6f7f7; + border-color: var(--wp-admin--surface--border-step-2); + background-color: var(--wp-admin--surface--background-alternate); } /* @todo: is this used? */ @@ -214,16 +214,16 @@ #the-comment-list tr.undo, #the-comment-list div.undo { - background-color: #f6f7f7; + background-color: var(--wp-admin--surface--background-alternate); } #the-comment-list .unapproved th, #the-comment-list .unapproved td { - background-color: #fcf9e8; + background-color: var(--wp-admin--notice-warning--background); } #the-comment-list .unapproved th.check-column { - border-left: 4px solid #d63638; + border-left: 4px solid var(--wp-admin--notice-error--border); } #the-comment-list .unapproved th.check-column input { @@ -231,16 +231,16 @@ } #the-comment-list .approve a { - color: #007017; + color: var(--wp-admin--action-approve--color); } #the-comment-list .unapprove a { - color: #996800; + color: var(--wp-admin--action-unpprove--color); } #the-comment-list th, #the-comment-list td { - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1); } #the-comment-list tr:last-child th, @@ -250,14 +250,14 @@ #the-comment-list tr.unapproved + tr.approved th, #the-comment-list tr.unapproved + tr.approved td { - border-top: 1px solid rgba(0, 0, 0, 0.03); + border-top: 1px solid rgb(var(--wp-admin--shadow) / 0.03); } /* table vim shortcuts */ .vim-current, .vim-current th, .vim-current td { - background-color: #f0f6fc !important; + background-color: var(--wp-admin--help-tab--background) !important; } th .comment-grey-bubble { @@ -278,7 +278,7 @@ th .comment-grey-bubble:before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; - color: #3c434a; + color: var(--wp-admin--text--color); } /*------------------------------------------------------------------------------ @@ -461,14 +461,13 @@ table.media .column-title .filename { padding: 0; top: -4px; left: -8px; - color: #3c434a; + color: var(--wp-admin--text--color); line-height: 0.5; position: relative; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; - color: #3c434a; } .column-comments .sorting-indicator:before { @@ -506,9 +505,7 @@ th.asc a:focus span.sorting-indicator:before { } .wp-list-table .toggle-row:focus:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: var(--wp-admin--box-shadow--focus); } .wp-list-table .toggle-row:active { @@ -522,7 +519,7 @@ th.asc a:focus span.sorting-indicator:before { border-radius: 50%; display: block; padding: 1px 2px 1px 0; - color: #3c434a; /* same as table headers sort arrows */ + color: var(--wp-admin--text--color); content: "\f140"; font: normal 20px/1 dashicons; line-height: 1; @@ -543,7 +540,7 @@ th.asc a:focus span.sorting-indicator:before { } .locked-indicator-icon:before { - color: #8c8f94; + color: var(--wp-admin--icon--fill); content: "\f160"; display: inline-block; font: normal 20px/1 dashicons; @@ -712,7 +709,7 @@ th.asc a:focus span.sorting-indicator { } .view-switch a:before { - color: #c3c4c7; + color: var(--wp-admin--icon--fill--inactive); display: inline-block; font: normal 20px/1 dashicons; speak: never; @@ -723,11 +720,11 @@ th.asc a:focus span.sorting-indicator { .view-switch a:hover:before, .view-switch a:focus:before { - color: #787c82; + color: var(--wp-admin--icon--fill); } .view-switch a.current:before { - color: #2271b1; + color: var(--wp-admin--theme--primary); } .view-switch .view-list:before { @@ -797,7 +794,7 @@ p.pagenav { } .row-actions { - color: #dcdcde; + color: var(--wp-admin--surface--border-step-2); font-size: 13px; padding: 2px 0 0; position: relative; @@ -811,7 +808,7 @@ p.pagenav { .row-actions .network_only, .row-actions .network_active { - color: #000; + color: var(--wp-admin--heading--color); } .no-js .row-actions, @@ -1033,17 +1030,17 @@ tr.inline-edit-row td, ul.cat-checklist { height: 12em; - border: solid 1px #dcdcde; + border: 1px solid var(--wp-admin--surface--border-step-2); overflow-y: scroll; padding: 0 5px; margin: 0; - background-color: #fff; + background-color: var(--wp-admin--surface--background); } #bulk-titles { display: block; height: 12em; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin--surface--border-step-2); overflow-y: scroll; padding: 0 5px; margin: 0 0 5px; @@ -1127,11 +1124,11 @@ ul.cat-checklist { .plugins, .plugins th, .plugins td { - color: #000; + color: var(--wp-admin--heading--color); } .plugins tr { - background: #fff; + background: var(--wp-admin--surface--background); } .plugins p { @@ -1170,7 +1167,7 @@ ul.cat-checklist { .plugins .active td, .plugins .active th { - background-color: #f0f6fc; + background-color: var(--wp-admin--notice-info--background); } .plugins .update th, @@ -1185,15 +1182,15 @@ ul.cat-checklist { .plugin-install #the-list td, .upgrade .plugins td, .upgrade .plugins th { - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1); } .plugins tr.active.plugin-update-tr + tr.inactive th, .plugins tr.active.plugin-update-tr + tr.inactive td, .plugins tr.active + tr.inactive th, .plugins tr.active + tr.inactive td { - border-top: 1px solid rgba(0, 0, 0, 0.03); - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02), inset 0 -1px 0 #dcdcde; + border-top: 1px solid rgb(var(--wp-admin--shadow) / 0.03); + box-shadow: inset 0 1px 0 rgb(var(--wp-admin--shadow) / 0.02), inset 0 -1px 0 var(--wp-admin--surface--border-step-2); } .plugins .update td, @@ -1211,7 +1208,7 @@ ul.cat-checklist { .plugins .active th.check-column, .plugin-update-tr.active td { - border-left: 4px solid #72aee6; + border-left: 4px solid var(--wp-admin--notice-info--border); } .wp-list-table.plugins .plugin-title, @@ -1230,10 +1227,10 @@ ul.cat-checklist { .plugins .plugin-title .dashicons:before { padding: 2px; - background-color: #f0f0f1; - box-shadow: inset 0 0 10px rgba(167, 170, 173, 0.15); + background-color: var(--wp-admin--page--background); + box-shadow: inset 0 0 10px var(--wp-admin--icon--shadow); font-size: 60px; - color: #c3c4c7; + color: var(--wp-admin--icon--fill--disabled); } #update-themes-table .plugin-title img, @@ -1268,7 +1265,7 @@ ul.cat-checklist { } .plugins .plugin-update-tr .plugin-update { - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1); overflow: hidden; /* clearfix */ padding: 0; } @@ -1289,31 +1286,31 @@ ul.cat-checklist { } .plugins tr.paused th.check-column { - border-left: 4px solid #d63638; + border-left: 4px solid var(--wp-admin--notice-error--border); } .plugins tr.paused th, .plugins tr.paused td { - background-color: #f6f7f7; + background-color: var(--wp-admin--surface--background-alternate); } .plugins tr.paused .plugin-title, .plugins .paused .dashicons-warning { - color: #d63638; + color: var(--wp-admin--notice-error--color); } .plugins .paused .error-display p, .plugins .paused .error-display code { font-size: 90%; - color: rgba(0, 0, 0, 0.7); + color: var(--wp-admin--text--color); } .plugins .resume-link { - color: #d63638; + color: var(--wp-admin--notice-error--color); } .plugin-card .update-now:before { - color: #d63638; + color: var(--wp-admin--notice-error--color); content: "\f463"; display: inline-block; font: normal 20px/1 dashicons; @@ -1339,7 +1336,7 @@ ul.cat-checklist { } .plugin-card .updated-message:before { - color: #68de7c; + color: var(--wp-admin--icon-success--fill); content: "\f147"; } @@ -1370,8 +1367,8 @@ ul.cat-checklist { margin: 0 8px 16px; width: 48.5%; width: calc( 50% - 8px ); - background-color: #fff; - border: 1px solid #dcdcde; + background-color: var(--wp-admin--surface--background); + border: 1px solid var(--wp-admin--surface--border-step-2); box-sizing: border-box; } @@ -1478,8 +1475,8 @@ div.action-links, .plugin-card-bottom { clear: both; padding: 12px 20px; - background-color: #f6f7f7; - border-top: 1px solid #dcdcde; + background-color: var(--wp-admin--surface--background-alternate); + border-top: 1px solid var(--wp-admin--surface--border-step-2); overflow: hidden; } @@ -1494,7 +1491,7 @@ div.action-links, .plugin-card-update-failed .notice-error { margin: 0; padding-left: 16px; - box-shadow: 0 -1px 0 #dcdcde; + box-shadow: 0 -1px 0 var(--wp-admin--notice-error--shadow); } .plugin-card-update-failed .plugin-card-bottom { @@ -1538,17 +1535,17 @@ div.action-links, -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; - color: #3c434a; + color: var(--wp-admin--text--color); } .plugin-card .column-compatibility .compatibility-incompatible:before { content: "\f158"; - color: #d63638; + color: var(--wp-admin--notice-error--color); } .plugin-card .column-compatibility .compatibility-compatible:before { content: "\f147"; - color: #007017; + color: var(--wp-admin--action-approve--color); } .plugin-card .notice { @@ -1565,7 +1562,7 @@ div.action-links, } .no-plugin-results { - color: #646970; /* same as no themes and no media */ + color: var(--wp-admin--text-secondary--color); font-size: 18px; font-style: normal; margin: 0; @@ -1579,13 +1576,13 @@ div.action-links, .wp-list-table tr.site-deleted, .wp-list-table .site-archived, .wp-list-table tr.site-archived { - background: #fcf0f1; + background: var(--wp-admin--notice-error--background); } .wp-list-table .site-spammed, .wp-list-table tr.site-spammed, .wp-list-table .site-mature, .wp-list-table tr.site-mature { - background: #fcf9e8; + background: var(--wp-admin--notice-warning--background); } .sites.fixed .column-lastupdated, @@ -1803,7 +1800,7 @@ div.action-links, } #the-comment-list .is-expanded td:last-child { - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1); } /* Show comment bubble as text instead */ @@ -1855,7 +1852,7 @@ div.action-links, border: none; border-radius: 0; background: none; - color: #b32d2e; + color: var(--wp-admin--pending--color); font-size: inherit; line-height: inherit; text-align: left; @@ -1863,7 +1860,7 @@ div.action-links, .column-response .post-com-count-pending:hover, .column-comments .post-com-count-pending:hover { - color: #d63638; + color: var(--wp-admin--pending--color--hover); } .widefat thead td.check-column, @@ -2055,7 +2052,7 @@ div.action-links, .plugins tr.active + tr.inactive th.check-column, .plugins tr.active + tr.inactive td.column-description, .plugins .plugin-update-tr:before { - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1); } .plugins tr.active + tr.inactive th.check-column, @@ -2079,8 +2076,8 @@ div.action-links, .plugins .active.update + .plugin-update-tr:before, .plugins .active.updated + .plugin-update-tr:before { - background-color: #f0f6fc; - border-left: 4px solid #72aee6; + background-color: var(--wp-admin--notice-info--background); + border-left: 4px solid var(-wp-admin--notice-info--border); } .plugins .plugin-update-tr .update-message { @@ -2130,7 +2127,7 @@ div.action-links, table.plugin-install #the-list tr { display: block; - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgb(var(--wp-admin--shadow) / 0.1); } .plugin-card { diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 839e12533da24..91b8d28316cb6 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -9,6 +9,8 @@ body { --wp-admin--theme--warning: #dba617; --wp-admin--theme--error: var(--wp-admin--theme--notification); + --wp-admin--theme--border: #4f94d4; /* We might want a more specific name for this color, but it gets used for a lot of borders and shadows throughout the admin */ + --wp-admin--shadow: 0 0 0; --wp-admin--highlight: 255 255 255; --wp-admin--editor--color: #1d2327; @@ -22,6 +24,10 @@ body { --wp-admin--surface--border-step-3: #f0f0f1; --wp-admin--surface--box-shadow: rgba(0, 0, 0, 0.1); + --wp-admin--box-shadow--focus: + 0 0 0 1px var(--wp-admin--button-primary--hover), + 0 0 2px 1px var(--wp-admin--button-primary); + --wp-admin--heading--color: #1d2327; --wp-admin--heading-secondary--color: #50575e; --wp-admin--text--color: #3c434a; @@ -58,6 +64,9 @@ body { --wp-admin--help-tab--background: #f0f6fc; --wp-admin--help-tab--border--active: var(--wp-admin--theme--info); + --wp-admin--pending--color: #b32d2e; + --wp-admin--pending--color--hover: #b32d2e; + --wp-admin--nav-tab--border: var(--wp-admin--surface--border-step-1); --wp-admin--nav-tab--color: #50575e; --wp-admin--nav-tab--color--hover: #3c434a; @@ -88,12 +97,18 @@ body { --wp-admin--notice-error--background: #fcf0f1; --wp-admin--notice-error--border: var(--wp-admin--theme--error); --wp-admin--notice-error--color: var(--wp-admin--theme--error); + --wp-admin--notice-error--shadow: #dcdcde; + + --wp-admin--action-approve--color: #007017; + --wp-admin--action-unpprove--color: #996800; --wp-admin--icon--fill: #787c82; --wp-admin--icon--fill--disabled: #a7aaad; + --wp-admin--icon--fill--inactive: var(--wp-admin--surface--border); --wp-admin--icon-destructive--fill: var(--wp-admin--theme--error); --wp-admin--icon-error--fill: var(--wp-admin--icon-destructive--fill); --wp-admin--icon-success--fill: #68de7c; + --wp-admin--icon--shadow: rgba(167, 170, 173, 0.15); --wp-admin--screen-reader-text--background: var(--wp-admin--page--background); --wp-admin--screen-reader-text--color: var(--wp-admin--link--color); From f2bc835f3a1e3250efc78d74853e63a30d2ac977 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 26 Aug 2021 17:03:18 -0400 Subject: [PATCH 50/62] Update src/wp-includes/css/wp-pointer.css --- src/wp-includes/css/wp-pointer.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/css/wp-pointer.css b/src/wp-includes/css/wp-pointer.css index 550a6e447d6ba..117fa828fcf62 100644 --- a/src/wp-includes/css/wp-pointer.css +++ b/src/wp-includes/css/wp-pointer.css @@ -80,7 +80,7 @@ } .wp-pointer-buttons a.close:hover:before { - color: var(--wp-admin--theme--notification); + color: var(--wp-admin--icon-destructive--fill); } /* The arrow base class must take up no space, even with transparent borders. */ From 0d818c0a84fa7af0f58e25ca24d88674947870ad Mon Sep 17 00:00:00 2001 From: Robert Gadon Date: Thu, 12 Aug 2021 20:43:00 -0500 Subject: [PATCH 51/62] Custom properties for color-picker colors --- src/wp-admin/css/color-picker.css | 46 +++++++---------------- src/wp-includes/css/custom-properties.css | 1 + 2 files changed, 14 insertions(+), 33 deletions(-) diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css index be98537fb2948..86d3c49d0166c 100644 --- a/src/wp-admin/css/color-picker.css +++ b/src/wp-admin/css/color-picker.css @@ -17,39 +17,20 @@ } .wp-color-result-text { - background: #f6f7f7; + background: var(--wp-admin--button); border-radius: 0 2px 2px 0; - border-left: 1px solid #c3c4c7; - color: #50575e; + border-left: 1px solid var(--wp-admin--surface--border); + color: var(--wp-admin--heading-secondary--color); display: block; line-height: 2.54545455; /* 28px */ padding: 0 6px; text-align: center; } -.wp-color-result:hover, -.wp-color-result:focus { - background: #f6f7f7; - border-color: #8c8f94; - color: #1d2327; -} - -.wp-color-result:hover:after, -.wp-color-result:focus:after { - color: #1d2327; - border-color: #a7aaad; - border-left: 1px solid #8c8f94; -} - .wp-picker-container { display: inline-block; } -.wp-color-result:focus { - border-color: #4f94d4; - box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); -} - .wp-color-result:active { /* See Trac ticket #39662 */ transform: none !important; @@ -81,12 +62,12 @@ } .wp-picker-container .iris-square-slider .ui-slider-handle:focus { - background-color: #50575e + background-color: var(--wp-admin--slider-handle--color); } .wp-picker-container .iris-picker { border-radius: 0; - border-color: #dcdcde; + border-color: var(--wp-admin--surface--border); margin-top: 6px; } @@ -102,34 +83,33 @@ } .wp-color-picker::-webkit-input-placeholder { - color: #646970; + color: var(--wp-admin--input--color--placeholder); } .wp-color-picker::-moz-placeholder { - color: #646970; + color: var(--wp-admin--input--color--placeholder); opacity: 1; } .wp-color-picker:-ms-input-placeholder { - color: #646970; + color: var(--wp-admin--input--color--placeholder); } .wp-picker-container input[type="text"].iris-error { - background-color: #fcf0f1; - border-color: #d63638; - color: #000; + background-color: var(--wp-admin--notice-error--background); + border-color: var(--wp-admin--notice-error--border); } .iris-picker .ui-square-handle:focus, .iris-picker .iris-strip .ui-slider-handle:focus { - border-color: #3582c4; + border-color: var(--wp-admin--button--focus); border-style: solid; - box-shadow: 0 0 0 1px #3582c4; + box-shadow: 0 0 0 1px var(--wp-admin--button--focus); outline: 2px solid transparent; } .iris-picker .iris-palette:focus { - box-shadow: 0 0 0 2px #3582c4; + box-shadow: 0 0 0 2px var(--wp-admin--button--focus); } @media screen and (max-width: 782px) { diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index bf1ca66fdb213..f92ce0d1641bf 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -45,6 +45,7 @@ body { --wp-admin--button: #f6f7f7; --wp-admin--button--hover: #f0f0f1; + --wp-admin--button--focus: var(--wp-admin--theme--primary); --wp-admin--button--shadow: #dcdcde; --wp-admin--button--border--disabled: #dcdcde; --wp-admin--button-primary: var(--wp-admin--theme--primary); From 32d94349a5f67744536ed3fda131261f9905a01f Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Thu, 2 Sep 2021 15:03:50 -0400 Subject: [PATCH 52/62] Try/custom properties nav menus (#13) * replace nav-menu colors with custom properties * Use existing custom properties Co-authored-by: Kelly Dwan --- src/wp-admin/css/nav-menus.css | 74 +++++++++++------------ src/wp-includes/css/custom-properties.css | 6 +- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css index a6804bccaf792..10fd6e27e7752 100644 --- a/src/wp-admin/css/nav-menus.css +++ b/src/wp-admin/css/nav-menus.css @@ -66,7 +66,7 @@ ul.add-menu-item-tabs li { } .is-submenu { - color: #50575e; /* #fafafa background */ + color: var(--wp-admin--text-secondary--color); font-style: italic; font-weight: 400; margin-left: 4px; @@ -76,7 +76,7 @@ ul.add-menu-item-tabs li { margin-top: 23px; padding: 10px; overflow: hidden; - background: #fff; + background: var(--wp-admin--surface--background); } .manage-menus .selected-menu, @@ -118,9 +118,9 @@ ul.add-menu-item-tabs li { line-height: 2.15384615; height: auto; min-height: 30px; - background: #f6f7f7; + background: var(--wp-admin--surface--background-alternate); vertical-align: top; - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin--surface--border-step-2); margin: 0; cursor: pointer; border-radius: 3px; @@ -129,9 +129,9 @@ ul.add-menu-item-tabs li { } .bulk-selection .bulk-select-button { - color: #2271b1; - border-color: #2271b1; - background: #f6f7f7; + color: var(--wp-admin--theme--primary); + border-color: var(--wp-admin--theme--primary); + background: var(--wp-admin--surface--background-alternate); vertical-align: top; } @@ -164,13 +164,13 @@ input.bulk-select-switcher + .bulk-select-button-label { label.bulk-select-button:hover, label.bulk-select-button:active, label.bulk-select-button:focus-within { - background: #f0f0f1; - border-color: #0a4b78; - color: #0a4b78; + background: var(--wp-admin--button--hover); + border-color: var(--wp-admin--button-primary--hover); + color: var(--wp-admin--button-primary--hover); } input.bulk-select-switcher:focus + .bulk-select-button-label{ - color: #0a4b78; + color: var(--wp-admin--button-primary--hover); } .bulk-actions input.menu-items-delete { @@ -182,22 +182,22 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{ background: none; cursor: pointer; text-decoration: underline; - color: #b32d2e; + color: var(--wp-admin--link-delete--color); } .bulk-actions input.menu-items-delete:hover { - color: #b32d2e; + color: var(--wp-admin--link-delete--color--hover); border: none; } .bulk-actions input.menu-items-delete.disabled { cursor: default; - color: #a7aaad; + color: var(--wp-admin--link-delete--color--disabled); box-shadow: none; } .menu-settings { - border-top: 1px solid #f0f0f1; + border-top: 1px solid var(--wp-admin--surface--border-step-3); margin-top: 2em; } @@ -234,7 +234,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{ } .theme-location-set { - color: #646970; + color: var(--wp-admin--text-secondary--color); font-size: 11px; } @@ -261,19 +261,19 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{ .nav-menus-php #post-body { padding: 0 10px; - border-top: 1px solid #fff; - border-bottom: 1px solid #dcdcde; - background: #fff; + border-top: 1px solid var(--wp-admin--surface--background); + border-bottom: 1px solid var(--wp-admin--surface--border-step-2); + background: var(--wp-admin--surface--background); } #nav-menu-header, #nav-menu-footer { padding: 0 10px; - background: #f6f7f7; + background: var(--wp-admin--surface--background-alternate); } #nav-menu-header { - border-bottom: 1px solid #dcdcde; + border-bottom: 1px solid var(--wp-admin--surface--border-step-2); margin-bottom: 0; } @@ -350,7 +350,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{ .locations-edit-menu-link { padding-right: 3px; - border-right: 1px solid #c3c4c7; + border-right: 1px solid var(--wp-admin--surface--border); } #menu-management .inside { @@ -538,7 +538,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{ } .menu-item-bar .menu-item-handle { - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin--surface--border-step-2); position: relative; padding: 10px 15px; height: auto; @@ -550,12 +550,12 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{ } .menu-item-bar .menu-item-handle:hover { - border-color: #8c8f94; + border-color: var(--wp-admin--surface--border-contrast); } #menu-to-edit .menu-item-invalid .menu-item-handle { - background: #fcf0f1; - border-color: #d63638; + background: var(--wp-admin--notice-error--background); + border-color: var(--wp-admin--notice-error--border); } .no-js .menu-item-edit-active .item-edit { @@ -568,7 +568,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{ .menu li.deleting .menu-item-handle { background-image: none; - background-color: #f86368; + background-color: var(--wp-admin--notice-error--background); } .menu-item-handle .item-title { @@ -590,7 +590,7 @@ input.bulk-select-switcher:focus + .bulk-select-button-label{ } .menu-item-handle .menu-item-title.no-title { - color: #646970; + color: var(--wp-admin--text-secondary--color); } /* Sortables */ @@ -657,7 +657,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; } .item-type { display: inline-block; padding: 12px 16px; - color: #646970; + color: var(--wp-admin--text-secondary--color); font-size: 12px; line-height: 1.5; } @@ -698,7 +698,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; } height: auto; margin: 12px -10px 12px 0; padding: 0; - color: #2271b1; + color: var(--wp-admin--link--color); text-decoration: underline; font-size: 12px; line-height: 1.5; @@ -734,9 +734,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; } } .nav-menus-php .item-edit:focus:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: var(--wp-admin--box-shadow--focus); } /* Menu editing */ @@ -750,9 +748,9 @@ body.menu-max-depth-11 { min-width: 1280px !important; } padding: 10px; position: relative; z-index: 10; /* Keep .item-title's shadow from appearing on top of .menu-item-settings */ - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); border-top: none; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(var(--wp-admin--shadow), 0.04); } .menu-item-settings .field-move { @@ -796,8 +794,8 @@ body.menu-max-depth-11 { min-width: 1280px !important; } display: block; margin: 0 0 15px; padding: 3px 5px 5px; - border: 1px solid #dcdcde; - color: #646970; + border: 1px solid var(--wp-admin--surface--border-step-2); + color: var(--wp-admin--text-secondary--color); font-size: 12px; } @@ -1005,7 +1003,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; } position: sticky; bottom: 0; z-index: 10; - box-shadow: 0 -1px 0 0px #ddd; + box-shadow: 0 -1px 0 0px var(--wp-admin--surface--border-step-2); } #save_menu_header { diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index f92ce0d1641bf..5d23f382ef77f 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -1,7 +1,7 @@ body { --wp-admin--theme--primary: #2271b1; --wp-admin--theme--primary--contrast: #f6f7f7; - --wp-admin--theme--primary--step-10: #1a5686; + --wp-admin--theme--primary--step-10: #0a4b78; --wp-admin--theme--notification: #d63638; --wp-admin--theme--notification--contrast: #fff; --wp-admin--theme--success: #00a32a; @@ -22,6 +22,7 @@ body { --wp-admin--surface--border-step-1: var(--wp-admin--surface--border); /* alias */ --wp-admin--surface--border-step-2: #dcdcde; --wp-admin--surface--border-step-3: #f0f0f1; + --wp-admin--surface--border-contrast: #c3c4c7; --wp-admin--surface--box-shadow: rgba(0, 0, 0, 0.1); --wp-admin--box-shadow--focus: @@ -42,6 +43,7 @@ body { --wp-admin--link--color--hover: var(--wp-admin--theme--primary--step-10); --wp-admin--link-delete--color: #b32d2e; --wp-admin--link-delete--color--hover: #b32d2e; + --wp-admin--link-delete--color--disabled: #a7aaad; --wp-admin--button: #f6f7f7; --wp-admin--button--hover: #f0f0f1; @@ -125,7 +127,7 @@ body { --wp-admin--slider-handle--background: var(--wp-admin--surface--background-alternate); --wp-admin--slider-handle--background--active: var(--wp-admin--page--background); --wp-admin--slider-handle--border: var(--wp-admin--surface--border); - --wp-admin--slider-handle--border--hover: #8c8f94; + --wp-admin--slider-handle--border--hover: var(--wp-admin--surface--border-contrast); --wp-admin--slider-handle--color: #50575e; --wp-admin--slider-handle--color--hover: #1d2327; From 916ff0e20610a50f09da947dcbcb77a07b049364 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 2 Sep 2021 15:56:06 -0400 Subject: [PATCH 53/62] Clean up login & install properties --- src/wp-admin/css/install.css | 40 +++++++++---------- src/wp-admin/css/login.css | 48 +++++++++++------------ src/wp-includes/css/custom-properties.css | 20 +--------- 3 files changed, 43 insertions(+), 65 deletions(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 73ca61afdcafd..419d01fd39f53 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -4,38 +4,36 @@ html { } body { - background: var(--wp-admin--surface--background, #fff); - border: 1px solid var(--wp-admin--surface--border, #c3c4c7); - color: var(--wp-admin--text--color, #3c434a); + background: var(--wp-admin--surface--background); + border: 1px solid var(--wp-admin--surface--border); + color: var(--wp-admin--text--color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; height: auto; margin: 140px auto 25px; padding: 20px 20px 10px 20px; max-width: 700px; -webkit-font-smoothing: subpixel-antialiased; - box-shadow: 0 1px 1px var(--wp-admin--install--body--box-shadow, rgba(0, 0, 0, 0.04)); + box-shadow: 0 1px 1px rgb(var(--wp-admin--shadow) / 0.04); } a { - color: var(--wp-admin--link--color, #2271b1); + color: var(--wp-admin--link--color); } a:hover, a:active { - color: var(--wp-admin--install--link--color--hover, #135e96); + color: var(--wp-admin--link--color--hover); } a:focus { - color: var(--wp-admin--install--link--color--focus, #043959); - box-shadow: - 0 0 0 1px var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4), - 0 0 2px 1px var(--wp-admin--install--link--color--focus--box-shadow-alt, rgba(79, 148, 212, 0.8)); + color: var(--wp-admin--link--color--hover); + box-shadow: var(--wp-admin--box-shadow--focus); } h1, h2 { - border-bottom: 1px solid var(--wp-admin--install--heading--border-color, #dcdcde); + border-bottom: 1px solid var(--wp-admin--surface--border-step-3); clear: both; - color: var(--wp-admin--install--heading--color, #646970); + color: var(--wp-admin--heading-secondary--color); font-size: 24px; padding: 0 0 7px; font-weight: 400; @@ -88,7 +86,7 @@ label { background-size: 84px; background-position: center top; background-repeat: no-repeat; - color: var(--wp-admin--text--color, #3c434a); /* same as login.css */ + color: var(--wp-admin--text--color); /* same as login.css */ font-size: 20px; font-weight: 400; line-height: 1.3em; @@ -109,7 +107,7 @@ label { font-size: 14px; } textarea { - border: 1px solid var(--wp-admin--install--textarea--border, #dcdcde); + border: 1px solid var(--wp-admin--surface--border-step-2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; width: 100%; box-sizing: border-box; @@ -200,9 +198,9 @@ submit { } .message { - border-left: 4px solid var(--wp-admin--theme--notification, #d63638); + border-left: 4px solid var(--wp-admin--notice-error--border); padding: 0.7em 0.6em; - background-color: var(--wp-admin--page--background, #fcf0f1); + background-color: var(--wp-admin--page--background); } /* rtl:ignore */ @@ -306,21 +304,21 @@ body.language-chooser { padding: 8px; width: 100%; display: block; - border: 1px solid var(--wp-admin--install--select--border, #dcdcde); - background: var(--wp-admin--surface--background, #fff); - color: var(--wp-admin--input--color, #2c3338); + border: 1px solid var(--wp-admin--surface--border-step-2); + background: var(--wp-admin--surface--background); + color: var(--wp-admin--input--color); font-size: 16px; font-family: Arial, sans-serif; font-weight: 400; } .language-chooser select:focus { - color: var(--wp-admin--input--color, #2c3338); + color: var(--wp-admin--input--color); } .language-chooser select option:hover, .language-chooser select option:focus { - color: var(--wp-admin--install--select--color--focus, #0a4b78); + color: var(--wp-admin--button-primary--hover); } .language-chooser .step { diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css index 96dfe4e66dcde..5e89d3097a7da 100644 --- a/src/wp-admin/css/login.css +++ b/src/wp-admin/css/login.css @@ -6,16 +6,16 @@ body { } body { - background: var(--wp-admin--page--background, #f0f0f1); + background: var(--wp-admin--page--background); min-width: 0; - color: var(--wp-admin--text--color, #3c434a); + color: var(--wp-admin--text--color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4; } a { - color: var(--wp-admin--theme--primary, #2271b1); + color: var(--wp-admin--link--color); transition-property: border, background, color; transition-duration: .05s; transition-timing-function: ease-in-out; @@ -27,14 +27,12 @@ a { a:hover, a:active { - color: var(--wp-admin--login-anchor--color--hover, #135e96); + color: var(--wp-admin--link--color--hover); } a:focus { - color: var(--wp-admin--login-anchor--color--focus, #043959); - box-shadow: - 0 0 0 1px var(--wp-admin--login-anchor--box-shadow-from--focus, #4f94d4), - 0 0 2px 1px var(--wp-admin--login-anchor--box-shadow-to--focus, rgba(79, 148, 212, 0.8)); + color: var(--wp-admin--link--color--hover); + box-shadow: var(--wp-admin--box-shadow--focus); } p { @@ -44,20 +42,20 @@ p { .login .message, .login .success, .login #login_error { - border-left: 4px solid var(--wp-admin--notice-info--border, #72aee6); + border-left: 4px solid var(--wp-admin--notice-info--border); padding: 12px; margin-left: 0; margin-bottom: 20px; - background-color: #fff; - box-shadow: 0 1px 1px 0 var(--wp-admin--login--box-shadow, rgba(0, 0, 0, 0.1)); + background-color: var(--wp-admin--surface--background); + box-shadow: 0 1px 1px 0 rgb(var(--wp-admin--shadow) / 0.1); } .login .success { - border-left-color: var(--wp-admin--notice-success--border, #00a32a); + border-left-color: var(--wp-admin--notice-success--border); } .login #login_error { - border-left-color: var(--wp-admin--notice-error--border, #d63638); + border-left-color: var(--wp-admin--notice-error--border); } #loginform p.submit, @@ -102,8 +100,8 @@ p { .login .button.wp-hide-pw:focus { background: transparent; - border-color: var(--wp-admin--login-button--border-color, #3582c4); - box-shadow: 0 0 0 1px var(--wp-admin--login-form--box-shadow,#3582c4); + border-color: var(--wp-admin--button--focus); + box-shadow: 0 0 0 1px var(--wp-admin--button--focus); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -134,9 +132,9 @@ p { padding: 26px 24px 34px; font-weight: 400; overflow: hidden; - background: var(--wp-admin--surface--background, #fff); - border: 1px solid var(--wp-admin--surface--border, #c3c4c7); - box-shadow: 0 1px 3px var(--wp-admin--login-form--box-shadow, rgba(0, 0, 0, 0.04)); + background: var(--wp-admin--surface--background); + border: 1px solid var(--wp-admin--surface--border); + box-shadow: 0 1px 3px rgb(var(--wp-admin--shadow) / 0.04); } .login form.shake { @@ -215,8 +213,8 @@ p { } .login h1.admin-email__heading { - border-bottom: 1px var(--wp-admin--surface--border-alternate, #f0f0f1) solid; - color: var(--wp-admin--heading-secondary--color, #50575e); + border-bottom: 1px solid var(--wp-admin--surface--border-step-3); + color: var(--wp-admin--heading-secondary--color); font-weight: normal; padding-bottom: 0.5em; text-align: left; @@ -264,7 +262,7 @@ p { background-size: 84px; background-position: center top; background-repeat: no-repeat; - color: var(--wp-admin--text--color, #3c434a); + color: var(--wp-admin--text--color); height: 84px; font-size: 20px; font-weight: 400; @@ -303,19 +301,19 @@ p { .login #nav a, .login #backtoblog a { text-decoration: none; - color: var(--wp-admin--heading-secondary--color, #50575e); + color: var(--wp-admin--login--link--color); } .login #nav a:hover, .login #backtoblog a:hover, .login h1 a:hover { - color: var(--wp-admin--login-anchor--color--hover, #135e96); + color: var(--wp-admin--login--link--color--hover); } .login #nav a:focus, .login #backtoblog a:focus, .login h1 a:focus { - color: var(--wp-admin--login-anchor--color--focus, #043959); + color: var(--wp-admin--login--link--color--focus); } .login .privacy-policy-page-link { @@ -350,7 +348,7 @@ p { .login form .input, .login input[type="text"], .login form input[type="checkbox"] { - background: var(--wp-admin--surface--background, #fff); + background: var(--wp-admin--surface--background); } .js.login-action-rp input[type="text"], diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 5d23f382ef77f..5d3f72717604c 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -9,8 +9,6 @@ body { --wp-admin--theme--warning: #dba617; --wp-admin--theme--error: var(--wp-admin--theme--notification); - --wp-admin--theme--border: #4f94d4; /* We might want a more specific name for this color, but it gets used for a lot of borders and shadows throughout the admin */ - --wp-admin--shadow: 0 0 0; --wp-admin--highlight: 255 255 255; --wp-admin--editor--color: #1d2327; @@ -133,25 +131,9 @@ body { --wp-admin--site-icon--background-color: #000; - --wp-admin--install--body--box-shadow: rgba(0, 0, 0, 0.04); - --wp-admin--install--link--color--hover: #135e96; - --wp-admin--install--link--color--focus: #043959; - --wp-admin--install--link--color--focus--box-shadow: #4f94d4; - --wp-admin--install--link--color--focus--box-shadow-alt: rgba(79, 148, 212, 0.8); - --wp-admin--install--heading--border-color: #dcdcde; - --wp-admin--install--heading--color: #646970; - --wp-admin--install--textarea--border: #dcdcde; - --wp-admin--install--select--border: #dcdcde; - --wp-admin--install--select--color--focus: #0a4b78; - + --wp-admin--login--link--color: #50575e; --wp-admin--login--link--color--hover: #135e96; --wp-admin--login--link--color--focus: #043959; - --wp-admin--login--link--box-shadow-from--focus: #4f94d4; - --wp-admin--login--link--box-shadow-to--focus: rgba(79, 148, 212, 0.8); - --wp-admin--login--box-shadow: rgba(0, 0, 0, 0.1); - --wp-admin--login--button--border-color: #3582c4; - --wp-admin--login--button--box-shadow: var(--wp-admin--login-button--border-color); - --wp-admin--login--form--box-shadow: rgba(0, 0, 0, 0.04); --wp-admin--pointer-content--box-shadow: rgba(0, 0, 0, 0.08); } From c656208f39a6a69166c300cd21f4d1d91ab74df0 Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Thu, 9 Sep 2021 17:04:36 -0400 Subject: [PATCH 54/62] update widgets colors to use custom properties (#16) Update custom properties to use mostly existing properties --- src/wp-admin/css/widgets.css | 88 +++++++++++------------ src/wp-includes/css/custom-properties.css | 14 +++- 2 files changed, 56 insertions(+), 46 deletions(-) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 9d64f979702b4..a0b528a040593 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -16,7 +16,7 @@ .widget-top { font-size: 13px; font-weight: 600; - background: #f6f7f7; + background: var(--wp-admin--surface--background-alternate); } .widget-top .widget-action { @@ -53,12 +53,12 @@ .in-widget-title, #widgets-right a.widget-control-edit, #available-widgets .widget-description { - color: #646970; + color: var(--wp-admin--text-secondary--color); } .deleting .widget-title, .deleting .widget-top .widget-action .toggle-indicator:before { - color: #a7aaad; + color: var(--wp-admin--link-delete--color--disabled); } /* Media Widgets */ @@ -90,7 +90,7 @@ .media-widget-control .attachment-media-view .button-add-media, .media-widget-control .placeholder { - border: 1px dashed #c3c4c7; + border: 1px dashed var(--wp-admin--surface--border); box-sizing: border-box; cursor: pointer; line-height: 1.6; @@ -102,19 +102,19 @@ .media-widget-control .attachment-media-view .button-add-media { cursor: pointer; - background-color: #f0f0f1; - color: #2c3338; + background-color: var(--wp-admin--page--background); + color: var(--wp-admin--input--color); } .media-widget-control .attachment-media-view .button-add-media:hover { - background-color: #fff; + background-color: var(--wp-admin--surface--background); } .media-widget-control .attachment-media-view .button-add-media:focus { - background-color: #fff; + background-color: var(--wp-admin--surface--background); border-style: solid; - border-color: #4f94d4; - box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); + border-color: var(--wp-admin--button--focus); + box-shadow: 0 0 3px var(--wp-admin--button--focus); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; @@ -137,12 +137,12 @@ .media-widget-control .media-widget-preview img { max-width: 100%; vertical-align: middle; - background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); + background-image: var(--wp-admin--tranparent-checkerboard--gradient); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .media-widget-control .media-widget-preview .wp-video-shortcode { - background: #000; + background: var(--wp-admin--media-widget-preview--video--background); } .media-frame.media-widget .media-toolbar-secondary { @@ -167,7 +167,7 @@ display: inline-block; min-height: 132px; width: 100%; - background: #000; + background: var(--wp-admin--surface--background-contrast); } .media-widget-video-link .dashicons { @@ -175,7 +175,7 @@ position: relative; width: 100%; top: -90px; - color: #fff; + color: var(--wp-admin--icon-contrast--fill); text-decoration: none; } @@ -185,7 +185,7 @@ .media-frame #embed-url-field.invalid, .media-widget-image-link > .link:invalid { - border: 1px solid #d63638; + border: 1px solid var(--wp-admin--theme--notification); } .media-widget-image-link { @@ -205,7 +205,7 @@ } .media-widget-preview .placeholder { - background: #f0f0f1; + background: var(--wp-admin--page--background); } .media-widget-gallery-preview .gallery-item { @@ -251,13 +251,13 @@ display: flex; align-items: center; justify-content: center; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgb(var(--wp-admin--shadow) / 0.5); } .media-widget-gallery-preview .gallery-icon-placeholder-text { font-weight: 600; font-size: 2em; - color: #fff; + color: var(--wp-admin--text-contrast--color); } @@ -271,7 +271,7 @@ } .widget-placeholder { - border: 1px dashed #c3c4c7; + border: 1px dashed var(--wp-admin--surface--border); margin: 0 auto 10px; height: 45px; width: 100%; @@ -336,9 +336,7 @@ } .sidebar-name .handlediv:focus .toggle-indicator:before { - box-shadow: - 0 0 0 1px #4f94d4, - 0 0 2px 1px rgba(79, 148, 212, 0.8); + box-shadow: var(--wp-admin--box-shadow--focus); } .sidebar-name h2, @@ -353,12 +351,12 @@ padding: 0 0 15px; margin: 0; font-style: normal; - color: #646970; + color: var(--wp-admin--text-secondary--color); } .widget-holder .description, .inactive-sidebar .description { - color: #50575e; + color: var(--wp-admin--heading-secondary--color); } #widgets-right .widgets-holder-wrap .description { @@ -510,8 +508,8 @@ div#widgets-right .closed .widgets-sortables { /* Dragging a widget over a closed sidebar */ #widgets-right .widgets-holder-wrap.widget-hover { - border-color: #787c82; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + border-color: var(--wp-admin--widgets-holder--border--hover); + box-shadow: 0 1px 2px rgb(var(--wp-admin--shadow) / 0.3); } /* Accessibility Mode */ @@ -532,7 +530,7 @@ div#widgets-right .closed .widgets-sortables { .widgets_access #widgets-left .widget .widget-top:hover, .widgets_access #widgets-right .widget .widget-top:hover { - border-color: #dcdcde; + border-color: var(--wp-admin--surface--border-step-2); } #available-widgets .widget-control-edit .edit, @@ -546,19 +544,19 @@ div#widgets-right .closed .widgets-sortables { .widget-control-edit { display: block; - color: #646970; - background: #f0f0f1; + color: var(--wp-admin--text-secondary--color); + background: var(--wp-admin--page--background); padding: 0 15px; line-height: 3.30769230; - border-left: 1px solid #dcdcde; + border-left: 1px solid var(--wp-admin--surface--border-step-2); } #widgets-left .widget-control-edit:hover, #widgets-right .widget-control-edit:hover { - color: #fff; - background: #3c434a; + color: var(--wp-admin--surface--background); + background: var(--wp-admin--text--color); border-left: 0; - outline: 1px solid #3c434a; + outline: 1px solid var(--wp-admin--text--color); } .widgets-holder-wrap .sidebar-name, @@ -599,7 +597,7 @@ div#widgets-right .closed .widgets-sortables { } .widget-inside { - background: #fff; + background: var(--wp-admin--surface--background); } .widget-inside select { @@ -613,11 +611,11 @@ div#widgets-right .closed .widgets-sortables { padding-left: 15px; font-size: 12px; line-height: 1; - color: #000; + color: var(--wp-admin--notice-info--color); } .js #removing-widget { - color: #72aee6; + color: var(--wp-admin--notice-info--color); } .widget-control-noform, @@ -669,8 +667,8 @@ div#widgets-right .closed .widgets-sortables { #available-widgets .widget-top:hover, div#widgets-right .widget-top:hover, #widgets-left .widget-top:hover { - border-color: #8c8f94; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + border-color: var(--wp-admin--widget-chooser--border); + box-shadow: 0 1px 2px rgb(var(--wp-admin--shadow) / 0.1); } .widgets-chooser ul.widgets-chooser-sidebars { @@ -685,12 +683,12 @@ div#widgets-right .widget-top:hover, } .widgets-chooser ul { - border: 1px solid #c3c4c7; + border: 1px solid var(--wp-admin--surface--border); } .widgets-chooser li { - border-bottom: 1px solid #c3c4c7; - background: #fff; + border-bottom: 1px solid var(--wp-admin--surface--border); + background: var(--wp-admin--surface--background); margin: 0; position: relative; } @@ -718,8 +716,8 @@ div#widgets-right .widget-top:hover, } .widgets-chooser .widgets-chooser-selected .widgets-chooser-button { - background: #2271b1; - color: #fff; + background: var(--wp-admin--button-primary); + color: var(--wp-admin--button-primary--text); } .widgets-chooser .widgets-chooser-selected:before { @@ -727,7 +725,7 @@ div#widgets-right .widget-top:hover, display: block; -webkit-font-smoothing: antialiased; font: normal 26px/1 dashicons; - color: #fff; + color: var(--wp-admin--button-primary--text); position: absolute; top: 7px; left: 5px; @@ -770,7 +768,7 @@ div#widgets-right .widget-top:hover, } .custom-html-widget-fields > p > .CodeMirror { - border: 1px solid #dcdcde; + border: 1px solid var(--wp-admin--surface--border-step-2); } .custom-html-widget-fields code { padding-top: 1px; diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 5d3f72717604c..95bd5bd223328 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -16,6 +16,7 @@ body { --wp-admin--page--background: #f0f0f1; --wp-admin--surface--background: #fff; --wp-admin--surface--background-alternate: #f6f7f7; + --wp-admin--surface--background-contrast: #000; --wp-admin--surface--border: #c3c4c7; --wp-admin--surface--border-step-1: var(--wp-admin--surface--border); /* alias */ --wp-admin--surface--border-step-2: #dcdcde; @@ -31,6 +32,7 @@ body { --wp-admin--heading-secondary--color: #50575e; --wp-admin--text--color: #3c434a; --wp-admin--text-secondary--color: #646970; + --wp-admin--text-contrast--color: #fff; --wp-admin--code--background: #dcdcde; --wp-admin--code-highlight--background: rgba(219, 166, 23, 0.3); @@ -93,6 +95,7 @@ body { --wp-admin--notice-success--border: var(--wp-admin--theme--success); --wp-admin--notice-info--background: #f0f6fc; --wp-admin--notice-info--border: var(--wp-admin--theme--info); + --wp-admin--notice-info--color: var(--wp-admin--theme--primary); --wp-admin--notice-warning--background: #fcf9e8; --wp-admin--notice-warning--border: var(--wp-admin--theme--warning); --wp-admin--notice-error--background: #fcf0f1; @@ -110,6 +113,7 @@ body { --wp-admin--icon-error--fill: var(--wp-admin--icon-destructive--fill); --wp-admin--icon-success--fill: #68de7c; --wp-admin--icon--shadow: rgba(167, 170, 173, 0.15); + --wp-admin--icon-contrast--fill: #fff; /* Icon on a dark background. */ --wp-admin--screen-reader-text--background: var(--wp-admin--page--background); --wp-admin--screen-reader-text--color: var(--wp-admin--link--color); @@ -129,13 +133,21 @@ body { --wp-admin--slider-handle--color: #50575e; --wp-admin--slider-handle--color--hover: #1d2327; - --wp-admin--site-icon--background-color: #000; + --wp-admin--site-icon--background-color: var(--wp-admin--surface--background-contrast); --wp-admin--login--link--color: #50575e; --wp-admin--login--link--color--hover: #135e96; --wp-admin--login--link--color--focus: #043959; --wp-admin--pointer-content--box-shadow: rgba(0, 0, 0, 0.08); + + --wp-admin--tranparent-checkerboard--gradient: + linear-gradient(45deg, var(--wp-admin--surface--border) 25%, transparent 25%, transparent 75%, var(--wp-admin--surface--border) 75%, var(--wp-admin--surface--border)), + linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, var(--wp-admin--surface--border) 75%, var(--wp-admin--surface--border)); + + /* Darker borders */ + --wp-admin--widgets-holder--border--hover: #787c82; + --wp-admin--widget-chooser--border: #8c8f94; } body.admin-color-ectoplasm { From 63ef9e7d1da96cf42f2525e9689800a95d4a3c9d Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Thu, 9 Sep 2021 17:11:26 -0400 Subject: [PATCH 55/62] migrate `wp-auth-check.css` colors to custom properties. (#19) Co-authored-by: Kelly Dwan --- src/wp-includes/css/custom-properties.css | 2 ++ src/wp-includes/css/wp-auth-check.css | 10 +++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/wp-includes/css/custom-properties.css b/src/wp-includes/css/custom-properties.css index 95bd5bd223328..880f122eb840f 100644 --- a/src/wp-includes/css/custom-properties.css +++ b/src/wp-includes/css/custom-properties.css @@ -135,6 +135,8 @@ body { --wp-admin--site-icon--background-color: var(--wp-admin--surface--background-contrast); + --wp-admin--auth-check--box-shadow: rgba(0, 0, 0, 0.3); + --wp-admin--login--link--color: #50575e; --wp-admin--login--link--color--hover: #135e96; --wp-admin--login--link--color--focus: #043959; diff --git a/src/wp-includes/css/wp-auth-check.css b/src/wp-includes/css/wp-auth-check.css index 8994f4933ab63..589aae5730911 100644 --- a/src/wp-includes/css/wp-auth-check.css +++ b/src/wp-includes/css/wp-auth-check.css @@ -12,7 +12,7 @@ bottom: 0; left: 0; right: 0; - background: #000; + background: var(--wp-admin--auth-check--background); opacity: 0.7; filter: alpha(opacity=70); z-index: 1000010; /* needs to appear above .notification-dialog */ @@ -28,9 +28,9 @@ width: 380px; margin: 0 0 0 -190px; padding: 30px 0 0; - background-color: #f0f0f1; + background-color: var(--wp-admin--page--background); z-index: 1000011; /* needs to appear above #wp-auth-check-bg */ - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 6px var(--wp-admin--auth-check--box-shadow); } @media screen and (max-width: 380px) { @@ -88,7 +88,7 @@ right: 5px; height: 22px; width: 22px; - color: #787c82; + color: var(--wp-admin--icon--fill); text-decoration: none; text-align: center; } @@ -103,7 +103,7 @@ #wp-auth-check-wrap .wp-auth-check-close:hover, #wp-auth-check-wrap .wp-auth-check-close:focus { - color: #2271b1; + color: var(--wp-admin--theme--primary); } #wp-auth-check-wrap .wp-auth-fallback-expired { From f59db57dd24b9be9dc40c8cc0c735d82e9307dd5 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 16 Sep 2021 17:12:11 -0400 Subject: [PATCH 56/62] Style Loader: Add new CSS dependency for `custom-properties` file, revert colors changes (#22) * Bring back legacy color CSS handling * Add a custom-properties style dependency for our color variable CSS file * Remove dependencies from `colors`, in favor of explicitly calling `colors` after `wp-admin` --- src/wp-admin/admin-header.php | 1 + src/wp-admin/includes/media.php | 1 + src/wp-admin/includes/template.php | 1 + src/wp-includes/script-loader.php | 34 ++++++++++++++++++++++++++---- 4 files changed, 33 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/admin-header.php b/src/wp-admin/admin-header.php index 7ee3d03b74cc1..c802e96c3cbd0 100644 --- a/src/wp-admin/admin-header.php +++ b/src/wp-admin/admin-header.php @@ -74,6 +74,7 @@ <?php echo esc_html( $admin_title ); ?> › — <?php bloginfo( 'name' ); ?> › <?php echo $title; ?> — <?php _e( 'WordPress' ); ?>