srjuggernaut-panda-preset/src/recipes/mark.ts

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 }