mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
export default (config: { colors: string[] }) => ({
|
|
slots: {
|
|
root: 'relative',
|
|
base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500'
|
|
},
|
|
|
|
variants: {
|
|
size: {
|
|
'2xs': {
|
|
base: 'text-xs gap-x-1 px-2 py-1'
|
|
},
|
|
xs: {
|
|
base: 'text-sm gap-x-1.5 px-2.5 py-1'
|
|
},
|
|
sm: {
|
|
base: 'text-sm gap-x-1.5 px-2.5 py-1.5'
|
|
},
|
|
md: {
|
|
base: 'text-sm gap-x-1.5 px-3 py-2'
|
|
},
|
|
lg: {
|
|
base: 'text-sm gap-x-2.5 px-3.5 py-2.5'
|
|
},
|
|
xl: {
|
|
base: 'text-base gap-x-2.5 px-3.5 py-2.5'
|
|
}
|
|
},
|
|
|
|
variant: {
|
|
outline: '',
|
|
none: 'bg-transparent focus:ring-0 focus:shadow-none'
|
|
},
|
|
|
|
color: {
|
|
...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
|
|
white: '',
|
|
gray: ''
|
|
}
|
|
|
|
},
|
|
|
|
compoundVariants: [
|
|
...config.colors.map((color: string) => ({
|
|
color,
|
|
variant: 'outline',
|
|
class: `shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-${color}-500 dark:ring-${color}-400 focus:ring-2 focus:ring-${color}-500 dark:focus:ring-${color}-400`
|
|
})), {
|
|
color: 'white',
|
|
variant: 'outline',
|
|
class: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
}, {
|
|
color: 'gray',
|
|
variant: 'outline',
|
|
class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
}
|
|
],
|
|
|
|
defaultVariants: {
|
|
size: 'sm',
|
|
color: 'white',
|
|
variant: 'outline'
|
|
}
|
|
})
|