@dayflow/core 3.3.2 → 3.3.4

package/dist/styles.components.css

@@ -1,4 +1,5 @@
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer theme, base, df-theme, components, utilities;
 @layer theme {
   :root, :host {
     --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -100,10 +101,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) {
@@ -496,10 +508,14 @@
 .df-nav-button:hover {
   color: var(--df-color-primary);
 }
-.df-calendar-container .text-primary {
+.df-calendar-container .text-primary,
+.df-event-detail-panel .text-primary,
+.df-dialog-container .text-primary {
   color: var(--df-color-primary);
 }
-.df-calendar-container .hover\:bg-primary\/10:hover {
+.df-calendar-container .bg-primary\/10,
+.df-event-detail-panel .bg-primary\/10,
+.df-dialog-container .bg-primary\/10 {
   background-color: var(--df-color-primary);
   @supports (color: color-mix(in lab, red, red)) {
     background-color: color-mix(
@@ -509,6 +525,42 @@
   );
   }
 }
+.df-calendar-container .hover\:bg-primary\/10:hover,
+.df-event-detail-panel .hover\:bg-primary\/10:hover,
+.df-dialog-container .hover\:bg-primary\/10:hover {
+  background-color: var(--df-color-primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(
+    in srgb,
+    var(--df-color-primary) 10%,
+    transparent
+  );
+  }
+}
+.df-calendar-container .bg-primary\/20,
+.df-event-detail-panel .bg-primary\/20,
+.df-dialog-container .bg-primary\/20 {
+  background-color: var(--df-color-primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(
+    in srgb,
+    var(--df-color-primary) 20%,
+    transparent
+  );
+  }
+}
+.df-calendar-container .hover\:bg-primary\/20:hover,
+.df-event-detail-panel .hover\:bg-primary\/20:hover,
+.df-dialog-container .hover\:bg-primary\/20:hover {
+  background-color: var(--df-color-primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(
+    in srgb,
+    var(--df-color-primary) 20%,
+    transparent
+  );
+  }
+}
 .df-calendar-container .hover\:text-primary:hover {
   color: var(--df-color-primary);
 }

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 {
@@ -382,8 +396,8 @@
 .z-10001 {
   z-index: 10001;
 }
-.z-\[15\] {
-  z-index: 15;
+.z-\[100\] {
+  z-index: 100;
 }
 .z-\[9999\] {
   z-index: 9999;
@@ -1112,7 +1126,7 @@
 .border-transparent {
   border-color: transparent;
 }
-.border-l-primary {
+.border-l-\[var\(--df-color-primary\)\] {
   border-left-color: var(--df-color-primary);
 }
 .bg-\[var\(--df-color-primary\)\] {
@@ -1205,12 +1219,6 @@
 .bg-secondary {
   background-color: var(--df-color-secondary);
 }
-.bg-secondary\/10 {
-  background-color: var(--df-color-secondary);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--df-color-secondary) 10%, transparent);
-  }
-}
 .bg-slate-50 {
   background-color: var(--color-slate-50);
 }
@@ -1491,9 +1499,6 @@
 .text-red-500 {
   color: var(--color-red-500);
 }
-.text-secondary {
-  color: var(--df-color-secondary);
-}
 .text-secondary-foreground {
   color: var(--df-color-secondary-foreground);
 }
@@ -1679,10 +1684,6 @@
   --tw-duration: 200ms;
   transition-duration: 200ms;
 }
-.duration-250 {
-  --tw-duration: 250ms;
-  transition-duration: 250ms;
-}
 .duration-300 {
   --tw-duration: 300ms;
   transition-duration: 300ms;
@@ -1846,13 +1847,6 @@
     }
   }
 }
-.hover\:bg-primary {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--df-color-primary);
-    }
-  }
-}
 .hover\:bg-primary\/10 {
   &:hover {
     @media (hover: hover) {
@@ -1863,22 +1857,22 @@
     }
   }
 }
-.hover\:bg-primary\/90 {
+.hover\:bg-primary\/20 {
   &:hover {
     @media (hover: hover) {
       background-color: var(--df-color-primary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--df-color-primary) 90%, transparent);
+        background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
       }
     }
   }
 }
-.hover\:bg-secondary\/20 {
+.hover\:bg-primary\/90 {
   &:hover {
     @media (hover: hover) {
-      background-color: var(--df-color-secondary);
+      background-color: var(--df-color-primary);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--df-color-secondary) 20%, transparent);
+        background-color: color-mix(in oklab, var(--df-color-primary) 90%, transparent);
       }
     }
   }
@@ -2101,6 +2095,11 @@
     width: 70%;
   }
 }
+.md\:flex-row {
+  @media (width >= 48rem) {
+    flex-direction: row;
+  }
+}
 .md\:text-xs {
   @media (width >= 48rem) {
     font-size: var(--text-xs);
@@ -2142,11 +2141,6 @@
     border-color: var(--color-slate-800);
   }
 }
-.dark\:border-l-primary {
-  .dark & {
-    border-left-color: var(--df-color-primary);
-  }
-}
 .dark\:bg-black\/80 {
   .dark & {
     background-color: color-mix(in srgb, #000 80%, transparent);
@@ -2596,10 +2590,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 +2664,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 +2680,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 +2740,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 +2765,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 +2815,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.4",
   "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",