fix: add login custom styles, removes style not in use (#2587)

* remove style not in use, add custom styling tokens * fix account-item hover --------- Co-authored-by: Gavin Barron <[email protected]>
microsoftgraph · Jul 7, 2023 · 7ba98e4 · 7ba98e4
1 parent 9013fd2
commit 7ba98e4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.scss b/packages/mgt-components/src/components/mgt-login/mgt-login.scss
@@ -14,7 +14,9 @@ $signed-out-bg: padding-box linear-gradient(var(--neutral-fill-rest), var(--neut
 $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))};
 
 :host {
   .signed-in-person {
@@ -108,13 +110,15 @@ $button-padding: var(--login-button-padding, 0);
       list-style-type: none;
 
       &:hover {
-        background: var(--neutral-fill-stealth-hover);
+        background: $login-account-item-hover-bg-color;
+
+        --person-background-color: $login-account-item-hover-bg-color;
       }
     }
 
     .flyout {
       .flyout-command {
-        color: var(--accent-foreground-rest);
+        color: $login-flyout-command-text-color;
       }
 
       .popup {

diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
@@ -71,7 +71,6 @@ type PersonViewConfig = {
  * @cssprop --login-signed-out-button-text-color - {Color} the background color of the component when signed out.
  * @cssprop --login-button-padding - {Length} the padding of the button. Default is 0px.
  * @cssprop --login-popup-background-color - {Color} the background color of the popup.
- * @cssprop --login-popup-text-color - {Color} the color of the text in the popup.
  * @cssprop --login-popup-command-button-background-color - {Color} the color of the background to the popup command button.
  * @cssprop --login-popup-padding - {Length} the padding applied to the popup card. Default is 16px.
  * @cssprop --login-add-account-button-text-color - {Color} the color for the text and icon of the add account button.
@@ -80,6 +79,8 @@ type PersonViewConfig = {
  * @cssprop --login-command-button-text-color - {Color} the color for the text of the command button.
  * @cssprop --login-command-button-background-color - {Color} the color for the background of the command button.
  * @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.
  */
 @customElement('login')
 export class MgtLogin extends MgtTemplatedComponent {

diff --git a/stories/components/login/login.styles.js b/stories/components/login/login.styles.js
@@ -25,7 +25,6 @@ export const customCSSProperties = () => html`
     --login-signed-in-hover-background: green;
     --login-button-padding:5px;
     --login-popup-background-color: blue;
-    --login-popup-text-color: brown;
     --login-popup-command-button-background-color: orange;
     --login-popup-padding: 8px;
     --login-add-account-button-text-color: yellow;
@@ -34,6 +33,8 @@ export const customCSSProperties = () => html`
     --login-command-button-background-color: orange;
     --login-command-button-hover-background-color: purple;
     --login-command-button-text-color: black;
+    --login-account-item-hover-bg-color: black;
+    --login-flyout-command-text-color: maroon;
 
     /** person component tokens **/
     --person-line1-text-color: whitesmoke;