@dayflow/core 3.3.2 → 3.3.3

package/dist/styles.components.css

@@ -100,10 +100,21 @@
 }
 .df-calendar-container,
 .df-portal {
+  --color-background: var(--df-color-background);
+  --color-foreground: var(--df-color-foreground);
+  --color-hover: var(--df-color-hover);
+  --color-border: var(--df-color-border);
+  --color-card: var(--df-color-card);
+  --color-card-foreground: var(--df-color-card-foreground);
+  --color-muted: var(--df-color-muted);
+  --color-muted-foreground: var(--df-color-muted-foreground);
   --color-primary: var(--df-color-primary);
   --color-primary-foreground: var(--df-color-primary-foreground);
+  --color-secondary: var(--df-color-secondary);
+  --color-secondary-foreground: var(--df-color-secondary-foreground);
   --color-destructive: var(--df-color-destructive);
   --color-destructive-foreground: var(--df-color-destructive-foreground);
+  --hover: var(--df-color-hover);
 }
 @layer df-theme {
   :where(:root) {

package/dist/styles.css

@@ -233,6 +233,20 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-geist-sans);
     --default-mono-font-family: var(--font-geist-mono);
+    --color-background: var(--df-color-background);
+    --color-foreground: var(--df-color-foreground);
+    --color-hover: var(--df-color-hover);
+    --color-border: var(--df-color-border);
+    --color-card: var(--df-color-card);
+    --color-card-foreground: var(--df-color-card-foreground);
+    --color-muted: var(--df-color-muted);
+    --color-muted-foreground: var(--df-color-muted-foreground);
+    --color-primary: var(--df-color-primary);
+    --color-primary-foreground: var(--df-color-primary-foreground);
+    --color-secondary: var(--df-color-secondary);
+    --color-secondary-foreground: var(--df-color-secondary-foreground);
+    --color-destructive: var(--df-color-destructive);
+    --color-destructive-foreground: var(--df-color-destructive-foreground);
   }
 }
 .pointer-events-auto {
@@ -499,6 +513,9 @@
 .block {
   display: block;
 }
+.block\! {
+  display: block !important;
+}
 .flex {
   display: flex;
 }
@@ -2101,6 +2118,11 @@
     width: 70%;
   }
 }
+.md\:flex-row {
+  @media (width >= 48rem) {
+    flex-direction: row;
+  }
+}
 .md\:text-xs {
   @media (width >= 48rem) {
     font-size: var(--text-xs);
@@ -2596,10 +2618,20 @@
 .df-calendar-container,
 .df-portal {
   --color-background: var(--df-color-background);
+  --color-foreground: var(--df-color-foreground);
+  --color-hover: var(--df-color-hover);
+  --color-border: var(--df-color-border);
+  --color-card: var(--df-color-card);
+  --color-card-foreground: var(--df-color-card-foreground);
+  --color-muted: var(--df-color-muted);
+  --color-muted-foreground: var(--df-color-muted-foreground);
   --color-primary: var(--df-color-primary);
   --color-primary-foreground: var(--df-color-primary-foreground);
+  --color-secondary: var(--df-color-secondary);
+  --color-secondary-foreground: var(--df-color-secondary-foreground);
   --color-destructive: var(--df-color-destructive);
   --color-destructive-foreground: var(--df-color-destructive-foreground);
+  --hover: var(--df-color-hover);
 }
 @layer df-theme {
   :where(:root) {
@@ -2660,18 +2692,10 @@
     flex-direction: row;
     overflow: hidden;
     border-radius: var(--radius-lg);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-gray-200);
-    background-color: var(--color-white);
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
+    border: 1px solid var(--df-color-border);
     --df-calendar-height: 800px;
     height: var(--df-calendar-height, 800px);
     font-family: Arial;
@@ -2684,10 +2708,7 @@
   .df-calendar-time-column {
     width: calc(var(--spacing) * 20);
     flex-shrink: 0;
-    border-color: var(--color-gray-200);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
+    border-color: var(--df-color-border);
   }
   .df-calendar-nav-button {
     border-radius: 0.25rem;
@@ -2747,12 +2768,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-sm);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-gray-300);
-    .dark & {
-      border-color: var(--color-gray-600);
-    }
+    border: 1px solid var(--df-color-border);
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
@@ -2777,67 +2793,37 @@
     transform: rotate(45deg);
   }
   .df-header {
-    background-color: var(--color-white);
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
   }
   .df-calendar {
-    background-color: var(--color-white);
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
   }
   .df-month-view {
-    background-color: var(--color-white);
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
   }
   .df-week-header-row,
   .df-week-header {
-    border-color: var(--color-gray-200);
-    background-color: var(--color-white);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
+    border-color: var(--df-color-border);
   }
   .df-month-day-cell,
   .df-time-grid-cell,
   .df-all-day-cell {
-    border-color: var(--color-gray-200);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
+    border-color: var(--df-color-border);
   }
   .df-time-column {
-    border-color: var(--color-gray-200);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
+    border-color: var(--df-color-border);
   }
   .df-time-grid-row,
   .df-time-grid-boundary,
   .df-all-day-row,
   .df-mini-calendar {
-    border-color: var(--color-gray-200);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
+    border-color: var(--df-color-border);
   }
   .df-event-detail-panel,
   .df-dialog-container {
-    border-color: var(--color-gray-200);
-    background-color: var(--color-white);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
-    .dark & {
-      background-color: var(--color-gray-800);
-    }
+    background-color: var(--df-color-card);
+    border-color: var(--df-color-border);
   }
   .df-portal .bg-destructive {
     background-color: var(--df-color-destructive);
@@ -2857,14 +2843,8 @@
     color: var(--df-color-destructive-foreground);
   }
   .df-sidebar {
-    border-color: var(--color-gray-200);
-    background-color: var(--color-white);
-    .dark & {
-      border-color: var(--color-gray-700);
-    }
-    .dark & {
-      background-color: var(--color-gray-900);
-    }
+    background-color: var(--df-color-background);
+    border-color: var(--df-color-border);
   }
   .df-year-grid-month {
     --heat-1: #ebf5ff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dayflow/core",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "A flexible and feature-rich calendar engine powered by Preact with drag-and-drop support, multiple views (Day, Week, Month, Year), and plugin architecture",
   "keywords": [
     "calendar",