refactor: update details recipe

src/recipes/details.ts

@@ -1,6 +1,6 @@
-import { defineSlotRecipe } from '@pandacss/dev'
+import { defineSlotRecipe, type SystemStyleObject } from '@pandacss/dev'
 
-export const detailsSlots = ['summary', 'details'] as const
+export const detailsSlots = ['summary', 'details', 'content'] as const
 
 export interface DetailsRecipeArg {
   semanticColorNames: string[]
@@ -14,43 +14,68 @@ const detailsRecipe = ({ semanticColorNames }: DetailsRecipeArg) => {
     base: {
       details: {
         display: 'block',
-        overflow: 'hidden',
         borderRadius: 'sm',
-        transition: 'all',
+        backgroundColor: 'var(--details-background-color)',
-        transitionTimingFunction: 'easeOut',
+        color: 'var(--details-color)',
-        transitionDuration: 'normal'
+        border: '1px solid',
+        borderColor: 'var(--details-background-widget)',
+        _open: {
+          '& .details__summary': {
+            backgroundColor: 'var(--details-background-widget-active)',
+            borderBottomRightRadius: 0,
+            borderBottomLeftRadius: 0
+          }
+        }
       },
       summary: {
         display: 'block',
-        overflow: 'hidden',
         borderRadius: 'sm',
-        padding: 'xs',
+        backgroundColor: 'var(--details-background-widget)',
+        color: 'var(--details-color)',
         cursor: 'pointer',
-        transition: 'all',
+        paddingBlock: 'calc({spacing.xs} * 0.75)',
-        transitionTimingFunction: 'easeOut',
+        paddingInline: 'calc({spacing.xs} * 1.25)',
-        transitionDuration: 'normal'
+        transitionProperty: 'color, background-color',
+        transitionDuration: 'normal',
+        transitionTimingFunction: 'easeIn',
+        _hover: {
+          backgroundColor: 'var(--details-background-widget-hover)'
+        }
+      },
+      content: {
+        padding: 'sm'
       }
     },
     variants: {
       color: {
         ...Object.fromEntries(
           colorVariants.map((color) => [
-            color as keyof typeof colorVariants,
+            color,
             {
-              summary: {
+              ...Object.fromEntries(
-                backgroundColor: `{colors.${color}.3}`,
+                detailsSlots.map((slot) => {
-                color: `{colors.${color}.12}`,
+                  // return [slot, {}]
-                _hover: {
+                  switch (slot) {
-                  backgroundColor: `{colors.${color}.4}`
+                    case 'details':
-                },
+                      return [
-                '[open] &': {
+                        slot,
-                  backgroundColor: `{colors.${color}.4}`
+                        {
-                }
+                          '--details-background-color': `colors.${color}.2`,
-              },
+                          '--details-background-widget': `colors.${color}.3`,
-              details: {
+                          '--details-background-widget-hover': `colors.${color}.4`,
-                backgroundColor: `{colors.${color}.2}`,
+                          '--details-background-widget-active': `colors.${color}.5`,
-                color: `{colors.${color}.12}`
+                          '--details-color': `colors.${color}.12`
+                        } as SystemStyleObject
+                      ]
+                    case 'summary':
+                      return [slot, {} as SystemStyleObject]
+                    case 'content':
+                      return [slot, {} as SystemStyleObject]
+                    default:
+                      return [slot, {}]
                   }
+                })
+              )
             }
           ])
         )