@nomideusz/svelte-calendar 1.0.1 → 1.1.1

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 (24) hide show
  1. package/dist/calendar/Calendar.svelte +37 -43
  2. package/dist/core/index.d.ts +1 -1
  3. package/dist/core/index.js +1 -1
  4. package/dist/core/locale.d.ts +5 -0
  5. package/dist/core/locale.js +9 -0
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/primitives/EmptySlot.svelte +2 -1
  9. package/dist/primitives/EventBlock.svelte +4 -2
  10. package/dist/primitives/NowIndicator.svelte +2 -1
  11. package/dist/primitives/TimeGutter.svelte +4 -2
  12. package/dist/text-fit.js +6 -1
  13. package/dist/theme/auto.js +10 -7
  14. package/dist/theme/presets.d.ts +13 -7
  15. package/dist/theme/presets.js +27 -18
  16. package/dist/views/agenda/AgendaDay.svelte +147 -115
  17. package/dist/views/agenda/AgendaWeek.svelte +106 -90
  18. package/dist/views/mobile/MobileDay.svelte +83 -63
  19. package/dist/views/mobile/MobileWeek.svelte +42 -34
  20. package/dist/views/month/MonthGrid.svelte +21 -17
  21. package/dist/views/planner/PlannerScroll.svelte +83 -89
  22. package/dist/views/planner/PlannerWeek.svelte +163 -91
  23. package/package.json +1 -1
  24. package/widget/widget.js +387 -380
package/dist/views/agenda/AgendaDay.svelte CHANGED
@@ -491,17 +491,13 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
491
491
  }
492
492
  .ag-day-head-badge {
493
493
  font-size: 10px;
494
- font-weight: 600;
494
+ font-weight: 500;
495
495
  letter-spacing: 0.08em;
496
496
  text-transform: uppercase;
497
497
  color: var(--dt-accent, #2563eb);
498
- background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent);
499
- padding: 2px 7px;
500
- border-radius: 3px;
501
498
  }
502
499
  .ag-day-head-badge--muted {
503
500
  color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
504
- background: color-mix(in srgb, var(--dt-text-2, rgba(0, 0, 0, 0.54)) 10%, transparent);
505
501
  }
506
502
  .ag-day-head-name {
507
503
  font-size: 13px;
@@ -510,7 +506,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
510
506
  }
511
507
  .ag-day-head-date {
512
508
  font-size: 11px;
513
- font-family: var(--dt-mono, monospace);
509
+ font-family: var(--dt-sans, system-ui, sans-serif);
510
+ font-variant-numeric: tabular-nums;
514
511
  color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
515
512
  line-height: 1.2;
516
513
  }
@@ -544,86 +541,92 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
544
541
  flex-wrap: wrap;
545
542
  gap: 6px;
546
543
  }
544
+ /* An all-day event is a solid band in its colour — no tint, no dot, no pill. */
547
545
  .ag-allday-chip {
548
546
  display: flex;
549
547
  align-items: center;
550
548
  gap: 5px;
551
549
  padding: 3px 10px;
552
- border-radius: 6px;
553
- background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
554
- border: 1px solid color-mix(in srgb, var(--ev-color) 20%, transparent);
550
+ border-radius: 0;
551
+ border: none;
552
+ background: var(--ev-color);
553
+ color: var(--dt-btn-text, #fff);
555
554
  cursor: pointer;
556
- transition: background 0.15s, border-color 0.15s;
557
555
  }
558
556
  .ag-allday-chip:hover,
559
557
  .ag-allday-chip:active {
560
- background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
561
- border-color: color-mix(in srgb, var(--ev-color) 35%, transparent);
558
+ filter: brightness(1.08);
562
559
  }
563
560
  .ag-allday-chip:focus-visible {
564
561
  outline: none;
565
- box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
562
+ box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #2563eb);
566
563
  }
567
564
  .ag-allday-chip--selected {
568
- border-color: var(--ev-color);
569
- background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
565
+ box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);
570
566
  }
571
567
  .ag-allday-dot {
572
- width: 6px;
573
- height: 6px;
574
- border-radius: 50%;
575
- background: var(--ev-color);
576
- flex-shrink: 0;
568
+ display: none;
577
569
  }
578
570
  .ag-allday-title {
579
571
  font: 500 0.75rem/1.2 var(--dt-sans, system-ui, sans-serif);
580
- color: var(--dt-text, rgba(0, 0, 0, 0.87));
572
+ color: inherit;
581
573
  white-space: nowrap;
582
574
  }
583
575
 
584
576
  /* ═══ Shared: event card ═══ */
577
+ /* Paper, not a tinted card: a 3px start bar in the event colour, a
578
+ hairline rule beneath, ink text. Hover is a wash, selection a ring. */
585
579
  .ag-card {
580
+ position: relative;
586
581
  display: flex;
587
582
  align-items: stretch;
588
- border-radius: 10px;
589
- background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
590
- border: 1px solid color-mix(in srgb, var(--ev-color) 10%, var(--dt-border, rgba(0, 0, 0, 0.08)));
583
+ border-radius: 0;
584
+ background: transparent;
585
+ border: none;
586
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
591
587
  overflow: hidden;
592
588
  cursor: pointer;
593
- transition: background 150ms, border-color 150ms;
589
+ transition: background 150ms, box-shadow 150ms;
590
+ }
591
+ .ag-card::before {
592
+ content: '';
593
+ position: absolute;
594
+ left: 0;
595
+ top: 0;
596
+ bottom: 0;
597
+ width: 3px;
598
+ background: var(--ev-color);
594
599
  }
595
600
  .ag-card:hover,
596
601
  .ag-card:active {
597
- background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
598
- border-color: color-mix(in srgb, var(--ev-color) 40%, transparent);
602
+ background: var(--dt-hover, rgba(0, 0, 0, 0.04));
599
603
  }
600
604
  .ag-card:focus-visible {
601
605
  outline: none;
602
606
  box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
603
607
  }
604
608
  .ag-card--selected {
605
- border-color: var(--ev-color);
606
- background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
607
- }
608
- .ag-card--cancelled {
609
- opacity: 0.5;
609
+ box-shadow: inset 0 0 0 1px var(--ev-color);
610
610
  }
611
611
  .ag-card--cancelled .ag-card-title {
612
612
  text-decoration: line-through;
613
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
613
614
  }
614
- .ag-card--tentative {
615
- opacity: 0.65;
616
- border-style: dashed;
615
+ .ag-card--cancelled::before,
616
+ .ag-card--full::before {
617
+ opacity: 0.45;
617
618
  }
618
- .ag-card--full {
619
- opacity: 0.55;
619
+ .ag-card--tentative .ag-card-title,
620
+ .ag-card--limited .ag-card-title,
621
+ .ag-card--full .ag-card-title {
622
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
620
623
  }
621
- .ag-card--limited {
622
- opacity: 0.65;
623
- border-style: dashed;
624
+ .ag-card--tentative::before,
625
+ .ag-card--limited::before {
626
+ background: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);
624
627
  }
625
628
  .ag-card-body {
626
- padding: 10px 12px;
629
+ padding: 10px 12px 10px 15px;
627
630
  display: flex;
628
631
  flex-direction: column;
629
632
  gap: 4px;
@@ -639,7 +642,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
639
642
  }
640
643
  .ag-card-title {
641
644
  font-size: 13px;
642
- font-weight: 600;
645
+ font-weight: 500;
646
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
643
647
  line-height: 1.3;
644
648
  word-break: break-word;
645
649
  flex: 1;
@@ -648,7 +652,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
648
652
  .ag-card-meta {
649
653
  font-size: 11px;
650
654
  color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
651
- font-family: var(--dt-mono, monospace);
655
+ font-family: var(--dt-sans, system-ui, sans-serif);
656
+ font-variant-numeric: tabular-nums;
652
657
  line-height: 1;
653
658
  }
654
659
  .ag-card-dur {
@@ -671,17 +676,20 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
671
676
  flex-wrap: wrap;
672
677
  }
673
678
  .ag-card-tag {
674
- font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
675
- color: var(--ev-color, var(--dt-accent));
676
- background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
679
+ font: 500 10.5px / 1 var(--dt-sans, system-ui, sans-serif);
680
+ text-transform: uppercase;
681
+ letter-spacing: 0.04em;
682
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
683
+ background: transparent;
684
+ border: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.6));
677
685
  padding: 2px 5px;
678
- border-radius: 3px;
686
+ border-radius: 0;
679
687
  white-space: nowrap;
680
688
  }
681
689
 
682
690
  /* ── Queue card variant ── */
683
691
  .ag-card--q {
684
- transition: border-color 150ms, transform 100ms;
692
+ transition: background 150ms, box-shadow 150ms;
685
693
  }
686
694
  .ag-compact-row--queue {
687
695
  margin: 0;
@@ -695,25 +703,19 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
695
703
  }
696
704
  .ag-card-eta {
697
705
  font-size: 11px;
698
- font-weight: 600;
706
+ font-weight: 500;
699
707
  letter-spacing: 0.04em;
700
- color: var(--dt-accent, #2563eb);
708
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
701
709
  flex-shrink: 0;
702
710
  white-space: nowrap;
703
711
  }
704
- .ag-card--hero {
705
- background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
706
- border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
707
- }
708
712
  .ag-card--hero .ag-card-title {
709
713
  font-size: 16px;
710
- font-weight: 700;
714
+ font-weight: 500;
711
715
  }
712
716
  .ag-card--hero .ag-card-eta {
713
717
  font-size: 11px;
714
- background: color-mix(in srgb, var(--dt-accent, #2563eb) 18%, transparent);
715
- padding: 2px 7px;
716
- border-radius: 4px;
718
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
717
719
  }
718
720
  .ag-card--hero .ag-card-body {
719
721
  padding: 14px 16px;
@@ -732,19 +734,16 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
732
734
  font-size: 10px;
733
735
  font-weight: 700;
734
736
  color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
735
- font-family: var(--dt-mono, monospace);
737
+ font-family: var(--dt-sans, system-ui, sans-serif);
738
+ font-variant-numeric: tabular-nums;
736
739
  flex-shrink: 0;
737
740
  }
738
741
  .ag-card--plan .ag-card-title {
739
742
  font-size: 14px;
740
743
  }
741
- .ag-card--first {
742
- background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
743
- border-color: color-mix(in srgb, var(--ev-color) 25%, transparent);
744
- }
745
744
  .ag-card--first .ag-card-title {
746
745
  font-size: 16px;
747
- font-weight: 700;
746
+ font-weight: 500;
748
747
  }
749
748
  /* Everything under the title aligns past the order number — the
750
749
  subtitle, location, time and tags share one left edge. */
@@ -899,9 +898,10 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
899
898
  margin-top: 2px;
900
899
  padding: 3px 8px;
901
900
  border: 1px solid var(--dt-border);
902
- border-radius: 999px;
901
+ border-radius: 0;
903
902
  background: none;
904
- font-family: var(--dt-mono);
903
+ font-family: var(--dt-sans, system-ui, sans-serif);
904
+ font-variant-numeric: tabular-nums;
905
905
  font-size: 11px;
906
906
  color: var(--dt-text-3);
907
907
  cursor: pointer;
@@ -928,32 +928,43 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
928
928
  .ag-q-clock {
929
929
  font-size: 11px;
930
930
  font-weight: 600;
931
- font-family: var(--dt-mono, monospace);
931
+ font-family: var(--dt-sans, system-ui, sans-serif);
932
+ font-variant-numeric: tabular-nums;
932
933
  color: var(--dt-accent, #2563eb);
933
934
  margin-left: 4px;
934
935
  }
935
936
  .ag-q-now {
937
+ position: relative;
936
938
  display: block;
937
939
  width: 100%;
938
- padding: 8px 10px;
940
+ padding: 8px 10px 8px 13px;
939
941
  margin-bottom: 8px;
940
- border-radius: 8px;
941
- background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
942
- border: 1px solid color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
942
+ border-radius: 0;
943
+ background: transparent;
944
+ border: none;
945
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
943
946
  cursor: pointer;
944
- transition: background 150ms, border-color 150ms;
947
+ transition: background 150ms, box-shadow 150ms;
948
+ }
949
+ .ag-q-now::before {
950
+ content: '';
951
+ position: absolute;
952
+ left: 0;
953
+ top: 0;
954
+ bottom: 0;
955
+ width: 3px;
956
+ background: var(--ev-color, var(--dt-accent));
945
957
  }
946
958
  .ag-q-now:hover,
947
959
  .ag-q-now:active {
948
- background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
949
- border-color: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 35%, transparent);
960
+ background: var(--dt-hover, rgba(0, 0, 0, 0.04));
950
961
  }
951
962
  .ag-q-now:focus-visible {
952
963
  outline: none;
953
964
  box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
954
965
  }
955
966
  .ag-q-now--selected {
956
- border-color: var(--ev-color, var(--dt-accent));
967
+ box-shadow: inset 0 0 0 1px var(--ev-color, var(--dt-accent));
957
968
  }
958
969
  .ag-q-now-dot {
959
970
  width: 6px;
@@ -977,7 +988,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
977
988
  }
978
989
  .ag-q-now-title {
979
990
  font-size: 12px;
980
- font-weight: 600;
991
+ font-weight: 500;
981
992
  line-height: 1.25;
982
993
  color: var(--dt-text, rgba(0, 0, 0, 0.87));
983
994
  display: -webkit-box;
@@ -990,21 +1001,22 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
990
1001
  }
991
1002
  .ag-q-now-time {
992
1003
  font-size: 11px;
993
- font-family: var(--dt-mono, monospace);
1004
+ font-family: var(--dt-sans, system-ui, sans-serif);
1005
+ font-variant-numeric: tabular-nums;
994
1006
  color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
995
1007
  margin-bottom: 6px;
996
1008
  }
997
1009
  .ag-q-now-track {
998
1010
  height: 2px;
999
1011
  background: var(--dt-border, rgba(0, 0, 0, 0.08));
1000
- border-radius: 1px;
1012
+ border-radius: 0;
1001
1013
  overflow: hidden;
1002
1014
  }
1003
1015
  .ag-q-now-fill {
1004
1016
  height: 100%;
1005
1017
  width: 100%;
1006
1018
  background: var(--ev-color, var(--dt-accent, #2563eb));
1007
- border-radius: 1px;
1019
+ border-radius: 0;
1008
1020
  transform-origin: left;
1009
1021
  transition: transform 1s linear;
1010
1022
  }
@@ -1049,7 +1061,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
1049
1061
  .ag-q-done-item:focus-visible {
1050
1062
  outline: none;
1051
1063
  box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
1052
- border-radius: 4px;
1064
+ border-radius: 0;
1053
1065
  }
1054
1066
  .ag-q-done-check {
1055
1067
  font-size: 11px;
@@ -1096,15 +1108,18 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
1096
1108
  .ag-log-row--selected .ag-log-title {
1097
1109
  color: var(--dt-text, rgba(0, 0, 0, 0.87));
1098
1110
  }
1111
+ .ag-log-row:hover,
1112
+ .ag-log-row:active {
1113
+ background: var(--dt-hover, rgba(0, 0, 0, 0.04));
1114
+ }
1099
1115
  .ag-log-row:focus-visible {
1100
1116
  outline: none;
1101
1117
  box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
1102
- border-radius: 6px;
1118
+ border-radius: 0;
1103
1119
  }
1104
1120
  .ag-log-row--selected {
1105
- background: color-mix(in srgb, var(--ev-color) 6%, transparent);
1106
- border-radius: 6px;
1107
- box-shadow: 0 0 0 8px color-mix(in srgb, var(--ev-color) 6%, transparent);
1121
+ box-shadow: inset 0 0 0 1px var(--ev-color);
1122
+ border-radius: 0;
1108
1123
  }
1109
1124
  .ag-log-check {
1110
1125
  font-size: 10px;
@@ -1113,17 +1128,19 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
1113
1128
  }
1114
1129
  .ag-log-time {
1115
1130
  font-size: 11px;
1116
- font-family: var(--dt-mono, monospace);
1131
+ font-family: var(--dt-sans, system-ui, sans-serif);
1132
+ font-variant-numeric: tabular-nums;
1117
1133
  color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1118
1134
  width: 64px;
1119
1135
  flex-shrink: 0;
1120
1136
  }
1137
+ /* The colour dot of a past row becomes its 3px start bar (dimmed: it is over). */
1121
1138
  .ag-log-dot {
1122
- width: 5px;
1123
- height: 5px;
1124
- border-radius: 50%;
1139
+ align-self: stretch;
1140
+ width: 3px;
1141
+ border-radius: 0;
1125
1142
  flex-shrink: 0;
1126
- opacity: 0.6;
1143
+ opacity: 0.45;
1127
1144
  }
1128
1145
  .ag-log-title {
1129
1146
  font-size: 13px;
@@ -1141,7 +1158,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
1141
1158
  }
1142
1159
  .ag-log-dur {
1143
1160
  font-size: 11px;
1144
- font-family: var(--dt-mono, monospace);
1161
+ font-family: var(--dt-sans, system-ui, sans-serif);
1162
+ font-variant-numeric: tabular-nums;
1145
1163
  color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1146
1164
  flex-shrink: 0;
1147
1165
  }
@@ -1154,42 +1172,46 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
1154
1172
  scrollbar-width: none;
1155
1173
  }
1156
1174
  .ag-compact-list::-webkit-scrollbar { display: none; }
1175
+ /* A compact row: 3px start bar, hairline beneath, ink text. */
1157
1176
  .ag-compact-row {
1177
+ position: relative;
1158
1178
  display: flex;
1159
1179
  align-items: baseline;
1160
1180
  gap: 8px;
1161
- padding: 4px 0;
1181
+ padding: 4px 0 4px 11px;
1182
+ border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
1162
1183
  cursor: pointer;
1163
1184
  min-width: 0;
1164
1185
  width: 100%;
1165
1186
  }
1187
+ .ag-compact-row::before {
1188
+ content: '';
1189
+ position: absolute;
1190
+ left: 0;
1191
+ top: 0;
1192
+ bottom: 0;
1193
+ width: 3px;
1194
+ background: var(--ev-color, var(--dt-accent));
1195
+ }
1166
1196
  .ag-compact-row--selected {
1167
- background: color-mix(in srgb, var(--ev-color) 10%, transparent);
1168
- border-radius: 4px;
1169
- /* The highlight bleeds into the gutter via a spread shadow — zero
1170
- layout impact, so nothing shifts or clips even when the host
1171
- reduces the gutters below the bleed width. */
1172
- box-shadow: 0 0 0 6px color-mix(in srgb, var(--ev-color) 10%, transparent);
1197
+ box-shadow: inset 0 0 0 1px var(--ev-color);
1173
1198
  }
1174
1199
  .ag-compact-row:hover .ag-compact-row-title,
1175
1200
  .ag-compact-row:active .ag-compact-row-title { color: var(--dt-text); }
1201
+ .ag-compact-row:hover,
1176
1202
  .ag-compact-row:active {
1177
- background: color-mix(in srgb, var(--ev-color) 8%, transparent);
1178
- border-radius: 4px;
1203
+ background: var(--dt-hover, rgba(0, 0, 0, 0.04));
1179
1204
  }
1180
1205
  .ag-compact-row:focus-visible {
1181
1206
  outline: none;
1182
1207
  box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
1183
- border-radius: 4px;
1184
1208
  }
1185
- /* The time label doubles as the class-color signal (replaces the old
1186
- dot): the event color mixed toward the text color, so it stays
1187
- legible on any palette and costs zero horizontal space. */
1188
1209
  .ag-compact-row-time {
1189
1210
  font-size: 11px;
1190
- font-family: var(--dt-mono, monospace);
1191
- font-weight: 500;
1192
- color: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 60%, var(--dt-text, rgba(0, 0, 0, 0.87)));
1211
+ font-family: var(--dt-sans, system-ui, sans-serif);
1212
+ font-variant-numeric: tabular-nums;
1213
+ font-weight: 400;
1214
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1193
1215
  min-width: 64px;
1194
1216
  flex-shrink: 0;
1195
1217
  line-height: 1.4;
@@ -1220,7 +1242,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
1220
1242
  .ag-compact-row-title {
1221
1243
  font-size: 12px;
1222
1244
  font-weight: 500;
1223
- color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 82%, transparent);
1245
+ color: var(--dt-text, rgba(0, 0, 0, 0.87));
1224
1246
  flex: 1;
1225
1247
  /* The title is the row's identity — never let subtitle/tags/duration
1226
1248
  squeeze it out on narrow screens (flex: 1 alone resolves to 0px). */
@@ -1234,7 +1256,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
1234
1256
  }
1235
1257
  .ag-compact-row-dur {
1236
1258
  font-size: 10px;
1237
- font-family: var(--dt-mono, monospace);
1259
+ font-family: var(--dt-sans, system-ui, sans-serif);
1260
+ font-variant-numeric: tabular-nums;
1238
1261
  color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
1239
1262
  flex-shrink: 0;
1240
1263
  line-height: 1.4;
@@ -1251,20 +1274,29 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
1251
1274
  line-height: 1.4;
1252
1275
  }
1253
1276
  .ag-compact-row-tag {
1254
- font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
1255
- color: var(--ev-color, var(--dt-accent));
1256
- background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 12%, transparent);
1277
+ font: 500 10.5px / 1 var(--dt-sans, system-ui, sans-serif);
1278
+ text-transform: uppercase;
1279
+ letter-spacing: 0.04em;
1280
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1281
+ background: transparent;
1282
+ border: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.6));
1257
1283
  padding: 1px 4px;
1258
- border-radius: 3px;
1284
+ border-radius: 0;
1259
1285
  white-space: nowrap;
1260
1286
  flex-shrink: 1;
1261
1287
  min-width: 2.5em;
1262
1288
  overflow: hidden;
1263
1289
  text-overflow: ellipsis;
1264
1290
  }
1265
- .ag-compact-row--cancelled { opacity: 0.5; }
1266
- .ag-compact-row--cancelled .ag-compact-row-title { text-decoration: line-through; }
1267
- .ag-compact-row--tentative { opacity: 0.65; }
1291
+ .ag-compact-row--cancelled .ag-compact-row-title {
1292
+ text-decoration: line-through;
1293
+ color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
1294
+ }
1295
+ .ag-compact-row--cancelled::before { opacity: 0.45; }
1296
+ .ag-compact-row--tentative .ag-compact-row-title { color: var(--dt-text-2, rgba(0, 0, 0, 0.54)); }
1297
+ .ag-compact-row--tentative::before {
1298
+ background: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);
1299
+ }
1268
1300
  /* Mobile: larger touch targets for compact rows */
1269
1301
  .ag--mobile .ag-compact-row { padding: 8px 0; }
1270
1302
  .ag--mobile .ag-compact-row-title { font-size: 15px; }