Ensure Checkout block supports the theme-level global styles for Colors » Links

[tarunvijwani]

Currently, the Checkout block partially supports the default theme-level global styles for Colors » Links. This issue aims to ensure that the Checkout block fully supports the default theme-level global styles.

Steps to reproduce

1. Go to WP Admin » Apperance » Editor.
2. Open the Styles sidebar.
3. Open the Colors » Links settings.
4. Adjust the color settings for Default and Hover.
5. See that the Default color is not reflected.

Screenshots

Checkout:

[nielslange]

While looking into this issue, I noticed that the problem only appears when using Twenty Twenty-Three, but not when using Twenty Twenty-Two, Adventurer, Beaumont, Björk or Tove.

While investigating Twenty Twenty-Three, I noticed that the theme.json of Twenty Twenty-Three contains the following definition:

"core/post-content": {
  "elements": {
	  "link": {
      "color": {
		  "text": "var(--wp--preset--color--secondary)"
		}
	  }
  }
},

This definition results in the following CSS code:

.wp-block-post-content a:where(:not(.wp-element-button)) {

  color: var(--wp--preset--color--secondary);
}

While the Global Styles CSS looks like this:

a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--vivid-red);
}

Due to Specificity, the CSS code of the Twenty Twenty-Three theme overwrites the Global Styles CSS code. Given that this problem not only affects the link colors within the Checkout block, but all link colors, this problem should be addressed within the Twenty Twenty-Three theme itself. Therefore, I created https://core.trac.wordpress.org/ticket/57968.