Support colors in Avatar component

[tiagossa1]

Avatar component has color property, but it doesn't work. Any color that is passed doesn't change anything.
IMO, it should have the following colours:

• dark
• failure
• gray/info/light
• purple
• success
• warning
• pink

Gray, info and light, if all added, should have different tones, to distinguish them.

I've tried to implemented and almost got it to work, so I think whoever picks this should:

• Change default.ts and add color styling on 'avatar' key value (see snippets below)
• Avatar.tsx must extends from Omit instead of PropsWithChildren and have 'color' argument passed. It should have another prop called color with a custom interface that explicit tells the colour options. Add theme.color[color] at least on the placeholder HTML element.
• Add the custom interface from previous step into FlowbiteTheme.ts on avatar key.

[tiagossa1]

Avatar.tsx

Line 8:
export interface AvatarProps extends Omit<ComponentProps<'div'>, 'color'>

Line 17, before closing the object:
color?: keyof AvatarColors;

Line 19, after closing the object and before AvatarSizes:

export interface AvatarColors
  extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'pink' | 'purple' | 'success' | 'warning'> {
  [key: string]: string;
}

Line 35 or somewhere before ...props:
color = 'gray', - this sets the default colour of the avatar.

Line 62:
theme.color[color],

[tiagossa1]

FlowbiteTheme.ts

Line 89, before closing the object on line 90:
color: AvatarColors; - imported from Avatar.tsx.

[tiagossa1]

default.ts

Line 100, after closing the object on line 99:

    color: {
      dark: 'bg-gray-800 dark:bg-gray-800',
      failure: 'bg-red-500 dark:bg-red-700',
      gray: 'border-gray-500 dark:text-gray-400',
      info: 'bg-blue-400 dark:bg-blue-800',
      light: 'border-gray-500 dark:bg-gray-600',
      purple: 'bg-purple-500 dark:bg-purple-600',
      success: 'bg-green-500 dark:bg-green-500',
      warning: 'bg-yellow-300 dark:bg-yellow-500',
      pink: 'bg-pink-500 dark:bg-pink-500',
    },

I've personally chose these colours, but this can be changed.

[yurisldk]

@rluders @tiagossa1 just did PR. @tiagossa1 thank you for the detailed description and steps, it was a really helpful. I've used pallet that was suggested by @tiagossa1 Also I'm going to update docs for Avatar component as well soon.

[tiagossa1]

@sldk-yuri you're welcome! I was checking the original code and almost made it work, so I thought that this was the way to go! Great job!