Add theme variables for grid section and sections view (#20099)

* Fix variable

* Add section view theme variables

* Add grid section theme variables

src/panels/lovelace/sections/hui-grid-section.ts

@@ -183,18 +183,20 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
       haStyle,
       css`
         :host {
-          --grid-gap: 8px;
-          --grid-row-height: 66px;
+          --column-count: 4;
+          --row-gap: var(--ha-section-grid-row-gap, 8px);
+          --column-gap: var(--ha-section-grid-column-gap, 8px);
+          --row-height: 66px;
           display: flex;
           flex-direction: column;
-          gap: var(--grid-gap);
+          gap: var(--row-gap);
         }
         .container {
-          --column-count: 4;
           display: grid;
           grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
-          grid-auto-rows: minmax(var(--grid-row-height), auto);
-          gap: var(--grid-gap);
+          grid-auto-rows: minmax(var(--row-height), auto);
+          row-gap: var(--row-gap);
+          column-gap: var(--column-gap);
           padding: 0;
           margin: 0 auto;
         }
@@ -203,7 +205,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           padding: 8px;
           border-radius: var(--ha-card-border-radius, 12px);
           border: 2px dashed var(--divider-color);
-          min-height: var(var(--grid-row-height));
+          min-height: var(--row-height);
         }
 
         .title {
@@ -232,8 +234,8 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
 
         .card.fit-rows {
           height: calc(
-            (var(--row-size, 1) * (var(--grid-row-height) + var(--grid-gap))) - var(
-                --grid-gap
+            (var(--row-size, 1) * (var(--row-height) + var(--row-gap))) - var(
+                --row-gap
               )
           );
         }
@@ -254,7 +256,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           cursor: pointer;
           border-radius: var(--ha-card-border-radius, 12px);
           border: 2px dashed var(--primary-color);
-          height: var(--grid-row-height);
+          height: var(--row-height);
           order: 1;
         }
         .add:focus {

src/panels/lovelace/views/hui-sections-view.ts

@@ -73,9 +73,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         <div
           class="container"
           style=${styleMap({
-            "--section-count": String(
-              sectionsConfig.length + (editMode ? 1 : 0)
-            ),
+            "--total-count": String(sectionsConfig.length + (editMode ? 1 : 0)),
           })}
         >
           ${repeat(
@@ -234,22 +232,25 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        --grid-gap: 32px;
-        --grid-max-section-count: 4;
-        --grid-section-min-width: 320px;
-        --grid-section-max-width: 500px;
+        --max-column-count: 4;
+        --row-gap: var(--ha-view-sections-row-gap, 8px);
+        --column-gap: var(--ha-view-sections-column-gap, 32px);
+        --column-min-width: var(--ha-view-sections-column-min-width, 320px);
+        --column-max-width: var(--ha-view-sections-column-max-width, 500px);
         display: block;
       }
 
       .badges {
-        margin: 12px 8px 4px 8px;
+        margin: 4px 0;
+        padding: var(--row-gap) var(--column-gap);
+        padding-bottom: 0;
         font-size: 85%;
         text-align: center;
       }
 
       .container > * {
         position: relative;
-        max-width: var(--grid-section-max-width);
+        max-width: var(--column-max-width);
         width: 100%;
       }
 
@@ -258,15 +259,15 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       }
 
       .container {
-        --max-count: min(var(--section-count), var(--grid-max-section-count));
+        --max-count: min(var(--total-count), var(--max-column-count));
         --max-width: min(
           calc(
-            (var(--max-count) + 1) * var(--grid-section-min-width) +
-              (var(--max-count) + 2) * var(--grid-gap) - 1px
+            (var(--max-count) + 1) * var(--column-min-width) +
+              (var(--max-count) + 2) * var(--column-gap) - 1px
           ),
           calc(
-            var(--max-count) * var(--grid-section-max-width) +
-              (var(--max-count) + 1) * var(--grid-gap)
+            var(--max-count) * var(--column-max-width) + (var(--max-count) + 1) *
+              var(--column-gap)
           )
         );
         display: grid;
@@ -274,10 +275,10 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         justify-items: center;
         grid-template-columns: repeat(
           auto-fit,
-          minmax(min(var(--grid-section-min-width), 100%), 1fr)
+          minmax(min(var(--column-min-width), 100%), 1fr)
         );
-        grid-gap: 8px var(--grid-gap);
-        padding: 8px var(--grid-gap);
+        gap: var(--row-gap) var(--column-gap);
+        padding: var(--row-gap) var(--column-gap);
         box-sizing: border-box;
         max-width: var(--max-width);
         margin: 0 auto;
@@ -285,7 +286,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
       @media (max-width: 600px) {
         .container {
-          --grid-gap: 8px;
+          --column-gap: var(--row-gap);
         }
       }
 
@@ -314,14 +315,14 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       }
 
       .create {
-        margin-top: calc(66px + 8px);
+        margin-top: calc(66px + var(--row-gap));
         outline: none;
         background: none;
         cursor: pointer;
         border-radius: var(--ha-card-border-radius, 12px);
         border: 2px dashed var(--primary-color);
         order: 1;
-        height: calc(66px + (8px + 2px) * 2);
+        height: calc(66px + 2 * (var(--row-gap) + 2px));
         padding: 8px;
         box-sizing: border-box;
       }