Image editor: scale and crop input size mismatch with button and info icon not using new color

[huzaifaalmesbah]

In the Image Editor (Scale and Crop sections), the UI appears inconsistent. Input fields are not using compact styles, button size does not align with inputs, and the info icon uses old color.

Related discussion:
#64759 comment:9
​PR #11091 comment

[ozgursar]

input fields are set to min-height: 40px in /wp-admin/css/forms.css?ver=7.0-beta6-62085-src. Reducing them to 32px might solve the size mismatch.

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"] {
	padding: 0 12px;
	/* inherits font size 14px */
	line-height: 2.71428571; /* 38px for 40px min-height */
	min-height: 40px;
}

[huzaifaalmesbah]

Expected compact styles Inputs:

min-height: 32px;
line-height: 2.14285714;
padding: 0 8px;

And the info icon should use:

var(--wp-admin-theme-color, #3858e9);

[wildworks]

input fields are set to min-height: 40px in /wp-admin/css/forms.css?ver=7.0-beta6-62085-src. Reducing them to 32px might solve the size mismatch.

Please note that the 40px height is intentional and cannot be changed to a default size of 32px. I think we should apply new 40px default size for buttons as well.

[jamesbregenzer]

Tested on current trunk (7.1-alpha-62161-src) in Chrome on macOS.

I tested the image editing screen by uploading an image, opening the Scale Image and Crop Image controls, and comparing the layout against the screenshots provided in this ticket.

I was unable to reproduce the issue described. The Scale Image and Crop Image controls appear properly aligned, inputs use consistent sizing, and the info icons appear styled correctly.

It is possible this issue has already been resolved by subsequent admin CSS changes.

[wildworks]

This ticket partially overlaps with #65428. The sizing issues can likely be addressed in #65428. This ticket can focus solely on fixing the old color of the info icon.

The help icon color in the image editor was hardcoded with classic colors. By replacing this with a CSS variable, it will default to modern colors. Furthermore, the color will appropriately change according to the user's color scheme.

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

## Screenshots

Note that the button is intentionally focused to visually display the focus outline.

Header	Header
Default
Fresh
Light
Blue
Coffee
Ectoplasm
Midnight
Ocean
Sunlinse

## Use of AI Tools

N/A

[wildworks]

In 62481:

Media: Make image editor help icon scheme-aware.

The image editor help toggle icon used a hardcoded classic blue color. Replace it with a CSS custom property so the icon follows the user's admin color scheme.

Props dervishov, huzaifaalmesbah, jamesbregenzer, mukesh27, ozgursar, wildworks.
Fixes #64937.

[wildworks]

Reopening #64937 to request backporting [62481] to 7.0.1.

[mirmpro]

Tested the backport and everything is working perfectly.

The image editor help icon color changes dynamically as expected when switching through different admin color schemes in the user profile. The CSS custom property implementation successfully adapts the UI without any hardcoded color conflicts.

The fix is solid and ready for the 7.0.1 release.

[masteradhoc]

@cbravobernal Could you take care of the backporting for the commits Aki mentioned?

[jorbin]

[62481] looks good for backport to 7.0 branch.

[wildworks]

In 62585:

Media: Make image editor help icon scheme-aware.

The image editor help toggle icon used a hardcoded classic blue color. Replace it with a CSS custom property so the icon follows the user's admin color scheme.

Reviewed by jorbin.
Merges [62481] to the 7.0 branch.

Props dervishov, huzaifaalmesbah, jamesbregenzer, mukesh27, ozgursar, wildworks.
Fixes #64937.