Use same padding to match as vertical/horizontal stack card for title

piitaya · Feb 1, 2024 · de270e3 · de270e3
1 parent 17b61cc
commit de270e3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -4,22 +4,26 @@ 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, 1.333);
+    --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, 1.5);
+    --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);
     --card-secondary-font-size: var(--mush-card-secondary-font-size, 12px);
     --card-primary-font-weight: var(--mush-card-primary-font-weight, 500);
     --card-secondary-font-weight: var(--mush-card-secondary-font-weight, 400);
-    --card-primary-line-height: var(--mush-card-primary-line-height, 20px);
-    --card-secondary-line-height: var(--mush-card-secondary-line-height, 16px);
+    --card-primary-line-height: var(--mush-card-primary-line-height, 1.428);
+    --card-secondary-line-height: var(--mush-card-secondary-line-height, 1.333);
     --card-primary-color: var(--mush-card-primary-color, var(--primary-text-color));
     --card-secondary-color: var(--mush-card-secondary-color, var(--primary-text-color));
     --card-primary-letter-spacing: var(--mush-card-secondary-color, 0.1px);