From eaa1fb4107b05a61494ce36085a41c079761b08a Mon Sep 17 00:00:00 2001
From: Aidan Timson <aidan@timmo.dev>
Date: Fri, 19 Dec 2025 09:33:53 +0000
Subject: [PATCH] Add space tokens to developer tools (#28626)

---
 .../action/developer-tools-action.ts          | 12 +++++------
 .../assist/developer-tools-assist.ts          | 14 ++++++-------
 .../debug/developer-tools-debug.ts            |  6 +++---
 .../event/developer-tools-event.ts            |  6 +++---
 .../event/event-subscribe-card.ts             | 12 +++++------
 .../ha-panel-developer-tools.ts               |  4 ++--
 .../state/developer-tools-state-renderer.ts   |  8 ++++----
 .../state/developer-tools-state.ts            | 20 +++++++++----------
 .../statistics/developer-tools-statistics.ts  | 10 +++++-----
 .../dialog-statistics-adjust-sum.ts           |  4 ++--
 .../template/developer-tools-template.ts      | 14 ++++++-------
 .../developer-yaml-config.ts                  |  6 +++---
 12 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/panels/developer-tools/action/developer-tools-action.ts b/src/panels/developer-tools/action/developer-tools-action.ts
index c57ac6d138..c2ca28cb89 100644
--- a/src/panels/developer-tools/action/developer-tools-action.ts
+++ b/src/panels/developer-tools/action/developer-tools-action.ts
@@ -673,12 +673,12 @@ class HaPanelDevAction extends LitElement {
       haStyle,
       css`
         .content {
-          padding: 16px;
+          padding: var(--ha-space-4);
           max-width: 1200px;
           margin: auto;
         }
         .button-row {
-          padding: 8px 16px;
+          padding: var(--ha-space-2) var(--ha-space-4);
           border-top: 1px solid var(--divider-color);
           border-bottom: 1px solid var(--divider-color);
           background: var(--card-background-color);
@@ -698,8 +698,8 @@ class HaPanelDevAction extends LitElement {
           align-items: center;
         }
         .switch-mode-container .error {
-          margin-left: 8px;
-          margin-inline-start: 8px;
+          margin-left: var(--ha-space-2);
+          margin-inline-start: var(--ha-space-2);
           margin-inline-end: initial;
         }
         .attributes {
@@ -732,7 +732,7 @@ class HaPanelDevAction extends LitElement {
         }
 
         .attributes td {
-          padding: 4px;
+          padding: var(--ha-space-1);
           vertical-align: middle;
         }
 
@@ -748,7 +748,7 @@ class HaPanelDevAction extends LitElement {
         .response img {
           max-width: 100%;
           height: auto;
-          margin-top: 24px;
+          margin-top: var(--ha-space-6);
         }
       `,
     ];
diff --git a/src/panels/developer-tools/assist/developer-tools-assist.ts b/src/panels/developer-tools/assist/developer-tools-assist.ts
index feefbaf5f0..1041f66c23 100644
--- a/src/panels/developer-tools/assist/developer-tools-assist.ts
+++ b/src/panels/developer-tools/assist/developer-tools-assist.ts
@@ -240,13 +240,13 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
       haStyle,
       css`
         .content {
-          padding: 28px 20px 16px;
+          padding: var(--ha-space-7) var(--ha-space-5) var(--ha-space-4);
           max-width: 1040px;
           margin: 0 auto;
         }
         .description {
           margin: 0;
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
         ha-textarea {
           width: 100%;
@@ -255,18 +255,18 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
           text-align: right;
         }
         .form {
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
         .result-toolbar {
           text-align: center;
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
         .result {
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
         .sentence {
           font-weight: var(--ha-font-weight-medium);
-          margin-bottom: 8px;
+          margin-bottom: var(--ha-space-2);
           display: flex;
           flex-direction: row;
           justify-content: space-between;
@@ -280,7 +280,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
         ha-code-editor,
         ha-alert {
           display: block;
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
       `,
     ];
diff --git a/src/panels/developer-tools/debug/developer-tools-debug.ts b/src/panels/developer-tools/debug/developer-tools-debug.ts
index c78aa567cf..350f69c12e 100644
--- a/src/panels/developer-tools/debug/developer-tools-debug.ts
+++ b/src/panels/developer-tools/debug/developer-tools-debug.ts
@@ -107,13 +107,13 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {
     haStyle,
     css`
       ha-card {
-        margin-bottom: 16px;
+        margin-bottom: var(--ha-space-4);
       }
       .card-content {
-        padding: 8px;
+        padding: var(--ha-space-2);
       }
       .content {
-        padding: 28px 20px 16px;
+        padding: var(--ha-space-7) var(--ha-space-5) var(--ha-space-4);
         display: block;
         max-width: 600px;
         margin: 0 auto;
diff --git a/src/panels/developer-tools/event/developer-tools-event.ts b/src/panels/developer-tools/event/developer-tools-event.ts
index 4f5dedb376..6faacf4e64 100644
--- a/src/panels/developer-tools/event/developer-tools-event.ts
+++ b/src/panels/developer-tools/event/developer-tools-event.ts
@@ -148,7 +148,7 @@ class HaPanelDevEvent extends LitElement {
       css`
         .content {
           gap: var(--ha-space-4);
-          padding: 16px;
+          padding: var(--ha-space-4);
           max-width: 1200px;
           margin: auto;
         }
@@ -169,7 +169,7 @@ class HaPanelDevEvent extends LitElement {
         }
 
         ha-button {
-          margin-top: 8px;
+          margin-top: var(--ha-space-2);
         }
 
         ha-textfield {
@@ -178,7 +178,7 @@ class HaPanelDevEvent extends LitElement {
 
         event-subscribe-card {
           display: block;
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
           direction: var(--direction);
         }
 
diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts
index 7f9832a545..d40af18cc2 100644
--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/developer-tools/event/event-subscribe-card.ts
@@ -160,16 +160,16 @@ class EventSubscribeCard extends LitElement {
   static styles = css`
     ha-textfield {
       display: block;
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
     }
     .error-message {
-      margin-top: 8px;
+      margin-top: var(--ha-space-2);
     }
     .event {
       border-top: 1px solid var(--divider-color);
-      padding-top: 8px;
-      padding-bottom: 8px;
-      margin: 16px 0;
+      padding-top: var(--ha-space-2);
+      padding-bottom: var(--ha-space-2);
+      margin: var(--ha-space-4) 0;
     }
     .event:last-child {
       border-bottom: 0;
@@ -179,7 +179,7 @@ class EventSubscribeCard extends LitElement {
       font-family: var(--ha-font-family-code);
     }
     ha-card {
-      margin-bottom: 5px;
+      margin-bottom: var(--ha-space-1);
     }
   `;
 }
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 88261b9231..e7259784c5 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -176,12 +176,12 @@ class PanelDeveloperTools extends LitElement {
           display: flex;
           align-items: center;
           font-size: var(--ha-font-size-xl);
-          padding: 8px 12px;
+          padding: var(--ha-space-2) var(--ha-space-3);
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
         }
         :host([narrow]) .toolbar {
-          padding: 4px;
+          padding: var(--ha-space-1);
         }
         .main-title {
           margin: var(--margin-title);
diff --git a/src/panels/developer-tools/state/developer-tools-state-renderer.ts b/src/panels/developer-tools/state/developer-tools-state-renderer.ts
index 3b78c87557..a4da8077c6 100644
--- a/src/panels/developer-tools/state/developer-tools-state-renderer.ts
+++ b/src/panels/developer-tools/state/developer-tools-state-renderer.ts
@@ -298,7 +298,7 @@ class HaPanelDevStateRenderer extends LitElement {
         }
 
         .cell .padded {
-          padding: 4px;
+          padding: var(--ha-space-1);
         }
 
         .entities .row .header:nth-child(1),
@@ -328,11 +328,11 @@ class HaPanelDevStateRenderer extends LitElement {
 
         .entities ha-svg-icon {
           --mdc-icon-size: 20px;
-          padding: 4px;
+          padding: var(--ha-space-1);
           cursor: pointer;
           flex-shrink: 0;
-          margin-right: 8px;
-          margin-inline-end: 8px;
+          margin-right: var(--ha-space-2);
+          margin-inline-end: var(--ha-space-2);
           margin-inline-start: initial;
         }
 
diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts
index 6dc8cf4316..718c26c3c4 100644
--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@@ -507,7 +507,7 @@ class HaPanelDevState extends LitElement {
           -webkit-user-select: initial;
           -moz-user-select: initial;
           display: block;
-          padding: 16px;
+          padding: var(--ha-space-4);
         }
 
         :host search-input {
@@ -525,7 +525,7 @@ class HaPanelDevState extends LitElement {
         }
 
         .heading ha-formfield {
-          margin-right: 8px;
+          margin-right: var(--ha-space-2);
           --mdc-typography-body2-font-size: var(--ha-font-size-m);
           --mdc-typography-body2-font-weight: var(--ha-font-weight-medium);
         }
@@ -534,9 +534,9 @@ class HaPanelDevState extends LitElement {
           display: block;
           font-family: var(--ha-font-family-code);
           color: var(--secondary-text-color);
-          padding: 0 8px;
-          margin-bottom: 8px;
-          margin-top: 4px;
+          padding: 0 var(--ha-space-2);
+          margin-bottom: var(--ha-space-2);
+          margin-top: var(--ha-space-1);
           font-size: var(--ha-font-size-s);
           --mdc-icon-size: 14px;
           --mdc-icon-button-size: 24px;
@@ -557,15 +557,15 @@ class HaPanelDevState extends LitElement {
         }
 
         .state-input {
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
 
         ha-expansion-panel {
-          margin: 0 8px 16px;
+          margin: 0 var(--ha-space-2) var(--ha-space-4);
         }
 
         ha-expansion-panel p {
-          padding: 0 8px;
+          padding: 0 var(--ha-space-2);
         }
 
         .inputs {
@@ -574,12 +574,12 @@ class HaPanelDevState extends LitElement {
         }
 
         .info {
-          padding: 0 16px;
+          padding: 0 var(--ha-space-4);
         }
 
         .button-row {
           display: flex;
-          margin: 8px 0;
+          margin: var(--ha-space-2) 0;
           align-items: center;
           gap: var(--ha-space-2);
         }
diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
index 6ff053c8a5..12c17558e9 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -732,7 +732,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
           height: 56px;
           width: 100%;
           justify-content: space-between;
-          padding: 0 16px;
+          padding: 0 var(--ha-space-4);
           gap: var(--ha-space-4);
           box-sizing: border-box;
           background: var(--primary-background-color);
@@ -751,7 +751,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
           display: flex;
           align-items: center;
           gap: var(--ha-space-4);
-          padding: 0 16px;
+          padding: 0 var(--ha-space-4);
           overflow-x: scroll;
           -ms-overflow-style: none;
           scrollbar-width: none;
@@ -763,7 +763,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          padding: 8px 12px;
+          padding: var(--ha-space-2) var(--ha-space-3);
           box-sizing: border-box;
           font-size: var(--ha-font-size-m);
           --ha-assist-chip-container-color: var(--card-background-color);
@@ -776,8 +776,8 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         }
 
         .selection-controls p {
-          margin-left: 8px;
-          margin-inline-start: 8px;
+          margin-left: var(--ha-space-2);
+          margin-inline-start: var(--ha-space-2);
           margin-inline-end: initial;
         }
 
diff --git a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
index 7181af62f2..85470ea22a 100644
--- a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
+++ b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
@@ -513,7 +513,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
         .text-content,
         ha-selector-datetime,
         ha-selector-number {
-          margin-bottom: 20px;
+          margin-bottom: var(--ha-space-5);
         }
         ha-list-item {
           margin: 0 -24px;
@@ -522,7 +522,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
         .table-row {
           display: flex;
           justify-content: space-between;
-          margin-bottom: 20px;
+          margin-bottom: var(--ha-space-5);
         }
         .stat-list {
           min-height: 360px;
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 4bb449b3dd..879e63e53b 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -275,7 +275,7 @@ ${type === "object"
 
         .content {
           gap: var(--ha-space-4);
-          padding: 16px;
+          padding: var(--ha-space-4);
         }
 
         .content.horizontal {
@@ -289,7 +289,7 @@ ${type === "object"
         }
 
         ha-card {
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
 
         .edit-pane {
@@ -307,14 +307,14 @@ ${type === "object"
 
         .render-spinner {
           position: absolute;
-          top: 8px;
-          right: 8px;
-          inset-inline-end: 8px;
+          top: var(--ha-space-2);
+          right: var(--ha-space-2);
+          inset-inline-end: var(--ha-space-2);
           inset-inline-start: initial;
         }
 
         ha-alert {
-          margin-bottom: 8px;
+          margin-bottom: var(--ha-space-2);
           display: block;
         }
 
@@ -325,7 +325,7 @@ ${type === "object"
           clear: both;
           white-space: pre-wrap;
           background-color: var(--secondary-background-color);
-          padding: 8px;
+          padding: var(--ha-space-2);
           margin-top: 0;
           margin-bottom: 0;
           direction: ltr;
diff --git a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
index 3904c0f09c..9787602b08 100644
--- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
+++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
@@ -251,19 +251,19 @@ export class DeveloperYamlConfig extends LitElement {
         }
 
         .content {
-          padding: 28px 20px 16px;
+          padding: var(--ha-space-7) var(--ha-space-5) var(--ha-space-4);
           max-width: 1040px;
           margin: 0 auto;
         }
 
         ha-card {
-          margin-top: 24px;
+          margin-top: var(--ha-space-6);
         }
 
         .card-actions {
           display: flex;
           justify-content: space-between;
-          padding: 4px;
+          padding: var(--ha-space-1);
         }
       `,
     ];