Grommet - border radius; can it be adjusted globally?

Question

Grommet looks interesting. Not sure I'm in love with button border radius; is there a theme way to reset button radius on all Grommet buttons globally?

Answer 1

The border radius is (mostly) managed by the active theme.
And the theme is (mostly) managed by you.
Check my answer to this question: Grommet UI -- Custom Color Schemes It sets border radius somewhere.
You might need to do it for different controls.

Answer 2

For each type of Button you are using you can set border: undefined on your theme, using the following structure:

const customTheme = {
  button: {
    default: {
      border: undefined,
    },
    primary: {
      background: {
        color: 'brand',
      },
      border: undefined,
    },
  },
};

In this example, the default Button and the primary Button will have no border, and that could work for any other type of Button you are interested in using.