CSS Fallback for color slugs

In order for the FSE design pack colors to be compatible with Raft (despite the fact that it uses different color slugs), I created some CSS code that acts as a fallback bridge between the color slugs.

Clarifying the problem:

Raft used color slugs like --raft-bg-inv Our other FSE themes use slugs like --ti-bg-inv

In the FSE design Pack, we use --ti color slugs. And when these patterns are inserted or previewed, we want them to display to the corresponding --raft colors.

Proposed Solution

Here's my magic that defines a fallback relationship:

.has-ti-bg-inv-background-color {background-color:var(--wp--preset--color--raft-bg-inv)!important;}
.has-ti-bg-background-color {background-color:var(--wp--preset--color--raft-bg)!important;}
.has-ti-bg-alt-background-color {background-color:var(--wp--preset--color--raft-bg-alt)!important;}
.has-ti-fg-alt-color  {color:var(--wp--preset--color--raft-fg-alt)!important;}
.has-ti-accent-background-color {background-color:var(--wp--preset--color--raft-accent)!important;}
.has-ti-accent-secondary-background-color {background-color:var(--wp--preset--color--raft-accent-secondary)!important;}

I have tested this and it works as expected. I have been using it all this time of building the patterns and all colors are rendered properly

In my instance, I had to use this CSS to 2 different locations in order for it to work at the frontend and at the editor: style.css and editor.css.

Then it works fine.

Any suggestions, insights are welcome. Thanks in advance.

https://www.loom.com/share/26d4c8e84eae4cd886dbf56ab77dee40?sid=a475f575-9384-483c-b8fe-73fa029f9a73

Codeinwp / raft

CSS Fallback for color slugs #119

Clarifying the problem:

Proposed Solution