Borders

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

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

Overriding the default borders

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

const [lightThemeTokens] = createTokens({
  theme: {
    tokens: {
      borders: {
        true: 4,
        sm: 8,
        md: 10,
        lg: 16,
      },
    },
  },
});

Borders tokens

Design Blocks ships with the following borders tokens by default: