feat(Avatar): the value of the colorScheme prop can also be any custo…

…m color string in addition to the pre-defined options which already exist.

packages/core/src/components/Avatar/components/AvatarContainer/StyledAvatarContainer.ts

@@ -5,7 +5,11 @@ import type { IAvatarStyled } from '../../declarations';
 import { getAvatarSizeConfig } from '../../utils';
 
 import { typoMixin } from '../../../../styled/';
-import { getTokenKeyFromColorScheme } from '../../../../helpers';
+import {
+  getAccTextColor,
+  getTokenKeyFromColorScheme,
+  isValidColor,
+} from '../../../../helpers';
 
 export interface StyledAvatarContainerProps
   extends Pick<
@@ -32,8 +36,16 @@ export const StyledAvatarContainer = styled.span<StyledAvatarContainerProps>`
   }) => {
     const colorSchemeForTokens = getTokenKeyFromColorScheme($colorScheme);
     const cmpTokens = theme.cmp.avatar;
-    const bgColor = cmpTokens.color.background[colorSchemeForTokens];
-    const color = cmpTokens.color.text[colorSchemeForTokens];
+    const bgColor = isValidColor($colorScheme)
+      ? $colorScheme
+      : cmpTokens.color.background[colorSchemeForTokens];
+    const color = isValidColor($colorScheme)
+      ? getAccTextColor(
+          $colorScheme,
+          '#fff',
+          theme.alias.color.text.body.strongest,
+        )
+      : cmpTokens.color.text[colorSchemeForTokens];
     const width = getAvatarSizeConfig({ $customSize, $size, theme }).width;
     const height = getAvatarSizeConfig({ $customSize, $size, theme }).height;
     const borderRadius =

packages/core/src/components/Avatar/declarations.ts

@@ -35,7 +35,7 @@ export type TAvatarFit = React.CSSProperties['objectFit'];
 export type TAvatarPosition = React.CSSProperties['objectPosition'];
 
 export type TAvatarBadgeFn = (props: {
-  colorScheme: TBadgeColorScheme;
+  colorScheme: TBadgeColorScheme | React.CSSProperties['backgroundColor'];
   size: TBadgeSize;
 }) => React.ReactNode;
 
@@ -47,8 +47,11 @@ export interface IAvatar {
   badge?: TAvatarBadgeFn;
   /** If the Avatar has a border to differentiate it from the background. */
   bordered?: boolean;
-  /** Color scheme: background color, text color, badge color scheme... etc. */
-  colorScheme?: TAvatarColorScheme;
+  /** It defines the color schema for the background and text color.
+   * There are predefined types: primary, secondary... etc.
+   * It's possible to use a custom color used for the background color and
+   * auto-generated for the text based on this one to maintain AA accessible contrast.*/
+  colorScheme?: TAvatarColorScheme | React.CSSProperties['backgroundColor'];
   children: React.ReactNode;
   /** The custom size (width and height) defined by an object.
    * If the variable square is defined, then it's assigned that value to the