Use space tokens in more info dialog area (#28627)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

src/dialogs/more-info/components/ha-more-info-control-select-container.ts

@@ -37,8 +37,8 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
       overflow: auto;
       -ms-overflow-style: none; /* IE and Edge */
       scrollbar-width: none; /* Firefox */
-      margin: -2px -24px;
+      margin: -2px calc(var(--ha-space-6) * -1);
-      padding: 2px 24px;
+      padding: 2px var(--ha-space-6);
     }
     .controls-scroll::-webkit-scrollbar {
       display: none;

src/dialogs/more-info/components/ha-more-info-state-header.ts

@@ -84,8 +84,8 @@ export class HaMoreInfoStateHeader extends LitElement {
       font-weight: var(--ha-font-weight-medium);
       line-height: var(--ha-line-height-normal);
       letter-spacing: 0.1px;
-      padding: 4px 0;
+      padding: var(--ha-space-1) 0;
-      margin-bottom: 20px;
+      margin-bottom: var(--ha-space-5);
       cursor: pointer;
       user-select: none;
       -webkit-user-select: none;

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -268,14 +268,14 @@ class DialogLightColorFavorite extends LitElement {
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 24px;
+          padding: var(--ha-space-6);
           flex: 1;
         }
         .modes {
           display: flex;
           flex-direction: row;
           justify-content: flex-end;
-          padding: 0 24px;
+          padding: 0 var(--ha-space-6);
         }
         .wheel {
           width: 30px;

src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts

@@ -254,14 +254,14 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: -8px;
+      margin: calc(var(--ha-space-2) * -1);
       flex-wrap: wrap;
       max-width: 250px;
       user-select: none;
     }
 
     .container > * {
-      margin: 8px;
+      margin: var(--ha-space-2);
     }
 
     .color {

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -515,7 +515,7 @@ class LightRgbColorPicker extends LitElement {
         hr {
           border-color: var(--divider-color);
           border-bottom: none;
-          margin: 16px 0;
+          margin: var(--ha-space-4) 0;
         }
       `,
     ];

src/dialogs/more-info/components/more-info-control-style.ts

@@ -15,22 +15,22 @@ export const moreInfoControlStyle = css`
   }
 
   .controls:not(:last-child) {
-    margin-bottom: 24px;
+    margin-bottom: var(--ha-space-6);
   }
 
   .controls > *:not(:last-child) {
-    margin-bottom: 24px;
+    margin-bottom: var(--ha-space-6);
   }
 
   .buttons {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 12px;
+    margin-bottom: var(--ha-space-3);
   }
 
   .buttons > * {
-    margin: 8px;
+    margin: var(--ha-space-2);
   }
 
   ha-attributes {
@@ -38,6 +38,6 @@ export const moreInfoControlStyle = css`
     width: 100%;
   }
   ha-more-info-control-select-container + ha-attributes:not([empty]) {
-    margin-top: 16px;
+    margin-top: var(--ha-space-4);
   }
 `;

src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts

@@ -209,7 +209,7 @@ class MoreInfoSirenAdvancedControls extends LitElement {
           flex-direction: row;
           justify-content: center;
           gap: var(--ha-space-4);
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
         ha-control-button {
           --control-button-border-radius: var(--ha-border-radius-xl);

src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts

@@ -48,7 +48,7 @@ class MoreInfoViewVoiceAssistants extends LitElement {
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 24px;
+          padding: var(--ha-space-6);
           flex: 1;
         }
       `,

src/dialogs/more-info/controls/more-info-automation.ts

@@ -52,7 +52,7 @@ class MoreInfoAutomation extends LitElement {
       justify-content: space-between;
     }
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
@@ -60,7 +60,7 @@ class MoreInfoAutomation extends LitElement {
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
   `;
 }

src/dialogs/more-info/controls/more-info-camera.ts

@@ -106,7 +106,7 @@ class MoreInfoCamera extends LitElement {
       flex-wrap: wrap;
       justify-content: flex-end;
       box-sizing: border-box;
-      padding: 16px;
+      padding: var(--ha-space-4);
       z-index: 1;
       gap: var(--ha-space-2);
     }

src/dialogs/more-info/controls/more-info-climate.ts

@@ -511,7 +511,7 @@ class MoreInfoClimate extends LitElement {
           align-items: center;
           justify-content: center;
           text-align: center;
-          margin-bottom: 40px;
+          margin-bottom: var(--ha-space-10);
         }
 
         .current div {
@@ -534,7 +534,7 @@ class MoreInfoClimate extends LitElement {
           font-size: var(--ha-font-size-m);
           line-height: var(--ha-line-height-condensed);
           letter-spacing: 0.4px;
-          margin-bottom: 4px;
+          margin-bottom: var(--ha-space-1);
         }
 
         .current .value {
@@ -545,7 +545,7 @@ class MoreInfoClimate extends LitElement {
         }
         ha-select {
           width: 100%;
-          margin-top: 8px;
+          margin-top: var(--ha-space-2);
         }
 
         .container-humidity .single-row {
@@ -561,7 +561,7 @@ class MoreInfoClimate extends LitElement {
         }
 
         .single-row {
-          padding: 8px 0;
+          padding: var(--ha-space-2) 0;
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-configurator.ts

@@ -87,7 +87,7 @@ export class MoreInfoConfigurator extends LitElement {
       flex-direction: column;
     }
     p {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
     }
 
     a {

src/dialogs/more-info/controls/more-info-counter.ts

@@ -62,7 +62,7 @@ class MoreInfoCounter extends LitElement {
 
   static styles = css`
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;

src/dialogs/more-info/controls/more-info-cover.ts

@@ -194,7 +194,7 @@ class MoreInfoCover extends LitElement {
           align-items: center;
         }
         .main-control > * {
-          margin: 0 8px;
+          margin: 0 var(--ha-space-2);
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-datetime.ts

@@ -72,8 +72,8 @@ class MoreInfoDatetime extends LitElement {
       justify-content: flex-end;
     }
     ha-date-input + ha-time-input {
-      margin-left: 4px;
+      margin-left: var(--ha-space-1);
-      margin-inline-start: 4px;
+      margin-inline-start: var(--ha-space-1);
       margin-inline-end: initial;
     }
   `;

src/dialogs/more-info/controls/more-info-group.ts

@@ -100,7 +100,7 @@ class MoreInfoGroup extends LitElement {
       css`
         state-card-content {
           display: block;
-          margin-top: 8px;
+          margin-top: var(--ha-space-2);
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -217,7 +217,7 @@ class MoreInfoHumidifier extends LitElement {
           align-items: center;
           justify-content: center;
           text-align: center;
-          margin-bottom: 40px;
+          margin-bottom: var(--ha-space-10);
         }
         .current div {
           display: flex;
@@ -237,7 +237,7 @@ class MoreInfoHumidifier extends LitElement {
           font-size: var(--ha-font-size-m);
           line-height: var(--ha-line-height-condensed);
           letter-spacing: 0.4px;
-          margin-bottom: 4px;
+          margin-bottom: var(--ha-space-1);
         }
         .current .value {
           font-size: var(--ha-font-size-xl);

src/dialogs/more-info/controls/more-info-input_datetime.ts

@@ -84,8 +84,8 @@ class MoreInfoInputDatetime extends LitElement {
       justify-content: flex-end;
     }
     ha-date-input + ha-time-input {
-      margin-left: 4px;
+      margin-left: var(--ha-space-1);
-      margin-inline-start: 4px;
+      margin-inline-start: var(--ha-space-1);
       margin-inline-end: initial;
     }
   `;

src/dialogs/more-info/controls/more-info-lock.ts

@@ -192,7 +192,7 @@ class MoreInfoLock extends LitElement {
           margin: 0 auto;
         }
         ha-control-button-group + ha-attributes:not([empty]) {
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
         @keyframes pulse {
           0% {

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -528,11 +528,11 @@ class MoreInfoMediaPlayer extends LitElement {
       display: flex;
       align-items: center;
       gap: var(--ha-space-3);
-      margin-left: 8px;
+      margin-left: var(--ha-space-2);
     }
 
     .volume ha-svg-icon {
-      padding: 4px;
+      padding: var(--ha-space-1);
       height: 16px;
       width: 16px;
     }
@@ -545,17 +545,17 @@ class MoreInfoMediaPlayer extends LitElement {
     .badge {
       position: absolute;
       top: -10px;
-      left: 16px;
+      left: var(--ha-space-4);
       display: flex;
       justify-content: center;
       align-items: center;
       height: 16px;
-      min-width: 8px;
+      min-width: var(--ha-space-2);
       border-radius: var(--ha-border-radius-md);
       font-weight: var(--ha-font-weight-normal);
       font-size: var(--ha-font-size-xs);
       background-color: var(--primary-color);
-      padding: 0 4px;
+      padding: 0 var(--ha-space-1);
       color: var(--text-primary-color);
     }
 
@@ -572,13 +572,13 @@ class MoreInfoMediaPlayer extends LitElement {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      margin: 8px 0 8px 8px;
+      margin: var(--ha-space-2) 0 var(--ha-space-2) var(--ha-space-2);
     }
 
     .media-title {
       font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-bold);
-      margin-bottom: 4px;
+      margin-bottom: var(--ha-space-1);
     }
 
     .media-artist {

src/dialogs/more-info/controls/more-info-person.ts

@@ -72,12 +72,12 @@ class MoreInfoPerson extends LitElement {
       justify-content: space-between;
     }
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       text-align: right;
     }
     ha-map {
-      margin-top: 16px;
+      margin-top: var(--ha-space-4);
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
     }
   `;
 }

src/dialogs/more-info/controls/more-info-script.ts

@@ -227,24 +227,24 @@ class MoreInfoScript extends LitElement {
       visibility: hidden;
       color: var(--secondary-text-color);
       text-align: center;
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
       height: 21px;
     }
     .queue.has-queue {
       visibility: visible;
     }
     .fields {
-      padding: 16px;
+      padding: var(--ha-space-4);
       border: 1px solid var(--divider-color);
       border-radius: var(--ha-border-radius-md);
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
     }
     .fields .title {
       font-weight: var(--ha-font-weight-bold);
     }
     ha-control-button ha-svg-icon {
       z-index: -1;
-      margin-right: 4px;
+      margin-right: var(--ha-space-1);
     }
     ha-service-control {
       --service-control-padding: 0;
@@ -252,7 +252,7 @@ class MoreInfoScript extends LitElement {
     }
     ha-markdown {
       text-align: center;
-      padding: 0 16px;
+      padding: 0 var(--ha-space-4);
     }
   `;
 }

src/dialogs/more-info/controls/more-info-sun.ts

@@ -83,7 +83,7 @@ class MoreInfoSun extends LitElement {
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
   `;
 }

src/dialogs/more-info/controls/more-info-timer.ts

@@ -80,7 +80,7 @@ class MoreInfoTimer extends LitElement {
 
   static styles = css`
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;

src/dialogs/more-info/controls/more-info-update.ts

@@ -448,14 +448,14 @@ class MoreInfoUpdate extends LitElement {
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
     ha-expansion-panel {
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
 
     .summary {
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
     }
 
     .row {
@@ -473,8 +473,10 @@ class MoreInfoUpdate extends LitElement {
       );
       position: sticky;
       bottom: 0;
-      margin: 0 -24px 0 -24px;
+      margin: 0 calc(var(--ha-space-6) * -1) 0 calc(var(--ha-space-6) * -1);
-      margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
+      margin-bottom: calc(
+        -1 * max(var(--safe-area-inset-bottom), var(--ha-space-6))
+      );
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
@@ -486,8 +488,8 @@ class MoreInfoUpdate extends LitElement {
     ha-md-list {
       width: 100%;
       box-sizing: border-box;
-      margin-bottom: -16px;
+      margin-bottom: calc(var(--ha-space-4) * -1);
-      margin-top: -4px;
+      margin-top: calc(var(--ha-space-1) * -1);
       --md-sys-color-surface: var(
         --ha-dialog-surface-background,
         var(--mdc-theme-surface, #fff)
@@ -495,8 +497,8 @@ class MoreInfoUpdate extends LitElement {
     }
 
     ha-md-list-item {
-      --md-list-item-leading-space: 24px;
+      --md-list-item-leading-space: var(--ha-space-6);
-      --md-list-item-trailing-space: 24px;
+      --md-list-item-trailing-space: var(--ha-space-6);
     }
 
     .actions {
@@ -506,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
       flex-wrap: wrap;
       justify-content: flex-end;
       box-sizing: border-box;
-      padding: 16px;
+      padding: var(--ha-space-4);
       z-index: 1;
       gap: var(--ha-space-2);
     }
@@ -520,12 +522,12 @@ class MoreInfoUpdate extends LitElement {
       align-items: center;
     }
     mwc-linear-progress {
-      margin-bottom: -8px;
+      margin-bottom: calc(var(--ha-space-2) * -1);
-      margin-top: 4px;
+      margin-top: var(--ha-space-1);
     }
     ha-markdown {
       direction: ltr;
-      padding-bottom: 16px;
+      padding-bottom: var(--ha-space-4);
       box-sizing: border-box;
     }
     ha-markdown.hidden {
@@ -534,7 +536,7 @@ class MoreInfoUpdate extends LitElement {
     .loader {
       height: 80px;
       box-sizing: border-box;
-      padding-bottom: 16px;
+      padding-bottom: var(--ha-space-4);
     }
   `;
 }

src/dialogs/more-info/controls/more-info-valve.ts

@@ -173,7 +173,7 @@ class MoreInfoValve extends LitElement {
           align-items: center;
         }
         .main-control > * {
-          margin: 0 8px;
+          margin: 0 var(--ha-space-2);
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-water_heater.ts

@@ -214,7 +214,7 @@ class MoreInfoWaterHeater extends LitElement {
           align-items: center;
           justify-content: center;
           text-align: center;
-          margin-bottom: 40px;
+          margin-bottom: var(--ha-space-10);
         }
 
         .current div {
@@ -237,7 +237,7 @@ class MoreInfoWaterHeater extends LitElement {
           font-size: var(--ha-font-size-m);
           line-height: var(--ha-line-height-condensed);
           letter-spacing: 0.4px;
-          margin-bottom: 4px;
+          margin-bottom: var(--ha-space-1);
         }
 
         .current .value {

src/dialogs/more-info/controls/more-info-weather.ts

@@ -440,13 +440,13 @@ class MoreInfoWeather extends LitElement {
       css`
         ha-svg-icon {
           color: var(--state-icon-color);
-          margin-left: 8px;
+          margin-left: var(--ha-space-2);
-          margin-inline-start: 8px;
+          margin-inline-start: var(--ha-space-2);
           margin-inline-end: initial;
         }
 
         .section {
-          margin: 16px 0 8px 0;
+          margin: var(--ha-space-4) 0 var(--ha-space-2) 0;
           font-size: 1.2em;
         }
 
@@ -470,14 +470,14 @@ class MoreInfoWeather extends LitElement {
 
         .main {
           flex: 1;
-          margin-left: 24px;
+          margin-left: var(--ha-space-6);
-          margin-inline-start: 24px;
+          margin-inline-start: var(--ha-space-6);
           margin-inline-end: initial;
         }
 
         .attribution {
           text-align: center;
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
 
         .time-ago,
@@ -500,15 +500,15 @@ class MoreInfoWeather extends LitElement {
           flex-wrap: nowrap;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
 
         .icon-image {
           display: flex;
           align-items: center;
           min-width: 64px;
-          margin-right: 16px;
+          margin-right: var(--ha-space-4);
-          margin-inline-end: 16px;
+          margin-inline-end: var(--ha-space-4);
           margin-inline-start: initial;
         }
 
@@ -534,7 +534,7 @@ class MoreInfoWeather extends LitElement {
 
         .temp-attribute .temp {
           position: relative;
-          margin-right: 24px;
+          margin-right: var(--ha-space-6);
           direction: ltr;
         }
 
@@ -557,8 +557,8 @@ class MoreInfoWeather extends LitElement {
 
         .name-state {
           overflow: hidden;
-          padding-right: 12px;
+          padding-right: var(--ha-space-3);
-          padding-inline-end: 12px;
+          padding-inline-end: var(--ha-space-3);
           padding-inline-start: initial;
           width: 100%;
         }
@@ -572,7 +572,7 @@ class MoreInfoWeather extends LitElement {
         .forecast {
           display: flex;
           justify-content: space-around;
-          padding: 16px;
+          padding: var(--ha-space-4);
           padding-bottom: 0px;
           overflow-x: auto;
           scrollbar-color: var(--scrollbar-thumb-color) transparent;
@@ -634,8 +634,8 @@ class MoreInfoWeather extends LitElement {
         }
 
         .forecast-image-icon {
-          padding-top: 4px;
+          padding-top: var(--ha-space-1);
-          padding-bottom: 4px;
+          padding-bottom: var(--ha-space-1);
           display: flex;
           justify-content: center;
         }

src/dialogs/more-info/ha-more-info-history-and-logbook.ts

@@ -58,7 +58,7 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
       display: block;
     }
     ha-more-info-history + ha-more-info-logbook {
-      margin-top: 16px;
+      margin-top: var(--ha-space-4);
     }
   `;
 }

src/dialogs/more-info/ha-more-info-history.ts

@@ -264,7 +264,7 @@ export class MoreInfoHistory extends LitElement {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 8px;
+        margin-bottom: var(--ha-space-2);
       }
       .header > a,
       a:visited {

src/dialogs/more-info/ha-more-info-info.ts

@@ -130,8 +130,8 @@ export class MoreInfoInfo extends LitElement {
       display: flex;
       flex-direction: column;
       flex: 1;
-      padding: 24px;
+      padding: var(--ha-space-6);
-      padding-bottom: max(var(--safe-area-inset-bottom), 24px);
+      padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-6));
     }
 
     [data-domain="camera"] .content {
@@ -153,7 +153,7 @@ export class MoreInfoInfo extends LitElement {
     ha-more-info-history,
     ha-more-info-logbook:not(:last-child) {
       display: block;
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
     }
 
     ha-alert {

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -82,7 +82,7 @@ export class MoreInfoLogbook extends LitElement {
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 8px;
+          margin-bottom: var(--ha-space-2);
         }
         .header > a,
         a:visited {

src/dialogs/more-info/ha-more-info-settings.ts

@@ -83,7 +83,8 @@ export class HaMoreInfoSettings extends LitElement {
     return [
       css`
         .content {
-          padding: 8px 24px 24px 24px;
+          padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
+            var(--ha-space-6);
         }
       `,
     ];

src/dialogs/more-info/more-info-content.ts

@@ -119,7 +119,7 @@ class MoreInfoContent extends LitElement {
     hui-section {
       width: 100%;
       display: block;
-      margin-top: 16px;
+      margin-top: var(--ha-space-4);
     }
   `;
 }