From 079c65056e3e18ba4f94c438b97453f5e88adebc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Sun, 15 Feb 2026 09:47:55 +0100 Subject: [PATCH] Admin: Add CSS variable fallbacks to stylesheets. Add fallback values for CSS custom properties so buttons render correctly when wp-base-styles is not loaded, such as on the upgrade.php screen. --- src/wp-admin/css/common.css | 8 ++--- src/wp-admin/css/forms.css | 26 +++++++-------- src/wp-includes/css/buttons.css | 58 ++++++++++++++++----------------- 3 files changed, 46 insertions(+), 46 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 203e6d0e5cf0f..93925e45fb1ea 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1470,20 +1470,20 @@ div.error p, .notice a, .error a, .updated a { - color: var(--wp-admin-theme-color-darker-10); + color: var(--wp-admin-theme-color-darker-10, #2145e6); text-decoration: underline; } .notice a:hover, .error a:hover, .updated a:hover { - color: var(--wp-admin-theme-color-darker-20); + color: var(--wp-admin-theme-color-darker-20, #183ad6); } .notice a:focus, .error a:focus, .updated a:focus { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); outline: 2px solid transparent; border-radius: 2px; } @@ -1532,7 +1532,7 @@ div.error p, } .notice-dismiss:focus { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 106eab1db335f..cb1772f0e3dd3 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -101,8 +101,8 @@ input[type="url"]:focus, input[type="week"]:focus, select:focus, textarea:focus { - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, #3858e9); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -111,7 +111,7 @@ textarea:focus { input[type="checkbox"]:focus, input[type="radio"]:focus { border-color: #1e1e1e; - box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color, #3858e9); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -195,13 +195,13 @@ input[type="checkbox"]:checked::before { } input[type="checkbox"]:checked { - background: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); + background: var(--wp-admin-theme-color, #3858e9); + border-color: var(--wp-admin-theme-color, #3858e9); } input[type="radio"]:checked { - background: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); + background: var(--wp-admin-theme-color, #3858e9); + border-color: var(--wp-admin-theme-color, #3858e9); } input[type="radio"]:checked::before { @@ -359,9 +359,9 @@ input[type="radio"].disabled:checked:before { } .wp-core-ui select:focus { - border-color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, #3858e9); color: #1e1e1e; - box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); } .wp-core-ui select:active { @@ -633,9 +633,9 @@ fieldset label, .mailserver-pass-wrap .button.wp-hide-pw:focus { background: transparent; - border-color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, #3858e9); border-radius: 2px; - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -713,7 +713,7 @@ fieldset label, #pass1:focus, #pass1-text:focus { - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -866,7 +866,7 @@ ul#add-to-blog-users { /* Colors for the tags autocomplete. */ .wp-tags-autocomplete .ui-state-focus, .wp-tags-autocomplete [aria-selected="true"] { - background-color: var(--wp-admin-theme-color); + background-color: var(--wp-admin-theme-color, #3858e9); color: #fff; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 2dde624ce9c88..6c6b07d7f9341 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -147,8 +147,8 @@ TABLE OF CONTENTS: .wp-core-ui .button, .wp-core-ui .button-secondary { - color: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, #3858e9); + border-color: var(--wp-admin-theme-color, #3858e9); background: transparent; vertical-align: top; } @@ -160,18 +160,18 @@ TABLE OF CONTENTS: .wp-core-ui .button.hover, .wp-core-ui .button:hover, .wp-core-ui .button-secondary:hover { - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); - border-color: var(--wp-admin-theme-color-darker-20); - color: var(--wp-admin-theme-color-darker-20); + background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.04); + border-color: var(--wp-admin-theme-color-darker-20, #183ad6); + color: var(--wp-admin-theme-color-darker-20, #183ad6); } .wp-core-ui .button.focus, .wp-core-ui .button:focus, .wp-core-ui .button-secondary:focus { background: transparent; - border-color: var(--wp-admin-theme-color); - color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, #3858e9); + color: var(--wp-admin-theme-color, #3858e9); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; /* Reset inherited offset from Gutenberg */ @@ -181,24 +181,24 @@ TABLE OF CONTENTS: /* :active state */ .wp-core-ui .button:active, .wp-core-ui .button-secondary:active { - background: rgba(var(--wp-admin-theme-color--rgb), 0.08); - border-color: var(--wp-admin-theme-color-darker-20); - color: var(--wp-admin-theme-color-darker-20); + background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08); + border-color: var(--wp-admin-theme-color-darker-20, #183ad6); + color: var(--wp-admin-theme-color-darker-20, #183ad6); box-shadow: none; } /* pressed state e.g. a selected setting */ .wp-core-ui .button.active, .wp-core-ui .button.active:hover { - background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04); - color: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); + background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.04); + color: var(--wp-admin-theme-color, #3858e9); + border-color: var(--wp-admin-theme-color, #3858e9); box-shadow: none; } .wp-core-ui .button.active:focus { - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color, #3858e9); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); } .wp-core-ui .button[disabled], @@ -232,7 +232,7 @@ TABLE OF CONTENTS: cursor: pointer; text-align: left; /* Mimics the default link style in common.css */ - color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, #3858e9); text-decoration: underline; transition-property: border, background, color; transition-duration: .05s; @@ -241,12 +241,12 @@ TABLE OF CONTENTS: .wp-core-ui .button-link:hover, .wp-core-ui .button-link:active { - color: var(--wp-admin-theme-color-darker-20); + color: var(--wp-admin-theme-color-darker-20, #183ad6); } .wp-core-ui .button-link:focus { - color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color, #3858e9); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); border-radius: 2px; /* Only visible in Windows High Contrast mode */ outline: 1px solid transparent; @@ -273,8 +273,8 @@ TABLE OF CONTENTS: ---------------------------------------------------------------------------- */ .wp-core-ui .button-primary { - background: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); + background: var(--wp-admin-theme-color, #3858e9); + border-color: var(--wp-admin-theme-color, #3858e9); color: #fff; text-decoration: none; text-shadow: none; @@ -282,18 +282,18 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:hover { - background: var(--wp-admin-theme-color-darker-10); - border-color: var(--wp-admin-theme-color-darker-10); + background: var(--wp-admin-theme-color-darker-10, #2145e6); + border-color: var(--wp-admin-theme-color-darker-10, #2145e6); color: #fff; } .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus { - background: var(--wp-admin-theme-color); - border-color: var(--wp-admin-theme-color); + background: var(--wp-admin-theme-color, #3858e9); + border-color: var(--wp-admin-theme-color, #3858e9); color: #fff; box-shadow: - 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), + 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9), inset 0 0 0 1px #fff; outline: 1px solid transparent; } @@ -302,8 +302,8 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary:active { - background: var(--wp-admin-theme-color-darker-20); - border-color: var(--wp-admin-theme-color-darker-20); + background: var(--wp-admin-theme-color-darker-20, #183ad6); + border-color: var(--wp-admin-theme-color-darker-20, #183ad6); box-shadow: none; color: #fff; }