Fix theme(…/15%) to only apply when used on its own

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830))
 - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838))
 - _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896))
+- _Upgrade (experimental)_: Don't convert `theme(…/15%)` to modifier unless it is the entire arbitrary value of a utility ([#14922](https://github.com/tailwindlabs/tailwindcss/pull/14922))
 
 ### Changed
 

packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts

@@ -77,6 +77,13 @@ test.each([
   // Arbitrary property that already contains a modifier
   ['[color:theme(colors.red.500/50%)]/50', '[color:theme(--color-red-500/50%)]/50'],
 
+  // Values that don't only contain `theme(…)` calls should not be converted to
+  // a candidate modifier. Because this is not a color anymore.
+  [
+    'shadow-[shadow:inset_0px_1px_theme(colors.white/15%)]',
+    'shadow-[shadow:inset_0px_1px_theme(--color-white/15%)]',
+  ],
+
   // Arbitrary value, where the candidate already contains a modifier
   // This should still migrate the `theme(…)` syntax to the modern syntax.
   ['bg-[theme(colors.red.500/50%)]/50', 'bg-[theme(--color-red-500/50%)]/50'],

packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.ts

@@ -158,7 +158,13 @@ export function createConverter(designSystem: DesignSystem, { prettyPrint = fals
       // Currently, we are assuming that this is only being used for colors,
       // which means that we can typically convert them to a modifier on the
       // candidate itself.
-      if (parts.length === 2 && options & Convert.MigrateModifier) {
+      //
+      // If however the `theme(…)` is used with a color, and other ast nodes
+      // exists then we don't want to handle it as a modifier because it's not
+      // guaranteed that the value is a color.
+      //
+      // E.g.: `inset 0px 1px theme(colors.red.500/50%)` is a shadow, not a color.
+      if (ast.length === 1 && parts.length === 2 && options & Convert.MigrateModifier) {
         let [pathPart, modifierPart] = parts
 
         // 50% -> /50