Default roundedness

As described on the "Choose a personality" page, it is usually good to decide on the personality you're going for at the beginning of your project. To convey a playful personality you'll want rounder corners and to convey a more serious personality you'll want less rounded corners.

RFUI makes it easy to do this. In RFUI's stylesheet there is a --default-roundedness CSS variable that you can set.

--rounded-square: var(--spacing-0);
--rounded-sm: var(--spacing-1);
--rounded-lg: var(--spacing-2);
--rounded-full: 9999px;
--default-roundedness: var(--rounded-sm);

If you don't pass rounded to components like Button or Card that accept rounded, the border-radius will be set to the value of the --default-roundedness CSS variable.

Let's look at an example. Suppose we have:

<Button>Example</Button>

There is no rounded property being set, so Button will set it's border-radius according to --default-roundedness.

On the other hand, suppose we have:

<Button rounded="sm">Example</Button>

Now the border-radius will be set according to rounded="sm", not according to --default-roundedness.