You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
The text was updated successfully, but these errors were encountered: