diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 178d21387a..63172f4e3e 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -421,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;
@@ -460,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);
     }
   `;
diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts
index 60e4c7aedd..855ce8a766 100644
--- a/src/panels/calendar/dialog-calendar-event-editor.ts
+++ b/src/panels/calendar/dialog-calendar-event-editor.ts
@@ -622,17 +622,17 @@ 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;
@@ -640,13 +640,13 @@ class DialogCalendarEventEditor extends LitElement {
         ha-time-input {
           --ha-base-time-input-margin-top: var(--ha-space-2);
           --ha-base-time-input-separator-padding-top: var(--ha-space-3);
-          margin-left: 16px;
-          margin-inline-start: 16px;
+          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;
@@ -665,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;