Fix shadow-inherit, inset-shadow-inherit, drop-shadow-inherit, and text-shadow-inherit (#17647)

Fixes #17643.

This PR completely removes the `color-mix()` function for
`shadow-inherit`. This does mean intensity and alpha channel support has
been removed when using `shadow-inherit`[^1].

With intensity modifiers in #17398, all colors are wrapped in
`color-mix()`. However, it seems `inherit` does not work as a value in
`color-mix()` in Firefox or Chrome (don't have a means to test Safari).

[^1]: While writing this, I noticed other color utilities allow alpha
channel modifier syntax for `inherit` - do we want to look at removing
those too?

---------

Co-authored-by: Philipp Spiess <[email protected]>

Author: wongjn

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure the `color-mix(…)` polyfill creates fallbacks for theme variables that reference other theme variables ([#17562](https://github.com/tailwindlabs/tailwindcss/pull/17562))
 - Fix brace expansion in `@source inline('z-{10..0}')` with range going down ([#17591](https://github.com/tailwindlabs/tailwindcss/pull/17591))
 - Ensure container query variant names can contain hyphens ([#17628](https://github.com/tailwindlabs/tailwindcss/pull/17628))
+- Ensure `shadow-inherit`, `inset-shadow-inherit`, `drop-shadow-inherit`, and `text-shadow-inherit` inherits the shadow color ([#17647](https://github.com/tailwindlabs/tailwindcss/pull/17647))
 - Ensure compatibility with array tuples used in `fontSize` JS theme keys ([#17630](https://github.com/tailwindlabs/tailwindcss/pull/17630))
 - Upgrade: Convert `fontSize` array tuple syntax to CSS theme variables ([#17630](https://github.com/tailwindlabs/tailwindcss/pull/17630))
 

packages/tailwindcss/src/utilities.test.ts

@@ -20943,6 +20943,8 @@ test('filter', async () => {
         'drop-shadow-[0_0_red]',
         'drop-shadow-red-500',
         'drop-shadow-red-500/50',
+        'drop-shadow-none',
+        'drop-shadow-inherit',
         'saturate-0',
         'saturate-[1.75]',
         'saturate-[var(--value)]',
@@ -21046,6 +21048,16 @@ 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-none {
+      --tw-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-inherit {
+      --tw-drop-shadow-color: inherit;
+      --tw-drop-shadow: var(--tw-drop-shadow-size);
+    }
+
     .drop-shadow-red-500 {
       --tw-drop-shadow-color: #ef4444;
       --tw-drop-shadow: var(--tw-drop-shadow-size);
@@ -23568,12 +23580,6 @@ test('text-shadow', async () => {
       --tw-text-shadow-color: inherit;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .text-shadow-inherit {
-        --tw-text-shadow-color: color-mix(in oklab, inherit var(--tw-text-shadow-alpha), transparent);
-      }
-    }
-
     .text-shadow-none {
       text-shadow: none;
     }
@@ -23968,12 +23974,6 @@ test('shadow', async () => {
       --tw-shadow-color: inherit;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .shadow-inherit {
-        --tw-shadow-color: color-mix(in oklab, inherit var(--tw-shadow-alpha), transparent);
-      }
-    }
-
     .shadow-red-500 {
       --tw-shadow-color: #ef4444;
     }
@@ -24447,12 +24447,6 @@ test('inset-shadow', async () => {
       --tw-inset-shadow-color: inherit;
     }
 
-    @supports (color: color-mix(in lab, red, red)) {
-      .inset-shadow-inherit {
-        --tw-inset-shadow-color: color-mix(in oklab, inherit var(--tw-inset-shadow-alpha), transparent);
-      }
-    }
-
     .inset-shadow-red-500 {
       --tw-inset-shadow-color: #ef4444;
     }

packages/tailwindcss/src/utilities.ts

@@ -4399,6 +4399,14 @@ export function createUtilities(theme: Theme) {
       {
         let value = resolveThemeColor(candidate, theme, ['--drop-shadow-color', '--color'])
         if (value) {
+          if (value === 'inherit') {
+            return [
+              filterProperties(),
+              decl('--tw-drop-shadow-color', 'inherit'),
+              decl('--tw-drop-shadow', `var(--tw-drop-shadow-size)`),
+            ]
+          }
+
           return [
             filterProperties(),
             decl('--tw-drop-shadow-color', withAlpha(value, 'var(--tw-drop-shadow-alpha)')),
@@ -5127,6 +5135,10 @@ export function createUtilities(theme: Theme) {
       case 'none':
         if (candidate.modifier) return
         return [textShadowProperties(), decl('text-shadow', 'none')]
+
+      case 'inherit':
+        if (candidate.modifier) return
+        return [textShadowProperties(), decl('--tw-text-shadow-color', 'inherit')]
     }
 
     // Shadow size
@@ -5275,6 +5287,10 @@ export function createUtilities(theme: Theme) {
             decl('--tw-shadow', nullShadow),
             decl('box-shadow', cssBoxShadowValue),
           ]
+
+        case 'inherit':
+          if (candidate.modifier) return
+          return [boxShadowProperties(), decl('--tw-shadow-color', 'inherit')]
       }
 
       // Shadow size
@@ -5397,6 +5413,10 @@ export function createUtilities(theme: Theme) {
             decl('--tw-inset-shadow', nullShadow),
             decl('box-shadow', cssBoxShadowValue),
           ]
+
+        case 'inherit':
+          if (candidate.modifier) return
+          return [boxShadowProperties(), decl('--tw-inset-shadow-color', 'inherit')]
       }
 
       // Shadow size