Incorrect color for interactive elements with Gutenberg 15.8

[adamwoodnz]

--wp-admin-theme-color seems to have changed to blueberry, and all the elements using it now don't match the rest of the UI

[adamwoodnz]

It seems this might be related to style loading order. Prod styles are inline, whereas local is not and the plugin styles are loading before Gutenberg (even though wp-components is listed as a dependency), so that might be the cause. Need to check sandbox with Gutenberg 5.8

[adamwoodnz]

This PR looks to be the cause

[StevenDufresne]

@adamwoodnz What needs to be done here?

[adamwoodnz]

@adamwoodnz What needs to be done here?

I'm undecided on the way forward. It only seems to affect local dev, where the wp-component styles load after the block styles, even though they are supposed to be a dependency. This doesn't happen in production (not using 15.8 yet) or sandbox. That seems like it might be a Gutenberg bug, or a bug with our setup, but I haven't found an existing Gutenberg issue.

As such the recommended fix in this PR doesn't work, as the var still gets overridden.

Only the @wordpress/components has had this change to the --wp-admin-theme-color var committed so far, but I imagine others might follow, so the problem might become more widespread.

So we could ignore it locally, but it would affect any styling work we're doing.

Another option which I tried successfully was overriding the var but scoped to only our components, so that we don't affect the global header or footer, for example. Something like:

.wp-block-wporg-two-factor-settings {
	--wp-admin-theme-color: #007cba;
}

Seems a reasonable workaround, thoughts?