mgt-person-card additional custom css (#363)

* adding additional customizable css

* updating names & subtitle

* displayname, title, subtitle names

* updating to match docs

Co-authored-by: Shane Weaver <[email protected]>
Co-authored-by: Nikola Metulev <[email protected]>

Author: 3 people

src/components/mgt-person-card/mgt-person-card.scss

@@ -8,14 +8,22 @@
 @import '../../styles/shared-styles.scss';
 @import '../../../node_modules/office-ui-fabric-core/dist/sass/References';
 
-$font-size: var(--font-size, #{$ms-font-size-m});
-$font-weight: var(--font-weight, #{$ms-font-weight-semibold});
-$color: var(--color, #{$ms-color-neutralDark});
+$person-card-display-name-font-size: var(--person-card-display-name-font-size, 27.3103px);
+$person-card-title-font-size: var(--person-card-title-font-size, 18.2069px);
+$person-card-subtitle-font-size: var(--person-card-subtitle-font-size, 15.1724px);
+$person-card-details-title-font-size: var(--person-card-details-title-font-size, 14px);
+$person-card-details-item-font-size: var(--person-card-details-item-font-size, 15px);
+$person-card-display-name-color: var(--person-card-display-name-color, #333333);
+$person-card-title-color: var(--person-card-title-color, #767676);
+$person-card-subtitle-color: var(--person-card-subtitle-color, #767676);
+$person-card-details-title-color: var(--person-card-details-title-color, #000000);
+$person-card-details-item-color: var(--person-card-details-item-color, #201f1e);
+$person-card-background-color: var(--person-card-background-color, #ffffff);
 
 :host .root {
   position: relative;
+  background: $person-card-background-color;
   width: var(--mgt-flyout-set-width, 340px);
-  background: #ffffff;
   font-family: var(--default-font-family);
 
   .person-details-container {
@@ -31,19 +39,18 @@ $color: var(--color, #{$ms-color-neutralDark});
       line-height: 1.15;
 
       .display-name {
-        font-size: 27.3103px;
-        color: #333333;
+        font-size: $person-card-display-name-font-size;
+        color: $person-card-display-name-color;
       }
 
       .job-title {
-        font-size: 18.2069px;
-        color: #767676;
-        font-weight: 600;
+        font-size: $person-card-title-font-size;
+        color: $person-card-title-color;
       }
 
       .department {
-        font-size: 15.1724px;
-        color: #767676;
+        font-size: $person-card-subtitle-font-size;
+        color: $person-card-subtitle-color;
       }
 
       .base-icons {
@@ -87,15 +94,16 @@ $color: var(--color, #{$ms-color-neutralDark});
       .contact-text {
         margin: 0 0 24px 0;
         font-weight: 600;
-        font-size: 14px;
-        color: #000000;
+        font-size: $person-card-details-title-font-size;
+        color: $person-card-details-title-color;
       }
 
       .icons {
         line-height: normal;
         font-style: normal;
         font-weight: normal;
-        font-size: 15px;
+        font-size: $person-card-details-item-font-size;
+        color: $person-card-details-item-color;
         text-align: left;
 
         .details-icon {

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

@@ -26,10 +26,17 @@ import { styles } from './mgt-person-card-css';
  * @class MgtPersonCard
  * @extends {MgtTemplatedComponent}
  *
- * @cssprop --font-size - {Length} Font size
- * @cssprop --font-weight - {Length} Font weight
- * @cssprop --height - {String} Height
- * @cssprop --background-color - {Color} Background color
+ * @cssprop --person-card-display-name-font-size - {Length} Font size of display name title
+ * @cssprop --person-card-display-name-color - {Color} Color of display name font
+ * @cssprop --person-card-title-font-size - {Length} Font size of title
+ * @cssprop --person-card-title-color - {Color} Color of title
+ * @cssprop --person-card-subtitle-font-size - {Length} Font size of subtitle
+ * @cssprop --person-card-subtitle-color - {Color} Color of subttitle
+ * @cssprop --person-card-details-title-font-size - {Length} Font size additional details title
+ * @cssprop --person-card-details-title-color- {Color} Color of additional details title
+ * @cssprop --person-card-details-item-font-size - {Length} Font size items in additional details section
+ * @cssprop --person-card-details-item-color - {Color} Color of items in additional details section
+ * @cssprop --person-card-background-color - {Color} Color of person card background
  */
 @customElement('mgt-person-card')
 export class MgtPersonCard extends MgtTemplatedComponent {