v5: Utilities CSS cleanup, new border and bg utils, renames rounded to radius

[mdo]

• Rearranges utilities CSS to better reflect our property order
• Renames rounded utils to radius, closes Utility class border radius #30048 and closes Confusing classes rounded-sm and rounded-lg #29989.
• Adds new border-gray-500 and border-gray-700 class
• Adds new bg-gray class
• Adds some docs to the border utils page to show how I intend these new utils to be combined

[alecpl]

I kinda prefer the long suffixes (-left, -right, -top, -bottom). I see from where the short version comes from, but.... radius-1 (one) and radius-l (left) looks almost the same, which might be confusing.

I propose to use rl, rr, rb, rt. Also, adding x and yvariants and all 6 size specifiers would make sense. Also, make the size specifier required (so no radius, but r-1). It would unify radius tool with spacing utilities.

[alecpl]

After writing above comment I realized that most utilities do not use abbreviations. So, it would make more sense if spacing utilities would use whole words (padding, margin, top, left, etc.) too. Rather than changing radius to r

[MartijnCuppens]

Feels weird to have numbers in the border utilities, but not in the bg colors. Not sure how we could improve that though.

[mdo]

Feels weird to have numbers in the border utilities, but not in the bg colors. Not sure how we could improve that though.

Agreed... will think on it more.

[mdo]

Closing as it's full of conflicts.