From d5b71f177d91090750f494c110cde272da3340c0 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 1 Feb 2024 15:33:47 +0100
Subject: [PATCH] Use same padding to match as vertical/horizontal stack card
 for title

---
 src/cards/title-card/title-card.ts |  6 ++++--
 src/utils/theme.ts                 | 12 ++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/cards/title-card/title-card.ts b/src/cards/title-card/title-card.ts
index 0fce2612..e607e15e 100644
--- a/src/cards/title-card/title-card.ts
+++ b/src/cards/title-card/title-card.ts
@@ -300,17 +300,19 @@ export class TitleCard extends MushroomBaseElement implements LovelaceCard {
                     transform: translateX(-4px);
                 }
                 .title {
-                    color: var(--primary-text-color);
+                    color: var(--title-color);
                     font-size: var(--title-font-size);
                     font-weight: var(--title-font-weight);
                     line-height: var(--title-line-height);
+                    letter-spacing: var(--title-letter-spacing);
                     --mdc-icon-size: var(--title-font-size);
                 }
                 .subtitle {
-                    color: var(--secondary-text-color);
+                    color: var(--subtitle-color);
                     font-size: var(--subtitle-font-size);
                     font-weight: var(--subtitle-font-weight);
                     line-height: var(--subtitle-line-height);
+                    letter-spacing: var(--subtitle-letter-spacing);
                     --mdc-icon-size: var(--subtitle-font-size);
                 }
                 .align-start {
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 51573178..74a5f1a7 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -4,14 +4,18 @@ export const themeVariables = css`
     --spacing: var(--mush-spacing, 12px);
 
     /* Title */
-    --title-padding: var(--mush-title-padding, 24px 12px 16px);
-    --title-spacing: var(--mush-title-spacing, 12px);
+    --title-padding: var(--mush-title-padding, 24px 12px 8px);
+    --title-spacing: var(--mush-title-spacing, 8px);
     --title-font-size: var(--mush-title-font-size, 24px);
     --title-font-weight: var(--mush-title-font-weight, normal);
-    --title-line-height: var(--mush-title-line-height, 1.2);
+    --title-line-height: var(--mush-title-line-height, 32px);
+    --title-color: var(--mush-title-color, var(--primary-text-color));
+    --title-letter-spacing: var(--mush-title-letter-spacing, -0.288px);
     --subtitle-font-size: var(--mush-subtitle-font-size, 16px);
     --subtitle-font-weight: var(--mush-subtitle-font-weight, normal);
-    --subtitle-line-height: var(--mush-subtitle-line-height, 1.2);
+    --subtitle-line-height: var(--mush-subtitle-line-height, 24px);
+    --subtitle-color: var(--mush-subtitle-color, var(--secondary-text-color));
+    --subtitle-letter-spacing: var(--mush-subtitle-letter-spacing, 0px);
 
     /* Card */
     --card-primary-font-size: var(--mush-card-primary-font-size, 14px);