Add background color custom css property for people list items (#503)

* Add background color custom css property for people list items

* Update css var name

* Change name for css var in people picker

* Update css var in story and ts file

Author: beth-panx

src/components/mgt-people-picker/mgt-people-picker.scss

@@ -24,6 +24,8 @@ $input-hover-color: var(--input-hover-color, #323130);
 $input-focus-color: var(--input-focus-color, #0078d4);
 $input-background-color: var(--input-background-color, var(--people-list-background-color, white));
 
+$selected-person-background-color: var(--selected-person-background-color, #f1f1f1);
+
 $dropdown-background-color: var(--dropdown-background-color, white);
 $dropdown-item-hover-background: var(--dropdown-item-hover-background, rgba(241, 241, 241, 0.87));
 
@@ -127,31 +129,31 @@ mgt-people-picker .overflow-gradient {
     to right,
     rgba(255, 255, 255, 0) 0%,
     rgba(255, 255, 255, 0) 60%,
-    rgb(241, 241, 241) 100%
+    $selected-person-background-color 100%
   );
   background-image: -moz-linear-gradient(
     left,
     rgba(255, 255, 255, 0) 0%,
     rgba(255, 255, 255, 0) 60%,
-    rgb(241, 241, 241) 100%
+    $selected-person-background-color 100%
   );
   background-image: -o-linear-gradient(
     left,
     rgba(255, 255, 255, 0) 0%,
     rgba(255, 255, 255, 0) 60%,
-    rgb(241, 241, 241) 100%
+    $selected-person-background-color 100%
   );
   background-image: -ms-linear-gradient(
     left,
     rgba(255, 255, 255, 0) 0%,
     rgba(255, 255, 255, 0) 60%,
-    rgb(241, 241, 241) 100%
+    $selected-person-background-color 100%
   );
   background-image: -webkit-linear-gradient(
     left,
     rgba(255, 255, 255, 0) 0%,
     rgba(255, 255, 255, 0) 60%,
-    rgb(241, 241, 241) 100%
+    $selected-person-background-color 100%
   );
 }
 
@@ -163,7 +165,7 @@ mgt-people-picker .CloseIcon {
   margin-top: 0px;
   cursor: pointer;
   color: $font-color;
-  background-color: rgb(241, 241, 241);
+  background-color: $selected-person-background-color;
   right: 0px;
 }
 
@@ -172,7 +174,7 @@ mgt-people-picker .people-person {
   display: flex;
   margin: 5px 5px 0px 0;
   align-items: center;
-  background-color: rgba(196, 196, 196, 0.24);
+  background-color: $selected-person-background-color;
   border-radius: 15px;
   height: 24px;
   white-space: nowrap;

src/components/mgt-people-picker/mgt-people-picker.ts

@@ -56,6 +56,8 @@ interface IFocusable {
  * @cssprop --input-hover-color - {Color} Input text hover color
  * @cssprop --input-focus-color - {Color} Input text focus color
  *
+ * @cssprop --selected-person-background-color - {Color} Selected person background color
+ *
  * @cssprop --dropdown-background-color - {Color} Background color of dropdown area
  * @cssprop --dropdown-item-hover-background - {Color} Background color of person during hover
  *

stories/components/peoplePicker.stories.js

@@ -45,6 +45,7 @@ export const DarkMode = () => html`
       --input-focus-color: #0f78d4;
       --font-color: white;
       --placeholder-focus-color: rgba(255, 255, 255, 0.8);
+      --selected-person-background-color: #474747;
     }
   </style>
 `;