Fix letter spacing theme variable (#1353)

piitaya · Feb 1, 2024 · c0cbb47 · c0cbb47
1 parent 19955e4
commit c0cbb47
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/shared/state-info.ts b/src/shared/state-info.ts
@@ -1,18 +1,18 @@
 import { css, CSSResultGroup, html, LitElement, nothing, TemplateResult } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 @customElement("mushroom-state-info")
 export class StateItem extends LitElement {
-    @property() public primary: string = "";
+    @property({ attribute: false }) public primary?: string | TemplateResult<1>;
 
-    @property() public secondary?: string;
+    @property({ attribute: false }) public secondary?: string | TemplateResult<1>;
 
-    @property() public multiline_secondary?: boolean = false;
+    @property({ type: Boolean }) public multiline_secondary?: boolean = false;
 
     protected render(): TemplateResult {
         return html`
             <div class="container">
-                <span class="primary">${this.primary}</span>
+                <span class="primary">${this.primary ?? ""}</span>
                 ${this.secondary
                     ? html`<span
                           class="secondary${this.multiline_secondary ? ` multiline_secondary` : ``}"

diff --git a/src/utils/base-card.ts b/src/utils/base-card.ts
@@ -52,7 +52,7 @@ export class MushroomBaseCard extends MushroomBaseElement {
                         <mushroom-state-info
                             slot="info"
                             .primary=${config.entity}
-                            secondary=${customLocalize("card.not_found")}
+                            .secondary=${customLocalize("card.not_found")}
                         ></mushroom-state-info>
                     </mushroom-state-item>
                 </mushroom-card>

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -26,8 +26,8 @@ export const themeVariables = css`
     --card-secondary-line-height: var(--mush-card-secondary-line-height, 16px);
     --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);
-    --card-secondary-letter-spacing: var(--mush-card-secondary-color, 0.4px);
+    --card-primary-letter-spacing: var(--mush-card-primary-letter-spacing, 0.1px);
+    --card-secondary-letter-spacing: var(--mush-card-secondary-letter-spacing, 0.4px);
 
     /* Chips */
     --chip-spacing: var(--mush-chip-spacing, 8px);