Admin reskin: Add fallback values to the CSS custom properties for the media view and button styles

[t-hamano]

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

Use of AI Tools

All code changes were made by Copilot, and I have verified that all changes are correct.

Testing instructions

One way to test this PR is to use Elementor. Elementor uses media modals on screens that are not enqueuing CSS custom properties.

1. Install Elementor
2. Open http://localhost:8889/wp-admin/post-new.php
3. Click the " Edit with Elementor" button (If it's not enabled)
4. Click the Image button inside the left sidebar
5. Click the "Choose Image" button
6. Confirm the button colors

Screenshot

Before	After

[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 wildworks, sabernhardt, shailu25.

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

[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.

[shail-mehta]

The fallback value is currently being applied to the Media View button. ✅

Before	After

[sabernhardt]

I opened Elementor's dialog and added more buttons within the browser to see variations with their hover, active and focus states. The input shows its focus state too.

Markup I used to replace the `.media-toolbar` div

<div class="media-toolbar"><div class="media-toolbar-secondary"></div><div class="media-toolbar-primary search-form"><button type="button" class="button media-button button-primary button-large media-button-select" disabled="disabled">Select</button></div>
<div class="media-toolbar-primary search-form" style="clear: right;"><button type="button" class="button media-button button-primary button-large media-button-select">Primary</button><button type="button" class="button media-button button-primary button-large media-button-select">hover</button><button type="button" class="button media-button button-primary button-large media-button-select">active</button><button type="button" class="button media-button button-primary button-large media-button-select">focus</button></div>
<div class="media-toolbar-primary search-form" style="clear: right;"><button type="button" class="button media-button button-primary button-large media-button-select" disabled="">Primary disabled</button><button type="button" class="button media-button button-primary button-large media-button-select" disabled="">hover</button><button type="button" class="button media-button button-primary button-large media-button-select" disabled="">active</button><button type="button" class="button media-button button-primary button-large media-button-select" disabled="">focus</button></div>
<div class="media-toolbar-primary search-form" style="clear: right;"><button type="button" class="button media-button button-secondary">Secondary</button><button type="button" class="button media-button button-secondary">hover</button><button type="button" class="button media-button button-secondary">active</button><button type="button" class="button media-button button-secondary">focus</button></div>
<div class="media-toolbar-primary search-form" style="clear: right;"><button class="button media-button button-secondary" type="button" disabled="">Secondary disabled</button><button class="button media-button button-secondary" type="button" disabled="">hover</button><button type="button" class="button media-button button-secondary" disabled="">active</button><button class="button media-button button-secondary" type="button" disabled="">focus</button></div><div class="media-toolbar-primary search-form" style="clear: right;"><button type="button" class="button button-link">"button-link"</button><button type="button" class="button button-link">hover</button><button type="button" class="button button-link">active</button><button type="button" class="button button-link">focus</button></div>
<div class="media-toolbar-primary search-form button-group" style="clear: right;"><button type="button" class="button media-button button-secondary">Button group</button><button type="button" class="button media-button button-secondary">hover</button><button type="button" class="button media-button button-secondary">active</button><button type="button" class="button media-button button-secondary">focus</button></div>
<div class="media-toolbar-primary search-form" style="clear: right;"><button type="button" class="button media-button button-secondary active">Secondary active</button><button type="button" class="button media-button button-secondary active">hover</button><button type="button" class="button media-button button-secondary active">active</button><button type="button" class="button media-button button-secondary active">focus</button></div>
<div class="media-toolbar-primary search-form" style="clear: right;"><button type="button" class="button media-button button-primary active">Primary active</button><button type="button" class="button media-button button-primary active">hover</button><button type="button" class="button media-button button-primary active">active</button><button type="button" class="button media-button button-primary active">focus</button></div>
<div class="media-bg-overlay"></div></div>

Chrome 146.0.7680.80
Firefox 148.0.2
Windows 11

[sabernhardt]

I thought the RGB fallback values needed to be in a separate variable, but this works for me in Chrome and Firefox on Windows 11.

While Chrome does not show the fallback values when inspecting the element, it computes the background properly.

(Firefox shows the RGB fallback in the inspector.)