feat: support tokens in composite shadows

.changeset/stale-drinks-grow.md

@@ -0,0 +1,32 @@
+---
+'@pandacss/token-dictionary': minor
+'@pandacss/generator': minor
+'@pandacss/types': minor
+---
+
+Add support for semantic tokens in composite shadow `blur`, `offsetX`, `offsetY` and `spread` properties.
+
+This enables the use of semantic tokens in composite shadow properties.
+
+```ts
+// panda.config.ts
+
+export default defineConfig({
+  theme: {
+    tokens: {
+      // ...
+      shadows: {
+        sm: {
+          value: {
+            offsetX: '{spacing.3}',
+            offsetY: '{spacing.3}',
+            blur: '1rem',
+            spread: '{spacing.3}',
+            color: '{colors.red}',
+          },
+        },
+      },
+    },
+  },
+})
+```

packages/generator/__tests__/generate-token.test.ts

@@ -45,6 +45,43 @@ describe('generator', () => {
     `)
   })
 
+  test('shadow tokens - composite', () => {
+    const css = tokenCss({
+      eject: true,
+      theme: {
+        tokens: {
+          spacing: {
+            '3': { value: '1rem' },
+          },
+          colors: {
+            red: { value: '#ff0000' },
+          },
+          shadows: {
+            sm: {
+              value: {
+                offsetX: '{spacing.3}',
+                offsetY: '{spacing.3}',
+                blur: '1rem',
+                spread: '{spacing.3}',
+                color: '{colors.red}',
+              },
+            },
+          },
+        },
+      },
+    })
+
+    expect(css).toMatchInlineSnapshot(`
+      "@layer tokens {
+        :where(html) {
+          --spacing-3: 1rem;
+          --colors-red: #ff0000;
+          --shadows-sm: var(--spacing-3) var(--spacing-3) 1rem var(--spacing-3) var(--colors-red);
+      }
+      }"
+    `)
+  })
+
   test('[css] should generate css', () => {
     expect(tokenCss()).toMatchInlineSnapshot(`
       "@layer tokens {

packages/token-dictionary/src/is-composite.ts

@@ -2,10 +2,10 @@ import { P, isMatching } from 'ts-pattern'
 
 export const isCompositeShadow = isMatching({
   inset: P.optional(P.boolean),
-  offsetX: P.number,
-  offsetY: P.number,
-  blur: P.number,
-  spread: P.number,
+  offsetX: P.union(P.number, P.string),
+  offsetY: P.union(P.number, P.string),
+  blur: P.union(P.number, P.string),
+  spread: P.union(P.number, P.string),
   color: P.string,
 })
 

packages/token-dictionary/src/transform.ts

@@ -11,6 +11,10 @@ function toUnit(v: string | number) {
   return isCssUnit(v) || hasReference(v.toString()) ? v : `${v}px`
 }
 
+function px(v: string | number) {
+  return isString(v) ? v : `${v}px`
+}
+
 /* -----------------------------------------------------------------------------
  * Shadow token transform
  * -----------------------------------------------------------------------------*/
@@ -29,7 +33,7 @@ export const transformShadow: TokenTransformer = {
 
     if (isCompositeShadow(token.value)) {
       const { offsetX, offsetY, blur, spread, color, inset } = token.value
-      return `${inset ? 'inset ' : ''}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
+      return [inset ? 'inset ' : '', px(offsetX), px(offsetY), px(blur), px(spread), color].filter(Boolean).join(' ')
     }
 
     return token.value

packages/types/src/tokens.ts

@@ -42,10 +42,10 @@ export interface Border {
 }
 
 export interface Shadow {
-  offsetX: number
-  offsetY: number
-  blur: number
-  spread: number
+  offsetX: number | string
+  offsetY: number | string
+  blur: number | string
+  spread: number | string
   color: string
   inset?: boolean
 }