Administration: Color Schemes are not properly applied on individual attachment within media views

[yogeshbhutkar]

In the Media Library dialog, where users select from listed attachments, individual attachments do not fully reflect the user's selected color scheme. This is often due to CSS specificity issues, that is, styles in media-views.css have higher specificity and override the selected color scheme styles. Ideally, the specificity of styles within media-views.css should match that of the color scheme styles to allow proper theming overrides.

Ref:
​https://github.com/WordPress/wordpress-develop/blob/20e4872868780fd9246d8a7ec5ae3072b69483ea/src/wp-includes/css/media-views.css#L1128

​https://github.com/WordPress/wordpress-develop/blob/20e4872868780fd9246d8a7ec5ae3072b69483ea/src/wp-admin/css/colors/_admin.scss#L572

In the snippets above, notice that the .wp-core-ui is omitted from _admin.scss, which leads to lower CSS specificity, and the color scheme styles do not get properly applied. Also, notice the extra theme-related styles (example: for the :focus pseudo-selector) which are also omitted altogether from _admin.scss.

This bug is quite noticeable for users using administration color schemes other than the default within the Gutenberg Editor.

To reproduce, perform the following steps:

1. Set a different administration color scheme (preferably Midnight).
2. Create a new post and insert a core/file block.
3. Click on Media Library and click on a particular attachment.
4. Notice that the attachment selection styles do not comply with the selected administration color scheme.

[yogeshbhutkar]

Notice the color scheme is applied everywhere except the individual attachment selection.

### Description

This PR ensures that the selected admin color scheme is correctly applied to individual attachments in the Media Library. Previously, due to CSS specificity issues, custom color schemes were overridden, leading to inconsistent styling.

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

### Screenshots

Before	After

[hbhalodia]

Hi @yogeshbhutkar, In addition to this, I would also like to update the select dropdown and input text (or any other input text) to be use the same border color on focus that is being set as user preference.

This is because, when we change the user settings to use another color, the gutenberg components respects that color for example, on focus input border color is same as user preference (see the screenshot), but on the media select popup, if you focuses on search media or filter it via date, when focused, it uses the default color being set here - ​https://github.com/WordPress/wordpress-develop/blob/eeb8fbf81bfc3fe83efd9bc327ac5015211b76b7/src/wp-includes/css/media-views.css#L128-L139, instead it should use the color set as a user preference.

We need to change the specificity as you correctly updated for the media selection checkbox and border for that, we need to accomodate for the same.

Let me know if that should be the case and should we update that?

Edit: I do check the posts/page/media screen, it adds the correct border color on focus (that is user preference color), hence we should definately update the media popup box to use the user preference color, instead of default one.

Thank You,

[hbhalodia]

Screenshot 1

[hbhalodia]

Screenshot 2

[hbhalodia]

It should be using the orange color border to respect user preference

[yogeshbhutkar]

Replying to hbhalodia:

In addition to this, I would also like to update the select dropdown and input text (or any other input text) to be use the same border color on focus that is being set as user preference.

I agree with this change and the reasoning behind it. I've updated my PR accordingly to reflect this adjustment.

[r1k0]

Combined Bug Reproduction & Patch Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8943

Steps to Reproduce

1. Before anything you need a few images in the media library.
2. Head over to Users > Profile, pick one choice in Administration Color Scheme apart from default.
3. Go to Posts > Add post, add the image block, and select the media library option.
4. Click any on any of the images or click the search media input field and observe the border colors.

Expected Results

• In the media pop up image and search media input field border colors should respect the set color scheme by the user.

Supplemental Artifacts

Before Patch:

Environment

• WordPress: 7.0-alpha-61215-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Firefox 147.0
• OS: Ubuntu
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Actual Results

1. ❌ Issue doesn't get resolved with patch.
2. Border colors in the media library for the input field and image don't respect user's color scheme.

Supplemental Artifacts

After Patch: