setup complete

front/sass/_datepicker.scss

@@ -0,0 +1,43 @@
+
+.flatpickr-wrapper {
+  display: block !important;
+}
+
+.editor-field {
+  .flatpickr-calendar {
+    border-radius: 12px !important;
+  }
+
+  .flatpickr-months .flatpickr-month {
+    background: var(--p30);
+      color: var(--text);
+      font-size: 12px;
+  }
+
+  .flatpickr-current-month .flatpickr-monthDropdown-months {
+      background: var(--p30);
+  }
+
+    .flatpickr-weekdays{
+        background: var(--p30);
+        color: var(--text);
+
+    }
+
+    .flatpickr-weekdaycontainer .flatpickr-weekday{
+        background: var(--p30);
+        color: var(--text);
+    }
+
+    .flatpickr-days{
+        background: var(--p10);
+        color: var(--text);
+    }
+
+    .flatpickr-time{
+        background: var(--p10);
+        color: var(--text);
+    }
+
+}
+

front/sass/_dialog.scss

@@ -15,7 +15,7 @@ body:has(dialog[open]) {
 
 dialog {
   margin: 2vh auto;
-  background-color: #fff;
+  background-color: var(--p10);
   padding: 34px;
   border: none;
   border-radius: 12px;
@@ -49,6 +49,6 @@ dialog::backdrop {
   position: sticky;
   top: -34px;
   z-index: 999;
-  background: #fff;
+  background-color: var(--p10);
   padding: 10px 0;
 }

front/sass/app.scss

@@ -70,6 +70,7 @@
 @import "./reference-tags";
 @import "./members";
 @import "./revisions";
+@import "./datepicker";
 
 body {
   background-color: var(--p10);
@@ -104,7 +105,3 @@ a {
 .lucent-component {
   position: relative;
 }
-
-.flatpickr-wrapper {
-  display: block!important;
-}