Add css custom property to change mgt person background color (#513)

* Add css custom property to change mgt person background color and presence colors

* Add background color css var to mgt-person-card

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

Author: beth-panx

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

@@ -30,8 +30,12 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
     display: flex;
     padding: 18px 14px;
 
-    mgt-person.person-image {
-      --avatar-size: 75px;
+    mgt-person {
+      --background-color: var(--person-card-background-color, #ffffff);
+
+      &.person-image {
+        --avatar-size: 75px;
+      }
     }
 
     .details {
@@ -54,12 +58,37 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
           height: 100%;
           top: 0;
           right: 0;
-          background-image: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
-          background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
-          background-image: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
-          background-image: -ms-linear-gradient(left right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
-          background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,$person-card-background-color 100%);
-         }
+          background-image: linear-gradient(
+            to right,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0) 80%,
+            $person-card-background-color 100%
+          );
+          background-image: -moz-linear-gradient(
+            left,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0) 80%,
+            $person-card-background-color 100%
+          );
+          background-image: -o-linear-gradient(
+            left,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0) 80%,
+            $person-card-background-color 100%
+          );
+          background-image: -ms-linear-gradient(
+            left,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0) 80%,
+            $person-card-background-color 100%
+          );
+          background-image: -webkit-linear-gradient(
+            left,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0) 80%,
+            $person-card-background-color 100%
+          );
+        }
       }
 
       .job-title {

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

@@ -21,6 +21,7 @@ $font-size: var(--font-size, #{$ms-font-size-m});
 $font-weight: var(--font-weight, #{$ms-font-weight-semibold});
 $color: var(--color, #{$ms-color-neutralDark});
 $text-transform: var(text-transform, none);
+$background-color: var(--background-color, #ffffff);
 
 $line2-font-size: var(--line2-font-size, var(--email-font-size, #{$ms-font-size-s}));
 $line2-font-weight: var(--line2-font-weight, 400);
@@ -67,6 +68,7 @@ mgt-person .person-root {
   position: relative;
   display: flex;
   align-items: center;
+  background-color: $background-color;
 
   .user-avatar {
     width: $avatar-size;
@@ -83,11 +85,11 @@ mgt-person .person-root {
       top: calc(#{$avatar-size} * 0.72 - 4px);
       width: calc(v#{$avatar-size} * 0.28);
       height: calc(#{$avatar-size} * 0.28);
-      border: 2px solid #ffffff;
+      border: 2px solid $background-color;
       border-radius: 50%;
 
       .presence-oof-offline-wrapper {
-        background-color: #ffffff;
+        background-color: $background-color;
         border-color: $presence-color-oof;
 
         .presence-oof-offline svg {
@@ -110,7 +112,7 @@ mgt-person .person-root {
         align-items: center;
 
         &.presence-offline {
-          background-color: #ffffff;
+          background-color: $background-color;
           border-color: $presence-color-invisible;
         }
 
@@ -120,7 +122,7 @@ mgt-person .person-root {
         }
 
         &.presence-oof-available {
-          background-color: #ffffff;
+          background-color: $background-color;
           border-color: $presence-color-online;
         }
 
@@ -135,7 +137,7 @@ mgt-person .person-root {
         }
 
         &.presence-oof-dnd {
-          background-color: #ffffff;
+          background-color: $background-color;
           border-color: $presence-color-dnd;
         }
 
@@ -145,7 +147,7 @@ mgt-person .person-root {
         }
 
         &.presence-oof-busy {
-          background-color: #ffffff;
+          background-color: $background-color;
           border-color: $presence-color-dnd;
         }
       }
@@ -159,7 +161,7 @@ mgt-person .person-root {
 
       .presence-available::before {
         content: $ms-icon-code-SkypeCheck;
-        color: #ffffff;
+        color: $background-color;
         margin-left: calc(#{$avatar-size} * 0.07 - 2px);
       }
 
@@ -171,13 +173,13 @@ mgt-person .person-root {
 
       .presence-away::before {
         content: $ms-icon-code-SkypeClock;
-        color: #ffffff;
+        color: $background-color;
         margin-left: calc(#{$avatar-size} * 0.07 - 2px);
       }
 
       .presence-dnd::before {
         content: $ms-icon-code-SkypeMinus;
-        color: #ffffff;
+        color: $background-color;
         margin-left: calc(#{$avatar-size} * 0.07 - 2px);
       }
 

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

@@ -66,6 +66,7 @@ export enum PersonViewType {
  * @cssprop --font-size - {Length} Font size
  * @cssprop --font-weight - {Length} Font weight
  * @cssprop --color - {Color} Color
+ * @cssprop --background-color - {Color} Background color
  * @cssprop --text-transform - {String} text transform
  * @cssprop --line2-font-size - {Length} Line 2 font size
  * @cssprop --line2-font-weight - {Length} Line 2 font weight