Add space tokens to developer tools (#28626)

2025-12-19 18:28:42 +00:00 · 2025-12-19 09:33:53 +00:00
parent c0a49b3d0b
commit eaa1fb4107
12 changed files with 58 additions and 58 deletions
--- 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);
        }
      `,
    ];
--- 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);
        }
      `,
    ];
--- 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;
--- 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);
        }

--- 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);
    }
  `;
 }
--- 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);
--- 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;
        }

--- 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);
        }
--- 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;
        }

--- 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;
--- 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;
--- 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);
        }
      `,
    ];