Add radius-* utilities and deprecate rounded-* utilities

[adamwathan]

This PR adds a new set of radius-* utilities to replace the existing rounded-* utilities.

These utilities derive their values from the --spacing-* scale by default, but can also be configured with radius-specific values using the --radius-* scale.

This change makes it easier to do things like concentric border radiuses, where you need to subtract the padding of the parent when calculating the child radius:

<div class="radius-8 p-2">
  <div class="radius-6">

Using the old t-shirt scale there was no clear connection to the spacing value which made this sort of thing annoying, and also difficult to notice that the value was carefully chosen to be concentric when reading the code.

I've kept the rounded-* utilities around for backwards compatibility, including the old t-shirt scale but have registered as inline reference so that they don't produce CSS variables by default. We plan to mark these as deprecated via IntelliSense though, and also plan to update our codemod tooling to make it easy to migrate from rounded-* to radius-* automatically.

[RobinMalfait]

I wish we could generate a /* @deprecated */ comment next to the utility so that it shows in some editors as deprecated. But Lightning CSS sadly strips comments away (or their internal parser does).

[philipp-spiess]

With the change of moving the old scale to be deprecated as it was, I think we can revert this one, right?

[philipp-spiess]

This mostly affects the codemod stuff, I think instead of mapping rounded to rounded-sm etc. we should map it to the new radius-* utilities but leave the values as-is 🤔

[philipp-spiess]

Ah wait this is more complicated, we can only migrate to radius-* when we the value is defined in the JS config, the compat layer only works rounded-* utilities

[philipp-spiess]

I guess also only if the theme is overwritten. 🤔

Consider this configuration:

{
  extend: {
    borderRadius: {
      '4xl': '2rem',
    },
  }
}

I expect this to create a --radius-4xl: 2rem variable (which it does currently) however, the other breakpoints will now be in the --rounded namespace, causing an inconsistency now because radius-4xl exists but radius-3xl doesn't.

[philipp-spiess]

I think the v4 equivalent is actually

rounded => radius-1
rounded-sm => radius-0.5
rounded-md => radius-1.5
rounded-custom => radius-custom
etc.

if custom happens to be 4xl: not much we do here I think, although it would be cool if we can convert it to radius-8 but there might be an inherent meaning to the name so that's probably hard to do.