125 lines
3.8 KiB
TypeScript
125 lines
3.8 KiB
TypeScript
import { defineRecipe } from '@pandacss/dev'
|
|
|
|
export const inputSizes = ['small', 'medium', 'large'] as const
|
|
export interface InputRecipeArg {
|
|
semanticColorNames: string[]
|
|
}
|
|
|
|
export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
|
|
const colorVariants = ['neutral', ...semanticColorNames]
|
|
|
|
return defineRecipe({
|
|
className: 'input',
|
|
base: {
|
|
display: 'inline-flex',
|
|
borderRadius: 'sm',
|
|
border: '1px solid',
|
|
outline: 'none',
|
|
transitionProperty: 'color, background-color, border-color',
|
|
transitionDuration: 'normal',
|
|
transitionTimingFunction: 'easeOut',
|
|
cursor: 'text',
|
|
focusVisibleRing: 'outside',
|
|
focusRingWidth: '2px',
|
|
focusRingOffset: '0px',
|
|
_disabled: {
|
|
cursor: 'not-allowed'
|
|
}
|
|
},
|
|
variants: {
|
|
size: {
|
|
...Object.fromEntries(
|
|
inputSizes.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, {}]
|
|
}
|
|
})
|
|
)
|
|
},
|
|
color: {
|
|
...Object.fromEntries(
|
|
colorVariants.map((color) => [
|
|
color,
|
|
{
|
|
borderColor: `${color}.6`,
|
|
backgroundColor: `${color}.2`,
|
|
color: `${color}.12`,
|
|
focusRingColor: `{colors.${color}.7}`,
|
|
_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} 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} 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} 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'
|
|
}
|
|
})
|
|
}
|
|
|
|
export default inputRecipe
|