Skip to content

Commit a475ca6

Browse files
joedolsonjoedolson
committed
Admin: Add CSS fallback values in button and media views.
Since button and media view CSS can sometimes be enqueued by extenders in contexts where either `wp-base-styles` are not present or the `body` wrapper class is omitted, these variables should use fallback values. Reviewed by audrasjb. Props huzaifaalmesbah, wildworks, mukesh27, noruzzaman, joedolson, sabernhardt, audrasjb, shailu25. Fixes #64840. Built from https://develop.svn.wordpress.org/trunk@62154 git-svn-id: http://core.svn.wordpress.org/trunk@61436 1a063a9b-81f0-0310-95a4-ce76da25c4cd
1 parent 3574f1a commit a475ca6

File tree

9 files changed

+69
-69
lines changed

9 files changed

+69
-69
lines changed

‎wp-includes/css/buttons-rtl.css‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -148,8 +148,8 @@ TABLE OF CONTENTS:
148148

149149
.wp-core-ui .button,
150150
.wp-core-ui .button-secondary {
151-
color: var(--wp-admin-theme-color);
152-
border-color: var(--wp-admin-theme-color);
151+
color: var(--wp-admin-theme-color, #3858e9);
152+
border-color: var(--wp-admin-theme-color, #3858e9);
153153
background: transparent;
154154
vertical-align: top;
155155
}
@@ -161,18 +161,18 @@ TABLE OF CONTENTS:
161161
.wp-core-ui .button.hover,
162162
.wp-core-ui .button:hover,
163163
.wp-core-ui .button-secondary:hover {
164-
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
165-
border-color: var(--wp-admin-theme-color-darker-20);
166-
color: var(--wp-admin-theme-color-darker-20);
164+
background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.04);
165+
border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
166+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
167167
}
168168

169169
.wp-core-ui .button.focus,
170170
.wp-core-ui .button:focus,
171171
.wp-core-ui .button-secondary:focus {
172172
background: transparent;
173-
border-color: var(--wp-admin-theme-color);
174-
color: var(--wp-admin-theme-color);
175-
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
173+
border-color: var(--wp-admin-theme-color, #3858e9);
174+
color: var(--wp-admin-theme-color, #3858e9);
175+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
176176
/* Only visible in Windows High Contrast mode */
177177
outline: 1px solid transparent;
178178
/* Reset inherited offset from Gutenberg */
@@ -182,26 +182,26 @@ TABLE OF CONTENTS:
182182
/* :active state */
183183
.wp-core-ui .button:active,
184184
.wp-core-ui .button-secondary:active {
185-
background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
186-
border-color: var(--wp-admin-theme-color-darker-20);
187-
color: var(--wp-admin-theme-color-darker-20);
185+
background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
186+
border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
187+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
188188
box-shadow: none;
189189
}
190190

191191
/* pressed state e.g. a selected setting */
192192
.wp-core-ui .button.active,
193193
.wp-core-ui .button.active:hover {
194-
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
195-
color: var(--wp-admin-theme-color-darker-20);
196-
border-color: var(--wp-admin-theme-color);
194+
background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
195+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
196+
border-color: var(--wp-admin-theme-color, #3858e9);
197197
box-shadow: inset 0 2px 6px -2px var(--wp-admin-theme-color-darker-20);
198198
}
199199

200200
.wp-core-ui .button.active:focus {
201201
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
202-
color: var(--wp-admin-theme-color-darker-20);
203-
border-color: var(--wp-admin-theme-color-darker-20);
204-
box-shadow: inset 0 2px 6px -2px var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
202+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
203+
border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
204+
box-shadow: inset 0 2px 6px -2px var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
205205
}
206206

207207
.wp-core-ui .button[disabled],
@@ -235,7 +235,7 @@ TABLE OF CONTENTS:
235235
cursor: pointer;
236236
text-align: right;
237237
/* Mimics the default link style in common.css */
238-
color: var(--wp-admin-theme-color);
238+
color: var(--wp-admin-theme-color, #3858e9);
239239
text-decoration: underline;
240240
transition-property: border, background, color;
241241
transition-duration: .05s;
@@ -244,12 +244,12 @@ TABLE OF CONTENTS:
244244

245245
.wp-core-ui .button-link:hover,
246246
.wp-core-ui .button-link:active {
247-
color: var(--wp-admin-theme-color-darker-20);
247+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
248248
}
249249

250250
.wp-core-ui .button-link:focus {
251-
color: var(--wp-admin-theme-color);
252-
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
251+
color: var(--wp-admin-theme-color, #3858e9);
252+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
253253
border-radius: 2px;
254254
/* Only visible in Windows High Contrast mode */
255255
outline: 1px solid transparent;
@@ -276,27 +276,27 @@ TABLE OF CONTENTS:
276276
---------------------------------------------------------------------------- */
277277

278278
.wp-core-ui .button-primary {
279-
background: var(--wp-admin-theme-color);
280-
border-color: var(--wp-admin-theme-color);
279+
background: var(--wp-admin-theme-color, #3858e9);
280+
border-color: var(--wp-admin-theme-color, #3858e9);
281281
color: #fff;
282282
text-decoration: none;
283283
text-shadow: none;
284284
}
285285

286286
.wp-core-ui .button-primary.hover,
287287
.wp-core-ui .button-primary:hover {
288-
background: var(--wp-admin-theme-color-darker-10);
289-
border-color: var(--wp-admin-theme-color-darker-10);
288+
background: var(--wp-admin-theme-color-darker-10, #2145e6);
289+
border-color: var(--wp-admin-theme-color-darker-10, #2145e6);
290290
color: #fff;
291291
}
292292

293293
.wp-core-ui .button-primary.focus,
294294
.wp-core-ui .button-primary:focus {
295-
background: var(--wp-admin-theme-color);
296-
border-color: var(--wp-admin-theme-color);
295+
background: var(--wp-admin-theme-color, #3858e9);
296+
border-color: var(--wp-admin-theme-color, #3858e9);
297297
color: #fff;
298298
box-shadow:
299-
0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color),
299+
0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9),
300300
inset 0 0 0 1px #fff;
301301
outline: 1px solid transparent;
302302
}
@@ -305,8 +305,8 @@ TABLE OF CONTENTS:
305305
.wp-core-ui .button-primary.active:hover,
306306
.wp-core-ui .button-primary.active:focus,
307307
.wp-core-ui .button-primary:active {
308-
background: var(--wp-admin-theme-color-darker-20);
309-
border-color: var(--wp-admin-theme-color-darker-20);
308+
background: var(--wp-admin-theme-color-darker-20, #183ad6);
309+
border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
310310
box-shadow: none;
311311
color: #fff;
312312
}

‎wp-includes/css/buttons-rtl.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎wp-includes/css/buttons.css‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,8 @@ TABLE OF CONTENTS:
147147

148148
.wp-core-ui .button,
149149
.wp-core-ui .button-secondary {
150-
color: var(--wp-admin-theme-color);
151-
border-color: var(--wp-admin-theme-color);
150+
color: var(--wp-admin-theme-color, #3858e9);
151+
border-color: var(--wp-admin-theme-color, #3858e9);
152152
background: transparent;
153153
vertical-align: top;
154154
}
@@ -160,18 +160,18 @@ TABLE OF CONTENTS:
160160
.wp-core-ui .button.hover,
161161
.wp-core-ui .button:hover,
162162
.wp-core-ui .button-secondary:hover {
163-
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
164-
border-color: var(--wp-admin-theme-color-darker-20);
165-
color: var(--wp-admin-theme-color-darker-20);
163+
background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.04);
164+
border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
165+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
166166
}
167167

168168
.wp-core-ui .button.focus,
169169
.wp-core-ui .button:focus,
170170
.wp-core-ui .button-secondary:focus {
171171
background: transparent;
172-
border-color: var(--wp-admin-theme-color);
173-
color: var(--wp-admin-theme-color);
174-
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
172+
border-color: var(--wp-admin-theme-color, #3858e9);
173+
color: var(--wp-admin-theme-color, #3858e9);
174+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
175175
/* Only visible in Windows High Contrast mode */
176176
outline: 1px solid transparent;
177177
/* Reset inherited offset from Gutenberg */
@@ -181,26 +181,26 @@ TABLE OF CONTENTS:
181181
/* :active state */
182182
.wp-core-ui .button:active,
183183
.wp-core-ui .button-secondary:active {
184-
background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
185-
border-color: var(--wp-admin-theme-color-darker-20);
186-
color: var(--wp-admin-theme-color-darker-20);
184+
background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
185+
border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
186+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
187187
box-shadow: none;
188188
}
189189

190190
/* pressed state e.g. a selected setting */
191191
.wp-core-ui .button.active,
192192
.wp-core-ui .button.active:hover {
193-
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
194-
color: var(--wp-admin-theme-color-darker-20);
195-
border-color: var(--wp-admin-theme-color);
193+
background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
194+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
195+
border-color: var(--wp-admin-theme-color, #3858e9);
196196
box-shadow: inset 0 2px 6px -2px var(--wp-admin-theme-color-darker-20);
197197
}
198198

199199
.wp-core-ui .button.active:focus {
200200
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
201-
color: var(--wp-admin-theme-color-darker-20);
202-
border-color: var(--wp-admin-theme-color-darker-20);
203-
box-shadow: inset 0 2px 6px -2px var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
201+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
202+
border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
203+
box-shadow: inset 0 2px 6px -2px var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
204204
}
205205

206206
.wp-core-ui .button[disabled],
@@ -234,7 +234,7 @@ TABLE OF CONTENTS:
234234
cursor: pointer;
235235
text-align: left;
236236
/* Mimics the default link style in common.css */
237-
color: var(--wp-admin-theme-color);
237+
color: var(--wp-admin-theme-color, #3858e9);
238238
text-decoration: underline;
239239
transition-property: border, background, color;
240240
transition-duration: .05s;
@@ -243,12 +243,12 @@ TABLE OF CONTENTS:
243243

244244
.wp-core-ui .button-link:hover,
245245
.wp-core-ui .button-link:active {
246-
color: var(--wp-admin-theme-color-darker-20);
246+
color: var(--wp-admin-theme-color-darker-20, #183ad6);
247247
}
248248

249249
.wp-core-ui .button-link:focus {
250-
color: var(--wp-admin-theme-color);
251-
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
250+
color: var(--wp-admin-theme-color, #3858e9);
251+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
252252
border-radius: 2px;
253253
/* Only visible in Windows High Contrast mode */
254254
outline: 1px solid transparent;
@@ -275,27 +275,27 @@ TABLE OF CONTENTS:
275275
---------------------------------------------------------------------------- */
276276

277277
.wp-core-ui .button-primary {
278-
background: var(--wp-admin-theme-color);
279-
border-color: var(--wp-admin-theme-color);
278+
background: var(--wp-admin-theme-color, #3858e9);
279+
border-color: var(--wp-admin-theme-color, #3858e9);
280280
color: #fff;
281281
text-decoration: none;
282282
text-shadow: none;
283283
}
284284

285285
.wp-core-ui .button-primary.hover,
286286
.wp-core-ui .button-primary:hover {
287-
background: var(--wp-admin-theme-color-darker-10);
288-
border-color: var(--wp-admin-theme-color-darker-10);
287+
background: var(--wp-admin-theme-color-darker-10, #2145e6);
288+
border-color: var(--wp-admin-theme-color-darker-10, #2145e6);
289289
color: #fff;
290290
}
291291

292292
.wp-core-ui .button-primary.focus,
293293
.wp-core-ui .button-primary:focus {
294-
background: var(--wp-admin-theme-color);
295-
border-color: var(--wp-admin-theme-color);
294+
background: var(--wp-admin-theme-color, #3858e9);
295+
border-color: var(--wp-admin-theme-color, #3858e9);
296296
color: #fff;
297297
box-shadow:
298-
0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color),
298+
0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9),
299299
inset 0 0 0 1px #fff;
300300
outline: 1px solid transparent;
301301
}
@@ -304,8 +304,8 @@ TABLE OF CONTENTS:
304304
.wp-core-ui .button-primary.active:hover,
305305
.wp-core-ui .button-primary.active:focus,
306306
.wp-core-ui .button-primary:active {
307-
background: var(--wp-admin-theme-color-darker-20);
308-
border-color: var(--wp-admin-theme-color-darker-20);
307+
background: var(--wp-admin-theme-color-darker-20, #183ad6);
308+
border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
309309
box-shadow: none;
310310
color: #fff;
311311
}

‎wp-includes/css/buttons.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎wp-includes/css/media-views-rtl.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,9 +145,9 @@
145145
.media-frame input[type="url"]:focus,
146146
.media-frame textarea:focus,
147147
.media-frame select:focus {
148-
border-color: var(--wp-admin-theme-color);
148+
border-color: var(--wp-admin-theme-color, #3858e9);
149149
/* Expand border by 0.5px for total 1.5px effect */
150-
box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
150+
box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
151151
outline: 2px solid transparent;
152152
}
153153

‎wp-includes/css/media-views-rtl.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎wp-includes/css/media-views.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,9 +144,9 @@
144144
.media-frame input[type="url"]:focus,
145145
.media-frame textarea:focus,
146146
.media-frame select:focus {
147-
border-color: var(--wp-admin-theme-color);
147+
border-color: var(--wp-admin-theme-color, #3858e9);
148148
/* Expand border by 0.5px for total 1.5px effect */
149-
box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
149+
box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
150150
outline: 2px solid transparent;
151151
}
152152

0 commit comments

Comments
 (0)