Preserve shadow color when overriding shadow size (#14458)

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

Take this HTML:

```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:

```html
<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:

```html
<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.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -27,8 +27,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Don't override explicit `leading-*`, `tracking-*`, or `font-{weight}` utilities with font-size utility defaults ([#14403](https://github.com/tailwindlabs/tailwindcss/pull/14403))
+- Preserve explicit `leading-*`, `tracking-*`, and `font-{weight}` value when overriding font-size ([#14403](https://github.com/tailwindlabs/tailwindcss/pull/14403))
 - Disallow negative bare values in core utilities and variants ([#14453](https://github.com/tailwindlabs/tailwindcss/pull/14453))
+- Preserve explicit shadow color when overriding shadow size ([#14458](https://github.com/tailwindlabs/tailwindcss/pull/14458))
 
 ## [4.0.0-alpha.24] - 2024-09-11
 

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -414,8 +414,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
 }
 
 .shadow {
-  --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
@@ -429,9 +428,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   @layer base {
     *, :before, :after, ::backdrop {
       --tw-shadow: 0 0 #0000;
-      --tw-shadow-colored: 0 0 #0000;
+      --tw-shadow-color: initial;
       --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-colored: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
       --tw-ring-color: initial;
       --tw-ring-shadow: 0 0 #0000;
       --tw-inset-ring-color: initial;
@@ -481,10 +480,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   initial-value: 0 0 #0000;
 }
 
-@property --tw-shadow-colored {
+@property --tw-shadow-color {
   syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
+  inherits: false
 }
 
 @property --tw-inset-shadow {
@@ -493,10 +491,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   initial-value: 0 0 #0000;
 }
 
-@property --tw-inset-shadow-colored {
+@property --tw-inset-shadow-color {
   syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
+  inherits: false
 }
 
 @property --tw-ring-color {