feat: add new CSS properties for the people picker (#1926)

* feat: add new custom CSS properties for people picker dropdown

* feat: set the dropdown text color to the new CSS properties

* chore: add the new CSS properties to the picker story

* fix: use the correct CSS property names

* fix: accessibility contrast issues on the custom css props

* feat: set the custom css properties on hover and focus

Closes #1888

Co-authored-by: Gavin Barron <[email protected]>

Author: musale

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

@@ -126,7 +126,15 @@ mgt-people-picker .root {
             flex: 1 1 0;
             max-height: 40px;
             overflow: hidden;
-            color: $color;
+            color: $dropdown-item__text__color;
+
+            &:hover {
+              color: $dropdown-item__text__color--hover;
+            }
+            
+            &.focused {
+              color: $dropdown-item__text__color--hover;
+            }
 
             .people-person-text {
               font-size: 14px;

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

@@ -75,6 +75,8 @@ interface IFocusable {
  *
  * @cssprop --dropdown-background-color - {Color} Background color of dropdown area
  * @cssprop --dropdown-item-hover-background - {Color} Background color of person during hover
+ * @cssprop --dropdown-item-text-color - {Color} Color of person text
+ * @cssprop --dropdown-item-text-hover-color - {Color} Color of person text during hover
  *
  * @cssprop --placeholder-color--focus - {Color} Color of placeholder text during focus state
  * @cssprop --placeholder-color - {Color} Color of placeholder text

packages/mgt-components/src/styles/shared-sass-variables.scss

@@ -172,6 +172,12 @@ $link__color--disabled--light: $gray90;
 $depth-shadow--light: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);
 $depth-shadow--dark: 0 5px 14px 0 rgba(0, 0, 0, 0.8);
 
+/* -----People picker dropdown text----- */
+$dropdown__item__text__color--light: $text__color__main--light;
+$dropdown__item__text__color--dark: $text__color__main--dark;
+$dropdown__item__text__hover__color--light: $text__color__main--light;
+$dropdown__item__text__hover__color--dark: $text__color__main--dark;
+
 $font-family: var(--default-font-family);
 $font-size: var(--default-font-size);
 
@@ -339,7 +345,17 @@ $common: (
     _var: --list-item-background-color--hover,
     dark: $list__item__background-color--hover--dark,
     light: $list__item__background-color--hover--light
-  )
+  ),
+  dropdown__item__text__color: (
+    _var: --dropdown-item-text-color,
+    dark: $dropdown__item__text__color--dark,
+    light: $dropdown__item__text__color--light
+  ),
+  dropdown__item__text__color--hover: (
+    _var: --dropdown-item-text-hover-color,
+    dark:$dropdown__item__text__hover__color--dark,
+    light: $dropdown__item__text__hover__color--light
+  ),
 );
 
 @function set-var($var, $theme, $component) {
@@ -374,6 +390,8 @@ $dropdown-item__background-color--hover: var(
   --dropdown-item-hover-background,
   set-var(input-outlined__background-color--hover, $theme-default, $common)
 );
+$dropdown-item__text__color: set-var(dropdown__item__text__color, $theme-default, $common);
+$dropdown-item__text__color--hover: set-var(dropdown__item__text__color--hover, $theme-default, $common);
 
 @mixin input__border($theme) {
   border-top: $input__border-top;

stories/components/peoplePicker/peoplePicker.style.js

@@ -33,8 +33,10 @@ export const customCssProperties = () => html`
     --input-border-color--hover: #008394; /* input area border hover color */
     --input-border-color--focus: #0f78d4; /* input area border focus color */
 
-    --dropdown-background-color: #956970; /* selection area background color */
+    --dropdown-background-color: #ca00ca; /* selection area background color */
     --dropdown-item-hover-background: purple; /* person background color on hover */
+    --dropdown-item-text-color: white; /* person item text color */
+    --dropdown-item-text-hover-color: gold; /* person item text color on hover */
 
     --selected-person-background-color: black ; /* person item background color */