Merge branch 'dev' of https://github.com/home-assistant/frontend into dev

src/components/ha-qr-code.ts

@@ -67,7 +67,8 @@ export class HaQrCode extends LitElement {
       const computedStyles = getComputedStyle(this);
 
       QRCode.toCanvas(canvas, this.data, {
-        errorCorrectionLevel: this.errorCorrectionLevel,
+        errorCorrectionLevel:
+          this.errorCorrectionLevel || (this.centerImage ? "Q" : "M"),
         width: this.width,
         scale: this.scale,
         margin: this.margin,

src/panels/lovelace/cards/hui-button-card.ts

@@ -191,6 +191,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         @blur=${this.handleRippleBlur}
         @mousedown=${this.handleRippleActivate}
         @mouseup=${this.handleRippleDeactivate}
+        @mouseenter=${this.handleRippleMouseEnter}
+        @mouseleave=${this.handleRippleMouseLeave}
         @touchstart=${this.handleRippleActivate}
         @touchend=${this.handleRippleDeactivate}
         @touchcancel=${this.handleRippleDeactivate}
@@ -204,6 +206,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         tabindex=${ifDefined(
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
+        style=${styleMap({
+          "--state-color": colored ? this._computeColor(stateObj) : undefined,
+        })}
       >
         ${this._config.show_icon
           ? html`
@@ -217,7 +222,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
                 .hass=${this.hass}
                 .stateObj=${stateObj}
                 style=${styleMap({
-                  color: colored ? this._computeColor(stateObj) : undefined,
                   filter: colored ? stateColorBrightness(stateObj) : undefined,
                   height: this._config.icon_height
                     ? this._config.icon_height
@@ -280,23 +284,37 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     this._rippleHandlers.startPress(evt);
   }
 
+  @eventOptions({ passive: true })
   private handleRippleDeactivate() {
     this._rippleHandlers.endPress();
   }
 
+  @eventOptions({ passive: true })
   private handleRippleFocus() {
     this._rippleHandlers.startFocus();
   }
 
+  @eventOptions({ passive: true })
   private handleRippleBlur() {
     this._rippleHandlers.endFocus();
   }
 
+  @eventOptions({ passive: true })
+  private handleRippleMouseEnter() {
+    this._rippleHandlers.startHover();
+  }
+
+  @eventOptions({ passive: true })
+  private handleRippleMouseLeave() {
+    this._rippleHandlers.endHover();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       iconColorCSS,
       css`
         ha-card {
+          --mdc-ripple-color: var(--state-color);
           cursor: pointer;
           display: flex;
           flex-direction: column;
@@ -318,9 +336,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         ha-state-icon {
           width: 40%;
           height: auto;
-          color: var(--paper-item-icon-color, #44739e);
+          max-height: 80%;
+          color: var(--state-color, var(--paper-item-icon-color, #44739e));
           --mdc-icon-size: 100%;
           --state-inactive-color: var(--paper-item-icon-color, #44739e);
+          transition: transform 180ms ease-in-out;
         }
 
         ha-state-icon + span {
@@ -332,6 +352,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           outline: none;
         }
 
+        :host(:focus-visible) ha-state-icon,
+        :host(:active) ha-state-icon {
+          transform: scale(1.2);
+        }
+
         .state {
           font-size: 0.9rem;
           color: var(--secondary-text-color);