@nurl/panda-preset
Version:
Official Panda-CSS preset for the Ganglion Design System.
55 lines (50 loc) • 912 B
text/typescript
import { defineSlotRecipe } from '@pandacss/dev'
export const progress = defineSlotRecipe({
className: 'progress',
description: 'The styles for the ProgressBar component',
slots: ['root', 'bar'],
base: {
root: {
bgColor: 'neutral.border.initial',
overflowY: 'hidden',
position: 'relative',
transition: 'width 300ms ease',
w: 'full',
willChange: 'width',
},
bar: {
bgColor: 'neutral.text.300',
h: 'full',
w: '0',
},
},
variants: {
usage: {
inset: {},
round: {
root: {
rounded: 'lg',
},
bar: {
rounded: 'lg',
},
},
},
size: {
md: {
root: {
h: '0.25rem',
},
},
lg: {
root: {
h: '0.5rem',
},
},
},
},
defaultVariants: {
usage: 'round',
size: 'lg',
},
})