Open mkbctrl opened 6 months ago
export enum InputTextTheme { Gray = 'gray', Info = 'info', Failure = 'failure', Warning = 'warning', Success = 'success', } const _theme: CustomFlowbiteTheme['textInput'] = { base: 'flex', addon: 'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400', field: { base: 'relative w-full', icon: { base: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3', svg: 'h-5 w-5 text-gray-500 dark:text-gray-400', }, rightIcon: { base: 'pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3', svg: 'h-5 w-5 text-gray-500 dark:text-gray-400', }, input: { base: 'block w-full border disabled:cursor-not-allowed disabled:opacity-70', sizes: { sm: 'p-2 sm:text-xs', md: 'p-2.5 text-sm', lg: 'sm:text-md p-4', }, colors: { [InputTextTheme.Gray]: 'bg-gray-50 border-gray-300 text-gray-900 placeholder:text-gray-500 focus:border-indigo-600 focus:ring-indigo-600 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-indigo-600 dark:focus:ring-indigo-600', [InputTextTheme.Info]: 'border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 focus:border-indigo-500 focus:ring-indigo-500 dark:border-indigo-400 dark:bg-indigo-100 dark:focus:border-indigo-500 dark:focus:ring-indigo-500', [InputTextTheme.Failure]: 'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500', [InputTextTheme.Warning]: 'border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500', [InputTextTheme.Success]: 'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500', }, withRightIcon: { on: 'pr-10', off: '', }, withIcon: { on: 'pl-10', off: '', }, withAddon: { on: 'rounded-r-lg', off: 'rounded-lg', }, withShadow: { on: 'shadow-sm dark:shadow-sm-light', off: '', }, }, }, } interface InputTextProps extends TextInputProps { color?: InputTextTheme } export const InputText: FC<InputTextProps> = ({ theme = _theme, color = InputTextTheme.Gray, ...props }) => { return <FlowbiteInputText theme={theme} color={color} {...props} /> }
https://github.com/themesberg/flowbite-react/assets/10107362/d05a26d3-d771-436b-bc05-29a366e03515
Border color should match the color theme
Thanks. Can you provide your tailwind.config.js?
Steps to reproduce
Current behavior
https://github.com/themesberg/flowbite-react/assets/10107362/d05a26d3-d771-436b-bc05-29a366e03515
Expected behavior
Border color should match the color theme