From 35165a83f77ecca68f23717a7c9f5f211d96a595 Mon Sep 17 00:00:00 2001 From: Dave Ryan Date: Thu, 22 Jul 2021 18:01:23 -0700 Subject: [PATCH 1/4] 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 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 2/4] 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 046a8f7afbf8f305c70bb430db36c462f9805c3b Mon Sep 17 00:00:00 2001 From: Dave Ryan Date: Thu, 12 Aug 2021 14:26:44 -0700 Subject: [PATCH 3/4] 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 4/4] 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); }