Administration: Replace hardcoded 0.5px focus styles with the standard focus-width variable

[i-am-chitti]

Ticket

https://core.trac.wordpress.org/ticket/65645

What & why

Since the 7.0 admin refresh, a few focus styles regressed to a hardcoded box-shadow: 0 0 0 0.5px. 0.5px is a sub-pixel value — the browser rounds or anti-aliases it, so the focus indicator renders thinner and less reliably than intended.

This PR replaces those values with the --wp-admin-border-width-focus custom property (fallback 1.5px), the pattern already used across the admin styles. It resolves to:

• 2px on standard-density displays, and
• 1.5px on displays with a device pixel ratio ≥ 2 (@media (min-resolution: 192dpi)),

so the ring always maps to whole physical pixels and avoids sub-pixel rounding.

Changes

• wp-admin/css/forms.css — #pass1/#pass1-text and .mailserver-pass-wrap .button.wp-hide-pw: 0.5px → var(--wp-admin-border-width-focus, 1.5px).
• wp-includes/css/media-views.css — .media-frame inputs / select / textarea: 0.5px → var(--wp-admin-border-width-focus, 1.5px).
• wp-admin/css/edit.css — div.tabs-panel-active:focus: add border-color: var(--wp-admin-theme-color) so the 1px border and the box-shadow form a single uniform ring (a consistency fix; not a thin-value change — this selector already used the variable).

Only the authored LTR source files are committed; -rtl.css/.min.css are build artifacts regenerated via grunt rtl cssmin.

Why the password case was hard to spot

The #pass1 and .wp-hide-pw selectors are also defined — correctly — in the admin color scheme (colors/_admin.scss → colors/*/colors.css), which loads after forms.css on admin pages and masks the thin rule there. So the password regression is most visible on the Reset Password screen (wp-login.php), which loads no color scheme — where it was originally reported. The .media-frame and .tabs-panel cases have no such duplicate, so they are visible directly on their admin screens.

Testing instructions

1. Reset Password screen (wp-login.php?action=rp&...): focus New password. Computed box-shadow should be ... var(--wp-admin-border-width-focus, 1.5px) ... (→ 2px, or 1.5px on HiDPI), not ... 0.5px ....
2. Media Library / Add Media modal: focus the search field, the filter selects, and the Alt Text field — all should show the same var(--wp-admin-border-width-focus) ring (2px, 1.5px on HiDPI).
3. Appearance → Menus: Tab into the "Most Recent" pages panel and compare its focus ring to the Menu Name input — they should now read as the same thickness (no gray 1px separator between content and the blue ring).
4. Best verified on a display with a device pixel ratio of 2.

Out of scope (raising as questions on the ticket)

These consistency items from the ticket need a design decision rather than a value swap, so they are intentionally left out of this PR:

• Attachment thumbnail focus differs between the grid Media Library (media.css → .media-frame.mode-grid .attachment:focus, outset ring) and the editor's select-media modal (media-views.css → .wp-core-ui .attachment:focus, inset ring).
• Borderless focusable elements (thumbnails, view-switch links, menu items) get a thinner ring than bordered inputs, because inputs add a same-color 1px border on top of the shadow.
• List/grid view-switch links have no focus ring at all on focus (only an icon color change).

Screenshots

Before -

Now -

Before -

Now -

Before -

After -

Use of AI

Claude Code Opus 4.8

Assisted with investigating the conflicting focus rules and drafting PR description; all changes were manually reviewed and tested before committing.

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

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.