Inline theme values in drop-shadow (#15056)

This PR updates the default `drop-shadow-*` values to use a single
shadow instead of multiple shadows.

This ensures that the usage with `drop-shadow(var(--drop-shadow-xl))` is
correct because the `drop-shadow(…)` needs to encode a single drop
shadow.

---------

Co-authored-by: Robin Malfait <[email protected]>

Author: thecrypticace

CHANGELOG.md

@@ -17,6 +17,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - _Upgrade (experimental)_: Ensure migrating to the `in-*` requires a descendant selector ([#15054](https://github.com/tailwindlabs/tailwindcss/pull/15054))
 
+### Changed
+
+- Use single drop shadow values instead of multiple ([#15056](https://github.com/tailwindlabs/tailwindcss/pull/15056))
+
 ## [4.0.0-alpha.35] - 2024-11-20
 
 ### Added

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -335,10 +335,10 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --inset-shadow-xs: inset 0 1px 1px #0000000d;
     --inset-shadow-sm: inset 0 2px 4px #0000000d;
     --drop-shadow-xs: 0 1px 1px #0000000d;
-    --drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
-    --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f;
-    --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
-    --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
+    --drop-shadow-sm: 0 1px 2px #00000026;
+    --drop-shadow-md: 0 3px 3px #0000001f;
+    --drop-shadow-lg: 0 4px 4px #00000026;
+    --drop-shadow-xl: 0 9px 7px #0000001a;
     --drop-shadow-2xl: 0 25px 25px #00000026;
     --ease-in: cubic-bezier(.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, .2, 1);

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

@@ -334,10 +334,10 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --inset-shadow-xs: inset 0 1px 1px #0000000d;
   --inset-shadow-sm: inset 0 2px 4px #0000000d;
   --drop-shadow-xs: 0 1px 1px #0000000d;
-  --drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
-  --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f;
-  --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
-  --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
+  --drop-shadow-sm: 0 1px 2px #00000026;
+  --drop-shadow-md: 0 3px 3px #0000001f;
+  --drop-shadow-lg: 0 4px 4px #00000026;
+  --drop-shadow-xl: 0 9px 7px #0000001a;
   --drop-shadow-2xl: 0 25px 25px #00000026;
   --ease-in: cubic-bezier(.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, .2, 1);

packages/tailwindcss/src/utilities.test.ts

@@ -13613,8 +13613,8 @@ test('filter', async () => {
       css`
         @theme {
           --blur-xl: 24px;
-          --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
-          --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
+          --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
+          --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
         }
         @tailwind utilities;
       `,
@@ -13639,6 +13639,7 @@ test('filter', async () => {
         'invert',
         'invert-0',
         'invert-[var(--value)]',
+        'drop-shadow',
         'drop-shadow-xl',
         'drop-shadow-[0_0_red]',
         'saturate-0',
@@ -13653,8 +13654,8 @@ test('filter', async () => {
   ).toMatchInlineSnapshot(`
     ":root {
       --blur-xl: 24px;
-      --drop-shadow: 0 1px 2px #0000001a, 0 1px 1px #0000000f;
-      --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
+      --drop-shadow: 0 1px 1px #0000000d;
+      --drop-shadow-xl: 0 9px 7px #0000001a;
     }
 
     .blur-\\[4px\\] {
@@ -13692,6 +13693,11 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
+    .drop-shadow {
+      --tw-drop-shadow: drop-shadow(var(--drop-shadow));
+      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+    }
+
     .drop-shadow-\\[0_0_red\\] {
       --tw-drop-shadow: drop-shadow(0 0 red);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );

packages/tailwindcss/theme.css

@@ -367,10 +367,10 @@
   --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
 
   --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
-  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
-  --drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06);
-  --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
-  --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
   --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
 
   --ease-in: cubic-bezier(0.4, 0, 1, 1);