SrJuggernaut/srjuggernaut-panda-preset
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: initial commit

Browse Source 
I just realized i was using this without commiting it, so this is a very big commit
This commit is contained in:
SrJuggernaut
2025-08-31 19:43:26 -06:00
commit 88be319334
19 changed files with 1301 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/recipes/button.ts Normal file
View File

@@ -0,0 +1,143 @@
import { defineRecipe } from '@pandacss/dev'
export const buttonVariants = ['solid', 'outline', 'ghost'] as const
interface ButtonRecipeArg {
semanticColors: string[]
}
const buttonRecipe = ({ semanticColors }: ButtonRecipeArg) => {
const colorVariants = ['neutral', ...semanticColors]
return defineRecipe({
className: 'button',
base: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
gap: '0.5em',
width: 'fit-content',
borderRadius: '4px',
paddingBlock: '0.25em',
paddingInline: '0.5em',
cursor: 'pointer',
transition: 'all 200ms ease-in-out'
},
variants: {
color: {
...Object.fromEntries(colorVariants.map((color) => [color, {}]))
},
size: {
small: {
fontSize: '0.875em'
},
medium: {
fontSize: '1em'
},
large: {
fontSize: '1.125em'
}
},
variant: {
...Object.fromEntries(buttonVariants.map((variant) => [variant, {}]))
}
},
compoundVariants: colorVariants.flatMap((color) =>
buttonVariants.map((variant) => {
switch (variant) {
case 'outline':
return {
color,
variant,
css: {
border: '1px solid',
borderColor: `${color}.9`,
backgroundColor: 'transparent',
color: `${color}.9`,
_hover: {
backgroundColor: `${color}.10`,
color: `${color}.foreground`
},
_active: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
color: `${color}.foreground`
},
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `${color}.4/50`
}
}
}
}
case 'ghost':
return {
color,
variant,
css: {
border: 'none',
backgroundColor: 'transparent',
color: `${color}.9`,
_hover: {
backgroundColor: `${color}.10`,
color: `${color}.foreground`
},
_active: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
color: `${color}.foreground`
},
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`
}
}
}
}
default:
return {
color,
variant,
css: {
border: 'none',
backgroundColor: `${color}.9`,
color: `${color}.foreground`,
_hover: {
backgroundColor: `${color}.10`,
color: `${color}.foreground`
},
_active: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
color: `${color}.foreground`
},
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`
}
}
}
}
}
})
),
defaultVariants: {
color: 'neutral',
size: 'medium',
variant: 'solid'
}
})
}
export default buttonRecipe

59
src/recipes/details.ts Normal file
View File

@@ -0,0 +1,59 @@
import { defineSlotRecipe } from '@pandacss/dev'
export interface DetailsRecipeArg {
semanticColors: string[]
}
export const detailsRecipe = ({ semanticColors }: DetailsRecipeArg) => {
const colorVariants = ['neutral', ...semanticColors]
const recipe = defineSlotRecipe({
className: 'details',
slots: ['summary', 'details'],
base: {
details: {
display: 'block',
overflow: 'hidden',
borderRadius: '0.25em',
transition: 'all 300ms ease-in-out'
},
summary: {
display: 'block',
overflow: 'hidden',
borderRadius: '0.25em',
padding: '0.25em',
cursor: 'pointer',
transition: 'all 300ms ease-in-out'
}
},
variants: {
color: {
...Object.fromEntries(
colorVariants.map((color) => [
color as keyof typeof colorVariants,
{
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}`
}
}
])
)
}
},
defaultVariants: {
color: 'neutral'
}
})
return recipe
}

36
src/recipes/input.ts Normal file
View File

@@ -0,0 +1,36 @@
import { defineRecipe } from '@pandacss/dev'
export const inputRecipe = defineRecipe({
className: 'input',
base: {
display: 'inline-flex',
borderRadius: '4px',
cursor: 'pointer',
paddingBlock: '0.25em',
paddingInline: '0.5em',
border: '1px solid',
borderColor: 'neutral.7',
backgroundColor: 'neutral.3',
color: 'neutral.12',
outline: 'none',
transition: 'all 200ms ease-in-out',
_hover: {
backgroundColor: 'neutral.4'
},
_disabled: {
backgroundColor: 'neutral.3/50',
color: 'neutral.11/50',
borderColor: 'neutral.6/50',
cursor: 'not-allowed',
_hover: {
backgroundColor: 'neutral.6/50',
color: 'neutral.11/50'
}
},
_active: {
backgroundColor: 'neutral.8'
}
}
})
export default inputRecipe