fix: mgt-person avatar size customization in vertical layout (#2875)

Add custom avatar size tokens for components building from mgt-person
Add login person custom avatar-size token
Update css props in login, people and people-picker
Add default values to css tokens
Update JSDoc comments for person card with section css customization tokens

packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss

@@ -168,7 +168,7 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
 
       &-attendees {
         --list-margin: 8px 0 0 0;
-        --avatar-size-s: 20px;
+        --person-avatar-size: 20px;
       }
     }
   }

packages/mgt-components/src/components/mgt-login/mgt-login.scss

@@ -9,14 +9,16 @@
 @import '../../styles/shared-styles';
 @import './mgt-login.theme';
 
-$signed-out-bg: padding-box linear-gradient(var(--neutral-fill-rest), var(--neutral-fill-rest)),
+$signed-out-bg:
+  padding-box linear-gradient(var(--neutral-fill-rest), var(--neutral-fill-rest)),
   border-box var(--neutral-stroke-control-rest);
 $signed-out-background: #{var(--login-signed-out-button-background, $signed-out-bg)};
 $signed-out-hover-background: #{var(--login-signed-out-button-hover-background, var(--neutral-fill-stealth-hover))};
 $login-popup-background-color: #{var(--login-popup-background-color, var(--neutral-layer-1))};
 $login-account-item-hover-bg-color: #{var(--login-account-item-hover-bg-color, var(--neutral-fill-stealth-hover))};
 $button-padding: var(--login-button-padding, 0);
 $login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(--accent-foreground-rest))};
+$login-person-avatar-size: #{var(--login-person-avatar-size, 40px)};
 
 :host {
   .signed-in-person {
@@ -30,6 +32,12 @@ $login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(-
     margin: 7px 0;
   }
 
+  .signed-in-person,
+  .account,
+  .person {
+    --person-avatar-size: #{$login-person-avatar-size};
+  }
+
   fluent-button {
     &.signed-in {
       height: auto;

packages/mgt-components/src/components/mgt-login/mgt-login.ts

@@ -82,6 +82,7 @@ export const registerMgtLoginComponent = () => {
  * @cssprop --login-command-button-hover-background-color - {Color} the color for the background of the command button on hovering.
  * @cssprop --login-account-item-hover-bg-color - {Color} the background color of the account item on hover.
  * @cssprop --login-flyout-command-text-color - {Color} the color for the text of the flyout command button.
+ * @cssprop --login-person-avatar-size - {Length} the size of the avatar in the person component. Default is 40px.
  */
 export class MgtLogin extends MgtTemplatedComponent {
   /**

packages/mgt-components/src/components/mgt-messages/mgt-messages.scss

@@ -13,9 +13,9 @@
 $message-subject-font-size: var(--message-subject-font-size, 14px);
 $message-subject-font-weight: var(--message-subject-font-weight, 600);
 $message-subject-line-height: var(--message-subject-line-height, 20px);
-$message-from-font-size: var(--message-subject-font-size, 12px);
-$message-from-font-weight: var(--message-subject-font-weight, 400);
-$message-from-line-height: var(--message-subject-line-height, 16px);
+$message-from-font-size: var(--message-from-font-size, 12px);
+$message-from-font-weight: var(--message-from-font-weight, 400);
+$message-from-line-height: var(--message-from-line-height, 16px);
 
 :host {
   position: relative;
@@ -76,7 +76,7 @@ $message-from-line-height: var(--message-subject-line-height, 16px);
       .message__date {
         margin-top: 8px;
         font-size: 12px;
-        color: $message-date;
+        color: $message-date-color;
         margin-left: 10px;
         white-space: nowrap;
       }

packages/mgt-components/src/components/mgt-messages/mgt-messages.theme.scss

@@ -11,4 +11,4 @@ $message-subject-color: var(--message-subject-color, var(--neutral-foreground-co
 $message-from-color: var(--message-from-color, var(--neutral-foreground-color));
 $message-color: var(--message-color, var(--neutral-foreground-hint));
 $message-hover-color: var(--message-hover-color, var(--neutral-fill-hover));
-$message-date: var(--message-date, var(--neutral-foreground-hint));
+$message-date-color: var(--message-date-color, var(--neutral-foreground-hint));

packages/mgt-components/src/components/mgt-organization/mgt-organization.scss

@@ -10,6 +10,10 @@
 @import '../../styles/shared-sass-variables';
 @import './mgt-organization.theme';
 
+$organization-coworker-person-avatar-size: var(--organization-coworker-person-avatar-size, 40px);
+$organization-member-person-avatar-size: var(--organization-member-person-avatar-size, 40px);
+$organization-direct-report-person-avatar-size: var(--organization-direct-report-person-avatar-size, 38px);
+
 :host {
   position: relative;
   user-select: none;
@@ -19,13 +23,12 @@
       padding: 0;
 
       .coworker {
-        .coworker__image {
+        .coworker__person-image {
           height: 40px;
           width: 40px;
           border-radius: 40px;
 
-          --avatar-size: 40px;
-          --avatar-size-s: 40px;
+          --person-avatar-size: 40px;
 
           margin-right: 12px;
         }
@@ -79,6 +82,10 @@
 
       .org-member__person {
         flex-grow: 1;
+
+        .org-member__person-image {
+          --person-avatar-size: #{$organization-member-person-avatar-size};
+        }
       }
 
       .org-member__details {
@@ -120,6 +127,10 @@
         height: 46px;
         border-radius: 46px;
         margin-right: 8px;
+
+        .coworker__person-image {
+          --person-avatar-size: #{$organization-coworker-person-avatar-size};
+        }
       }
     }
 
@@ -132,7 +143,9 @@
         margin-right: 4px;
         display: inline;
 
-        --avatar-size: 38px;
+        .direct-report__person-image {
+          --person-avatar-size: #{$organization-direct-report-person-avatar-size};
+        }
       }
     }
   }

packages/mgt-components/src/components/mgt-organization/mgt-organization.ts

@@ -194,6 +194,7 @@ export class MgtOrganization extends BasePersonCardSection {
       >
         <div class="org-member__person">
           <mgt-person
+            class="org-member__person-image"
             .personDetails=${person}
             .fetchImage=${true}
             .view=${ViewType.twolines}
@@ -263,6 +264,7 @@ export class MgtOrganization extends BasePersonCardSection {
             >
               <div class="org-member__person">
                 <mgt-person
+                  class="org-member__person-image"
                   .personDetails=${person}
                   .fetchImage=${true}
                   .showPresence=${true}
@@ -303,6 +305,7 @@ export class MgtOrganization extends BasePersonCardSection {
               @click=${() => this.navigateCard(person)}
             >
               <mgt-person
+                class="direct-report__person-image"
                 .personDetails=${person}
                 .fetchImage=${true}
                 .showPresence=${true}
@@ -328,6 +331,7 @@ export class MgtOrganization extends BasePersonCardSection {
        <div class="org-member org-member--target">
          <div class="org-member__person">
            <mgt-person
+              class="org-member__person-image"
              .personDetails=${person}
              .fetchImage=${true}
              .showPresence=${true}
@@ -357,6 +361,7 @@ export class MgtOrganization extends BasePersonCardSection {
       >
         <div class="coworker__person">
           <mgt-person
+            class="coworker__person-image"
             .personDetails=${person}
             .fetchImage=${true}
             .showPresence=${true}

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

@@ -9,6 +9,9 @@
 @import '../../styles/shared-styles';
 @import './mgt-people-picker.theme';
 
+$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);
+
 :host {
   --person-details-wrapper-width: 0;
 
@@ -107,8 +110,10 @@
         }
       }
 
-      &-person {
+      .person-image-selected {
         width: max-content;
+
+        --person-avatar-size: #{$people-picker-selected-person-avatar-size};
       }
     }
   }
@@ -136,6 +141,10 @@
       &:focus-within {
         background: $dropdown-result-focus-bg-color;
       }
+
+      .person-image-result {
+        --person-avatar-size: #{$people-picker-result-person-avatar-size};
+      }
     }
   }
 

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

@@ -88,6 +88,8 @@ export const registerMgtPeoplePickerComponent = () => {
  * @cssprop --people-picker-input-placeholder-text-color - {Color} the placeholder text color.
  * @cssprop --people-picker-search-icon-color - {Color} the search icon color
  * @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.
  */
 export class MgtPeoplePicker extends MgtTemplatedComponent {
   /**
@@ -998,7 +1000,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       this.renderTemplate('person', { person }, person.id) ||
       mgtHtml`
          <mgt-person
-          class="person"
+          class="person-image-result"
           ?show-presence=${this.showPresence}
           view="twoLines"
           line2-property="jobTitle,mail"
@@ -1021,7 +1023,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     return mgtHtml`
        <mgt-person
          tabindex="-1"
-         class="selected-list-item-person"
+         class="person-image-selected"
          .personDetails=${person}
          .fetchImage=${!this.disableImages}
          .view=${ViewType.oneline}

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

@@ -9,13 +9,19 @@
 @import '../../styles/shared-styles';
 @import './mgt-people.theme';
 
+$people-person-avatar-size: var(--people-person-avatar-size, 24px);
+
 :host .people-list {
   list-style: none;
   margin: var(--people-list-margin, 8px 4px 8px 8px);
   padding: unset;
   display: flex;
   align-items: center;
   gap: var(--people-avatar-gap, 4px);
+
+  .people-person {
+    --person-avatar-size: #{$people-person-avatar-size};
+  }
 }
 
 :host .overflow {

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

@@ -34,6 +34,7 @@ export { PersonCardInteraction } from './../PersonCardInteraction';
  * @cssprop --people-overflow-font-color - {Color} the color of the overflow text.
  * @cssprop --people-overflow-font-size - {String} the text color of the overflow text. Default is 12px.
  * @cssprop --people-overflow-font-weight - {String} the font weight of the overflow text. Default is 400.
+ * @cssprop --people-person-avatar-size - {Length} the size of the avatar. Default is 24px.
  */
 
 export const registerMgtPeopleComponent = () => {
@@ -450,6 +451,7 @@ export class MgtPeople extends MgtTemplatedComponent {
       // query the image from the graph
       mgtHtml`
         <mgt-person
+          class="people-person"
           .personDetails=${person}
           .fetchImage=${true}
           .avatarSize=${avatarSize}

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts

@@ -116,6 +116,46 @@ export const registerMgtPersonCardComponent = () => {
  * @cssprop --person-card-fluent-background-color-hover - {Color} The hover background color of the fluent buttons in person card component
  * @cssprop --person-card-chat-input-hover-color - {Color} The chat input hover color
  * @cssprop --person-card-chat-input-focus-color - {Color} The chat input focus color
+ * @cssprop --contact-title-color - {Color} The color of the contact title in the contact section of the person card component
+ * @cssprop --contact-value-color - {Color} The color of the contact value in the contact section of the person card component
+ * @cssprop --contact-link-color - {Color} The color of the contact link in the contact section of the person card component
+ * @cssprop --contact-link-hover-color - {Color} The hover color of the contact link in the contact section of the person card component
+ * @cssprop --contact-background-color - {Color} The background color of the contact section in person card component
+ * @cssprop --contact-copy-icon-color - {Color} The color of the copy icon in the contact section of the person card component
+ * @cssprop --message-subject-font-size - {Length} The font size of the message subject in the message section of the person card component
+ * @cssprop --message-subject-font-weight - {FontWeight} The font weight of the message subject in the message section of the person card component
+ * @cssprop --message-subject-line-height - {Length} The line height of the message subject in the message section of the person card component
+ * @cssprop --message-from-font-size - {Length} The font size of the message sender in the message section of the person card component
+ * @cssprop --message-from-font-weight - {FontWeight} The font weight of the message sender in the message section of the person card component
+ * @cssprop --message-subject-color - {Color} The color of the message subject in the message section of the person card component
+ * @cssprop --message-from-color - {Color} The color of the message sender in the message section of the person card component
+ * @cssprop --message-color - {Color} The color of the message in the message section of the person card component
+ * @cssprop --message-hover-color - {Color} The hover color of the message section of the person card component
+ * @cssprop --message-date-color - {Color} The color of the message date in the message section of the person card component
+ * @cssprop --message-from-line-height - {Length} The line height of the message sender in the message section of the person card component
+ * @cssprop --profile-background-color - {Color} The background color of the profile section in the person card component
+ * @cssprop --profile-title-color - {Color} The color of the profile title in the profile section of the person card component
+ * @cssprop --profile-section-title-color - {Color} The color of the profile section title in the profile section of the person card component
+ * @cssprop --profile-token-item-color - {Color} The color of the profile token item in the profile section of the person card component
+ * @cssprop --profile-token-item-background-color - {Color} The background color of the profile token item in the profile section of the person card component
+ * @cssprop --profile-token-overflow-color - {Color} The color of the profile token overflow in the profile section of the person card component
+ * @cssprop --organization-active-org-member-border-color - {Color} The border color of the active organization member in the organization section of the person card component
+ * @cssprop --organization-active-org-member-target-background-color - {Color} The background color of the active organization member target in the organization section of the person card component
+ * @cssprop --organization-coworker-hover-color - {Color} The hover color of the coworker in the organization section of the person card component
+ * @cssprop --organization-coworker-border-color - {Color} The border color of the coworker in the organization section of the person card component
+ * @cssprop --organization-coworker-person-avatar-size - {Length} The avatar size of the coworker in the organization section of the person card component
+ * @cssprop --organization-member-person-avatar-size - {Length} The avatar size of the member in the organization section of the person card component
+ * @cssprop --organization-direct-report-person-avatar-size - {Length} The avatar size of the direct report in the organization section of the person card component
+ * @cssprop --organization-title-color - {Color} The color of the organization title in the organization section of the person card component
+ * @cssprop --organization-sub-title-color - {Color} The color of the organization sub-title in the organization section of the person card component
+ * @cssprop --organization-hover-color - {Color} The hover color of the organization section of the person card component
+ * @cssprop --profile-background-color - {Color} The background color of the profile section in the person card component
+ * @cssprop --profile-title-color - {Color} The color of the profile title in the profile section of the person card component
+ * @cssprop --profile-section-title-color - {Color} The color of the profile section title of the person card component
+ * @cssprop --profile-token-item-color - {Color} The color of the token item in the profile section of the person card component
+ * @cssprop --profile-token-item-background-color - {Color} The background color of the token item in the profile section of the person card component
+ * @cssprop --profile-token-overflow-color - {Color} The color of the token overflow in the profile section of the person card component
+ *
  */
 export class MgtPersonCard extends MgtTemplatedComponent implements IHistoryClearer, IExpandable {
   /**