refactor: update details recipe

src/index.ts

@@ -1,20 +1,21 @@
 import { definePreset } from '@pandacss/dev'
-import generateColors from '@/colors/generateColors.js'
-import generateNeutralColor from '@/colors/generateNeutralColor.js'
-import buttonRecipe from '@/recipes/button.js'
-import detailsRecipe from '@/recipes/details.js'
-import inputRecipe from '@/recipes/input.js'
-import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types.js'
-import generateSemanticColors from './colors/generateSemanticColors.js'
-import fadeKeyframes from './keyframes/fade.js'
-import pulseKeyframes from './keyframes/pulse.js'
-import shimmerKeyframes from './keyframes/shimmer.js'
-import skeletonPattern from './patterns/skeleton.js'
-import alertRecipe from './recipes/alert.js'
-import chipRecipe from './recipes/chip.js'
-import iconButtonRecipe from './recipes/iconButton.js'
-import markRecipe from './recipes/mark.js'
-import selectRecipe from './recipes/select.js'
+import generateColors from '@/colors/generateColors'
+import generateNeutralColor from '@/colors/generateNeutralColor'
+import generateSemanticColors from '@/colors/generateSemanticColors'
+import fadeKeyframes from '@/keyframes/fade'
+import pulseKeyframes from '@/keyframes/pulse'
+import shimmerKeyframes from '@/keyframes/shimmer'
+import skeletonPattern from '@/patterns/skeleton'
+import alertRecipe from '@/recipes/alert'
+import buttonRecipe from '@/recipes/button'
+import chipRecipe from '@/recipes/chip'
+import detailsRecipe from '@/recipes/details'
+import iconButtonRecipe from '@/recipes/iconButton'
+import inputRecipe from '@/recipes/input'
+import markRecipe from '@/recipes/mark'
+import progressBarRecipe from '@/recipes/progressBar'
+import selectRecipe from '@/recipes/select'
+import { type BrandColor, type Color, type ColorVariation, color, type NeutralColor } from '@/types'
 
 export type ThemeConfig = {
   neutral?: NeutralColor
@@ -50,6 +51,7 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
         mark: markRecipe({ semanticColorNames: semanticColorKeysArray }),
         input: inputRecipe({ semanticColorNames: semanticColorKeysArray }),
         iconButton: iconButtonRecipe({ semanticColorNames: semanticColorKeysArray }),
+        progressBar: progressBarRecipe({ semanticColorNames: semanticColorKeysArray }),
         select: selectRecipe({ semanticColorNames: semanticColorKeysArray })
       },
       tokens: {
@@ -191,9 +193,10 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
     conditions: {
       extend: {
         active: '&:is(:active, [data-active], [data-state="active"], [data-state="open"])',
-        open: '&:is(:open, [open], [data-open], [data-state="open"])',
         checked: '&:is(:checked, [data-checked], [data-state="checked"])',
-        disabled: '&:is(:disabled, [data-disabled], [data-state="disabled"])'
+        disabled: '&:is(:disabled, [data-disabled], [data-state="disabled"])',
+        indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
+        open: '&:is(:open, [open], [data-open], [data-state="open"])'
       }
     },
     globalCss: {

src/recipes/button.ts

@@ -26,6 +26,7 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
       transitionProperty: 'color, background-color, border-color',
       transitionDuration: 'normal',
       transitionTimingFunction: 'easeOut',
+      fontWeight: 'semibold',
       _disabled: {
         cursor: 'not-allowed',
         _hover: {

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',
-        transitionTimingFunction: 'easeOut',
-        transitionDuration: 'normal'
+        backgroundColor: 'var(--details-background-color)',
+        color: 'var(--details-color)',
+        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',
-        transitionTimingFunction: 'easeOut',
-        transitionDuration: 'normal'
+        paddingBlock: 'calc({spacing.xs} * 0.75)',
+        paddingInline: 'calc({spacing.xs} * 1.25)',
+        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: {
-                backgroundColor: `{colors.${color}.3}`,
-                color: `{colors.${color}.12}`,
-                _hover: {
-                  backgroundColor: `{colors.${color}.4}`
-                },
-                '[open] &': {
-                  backgroundColor: `{colors.${color}.4}`
-                }
-              },
-              details: {
-                backgroundColor: `{colors.${color}.2}`,
-                color: `{colors.${color}.12}`
-              }
+              ...Object.fromEntries(
+                detailsSlots.map((slot) => {
+                  // return [slot, {}]
+                  switch (slot) {
+                    case 'details':
+                      return [
+                        slot,
+                        {
+                          '--details-background-color': `colors.${color}.2`,
+                          '--details-background-widget': `colors.${color}.3`,
+                          '--details-background-widget-hover': `colors.${color}.4`,
+                          '--details-background-widget-active': `colors.${color}.5`,
+                          '--details-color': `colors.${color}.12`
+                        } as SystemStyleObject
+                      ]
+                    case 'summary':
+                      return [slot, {} as SystemStyleObject]
+                    case 'content':
+                      return [slot, {} as SystemStyleObject]
+                    default:
+                      return [slot, {}]
+                  }
+                })
+              )
             }
           ])
         )

src/recipes/progressBar.ts

@@ -0,0 +1,59 @@
+import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'
+
+interface ProgressBarRecipeArg {
+  semanticColorNames: string[]
+}
+
+const progressBarRecipe = ({ semanticColorNames }: ProgressBarRecipeArg) => {
+  const colors = ['neutral', ...semanticColorNames]
+  return defineRecipe({
+    className: 'progress-bar',
+    base: {
+      '-webkit-appearance': 'none',
+      appearance: 'none',
+      height: '1em',
+      borderRadius: 'sm',
+      border: '1px solid',
+      overflow: 'hidden',
+      '&::-webkit-progress-value, &::-moz-progress-bar': {
+        borderRadius: 'sm'
+      }
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              backgroundColor: `${color}.2`,
+              borderColor: `${color}.7`,
+              '&::-webkit-progress-bar': {
+                backgroundColor: `${color}.2`
+              },
+              '&::-webkit-progress-value, &::-moz-progress-bar': {
+                backgroundColor: `${color}.9`
+              },
+              _indeterminate: {
+                '&::-webkit-progress-value, &::-moz-progress-bar': {
+                  animationName: 'shimmer',
+                  animationIterationCount: 'infinite',
+                  animationDuration: '1s'
+                }
+              }
+            } as SystemStyleObject
+          ])
+        )
+      },
+      fullWidth: {
+        true: {
+          width: '100%'
+        }
+      }
+    },
+    defaultVariants: {
+      color: 'neutral'
+    }
+  })
+}
+
+export default progressBarRecipe