Skip to content

Commit af5abf4

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. git-svn-id: https://develop.svn.wordpress.org/trunk@62154 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 08613b8 commit af5abf4

2 files changed

Lines changed: 32 additions & 32 deletions

File tree

‎src/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
}

‎src/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)