From d8f21d99af1f7391bcd3917d79adcb528c919183 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Mon, 29 Apr 2019 20:31:27 +0200
Subject: [PATCH] Use named slots to have advanced ha-card headers (#3127)

* Use named slots to have advanced ha-card headers

* Fix header text color
---
 src/components/ha-card.ts                     | 11 +++++----
 .../lovelace/cards/hui-entities-card.ts       | 24 ++++---------------
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 3cc329a87f..471905673f 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -28,19 +28,22 @@ class HaCard extends LitElement {
         display: block;
         transition: all 0.3s ease-out;
       }
-      .header:not(:empty) {
-        font-size: 24px;
+      .header:not(:empty),
+      .header::slotted(*) {
+        color: var(--ha-card-header-color, --primary-text-color);
+        font-family: var(--ha-card-header-font-family, inherit);
+        font-size: var(--ha-card-header-font-size, 24px);
         letter-spacing: -0.012em;
         line-height: 32px;
-        opacity: 0.87;
         padding: 24px 16px 16px;
+        display: block;
       }
     `;
   }
 
   protected render(): TemplateResult {
     return html`
-      <div class="header">${this.header}</div>
+      <slot class="header" name="header">${this.header}</slot>
       <slot></slot>
     `;
   }
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 3ff8951ece..0e7ca75f1b 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -89,7 +89,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         ${!title && !show_header_toggle
           ? html``
           : html`
-              <div class="header">
+              <div class="header" slot="header">
                 <div class="name">${title}</div>
                 ${show_header_toggle === false
                   ? html``
@@ -114,12 +114,8 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
-      ha-card {
-        padding: 16px;
-      }
-
       #states {
-        margin: -4px 0;
+        padding: 12px 16px;
       }
 
       #states > * {
@@ -131,28 +127,16 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
       }
 
       .header {
-        /* start paper-font-headline style */
-        font-family: "Roboto", "Noto", sans-serif;
-        -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
-        text-rendering: optimizeLegibility;
-        font-size: 24px;
-        font-weight: 400;
-        letter-spacing: -0.012em;
-        /* end paper-font-headline style */
-
-        line-height: 40px;
-        color: var(--primary-text-color);
-        padding: 4px 0 12px;
+        margin-bottom: -8px;
+        padding-bottom: 0px;
         display: flex;
         justify-content: space-between;
       }
 
       .header .name {
-        /* start paper-font-common-nowrap style */
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        /* end paper-font-common-nowrap */
       }
 
       .state-card-dialog {