fix(avatar): Update colors to be a11y contrast ratio compliant (#2767)

Author: Conrad Chan

src/components/avatar/__tests__/AvatarInitials.test.tsx

@@ -32,7 +32,7 @@ describe('components/avatar/AvatarInitials', () => {
 
     test('should set data-bg-idx attribute based on id', () => {
         const wrapper = shallow(<AvatarInitials id="10" name="hello world" />);
-        expect(wrapper.prop('data-bg-idx')).toEqual(1);
+        expect(wrapper.prop('data-bg-idx')).toEqual(4);
     });
 
     test('should set a default data-bg-idx attribute if no id is passed in', () => {

src/styles/constants/_themes.scss

@@ -1 +1 @@
-$avatar-colors: $bdl-light-blue, $bdl-box-blue, $bdl-dark-blue, $bdl-gray-62, $bdl-green-light, $bdl-yellorange, $bdl-grimace, $bdl-purple-rain, $bdl-watermelon-red;
+$avatar-colors: $bdl-box-blue, $bdl-dark-blue, $bdl-gray-62, $bdl-gray, $bdl-grimace, $bdl-purple-rain;

src/styles/variables.js

@@ -82,7 +82,7 @@ export const bdlLineHeight = "20px"; // bdl-line-height
 export const bdlFontSize = "13px"; // bdl-fontSize
 export const bdlFontSizeMinimum = "11px"; // bdl-fontSize-minimum
 export const bdlFontSizeDejaBlue = "14px"; // bdl-fontSize--dejaBlue
-export const avatarColors = ["#2486fc","#0061d5","#003c84","#767676","#26c281","#f5b31b","#4826c2","#9f3fed","#ed3757"]; // avatar-colors
+export const avatarColors = ["#0061d5","#003c84","#767676","#222","#4826c2","#9f3fed"]; // avatar-colors
 export const modalDialogZIndex = "160"; // modal-dialog-z-index
 export const menuZIndex = "170"; // menu-z-index
 export const notificationsWrapperZIndex = "180"; // notifications-wrapper-z-index

src/styles/variables.json

@@ -79,17 +79,7 @@
     "bdl-fontSize": "13px",
     "bdl-fontSize-minimum": "11px",
     "bdl-fontSize--dejaBlue": "14px",
-    "avatar-colors": [
-        "#2486fc",
-        "#0061d5",
-        "#003c84",
-        "#767676",
-        "#26c281",
-        "#f5b31b",
-        "#4826c2",
-        "#9f3fed",
-        "#ed3757"
-    ],
+    "avatar-colors": ["#0061d5", "#003c84", "#767676", "#222", "#4826c2", "#9f3fed"],
     "modal-dialog-z-index": "160",
     "menu-z-index": "170",
     "notifications-wrapper-z-index": "180",

src/styles/variables.ts

@@ -79,17 +79,7 @@ export const bdlLineHeight = '20px'; // bdl-line-height
 export const bdlFontSize = '13px'; // bdl-fontSize
 export const bdlFontSizeMinimum = '11px'; // bdl-fontSize-minimum
 export const bdlFontSizeDejaBlue = '14px'; // bdl-fontSize--dejaBlue
-export const avatarColors = [
-    '#2486fc',
-    '#0061d5',
-    '#003c84',
-    '#767676',
-    '#26c281',
-    '#f5b31b',
-    '#4826c2',
-    '#9f3fed',
-    '#ed3757',
-]; // avatar-colors
+export const avatarColors = ['#0061d5', '#003c84', '#767676', '#222', '#4826c2', '#9f3fed']; // avatar-colors
 export const modalDialogZIndex = '160'; // modal-dialog-z-index
 export const menuZIndex = '170'; // menu-z-index
 export const notificationsWrapperZIndex = '180'; // notifications-wrapper-z-index