Use radii instead of border-radius

[matheusps]

Problem

The current token type is border-radius. This name can be reduced, leading to a easier to use token. Also, the value strategy don't leave room for appearance of new values.

Solution

The solution consists of two parts:

1. Change the token-type from border-radius to radii (or the radius alternative)
2. Change the value from none, small, medium, large, full to 0, 1, 2, 3, full.

Current variables:

--sl-border-radius-none: 0rem;
--sl-border-radius-small: 0.25rem;
--sl-border-radius-medium: 0.5rem;
--sl-border-radius-large: 0.75rem;
--sl-border-radius-full: 100%;

Updated variables:

--sl-radii-0: 0rem;
--sl-radii-1: 0.25rem;
--sl-radii-2: 0.5rem;
--sl-radii-3: 0.75rem;
--sl-radii-full: 9999rem;

Alternative, radius:

--sl-radius-0: 0rem;
--sl-radius-1: 0.25rem;
--sl-radius-2: 0.5rem;
--sl-radius-3: 0.75rem;
--sl-radius-full: 9999rem;

Usage examples

No response

Dependencies

No response

References

• Radix: https://www.radix-ui.com/themes/docs/theme/radius
• Panda: https://panda-css.com/docs/theming/tokens#radii

[beatrizmilhomem]

I'd go with radius for the name, and I agree with changing the values.

[matheusps]

Awesome! radius is great as well.

[lucasaarcoverde]

I like radius it makes it simpler to write and still maintain the semantic ✨

[lucasaarcoverde]

I don't know if this is the best place to discuss this, but what do you think of changing from small, medium, etc. to xs, s, m, l, xl, 2xl, etc.?

In my opinion it has the same benefits of using numbers while it adds semantic to the token @beatrizmilhomem @matheusps

[matheusps]

@lucasaarcoverde I prefer numbers over the xs, s, etc. If you think about it, there is no semantic on these values. 2xl vs 6, what is the diference? There is no semantic on small, big, large - as well. So, I prefer numbers over weak semantic any time. Do this makes sense to you?

[matheusps]

One reference that points both as the same thing: https://tailwindcss.com/docs/customizing-spacing, https://tailwindcss.com/docs/size.

[lucasaarcoverde]

So, I prefer numbers over weak semantic any time.

I agree with that

One reference that points both as the same thing: https://tailwindcss.com/docs/customizing-spacing, https://tailwindcss.com/docs/size.

IMO the case of spacing is different from radius. I mean, if we know the most common radius in shoreline we can have an idea of what the medium would mean, and this way we can have an idea of what sm, xs, lg, xl would mean as well. I have suggested this change because I'm using tailwind in some projects and I found it very useful: https://tailwindcss.com/docs/border-radius#rounded-corners

[beatrizmilhomem]

@lucasaarcoverde I get that point, and it makes sense, but what about scalability? The numbers solution seems to give more room for that. Polaris also uses numbers and they have a more extent list of radius tokens.

[lucasaarcoverde]

It makes sense for me, thanks for sharing your opinion ❤️

[marcelovicentegc]

radius with numbers for the win! :pray:

[matheusps]

Considering the opinion of the majority of the team:

1. We will use numbers as values for border-radius.
2. We will replace the border-radius type by radius.

The final result:

--sl-radius-0: 0rem;
--sl-radius-1: 0.25rem;
--sl-radius-2: 0.5rem;
--sl-radius-3: 0.75rem;
--sl-radius-full: 9999rem;