Support colors in Avatar component

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]

@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!

[sldk-yuri]

@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.