What are you trying to accomplish
I have registered design tokens for colors. These colors show up when editing through the in-line text editor or when editor color styles, but they do not show up when editing with the side panel rich text editor.
I know at first I had found out how to edit the available swatches but I can’t seem to find where. I honestly just want them to be the same as my color design tokens… it makes no sense to have separate colors just for this.
Screenshots or video link
This is the side panel rich text editor, where I believe I remember having manually set the swatches to the same values as my design tokens (which is far from ideal).
This is color select in the side panel, which shows my design tokens (has the new one “Highlight” which is missing from the other screenshot)
If the side panel rich text editor isn’t automatically picking up the design tokens, ensure that the registration covers all parts of the editor’s configuration. This involves setting styleStrictMode to true which ensures only these tokens are used across all editing modes.
You might also want to refer to the documentation on Customizing Builder and the specific Component API Reference to ensure the settings propagate correctly in all use cases.
The design tokens are picked up everywhere else, except there. It was always the case, but I remember at some point I had the ability to manually update the color swatches in this specific editor (which is better than nothing). I can no longer find this setting.
Hello @manish-sharma, thank you but I believe when I first edited the swatches I toggled the option “Restrict color picker to only these options” as I do not want our content editors to use custom values.
Therefore I do not have the “Custom color” option anymore which seems to be what you are using to access the swatch editor…
I understand the issue you’re facing. I found a solution for editing the color swatches when the “Restrict color picker to only these options” setting is enabled. Please take a moment to review the Loom video below:
If this doesn’t resolve the problem, please let us know, and we’ll be happy to assist you further.
Hmm, I see. The issue is since (I believe) I have set strict mode to true for my design tokens, I don’t have the option in any color picker in the style tab to add custom colors.
I can probably workaround this by temporarily removing the strict mode, but it’s not very convenient…
Is there a feature request to sync the color swatches with the design tokens I could make perhaps?