Livro: button color impossible to override

[markhowellsmead]

Steps to replicate

• Use the color palette settings in FSE to change the default text color of all button blocks.
• The CSS is applied and the button looks correct in the editor and in the customizer preview. But the text remains black on the frontend of the website.
• Overriding the color on each individual block works correctly.

I suspect that a CSS rule elsewhere in the cascade is overriding the color setting. I couldn't find out where through the Chrome dev console. Deactivating every other CSS rule in the dev console manually (unchecking) didn't make the color work correctly.

Result

The following CSS is applied. (In the example, the color white has been selected in the styles » color settings for all button blocks.) Although the browser dev console indicates that color: var(--wp--preset--color--white); is correctly applied, this is not the color shown.

.wp-block-button__link {
    background-color: var(--wp--preset--color--secondary);
    border-radius: 0;
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--small);
    padding: 1.25em 1.15em 1.15em 1.15em;
    text-transform: uppercase;
}

Expected

The color should respect the setting from the styles » color editor.

[MaggieCabrera]

There's no CSS for the button block besides for a hover effect on Livro, so I suspect that this would be a Gutenberg issue instead https://github.com/Automattic/themes/blob/trunk/livro/style.css

[markhowellsmead]

Thanks for the feedback. The issue is with the use of color: initial, in particular on the :visited state. This makes the text black whenever the button appears in any other state apart from unvisited. I believe that this is an error: if a specific color has been selected, then this should be respected across all states and overrule the default value in the theme.

[MaggieCabrera]

This should be fixed for Remote, Stewart, Livro and Archeo. I believe they all share the same CSS.

[mikachan]

It looks like it's only Livro that overrides the button link color with initial, so I don't think we need to make the same changes to Archeo, Remote and Stewart. We do style the button states in these themes, and we're more opinionated about the colors that are used in each state. For example we usually force at least a background-color using a preset like var(--wp--preset--color--primary). Maybe we could add similar styles to Livro? But this doesn't fix the issue with not being able to override the colors.

I think the bigger problem here is that Gutenberg sets a default color on button links to white, including the hover and visited states. Perhaps we should change the default button link color in Gutenberg from white if a user has selected a custom color. I imagine this is why Livro is setting the color back to initial, to override the Gutenberg default.

Another good solution for this is adding block state (visited, hover etc) controls to Gutenberg (WordPress/gutenberg#27075).

[mikachan]

Here's a related GB issue for styling the button states instead of always falling back to white: WordPress/gutenberg#34448

[KirkwallDay]

[] - 3403165-hc another instance here. I fixed it with the following code:

.wp-block-buttons a:hover, #subscribe-submit button:hover {
    color:black;
}

[happychait]

41186975-hc

Gave custom CSS workaround.