119 lines
3.1 KiB
TypeScript
119 lines
3.1 KiB
TypeScript
import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'
|
|
|
|
export const chipVariants = ['solid', 'outline', 'ghost'] as const
|
|
export const chipSizes = ['small', 'medium', 'large'] as const
|
|
|
|
interface ChipRecipeArg {
|
|
semanticColorNames: string[]
|
|
}
|
|
|
|
const chipRecipe = ({ semanticColorNames }: ChipRecipeArg) => {
|
|
const colors = ['neutral', ...semanticColorNames]
|
|
return defineRecipe({
|
|
className: 'chip',
|
|
base: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 'xs',
|
|
lineHeight: '1',
|
|
borderRadius: 'sm',
|
|
fontWeight: 'semibold',
|
|
lineHeightStep: 'none',
|
|
userSelect: 'none'
|
|
},
|
|
variants: {
|
|
color: {
|
|
...Object.fromEntries(colors.map((color) => [color, {}]))
|
|
},
|
|
variant: {
|
|
...Object.fromEntries(chipVariants.map((variant) => [variant, {}]))
|
|
},
|
|
size: {
|
|
...Object.fromEntries(
|
|
chipSizes.map((size) => {
|
|
switch (size) {
|
|
case 'small':
|
|
return [
|
|
size,
|
|
{
|
|
paddingBlock: 'calc({spacing.sm} * 0.5)',
|
|
paddingInline: 'calc({spacing.sm} * 0.75)',
|
|
fontSize: 'xs'
|
|
} as SystemStyleObject
|
|
]
|
|
case 'medium':
|
|
return [
|
|
size,
|
|
{
|
|
paddingBlock: 'calc({spacing.sm} * 0.75)',
|
|
paddingInline: 'calc({spacing.sm})',
|
|
fontSize: 'sm'
|
|
} as SystemStyleObject
|
|
]
|
|
case 'large':
|
|
return [
|
|
size,
|
|
{
|
|
paddingBlock: 'calc({spacing.sm})',
|
|
paddingInline: 'calc({spacing.sm} * 1.25)',
|
|
fontSize: 'base'
|
|
} as SystemStyleObject
|
|
]
|
|
default:
|
|
return [size, {}]
|
|
}
|
|
})
|
|
)
|
|
}
|
|
},
|
|
compoundVariants: colors.flatMap((color) => {
|
|
return chipVariants.map((variant) => {
|
|
switch (variant) {
|
|
case 'solid':
|
|
return {
|
|
color,
|
|
variant,
|
|
css: {
|
|
backgroundColor: `{colors.${color}.9}`,
|
|
color: `{colors.${color}.foreground}`
|
|
}
|
|
}
|
|
case 'outline':
|
|
return {
|
|
color,
|
|
variant,
|
|
css: {
|
|
border: '1px solid',
|
|
borderColor: `{colors.${color}.6}`,
|
|
color: `{colors.${color}.9}`
|
|
}
|
|
}
|
|
case 'ghost':
|
|
return {
|
|
color,
|
|
variant,
|
|
css: {
|
|
backgroundColor: `{colors.${color}.2}`,
|
|
color: `{colors.${color}.9}`
|
|
}
|
|
}
|
|
default:
|
|
return {
|
|
color,
|
|
variant,
|
|
css: {}
|
|
}
|
|
}
|
|
})
|
|
}),
|
|
defaultVariants: {
|
|
color: 'neutral',
|
|
size: 'medium',
|
|
variant: 'solid'
|
|
}
|
|
})
|
|
}
|
|
|
|
export default chipRecipe
|