Sizes

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

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

Overriding the default sizes

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

const [lightThemeTokens] = createTokens({
  theme: {
    tokens: {
      sizes: {
        xxs: 8,
        xs: 12,
        sm: 16,
        md: 24,
        lg: 32,
      },
    },
  },
});

Sizes tokens

Design Blocks ships with the following sizes tokens by default: