@dayflow/core 3.3.5 → 3.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.esm.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/styles.components.css +285 -370
  5. package/dist/styles.css +345 -325
  6. package/package.json +3 -2
package/dist/styles.css CHANGED
@@ -691,9 +691,6 @@
691
691
  width: -moz-max-content;
692
692
  width: max-content;
693
693
  }
694
- .max-w-100 {
695
- max-width: calc(var(--spacing) * 100);
696
- }
697
694
  .max-w-md {
698
695
  max-width: var(--container-md);
699
696
  }
@@ -1108,15 +1105,6 @@
1108
1105
  .border-gray-300 {
1109
1106
  border-color: var(--color-gray-300);
1110
1107
  }
1111
- .border-primary {
1112
- border-color: var(--df-color-primary);
1113
- }
1114
- .border-primary\/50 {
1115
- border-color: var(--df-color-primary);
1116
- @supports (color: color-mix(in lab, red, red)) {
1117
- border-color: color-mix(in oklab, var(--df-color-primary) 50%, transparent);
1118
- }
1119
- }
1120
1108
  .border-slate-100 {
1121
1109
  border-color: var(--color-slate-100);
1122
1110
  }
@@ -1168,9 +1156,6 @@
1168
1156
  .bg-blue-500 {
1169
1157
  background-color: var(--color-blue-500);
1170
1158
  }
1171
- .bg-destructive {
1172
- background-color: var(--df-color-destructive);
1173
- }
1174
1159
  .bg-gray-50 {
1175
1160
  background-color: var(--color-gray-50);
1176
1161
  }
@@ -1204,18 +1189,6 @@
1204
1189
  .bg-primary {
1205
1190
  background-color: var(--df-color-primary);
1206
1191
  }
1207
- .bg-primary\/10 {
1208
- background-color: var(--df-color-primary);
1209
- @supports (color: color-mix(in lab, red, red)) {
1210
- background-color: color-mix(in oklab, var(--df-color-primary) 10%, transparent);
1211
- }
1212
- }
1213
- .bg-primary\/30 {
1214
- background-color: var(--df-color-primary);
1215
- @supports (color: color-mix(in lab, red, red)) {
1216
- background-color: color-mix(in oklab, var(--df-color-primary) 30%, transparent);
1217
- }
1218
- }
1219
1192
  .bg-secondary {
1220
1193
  background-color: var(--df-color-secondary);
1221
1194
  }
@@ -1463,12 +1436,6 @@
1463
1436
  .text-blue-900 {
1464
1437
  color: var(--color-blue-900);
1465
1438
  }
1466
- .text-destructive {
1467
- color: var(--df-color-destructive);
1468
- }
1469
- .text-destructive-foreground {
1470
- color: var(--df-color-destructive-foreground);
1471
- }
1472
1439
  .text-gray-300 {
1473
1440
  color: var(--color-gray-300);
1474
1441
  }
@@ -1493,15 +1460,9 @@
1493
1460
  .text-primary {
1494
1461
  color: var(--df-color-primary);
1495
1462
  }
1496
- .text-primary-foreground {
1497
- color: var(--df-color-primary-foreground);
1498
- }
1499
1463
  .text-red-500 {
1500
1464
  color: var(--color-red-500);
1501
1465
  }
1502
- .text-secondary-foreground {
1503
- color: var(--df-color-secondary-foreground);
1504
- }
1505
1466
  .text-slate-300 {
1506
1467
  color: var(--color-slate-300);
1507
1468
  }
@@ -1613,21 +1574,15 @@
1613
1574
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1614
1575
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1615
1576
  }
1616
- .shadow-primary\/20 {
1577
+ .shadow-primary {
1617
1578
  --tw-shadow-color: var(--df-color-primary);
1618
1579
  @supports (color: color-mix(in lab, red, red)) {
1619
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--df-color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
1580
+ --tw-shadow-color: color-mix(in oklab, var(--df-color-primary) var(--tw-shadow-alpha), transparent);
1620
1581
  }
1621
1582
  }
1622
1583
  .ring-primary {
1623
1584
  --tw-ring-color: var(--df-color-primary);
1624
1585
  }
1625
- .ring-primary\/20 {
1626
- --tw-ring-color: var(--df-color-primary);
1627
- @supports (color: color-mix(in lab, red, red)) {
1628
- --tw-ring-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
1629
- }
1630
- }
1631
1586
  .ring-offset-1 {
1632
1587
  --tw-ring-offset-width: 1px;
1633
1588
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1720,11 +1675,6 @@
1720
1675
  .ring-inset {
1721
1676
  --tw-ring-inset: inset;
1722
1677
  }
1723
- .group-focus-within\:text-primary {
1724
- &:is(:where(.group):focus-within *) {
1725
- color: var(--df-color-primary);
1726
- }
1727
- }
1728
1678
  .group-hover\:scale-110 {
1729
1679
  &:is(:where(.group):hover *) {
1730
1680
  @media (hover: hover) {
@@ -1811,23 +1761,6 @@
1811
1761
  }
1812
1762
  }
1813
1763
  }
1814
- .hover\:bg-destructive {
1815
- &:hover {
1816
- @media (hover: hover) {
1817
- background-color: var(--df-color-destructive);
1818
- }
1819
- }
1820
- }
1821
- .hover\:bg-destructive\/90 {
1822
- &:hover {
1823
- @media (hover: hover) {
1824
- background-color: var(--df-color-destructive);
1825
- @supports (color: color-mix(in lab, red, red)) {
1826
- background-color: color-mix(in oklab, var(--df-color-destructive) 90%, transparent);
1827
- }
1828
- }
1829
- }
1830
- }
1831
1764
  .hover\:bg-gray-50 {
1832
1765
  &:hover {
1833
1766
  @media (hover: hover) {
@@ -1856,36 +1789,6 @@
1856
1789
  }
1857
1790
  }
1858
1791
  }
1859
- .hover\:bg-primary\/10 {
1860
- &:hover {
1861
- @media (hover: hover) {
1862
- background-color: var(--df-color-primary);
1863
- @supports (color: color-mix(in lab, red, red)) {
1864
- background-color: color-mix(in oklab, var(--df-color-primary) 10%, transparent);
1865
- }
1866
- }
1867
- }
1868
- }
1869
- .hover\:bg-primary\/20 {
1870
- &:hover {
1871
- @media (hover: hover) {
1872
- background-color: var(--df-color-primary);
1873
- @supports (color: color-mix(in lab, red, red)) {
1874
- background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
1875
- }
1876
- }
1877
- }
1878
- }
1879
- .hover\:bg-primary\/90 {
1880
- &:hover {
1881
- @media (hover: hover) {
1882
- background-color: var(--df-color-primary);
1883
- @supports (color: color-mix(in lab, red, red)) {
1884
- background-color: color-mix(in oklab, var(--df-color-primary) 90%, transparent);
1885
- }
1886
- }
1887
- }
1888
- }
1889
1792
  .hover\:bg-slate-50 {
1890
1793
  &:hover {
1891
1794
  @media (hover: hover) {
@@ -1900,13 +1803,6 @@
1900
1803
  }
1901
1804
  }
1902
1805
  }
1903
- .hover\:text-destructive-foreground {
1904
- &:hover {
1905
- @media (hover: hover) {
1906
- color: var(--df-color-destructive-foreground);
1907
- }
1908
- }
1909
- }
1910
1806
  .hover\:text-gray-600 {
1911
1807
  &:hover {
1912
1808
  @media (hover: hover) {
@@ -1928,13 +1824,6 @@
1928
1824
  }
1929
1825
  }
1930
1826
  }
1931
- .hover\:text-primary {
1932
- &:hover {
1933
- @media (hover: hover) {
1934
- color: var(--df-color-primary);
1935
- }
1936
- }
1937
- }
1938
1827
  .hover\:text-slate-600 {
1939
1828
  &:hover {
1940
1829
  @media (hover: hover) {
@@ -1979,31 +1868,16 @@
1979
1868
  }
1980
1869
  }
1981
1870
  }
1982
- .focus\:border-primary {
1983
- &:focus {
1984
- border-color: var(--df-color-primary);
1985
- }
1986
- }
1987
1871
  .focus\:bg-\[var\(--df-color-primary\)\] {
1988
1872
  &:focus {
1989
1873
  background-color: var(--df-color-primary);
1990
1874
  }
1991
1875
  }
1992
- .focus\:bg-destructive {
1993
- &:focus {
1994
- background-color: var(--df-color-destructive);
1995
- }
1996
- }
1997
1876
  .focus\:text-\[var\(--df-color-primary-foreground\)\] {
1998
1877
  &:focus {
1999
1878
  color: var(--df-color-primary-foreground);
2000
1879
  }
2001
1880
  }
2002
- .focus\:text-destructive-foreground {
2003
- &:focus {
2004
- color: var(--df-color-destructive-foreground);
2005
- }
2006
- }
2007
1881
  .focus\:ring-1 {
2008
1882
  &:focus {
2009
1883
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2016,11 +1890,6 @@
2016
1890
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2017
1891
  }
2018
1892
  }
2019
- .focus\:ring-primary {
2020
- &:focus {
2021
- --tw-ring-color: var(--df-color-primary);
2022
- }
2023
- }
2024
1893
  .focus\:ring-offset-1 {
2025
1894
  &:focus {
2026
1895
  --tw-ring-offset-width: 1px;
@@ -2418,18 +2287,6 @@
2418
2287
  }
2419
2288
  }
2420
2289
  }
2421
- .dark\:hover\:bg-primary\/20 {
2422
- .dark & {
2423
- &:hover {
2424
- @media (hover: hover) {
2425
- background-color: var(--df-color-primary);
2426
- @supports (color: color-mix(in lab, red, red)) {
2427
- background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
2428
- }
2429
- }
2430
- }
2431
- }
2432
- }
2433
2290
  .dark\:hover\:bg-slate-700 {
2434
2291
  .dark & {
2435
2292
  &:hover {
@@ -2593,27 +2450,6 @@
2593
2450
  .bcp-petal-ring {
2594
2451
  pointer-events: none;
2595
2452
  }
2596
- .df-calendar-container {
2597
- color-scheme: light dark;
2598
- }
2599
- .df-calendar-container,
2600
- .df-portal {
2601
- --color-background: var(--df-color-background);
2602
- --color-foreground: var(--df-color-foreground);
2603
- --color-hover: var(--df-color-hover);
2604
- --color-border: var(--df-color-border);
2605
- --color-card: var(--df-color-card);
2606
- --color-card-foreground: var(--df-color-card-foreground);
2607
- --color-muted: var(--df-color-muted);
2608
- --color-muted-foreground: var(--df-color-muted-foreground);
2609
- --color-primary: var(--df-color-primary);
2610
- --color-primary-foreground: var(--df-color-primary-foreground);
2611
- --color-secondary: var(--df-color-secondary);
2612
- --color-secondary-foreground: var(--df-color-secondary-foreground);
2613
- --color-destructive: var(--df-color-destructive);
2614
- --color-destructive-foreground: var(--df-color-destructive-foreground);
2615
- --hover: var(--df-color-hover);
2616
- }
2617
2453
  @layer df-theme {
2618
2454
  :where(:root) {
2619
2455
  --df-color-background: rgb(255 255 255);
@@ -2649,18 +2485,18 @@
2649
2485
  }
2650
2486
  @media (prefers-color-scheme: dark) {
2651
2487
  :root:not(.light):not(.dark) {
2652
- --df-color-background: rgb(16 24 40);
2653
- --df-color-hover: rgb(30 41 59);
2488
+ --df-color-background: rgb(21 21 21);
2489
+ --df-color-hover: rgb(28 28 28);
2654
2490
  --df-color-foreground: rgb(229 229 229);
2655
- --df-color-border: rgb(51 65 85);
2656
- --df-color-card: rgb(16 24 40);
2491
+ --df-color-border: rgb(56 56 56);
2492
+ --df-color-card: rgb(31 41 55);
2657
2493
  --df-color-card-foreground: rgb(229 229 229);
2658
- --df-color-muted: rgb(30 41 59);
2659
- --df-color-muted-foreground: rgb(148 163 184);
2494
+ --df-color-muted: rgb(55 65 81);
2495
+ --df-color-muted-foreground: rgb(156 163 175);
2660
2496
  --df-color-primary: rgb(229 229 229);
2661
- --df-color-primary-foreground: rgb(15 23 42);
2662
- --df-color-secondary: rgb(148 163 184);
2663
- --df-color-secondary-foreground: rgb(15 23 42);
2497
+ --df-color-primary-foreground: rgb(23 23 23);
2498
+ --df-color-secondary: rgb(156 163 175);
2499
+ --df-color-secondary-foreground: rgb(23 23 23);
2664
2500
  --df-color-destructive: rgb(147 70 69);
2665
2501
  --df-color-destructive-foreground: rgb(254 242 242);
2666
2502
  }
@@ -2668,87 +2504,114 @@
2668
2504
  }
2669
2505
  @layer components {
2670
2506
  .df-calendar-container {
2507
+ color-scheme: light dark;
2671
2508
  position: relative;
2672
2509
  display: flex;
2673
2510
  flex-direction: row;
2674
2511
  overflow: hidden;
2675
- border-radius: var(--radius-lg);
2676
- --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));
2677
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2512
+ border-radius: 0.5rem;
2678
2513
  background-color: var(--df-color-background);
2679
2514
  border: 1px solid var(--df-color-border);
2515
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2680
2516
  --df-calendar-height: 800px;
2681
2517
  height: var(--df-calendar-height, 800px);
2682
2518
  font-family: Arial;
2683
2519
  }
2684
- @media (max-width: 768px) {
2685
- .df-calendar-container {
2686
- --df-calendar-height: 550px;
2687
- }
2520
+ .df-calendar-container, .df-portal, .df-event-detail-panel, .df-dialog-container, .df-range-picker {
2521
+ --color-background: var(--df-color-background);
2522
+ --color-foreground: var(--df-color-foreground);
2523
+ --color-hover: var(--df-color-hover);
2524
+ --color-border: var(--df-color-border);
2525
+ --color-card: var(--df-color-card);
2526
+ --color-card-foreground: var(--df-color-card-foreground);
2527
+ --color-muted: var(--df-color-muted);
2528
+ --color-muted-foreground: var(--df-color-muted-foreground);
2529
+ --color-primary: var(--df-color-primary);
2530
+ --color-primary-foreground: var(--df-color-primary-foreground);
2531
+ --color-secondary: var(--df-color-secondary);
2532
+ --color-secondary-foreground: var(--df-color-secondary-foreground);
2533
+ --color-destructive: var(--df-color-destructive);
2534
+ --color-destructive-foreground: var(--df-color-destructive-foreground);
2535
+ --hover: var(--df-color-hover);
2536
+ }
2537
+ .df-calendar-container .df-header, .df-calendar-container .df-calendar, .df-calendar-container .df-month-view {
2538
+ background-color: var(--df-color-background);
2539
+ }
2540
+ .df-calendar-container .df-sidebar {
2541
+ background-color: var(--df-color-background);
2542
+ border-color: var(--df-color-border);
2543
+ }
2544
+ .df-calendar-container .df-week-header-row, .df-calendar-container .df-week-header {
2545
+ background-color: var(--df-color-background);
2546
+ border-color: var(--df-color-border);
2547
+ }
2548
+ .df-calendar-container .df-month-day-cell, .df-calendar-container .df-time-grid-cell, .df-calendar-container .df-all-day-cell, .df-calendar-container .df-time-column, .df-calendar-container .df-time-grid-row, .df-calendar-container .df-time-grid-boundary, .df-calendar-container .df-all-day-row, .df-calendar-container .df-mini-calendar {
2549
+ border-color: var(--df-color-border);
2550
+ }
2551
+ .df-calendar-container .df-year-grid-month {
2552
+ --heat-1: #ebf5ff;
2553
+ --heat-2: #cfe8ff;
2554
+ --heat-3: #91d5ff;
2555
+ --heat-4: #60a5fa;
2556
+ --heat-5: #3b82f6;
2557
+ }
2558
+ .dark .df-calendar-container .df-year-grid-month {
2559
+ --heat-1: #1e3a5f;
2560
+ --heat-2: #2563eb;
2561
+ --heat-3: #1e40af;
2562
+ --heat-4: #3b82f6;
2563
+ --heat-5: #93c5fd;
2688
2564
  }
2689
2565
  .df-calendar-time-column {
2690
- width: calc(var(--spacing) * 20);
2566
+ width: 5rem;
2691
2567
  flex-shrink: 0;
2692
2568
  border-color: var(--df-color-border);
2693
2569
  }
2694
2570
  .df-calendar-nav-button {
2571
+ padding: 0.25rem;
2572
+ color: rgb(75 85 99);
2695
2573
  border-radius: 0.25rem;
2696
- padding: calc(var(--spacing) * 1);
2697
- color: var(--color-gray-600);
2698
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2699
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2700
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2701
- &:hover {
2702
- @media (hover: hover) {
2703
- background-color: var(--color-gray-100);
2704
- }
2705
- }
2706
- .dark & {
2707
- color: var(--color-gray-300);
2708
- }
2709
- .dark & {
2710
- &:hover {
2711
- @media (hover: hover) {
2712
- background-color: var(--color-gray-800);
2713
- }
2714
- }
2715
- }
2574
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2575
+ transition-duration: 150ms;
2576
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2577
+ }
2578
+ .dark .df-calendar-nav-button {
2579
+ color: rgb(209 213 219);
2580
+ }
2581
+ .df-calendar-nav-button:hover {
2582
+ background-color: rgb(243 244 246);
2583
+ }
2584
+ .dark .df-calendar-nav-button:hover {
2585
+ background-color: rgb(31 41 55);
2716
2586
  }
2717
2587
  .df-calendar-today-button {
2588
+ padding: 0.25rem 1rem;
2589
+ font-size: 0.875rem;
2590
+ line-height: 1.25rem;
2591
+ color: rgb(55 65 81);
2718
2592
  border-radius: 0.25rem;
2719
- padding-inline: calc(var(--spacing) * 4);
2720
- padding-block: calc(var(--spacing) * 1);
2721
- font-size: var(--text-sm);
2722
- line-height: var(--tw-leading, var(--text-sm--line-height));
2723
- color: var(--color-gray-700);
2724
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2725
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2726
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2727
- &:hover {
2728
- @media (hover: hover) {
2729
- background-color: var(--color-gray-100);
2730
- }
2731
- }
2732
- .dark & {
2733
- color: var(--color-gray-200);
2734
- }
2735
- .dark & {
2736
- &:hover {
2737
- @media (hover: hover) {
2738
- background-color: var(--color-gray-800);
2739
- }
2740
- }
2741
- }
2593
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2594
+ transition-duration: 150ms;
2595
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2596
+ }
2597
+ .dark .df-calendar-today-button {
2598
+ color: rgb(229 231 235);
2599
+ }
2600
+ .df-calendar-today-button:hover {
2601
+ background-color: rgb(243 244 246);
2602
+ }
2603
+ .dark .df-calendar-today-button:hover {
2604
+ background-color: rgb(31 41 55);
2742
2605
  }
2743
2606
  .df-calendar-checkbox {
2744
- margin-right: calc(var(--spacing) * 2);
2607
+ margin-right: 0.5rem;
2745
2608
  display: inline-flex;
2746
- height: calc(var(--spacing) * 4);
2747
- width: calc(var(--spacing) * 4);
2609
+ height: 1rem;
2610
+ width: 1rem;
2748
2611
  cursor: pointer;
2749
2612
  align-items: center;
2750
2613
  justify-content: center;
2751
- border-radius: var(--radius-sm);
2614
+ border-radius: 0.25rem;
2752
2615
  border: 1px solid var(--df-color-border);
2753
2616
  -webkit-appearance: none;
2754
2617
  -moz-appearance: none;
@@ -2773,139 +2636,254 @@
2773
2636
  border-width: 0 2px 2px 0;
2774
2637
  transform: rotate(45deg);
2775
2638
  }
2776
- .df-header {
2777
- background-color: var(--df-color-background);
2639
+ .df-event-detail-panel, .df-dialog-container {
2640
+ background-color: var(--df-color-card);
2641
+ border-color: var(--df-color-border);
2778
2642
  }
2779
- .df-calendar {
2780
- background-color: var(--df-color-background);
2643
+ .df-calendar-container .df-header-left, .df-calendar-container .df-header-mid, .df-calendar-container .df-header-right {
2644
+ flex: 1;
2781
2645
  }
2782
- .df-month-view {
2783
- background-color: var(--df-color-background);
2646
+ .df-current-time-bar {
2647
+ background-color: var(--df-color-primary);
2784
2648
  }
2785
- .df-week-header-row,
2786
- .df-week-header {
2787
- background-color: var(--df-color-background);
2788
- border-color: var(--df-color-border);
2649
+ .df-current-time-label {
2650
+ background-color: var(--df-color-primary);
2651
+ color: var(--df-color-primary-foreground);
2789
2652
  }
2790
- .df-month-day-cell,
2791
- .df-time-grid-cell,
2792
- .df-all-day-cell {
2793
- border-color: var(--df-color-border);
2653
+ .df-today-button {
2654
+ color: var(--df-color-primary);
2794
2655
  }
2795
- .df-time-column {
2796
- border-color: var(--df-color-border);
2656
+ .df-today-button:hover, .df-nav-button:hover {
2657
+ background-color: var(--df-color-primary);
2658
+ @supports (color: color-mix(in lab, red, red)) {
2659
+ background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
2660
+ }
2797
2661
  }
2798
- .df-time-grid-row,
2799
- .df-time-grid-boundary,
2800
- .df-all-day-row,
2801
- .df-mini-calendar {
2802
- border-color: var(--df-color-border);
2662
+ .df-nav-button:hover {
2663
+ color: var(--df-color-primary);
2803
2664
  }
2804
- .df-event-detail-panel,
2805
- .df-dialog-container {
2806
- background-color: var(--df-color-card);
2807
- border-color: var(--df-color-border);
2665
+ .df-search-group:focus-within .df-search-focus-within-primary {
2666
+ color: var(--df-color-primary);
2667
+ }
2668
+ .df-fill-primary {
2669
+ background-color: var(--df-color-primary);
2670
+ color: var(--df-color-primary-foreground);
2671
+ }
2672
+ .df-fill-secondary {
2673
+ background-color: var(--df-color-secondary);
2674
+ color: var(--df-color-secondary-foreground);
2808
2675
  }
2809
- .df-portal .bg-destructive {
2676
+ .df-fill-destructive {
2810
2677
  background-color: var(--df-color-destructive);
2811
2678
  color: var(--df-color-destructive-foreground);
2812
2679
  }
2813
- .df-portal .hover\:bg-destructive\/90:hover {
2680
+ .df-tint-primary {
2681
+ background-color: var(--df-color-primary);
2682
+ @supports (color: color-mix(in lab, red, red)) {
2683
+ background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
2684
+ }
2685
+ color: var(--df-color-primary);
2686
+ }
2687
+ .df-tint-primary-md {
2688
+ background-color: var(--df-color-primary);
2689
+ @supports (color: color-mix(in lab, red, red)) {
2690
+ background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
2691
+ }
2692
+ color: var(--df-color-primary);
2693
+ }
2694
+ .df-tint-primary-lg {
2695
+ background-color: var(--df-color-primary);
2696
+ @supports (color: color-mix(in lab, red, red)) {
2697
+ background-color: color-mix( in srgb, var(--df-color-primary) 30%, transparent );
2698
+ }
2699
+ color: var(--df-color-primary);
2700
+ }
2701
+ .dark .df-dark-tint-primary-md {
2702
+ background-color: var(--df-color-primary);
2703
+ @supports (color: color-mix(in lab, red, red)) {
2704
+ background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
2705
+ }
2706
+ }
2707
+ .df-hover-primary:hover {
2708
+ background-color: var(--df-color-primary);
2709
+ @supports (color: color-mix(in lab, red, red)) {
2710
+ background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
2711
+ }
2712
+ color: var(--df-color-primary);
2713
+ }
2714
+ .df-hover-primary-md:hover {
2715
+ background-color: var(--df-color-primary);
2716
+ @supports (color: color-mix(in lab, red, red)) {
2717
+ background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
2718
+ }
2719
+ color: var(--df-color-primary);
2720
+ }
2721
+ .dark .df-hover-primary-dark-md:hover {
2722
+ background-color: var(--df-color-primary);
2723
+ @supports (color: color-mix(in lab, red, red)) {
2724
+ background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
2725
+ }
2726
+ }
2727
+ .df-hover-primary-solid:hover {
2728
+ background-color: var(--df-color-primary);
2729
+ @supports (color: color-mix(in lab, red, red)) {
2730
+ background-color: color-mix( in srgb, var(--df-color-primary) 90%, transparent );
2731
+ }
2732
+ }
2733
+ .df-hover-destructive:hover {
2814
2734
  background-color: var(--df-color-destructive);
2815
2735
  @supports (color: color-mix(in lab, red, red)) {
2816
- background-color: color-mix(
2817
- in srgb,
2818
- var(--df-color-destructive) 90%,
2819
- transparent
2820
- );
2736
+ background-color: color-mix( in srgb, var(--df-color-destructive) 90%, transparent );
2821
2737
  }
2822
2738
  }
2823
- .df-portal .text-destructive-foreground {
2739
+ .df-hover-fill-destructive:hover {
2740
+ background-color: var(--df-color-destructive);
2824
2741
  color: var(--df-color-destructive-foreground);
2825
2742
  }
2826
- .df-sidebar {
2827
- background-color: var(--df-color-background);
2828
- border-color: var(--df-color-border);
2743
+ .df-focus-fill-destructive:focus {
2744
+ background-color: var(--df-color-destructive);
2745
+ color: var(--df-color-destructive-foreground);
2829
2746
  }
2830
- .df-year-grid-month {
2831
- --heat-1: #ebf5ff;
2832
- --heat-2: #cfe8ff;
2833
- --heat-3: #91d5ff;
2834
- --heat-4: #60a5fa;
2835
- --heat-5: #3b82f6;
2747
+ .df-text-primary {
2748
+ color: var(--df-color-primary);
2836
2749
  }
2837
- .dark .df-year-grid-month {
2838
- --heat-1: #1e3a5f;
2839
- --heat-2: #2563eb;
2840
- --heat-3: #1e40af;
2841
- --heat-4: #3b82f6;
2842
- --heat-5: #93c5fd;
2750
+ .df-text-primary-fg {
2751
+ color: var(--df-color-primary-foreground);
2843
2752
  }
2844
- .df-calendar-container *::-webkit-scrollbar {
2845
- width: 2px;
2846
- height: 2px;
2753
+ .df-text-secondary-fg {
2754
+ color: var(--df-color-secondary-foreground);
2847
2755
  }
2848
- .df-calendar-container *::-webkit-scrollbar-track {
2849
- background: transparent;
2756
+ .df-text-destructive {
2757
+ color: var(--df-color-destructive);
2850
2758
  }
2851
- .df-calendar-container *::-webkit-scrollbar-thumb {
2852
- background: #d1d5db;
2853
- border-radius: 1px;
2759
+ .df-text-destructive-fg {
2760
+ color: var(--df-color-destructive-foreground);
2854
2761
  }
2855
- .dark .df-calendar-container *::-webkit-scrollbar-thumb {
2856
- background: #4b5563;
2762
+ .df-border-primary {
2763
+ border-color: var(--df-color-primary);
2857
2764
  }
2858
- .df-calendar-container *::-webkit-scrollbar-thumb:hover {
2859
- background: #9ca3af;
2765
+ .df-border-primary-soft {
2766
+ border-color: var(--df-color-primary);
2767
+ @supports (color: color-mix(in lab, red, red)) {
2768
+ border-color: color-mix(in srgb, var(--df-color-primary) 50%, transparent);
2769
+ }
2860
2770
  }
2861
- .df-calendar-container * {
2862
- scrollbar-width: thin;
2863
- scrollbar-color: #d1d5db transparent;
2771
+ .df-ring-primary {
2772
+ --tw-ring-color: var(--df-color-primary);
2773
+ @supports (color: color-mix(in lab, red, red)) {
2774
+ --tw-ring-color: color-mix(
2775
+ in srgb,
2776
+ var(--df-color-primary) 20%,
2777
+ transparent
2778
+ );
2779
+ }
2864
2780
  }
2865
- .dark .df-calendar-container * {
2866
- scrollbar-color: #4b5563 transparent;
2781
+ .df-ring-primary-solid {
2782
+ --tw-ring-color: var(--df-color-primary);
2867
2783
  }
2868
- .df-calendar-container .df-header-left {
2869
- flex: 1;
2784
+ .df-shadow-primary {
2785
+ --tw-shadow-color: var(--df-color-primary);
2786
+ @supports (color: color-mix(in lab, red, red)) {
2787
+ --tw-shadow-color: color-mix(
2788
+ in srgb,
2789
+ var(--df-color-primary) 20%,
2790
+ transparent
2791
+ );
2792
+ }
2870
2793
  }
2871
- .df-calendar-container .df-header-mid {
2872
- flex: 1;
2794
+ .df-focus-ring:focus {
2795
+ border-color: var(--df-color-primary);
2796
+ --tw-ring-color: var(--df-color-primary);
2873
2797
  }
2874
- .df-calendar-container .df-header-right {
2875
- flex: 1;
2798
+ .df-focus-ring-only:focus {
2799
+ --tw-ring-color: var(--df-color-primary);
2876
2800
  }
2877
- .df-calendar-container.df-drag-active,
2878
- .df-calendar-container .df-drag-active {
2879
- -moz-user-select: none;
2880
- user-select: none;
2881
- -webkit-user-select: none;
2801
+ .df-focus-border-primary:focus {
2802
+ border-color: var(--df-color-primary);
2882
2803
  }
2883
- .df-calendar-container.df-drag-active .calendar-event,
2884
- .df-calendar-container.df-drag-active .df-month-more-events,
2885
- .df-calendar-container.df-drag-active .df-month-title,
2886
- .df-calendar-container.df-drag-active .df-year-event-content {
2887
- pointer-events: none;
2804
+ .df-all-day-event-animate {
2805
+ animation: df-event-pop-in 0.3s ease-out forwards;
2888
2806
  }
2889
- .df-calendar-container .df-cursor-ns-resize,
2890
- .df-calendar-container .df-cursor-ns-resize * {
2891
- cursor: ns-resize;
2807
+ .df-animate-in {
2808
+ animation-duration: 200ms;
2809
+ animation-fill-mode: forwards;
2810
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
2892
2811
  }
2893
- .df-calendar-container .df-cursor-ew-resize,
2894
- .df-calendar-container .df-cursor-ew-resize * {
2895
- cursor: ew-resize;
2812
+ .df-fade-in {
2813
+ animation-name: df-fade-in;
2896
2814
  }
2897
- .df-calendar-container .df-cursor-grabbing,
2898
- .df-calendar-container .df-cursor-grabbing * {
2899
- cursor: grabbing;
2815
+ .df-zoom-in-95 {
2816
+ animation-name: df-zoom-in;
2900
2817
  }
2901
- .df-calendar-container .scrollbar-hide::-webkit-scrollbar {
2902
- display: none;
2818
+ .df-fade-in.df-zoom-in-95 {
2819
+ animation-name: df-fade-in, df-zoom-in;
2820
+ }
2821
+ .df-animate-slide-up {
2822
+ animation: df-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
2823
+ }
2824
+ .df-animate-slide-down {
2825
+ animation: df-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
2826
+ }
2827
+ @media (max-width: 768px) {
2828
+ .df-calendar-container {
2829
+ --df-calendar-height: 550px;
2830
+ }
2903
2831
  }
2904
- .df-calendar-container .scrollbar-hide {
2905
- -ms-overflow-style: none;
2906
- scrollbar-width: none;
2832
+ @media (max-width: 767px) {
2833
+ .df-mobile-mask-fade {
2834
+ mask-image: linear-gradient(to right, black 70%, transparent 100%);
2835
+ -webkit-mask-image: linear-gradient( to right, black 70%, transparent 100% );
2836
+ }
2907
2837
  }
2908
2838
  }
2839
+ .df-calendar-container *::-webkit-scrollbar {
2840
+ width: 2px;
2841
+ height: 2px;
2842
+ }
2843
+ .df-calendar-container *::-webkit-scrollbar-track {
2844
+ background: transparent;
2845
+ }
2846
+ .df-calendar-container *::-webkit-scrollbar-thumb {
2847
+ background: #d1d5db;
2848
+ border-radius: 1px;
2849
+ }
2850
+ .dark .df-calendar-container *::-webkit-scrollbar-thumb {
2851
+ background: #4b5563;
2852
+ }
2853
+ .df-calendar-container *::-webkit-scrollbar-thumb:hover {
2854
+ background: #9ca3af;
2855
+ }
2856
+ .df-calendar-container * {
2857
+ scrollbar-width: thin;
2858
+ scrollbar-color: #d1d5db transparent;
2859
+ }
2860
+ .dark .df-calendar-container * {
2861
+ scrollbar-color: #4b5563 transparent;
2862
+ }
2863
+ .df-calendar-container.df-drag-active, .df-calendar-container .df-drag-active {
2864
+ -moz-user-select: none;
2865
+ user-select: none;
2866
+ -webkit-user-select: none;
2867
+ }
2868
+ .df-calendar-container.df-drag-active .calendar-event, .df-calendar-container.df-drag-active .df-month-more-events, .df-calendar-container.df-drag-active .df-month-title, .df-calendar-container.df-drag-active .df-year-event-content {
2869
+ pointer-events: none;
2870
+ }
2871
+ .df-calendar-container .df-cursor-ns-resize, .df-calendar-container .df-cursor-ns-resize * {
2872
+ cursor: ns-resize;
2873
+ }
2874
+ .df-calendar-container .df-cursor-ew-resize, .df-calendar-container .df-cursor-ew-resize * {
2875
+ cursor: ew-resize;
2876
+ }
2877
+ .df-calendar-container .df-cursor-grabbing, .df-calendar-container .df-cursor-grabbing * {
2878
+ cursor: grabbing;
2879
+ }
2880
+ .df-scrollbar-hide::-webkit-scrollbar {
2881
+ display: none;
2882
+ }
2883
+ .df-scrollbar-hide {
2884
+ -ms-overflow-style: none;
2885
+ scrollbar-width: none;
2886
+ }
2909
2887
  @keyframes df-fade-out {
2910
2888
  from {
2911
2889
  opacity: 1;
@@ -2914,6 +2892,48 @@
2914
2892
  opacity: 0;
2915
2893
  }
2916
2894
  }
2895
+ @keyframes df-fade-in {
2896
+ from {
2897
+ opacity: 0;
2898
+ }
2899
+ to {
2900
+ opacity: 1;
2901
+ }
2902
+ }
2903
+ @keyframes df-event-pop-in {
2904
+ from {
2905
+ opacity: 0;
2906
+ transform: scale(0.95) translateY(-4px);
2907
+ }
2908
+ to {
2909
+ opacity: 1;
2910
+ transform: scale(1) translateY(0);
2911
+ }
2912
+ }
2913
+ @keyframes df-zoom-in {
2914
+ from {
2915
+ transform: scale(0.95);
2916
+ }
2917
+ to {
2918
+ transform: scale(1);
2919
+ }
2920
+ }
2921
+ @keyframes df-slide-up {
2922
+ from {
2923
+ transform: translateY(100%);
2924
+ }
2925
+ to {
2926
+ transform: translateY(0);
2927
+ }
2928
+ }
2929
+ @keyframes df-slide-down {
2930
+ from {
2931
+ transform: translateY(0);
2932
+ }
2933
+ to {
2934
+ transform: translateY(100%);
2935
+ }
2936
+ }
2917
2937
  @property --tw-translate-x {
2918
2938
  syntax: "*";
2919
2939
  inherits: false;