From c50244ff256c2699613a5aabdfaf38563926aa6c Mon Sep 17 00:00:00 2001
From: piitaya <paul.bottein@gmail.com>
Date: Tue, 1 Feb 2022 19:42:11 +0100
Subject: [PATCH] add spacing theme options

---
 src/cards/cover-card/controls/cover-buttons-control.ts | 2 +-
 src/cards/person-card/person-card.ts                   | 5 -----
 src/shared/slider.ts                                   | 2 +-
 src/shared/state-item.ts                               | 4 ++--
 src/utils/card-styles.ts                               | 7 ++++---
 5 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/cards/cover-card/controls/cover-buttons-control.ts b/src/cards/cover-card/controls/cover-buttons-control.ts
index b1893df68..495e6e4ac 100644
--- a/src/cards/cover-card/controls/cover-buttons-control.ts
+++ b/src/cards/cover-card/controls/cover-buttons-control.ts
@@ -60,7 +60,7 @@ export class CoverButtonsControl extends LitElement {
                 width: 100%;
             }
             :host *:not(:last-child) {
-                margin-right: 12px;
+                margin-right: var(--spacing);
             }
             mushroom-button {
                 flex: 1;
diff --git a/src/cards/person-card/person-card.ts b/src/cards/person-card/person-card.ts
index 03825314f..9cf73354c 100644
--- a/src/cards/person-card/person-card.ts
+++ b/src/cards/person-card/person-card.ts
@@ -171,11 +171,6 @@ export class PersonCard extends LitElement implements LovelaceCard {
         return [
             cardStyle,
             css`
-                .container {
-                    display: flex;
-                    flex-direction: column;
-                    padding: 12px;
-                }
                 mushroom-state-item {
                     cursor: pointer;
                 }
diff --git a/src/shared/slider.ts b/src/shared/slider.ts
index 50d0611c1..1e9170b21 100644
--- a/src/shared/slider.ts
+++ b/src/shared/slider.ts
@@ -117,7 +117,7 @@ export class SliderItem extends LitElement {
                 height: 42px;
             }
             .container > *:not(:last-child) {
-                margin-right: 12px;
+                margin-right: var(--spacing);
             }
             .slider {
                 position: relative;
diff --git a/src/shared/state-item.ts b/src/shared/state-item.ts
index 67255c731..28d739589 100644
--- a/src/shared/state-item.ts
+++ b/src/shared/state-item.ts
@@ -34,7 +34,7 @@ export class StateItem extends LitElement {
                 align-items: center;
             }
             .container > *:not(:last-child) {
-                margin-right: 12px;
+                margin-right: var(--spacing);
             }
             .icon {
                 position: relative;
@@ -54,7 +54,7 @@ export class StateItem extends LitElement {
                 flex-direction: column;
             }
             .container.vertical > *:not(:last-child) {
-                margin-bottom: 12px;
+                margin-bottom: var(--spacing);
                 margin-right: 0;
             }
             .container.vertical .info {
diff --git a/src/utils/card-styles.ts b/src/utils/card-styles.ts
index 7b8e7350e..5203d39f3 100644
--- a/src/utils/card-styles.ts
+++ b/src/utils/card-styles.ts
@@ -4,6 +4,7 @@ import { colorCss } from "./colors";
 export const cardStyle = css`
     :host {
         ${colorCss}
+        --spacing: var(--mush-spacing, 12px)
     }
     ha-card {
         height: 100%;
@@ -15,10 +16,10 @@ export const cardStyle = css`
         justify-content: center;
         display: flex;
         flex-direction: column;
-        padding: 12px;
+        padding: var(--spacing);
     }
     .container > *:not(:last-child) {
-        margin-bottom: 12px;
+        margin-bottom: var(--spacing);
     }
     .actions {
         display: flex;
@@ -27,7 +28,7 @@ export const cardStyle = css`
         overflow-y: auto;
     }
     .actions *:not(:last-child) {
-        margin-right: 12px;
+        margin-right: var(--spacing);
     }
     .unavailable {
         --main-color: var(--warning-color);