TextInput not respecting custom theme overwrites

[mkbctrl]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

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} />
}

Current behavior

Screen.Recording.2024-01-08.at.20.48.17.mov

Expected behavior

Border color should match the color theme

[tulup-conner]

Thanks. Can you provide your tailwind.config.js?

[SutuSebastian]

Fixed by #1498 in [email protected] release.