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
.