Rich Text + Design Tokens

Visual Editor Help
1

This question is very similar to the one in How to Change Default Styles for Headings in Builder.io?.

Following the advice there (passing a typography object along with my design tokens) breaks all of my design tokens and does not accomplish the goal of styling rich text with my provided brand tokens.

Could you please advise what is the suggested way to style rich text?

2

Hello @findheadway, would you be able to share your SDK and versioning as well as the implementation code?

3

Definitely!

"name": "@builder.io/sdk-react",
"version": "2.0.14",

Implementation:

register("editor.settings", {
  hideAnimateTab: true,
  designTokens: {
    colors,
    // returns base typographic properties like fontFamily, fontSize, etc
    ...typography(),
    // per the linked example, this should apply to inline text/rich text.
    typography: {
      headings: {
        h1: {
          fontSize: "32px",
          color: "red",
        },
        h2: {
          fontSize: "28px",
          color: "green",
        },
      },
    },
  },
});
4

Hello findheadway,

Builder has just made an update to it’s Gen 2 SDK sdk-react. I may suggest updating your SDK.
If the issue is still unresolved, I would suggest switching to the Gen 1 SDK which is the recommended Builder SDK for React application.

Please see below for more info: