110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
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,
|
|
{
|
|
'&::selection': {
|
|
backgroundColor: `{colors.${color}.2}`,
|
|
color: `{colors.${color}.9}`
|
|
}
|
|
}
|
|
])
|
|
)
|
|
},
|
|
variant: {
|
|
...Object.fromEntries(markVariants.map((variant) => [variant, {}]))
|
|
}
|
|
},
|
|
compoundVariants: markVariants.flatMap((variant) =>
|
|
colors.map((color) => {
|
|
switch (variant) {
|
|
case 'highlight':
|
|
return {
|
|
color,
|
|
variant,
|
|
css: {
|
|
position: 'relative',
|
|
marginBlock: '0',
|
|
marginInline: '-0.4ch',
|
|
paddingBlock: '0.2ch',
|
|
paddingInline: '0.6ch',
|
|
borderTopLeftRadius: '0.5em 40%',
|
|
borderTopRightRadius: '0.3em 15%',
|
|
borderBottomLeftRadius: '0.45em 80%',
|
|
borderBottomRightRadius: '0.75em 60%',
|
|
backgroundClip: 'padding-box',
|
|
fontWeight: 'semibold',
|
|
color: `{colors.${color}.foreground}`,
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
inset: '0',
|
|
width: '100%',
|
|
height: '80%',
|
|
top: '50%',
|
|
left: '50%',
|
|
boxDecorationBreak: 'clone',
|
|
WebkitBoxDecorationBreak: 'clone',
|
|
borderRadius: 'inherit',
|
|
background: 'inherit',
|
|
backgroundImage: `linear-gradient(to right,color-mix(in srgb, {colors.${color}.9} 15%,transparent) 0%,color-mix(in srgb, {colors.${color}.9} 65%, transparent) 12%, color-mix(in srgb, {colors.${color}.9} 20%, transparent 80%))`,
|
|
transform: 'translate(-50%, -50%) skewX(-15deg)',
|
|
zIndex: '-1'
|
|
}
|
|
} 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: 'primary',
|
|
variant: 'bold'
|
|
}
|
|
})
|
|
}
|
|
|
|
export default markRecipe
|
|
export { markVariants }
|