Styles: Allow using “refs” in the UI for colors

[annezazu]

This would be a powerful tool to reduce the misuse of named color palettes as semantic tokens and builds on the work previously done to implement the use of refs in theme.json #41696

Pulled from #48443

[annezazu]

I'm marking this as needs development but could be off base here :) Feel free to correct.

[richtabor]

It'd be interesting if the site's styles.color.background and styles.color.text colors were accessible within the color palette automatically.

Then when you apply that color to a block, it's the ref value that is assigned.

[richtabor]

@scruffian Do you know of an effort to have ref values within block attributes, similar to how var:preset|color|secondary works?

[scruffian]

@scruffian Do you know of an effort to have ref values within block attributes, similar to how var:preset|color|secondary works?

No. The problem would be, how would you determine whether the intention is to use a shared variable or a ref? Thinking about this another way, ref's can replace variables, if we think that's a better approach...

[richtabor]

Yes, I was thinking you would choose the background color and it is added as a ref. For example, patterns could use the ref value of the background/text colors — instead of vars.

Are we on the same page, or are you thinking something else?

[scruffian]

Yeah that makes sense, but that would be a big change to the system - would we always use refs going forward? What if two blocks use the same color, which one would we take as the ref?

[richtabor]

I think it'd work in addition to what we have today.

The styles.color.background and styles.color.text color palette could be prepended as color palette options. There's room to improve the UI, maybe consider a separate section for "Site" colors, but that wouldn't be a blocker imo.

And when you select one of those colors, say styles.color.background, the ref value is saved, instead of the preset name; like how dimensions values are:

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"></div>
<!-- /wp:group -->

And if I change the site's background color in Global Styles, I'd expect anywhere the ref background color is used to change as well.

This would eliminate the need for declaring a "base" and "contrast" color (or any other variation of those two) and allow themes (and patterns in the directory) to be more consistent on that front.

[richtabor]

To Illustrate the concept, something like this perhaps:

<!-- wp:group {"backgroundColor":"ref:styles.color.background","layout":{"type":"default"}} -->
<div class="wp-block-group has-ref-background-color has-background"></div>
<!-- /wp:group -->

or ref:styles|color|background to keep it inline with var:preset|spacing|40

[SaxonF]

How would this overlap with the idea of colour sets? Seems they are solving similar issues, except colour sets enforce contrast by packaging colours (e.g. background and text).

[richtabor]

I don't think these relate entirely to color sets, but those could be comprised of ref color values. I.e. one color set would be the styles|color|text and styles|color|background colors, but inverse; probably be a core-provided auto set.