Spacing tokens in changed files

src/components/ha-base-time-input.ts

@@ -369,6 +369,7 @@ export class HaBaseTimeInput extends LitElement {
     ha-input {
       height: 56px;
       padding: 0;
+      margin-top: var(--ha-base-time-input-margin-top, 0);
       width: 60px;
       flex-grow: 1;
     }
@@ -406,11 +407,13 @@ export class HaBaseTimeInput extends LitElement {
       border-bottom: 1px solid var(--ha-color-border-neutral-loud);
       box-sizing: border-box;
       height: 56px;
+      margin-top: var(--ha-base-time-input-margin-top, 0);
       margin-inline-start: calc(var(--ha-space-1) * -1);
     }
 
     .time-separator {
       width: 12px;
+      padding-top: var(--ha-base-time-input-separator-padding-top, 0);
       margin-inline-end: calc(var(--ha-space-1) * -1);
       display: flex;
       align-items: center;
@@ -418,7 +421,10 @@ export class HaBaseTimeInput extends LitElement {
     }
 
     :host([clearable]) .mdc-select__anchor {
-      padding-inline-end: var(--select-selected-text-padding-end, 12px);
+      padding-inline-end: var(
+        --select-selected-text-padding-end,
+        var(--ha-space-3)
+      );
     }
     ha-icon-button {
       position: relative;
@@ -457,12 +463,12 @@ export class HaBaseTimeInput extends LitElement {
       text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
       text-transform: var(--mdc-typography-body2-text-transform, inherit);
       color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
-      padding-left: 4px;
-      padding-inline-start: 4px;
+      padding-left: var(--ha-space-1);
+      padding-inline-start: var(--ha-space-1);
       padding-inline-end: initial;
     }
     ha-input-helper-text {
-      padding-top: 8px;
+      padding-top: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
   `;

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -622,29 +622,31 @@ class DialogCalendarEventEditor extends LitElement {
         }
         ha-alert {
           display: block;
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
         ha-textarea {
           display: block;
         }
         ha-textarea {
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
         ha-formfield {
           display: block;
-          padding: 16px 0;
+          padding: var(--ha-space-4) 0;
         }
         ha-date-input {
           flex-grow: 1;
         }
         ha-time-input {
-          margin-left: 16px;
-          margin-inline-start: 16px;
+          --ha-base-time-input-margin-top: var(--ha-space-2);
+          --ha-base-time-input-separator-padding-top: var(--ha-space-3);
+          margin-left: var(--ha-space-4);
+          margin-inline-start: var(--ha-space-4);
           margin-inline-end: initial;
         }
         ha-recurrence-rule-editor {
           display: block;
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
         .flex {
           display: flex;
@@ -663,8 +665,8 @@ class DialogCalendarEventEditor extends LitElement {
         }
         ha-svg-icon {
           width: 40px;
-          margin-right: 8px;
-          margin-inline-end: 8px;
+          margin-right: var(--ha-space-2);
+          margin-inline-end: var(--ha-space-2);
           margin-inline-start: initial;
           direction: var(--direction);
           vertical-align: top;