Increase color picker button height

[hmbashar]

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

[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 hmbashar, huzaifaalmesbah, mukesh27, audrasjb, wildworks, joedolson.

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

[huzaifaalmesbah]

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

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

[t-hamano]

Thanks for working on this. Please note that we don't necessarily need to have any specific plugins installed to work on this PR. Just enable TT1 and access the Customizer.

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

I think so. I would like to see a UI like this.

Perhaps it would be good to get feedback from contributors who have been working specifically on this issue.

cc @fabiankaegy @joedolson

[joedolson]

This makes sense to me. I'm generally in favor of making click targets larger.

[t-hamano]

Thanks for the update!

While this is visually correct, the line-height value and its associated comment will need to be adjusted due to the new min-height.

I suggested removing this redundant line-height, but for now, I think it needs to be adjusted to avoid any inconsistencies.

[t-hamano]

I think the two lines here are contradictory. Based on the implementation so far, I think the element height should be determined only by the line-height value. The expected element height here is 38px and the font size is 11px, so the line-height value can be calculated using the following formula:

38 / 11 = 3.454545454545455

.wp-picker-container .wp-color-result.button {
	line-height:  3.45454545; /* 38px */
	padding: 0 6px;
}

[t-hamano]

Suggested change

	line-height: 2.54545455; /* 28px */
	line-height: 3.45454545; /* 38px */

The expected element height here is 38px and the font size is 11px, so the line-height value can be calculated using the following formula:

38 / 11 = 3.454545454545455

[hmbashar]

I worked on it, but @mukeshpanchal27 requested changes. After that, I restored the line and used padding.
check above conversation.

[t-hamano]

Suggested change

	line-height: 3.16666666; /* 38px */

The expected element height here is 38px and the font size is 12px, so the line-height value can be calculated using the following formula:

38 / 12 = 3.166666666666667

[t-hamano]

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.