feat(avatar): adds color prop and test case for it

Adds color property to Avatar component to change image ring color. Works only if border property is
true. Adds 'color' test case to the Avatar`s Theme test case

themesberg#409

src/lib/components/Avatar/Avatar.spec.tsx

@@ -6,7 +6,7 @@ import { Avatar } from './Avatar';
 
 describe('Components / Avatar', () => {
   describe('Theme', () => {
-    it('should use custom classes', () => {
+    it('should use custom sizes', () => {
       const theme: CustomFlowbiteTheme = {
         avatar: {
           size: {
@@ -22,6 +22,28 @@ describe('Components / Avatar', () => {
 
       expect(img()).toHaveClass('h-64 w-64');
     });
+
+    it('should use custom colors', () => {
+      const theme: CustomFlowbiteTheme = {
+        avatar: {
+          color: {
+            rose: 'ring-rose-500 dark:ring-rose-400',
+          },
+        },
+      };
+      render(
+        <Flowbite theme={{ theme }}>
+          <Avatar
+            bordered
+            color="rose"
+            img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            alt="Your avatar"
+          />
+        </Flowbite>,
+      );
+
+      expect(img()).toHaveClass('ring-rose-500 dark:ring-rose-400');
+    });
   });
   describe('Placeholder', () => {
     it('should display placeholder initials', () => {

src/lib/components/Avatar/Avatar.tsx

@@ -1,14 +1,15 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import type { FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteColors, FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import AvatarGroup from './AvatarGroup';
 import AvatarGroupCounter from './AvatarGroupCounter';
 
-export interface AvatarProps extends PropsWithChildren<ComponentProps<'div'>> {
+export interface AvatarProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'color'>> {
   alt?: string;
   bordered?: boolean;
   img?: string;
+  color?: keyof AvatarColors;
   rounded?: boolean;
   size?: keyof AvatarSizes;
   stacked?: boolean;
@@ -17,6 +18,11 @@ export interface AvatarProps extends PropsWithChildren<ComponentProps<'div'>> {
   placeholderInitials?: string;
 }
 
+export interface AvatarColors
+  extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'pink' | 'purple' | 'success' | 'warning'> {
+  [key: string]: string;
+}
+
 export interface AvatarSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'md' | 'lg' | 'xl'> {
   [key: string]: string;
 }
@@ -26,6 +32,7 @@ const AvatarComponent: FC<AvatarProps> = ({
   bordered = false,
   children,
   img,
+  color = 'light',
   rounded = false,
   size = 'md',
   stacked = false,
@@ -38,6 +45,7 @@ const AvatarComponent: FC<AvatarProps> = ({
   const theme = useTheme().theme.avatar;
   const imgClassName = classNames(
     bordered && theme.bordered,
+    bordered && theme.color[color],
     rounded && theme.rounded,
     stacked && theme.stacked,
     theme.img.on,

src/lib/components/Flowbite/FlowbiteTheme.ts

@@ -1,6 +1,6 @@
 import { DeepPartial } from '..';
 import type { AlertColors } from '../Alert/Alert';
-import type { AvatarSizes } from '../Avatar/Avatar';
+import type { AvatarColors, AvatarSizes } from '../Avatar/Avatar';
 import type { BadgeColors, BadgeSizes } from '../Badge';
 import type {
   ButtonColors,
@@ -72,6 +72,7 @@ export interface FlowbiteTheme extends Record<string, unknown> {
       on: string;
       placeholder: string;
     };
+    color: AvatarColors;
     rounded: string;
     size: AvatarSizes;
     stacked: string;

src/lib/theme/default.ts

@@ -60,13 +60,24 @@ const theme: FlowbiteTheme = {
   },
   avatar: {
     base: 'flex justify-center items-center space-x-4',
-    bordered: 'p-1 ring-2 ring-gray-300 dark:ring-gray-500',
+    bordered: 'p-1 ring-2',
     img: {
       off: 'rounded relative overflow-hidden bg-gray-100 dark:bg-gray-600',
       on: 'rounded',
       placeholder: 'absolute w-auto h-auto text-gray-400 -bottom-1',
     },
     rounded: '!rounded-full',
+    color: {
+      dark: 'ring-gray-800 dark:ring-gray-800',
+      failure: 'ring-red-500 dark:ring-red-700',
+      gray: 'ring-gray-500 dark:ring-gray-400',
+      info: 'ring-blue-400 dark:ring-blue-800',
+      light: 'ring-gray-300 dark:ring-gray-500',
+      purple: 'ring-purple-500 dark:ring-purple-600',
+      success: 'ring-green-500 dark:ring-green-500',
+      warning: 'ring-yellow-300 dark:ring-yellow-500',
+      pink: 'ring-pink-500 dark:ring-pink-500',
+    },
     size: {
       xs: 'w-6 h-6',
       sm: 'w-8 h-8',