From 71fdd3fe922af3c1750c8af3de559b82cde58893 Mon Sep 17 00:00:00 2001
From: Phoebe Gao <boba@hey.com>
Date: Fri, 18 Mar 2022 10:29:58 -0700
Subject: [PATCH] feat(Avatar): add configurable avatar placeholder color

---
 src/Avatar/Avatar.stories.tsx |  1 +
 src/Avatar/Avatar.tsx         | 30 ++++++++++++++++--------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx
index aa52b306..20961f6b 100644
--- a/src/Avatar/Avatar.stories.tsx
+++ b/src/Avatar/Avatar.stories.tsx
@@ -14,6 +14,7 @@ const Template: Story<AvatarProps> = (args) => {
 
 export const Default = Template.bind({})
 Default.args = {
+  color: 'primary',
   src: 'http://daisyui.com/tailwind-css-component-profile-1@94w.png',
 }
 
diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx
index 6afb77a9..067171c2 100644
--- a/src/Avatar/Avatar.tsx
+++ b/src/Avatar/Avatar.tsx
@@ -17,6 +17,7 @@ export type AvatarProps = React.HTMLAttributes<HTMLDivElement> &
     letters?: string
     size?: ComponentSize
     shape?: ComponentShape
+    color?: ComponentColor
     border?: boolean
     borderColor?: ComponentColor
     online?: boolean
@@ -30,6 +31,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       letters,
       size,
       shape,
+      color,
       border,
       borderColor,
       online,
@@ -61,20 +63,20 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       'w-10 h-10': size === 'xs',
     })
 
-    const placeholderClasses = clsx(
-      'bg-neutral-focus',
-      'text-neutral-content',
-      {
-        'ring ring-offset-base-100 ring-offset-2': border,
-        [`ring-${borderColor}`]: borderColor,
-        'rounded-btn': shape === 'square',
-        'rounded-full': shape === 'circle',
-        'w-32 h-32 text-3xl': size === 'lg',
-        'w-24 h-24 text-xl': !size || size === 'md',
-        'w-14 h-14': size === 'sm',
-        'w-10 h-10': size === 'xs',
-      }
-    )
+    const placeholderClasses = clsx({
+      'bg-neutral-focus': !color,
+      'text-neutral-content': !color,
+      [`bg-${color}`]: color,
+      [`text-${color}-content`]: color,
+      'ring ring-offset-base-100 ring-offset-2': border,
+      [`ring-${borderColor}`]: borderColor,
+      'rounded-btn': shape === 'square',
+      'rounded-full': shape === 'circle',
+      'w-32 h-32 text-3xl': size === 'lg',
+      'w-24 h-24 text-xl': !size || size === 'md',
+      'w-14 h-14': size === 'sm',
+      'w-10 h-10': size === 'xs',
+    })
 
     return (
       <div