Fix login / mgt-person custom css (#836)

* Fix login / mgt-person custom css

* Address pr feedback

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

Author: beth-panx

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

@@ -39,16 +39,21 @@ mgt-login .login-button {
   height: var(--height);
   margin: var(--margin);
   padding: var(--padding);
-  color: $button__color;
+  color: set-var(button__color, $theme-default, $login);
   background-color: var(--button-background-color, transparent);
   border: none;
   cursor: pointer;
   transition: color 0.3s, background-color 0.3s;
 
+  mgt-person {
+    --color-sub1: set-var(button__color, $theme-default, $login);
+  }
+
   &:hover {
     color: $button__color--hover;
     --color: #{$button__color--hover};
     background-color: $button__background-color--hover;
+    --color-sub1: #{$button__color--hover};
   }
 
   &:focus {
@@ -78,8 +83,11 @@ mgt-login .popup {
   background-color: $popup__background-color;
   min-width: 240px;
   z-index: 1;
-  color: $popup__color;
-  --color: #{$popup__color};
+  color: set-var(popup__color, $theme-default, $login);
+
+  mgt-person {
+    --color-sub1: set-var(popup__color, $theme-default, $login);
+  }
 }
 
 :host .popup-content,

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

@@ -8,10 +8,23 @@
 @import '../../styles/shared-sass-variables.scss';
 
 $button__color--hover: var(--button-color--hover, #{$commblue_primary});
-$button__color: var(--button-color, set-var(color__sub1, $theme-default, $common));
 $button__background-color--hover: var(
   --button-background-color--hover,
   set-var(background-color--hover, $theme-default, $common)
 );
-$popup__color: var(--popup-color, set-var(color__sub1, $theme-default, $common));
 $popup__background-color: var(--popup-background-color, set-var(background-color__sub1, $theme-default, $common));
+
+$login: (
+  button__color: (
+    _var: --button-color,
+    dark: $text__color__sub1--dark,
+    light: $text__color__sub1--light
+  ),
+  popup__color: (
+    _var: --popup-color,
+    dark: $text__color__sub1--dark,
+    light: $text__color__sub1--light
+  )
+);
+
+@include create-themes($login);

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

@@ -50,7 +50,6 @@ $presence-color-oof: #b4009e;
 
 :host .root {
   display: block;
-  color: $color;
 }
 
 :host svg,
@@ -64,6 +63,7 @@ mgt-person .person-root {
   position: relative;
   display: flex;
   align-items: center;
+  color: $color;
 
   .user-avatar {
     width: $avatar-size;