fix: misleading theme reference other values in setup

docs/setup.md

@@ -243,9 +243,6 @@ If you need to reference another value in your theme, you can do so by providing
 ```js
 setup({
   theme: {
-    colors: {
-      important: (theme) => theme('colors.red.500', 'red' /* Fallback */),
-    },
     fill: (theme) => theme('colors'),
   },
 })

src/__tests__/setup.test.ts

@@ -0,0 +1,69 @@
+import { suite } from 'uvu'
+import * as assert from 'uvu/assert'
+
+import type { Instance } from '../types'
+import type { VirtualSheet } from '../sheets/index'
+
+import { virtualSheet } from '../sheets/index'
+
+import { create, strict } from '../index'
+
+const test = suite('setup')
+
+test('theme extend section callback', () => {
+  const sheet = virtualSheet()
+  const { tw } = create({
+    sheet,
+    mode: strict,
+    preflight: false,
+    prefix: false,
+    theme: {
+      extend: {
+        backgroundImage: (theme) => ({
+          // Use a own gradient
+          'gradient-radial': `radial-gradient(${theme('colors.blue.500')}, ${theme(
+            'colors.red.500',
+          )});`,
+          // Integrate with gradient colors stops (from-*, via-*, to-*)
+          'gradient-15':
+            'linear-gradient(.15turn, var(--tw-gradient-stops,var(--tw-gradient-from,transparent),var(--tw-gradient-to,transparent)))',
+        }),
+      },
+    },
+  })
+
+  assert.is(tw`bg-gradient-radial`, 'bg-gradient-radial')
+  assert.equal(sheet.target, [
+    '.bg-gradient-radial{background-image:radial-gradient(#3b82f6, #ef4444);}',
+  ])
+  sheet.reset()
+
+  assert.is(
+    tw`bg-gradient-15 from-green-400 to-blue-500`,
+    'bg-gradient-15 from-green-400 to-blue-500',
+  )
+  assert.equal(sheet.target, [
+    '.from-green-400{--tw-gradient-from:#34d399;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(52,211,153,0))}',
+    '.bg-gradient-15{background-image:linear-gradient(.15turn, var(--tw-gradient-stops,var(--tw-gradient-from,transparent),var(--tw-gradient-to,transparent)))}',
+    '.to-blue-500{--tw-gradient-to:#3b82f6}',
+  ])
+  sheet.reset()
+})
+
+test('theme extend value callback', () => {
+  const sheet = virtualSheet()
+  const { tw } = create({
+    sheet,
+    mode: strict,
+    preflight: false,
+    prefix: false,
+    theme: {
+      fill: (theme) => theme('colors'),
+    },
+  })
+
+  assert.is(tw`fill-red-500`, 'fill-red-500')
+  assert.equal(sheet.target, ['.fill-red-500{fill:#ef4444}'])
+})
+
+test.run()