Admin: Add CSS variable fallbacks to stylesheets.

[fabiankaegy]

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.

Trac ticket: https://core.trac.wordpress.org/ticket/64640

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props fabiankaegy, peterwilsoncc, wildworks.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Copilot]

Pull request overview

Adds fallback values for admin CSS custom properties so key UI elements (buttons, form focus states, notice links) render with appropriate colors even when wp-base-styles is not enqueued (e.g., upgrade.php).

Changes:

• Add fallback hex values for --wp-admin-theme-color and its darker variants in button styles.
• Add fallback values for theme color usage in form focus/checked states.
• Add fallback values for notice link colors and focus rings in common admin UI styles.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/wp-includes/css/buttons.css	Adds fallback values for button colors, hover/active states, and focus rings when admin CSS vars are missing.
src/wp-admin/css/forms.css	Adds fallbacks for theme-colored focus outlines and checked control states.
src/wp-admin/css/common.css	Adds fallbacks for notice link colors and focus box-shadow theme variables.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[peterwilsoncc]

I think this is a good approach but I'm seeing the issue with invisible checkmarks in checkboxes remain with the PR applied.

Test Report

Description

This report validates the patch only partially fixes the problem

Patch tested: https://github.com/WordPress/wordpress-develop/pull/10934/changes

While the buttons are displaying as expected, the remember me checkbox on the login screen fails to indicate that the button is checked.

Environment

• WordPress: 7.0-alpha-61215-src
• PHP: 8.5.2
• Server: nginx/1.24.0
• Database: mysqli (Server: 8.0.44-0ubuntu0.24.04.2 / Client: mysqlnd 8.5.2)
• Browser: Firefox 147.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins:
  • cpt-test.php
  • _admin_bar_show_cache.php
  • _qm-mappings.php
• Plugins:
  • Query Monitor 3.20.2
  • Test Reports 1.2.1

Actual Results

1. ✅ Button issue resolved with patch
2. ❌ Remember me button checkbox fails to check

Additional Notes

Tested screens:

• database update screen
• login screen
• installation web gui

Supplemental Artifacts

[t-hamano]

There is also a way to output fallback default CSS variables as shown below, but what do you think?

First, add the default CSS variables to the build styles in the @wordpress/base-styles package by making the following changes in the Gutenberg Github repo:

diff --git a/packages/base-styles/src/admin-schemes.scss b/packages/base-styles/src/admin-schemes.scss
index 9ae678fd7bf..3e9c1bf2778 100644
--- a/packages/base-styles/src/admin-schemes.scss
+++ b/packages/base-styles/src/admin-schemes.scss
@@ -1,3 +1,4 @@
 @use "mixins" as *;
+@use "default-custom-properties.scss" as *;
 
 @include wordpress-admin-schemes();

Next, in WP core, add wp-base-styles as a dependency to the login and error pages, and also fix the checkbox on the login screen.

diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
index 97c3f7e07a..6f90693447 100644
--- a/src/wp-admin/css/login.css
+++ b/src/wp-admin/css/login.css
@@ -358,12 +358,6 @@ p {
        padding-right: 2.5rem;
 }
 
-.login form .input,
-.login input[type="text"],
-.login form input[type="checkbox"] {
-       background: #fff;
-}
-
 .js.login-action-resetpass input[type="text"],
 .js.login-action-resetpass input[type="password"],
 .js.login-action-rp input[type="text"],
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index 4384c7c10e..1b9a9703ff 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -1633,8 +1633,8 @@ 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', 'wp-base-styles' ) );
 
-       $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
-       $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
+       $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles' ) );
+       $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles' ) );
        $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' ) );

[peterwilsoncc]

@t-hamano That was similar to the approach I took before seeing this PR: I was looking at changing the selector in this block of code to body.wp-core-ui, body.admin-color-modern and moving it to the top of the mixin to allow for body.admin-color-light to still work.

https://github.com/WordPress/gutenberg/blob/e755db0fb38e3d349cdd05a1c37661183e19ba72/packages/base-styles/_mixins.scss#L524-L526

I'm happy with either approach.

[peterwilsoncc]

I've attempted the approach suggested by @t-hamano in #10948 -- a subjective opinion of the benefits is included in the PR description.

[t-hamano]

I like the approach taken in #10948. It also doesn't require updating the base-styles package. It might be better to close this PR and move forward with #10948.

[fabiankaegy]

Closing in favor of #10948