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

feat: enhance input recipe with size variants and improve styling

Browse Source
This commit is contained in:
SrJuggernaut
2025-09-27 14:05:26 -06:00
parent eb37e1ab1e
commit 1b44a46ae9
2 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/recipes/button.ts
View File

@@ -21,7 +21,7 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
paddingBlock: 'xs',
paddingInline: 'sm',
cursor: 'pointer',
transition: 'all',
transitionProperty: 'color, background-color, border-color',
transitionDuration: 'normal',
transitionTimingFunction: 'easeOut'
},

52
src/recipes/input.ts
View File

@@ -12,8 +12,6 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
base: {
display: 'inline-flex',
borderRadius: 'sm',
paddingBlock: 'xs',
paddingInline: 'sm',
border: '1px solid',
outline: 'none',
transitionProperty: 'color, background-color, border-color',
@@ -25,6 +23,23 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
}
},
variants: {
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'
}
},
color: {
...Object.fromEntries(
colorVariants.map((color) => [
@@ -33,34 +48,49 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
borderColor: `${color}.6`,
backgroundColor: `${color}.2`,
color: `${color}.12`,
_placeholder: {
color: `${color}.11`
},
_hover: {
backgroundColor: `${color}.3`
},
_active: {
backgroundColor: `${color}.4`
},
_focus: {
backgroundColor: `${color}.3`,
borderColor: `${color}.7`
},
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
_placeholder: {
color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
},
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`
backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
},
_focus: {
backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`
backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
}
}
}
])
)
},
fullWidth: {
true: {
width: '100%'
}
}
},
defaultVariants: {
size: 'medium',
color: 'neutral'
}
})