feat: add new components and improve styling utilities

- Add chip, mark, and iconButton recipes with semantic color support
- Introduce skeleton pattern and shimmer gradient for loading states
- Enhance button and details recipes with refined transition properties
- Update border radius tokens to include 'full' and negative spacing values
- Refactor details recipe export and semantic color key handling
- Bump package version to 0.0.6

src/recipes/mark.ts

@@ -0,0 +1,80 @@
+import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'
+
+const markVariants = ['highlight', 'bold', 'underline'] as const
+
+interface MarkRecipeArg {
+  semanticColorNames: string[]
+}
+
+const markRecipe = ({ semanticColorNames }: MarkRecipeArg) => {
+  const colors = ['neutral', ...semanticColorNames] as const
+  return defineRecipe({
+    className: 'mark',
+    base: {
+      backgroundColor: 'transparent',
+      display: 'inline-block',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'inherit',
+      gap: 'xs'
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, {}]))
+      },
+      variant: {
+        ...Object.fromEntries(markVariants.map((variant) => [variant, {}]))
+      }
+    },
+    compoundVariants: markVariants.flatMap((variant) =>
+      colors.map((color) => {
+        switch (variant) {
+          case 'highlight':
+            return {
+              color,
+              variant,
+              css: {
+                margin: '0 -0.4em',
+                padding: '0.1em 0.4em 0.1em 0.4em',
+                borderRadius: '0.8em 0.3em',
+                boxDecorationBreak: 'clone',
+                WebkitBoxDecorationBreak: 'clone',
+                backgroundClip: 'padding-box',
+                fontWeight: 'semibold',
+                backgroundImage: `linear-gradient(to right, color-mix(in srgb, {colors.${color}.9} 10%,transparent) 0%, color-mix(in srgb, {colors.${color}.9} 73%, transparent) 12%, color-mix(in srgb, {colors.${color}.9} 25%, transparent) 100%)`,
+                color: `{colors.${color}.foreground}`
+              } as SystemStyleObject
+            }
+          case 'bold':
+            return {
+              color,
+              variant,
+              css: {
+                fontWeight: 'bold',
+                color: `{colors.${color}.9}`
+              } as SystemStyleObject
+            }
+          case 'underline':
+            return {
+              color,
+              variant,
+              css: {
+                textDecorationLine: 'underline',
+                textDecorationThickness: '2px',
+                textDecorationColor: `{colors.${color}.9}`
+              } as SystemStyleObject
+            }
+          default:
+            return { color, variant, css: {} }
+        }
+      })
+    ),
+    defaultVariants: {
+      color: 'neutral',
+      variant: 'highlight'
+    }
+  })
+}
+
+export default markRecipe
+export { markVariants }