From 3e0ae8fe7265d8d3a902d38da8fcd12b175f3d89 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Mon, 13 May 2024 14:41:34 +0300
Subject: [PATCH 01/11] Avatar component styling

---
 .storybook/preview-head.html         |  4 +-
 src/elements/Avatar/Avatar.story.tsx | 82 +++++++++++++++--------
 src/elements/Avatar/Avatar.tsx       | 42 ++++++++----
 src/elements/Avatar/AvatarTheme.ts   | 99 +++++++++++++++++++++++++++-
 tailwind.config.ts                   | 20 +++---
 5 files changed, 195 insertions(+), 52 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 23e2b31f..a69e7bd6 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -13,7 +13,7 @@
     --color-layer-transparent: rgba(0, 0, 0, 0.5);
 
     &.light {
-      background: #E6E6F0;
+      background: #FFFFFF;
       color: #000000;
       --body-color: #000000;
     }
@@ -39,7 +39,7 @@
 
   .light .sb-show-main.sb-main-centered {
     color: #11111F;
-    background: #E6E6F0;
+    background: #FFFFFF;
   }
 
   .dark .sb-show-main.sb-main-centered {
diff --git a/src/elements/Avatar/Avatar.story.tsx b/src/elements/Avatar/Avatar.story.tsx
index 82f5c7fd..d81d540c 100644
--- a/src/elements/Avatar/Avatar.story.tsx
+++ b/src/elements/Avatar/Avatar.story.tsx
@@ -6,47 +6,75 @@ export default {
   title: 'Components/Elements/Avatar',
   component: Avatar
 } as Meta;
+const ComponentsBlock = args => (
+  <div
+    style={{
+      display: 'flex',
+      gap: '1em',
+      flexDirection: 'column',
+      alignItems: 'start'
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        gap: '1em',
+        flexDirection: 'row',
+        justifyContent: 'start',
+        alignItems: 'center'
+      }}
+    >
+      <Avatar {...args} interactable tabIndex={1} />
+      <span>Active</span>
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        gap: '1em',
+        flexDirection: 'row',
+        justifyContent: 'start',
+        alignItems: 'center'
+      }}
+    >
+      <Avatar {...args} disabled />
+      <span>Disabled</span>
+    </div>
+  </div>
+);
 
-const Template = args => <Avatar {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  name: 'John Doe',
-  size: 50,
-  rounded: false
-};
-
-export const Outline = Template.bind({});
+export const Outline = args => <ComponentsBlock {...args} />;
 Outline.args = {
   name: 'John Doe',
   size: 50,
-  rounded: false,
   variant: 'outline'
 };
 
-export const RoundedWithImage = Template.bind({});
-RoundedWithImage.args = {
-  src: 'https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg',
+export const Filled = args => <ComponentsBlock {...args} />;
+Filled.args = {
+  name: 'John Doe',
   size: 50,
-  rounded: true
+  variant: 'filled'
 };
 
-export const LargeRounded = Template.bind({});
-LargeRounded.args = {
+export const Colored = args => <ComponentsBlock {...args} />;
+Colored.args = {
   name: 'John Doe',
-  size: 100,
-  rounded: true
+  size: 50,
+  variant: 'colored'
+};
+export const Image = args => <ComponentsBlock {...args} />;
+Image.args = {
+  src: 'https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg',
+  size: 50
 };
 
-export const MultipleAvatars = args => (
+export const Sizes = args => (
   <div style={{ display: 'flex', gap: '1em' }}>
-    <Avatar {...args} name="Alice" />
-    <Avatar {...args} name="Bob Meyer Bogger" />
-    <Avatar {...args} name="Charlie" onClick={() => console.log('here')} />
+    <Avatar {...args} size={50} />
+    <Avatar {...args} size={75} />
+    <Avatar {...args} size={100} />
   </div>
 );
-
-MultipleAvatars.args = {
-  size: 50,
-  rounded: true
+Sizes.args = {
+  src: 'https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg'
 };
diff --git a/src/elements/Avatar/Avatar.tsx b/src/elements/Avatar/Avatar.tsx
index f9a9f4dd..41374e8f 100644
--- a/src/elements/Avatar/Avatar.tsx
+++ b/src/elements/Avatar/Avatar.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import getInitials from 'name-initials';
 import { generateColor } from '@marko19907/string-to-color';
-import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 import { AvatarTheme } from './AvatarTheme';
 
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -24,7 +23,7 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Style variant for the avatar.
    */
-  variant?: 'filled' | 'outline';
+  variant?: 'filled' | 'outline' | 'colored';
 
   /**
    * Whether the avatar is rounded.
@@ -33,9 +32,20 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
 
   /**
    * Color override for the avatar.
+   * @deprecated
    */
   color?: string;
 
+  /**
+   * Whether the avatar is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the avatar is able to interact.
+   */
+  interactable?: boolean;
+
   /**
    * Custom color options for the color generator.
    */
@@ -58,10 +68,12 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       src,
       color,
       size = 24,
-      variant = 'filled',
+      variant = 'colored',
       rounded = true,
       className,
       colorOptions,
+      disabled,
+      interactable,
       theme: customTheme,
       ...rest
     },
@@ -84,22 +96,30 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
     }, [color, name, src, colorOptions]);
 
     const theme: AvatarTheme = useComponentTheme('avatar', customTheme);
+    const themeVariant = src ? 'outline' : variant;
 
     return (
       <div
         {...rest}
-        className={twMerge(theme.base, rounded && theme.rounded, className)}
+        className={cn(
+          theme.base,
+          theme[themeVariant].base,
+          {
+            'cursor-pointer': interactable,
+            [theme.rounded]: rounded,
+            [theme.disabled]: disabled,
+            [theme[themeVariant].focused]: interactable,
+            [theme[themeVariant].hovered]: interactable,
+            [theme[themeVariant].disabled]: disabled
+          },
+          className
+        )}
         style={{
           width: `${size}px`,
           height: `${size}px`,
           fontSize: `${fontSize}px`,
           backgroundImage: src ? `url(${src})` : 'none',
-          backgroundColor,
-          ...(variant === 'outline' && {
-            backgroundColor: 'transparent',
-            border: `solid 1px ${backgroundColor}`,
-            color: backgroundColor
-          })
+          ...(variant === 'colored' && !disabled ? { backgroundColor } : {})
         }}
         ref={ref}
       >
diff --git a/src/elements/Avatar/AvatarTheme.ts b/src/elements/Avatar/AvatarTheme.ts
index d57a44d1..51299cf7 100644
--- a/src/elements/Avatar/AvatarTheme.ts
+++ b/src/elements/Avatar/AvatarTheme.ts
@@ -1,16 +1,111 @@
 export interface AvatarTheme {
   base: string;
   rounded: string;
+  outline: {
+    base: string;
+    disabled: string;
+    focused: string;
+    hovered: string;
+  };
+  filled: {
+    base: string;
+    disabled: string;
+    focused: string;
+    hovered: string;
+  };
+  colored: {
+    base: string;
+    disabled: string;
+    focused: string;
+    hovered: string;
+  };
+  disabled: string;
 }
 
 const baseTheme: AvatarTheme = {
   base: 'flex justify-center items-center bg-cover bg-center font-bold',
-  rounded: 'rounded-[50%]'
+  rounded: 'rounded-[50%]',
+  outline: {
+    base: 'border border-solid',
+    focused: '',
+    hovered: '',
+    disabled: ''
+  },
+  filled: {
+    base: 'border border-solid border-transparent',
+    focused: '',
+    hovered: '',
+    disabled: ''
+  },
+  colored: {
+    base: 'border border-solid border-transparent',
+    focused: '',
+    hovered: '',
+    disabled: ''
+  },
+  disabled: 'border border-solid'
 };
 
 export const avatarTheme: AvatarTheme = {
   ...baseTheme,
-  base: [baseTheme.base, 'text-white'].join(' ')
+  base: [
+    baseTheme.base,
+    'text-waterloo text-gray-400 light:text-gray-600 focus:outline-none'
+  ].join(' '),
+  outline: {
+    base: [
+      baseTheme.outline.base,
+      'bg-black border-gray-700 light:border-gray-200 light:bg-gray-100'
+    ].join(' '),
+    focused: [
+      baseTheme.outline.focused,
+      'hover:border-blue-400 light:hover:border-blue-400'
+    ].join(' '),
+    hovered: [
+      baseTheme.outline.hovered,
+      'focus:border-blue-500 light:focus:border-blue-500'
+    ].join(' '),
+    disabled: [
+      baseTheme.outline.disabled,
+      'text-gray-300/40 light:bg-gray-100 light:border-gray-400'
+    ].join(' ')
+  },
+  filled: {
+    base: [baseTheme.filled.base, 'bg-gray-700 light:bg-gray-200'].join(' '),
+    focused: [
+      baseTheme.outline.focused,
+      'hover:border-blue-400 light:hover:border-blue-400'
+    ].join(' '),
+    hovered: [
+      baseTheme.outline.hovered,
+      'focus:border-blue-500 light:focus:border-blue-500'
+    ].join(' '),
+    disabled: [
+      baseTheme.filled.disabled,
+      'bg-gray-600 light:bg-gray-100 light:border-gray-100 text-gray-300/40'
+    ].join(' ')
+  },
+  colored: {
+    base: [baseTheme.colored.base, 'text-secondary light:text-gray-100'].join(
+      ' '
+    ),
+    focused: [
+      baseTheme.outline.focused,
+      'hover:border-blue-400 light:hover:border-blue-400'
+    ].join(' '),
+    hovered: [
+      baseTheme.outline.hovered,
+      'focus:border-blue-500 light:focus:border-blue-500'
+    ].join(' '),
+    disabled: [
+      baseTheme.colored.disabled,
+      'bg-gray-600 light:bg-gray-100 light:border-gray-100 text-gray-300/40'
+    ].join(' ')
+  },
+  disabled: [
+    baseTheme.disabled,
+    'cursor-not-allowed border-gray-600 light:border-gray-400 light:text-gray-400'
+  ].join(' ')
 };
 
 export const legacyAvatarTheme: AvatarTheme = {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0a215c3a..af82a1dd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,16 +7,16 @@ export const colorPalette = {
   white: '#FFFFFF',
   black: '#000000',
   gray: {
-    100: '#F2F3F7',
-    200: '#E2E2EA',
-    300: '#C6CBD9',
-    400: '#9A9AAF',
-    500: '#7E7E8F',
-    600: '#656575',
-    700: '#535362',
-    800: '#2E2E3A',
-    900: '#262631',
-    950: '#16161E'
+    100: '#F7F7FA',
+    200: '#E6E6F0',
+    300: '#C9C9D6',
+    400: '#77778C',
+    500: '#5C5C73',
+    600: '#3D3D4D',
+    700: '#242433',
+    800: '#1E1E2E',
+    900: '#11111F',
+    950: '#02020F'
   },
   magenta: {
     100: '#FAE5F6',

From df8590b9544a53ac0a9647343dd98526ecdeae6f Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Mon, 13 May 2024 14:52:35 +0300
Subject: [PATCH 02/11] Fix style

---
 src/elements/Avatar/AvatarTheme.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/elements/Avatar/AvatarTheme.ts b/src/elements/Avatar/AvatarTheme.ts
index 51299cf7..8cb315da 100644
--- a/src/elements/Avatar/AvatarTheme.ts
+++ b/src/elements/Avatar/AvatarTheme.ts
@@ -57,11 +57,11 @@ export const avatarTheme: AvatarTheme = {
       baseTheme.outline.base,
       'bg-black border-gray-700 light:border-gray-200 light:bg-gray-100'
     ].join(' '),
-    focused: [
+    hovered: [
       baseTheme.outline.focused,
       'hover:border-blue-400 light:hover:border-blue-400'
     ].join(' '),
-    hovered: [
+    focused: [
       baseTheme.outline.hovered,
       'focus:border-blue-500 light:focus:border-blue-500'
     ].join(' '),
@@ -72,11 +72,11 @@ export const avatarTheme: AvatarTheme = {
   },
   filled: {
     base: [baseTheme.filled.base, 'bg-gray-700 light:bg-gray-200'].join(' '),
-    focused: [
+    hovered: [
       baseTheme.outline.focused,
       'hover:border-blue-400 light:hover:border-blue-400'
     ].join(' '),
-    hovered: [
+    focused: [
       baseTheme.outline.hovered,
       'focus:border-blue-500 light:focus:border-blue-500'
     ].join(' '),
@@ -89,11 +89,11 @@ export const avatarTheme: AvatarTheme = {
     base: [baseTheme.colored.base, 'text-secondary light:text-gray-100'].join(
       ' '
     ),
-    focused: [
+    hovered: [
       baseTheme.outline.focused,
       'hover:border-blue-400 light:hover:border-blue-400'
     ].join(' '),
-    hovered: [
+    focused: [
       baseTheme.outline.hovered,
       'focus:border-blue-500 light:focus:border-blue-500'
     ].join(' '),

From 6d9d0568f57b66e384a60d1b2cf2d085124b4d5f Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Mon, 13 May 2024 15:24:15 +0300
Subject: [PATCH 03/11] Fix style

---
 src/elements/Avatar/AvatarTheme.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/elements/Avatar/AvatarTheme.ts b/src/elements/Avatar/AvatarTheme.ts
index 8cb315da..a5deec9a 100644
--- a/src/elements/Avatar/AvatarTheme.ts
+++ b/src/elements/Avatar/AvatarTheme.ts
@@ -58,11 +58,11 @@ export const avatarTheme: AvatarTheme = {
       'bg-black border-gray-700 light:border-gray-200 light:bg-gray-100'
     ].join(' '),
     hovered: [
-      baseTheme.outline.focused,
+      baseTheme.outline.hovered,
       'hover:border-blue-400 light:hover:border-blue-400'
     ].join(' '),
     focused: [
-      baseTheme.outline.hovered,
+      baseTheme.outline.focused,
       'focus:border-blue-500 light:focus:border-blue-500'
     ].join(' '),
     disabled: [
@@ -73,11 +73,11 @@ export const avatarTheme: AvatarTheme = {
   filled: {
     base: [baseTheme.filled.base, 'bg-gray-700 light:bg-gray-200'].join(' '),
     hovered: [
-      baseTheme.outline.focused,
+      baseTheme.outline.hovered,
       'hover:border-blue-400 light:hover:border-blue-400'
     ].join(' '),
     focused: [
-      baseTheme.outline.hovered,
+      baseTheme.outline.focused,
       'focus:border-blue-500 light:focus:border-blue-500'
     ].join(' '),
     disabled: [
@@ -90,11 +90,11 @@ export const avatarTheme: AvatarTheme = {
       ' '
     ),
     hovered: [
-      baseTheme.outline.focused,
+      baseTheme.outline.hovered,
       'hover:border-blue-400 light:hover:border-blue-400'
     ].join(' '),
     focused: [
-      baseTheme.outline.hovered,
+      baseTheme.outline.focused,
       'focus:border-blue-500 light:focus:border-blue-500'
     ].join(' '),
     disabled: [

From a609653dd221fa49afbc7bda6cad7b1867ba9730 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Mon, 13 May 2024 15:37:54 +0300
Subject: [PATCH 04/11] Revert storybook bg color

---
 .storybook/preview-head.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index a69e7bd6..23e2b31f 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -13,7 +13,7 @@
     --color-layer-transparent: rgba(0, 0, 0, 0.5);
 
     &.light {
-      background: #FFFFFF;
+      background: #E6E6F0;
       color: #000000;
       --body-color: #000000;
     }
@@ -39,7 +39,7 @@
 
   .light .sb-show-main.sb-main-centered {
     color: #11111F;
-    background: #FFFFFF;
+    background: #E6E6F0;
   }
 
   .dark .sb-show-main.sb-main-centered {

From 8384760a8a575dc6ddea969206e03416c7c5581e Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Mon, 13 May 2024 15:43:51 +0300
Subject: [PATCH 05/11] Replace colors

---
 src/elements/Avatar/AvatarTheme.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/elements/Avatar/AvatarTheme.ts b/src/elements/Avatar/AvatarTheme.ts
index a5deec9a..5744cb40 100644
--- a/src/elements/Avatar/AvatarTheme.ts
+++ b/src/elements/Avatar/AvatarTheme.ts
@@ -59,11 +59,11 @@ export const avatarTheme: AvatarTheme = {
     ].join(' '),
     hovered: [
       baseTheme.outline.hovered,
-      'hover:border-blue-400 light:hover:border-blue-400'
+      'hover:border-primary-hover light:hover:border-primary-hover'
     ].join(' '),
     focused: [
       baseTheme.outline.focused,
-      'focus:border-blue-500 light:focus:border-blue-500'
+      'focus:border-primary-active light:focus:border-primary-active'
     ].join(' '),
     disabled: [
       baseTheme.outline.disabled,
@@ -74,11 +74,11 @@ export const avatarTheme: AvatarTheme = {
     base: [baseTheme.filled.base, 'bg-gray-700 light:bg-gray-200'].join(' '),
     hovered: [
       baseTheme.outline.hovered,
-      'hover:border-blue-400 light:hover:border-blue-400'
+      'hover:border-primary-hover light:hover:border-primary-hover'
     ].join(' '),
     focused: [
       baseTheme.outline.focused,
-      'focus:border-blue-500 light:focus:border-blue-500'
+      'focus:border-primary-active light:focus:border-primary-active'
     ].join(' '),
     disabled: [
       baseTheme.filled.disabled,
@@ -91,11 +91,11 @@ export const avatarTheme: AvatarTheme = {
     ),
     hovered: [
       baseTheme.outline.hovered,
-      'hover:border-blue-400 light:hover:border-blue-400'
+      'hover:border-primary-hover light:hover:border-primary-hover'
     ].join(' '),
     focused: [
       baseTheme.outline.focused,
-      'focus:border-blue-500 light:focus:border-blue-500'
+      'focus:border-primary-active light:focus:border-primary-active'
     ].join(' '),
     disabled: [
       baseTheme.colored.disabled,

From b221e23cd065ffa75a531c3b354207c901e7e9d5 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Mon, 13 May 2024 15:51:04 +0300
Subject: [PATCH 06/11] Add story background

---
 src/elements/Avatar/Avatar.story.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/elements/Avatar/Avatar.story.tsx b/src/elements/Avatar/Avatar.story.tsx
index d81d540c..4f022a5a 100644
--- a/src/elements/Avatar/Avatar.story.tsx
+++ b/src/elements/Avatar/Avatar.story.tsx
@@ -8,6 +8,7 @@ export default {
 } as Meta;
 const ComponentsBlock = args => (
   <div
+    className="bg-panel p-20"
     style={{
       display: 'flex',
       gap: '1em',

From 14f6fc3411e2657b4d939b8bcf4e198c9ee2010f Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Mon, 13 May 2024 16:19:15 +0300
Subject: [PATCH 07/11] Border transition

---
 src/elements/Avatar/AvatarTheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/Avatar/AvatarTheme.ts b/src/elements/Avatar/AvatarTheme.ts
index 5744cb40..49aa273b 100644
--- a/src/elements/Avatar/AvatarTheme.ts
+++ b/src/elements/Avatar/AvatarTheme.ts
@@ -23,7 +23,7 @@ export interface AvatarTheme {
 }
 
 const baseTheme: AvatarTheme = {
-  base: 'flex justify-center items-center bg-cover bg-center font-bold',
+  base: 'flex justify-center items-center bg-cover bg-center font-bold transition-[border-color] ease-in-out duration-300',
   rounded: 'rounded-[50%]',
   outline: {
     base: 'border border-solid',

From 7c3a431d4552663aa035caff730882e94305fdcb Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Tue, 14 May 2024 12:15:45 +0300
Subject: [PATCH 08/11] Remove deprecated from color props

---
 src/elements/Avatar/Avatar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/elements/Avatar/Avatar.tsx b/src/elements/Avatar/Avatar.tsx
index 666fb2b0..bbecef7c 100644
--- a/src/elements/Avatar/Avatar.tsx
+++ b/src/elements/Avatar/Avatar.tsx
@@ -32,7 +32,6 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
 
   /**
    * Color override for the avatar.
-   * @deprecated
    */
   color?: string;
 

From d4ac2a627a7b1f4e0b1d3752fe6b95d90afce92d Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 17 May 2024 11:05:27 +0300
Subject: [PATCH 09/11] Add separate property "type" for Avatar

---
 src/elements/Avatar/Avatar.story.tsx |  9 ++++++---
 src/elements/Avatar/Avatar.tsx       | 12 +++++++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/elements/Avatar/Avatar.story.tsx b/src/elements/Avatar/Avatar.story.tsx
index 4f022a5a..4f5dbf56 100644
--- a/src/elements/Avatar/Avatar.story.tsx
+++ b/src/elements/Avatar/Avatar.story.tsx
@@ -47,21 +47,24 @@ export const Outline = args => <ComponentsBlock {...args} />;
 Outline.args = {
   name: 'John Doe',
   size: 50,
-  variant: 'outline'
+  variant: 'outline',
+  type: 'monochrome'
 };
 
 export const Filled = args => <ComponentsBlock {...args} />;
 Filled.args = {
   name: 'John Doe',
   size: 50,
-  variant: 'filled'
+  variant: 'filled',
+  type: 'monochrome'
 };
 
 export const Colored = args => <ComponentsBlock {...args} />;
 Colored.args = {
   name: 'John Doe',
   size: 50,
-  variant: 'colored'
+  variant: 'filled',
+  type: 'colored'
 };
 export const Image = args => <ComponentsBlock {...args} />;
 Image.args = {
diff --git a/src/elements/Avatar/Avatar.tsx b/src/elements/Avatar/Avatar.tsx
index bbecef7c..1ab24cdb 100644
--- a/src/elements/Avatar/Avatar.tsx
+++ b/src/elements/Avatar/Avatar.tsx
@@ -23,7 +23,12 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Style variant for the avatar.
    */
-  variant?: 'filled' | 'outline' | 'colored';
+  variant?: 'filled' | 'outline';
+
+  /**
+   * Style type for the avatar.
+   */
+  type: 'colored' | 'monochrome';
 
   /**
    * Whether the avatar is rounded.
@@ -67,7 +72,8 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
       src,
       color,
       size = 24,
-      variant = 'colored',
+      variant = 'filled',
+      type = 'colored',
       rounded = true,
       className,
       colorOptions,
@@ -118,7 +124,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
           height: `${size}px`,
           fontSize: `${fontSize}px`,
           backgroundImage: src ? `url(${src})` : 'none',
-          ...(variant === 'colored' && !disabled ? { backgroundColor } : {})
+          ...(type === 'colored' && !disabled ? { backgroundColor } : {})
         }}
         ref={ref}
       >

From 71017b2223168e06d7592daa22fe1a46548b1f05 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 17 May 2024 11:41:01 +0300
Subject: [PATCH 10/11] Keep states for colored type

---
 src/elements/Avatar/Avatar.tsx     |  6 +++++-
 src/elements/Avatar/AvatarTheme.ts | 18 ++++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/elements/Avatar/Avatar.tsx b/src/elements/Avatar/Avatar.tsx
index 1ab24cdb..d3598f8d 100644
--- a/src/elements/Avatar/Avatar.tsx
+++ b/src/elements/Avatar/Avatar.tsx
@@ -109,13 +109,17 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
         className={cn(
           theme.base,
           theme[themeVariant].base,
+          theme[type].base,
           {
             'cursor-pointer': interactable,
             [theme.rounded]: rounded,
             [theme.disabled]: disabled,
             [theme[themeVariant].focused]: interactable,
             [theme[themeVariant].hovered]: interactable,
-            [theme[themeVariant].disabled]: disabled
+            [theme[themeVariant].disabled]: disabled,
+            [theme[type].focused]: interactable,
+            [theme[type].hovered]: interactable,
+            [theme[type].disabled]: disabled
           },
           className
         )}
diff --git a/src/elements/Avatar/AvatarTheme.ts b/src/elements/Avatar/AvatarTheme.ts
index 49aa273b..4e0a8d78 100644
--- a/src/elements/Avatar/AvatarTheme.ts
+++ b/src/elements/Avatar/AvatarTheme.ts
@@ -19,6 +19,12 @@ export interface AvatarTheme {
     focused: string;
     hovered: string;
   };
+  monochrome: {
+    base: string;
+    disabled: string;
+    focused: string;
+    hovered: string;
+  };
   disabled: string;
 }
 
@@ -38,7 +44,13 @@ const baseTheme: AvatarTheme = {
     disabled: ''
   },
   colored: {
-    base: 'border border-solid border-transparent',
+    base: '',
+    focused: '',
+    hovered: '',
+    disabled: ''
+  },
+  monochrome: {
+    base: '',
     focused: '',
     hovered: '',
     disabled: ''
@@ -86,9 +98,7 @@ export const avatarTheme: AvatarTheme = {
     ].join(' ')
   },
   colored: {
-    base: [baseTheme.colored.base, 'text-secondary light:text-gray-100'].join(
-      ' '
-    ),
+    base: [baseTheme.colored.base, 'text-white light:text-white'].join(' '),
     hovered: [
       baseTheme.outline.hovered,
       'hover:border-primary-hover light:hover:border-primary-hover'

From edbcbbb9b9921a1a7b88b8b305b7ee862a9341ba Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 17 May 2024 11:50:09 +0300
Subject: [PATCH 11/11] Make type optional

---
 src/elements/Avatar/Avatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/Avatar/Avatar.tsx b/src/elements/Avatar/Avatar.tsx
index b06c10a9..796d408c 100644
--- a/src/elements/Avatar/Avatar.tsx
+++ b/src/elements/Avatar/Avatar.tsx
@@ -28,7 +28,7 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Style type for the avatar.
    */
-  type: 'colored' | 'monochrome';
+  type?: 'colored' | 'monochrome';
 
   /**
    * Whether the avatar is rounded.