From c009c9c38b9d1c0da913b6e283238a2ca9f93a80 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Fri, 11 Oct 2024 18:07:59 +0200
Subject: [PATCH] Support the `color` property in JS theme configuration
 callbacks (#14651)

While working on some fixes for #14639 I noticed that the following v3
configuration file would not load properly in v4:

```ts
import { type Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: ({ colors }) => ({
        gray: colors.neutral,
      }),
  },
} satisfies Config
```

The reason for this is that we did not pass the `colors` property to the
callback function. Since we have colors available now, we can easily add
it.

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
---
 CHANGELOG.md                                  |  1 +
 .../src/compat/config/resolve-config.test.ts  | 19 +++++++++++++++++++
 .../src/compat/config/resolve-config.ts       |  3 +++
 3 files changed, 23 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1ad6f1f6..5af6d0fdd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add support for `tailwindcss/colors.js`, `tailwindcss/defaultTheme.js`, and `tailwindcss/plugin.js` exports ([#14595](https://github.com/tailwindlabs/tailwindcss/pull/14595))
 - Support `keyframes` in JS config file themes ([#14594](https://github.com/tailwindlabs/tailwindcss/pull/14594))
+- Support the `color` parameter in JS theme configuration callbacks ([#14651](https://github.com/tailwindlabs/tailwindcss/pull/14651))
 - _Upgrade (experimental)_: Migrate v3 PostCSS setups to v4 in some cases ([#14612](https://github.com/tailwindlabs/tailwindcss/pull/14612))
 - _Upgrade (experimental)_: Automatically discover JavaScript config files ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597))
 - _Upgrade (experimental)_: Migrate legacy classes to the v4 alternative ([#14643](https://github.com/tailwindlabs/tailwindcss/pull/14643))
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
index 895939bca..d755cf8e1 100644
--- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts
+++ b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
@@ -198,6 +198,10 @@ test('theme keys can read from the CSS theme', () => {
             // Reads from the --color-* namespace directly
             secondary: theme('color.green'),
           }),
+          caretColor: ({ colors }) => ({
+            // Gives access to the colors object directly
+            primary: colors.green,
+          }),
         },
       },
       base: '/root',
@@ -218,6 +222,21 @@ test('theme keys can read from the CSS theme', () => {
         primary: 'green',
         secondary: 'green',
       },
+      caretColor: {
+        primary: {
+          '50': '#f0fdf4',
+          '100': '#dcfce7',
+          '200': '#bbf7d0',
+          '300': '#86efac',
+          '400': '#4ade80',
+          '500': '#22c55e',
+          '600': '#16a34a',
+          '700': '#15803d',
+          '800': '#166534',
+          '900': '#14532d',
+          '950': '#052e16',
+        },
+      },
     },
   })
 })
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.ts b/packages/tailwindcss/src/compat/config/resolve-config.ts
index 2d8a86ff6..fbbf807ab 100644
--- a/packages/tailwindcss/src/compat/config/resolve-config.ts
+++ b/packages/tailwindcss/src/compat/config/resolve-config.ts
@@ -1,4 +1,5 @@
 import type { DesignSystem } from '../../design-system'
+import colors from '../colors'
 import type { PluginWithConfig } from '../plugin-api'
 import { createThemeFn } from '../plugin-functions'
 import { deepMerge, isPlainObject } from './deep-merge'
@@ -117,6 +118,7 @@ export function mergeThemeExtension(
 
 export interface PluginUtils {
   theme(keypath: string, defaultValue?: any): any
+  colors: typeof colors
 }
 
 function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFile): void {
@@ -176,6 +178,7 @@ function extractConfigs(ctx: ResolutionContext, { config, base, path }: ConfigFi
 function mergeTheme(ctx: ResolutionContext) {
   let api: PluginUtils = {
     theme: createThemeFn(ctx.design, () => ctx.theme, resolveValue),
+    colors,
   }
 
   function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {