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:
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:
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