Preserve shadow color when overriding shadow size

[adamwathan]

This PR changes how shadow color and shadow size utilities interact when used with variants.

Take this HTML:

<div class="shadow-lg shadow-red-500 hover:shadow-xl">
  <!-- … -->
</div>

Currently this shadow would be red by default, but revert to the default semi-transparent black color on hover.

This PR changes this behavior such that the shadow remains red on hover, and only the shadow size changes.

We deliberately didn't do this originally because making things behave this way makes it very difficult to get the default shadow color back once you've changed it. The default color for shadow-xl for instance is rgb(0 0 0 / 0.1), and the only way to get that color back after changing it is to know that value and explicitly bring it back:

<div class="shadow-lg shadow-red-500 hover:shadow-xl hover:shadow-black/10">
  <!-- … -->
</div>

To make things more difficult, the default shadow color is not the same across shadow sizes. For shadow-sm it's black/5, and for shadow-2xl it's black/25.

In practice though you basically never need to bring back the default shadow color, so I'm reconsidering this trade-off in v4, and think I prefer this new behavior where the color is preserved but you have to bring back the default color if you actually need it.

A simple workaround if you don't know the color is to reset the --tw-shadow-color variable like this:

<div class="shadow-lg shadow-red-500 hover:shadow-xl hover:[--tw-shadow-color:initial]">
  <!-- … -->
</div>

This relies on semi-private internals though, so perhaps we can introduce a utility for this, like shadow-default or shadow-initial that just unsets the shadow color.

[thecrypticace]

Need to update the changelog but looks good otherwise