Rename rounded-* to radius-*, switch to numeric scale

[adamwathan]

This PR changes the name of our border-radius classes from rounded-* to radius-*.

Old Class	New Class
rounded-none	radius-0
rounded-sm	radius-1
rounded	radius-2
rounded-lg	radius-4
rounded-full	radius-full

The primary motivation for this is to make the naming mirror the CSS property more closely, and because I was constantly typing rounded-0 instead of rounded-none, and the whole idea of something being "rounded but not" is just stupid sounding.

This PR also removes the idea of a default border radius value (the rounded) class in favor of always specifying a modifier. That approach was okay with the name rounded but the class radius doesn't make as much sense without a modifier.

I've switched to a numeric scale because radius-0 is more intuitive to me than radius-none, but we could also just use 0 for the zero value, and a descriptive scale like sm, md, lg, etc. for the other values. Don't have a strong opinion on that either way, especially because the numeric scale I'm using in the PR at the moment doesn't match our spacing scale or anything anyways.

If we do keep a numeric scale, I'm not sure if it should be proportional like I have right now (notice that 3 is missing), or if it should just be radius-1, radius-2, radius-3.

Interested in any feedback on this 👍

[swanson]

Maybe I'm missing something obvious, but what was the context in which you were:

constantly typing rounded-0 instead of rounded-none

I don't think I've ever used rounded-none.

---

I am slightly pro rounded variants since in web development we are primarily using it to round the corners on things (cards, buttons, etc). radius variants do map to the CSS property, but I mentally associate those more with circles, something that -- aside from radius: 999 to make a circle avatar -- doesn't come up that often.

Part of the joy of Tailwind is that I don't need to care as much about the CSS property names and I like the flow of composing classes based on how you would talk: "a button with a blue background (bg-blue), white text (text-white) and rounded corners (rounded)". I never would "say" anything about radius when talking with a designer, engineer, or product person.

[sandren]

I agree with @swanson that "rounded" is the expected usage in this context. However, I also agree with @adamwathan that we should consider renaming the rounded-none class to something else. Perhaps we can use not-rounded (similar to the not-italic class which was recently merged) or hard-edges instead.

[benface]

I don't think I've ever used rounded-none.

It's mainly to remove a radius at another screen size, e.g. rounded sm:rounded-none.

It seems that the general direction for 1.0 is to as close to the metal (CSS) as possible while maintaining a great developer experience. I don't really mind these little abstractions, but I think I prefer consistency, and most class names reflect the underlying CSS property in some way. I was also not a fan of the rounded-none class, and I'd rather have a consistent prefix for utilities that affect the same property so I'm not a fan of not-rounded either. If you really like rounded and this gets merged, you can always add it as a key to the config, and have a radius-rounded class that would be like your default border-radius.

The only name that strikes me as odd now is radius-full. rounded-full felt like it meant "fully rounded", but if we're talking about a really high border-radius, I think I prefer radius-max.

[adamwathan]

The only name that strikes me as odd now is radius-full. rounded-full felt like it meant "fully rounded", but if we're talking about a really high border-radius, I think I prefer radius-max.

Yeah I could be persuaded to change that, I kept full because we use that in a lot of other places to mean "100%", which is what we are doing here as well (at least in spirit, damn you 9999px hack.)

[benface]

Well, border-radius: 100% is valid and gives a different result (except for square elements, they become circles in both cases).

[adamwathan]

...and gives a different awful result

Fixed it for you.

[benface]

Haha it creates ovals. That can work in some designs...

[avvertix]

For unsetting the border radius I would propose no-radius or radius-unset (and unset seems also a valid value for the property)

For the scale naming is very subjective, but I would stick to sm, md, lg, as switching to radius-1 would not be closer to the value that will be assigned to the property

[hacknug]

If we do keep a numeric scale, I'm not sure if it should be proportional like I have right now (notice that 3 is missing), or if it should just be radius-1, radius-2, radius-3.

@adamwathan The scale should be proportional since it will come given by the micro-spacing scale (regardless this is something explicitly defined in Tailwind core or not). widths and heights will come given by the macro-spacing scale.

Here's the first link I found to a design system I remembered defined it this way: https://www.carbondesignsystem.com/guidelines/spacing/

The only name that strikes me as odd now is radius-full. rounded-full felt like it meant "fully rounded", but if we're talking about a really high border-radius, I think I prefer radius-max.

+1 to @benface's note on full making sense for the class with value 100%. Ovals, ovoids, and ellipses are a thing so let's allow users to add it while extending the default config without having to come up with a different name or overwriting the existing 9999px class.

For unsetting the border radius I would propose no-radius or radius-unset (and unset seems also a valid value for the property)

This could also be an option but since we're not using initial, inherit, and unset on other modules, I don't think it makes sense to introduce it now.

Also, imho this values should be given by the micro-spacing scale of the system, 0 would be a value of that scale while unset would not. Design tokens > CSS things.

[BrandonSurowiec]

I like the rounded classes. My vote is to leave it as-is. I usually only need one or two variants anyway.

[adamwathan]

Going to keep everything as-is 👍