Fonts

Font Sizes

Use the fontSizes key in the extendTokens section of your blocks.config.ts file to extend the default fontSizes values.

const [lightThemeTokens] = createTokens({
  theme: {
    extendTokens: {
      fontSizes: {
        // Configure your font sizes here
      },
    },
  },
});

Overriding the default Font Sizes

if you’d like to override the default font sizes, you can do so using the theme.tokens.fontSizes section of your blocks.config.ts file:

const [lightThemeTokens] = createTokens({
  theme: {
    tokens: {
      fontSizes: {
        xs: 12,
        sm: 16,
        md: 20,
      },
    },
  },
});

Font Sizes tokens

Design Blocks ships with the following font sizes tokens by default:

Font Weights

Use the fontWeights key in the extendTokens section of your blocks.config.ts file to extend the default fontWeights values.

const [lightThemeTokens] = createTokens({
  theme: {
    extendTokens: {
      fontWeights: {
        // Configure your font weights here
      },
    },
  },
});

Overriding the default Font Weights

if you’d like to override the default font weights, you can do so using the theme.tokens.fontWeights section of your blocks.config.ts file:

const [lightThemeTokens] = createTokens({
  theme: {
    tokens: {
      fontWeights: {
        light: "100",
        normal: "300",
        medium: "400",
      },
    },
  },
});

Font Weightstokens

Design Blocks ships with the following font weights tokens by default: