[Design Tokens] Text Styles?

[ricky-resil]

There’s another post saying the typography.headings property can be used to modify the text styles in the editor using the design tokens. However, when I try this the entire typography section disappears from the Builder UI without any errors.

export const designTokens = {
  colors: [
    { name: 'PrimaryText', value: '#333333' },
    { name: 'SecondaryText', value: '#666666' },
  ],
  typography: {
    headings: {
      h1: {
        fontSize: '32px',
        color: 'var(--colors-primaryText)',
      },
      h2: {
        fontSize: '28px',
        color: 'var(--colors-secondaryText)',
      },
    },
  },
};

How to Change Default Styles for Headings in Builder.io?

Hey @yourator, welcome to the Builder.io forum. You can set your default styles using Builder’s design tokens or Custom CSS. Here is a general guide you can follow- Option 1: Use Design Tokens Design tokens allow you to create consistent styles across your site. In Builder.io, you can use design tokens to define default styles for headings. Define Design Tokens for Headings: Create a design-tokens.ts file if you don’t already have it. Example: design-tokens.ts export const designTokens =…

Is this valid? It’s difficult to find out what can and can’t be used as the docs are pretty sparse and there aren’t any TypeScript types for the tokens.