Update mgt-person background color css custom property (#520)

* Fix for people-picker background color

* Update background color css property to only apply to presence

* Add comment to ts file

* update css

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

Author: beth-panx

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

@@ -31,8 +31,6 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
     padding: 18px 14px;
 
     mgt-person {
-      --background-color: var(--person-card-background-color, #ffffff);
-
       &.person-image {
         --avatar-size: 75px;
       }

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

@@ -21,7 +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);
+$presence-background-color: var(--presence-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);
@@ -68,7 +68,6 @@ mgt-person .person-root {
   position: relative;
   display: flex;
   align-items: center;
-  background-color: $background-color;
 
   .user-avatar {
     width: $avatar-size;
@@ -85,11 +84,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 $background-color;
+      border: 2px solid $presence-background-color;
       border-radius: 50%;
 
       .presence-oof-offline-wrapper {
-        background-color: $background-color;
+        background-color: $presence-background-color;
         border-color: $presence-color-oof;
 
         .presence-oof-offline svg {
@@ -112,7 +111,7 @@ mgt-person .person-root {
         align-items: center;
 
         &.presence-offline {
-          background-color: $background-color;
+          background-color: $presence-background-color;
           border-color: $presence-color-invisible;
         }
 
@@ -122,7 +121,7 @@ mgt-person .person-root {
         }
 
         &.presence-oof-available {
-          background-color: $background-color;
+          background-color: $presence-background-color;
           border-color: $presence-color-online;
         }
 
@@ -137,7 +136,7 @@ mgt-person .person-root {
         }
 
         &.presence-oof-dnd {
-          background-color: $background-color;
+          background-color: $presence-background-color;
           border-color: $presence-color-dnd;
         }
 
@@ -147,7 +146,7 @@ mgt-person .person-root {
         }
 
         &.presence-oof-busy {
-          background-color: $background-color;
+          background-color: $presence-background-color;
           border-color: $presence-color-dnd;
         }
       }
@@ -161,7 +160,7 @@ mgt-person .person-root {
 
       .presence-available::before {
         content: $ms-icon-code-SkypeCheck;
-        color: $background-color;
+        color: $presence-background-color;
         margin-left: calc(#{$avatar-size} * 0.07 - 2px);
       }
 
@@ -173,13 +172,13 @@ mgt-person .person-root {
 
       .presence-away::before {
         content: $ms-icon-code-SkypeClock;
-        color: $background-color;
+        color: $presence-background-color;
         margin-left: calc(#{$avatar-size} * 0.07 - 2px);
       }
 
       .presence-dnd::before {
         content: $ms-icon-code-SkypeMinus;
-        color: $background-color;
+        color: $presence-background-color;
         margin-left: calc(#{$avatar-size} * 0.07 - 2px);
       }
 

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

@@ -66,7 +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 --presence-background-color - {Color} Presence badge 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