@discourser/design-system 0.13.0 → 0.14.0

package/src/preset/colors/create-palette-bridge.ts

@@ -0,0 +1,156 @@
+/**
+ * Factory for creating Radix-scale bridges from M3 tonal palettes
+ *
+ * Converts Material 3 tonal palettes (0-100 scale) to Park UI Radix scale (1-12 + alpha + semantic variants)
+ *
+ * Mapping Strategy:
+ * - Radix 1-12 represents light → dark in light mode
+ * - M3 tonal palette 100 → 0 (white to black)
+ *
+ * Radix Scale Semantics:
+ * 1-2: App background
+ * 3-4: Subtle backgrounds
+ * 5-6: UI element backgrounds
+ * 7-8: Borders and separators
+ * 9: Solid backgrounds (primary action color)
+ * 10: Hovered solid backgrounds
+ * 11: Low-contrast text
+ * 12: High-contrast text
+ */
+
+import { defineSemanticTokens } from '@pandacss/dev';
+import type { TonalPalette } from '../../contracts/design-language.contract';
+
+interface PaletteBridgeOptions {
+  /**
+   * Palette name for self-referencing semantic tokens (e.g., 'primary', 'error')
+   */
+  name: string;
+
+  /**
+   * M3 tonal palette object with keys 0-100
+   */
+  palette: TonalPalette;
+
+  /**
+   * Whether to include a DEFAULT key (used for error palette)
+   */
+  includeDefault?: boolean;
+
+  /**
+   * Override for solid.fg token (default uses white/palette[1] pattern)
+   * If true, uses 'white' for both light and dark modes (error pattern)
+   */
+  solidFgWhiteBoth?: boolean;
+}
+
+/**
+ * Creates a complete Radix-scale bridge from an M3 tonal palette
+ */
+export function createPaletteBridge({
+  name,
+  palette: m3,
+  includeDefault = false,
+  solidFgWhiteBoth = false,
+}: PaletteBridgeOptions) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const tokens: any = {
+    // Base scale mapping M3 tonal to Radix (same for all chromatic colors)
+    '1': { value: { base: m3[99], _dark: m3[10] } },
+    '2': { value: { base: m3[95], _dark: m3[20] } },
+    '3': { value: { base: m3[90], _dark: m3[30] } },
+    '4': { value: { base: m3[80], _dark: m3[30] } },
+    '5': { value: { base: m3[70], _dark: m3[40] } },
+    '6': { value: { base: m3[60], _dark: m3[40] } },
+    '7': { value: { base: m3[50], _dark: m3[50] } },
+    '8': { value: { base: m3[40], _dark: m3[60] } },
+    '9': { value: { base: m3[40], _dark: m3[80] } }, // Primary action color
+    '10': { value: { base: m3[30], _dark: m3[70] } }, // Hover state
+    '11': { value: { base: m3[30], _dark: m3[90] } }, // Low-contrast text
+    '12': { value: { base: m3[10], _dark: m3[95] } }, // High-contrast text
+
+    // Alpha variants (for overlays/transparency)
+    // Increased opacity for better visibility in UI components
+    a1: { value: { base: `${m3[40]}08`, _dark: `${m3[80]}08` } },
+    a2: { value: { base: `${m3[40]}20`, _dark: `${m3[80]}20` } }, // ~13% for surface bg
+    a3: { value: { base: `${m3[40]}30`, _dark: `${m3[80]}30` } }, // ~19% for subtle bg
+    a4: { value: { base: `${m3[40]}40`, _dark: `${m3[80]}40` } }, // ~25% for hover states
+    a5: { value: { base: `${m3[40]}50`, _dark: `${m3[80]}50` } }, // ~31% for active states
+    a6: { value: { base: `${m3[40]}80`, _dark: `${m3[80]}80` } }, // ~50% for visible borders
+    a7: { value: { base: `${m3[40]}A0`, _dark: `${m3[80]}A0` } }, // ~63% for prominent borders
+    a8: { value: { base: `${m3[40]}B0`, _dark: `${m3[80]}B0` } }, // ~69%
+    a9: { value: { base: `${m3[40]}C0`, _dark: `${m3[80]}C0` } }, // ~75%
+    a10: { value: { base: `${m3[40]}D0`, _dark: `${m3[80]}D0` } }, // ~81%
+    a11: { value: { base: `${m3[40]}E0`, _dark: `${m3[80]}E0` } }, // ~88% for text colors
+    a12: { value: { base: `${m3[40]}F0`, _dark: `${m3[80]}F0` } }, // ~94% for high contrast
+
+    // Semantic variants (Park UI component styling)
+    solid: {
+      bg: {
+        DEFAULT: { value: { base: `{colors.${name}.9}`, _dark: `{colors.${name}.9}` } },
+        hover: { value: { base: `{colors.${name}.10}`, _dark: `{colors.${name}.10}` } },
+      },
+      fg: {
+        DEFAULT: solidFgWhiteBoth
+          ? { value: { base: 'white', _dark: 'white' } }
+          : { value: { base: '{colors.white}', _dark: `{colors.${name}.1}` } },
+      },
+    },
+    subtle: {
+      bg: {
+        DEFAULT: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } },
+        hover: { value: { base: `{colors.${name}.a4}`, _dark: `{colors.${name}.a4}` } },
+        active: { value: { base: `{colors.${name}.a5}`, _dark: `{colors.${name}.a5}` } },
+      },
+      fg: {
+        DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } },
+      },
+    },
+    surface: {
+      bg: {
+        DEFAULT: { value: { base: `{colors.${name}.a2}`, _dark: `{colors.${name}.a2}` } },
+        active: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } },
+      },
+      border: {
+        DEFAULT: { value: { base: `{colors.${name}.a6}`, _dark: `{colors.${name}.a6}` } },
+        hover: { value: { base: `{colors.${name}.a7}`, _dark: `{colors.${name}.a7}` } },
+      },
+      fg: {
+        DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } },
+      },
+    },
+    outline: {
+      bg: {
+        DEFAULT: { value: { base: 'transparent', _dark: 'transparent' } },
+        hover: { value: { base: `{colors.${name}.a2}`, _dark: `{colors.${name}.a2}` } },
+        active: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } },
+      },
+      border: {
+        DEFAULT: { value: { base: `{colors.${name}.a7}`, _dark: `{colors.${name}.a7}` } },
+      },
+      fg: {
+        DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } },
+      },
+    },
+    plain: {
+      bg: {
+        DEFAULT: { value: { base: 'transparent', _dark: 'transparent' } },
+        hover: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } },
+        active: { value: { base: `{colors.${name}.a4}`, _dark: `{colors.${name}.a4}` } },
+      },
+      fg: {
+        DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } },
+      },
+    },
+  };
+
+  // Add DEFAULT key if requested (for error palette)
+  if (includeDefault) {
+    return defineSemanticTokens.colors({
+      DEFAULT: { value: { base: m3[40], _dark: m3[80] } },
+      ...tokens,
+    });
+  }
+
+  return defineSemanticTokens.colors(tokens);
+}

package/src/preset/colors/index.ts

@@ -1,10 +1,14 @@
 import { primary } from './m3-primary';
+import { secondary } from './m3-secondary';
+import { tertiary } from './m3-tertiary';
 import { neutral } from './m3-neutral';
 import { error } from './m3-error';
 
 // Export all M3 colors mapped to Park UI structure
 export const colors = {
   primary,
+  secondary,
+  tertiary,
   neutral,
   error,
   // Alias gray to neutral (Park UI expects this)

package/src/preset/colors/m3-error.ts

@@ -1,78 +1,13 @@
-import { defineSemanticTokens } from '@pandacss/dev';
-import { material3Language } from '../../languages/material3.language';
-
-const m3 = material3Language.colors.error;
-
-export const error = defineSemanticTokens.colors({
-  '1': { value: { base: m3[99], _dark: m3[10] } },
-  '2': { value: { base: m3[95], _dark: m3[20] } },
-  '3': { value: { base: m3[90], _dark: m3[30] } },
-  '4': { value: { base: m3[80], _dark: m3[30] } },
-  '5': { value: { base: m3[70], _dark: m3[40] } },
-  '6': { value: { base: m3[60], _dark: m3[40] } },
-  '7': { value: { base: m3[50], _dark: m3[50] } },
-  '8': { value: { base: m3[40], _dark: m3[60] } },
-  '9': { value: { base: m3[40], _dark: m3[80] } },
-  '10': { value: { base: m3[30], _dark: m3[70] } },
-  '11': { value: { base: m3[30], _dark: m3[90] } },
-  '12': { value: { base: m3[10], _dark: m3[95] } },
+/**
+ * Material 3 Error Color → Park UI Radix Scale
+ */
 
-  // Alpha variants (increased opacity for better visibility)
-  a1: { value: { base: `${m3[40]}08`, _dark: `${m3[80]}08` } },
-  a2: { value: { base: `${m3[40]}20`, _dark: `${m3[80]}20` } }, // ~13% for surface bg
-  a3: { value: { base: `${m3[40]}30`, _dark: `${m3[80]}30` } }, // ~19% for subtle bg
-  a4: { value: { base: `${m3[40]}40`, _dark: `${m3[80]}40` } }, // ~25% for hover states
-  a5: { value: { base: `${m3[40]}50`, _dark: `${m3[80]}50` } }, // ~31% for active states
-  a6: { value: { base: `${m3[40]}80`, _dark: `${m3[80]}80` } }, // ~50% for visible borders
-  a7: { value: { base: `${m3[40]}A0`, _dark: `${m3[80]}A0` } }, // ~63% for prominent borders
-  a8: { value: { base: `${m3[40]}B0`, _dark: `${m3[80]}B0` } }, // ~69%
-  a9: { value: { base: `${m3[40]}C0`, _dark: `${m3[80]}C0` } }, // ~75%
-  a10: { value: { base: `${m3[40]}D0`, _dark: `${m3[80]}D0` } }, // ~81%
-  a11: { value: { base: `${m3[40]}E0`, _dark: `${m3[80]}E0` } }, // ~88% for text colors
-  a12: { value: { base: `${m3[40]}F0`, _dark: `${m3[80]}F0` } }, // ~94% for high contrast
-
-  // Semantic variants
-  solid: {
-    bg: {
-      DEFAULT: { value: { base: '{colors.error.9}', _dark: '{colors.error.9}' } },
-      hover: { value: { base: '{colors.error.10}', _dark: '{colors.error.10}' } },
-    },
-    fg: { DEFAULT: { value: { base: 'white', _dark: 'white' } } },
-  },
-  subtle: {
-    bg: {
-      DEFAULT: { value: { base: '{colors.error.a3}', _dark: '{colors.error.a3}' } },
-      hover: { value: { base: '{colors.error.a4}', _dark: '{colors.error.a4}' } },
-      active: { value: { base: '{colors.error.a5}', _dark: '{colors.error.a5}' } },
-    },
-    fg: { DEFAULT: { value: { base: '{colors.error.a11}', _dark: '{colors.error.a11}' } } },
-  },
-  surface: {
-    bg: {
-      DEFAULT: { value: { base: '{colors.error.a2}', _dark: '{colors.error.a2}' } },
-      active: { value: { base: '{colors.error.a3}', _dark: '{colors.error.a3}' } },
-    },
-    border: {
-      DEFAULT: { value: { base: '{colors.error.a6}', _dark: '{colors.error.a6}' } },
-      hover: { value: { base: '{colors.error.a7}', _dark: '{colors.error.a7}' } },
-    },
-    fg: { DEFAULT: { value: { base: '{colors.error.a11}', _dark: '{colors.error.a11}' } } },
-  },
-  outline: {
-    bg: {
-      DEFAULT: { value: { base: 'transparent', _dark: 'transparent' } },
-      hover: { value: { base: '{colors.error.a2}', _dark: '{colors.error.a2}' } },
-      active: { value: { base: '{colors.error.a3}', _dark: '{colors.error.a3}' } },
-    },
-    border: { DEFAULT: { value: { base: '{colors.error.a7}', _dark: '{colors.error.a7}' } } },
-    fg: { DEFAULT: { value: { base: '{colors.error.a11}', _dark: '{colors.error.a11}' } } },
-  },
-  plain: {
-    bg: {
-      DEFAULT: { value: { base: 'transparent', _dark: 'transparent' } },
-      hover: { value: { base: '{colors.error.a3}', _dark: '{colors.error.a3}' } },
-      active: { value: { base: '{colors.error.a4}', _dark: '{colors.error.a4}' } },
-    },
-    fg: { DEFAULT: { value: { base: '{colors.error.a11}', _dark: '{colors.error.a11}' } } },
-  },
-});
+import { material3Language } from '../../languages/material3.language';
+import { createPaletteBridge } from './create-palette-bridge';
+
+export const error = createPaletteBridge({
+  name: 'error',
+  palette: material3Language.colors.error,
+  includeDefault: true,
+  solidFgWhiteBoth: true,
+});

package/src/preset/colors/m3-primary.ts

@@ -16,95 +16,10 @@
  * 12: High-contrast text
  */
 
-import { defineSemanticTokens } from '@pandacss/dev';
 import { material3Language } from '../../languages/material3.language';
+import { createPaletteBridge } from './create-palette-bridge';
 
-const m3 = material3Language.colors.primary;
-
-export const primary = defineSemanticTokens.colors({
-  // Base scale mapping M3 tonal to Radix
-  '1': { value: { base: m3[99], _dark: m3[10] } },
-  '2': { value: { base: m3[95], _dark: m3[20] } },
-  '3': { value: { base: m3[90], _dark: m3[30] } },
-  '4': { value: { base: m3[80], _dark: m3[30] } },
-  '5': { value: { base: m3[70], _dark: m3[40] } },
-  '6': { value: { base: m3[60], _dark: m3[40] } },
-  '7': { value: { base: m3[50], _dark: m3[50] } },
-  '8': { value: { base: m3[40], _dark: m3[60] } },
-  '9': { value: { base: m3[40], _dark: m3[80] } },  // Primary action color
-  '10': { value: { base: m3[30], _dark: m3[70] } }, // Hover state
-  '11': { value: { base: m3[30], _dark: m3[90] } }, // Low-contrast text
-  '12': { value: { base: m3[10], _dark: m3[95] } }, // High-contrast text
-
-  // Alpha variants (for overlays/transparency)
-  // Increased opacity for better visibility in UI components
-  a1: { value: { base: `${m3[40]}08`, _dark: `${m3[80]}08` } },
-  a2: { value: { base: `${m3[40]}20`, _dark: `${m3[80]}20` } }, // ~13% for surface bg
-  a3: { value: { base: `${m3[40]}30`, _dark: `${m3[80]}30` } }, // ~19% for subtle bg
-  a4: { value: { base: `${m3[40]}40`, _dark: `${m3[80]}40` } }, // ~25% for hover states
-  a5: { value: { base: `${m3[40]}50`, _dark: `${m3[80]}50` } }, // ~31% for active states
-  a6: { value: { base: `${m3[40]}80`, _dark: `${m3[80]}80` } }, // ~50% for visible borders
-  a7: { value: { base: `${m3[40]}A0`, _dark: `${m3[80]}A0` } }, // ~63% for prominent borders
-  a8: { value: { base: `${m3[40]}B0`, _dark: `${m3[80]}B0` } }, // ~69%
-  a9: { value: { base: `${m3[40]}C0`, _dark: `${m3[80]}C0` } }, // ~75%
-  a10: { value: { base: `${m3[40]}D0`, _dark: `${m3[80]}D0` } }, // ~81%
-  a11: { value: { base: `${m3[40]}E0`, _dark: `${m3[80]}E0` } }, // ~88% for text colors
-  a12: { value: { base: `${m3[40]}F0`, _dark: `${m3[80]}F0` } }, // ~94% for high contrast
-
-  // Semantic variants (Park UI component styling)
-  solid: {
-    bg: {
-      DEFAULT: { value: { base: '{colors.primary.9}', _dark: '{colors.primary.9}' } },
-      hover: { value: { base: '{colors.primary.10}', _dark: '{colors.primary.10}' } },
-    },
-    fg: {
-      DEFAULT: { value: { base: '{colors.white}', _dark: '{colors.primary.1}' } }
-    },
-  },
-  subtle: {
-    bg: {
-      DEFAULT: { value: { base: '{colors.primary.a3}', _dark: '{colors.primary.a3}' } },
-      hover: { value: { base: '{colors.primary.a4}', _dark: '{colors.primary.a4}' } },
-      active: { value: { base: '{colors.primary.a5}', _dark: '{colors.primary.a5}' } },
-    },
-    fg: {
-      DEFAULT: { value: { base: '{colors.primary.a11}', _dark: '{colors.primary.a11}' } }
-    },
-  },
-  surface: {
-    bg: {
-      DEFAULT: { value: { base: '{colors.primary.a2}', _dark: '{colors.primary.a2}' } },
-      active: { value: { base: '{colors.primary.a3}', _dark: '{colors.primary.a3}' } },
-    },
-    border: {
-      DEFAULT: { value: { base: '{colors.primary.a6}', _dark: '{colors.primary.a6}' } },
-      hover: { value: { base: '{colors.primary.a7}', _dark: '{colors.primary.a7}' } },
-    },
-    fg: {
-      DEFAULT: { value: { base: '{colors.primary.a11}', _dark: '{colors.primary.a11}' } }
-    },
-  },
-  outline: {
-    bg: {
-      DEFAULT: { value: { base: 'transparent', _dark: 'transparent' } },
-      hover: { value: { base: '{colors.primary.a2}', _dark: '{colors.primary.a2}' } },
-      active: { value: { base: '{colors.primary.a3}', _dark: '{colors.primary.a3}' } },
-    },
-    border: {
-      DEFAULT: { value: { base: '{colors.primary.a7}', _dark: '{colors.primary.a7}' } }
-    },
-    fg: {
-      DEFAULT: { value: { base: '{colors.primary.a11}', _dark: '{colors.primary.a11}' } }
-    },
-  },
-  plain: {
-    bg: {
-      DEFAULT: { value: { base: 'transparent', _dark: 'transparent' } },
-      hover: { value: { base: '{colors.primary.a3}', _dark: '{colors.primary.a3}' } },
-      active: { value: { base: '{colors.primary.a4}', _dark: '{colors.primary.a4}' } },
-    },
-    fg: {
-      DEFAULT: { value: { base: '{colors.primary.a11}', _dark: '{colors.primary.a11}' } }
-    },
-  },
-});
+export const primary = createPaletteBridge({
+  name: 'primary',
+  palette: material3Language.colors.primary,
+});

package/src/preset/colors/m3-secondary.ts

@@ -0,0 +1,13 @@
+/**
+ * Material 3 Secondary Color → Park UI Radix Scale
+ *
+ * Secondary palette: muted olive-green accent color
+ */
+
+import { material3Language } from '../../languages/material3.language';
+import { createPaletteBridge } from './create-palette-bridge';
+
+export const secondary = createPaletteBridge({
+  name: 'secondary',
+  palette: material3Language.colors.secondary,
+});

package/src/preset/colors/m3-tertiary.ts

@@ -0,0 +1,13 @@
+/**
+ * Material 3 Tertiary Color → Park UI Radix Scale
+ *
+ * Tertiary palette: teal accent color
+ */
+
+import { material3Language } from '../../languages/material3.language';
+import { createPaletteBridge } from './create-palette-bridge';
+
+export const tertiary = createPaletteBridge({
+  name: 'tertiary',
+  palette: material3Language.colors.tertiary,
+});

package/src/preset/index.ts

@@ -108,12 +108,7 @@ export const discourserPandaPreset = definePreset({
             value: { base: '{colors.gray.1}', _dark: '{colors.gray.1}' },
           },
           border: {
-            default: {
-              value: { base: '{colors.gray.6}', _dark: '{colors.gray.6}' },
-            },
-            muted: {
-              value: { base: '{colors.gray.4}', _dark: '{colors.gray.4}' },
-            },
+            value: { base: '{colors.gray.6}', _dark: '{colors.gray.6}' },
           },
 
           // M3 semantic tokens (surface, onSurface, etc.)

package/src/preset/recipes/__tests__/recipe-shadows.test.ts

@@ -0,0 +1,238 @@
+import { describe, it, expect } from 'vitest';
+import { button } from '../button';
+import { card } from '../card';
+import { dialog } from '../dialog';
+import { drawer } from '../drawer';
+import { popover } from '../popover';
+import { select } from '../select';
+import { slider } from '../slider';
+import { switchRecipe } from '../switch';
+import { toast } from '../toast';
+import { tooltip } from '../tooltip';
+import { input } from '../input';
+import { textarea } from '../textarea';
+import { radioGroup } from '../radio-group';
+
+/**
+ * Tests to verify component recipes use semantic tokens (xs-2xl)
+ * and NOT base tokens (level0-5)
+ */
+describe('Recipe Shadow Token Usage', () => {
+  describe('Recipes must use semantic tokens only', () => {
+    it('button recipe should use semantic tokens (xs, sm, md)', () => {
+      // Panda CSS conditional styles (_hover, _active) are not in SystemStyleObject type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const elevated = button.variants?.variant?.elevated as any;
+
+      expect(elevated?.boxShadow).toBe('sm');
+      expect(elevated?._hover?.boxShadow).toBe('md');
+      expect(elevated?._active?.boxShadow).toBe('xs');
+    });
+
+    it('card recipe should use semantic tokens', () => {
+      const recipeConfig = card.variants?.variant;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const shadowVariant = Object.values(recipeConfig || {}).find((variant: any) => variant.boxShadow);
+
+      if (shadowVariant?.boxShadow) {
+        expect(shadowVariant.boxShadow).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+
+    it('dialog recipe should use semantic tokens', () => {
+      // Slot styles are in base, not slots (slots is array of slot names)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const content = (dialog.base as any)?.content;
+
+      if (content?.boxShadow) {
+        expect(content.boxShadow).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+
+    it('drawer recipe should use semantic tokens', () => {
+      // Slot styles are in base, not slots (slots is array of slot names)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const content = (drawer.base as any)?.content;
+
+      if (content?.boxShadow) {
+        expect(content.boxShadow).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+
+    it('popover recipe should use semantic tokens', () => {
+      // Slot styles are in base, not slots (slots is array of slot names)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const content = (popover.base as any)?.content;
+
+      if (content?.boxShadow) {
+        expect(content.boxShadow).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+
+    it('select recipe should use semantic tokens', () => {
+      // Slot styles are in base, not slots (slots is array of slot names)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const content = (select.base as any)?.content;
+
+      if (content?.boxShadow) {
+        expect(content.boxShadow).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+
+    it('slider recipe should use semantic tokens', () => {
+      // Slot styles are in base, not slots (slots is array of slot names)
+      // Cast to any for _hover access (conditional styles not in type)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const thumb = (slider.base as any)?.thumb;
+
+      if (thumb?.boxShadow || thumb?._hover?.boxShadow) {
+        const shadowValue = thumb.boxShadow || thumb._hover?.boxShadow;
+        expect(shadowValue).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+
+    it('switch recipe should use semantic tokens', () => {
+      // Slot styles are in base, not slots (slots is array of slot names)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const thumb = (switchRecipe.base as any)?.thumb;
+
+      if (thumb?.boxShadow) {
+        expect(thumb.boxShadow).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+
+    it('toast recipe should use semantic tokens', () => {
+      // Slot styles are in base, not slots (slots is array of slot names)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const root = (toast.base as any)?.root;
+
+      if (root?.boxShadow) {
+        expect(root.boxShadow).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+
+    it('tooltip recipe should use semantic tokens', () => {
+      // Slot styles are in base, not slots (slots is array of slot names)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const content = (tooltip.base as any)?.content;
+
+      if (content?.boxShadow) {
+        expect(content.boxShadow).toMatch(/^(xs|sm|md|lg|xl|2xl)$/);
+      }
+    });
+  });
+
+  describe('Recipes must NOT use base tokens', () => {
+    const recipes = {
+      button,
+      card,
+      dialog,
+      drawer,
+      popover,
+      select,
+      slider,
+      switchRecipe,
+      toast,
+      tooltip,
+    };
+
+    it('no recipe should reference level0-5 base tokens', () => {
+      Object.entries(recipes).forEach(([name, recipe]) => {
+        if (!recipe) {
+          console.warn(`Recipe ${name} is undefined`);
+          return;
+        }
+
+        const recipeString = JSON.stringify(recipe);
+
+        // Check for direct level token references
+        expect(recipeString).not.toMatch(/['"]level[0-5]['"]/);
+
+        // Specific check for boxShadow values
+        expect(recipeString).not.toMatch(/boxShadow['"]?\s*:\s*['"]level\d/);
+      });
+    });
+  });
+
+  describe('Custom shadows are allowed', () => {
+    it('utility components can use custom shadow values (not semantic or base)', () => {
+      // Some components use custom shadows for specific effects (borders, insets, etc.)
+      // These should not match semantic or base token patterns
+
+      const customShadowPattern = /^((?!xs|sm|md|lg|xl|2xl|level\d).)*$/;
+
+      // This test documents that custom shadows are intentional
+      // Examples: input field underlines, radio button rings, etc.
+      expect('0 1px 0 0 var(--shadow-color)').toMatch(customShadowPattern);
+      expect('inset 0 0 0 1px var(--shadow-color)').toMatch(customShadowPattern);
+    });
+  });
+
+  describe('STORY-003: Utility token usage (focus-underline, inset-border)', () => {
+    it('input flushed variant should use focus-underline token, not inline value', () => {
+      // Panda CSS conditional styles (_focus) are not in SystemStyleObject type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const flushedVariant = input.variants?.variant?.flushed as any;
+      const focusState = flushedVariant?._focus;
+
+      // TODO: STORY-003 will migrate these inline values to focus-underline utility token
+      expect(focusState?.boxShadow).toBe('0 1px 0 0 var(--shadow-color)');
+    });
+
+    it('textarea flushed variant should use focus-underline token, not inline value', () => {
+      // Panda CSS conditional styles (_focus) are not in SystemStyleObject type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const flushedVariant = textarea.variants?.variant?.flushed as any;
+      const focusState = flushedVariant?._focus;
+
+      // TODO: STORY-003 will migrate these inline values to focus-underline utility token
+      expect(focusState?.boxShadow).toBe('0 1px 0 0 var(--shadow-color)');
+    });
+
+    it('radioGroup control should use inset-border token, not inline value', () => {
+      // Radio group has the boxShadow in the variant, not base
+      const solidVariant = radioGroup.variants?.variant?.solid;
+      const itemControl = solidVariant?.itemControl;
+
+      // TODO: STORY-003 will migrate these inline values to inset-border utility token
+      expect(itemControl?.boxShadow).toBe('inset 0 0 0 1px var(--shadow-color)');
+    });
+
+    it('no recipe should have inline var(--shadow-color) strings', () => {
+      const allRecipes = {
+        button,
+        card,
+        dialog,
+        drawer,
+        popover,
+        select,
+        slider,
+        switchRecipe,
+        toast,
+        tooltip,
+        input,
+        textarea,
+        radioGroup,
+      };
+
+      // TODO: STORY-003 will migrate these inline values to focus-underline / inset-border utility tokens
+      // For now, verify they DO currently contain these inline values (current behavior)
+      const recipesWithInlineValues = ['input', 'textarea', 'radioGroup'];
+
+      Object.entries(allRecipes).forEach(([name, recipe]) => {
+        if (!recipe) {
+          console.warn(`Recipe ${name} is undefined`);
+          return;
+        }
+
+        const recipeString = JSON.stringify(recipe);
+
+        if (recipesWithInlineValues.includes(name)) {
+          // These recipes currently have inline var(--shadow-color) values
+          const hasShadowColor = recipeString.includes('var(--shadow-color)');
+          expect(hasShadowColor).toBe(true);
+        }
+      });
+    });
+  });
+});

package/src/preset/recipes/button.ts

@@ -105,14 +105,14 @@ export const button = defineRecipe({
       elevated: {
         bg: 'colorPalette.surface.bg',
         color: 'colorPalette.solid.fg',
-        boxShadow: 'level2',
+        boxShadow: 'sm',
         border: 'none',
         _hover: {
           bg: 'colorPalette.surface.bg',
-          boxShadow: 'level3',
+          boxShadow: 'md',
         },
         _active: {
-          boxShadow: 'level1',
+          boxShadow: 'xs',
         },
       },
     },