Spacings

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

const [lightThemeTokens] = createTokens({
  theme: {
    extendTokens: {
      spacings: {
        // Configure your spacing here
      },
    },
  },
});

Overriding the default spacing

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

const [lightThemeTokens] = createTokens({
  theme: {
    tokens: {
      spacings: {
        none: 0,
        xxs: 8,
        xs: 12,
        baseSpacing: 4,
      },
    },
  },
});

Spacing tokens

Design Blocks ships with the following spacing tokens by default: