fix: add a custom font-size token to people-picker (#3069)

* add custom font-size  token to people-picker

* add --people-picker-font-size custom style to story

* add cssprop

---------

Co-authored-by: Musale Martin <martinmusale@microsoft.com>

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

@@ -11,6 +11,7 @@
 
 $people-picker-result-person-avatar-size: var(--people-picker-result-person-avatar-size, 40px);
 $people-picker-selected-person-avatar-size: var(--people-picker-selected-person-avatar-size, 24px);
+$people-picker-font-size: var(--people-picker-font-size, 14px);
 
 :host {
   --person-details-wrapper-width: 0;
@@ -19,6 +20,7 @@ $people-picker-selected-person-avatar-size: var(--people-picker-selected-person-
 
   fluent-text-field {
     width: 100%;
+    font-size: $people-picker-font-size;
 
     &::part(root) {
       display: flex;

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

@@ -99,6 +99,7 @@ export const registerMgtPeoplePickerComponent = () => {
  * @cssprop --people-picker-remove-selected-close-icon-color - {Color} the remove selected person close icon color.
  * @cssprop --people-picker-result-person-avatar-size - {Length} the avatar size of the person in the result. Default is 40px.
  * @cssprop --people-picker-selected-person-avatar-size - {Length} the avatar size of the selected person. Default is 24px.
+ * @cssprop --people-picker-font-size - {Length} the font size of the text in the people picker input. Default is 14px.
  */
 export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
   /**

stories/components/peoplePicker/peoplePicker.style.stories.js

@@ -37,6 +37,7 @@ export const customCSSProperties = () => html`
     --people-picker-input-placeholder-text-color: white;
     --people-picker-search-icon-color: yellow;
     --people-picker-remove-selected-close-icon-color: blue;
+    --people-picker-font-size: 16px;
 
     /** You can also change the person tokens **/
     --person-line1-text-color: blue;