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

feat: enhance UI components and update build configuration

Browse Source
This commit is contained in:
SrJuggernaut
2025-09-29 12:31:59 -06:00
parent 9c49f46ee7
commit cb3f7fb701
8 changed files with 125 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/recipes/button.ts
View File

@@ -1,6 +1,7 @@
import { defineRecipe } from '@pandacss/dev'
export const buttonVariants = ['solid', 'outline', 'ghost'] as const
export const buttonSizes = ['small', 'medium', 'large'] as const
interface ButtonRecipeArg {
semanticColorNames: string[]
@@ -12,6 +13,7 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
return defineRecipe({
className: 'button',
base: {
all: 'unset',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
@@ -23,28 +25,54 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
cursor: 'pointer',
transitionProperty: 'color, background-color, border-color',
transitionDuration: 'normal',
transitionTimingFunction: 'easeOut'
transitionTimingFunction: 'easeOut',
_disabled: {
cursor: 'not-allowed',
_hover: {
cursor: 'not-allowed'
}
}
},
variants: {
color: {
...Object.fromEntries(colorVariants.map((color) => [color, {}]))
},
size: {
small: {
paddingBlock: 'calc({spacing.xs} * 0.5)',
paddingInline: 'calc({spacing.xs} * 1)',
fontSize: 'sm'
},
medium: {
paddingBlock: 'calc({spacing.xs} * 0.75)',
paddingInline: 'calc({spacing.xs} * 1.25)',
fontSize: 'base'
},
large: {
paddingBlock: 'calc({spacing.xs} * 1)',
paddingInline: 'calc({spacing.xs} * 1.5)',
fontSize: 'lg'
}
...Object.fromEntries(
buttonSizes.map((size) => {
switch (size) {
case 'small':
return [
size,
{
paddingBlock: 'calc({spacing.xs} * 0.5)',
paddingInline: 'calc({spacing.xs} * 1)',
fontSize: 'sm'
}
]
case 'medium':
return [
size,
{
paddingBlock: 'calc({spacing.xs} * 0.75)',
paddingInline: 'calc({spacing.xs} * 1.25)',
fontSize: 'base'
}
]
case 'large':
return [
size,
{
paddingBlock: 'calc({spacing.xs} * 1)',
paddingInline: 'calc({spacing.xs} * 1.5)',
fontSize: 'lg'
}
]
default:
return [size, {}]
}
})
)
},
variant: {
...Object.fromEntries(buttonVariants.map((variant) => [variant, {}]))
@@ -74,8 +102,6 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
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`
@@ -102,14 +128,13 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
_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)`
}
}
}
}
// case 'solid' or unmatched:
default:
return {
color,
@@ -129,8 +154,6 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
_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)`