From ad89b90fbf4ea25d583060f17013cca4c17edf25 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Tue, 24 Dec 2024 17:18:32 +0000
Subject: [PATCH] feat: support tokens in composite shadows

---
 .changeset/stale-drinks-grow.md               | 32 ++++++++++++++++
 .../__tests__/generate-token.test.ts          | 37 +++++++++++++++++++
 packages/token-dictionary/src/is-composite.ts |  8 ++--
 packages/token-dictionary/src/transform.ts    |  6 ++-
 packages/types/src/tokens.ts                  |  8 ++--
 5 files changed, 82 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/stale-drinks-grow.md

diff --git a/.changeset/stale-drinks-grow.md b/.changeset/stale-drinks-grow.md
new file mode 100644
index 0000000000..f82f017000
--- /dev/null
+++ b/.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}',
+          },
+        },
+      },
+    },
+  },
+})
+```
diff --git a/packages/generator/__tests__/generate-token.test.ts b/packages/generator/__tests__/generate-token.test.ts
index 9581e4001c..e8103f73fe 100644
--- a/packages/generator/__tests__/generate-token.test.ts
+++ b/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 {
diff --git a/packages/token-dictionary/src/is-composite.ts b/packages/token-dictionary/src/is-composite.ts
index 22f578fdca..17e0c05751 100644
--- a/packages/token-dictionary/src/is-composite.ts
+++ b/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,
 })
 
diff --git a/packages/token-dictionary/src/transform.ts b/packages/token-dictionary/src/transform.ts
index 42a7d871c7..6e1930dad7 100644
--- a/packages/token-dictionary/src/transform.ts
+++ b/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
diff --git a/packages/types/src/tokens.ts b/packages/types/src/tokens.ts
index e8cb381b60..4c1da0f59d 100644
--- a/packages/types/src/tokens.ts
+++ b/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
 }