Merge pull request WordPress#6 from circlecube/try/custom-properties

Add custom prop css colors to install page styles

Author: ryelle

src/wp-admin/css/install.css

@@ -1,40 +1,41 @@
 html {
-	background: #f0f0f1;
+	background: var(--wp-admin--page--background, #f0f0f1);
 	margin: 0 20px;
 }
 
 body {
-	background: #fff;
-	border: 1px solid #c3c4c7;
-	color: #3c434a;
+	background: var(--wp-admin--surface--background, #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;
+	color: var(--wp-admin--install--link--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--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 #dcdcde;
+	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;
@@ -59,7 +60,7 @@ ul, ol, dl {
 }
 
 a img {
-	border: 0
+	border: 0;
 }
 abbr {
 	border: 0;
@@ -87,7 +88,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;
@@ -108,7 +109,7 @@ label {
 	font-size: 14px;
 }
 textarea {
-	border: 1px solid #dcdcde;
+	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 +125,7 @@ textarea {
 	margin-bottom: 9px;
 	padding: 10px 20px 10px 0;
 	font-size: 14px;
-	vertical-align: top
+	vertical-align: top;
 }
 
 .form-table th {
@@ -199,9 +200,9 @@ submit {
 }
 
 .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 +218,6 @@ submit {
 	direction: ltr;
 }
 
-
 /* localization */
 body.rtl,
 .rtl textarea,
@@ -243,7 +243,6 @@ body.rtl,
 }
 
 @media screen and (max-width: 782px) {
-
 	.form-table {
 		margin-top: 0;
 	}
@@ -307,21 +306,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 {

src/wp-includes/css/custom-properties.css

@@ -130,6 +130,17 @@ 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--hover: #135e96;
 	--wp-admin--login--link--color--focus: #043959;
 	--wp-admin--login--link--box-shadow-from--focus: #4f94d4;

src/wp-includes/script-loader.php

@@ -1455,7 +1455,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', 'colors' ) );
-	$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' ) );