94 lines
1.9 KiB
TypeScript
94 lines
1.9 KiB
TypeScript
import { define } from '@because/forge'
|
|
import { theme } from '../themes'
|
|
|
|
export const Form = define('Form', {
|
|
base: 'form',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 16,
|
|
})
|
|
|
|
export const FormField = define('FormField', {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 6,
|
|
})
|
|
|
|
export const FormLabel = define('FormLabel', {
|
|
base: 'label',
|
|
fontSize: 13,
|
|
fontWeight: 500,
|
|
color: theme('colors-text'),
|
|
})
|
|
|
|
export const FormInput = define('FormInput', {
|
|
base: 'input',
|
|
padding: '8px 12px',
|
|
background: theme('colors-bgSubtle'),
|
|
border: `1px solid ${theme('colors-border')}`,
|
|
borderRadius: theme('radius-md'),
|
|
color: theme('colors-text'),
|
|
fontSize: 14,
|
|
selectors: {
|
|
'&:focus': {
|
|
outline: 'none',
|
|
borderColor: theme('colors-primary'),
|
|
},
|
|
'&::placeholder': {
|
|
color: theme('colors-textFaint'),
|
|
},
|
|
},
|
|
})
|
|
|
|
export const FormError = define('FormError', {
|
|
fontSize: 13,
|
|
color: theme('colors-error'),
|
|
})
|
|
|
|
export const FormActions = define('FormActions', {
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
gap: 8,
|
|
marginTop: 8,
|
|
})
|
|
|
|
export const FormSelect = define('FormSelect', {
|
|
base: 'select',
|
|
padding: '8px 12px',
|
|
background: theme('colors-bgSubtle'),
|
|
border: `1px solid ${theme('colors-border')}`,
|
|
borderRadius: theme('radius-md'),
|
|
color: theme('colors-text'),
|
|
fontSize: 14,
|
|
cursor: 'pointer',
|
|
selectors: {
|
|
'&:focus': {
|
|
outline: 'none',
|
|
borderColor: theme('colors-primary'),
|
|
},
|
|
},
|
|
})
|
|
|
|
export const FormCheckbox = define('FormCheckbox', {
|
|
base: 'input',
|
|
width: 16,
|
|
height: 16,
|
|
margin: 0,
|
|
cursor: 'pointer',
|
|
accentColor: theme('colors-primary'),
|
|
})
|
|
|
|
export const FormCheckboxField = define('FormCheckboxField', {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
})
|
|
|
|
export const FormCheckboxLabel = define('FormCheckboxLabel', {
|
|
base: 'label',
|
|
fontSize: 13,
|
|
fontWeight: 500,
|
|
color: theme('colors-text'),
|
|
cursor: 'pointer',
|
|
})
|