Afternoon: Update button colors

[carolinan]

Description
This PR implements the changes to the color-mix CSS used for the button hover colors discussed here:
#492

In my testing, these are the resulting contrast ratios:

Outside section styles, section style 1, 3,
Contrast Ratio: 6.5:1

Section style 2
Contrast Ratio: 7.18:1

Section style 4
Contrast Ratio: 7.96:1

Section style 5
Contrast Ratio: 4.52:1

Screenshots

buttons.mp4

Testing Instructions
Go to Appearance > Editor > Styles.
Activate "Afternoon".

Insert a buttons block:
One button with the filled variation, one with the outline variation. Remember to add the links.

Insert one group for each section style, add a copy of the buttons inside.

Test that the button colors have the expected, and accessible, colors on hover.

[github-actions]

Preview changes

You can preview these changes by following the link below:

• Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

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

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: carolinan <[email protected]>
Co-authored-by: juanfra <[email protected]>

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

[juanfra]

Thanks Carolina. It's looking good.

The only one that I get a warning for is the fill button on Style 5. On hover I'm getting a warning that's 4.48

Screen.Recording.2024-10-11.at.09.54.35.mov

[carolinan]

I don't trust this tool's capability of finding the correct colors but I am not going to object against a suggestion to increase a color contrast.

I have already tried changing from transparent to black, and it did not look good, it turned even more grey or muddy looking than in the video.

[juanfra]

I don't trust this tool's capability of finding the correct colors but I am not going to object against a suggestion to increase a color contrast.

What tool would you recommend me to use for testing?

From what I tested changing this (and the other one in the colors file) to 90% will fix the issue with the tool I tested.

[carolinan]

Yes we can change to 90%.

The accessibility-team links to a list of color contrast checkers, I don't know how much of a recommendation it is over a list of what is available.
https://make.wordpress.org/accessibility/handbook/design/use-of-color/#tools
https://www.webaxe.org/color-contrast-tools/

I like WebAim's even if the picker is a bit "fiddly" because you have to click outside for the color value to update.

[juanfra]

Thank you for sharing. Will take a look at those!

[juanfra]

Thank you 🙌