Radii

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

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

Overriding the default radii

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

const [lightThemeTokens] = createTokens({
  theme: {
    tokens: {
      radii: {
        base: 8,
        sm: 4,
        md: 10,
      },
    },
  },
});

Radii tokens

Design Blocks ships with the following radii tokens by default: