Skip to content

Commit b2a61df

Browse files
authored
Merge pull request WordPress#6 from circlecube/try/custom-properties
Add custom prop css colors to install page styles
2 parents 859611c + 7f0a8de commit b2a61df

File tree

3 files changed

+37
-27
lines changed

3 files changed

+37
-27
lines changed

src/wp-admin/css/install.css

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
11
html {
2-
background: #f0f0f1;
2+
background: var(--wp-admin--page--background, #f0f0f1);
33
margin: 0 20px;
44
}
55

66
body {
7-
background: #fff;
8-
border: 1px solid #c3c4c7;
9-
color: #3c434a;
7+
background: var(--wp-admin--surface--background, #fff);
8+
border: 1px solid var(--wp-admin--surface--border, #c3c4c7);
9+
color: var(--wp-admin--text--color, #3c434a);
1010
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
11+
height: auto;
1112
margin: 140px auto 25px;
1213
padding: 20px 20px 10px 20px;
1314
max-width: 700px;
1415
-webkit-font-smoothing: subpixel-antialiased;
15-
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
16+
box-shadow: 0 1px 1px var(--wp-admin--install--body--box-shadow, rgba(0, 0, 0, 0.04));
1617
}
1718

1819
a {
19-
color: #2271b1;
20+
color: var(--wp-admin--link--color, #2271b1);
2021
}
2122

2223
a:hover,
2324
a:active {
24-
color: #135e96;
25+
color: var(--wp-admin--install--link--color--hover, #135e96);
2526
}
2627

2728
a:focus {
28-
color: #043959;
29+
color: var(--wp-admin--install--link--color--focus, #043959);
2930
box-shadow:
30-
0 0 0 1px #4f94d4,
31-
0 0 2px 1px rgba(79, 148, 212, 0.8);
31+
0 0 0 1px var(--wp-admin--install--link--color--focus--box-shadow, #4f94d4),
32+
0 0 2px 1px var(--wp-admin--install--link--color--focus--box-shadow-alt, rgba(79, 148, 212, 0.8));
3233
}
3334

3435
h1, h2 {
35-
border-bottom: 1px solid #dcdcde;
36+
border-bottom: 1px solid var(--wp-admin--install--heading--border-color, #dcdcde);
3637
clear: both;
37-
color: #646970;
38+
color: var(--wp-admin--install--heading--color, #646970);
3839
font-size: 24px;
3940
padding: 0 0 7px;
4041
font-weight: 400;
@@ -59,7 +60,7 @@ ul, ol, dl {
5960
}
6061

6162
a img {
62-
border: 0
63+
border: 0;
6364
}
6465
abbr {
6566
border: 0;
@@ -87,7 +88,7 @@ label {
8788
background-size: 84px;
8889
background-position: center top;
8990
background-repeat: no-repeat;
90-
color: #3c434a; /* same as login.css */
91+
color: var(--wp-admin--text--color, #3c434a); /* same as login.css */
9192
font-size: 20px;
9293
font-weight: 400;
9394
line-height: 1.3em;
@@ -108,7 +109,7 @@ label {
108109
font-size: 14px;
109110
}
110111
textarea {
111-
border: 1px solid #dcdcde;
112+
border: 1px solid var(--wp-admin--install--textarea--border, #dcdcde);
112113
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
113114
width: 100%;
114115
box-sizing: border-box;
@@ -124,7 +125,7 @@ textarea {
124125
margin-bottom: 9px;
125126
padding: 10px 20px 10px 0;
126127
font-size: 14px;
127-
vertical-align: top
128+
vertical-align: top;
128129
}
129130

130131
.form-table th {
@@ -199,9 +200,9 @@ submit {
199200
}
200201

201202
.message {
202-
border-left: 4px solid #d63638;
203-
padding: .7em .6em;
204-
background-color: #fcf0f1;
203+
border-left: 4px solid var(--wp-admin--theme--notification, #d63638);
204+
padding: 0.7em 0.6em;
205+
background-color: var(--wp-admin--page--background, #fcf0f1);
205206
}
206207

207208
/* rtl:ignore */
@@ -217,7 +218,6 @@ submit {
217218
direction: ltr;
218219
}
219220

220-
221221
/* localization */
222222
body.rtl,
223223
.rtl textarea,
@@ -243,7 +243,6 @@ body.rtl,
243243
}
244244

245245
@media screen and (max-width: 782px) {
246-
247246
.form-table {
248247
margin-top: 0;
249248
}
@@ -307,21 +306,21 @@ body.language-chooser {
307306
padding: 8px;
308307
width: 100%;
309308
display: block;
310-
border: 1px solid #dcdcde;
311-
background: #fff;
312-
color: #2c3338;
309+
border: 1px solid var(--wp-admin--install--select--border, #dcdcde);
310+
background: var(--wp-admin--surface--background, #fff);
311+
color: var(--wp-admin--input--color, #2c3338);
313312
font-size: 16px;
314313
font-family: Arial, sans-serif;
315314
font-weight: 400;
316315
}
317316

318317
.language-chooser select:focus {
319-
color: #2c3338;
318+
color: var(--wp-admin--input--color, #2c3338);
320319
}
321320

322321
.language-chooser select option:hover,
323322
.language-chooser select option:focus {
324-
color: #0a4b78;
323+
color: var(--wp-admin--install--select--color--focus, #0a4b78);
325324
}
326325

327326
.language-chooser .step {

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,17 @@ body {
130130

131131
--wp-admin--site-icon--background-color: #000;
132132

133+
--wp-admin--install--body--box-shadow: rgba(0, 0, 0, 0.04);
134+
--wp-admin--install--link--color--hover: #135e96;
135+
--wp-admin--install--link--color--focus: #043959;
136+
--wp-admin--install--link--color--focus--box-shadow: #4f94d4;
137+
--wp-admin--install--link--color--focus--box-shadow-alt: rgba(79, 148, 212, 0.8);
138+
--wp-admin--install--heading--border-color: #dcdcde;
139+
--wp-admin--install--heading--color: #646970;
140+
--wp-admin--install--textarea--border: #dcdcde;
141+
--wp-admin--install--select--border: #dcdcde;
142+
--wp-admin--install--select--color--focus: #0a4b78;
143+
133144
--wp-admin--login--link--color--hover: #135e96;
134145
--wp-admin--login--link--color--focus: #043959;
135146
--wp-admin--login--link--box-shadow-from--focus: #4f94d4;

src/wp-includes/script-loader.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1455,7 +1455,7 @@ function wp_default_styles( $styles ) {
14551455
$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' ) );
14561456

14571457
$styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'colors' ) );
1458-
$styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
1458+
$styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'colors' ) );
14591459
$styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" );
14601460
$styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'imgareaselect' ) );
14611461
$styles->add( 'customize-widgets', "/wp-admin/css/customize-widgets$suffix.css", array( 'wp-admin', 'colors' ) );

0 commit comments

Comments
 (0)