From 442a8f11a7fda58712de17a5e7e1b013cd81d6c9 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Fri, 27 Sep 2024 13:45:18 +0200
Subject: [PATCH] Improve heading card style and add theme variables (#22129)

improve heading card style and add theme variables
---
 src/panels/lovelace/cards/hui-heading-card.ts | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts
index ee972ed1344c..5058f2560ce7 100644
--- a/src/panels/lovelace/cards/hui-heading-card.ts
+++ b/src/panels/lovelace/cards/hui-heading-card.ts
@@ -171,12 +171,12 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
         flex-direction: row;
         align-items: center;
         gap: 8px;
-        color: var(--primary-text-color);
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 24px;
+        color: var(--ha-heading-card-title-color, var(--primary-text-color));
+        font-size: var(--ha-heading-card-title-font-size, 16px);
+        font-weight: var(--ha-heading-card-title-font-weight, 400);
+        line-height: var(--ha-heading-card-title-line-height, 24px);
         letter-spacing: 0.1px;
-        --mdc-icon-size: 16px;
+        --mdc-icon-size: 18px;
       }
       .content ha-icon,
       .content ha-icon-next {
@@ -194,10 +194,13 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
         min-width: 0;
       }
       .content.subtitle {
-        color: var(--secondary-text-color);
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 20px;
+        color: var(
+          --ha-heading-card-subtitle-color,
+          var(--secondary-text-color)
+        );
+        font-size: var(--ha-heading-card-subtitle-font-size, 14px);
+        font-weight: var(--ha-heading-card-subtitle-font-weight, 500);
+        line-height: var(--ha-heading-card-subtitle-line-height, 20px);
       }
       .badges {
         display: flex;