Admin Reskin: Change color picker height to 40px

[wildworks]

As part of the Admin reskin effort, the height of input elements, select elements, buttons, etc. has been changed from 30px to 40px. I think the height of the color picker should also be changed to 40px, otherwise the UI will be inconsistent.

In the plugin I am developing, ​RichText Extension, the input element and color picker are displayed side by side, which makes the difference in height even more noticeable.

[wildworks]

RichText Extension plugin setting page

Should we also update .wp-picker-container input[type="text"].wp-color-picker min-height (currently 30px) to keep alignment consistent?

[noruzzaman]

I tested this patch and the 40px height change makes the color picker perfectly consistent with the WordPress admin reskin.

[rahultank]

Reviewed ticket #64761 against trunk source (color-picker.css, March 2026).

Bug confirmed: The admin reskin updated all input elements, select elements, and buttons from 30px to 40px height. The color picker component is still using the old 30px height, creating a visual inconsistency when used alongside other form elements.

Trunk CSS height values found:

• 30px occurrences: 4 (old size)
• 40px occurrences: 3 (new reskin size)

Height-related lines in color-picker.css:

min-height: 30px;
line-height: 2.54545455; /* 28px */
line-height: 2.54545455; /* 28px */
min-height: 30px;
line-height: 2.33333333; /* 28px */
min-height: 30px;

line-height: 1.875; /* 30px */
min-height: 32px;
line-height: 2.14285714; /* 30px */
min-height: 32px;

PR ​https://github.com/WordPress/wordpress-develop/pull/11093 changes:
Removed: - min-height: 30px;
Added: + min-height: 40px;
Fix looks correct — aligns color picker height with other 40px form elements.

This is especially visible when a plugin places a color picker next to a text input (as noted in the ticket description). The fix is straightforward and low-risk.

[tusharaddweb]

I can confirm this bug exists in WordPress 7.0 beta-2.

I tested the behavior with and without the patch, and the patch fixes the issue as described. Without the patch the problem is visible, and with the patch applied the behavior is correct.

Before applying the patch:-
​https://prnt.sc/FKP9VkyFeTys

After applying the patch:-
​https://prnt.sc/5u-eo8XjNu-2

Apologies for raising an alternative suggestion at this stage, but moving from 30px to 40px feels like a fairly significant visual change. What do you think about using 32px instead of 40px? As far as I understand, 32px is an allowed value in the new dashboard design system.

Would using flexbox in .wp-picker-container container be a better decision here rather than trying to adjust their individual heights via line-height, min-height, or paddings?

Hi @hmbashar! Thanks for working on this issue.
There's some feedback on this PR pending on response (or to be addressed).
Do you think you'll be able to work on this and get it ready in time for the final release of WP 7.0 (​in a few weeks)

Well, currently with 7.0 RC2, I don't see any issue with the actual implementation anymore.
Steps to reproduce:

1. Install TT1 theme
2. Go to Customizer > Colors and Dark mode
3. It looks aligned on my side:

[audrasjb]

Well now I'm unsure we should change anything at all. The current implementation looks consistent with the compact styles used by the text input and the button associated with the colorpicker. See the screenshot above shared in the PR.

Any thought on this @wildworks @joedolson or @sabernardt?
Adding close and 2nd-opinion keywords for now.

[wildworks]

Sorry for the confusion.

The fundamental issue this ticket addresses is that the color picker is using a 30px height, which does not align with the new design system. Initially, I proposed the new 40px default size, but I now feel that perhaps a 32px size would be more appropriate.

This ticket could potentially be deferred to 7.1, but I still believe it remains valid.

[audrasjb]

Ah ok, but then we would also update the height of the hex input and the button, right?

[wildworks]

we would also update the height of the hex input and the button, right?

I think so.

Refreshed PR ​#11093 and added feedback changes.

Trac ticket: #64761

## Use of AI Tools

None

[wildworks]

I believe that ​https://github.com/WordPress/wordpress-develop/pull/11385 can be shipped.

[rcorrales]

Tested ​https://github.com/WordPress/wordpress-develop/pull/11385 on trunk, macOS/Chrome.

Confirmed on trunk: color picker elements are still at 30px while the admin reskin updated other inputs/buttons to 40px.

With the patch, all color picker elements (Select Color button, hex input, Default/Clear button) update to 32px consistently. Tested in:

1. Twenty Fifteen Customizer (Colors section, Background Color + Header/Sidebar Text Color + Header/Sidebar Background Color). All three pickers render at 32px, internally aligned.
2. Twenty Twenty-One Customizer (Colors & Dark Mode). Same, Select Color + hex input + Default all at 32px.
3. Custom plugin settings page with wp_color_picker placed side by side with a regular text input. The color picker (32px) is closer to the text input (40px) than before (was 30px vs 40px). The 8px remaining gap is expected per the design discussion.

No regressions or overflow/scrollbar issues, text is vertically centered in buttons, color picker widget renders correctly.

[vgnavada]

Test Report

Description

This report validates the CSS values applied to color picker elements with the patch.

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

Environment

• WordPress: 7.1-alpha-20260330.074838
• PHP: 8.3.30
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 146.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • RichText Extension 3.0.0
  • Test Reports 1.2.1

Actual Results

1. .wp-color-result and .wp-picker-clear resolve to 32px.
2. Base button rule (40px) is overridden.
3. Patch updates color picker elements from 30px to 32px.

Supplemental Artifacts

Screenshot: ​https://prnt.sc/WWztSjRnJFGs

[sajib1223]

Patch Testing Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/11093
Playground: ​https://playground.wordpress.net/?core-pr=11385&wp=trunk

Environment

• OS: Windows 10/11
• Web Server: PHP.wasm
• PHP: 8.3.30
• WordPress: 7.1-alpha-20260328.140010
• Browser: Firefox 149.0
• Theme: Twenty Twenty-One 2.7
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Active Plugins:
  • RichText Extension 3.0.0
  • Test Reports 1.2.1

Steps to Test

1. Install and activate the Twenty Twenty-One theme.
2. Navigate to Appearance > Customize > Colors.
3. Observe the color picker button height and its alignment with the adjacent hex input field.

Expected Results

• ✅ The color picker button height is increased from 30px to 32px, consistent with the new dashboard design system.
• ✅ The color picker button and the hex input field are visually aligned.
• ✅ No layout regression is observed in the Customizer color panel.

Additional Notes

• The PR went through several iterations. The final implementation settles on 32px (not the originally proposed 40px), which aligns with the allowed values in the new WP dashboard design system as noted by @t-hamano.
• Reviewer @audrasjb confirmed correct visual alignment on WP 7.0 RC2 via the same TT1 Customizer > Colors path (March 28, 2026).
• comment:19 by @rcorrales (macOS/Chrome, trunk) independently confirmed the same results across Twenty Fifteen and Twenty Twenty-One Customizer, and a custom plugin settings page using wp_color_picker.

Screenshots

[audrasjb]

Let's roll.

[wildworks]

@audrasjb Does this mean committing ​https://github.com/WordPress/wordpress-develop/pull/11385?

[audrasjb]

@wildworks yes, 11385

[wildworks]

I see, I will commit ​https://github.com/WordPress/wordpress-develop/pull/11385.

[wildworks]

In 62191:

Admin Reskin: Change color picker height to match new design system.

Update min-height from 30px to 32px for the color picker button and related elements to match new design system.

Props audrasjb, hmbashar, huzaifaalmesbah, joedolson, juanmaguitar, mukesh27, noruzzaman, ozgursar, rahultank, rcorrales, sajib1223, tusharaddweb, vgnavada, wildworks.

Fixes #64761.

[wildworks]

Reopening #64761 to request backporting [62191] to 7.0 branch

[shailu25]

@wildworks I think you forgot to add me in the prop list.

[wildworks]

@shailu25 Sorry!

@audrasjb, I believe I was able to update props on a certain website. Do you know about that?

[joedolson]

@wildworks You can update props in the admin at make.wordpress.org/core, using the 'Core Props' tool.

Reviewed and approved for 7.0.

[wildworks]

You can update props in the admin at make.wordpress.org/core, using the 'Core Props' tool.

Thanks you, updated.

[wildworks]

In 62202:

Admin Reskin: Change color picker height to match new design system.

Update min-height from 30px to 32px for the color picker button and related elements to match new design system.

Reviewed by joedolson, wildworks.
Merges [62191] to the 7.0 branch.

Props audrasjb, hmbashar, huzaifaalmesbah, joedolson, juanmaguitar, mukesh27, noruzzaman, ozgursar, rahultank, rcorrales, sajib1223, shailu25, tusharaddweb, vgnavada, wildworks.

Fixes #64761.