Can button styles be targeted by background color in theme.json?

I’m working on a new site and have a palette defined for the button block in the settings section of my theme.json.

"core/button": {
                "border": {
                    "radius": false
                },
                "color": {
                    "palette": [
                        {
                            "slug": "dark-green",
                            "color": "#76742D",
                            "name": "Dark Green"
                        },
                        {
                            "slug": "light-green",
                            "color": "#B4B15D",
                            "name": "Light Green"
                        },
                        {
                            "slug": "dark-blue",
                            "color": "#273A4A",
                            "name": "Dark Blue"
                        },
                        {
                            "slug": "gold",
                            "color": "#D9BC56",
                            "name": "Gold"
                        }
                    ]
                }
            }

And later on, in the styles section I’m defining the default styles, which works great.

"button": {
                "typography": {
                    "fontWeight": "700",
                    "fontSize": "16px",
                    "textTransform": "uppercase"
                },
                "color": {
                    "background": "var(--wp--preset--color--dark-green)",
                    "text": "#FFFFFF"
                },
                "border": {
                    "radius": "0",
                    "width": "2px",
                    "color": "var(--wp--preset--color--dark-green)",
                    "style": "solid"
                },
                "spacing": {
                    "padding": ".75rem 2.5rem"
                },
                ":hover": {
                    "color": {
                        "background": "transparent",
                        "text": "var(--wp--preset--color--dark-green)"
                    }
                }
            }

But I don’t see a way in theme.json to control the hover and border colors of the additional color palette options so I end up with something like this, which is not ideal.

I have been adding styles as normal in style.css to fix the borders and hover effects. But I have to add !important to everything to override theme.json-based styles. Is this the correct way to do this? It feels wrong to partially declare styles in one file and override them in another.

The :hover pseudo element exists but only for the default style. It does not seem like an option exists to use it for the defined color palette.

• This topic was modified 1 year, 11 months ago by Jan Dembowski.