Avatar background color handling based on initials

[sgraczyk]

Resolves: Slack thread

Description

It was decided that background color of the Avatar should have a default value if it uses text type. It uses a basic algorithm that makes sure that a set of 10 colors are used, and for the exact same initials the color will be always the same.

❗️ Attention: This change brings some sort of breaking change as it will apply new color in for avatars using text type without color provided. By default it was grey.

I've also enabled the possibility of using CSS variable for color prop as earlier it was impossible due to contrast calculation requiring direct values. It was solved by using window.getComputedStyle

Storybook

https://feature-avatar-default-backgrounds--613a8e945a5665003a05113b.chromatic.com/?path=/story/components-avatar--colors

Checklist

Obligatory:

• Self review (use this as your final check for proposed changes before requesting the review)
• Add reviewers (livechat/design-system)
• Add correct label
• Assign pull request with the correct issue

[shwarcu]

It used to be possible to set emoji as customer name, consider checking if such unusual input is handled

[sgraczyk]

I think it's not handled in here. I believe there is such an implementation in LiveChat Web

export function getInitials(name = ''): string {
  const isEmojiInName = EMOJI_REGEX.test(name);
  const finalName = name ? name : '';
  let initials = '';

  initials = finalName
    .split(' ')
    .map((el) => el.charAt(0))
    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
    .filter((el) => isAlphaNumeric(removeDiacritics(el)))
    .join('')
    .substring(0, 2)
    .toUpperCase();

  // fallback for emoji-only and non-alpha-numeric characters
  if (!initials) {
    initials = isEmojiInName
      ? finalName.match(EMOJI_REGEX)?.[0] || ''
      : finalName.toLocaleUpperCase().trim().substring(0, 2);
  }

  return initials;
}

@vladko-uxds Do we want to support emojis somehow in Design System?