Implement core spacing tokens (#27226)

2025-11-05 17:09:48 +00:00 · 2025-09-29 07:28:24 +02:00
parent e1edf7fb98
commit c0a9dadcbe
101 changed files with 164 additions and 141 deletions
--- a/gallery/src/pages/components/ha-badge.ts
+++ b/gallery/src/pages/components/ha-badge.ts
@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
    }
    .card-content {
      display: flex;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
--- a/gallery/src/pages/components/ha-button.ts
+++ b/gallery/src/pages/components/ha-button.ts
@@ -155,11 +155,11 @@ export class DemoHaButton extends LitElement {
    .card-content {
      display: flex;
      flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
    .card-content div {
      display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
  `;
 }
--- a/gallery/src/pages/components/ha-progress-button.ts
+++ b/gallery/src/pages/components/ha-progress-button.ts
@@ -123,11 +123,11 @@ export class DemoHaProgressButton extends LitElement {
    .card-content {
      display: flex;
      flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
    .card-content div {
      display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
  `;
 }
--- a/gallery/src/pages/components/ha-slider.ts
+++ b/gallery/src/pages/components/ha-slider.ts
@@ -88,7 +88,7 @@ export class DemoHaSlider extends LitElement {
      display: flex;
      flex-direction: column;
      align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
--- a/gallery/src/pages/components/ha-spinner.ts
+++ b/gallery/src/pages/components/ha-spinner.ts
@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
      display: flex;
      flex-direction: column;
      align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
--- a/hassio/src/dialogs/system-managed/dialog-system-managed.ts
+++ b/hassio/src/dialogs/system-managed/dialog-system-managed.ts
@@ -159,7 +159,7 @@ class HassioSystemManagedDialog extends LitElement {
          display: flex;
          justify-content: center;
          align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
          --mdc-icon-size: 48px;
          margin-bottom: 32px;
        }
--- a/hassio/src/resources/hassio-style.ts
+++ b/hassio/src/resources/hassio-style.ts
@@ -31,7 +31,7 @@ export const hassioStyle = css`
  .card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: 8px;
+    grid-gap: var(--ha-space-2);
  }
  @media screen and (min-width: 640px) {
    .card-group {
--- a/landing-page/src/ha-landing-page.ts
+++ b/landing-page/src/ha-landing-page.ts
@@ -213,7 +213,7 @@ class HaLandingPage extends LandingPageBaseElement {
      ha-card .card-content {
        display: flex;
        flex-direction: column;
-        gap: 16px;
+        gap: var(--ha-space-4);
      }
      ha-alert p {
        text-align: unset;
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -974,7 +974,7 @@ export class HaChartBase extends LitElement {
      right: 4px;
      display: flex;
      flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
    }
    .chart-controls.small {
      top: 0;
@@ -1011,7 +1011,7 @@ export class HaChartBase extends LitElement {
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
    .chart-legend li {
      height: 24px;
--- a/src/components/ha-badge.ts
+++ b/src/components/ha-badge.ts
@@ -54,7 +54,7 @@ export class HaBadge extends LitElement {
      flex-direction: row;
      align-items: center;
      justify-content: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
      height: var(--ha-badge-size, 36px);
      min-width: var(--ha-badge-size, 36px);
      padding: 0px 12px;
--- a/src/components/ha-copy-textfield.ts
+++ b/src/components/ha-copy-textfield.ts
@@ -76,7 +76,7 @@ export class HaCopyTextfield extends LitElement {
    .container {
      display: flex;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
      margin-top: 8px;
    }

--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -343,7 +343,7 @@ export class HaDateRangePicker extends LitElement {
    .date-range-inputs {
      display: flex;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }

    .date-range-ranges {
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -77,8 +77,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
        var(--form-grid-column-count, auto-fit),
        minmax(var(--form-grid-min-width, 200px), 1fr)
      );
-      grid-column-gap: 8px;
-      grid-row-gap: 24px;
+      grid-column-gap: var(--ha-space-2);
+      grid-row-gap: var(--ha-space-6);
    }
    :host > ha-form {
      display: block;
--- a/src/components/ha-form/ha-form-optional_actions.ts
+++ b/src/components/ha-form/ha-form-optional_actions.ts
@@ -156,7 +156,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
    :host {
      display: flex !important;
      flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
    :host ha-form {
      display: block;
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -57,7 +57,7 @@ export class HaFormfield extends FormfieldBase {
      }
      .mdc-form-field {
        align-items: var(--ha-formfield-align-items, center);
-        gap: 4px;
+        gap: var(--ha-space-1);
      }
      .mdc-form-field > label {
        direction: var(--direction);
--- a/src/components/ha-grid-size-picker.ts
+++ b/src/components/ha-grid-size-picker.ts
@@ -227,7 +227,7 @@ export class HaGridSizeEditor extends LitElement {
          "row-slider preview";
        grid-template-rows: auto auto;
        grid-template-columns: auto 1fr;
-        gap: 8px;
+        gap: var(--ha-space-2);
      }
      #columns {
        grid-area: column-slider;
--- a/src/components/ha-icon-button-toolbar.ts
+++ b/src/components/ha-icon-button-toolbar.ts
@@ -104,7 +104,7 @@ export class HaIconButtonToolbar extends LitElement {
      background-color: transparent;
      padding-right: 4px;
      height: var(--icon-button-toolbar-height);
-      gap: 8px;
+      gap: var(--ha-space-2);
    }

    .icon-toolbar-button {
--- a/src/components/ha-picker-field.ts
+++ b/src/components/ha-picker-field.ts
@@ -105,7 +105,7 @@ export class HaPickerField extends LitElement {
          --md-list-item-bottom-space: 0px;
          --md-list-item-leading-space: 8px;
          --md-list-item-trailing-space: 8px;
-          --ha-md-list-item-gap: 8px;
+          --ha-md-list-item-gap: var(--ha-space-2);
          /* Remove the default focus ring */
          --md-focus-ring-width: 0px;
          --md-focus-ring-duration: 0s;
--- a/src/components/ha-segmented-bar.ts
+++ b/src/components/ha-segmented-bar.ts
@@ -90,7 +90,7 @@ class HaSegmentedBar extends LitElement {
    .heading {
      display: flex;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
    .heading .title {
      flex: 1;
@@ -125,7 +125,7 @@ class HaSegmentedBar extends LitElement {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
-      gap: 12px;
+      gap: var(--ha-space-3);
      margin: 12px 0;
      padding: 0;
      list-style: none;
@@ -133,7 +133,7 @@ class HaSegmentedBar extends LitElement {
    .legend li {
      display: flex;
      align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
      font-size: var(--ha-font-size-s);
    }
    .legend li .bullet {
--- a/src/components/ha-select-box.ts
+++ b/src/components/ha-select-box.ts
@@ -116,7 +116,7 @@ export class HaSelectBox extends LitElement {
    .list {
      display: grid;
      grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
-      gap: 12px;
+      gap: var(--ha-space-3);
    }
    .option {
      position: relative;
@@ -128,7 +128,7 @@ export class HaSelectBox extends LitElement {
      align-items: center;
      justify-content: space-between;
      padding: 12px;
-      gap: 8px;
+      gap: var(--ha-space-2);
      overflow: hidden;
      cursor: pointer;
    }
@@ -137,7 +137,7 @@ export class HaSelectBox extends LitElement {
      position: relative;
      display: flex;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
      min-width: 0;
      width: 100%;
    }
@@ -148,7 +148,7 @@ export class HaSelectBox extends LitElement {
    .option .content .text {
      display: flex;
      flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
      min-width: 0;
      flex: 1;
    }
--- a/src/components/ha-selector/ha-selector-button-toggle.ts
+++ b/src/components/ha-selector/ha-selector-button-toggle.ts
@@ -89,7 +89,7 @@ export class HaButtonToggleSelector extends LitElement {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
-      gap: 8px;
+      gap: var(--ha-space-2);
      align-items: center;
    }
    @media all and (max-width: 600px) {
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -321,7 +321,7 @@ export class HaMediaSelector extends LitElement {
      display: flex;
      align-items: center;
      padding: 8px;
-      gap: 12px;
+      gap: var(--ha-space-3);
    }
    ha-card .thumbnail {
      width: 40px;
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -297,7 +297,7 @@ export class HaObjectSelector extends LitElement {
    return [
      css`
        ha-md-list {
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        ha-md-list-item {
          border: 1px solid var(--divider-color);
--- a/src/components/media-player/dialog-join-media-players.ts
+++ b/src/components/media-player/dialog-join-media-players.ts
@@ -217,7 +217,7 @@ class DialogJoinMediaPlayers extends LitElement {
        .content {
          display: flex;
          flex-direction: column;
-          row-gap: 16px;
+          row-gap: var(--ha-space-4);
        }

        ha-dialog-header ha-button {
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -1138,7 +1138,7 @@ export class HaMediaPlayerBrowse extends LitElement {
            auto-fit,
            minmax(var(--media-browse-item-size, 175px), 0.1fr)
          );
-          grid-gap: 16px;
+          grid-gap: var(--ha-space-4);
          padding: 16px;
        }

--- a/src/components/media-player/ha-media-player-toggle.ts
+++ b/src/components/media-player/ha-media-player-toggle.ts
@@ -54,7 +54,7 @@ class HaMediaPlayerToggle extends LitElement {
        .list-item {
          display: grid;
          grid-template-columns: auto 1fr auto;
-          column-gap: 16px;
+          column-gap: var(--ha-space-4);
          align-items: center;
          width: 100%;
        }
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -325,7 +325,7 @@ class StepFlowCreateEntry extends LitElement {
        .device-info {
          display: flex;
          align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        .device-info img {
          width: 40px;
--- a/src/dialogs/enter-code/dialog-enter-code.ts
+++ b/src/dialogs/enter-code/dialog-enter-code.ts
@@ -209,7 +209,7 @@ export class DialogEnterCode
      display: grid;
      grid-template-columns: repeat(var(--keypad-columns), auto);
      grid-auto-rows: auto;
-      grid-gap: 24px;
+      grid-gap: var(--ha-space-6);
      justify-items: center;
      align-items: center;
    }
--- a/src/dialogs/more-info/components/ha-more-info-control-select-container.ts
+++ b/src/dialogs/more-info/components/ha-more-info-control-select-container.ts
@@ -32,7 +32,7 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
-      gap: 12px;
+      gap: var(--ha-space-3);
      margin: auto;
      overflow: auto;
      -ms-overflow-style: none; /* IE and Edge */
--- a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
+++ b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
@@ -202,13 +202,13 @@ class MoreInfoSirenAdvancedControls extends LitElement {
        .options {
          display: flex;
          flex-direction: column;
-          gap: 16px;
+          gap: var(--ha-space-4);
        }
        .controls {
          display: flex;
          flex-direction: row;
          justify-content: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
          margin-top: 16px;
        }
        ha-control-button {
--- a/src/dialogs/more-info/controls/more-info-camera.ts
+++ b/src/dialogs/more-info/controls/more-info-camera.ts
@@ -107,7 +107,7 @@ class MoreInfoCamera extends LitElement {
      box-sizing: border-box;
      padding: 16px;
      z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
  `;
 }
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@@ -181,7 +181,7 @@ class MoreInfoLock extends LitElement {
          display: flex;
          align-items: center;
          flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
          font-weight: var(--ha-font-weight-medium);
          color: var(--success-color);
        }
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -442,7 +442,7 @@ class MoreInfoMediaPlayer extends LitElement {
    :host {
      display: flex;
      flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
      margin-top: 0;
    }

@@ -510,7 +510,7 @@ class MoreInfoMediaPlayer extends LitElement {
    .volume {
      display: flex;
      align-items: center;
-      gap: 12px;
+      gap: var(--ha-space-3);
      margin-left: 8px;
    }

@@ -591,7 +591,7 @@ class MoreInfoMediaPlayer extends LitElement {
    .bottom-controls {
      display: flex;
      flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
      align-self: center;
      width: 320px;
    }
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -508,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
      box-sizing: border-box;
      padding: 16px;
      z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }

    a {
--- a/src/dialogs/shortcuts/dialog-shortcuts.ts
+++ b/src/dialogs/shortcuts/dialog-shortcuts.ts
@@ -269,7 +269,7 @@ class DialogShortcuts extends LitElement {
        display: flex;
        flex-direction: row;
        align-items: center;
-        gap: 8px;
+        gap: var(--ha-space-2);
        margin: 4px 0;
      }

--- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
+++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
@@ -127,7 +127,7 @@ export class CloudStepIntro extends LitElement {
      .features {
        display: flex;
        flex-direction: column;
-        grid-gap: 16px;
+        grid-gap: var(--ha-space-4);
        padding: 16px;
      }
      .feature {
--- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts
+++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts
@@ -427,7 +427,7 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
        width: 100%;
        height: 10px;
        display: flex;
-        gap: 4px;
+        gap: var(--ha-space-1);
        margin: 8px 0;
      }
      .segment {
--- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
+++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
@@ -368,7 +368,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
        margin-top: 24px;
      }
      .rows {
-        gap: 16px;
+        gap: var(--ha-space-4);
        display: flex;
        flex-direction: column;
      }
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -182,7 +182,7 @@ class HassSubpage extends LitElement {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        :host([narrow]) #fab.tabs {
          bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -740,7 +740,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      width: 100%;
      justify-content: space-between;
      padding: 0 16px;
-      gap: 16px;
+      gap: var(--ha-space-4);
      box-sizing: border-box;
      background: var(--primary-background-color);
      border-bottom: 1px solid var(--divider-color);
@@ -823,7 +823,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      display: flex;
      align-items: center;
      min-width: 100%;
-      gap: 16px;
+      gap: var(--ha-space-4);
      padding: 0 16px;
      box-sizing: border-box;
      overflow-x: scroll;
@@ -852,7 +852,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    .selection-controls {
      display: flex;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }

    .selection-controls p {
@@ -864,7 +864,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    .center-vertical {
      display: flex;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }

    .relative {
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -362,7 +362,7 @@ class HassTabsSubpage extends LitElement {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        :host([narrow]) #fab.tabs {
          bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
--- a/src/onboarding/onboarding-integrations.ts
+++ b/src/onboarding/onboarding-integrations.ts
@@ -212,7 +212,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
          margin-top: 24px;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
-          row-gap: 24px;
+          row-gap: var(--ha-space-6);
        }
        .more {
          display: flex;
--- a/src/onboarding/onboarding-welcome-links.ts
+++ b/src/onboarding/onboarding-welcome-links.ts
@@ -64,8 +64,8 @@ class OnboardingWelcomeLinks extends LitElement {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      margin-top: 16px;
-      column-gap: 16px;
-      row-gap: 16px;
+      column-gap: var(--ha-space-4);
+      row-gap: var(--ha-space-4);
    }
    @media (max-width: 550px) {
      :host {
--- a/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
@@ -123,7 +123,7 @@ class OnboardingRestoreBackupCloudLogin extends LitElement {
          font-size: var(--ha-font-size-2xl);
          display: flex;
          align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
        }
        h2 img {
          width: 48px;
--- a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
@@ -332,7 +332,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
          display: flex;
          align-items: center;
          flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
          line-height: var(--ha-line-height-condensed);
        }
        h2 {
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@@ -736,7 +736,7 @@ class DialogAddAutomationElement
        }
        .shortcut-label {
          display: flex;
-          gap: 12px;
+          gap: var(--ha-space-3);
          justify-content: space-between;
        }
        .shortcut-label .supporting-text {
--- a/src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
+++ b/src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
@@ -92,7 +92,7 @@ class DialogPasteReplace extends LitElement implements HassDialog {
        }
        div[slot="primaryAction"] {
          display: flex;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
      `,
    ];
--- a/src/panels/config/automation/styles.ts
+++ b/src/panels/config/automation/styles.ts
@@ -118,7 +118,7 @@ export const manualEditorStyles = css`
      var(--ha-automation-editor-max-width) -
        ${CONTENT_MIN_WIDTH}px - var(--mdc-drawer-width, 0px)
    );
-    --sidebar-gap: 16px;
+    --sidebar-gap: var(--ha-space-4);
  }

  .fab-positioner {
@@ -188,7 +188,7 @@ export const automationRowsStyles = css`
  .rows {
    display: flex;
    flex-direction: column;
-    gap: 16px;
+    gap: var(--ha-space-4);
  }
  .rows.no-sidebar {
    margin-inline-end: 0;
@@ -225,7 +225,7 @@ export const automationRowsStyles = css`
  .buttons {
    display: flex;
    flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--ha-space-2);
    order: 1;
  }
 `;
@@ -244,7 +244,7 @@ export const overflowStyles = css`
  .overflow-label {
    display: flex;
    justify-content: space-between;
-    gap: 12px;
+    gap: var(--ha-space-3);
    white-space: nowrap;
  }
  .overflow-label .shortcut {
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -806,7 +806,7 @@ export default class HaAutomationTriggerRow extends LitElement {
          display: flex;
          justify-content: center;
          align-items: center;
-          gap: 4px;
+          gap: var(--ha-space-1);
          line-height: 1;
          padding: 0;
        }
--- a/src/panels/config/backup/components/config/ha-backup-config-agents.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
@@ -313,13 +313,13 @@ class HaBackupConfigAgents extends LitElement {
      display: flex;
      align-items: center;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
      line-height: var(--ha-line-height-condensed);
    }
    .unencrypted-warning {
      display: flex;
      align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
    }
    .dot {
      display: block;
@@ -341,7 +341,7 @@ class HaBackupConfigAgents extends LitElement {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
-        gap: 4px;
+        gap: var(--ha-space-1);
      }
    }
  `;
--- a/src/panels/config/backup/components/ha-backup-agents-picker.ts
+++ b/src/panels/config/backup/components/ha-backup-agents-picker.ts
@@ -119,7 +119,7 @@ class HaBackupAgentsPicker extends LitElement {
      display: flex;
      flex-direction: row;
      align-items: center;
-      gap: 16px;
+      gap: var(--ha-space-4);
      font-size: var(--ha-font-size-l);
      font-weight: var(--ha-font-weight-normal);
      line-height: var(--ha-line-height-normal);
--- a/src/panels/config/backup/components/ha-backup-details-restore.ts
+++ b/src/panels/config/backup/components/ha-backup-details-restore.ts
@@ -110,7 +110,7 @@ class HaBackupDetailsRestore extends LitElement {
      max-width: 690px;
      width: 100%;
      margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
      display: grid;
    }
    .card-content {
@@ -133,7 +133,7 @@ class HaBackupDetailsRestore extends LitElement {
      display: flex;
      align-items: center;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
      line-height: var(--ha-line-height-condensed);
    }
  `;
--- a/src/panels/config/backup/components/ha-backup-details-summary.ts
+++ b/src/panels/config/backup/components/ha-backup-details-summary.ts
@@ -138,7 +138,7 @@ class HaBackupDetailsSummary extends LitElement {
      max-width: 690px;
      width: 100%;
      margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
      display: grid;
    }
    .card-content {
@@ -168,7 +168,7 @@ class HaBackupDetailsSummary extends LitElement {
      display: flex;
      align-items: center;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
      line-height: var(--ha-line-height-condensed);
    }
  `;
--- a/src/panels/config/backup/components/ha-backup-formfield-label.ts
+++ b/src/panels/config/backup/components/ha-backup-formfield-label.ts
@@ -35,7 +35,7 @@ class SupervisorFormfieldLabel extends LitElement {
    :host {
      display: flex;
      flex-direction: row;
-      gap: 16px;
+      gap: var(--ha-space-4);
      align-items: center;
    }
    .label {
--- a/src/panels/config/backup/components/ha-backup-summary-card.ts
+++ b/src/panels/config/backup/components/ha-backup-summary-card.ts
@@ -74,8 +74,8 @@ class HaBackupSummaryCard extends LitElement {
    .summary {
      display: flex;
      flex-direction: row;
-      column-gap: 16px;
-      row-gap: 8px;
+      column-gap: var(--ha-space-4);
+      row-gap: var(--ha-space-2);
      align-items: center;
      padding: 16px;
      padding-bottom: 8px;
--- a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
@@ -117,7 +117,7 @@ class HaBackupOverviewBackups extends LitElement {
          padding: 28px 20px 0;
          max-width: 690px;
          margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
          display: flex;
          flex-direction: column;
          margin-bottom: calc(72px + var(--safe-area-inset-bottom));
--- a/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts
@@ -61,7 +61,7 @@ class HaBackupOverviewBackups extends LitElement {
          display: flex;
          flex-direction: row;
          align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
        }
        .icon {
          position: relative;
--- a/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts
@@ -303,7 +303,7 @@ class HaBackupBackupsSummary extends LitElement {
          padding: 28px 20px 0;
          max-width: 690px;
          margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
          display: flex;
          flex-direction: column;
          margin-bottom: 24px;
--- a/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts
@@ -334,7 +334,7 @@ class HaBackupOverviewBackups extends LitElement {
          display: flex;
          flex-direction: row;
          align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
        }
        p {
          margin: 0;
--- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
+++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
@@ -579,7 +579,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
          display: flex;
          flex-direction: row;
          align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
        }
        .encryption-key p {
          margin: 0;
--- a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
@@ -305,7 +305,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
          display: flex;
          flex-direction: row;
          align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
        }
        .encryption-key p {
          margin: 0;
--- a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
@@ -231,7 +231,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
          display: flex;
          flex-direction: row;
          align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
        }
        .encryption-key p {
          margin: 0;
--- a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
@@ -153,7 +153,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
          display: flex;
          flex-direction: row;
          align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
        }
        .encryption-key p {
          margin: 0;
--- a/src/panels/config/backup/ha-config-backup-backups.ts
+++ b/src/panels/config/backup/ha-config-backup-backups.ts
@@ -189,7 +189,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
            0
          );
          return html`
-            <div style="display: flex; gap: 4px;">
+            <div style="display: flex; gap: var(--ha-space-1);">
              ${displayedAgentIds.map((agentId) => {
                const name = computeBackupAgentName(
                  this.hass.localize,
--- a/src/panels/config/backup/ha-config-backup-details.ts
+++ b/src/panels/config/backup/ha-config-backup-details.ts
@@ -356,7 +356,7 @@ class HaConfigBackupDetails extends LitElement {
      padding: 28px 20px 0;
      max-width: 690px;
      margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
      display: grid;
      margin-bottom: 24px;
    }
@@ -399,7 +399,7 @@ class HaConfigBackupDetails extends LitElement {
      display: flex;
      align-items: center;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
      line-height: var(--ha-line-height-condensed);
    }
    .dot {
--- a/src/panels/config/backup/ha-config-backup-location.ts
+++ b/src/panels/config/backup/ha-config-backup-location.ts
@@ -326,7 +326,7 @@ class HaConfigBackupDetails extends LitElement {
      padding: 28px 20px 0;
      max-width: 690px;
      margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
      display: grid;
      margin-bottom: 24px;
    }
@@ -376,7 +376,7 @@ class HaConfigBackupDetails extends LitElement {
      display: flex;
      align-items: center;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
      line-height: var(--ha-line-height-condensed);
    }
    .dot {
--- a/src/panels/config/backup/ha-config-backup-overview.ts
+++ b/src/panels/config/backup/ha-config-backup-overview.ts
@@ -248,7 +248,7 @@ class HaConfigBackupOverview extends LitElement {
          padding: 28px 20px 0;
          max-width: 690px;
          margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
          display: flex;
          flex-direction: column;
          margin-bottom: calc(var(--safe-area-inset-bottom) + 72px);
--- a/src/panels/config/backup/ha-config-backup-settings.ts
+++ b/src/panels/config/backup/ha-config-backup-settings.ts
@@ -510,7 +510,7 @@ class HaConfigBackupSettings extends LitElement {
      padding: 28px 20px 0;
      max-width: 690px;
      margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
      display: flex;
      flex-direction: column;
      margin-bottom: 24px;
@@ -532,7 +532,7 @@ class HaConfigBackupSettings extends LitElement {
    }
    .cloud-info .cloud-header {
      display: flex;
-      gap: 16px;
+      gap: var(--ha-space-4);
      font-size: var(--ha-font-size-xl);
      align-items: center;
      padding: 16px;
--- a/src/panels/config/cloud/account/dialog-cloud-support-package.ts
+++ b/src/panels/config/cloud/account/dialog-cloud-support-package.ts
@@ -129,7 +129,7 @@ export class DialogSupportPackage extends LitElement {
    }
    .actions {
      display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
      justify-content: flex-end;
    }
    hr {
--- a/src/panels/config/dashboard/dashboard-card.ts
+++ b/src/panels/config/dashboard/dashboard-card.ts
@@ -59,7 +59,7 @@ export class DashboardCard extends LitElement {
      padding: 12px;
      display: block;
      text-align: var(--float-start);
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
    .preview {
      padding: 16px;
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -921,7 +921,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
        .header {
          display: flex;
          flex-wrap: wrap;
-          gap: 24px;
+          gap: var(--ha-space-6);
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;
@@ -932,7 +932,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
        }
        .title {
          display: flex;
-          gap: 4px;
+          gap: var(--ha-space-1);
          flex-direction: column;
          justify-content: space-between;
        }
@@ -991,7 +991,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
        .actions {
          display: flex;
          flex-wrap: wrap;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        .section {
          width: 100%;
@@ -1013,7 +1013,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
        .integration-info {
          display: flex;
          align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        .integration-info ha-svg-icon {
          min-width: 24px;
--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
@@ -1013,7 +1013,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
          z-index: 2;
          background-color: var(--primary-background-color);
          padding: 0 16px;
-          gap: 16px;
+          gap: var(--ha-space-4);
          box-sizing: border-box;
          border-bottom: 1px solid var(--divider-color);
        }
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts
@@ -91,7 +91,7 @@ class MatterAddDeviceNew extends LitElement {
        justify-content: space-between;
        padding: 0 24px;
        box-sizing: border-box;
-        gap: 16px;
+        gap: var(--ha-space-4);
        width: 100%;
        max-width: 400px;
      }
--- a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-thermostat-setback.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-thermostat-setback.ts
@@ -209,7 +209,7 @@ class ZWaveJSCapabilityThermostatSetback extends LitElement {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
-      gap: 16px;
+      gap: var(--ha-space-4);
    }
    :host > ha-select {
      width: 100%;
@@ -225,7 +225,7 @@ class ZWaveJSCapabilityThermostatSetback extends LitElement {
    .setback-state {
      width: 100%;
      display: flex;
-      gap: 16px;
+      gap: var(--ha-space-4);
    }
    .setback-state ha-select,
    ha-textfield {
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
@@ -362,7 +362,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
          display: flex;
          align-items: center;
          flex-direction: column;
-          gap: 16px;
+          gap: var(--ha-space-4);
          text-align: center;
        }

--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
@@ -997,7 +997,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {

        .right-buttons {
          display: flex;
-          gap: 8px;
+          gap: var(--ha-space-2);
          margin-left: auto;
        }

--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts
@@ -224,7 +224,7 @@ class ZWaveJSCustomParam extends LitElement {
    .custom-config-form {
      display: flex;
      flex-wrap: wrap;
-      gap: 16px;
+      gap: var(--ha-space-4);
      margin-bottom: 8px;
    }

--- a/src/panels/config/logs/dialog-download-logs.ts
+++ b/src/panels/config/logs/dialog-download-logs.ts
@@ -141,7 +141,7 @@ class DownloadLogsDialog extends LitElement {
          display: flex;
          flex-direction: column;
          align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
      `,
    ];
--- a/src/panels/config/network/ha-config-url-form.ts
+++ b/src/panels/config/network/ha-config-url-form.ts
@@ -444,7 +444,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
    .url-container {
      display: flex;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
      margin-top: 8px;
    }
    .textfield-container {
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@@ -803,7 +803,7 @@ export class HassioNetwork extends LitElement {
        .address-row {
          display: flex;
          flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
          align-items: center;
        }
        .address-row ha-textfield {
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -1197,7 +1197,7 @@ export class HaScriptEditor extends UndoRedoMixin<
          display: flex;
          flex-direction: column;
          align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
          pointer-events: none;
        }

--- a/src/panels/config/voice-assistants/cloud-discover.ts
+++ b/src/panels/config/voice-assistants/cloud-discover.ts
@@ -145,7 +145,7 @@ export class CloudDiscover extends LitElement {
    .features {
      display: grid;
      grid-template-columns: auto;
-      grid-gap: 16px;
+      grid-gap: var(--ha-space-4);
      padding: 16px;
    }
    @media (min-width: 600px) {
--- a/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
+++ b/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
@@ -470,7 +470,7 @@ export class AssistPipelineRunDebug extends LitElement {
      .start-buttons {
        display: flex;
        flex-wrap: wrap;
-        gap: 8px;
+        gap: var(--ha-space-2);
        align-items: center;
        justify-content: center;
      }
--- a/src/panels/developer-tools/event/developer-tools-event.ts
+++ b/src/panels/developer-tools/event/developer-tools-event.ts
@@ -146,7 +146,7 @@ class HaPanelDevEvent extends LitElement {
      haStyle,
      css`
        .content {
-          gap: 16px;
+          gap: var(--ha-space-4);
          padding: 16px;
          max-width: 1200px;
          margin: auto;
--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@@ -542,7 +542,7 @@ class HaPanelDevState extends LitElement {
          --mdc-icon-button-size: 24px;
          display: flex;
          align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }

        .entity-id ha-icon-button {
@@ -581,7 +581,7 @@ class HaPanelDevState extends LitElement {
          display: flex;
          margin: 8px 0;
          align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }

        :host([narrow]) .state-wrapper {
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -714,7 +714,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
          height: 100%;
          display: flex;
          flex-direction: column;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        ha-data-table {
          width: 100%;
@@ -733,7 +733,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
          width: 100%;
          justify-content: space-between;
          padding: 0 16px;
-          gap: 16px;
+          gap: var(--ha-space-4);
          box-sizing: border-box;
          background: var(--primary-background-color);
          border-bottom: 1px solid var(--divider-color);
@@ -750,7 +750,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
        .narrow-header-row {
          display: flex;
          align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
          padding: 0 16px;
          overflow-x: scroll;
          -ms-overflow-style: none;
@@ -772,7 +772,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
        .selection-controls {
          display: flex;
          align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }

        .selection-controls p {
@@ -784,7 +784,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
        .center-vertical {
          display: flex;
          align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
        }

        .relative {
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -274,7 +274,7 @@ ${type === "object"
        }

        .content {
-          gap: 16px;
+          gap: var(--ha-space-4);
          padding: 16px;
        }

--- a/src/panels/lovelace/badges/hui-view-badges.ts
+++ b/src/panels/lovelace/badges/hui-view-badges.ts
@@ -202,7 +202,7 @@ export class HuiViewBadges extends LitElement {
      align-items: flex-start;
      flex-wrap: var(--badges-wrap, wrap);
      justify-content: var(--badges-aligmnent, center);
-      gap: 8px;
+      gap: var(--ha-space-2);
      margin: 0;
    }

@@ -244,7 +244,7 @@ export class HuiViewBadges extends LitElement {
      flex-direction: row;
      align-items: center;
      outline: none;
-      gap: 8px;
+      gap: var(--ha-space-2);
      height: 36px;
      padding: 6px 20px 6px 20px;
      box-sizing: border-box;
--- a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
@@ -150,7 +150,7 @@ class HuiLockOpenDoorCardFeature
          align-items: center;
          justify-content: center;
          flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
          font-weight: var(--ha-font-weight-medium);
          color: var(--success-color);
          margin: 0 12px 12px 12px;
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -425,7 +425,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
      display: grid;
      grid-template-columns: repeat(var(--keypad-columns), auto);
      grid-auto-rows: auto;
-      grid-gap: 16px;
+      grid-gap: var(--ha-space-4);
      justify-items: center;
      align-items: center;
    }
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -747,7 +747,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
      left: 0;
      display: flex;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
      padding: 8px;
      pointer-events: none;
      z-index: 1;
--- a/src/panels/lovelace/cards/hui-clock-card.ts
+++ b/src/panels/lovelace/cards/hui-clock-card.ts
@@ -159,7 +159,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
    .time-wrapper.size-large {
      height: calc(100% - 32px);
      padding: 16px;
-      row-gap: 12px;
+      row-gap: var(--ha-space-3);
    }

    .time-title {
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@@ -88,7 +88,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
    .header {
      display: flex;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
      padding: 16px;
    }
    .message {
--- a/src/panels/lovelace/cards/hui-heading-card.ts
+++ b/src/panels/lovelace/cards/hui-heading-card.ts
@@ -154,7 +154,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
    .content:hover ha-icon-next {
      transform: translateX(calc(4px * var(--scale-direction)));
@@ -173,7 +173,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
      display: flex;
      flex-direction: row;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
      color: var(--ha-heading-card-title-color, var(--primary-text-color));
      font-size: var(--ha-heading-card-title-font-size, var(--ha-font-size-l));
      font-weight: var(
--- a/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts
@@ -148,7 +148,7 @@ export class HuiDialogSuggestBadge extends LitElement {
          align-items: flex-start;
          flex-wrap: wrap;
          justify-content: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
          margin: 0;
        }
        .editor {
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -504,7 +504,7 @@ export class HuiDialogEditCard
        }

        [slot="primaryAction"] {
-          gap: 8px;
+          gap: var(--ha-space-2);
          display: flex;
        }
      `,
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -513,7 +513,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
      --mdc-icon-size: 18px;
      display: flex;
      align-items: center;
-      gap: 12px;
+      gap: var(--ha-space-3);
      margin-bottom: 8px;
    }
    .imported-card-header .subtitle {
--- a/src/panels/lovelace/views/hui-view-header.ts
+++ b/src/panels/lovelace/views/hui-view-header.ts
@@ -464,7 +464,7 @@ export class HuiViewHeader extends LitElement {
      flex-direction: row;
      align-items: center;
      outline: none;
-      gap: 8px;
+      gap: var(--ha-space-2);
      height: 36px;
      padding: 6px 20px 6px 20px;
      box-sizing: border-box;
--- a/src/resources/theme/core.globals.ts
+++ b/src/resources/theme/core.globals.ts
@@ -19,6 +19,29 @@ export const coreStyles = css`
    --ha-border-radius-pill: 9999px;
    --ha-border-radius-circle: 50%;
    --ha-border-radius-square: 0;
+      
+    # Spacing
+    --ha-space-0: 0px;
+    --ha-space-1: 4px;
+    --ha-space-2: 8px;
+    --ha-space-3: 12px;
+    --ha-space-4: 16px;
+    --ha-space-5: 20px;
+    --ha-space-6: 24px;
+    --ha-space-7: 28px;
+    --ha-space-8: 32px;
+    --ha-space-9: 36px;
+    --ha-space-10: 40px;
+    --ha-space-11: 44px;
+    --ha-space-12: 48px;
+    --ha-space-13: 44px;
+    --ha-space-14: 56px;
+    --ha-space-15: 60px;
+    --ha-space-16: 64px;
+    --ha-space-17: 68px;
+    --ha-space-18: 72px;
+    --ha-space-19: 76px;
+    --ha-space-20: 80px;
  }
 `;

--- a/src/state-control/climate/ha-state-control-climate-temperature.ts
+++ b/src/state-control/climate/ha-state-control-climate-temperature.ts
@@ -537,7 +537,7 @@ export class HaStateControlClimateTemperature extends LitElement {
        .dual {
          display: flex;
          flex-direction: row;
-          gap: 24px;
+          gap: var(--ha-space-6);
        }
        .target-button {
          outline: none;
@@ -562,11 +562,11 @@ export class HaStateControlClimateTemperature extends LitElement {
          opacity: 1;
        }
        .container.md .dual {
-          gap: 16px;
+          gap: var(--ha-space-4);
        }
        .container.sm .dual,
        .container.xs .dual {
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        .container.sm .target-icon {
          display: none;
--- a/Show More
+++ b/Show More