@nomideusz/svelte-calendar 1.3.0 → 1.4.0

package/dist/theme/auto.js

@@ -39,6 +39,21 @@ function luminance([r, g, b]) {
     };
     return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
 }
+const DARK_TEXT = [15, 15, 15]; // #0f0f0f, the ink
+function contrast(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+/**
+ * Text colour for an accent fill (all-day band, now plate): white when it
+ * reaches 4.5:1 on the accent, else whichever of white / dark ink contrasts more.
+ */
+export function accentTextFor(accent) {
+    const white = contrast(accent, [255, 255, 255]);
+    if (white >= 4.5)
+        return '#ffffff';
+    return contrast(accent, DARK_TEXT) > white ? '#0f0f0f' : '#ffffff';
+}
 function rgbToHsl(r, g, b) {
     r /= 255;
     g /= 255;
@@ -497,9 +512,7 @@ export function probeHostTheme(el, options = {}) {
         ? Math.max(aL, 0.45) // bright enough on dark
         : Math.min(aL, 0.48); // dark enough on light
     const accentAdj = hslToRgb(aH, Math.max(aS, 0.5), accentL);
-    // btn-text: white for dark accents, dark for light accents
-    const accentLum = luminance(accentAdj);
-    const btnText = accentLum < 0.4 ? '#ffffff' : '#1a1a2e';
+    const btnText = accentTextFor(accentAdj);
     // ── Scrollbar ──
     const scrollAlpha = isDark ? 0.12 : 0.10;
     // ── Success (green, theme-adapted) ──

package/dist/views/agenda/AgendaDay.svelte

@@ -184,7 +184,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class:ag-compact-row--selected={selectedEventId === ev.id}
 							class:ag-compact-row--cancelled={ev.status === 'cancelled'}
 							class:ag-compact-row--tentative={ev.status === 'tentative'}
-							style:--ev-color={ev.color || 'var(--dt-accent)'}
+							style:--ev-color={ev.color || 'var(--dt-event, var(--dt-accent))'}
 							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
@@ -221,7 +221,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 								type="button"
 								class="ag-q-now"
 								class:ag-q-now--selected={selectedEventId === ev.id}
-								style:--ev-color={ev.color || 'var(--dt-accent)'}
+								style:--ev-color={ev.color || 'var(--dt-event, var(--dt-accent))'}
 								aria-label="{ev.title}, {L.happeningNow}, {L.percentComplete(Math.round(prog(ev) * 100))}"
 								onclick={() => handleClick(ev)}
 								onpointerenter={() => oneventhover?.(ev)}
@@ -252,7 +252,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 									aria-label="{ev.title}, {L.completed}, {fmt(ev.start)}"
 									onclick={() => handleClick(ev)}
 								>
-									<span class="ag-q-done-check">✓</span>
+									<span class="ag-q-done-check" aria-hidden="true">✓</span>
 									<span class="ag-q-done-title">{ev.title}</span>
 								</button>
 							{/each}
@@ -279,7 +279,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 									type="button"
 									class="ag-compact-row ag-compact-row--queue"
 									class:ag-compact-row--selected={selectedEventId === ev.id}
-									style:--ev-color={ev.color || 'var(--dt-accent)'}
+									style:--ev-color={ev.color || 'var(--dt-event, var(--dt-accent))'}
 									aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 									onclick={() => handleClick(ev)}
 									onpointerenter={() => oneventhover?.(ev)}
@@ -300,7 +300,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 								class="ag-card ag-card--q"
 								class:ag-card--hero={i === 0}
 								class:ag-card--selected={selectedEventId === ev.id}
-								style:--ev-color={ev.color || 'var(--dt-accent)'}
+								style:--ev-color={ev.color || 'var(--dt-event, var(--dt-accent))'}
 								aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 								onclick={() => handleClick(ev)}
 								onpointerenter={() => oneventhover?.(ev)}
@@ -348,14 +348,14 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class="ag-log-row"
 							class:ag-log-row--selected={selectedEventId === ev.id}
 							class:ag-log-row--cancelled={ev.status === 'cancelled'}
-							style:--ev-color={ev.color || 'var(--dt-accent)'}
+							style:--ev-color={ev.color || 'var(--dt-event, var(--dt-accent))'}
 							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
-							<span class="ag-log-check">✓</span>
+							<span class="ag-log-check" aria-hidden="true">✓</span>
 							<span class="ag-log-time">{fmt(ev.start)}</span>
-							<span class="ag-log-dot" style:background={ev.color || 'var(--dt-accent)'}></span>
+							<span class="ag-log-dot" style:background={ev.color || 'var(--dt-event, var(--dt-accent))'}></span>
 							<span class="ag-log-title">{ev.title}</span>
 							<span class="ag-log-dur">{duration(ev)}</span>
 						</button>
@@ -381,7 +381,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class:ag-card--tentative={ev.status === 'tentative'}
 							class:ag-card--full={ev.status === 'full'}
 							class:ag-card--limited={ev.status === 'limited'}
-							style:--ev-color={ev.color || 'var(--dt-accent)'}
+							style:--ev-color={ev.color || 'var(--dt-event, var(--dt-accent))'}
 							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}, {duration(ev)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
@@ -431,7 +431,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		width: 100%;
 		min-width: 0;
 		box-sizing: border-box;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		font-family: var(--dt-sans, system-ui, sans-serif);
 	}
 
@@ -463,8 +463,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 			135deg,
 			transparent,
 			transparent 6px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 6px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 12px
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 6px,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 12px
 		);
 	}
 
@@ -498,7 +498,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		font-stretch: 90%;
 		letter-spacing: -0.02em;
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		margin-inline-end: 4px;
 	}
 	.ag-day-head-badge,
@@ -506,19 +506,19 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag-day-head--today .ag-day-head-num,
 	.ag-day-head--today .ag-day-head-name,
 	.ag-day-head-badge {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 	.ag-day-head .ag-day-head-badge--muted {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag-day-head-date {
 		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag--auto .ag-body { overflow-y: visible; min-height: auto; }
 	.ag-body::-webkit-scrollbar {
@@ -535,13 +535,13 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		align-items: center;
 		gap: 8px;
 		padding: 6px 16px;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 	.ag-allday-label {
 		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
@@ -568,7 +568,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-allday-chip:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 	.ag-allday-chip--selected {
 		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff);
@@ -592,7 +592,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		border-radius: 0;
 		background: transparent;
 		border: none;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		overflow: hidden;
 		cursor: pointer;
 		transition: background 150ms, box-shadow 150ms;
@@ -608,18 +608,18 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-card:hover,
 	.ag-card:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-card:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 	.ag-card--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 	.ag-card--cancelled .ag-card-title {
 		text-decoration: line-through;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.ag-card--cancelled::before,
 	.ag-card--full::before {
@@ -628,7 +628,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-card--tentative .ag-card-title,
 	.ag-card--limited .ag-card-title,
 	.ag-card--full .ag-card-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.ag-card--tentative::before,
 	.ag-card--limited::before {
@@ -653,14 +653,14 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-card-title {
 		font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		word-break: break-word;
 		min-width: 0;
 	}
 	.ag-card-meta {
 		font: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.ag-card-dur,
 	.ag-card-eta,
@@ -668,7 +668,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-card-loc,
 	.ag-card-tag {
 		font: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag-card-dur {
 		margin-left: 8px;
@@ -698,7 +698,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	/* The next one up: its countdown in ink. Size stays on the scale — the
 	   happening-now item is the largest thing in the queue. */
 	.ag-card--hero .ag-card-eta {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 
 	/* ── Plan card variant ── */
@@ -709,7 +709,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-card-order {
 		font: 400 14px/1.25 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		min-width: 18px;
 		flex-shrink: 0;
 	}
@@ -775,7 +775,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		font: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		margin-bottom: 8px;
 		padding: 0 12px;
 	}
@@ -785,13 +785,13 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		justify-content: center;
 		flex: 1;
 		font-size: 14px;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 
 	/* ── NOW column (includes Done above) ── */
 	.ag-q-status {
 		padding: 0 10px 0 14px;
-		border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		display: flex;
 		flex-direction: column;
 		overflow-y: auto;
@@ -810,33 +810,33 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		font-family: var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		font-size: 12.5px;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		cursor: pointer;
 	}
 	.ag-q-done-toggle:hover,
 	.ag-q-done-toggle:active {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
-		border-color: var(--dt-border-day, rgba(0, 0, 0, 0.6));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
+		border-color: var(--dt-border-day, rgba(15, 15, 15, 0.6));
 	}
 	.ag-q-done-toggle:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 	.ag-q-now-sub {
 		font: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		margin-bottom: 4px;
 	}
 	.ag-q-done-section {
 		margin-top: 12px;
 		padding-top: 10px;
-		border-top: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-top: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 	.ag-q-clock {
 		font: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0;
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 		margin-left: 4px;
 	}
 	/* The one happening now is the most prominent thing on the day: the
@@ -849,9 +849,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		padding: 12px 12px 12px 15px;
 		margin-bottom: 8px;
 		border-radius: 0;
-		background: var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent));
+		background: var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));
 		border: none;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		cursor: pointer;
 		transition: background 150ms, box-shadow 150ms;
 	}
@@ -867,12 +867,12 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-q-now:hover,
 	.ag-q-now:active {
 		background:
-			linear-gradient(var(--dt-hover, rgba(0, 0, 0, 0.04)), var(--dt-hover, rgba(0, 0, 0, 0.04))),
-			var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent));
+			linear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),
+			var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));
 	}
 	.ag-q-now:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 	.ag-q-now--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color, var(--dt-accent));
@@ -881,7 +881,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		width: 8px;
 		height: 8px;
 		border-radius: 50%;
-		background: var(--ev-color, var(--dt-accent, #2563eb));
+		background: var(--ev-color, var(--dt-accent, #1d4fd7));
 		margin-bottom: 8px;
 		animation: ag-pulse 2.5s ease-in-out infinite;
 	}
@@ -899,7 +899,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-q-now-title {
 		font: 500 20px/1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 2;
@@ -911,19 +911,19 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-q-now-time {
 		font: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		margin-bottom: 10px;
 	}
 	.ag-q-now-track {
 		height: 2px;
-		background: var(--dt-border, rgba(0, 0, 0, 0.08));
+		background: var(--dt-border, rgba(15, 15, 15, 0.08));
 		border-radius: 0;
 		overflow: hidden;
 	}
 	.ag-q-now-fill {
 		height: 100%;
 		width: 100%;
-		background: var(--ev-color, var(--dt-accent, #2563eb));
+		background: var(--ev-color, var(--dt-accent, #1d4fd7));
 		border-radius: 0;
 		transform-origin: left;
 		transition: transform 1s linear;
@@ -934,7 +934,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-q-free-label {
 		font: 400 15px/1.25 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		margin-bottom: 2px;
 	}
 
@@ -963,22 +963,22 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-q-done-item:hover .ag-q-done-title,
 	.ag-q-done-item:active .ag-q-done-title,
 	.ag-q-done-item--selected .ag-q-done-title {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.ag-q-done-item:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 		border-radius: 0;
 	}
 	.ag-q-done-check {
 		font-size: 12.5px;
-		color: var(--dt-success, rgba(22, 163, 74, 0.7));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		flex-shrink: 0;
 	}
 	/* Finished: quieter ink, no strike (strikethrough means cancelled). */
 	.ag-q-done-title {
 		font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1002,7 +1002,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		gap: 10px;
 		padding: 8px 0;
 		width: 100%;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		cursor: pointer;
 	}
 	.ag-log-row:last-child {
@@ -1011,15 +1011,15 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-log-row:hover .ag-log-title,
 	.ag-log-row:active .ag-log-title,
 	.ag-log-row--selected .ag-log-title {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.ag-log-row:hover,
 	.ag-log-row:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-log-row:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 		border-radius: 0;
 	}
 	.ag-log-row--selected {
@@ -1028,13 +1028,13 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-log-check {
 		font-size: 12.5px;
-		color: var(--dt-success, rgba(22, 163, 74, 0.7));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		flex-shrink: 0;
 	}
 	.ag-log-time {
 		font: 400 14px/1.25 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		min-width: 4.6em;
 		flex-shrink: 0;
 	}
@@ -1050,7 +1050,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	   Strikethrough is kept for cancelled events only. */
 	.ag-log-title {
 		font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		flex: 0 1 auto;
 		min-width: 0;
 		white-space: nowrap;
@@ -1065,7 +1065,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-log-dur {
 		font: 400 12.5px/1.25 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		flex-shrink: 0;
 	}
 
@@ -1084,7 +1084,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		align-items: baseline;
 		gap: 10px;
 		padding: 5px 0 5px 11px;
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.3));
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		cursor: pointer;
 		min-width: 0;
 		width: 100%;
@@ -1105,16 +1105,16 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-row:active .ag-compact-row-title { color: var(--dt-text); }
 	.ag-compact-row:hover,
 	.ag-compact-row:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-compact-row:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 	.ag-compact-row-time {
 		font: 400 14px/1.3 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		min-width: 4.6em;
 		flex-shrink: 0;
 		white-space: nowrap;
@@ -1147,7 +1147,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-compact-row-title {
 		font: 500 15px/1.3 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		flex: 0 1 auto;
 		/* The title is the row's identity — never let subtitle/tags/duration
 		   squeeze it out on narrow screens (min-width: 0 resolves to 0px). */
@@ -1162,7 +1162,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-row-sub,
 	.ag-compact-row-tag {
 		font: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		white-space: nowrap;
 	}
 	.ag-compact-row-dur {
@@ -1184,10 +1184,10 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-compact-row--cancelled .ag-compact-row-title {
 		text-decoration: line-through;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.ag-compact-row--cancelled::before { opacity: 0.45; }
-	.ag-compact-row--tentative .ag-compact-row-title { color: var(--dt-text-2, rgba(0, 0, 0, 0.54)); }
+	.ag-compact-row--tentative .ag-compact-row-title { color: var(--dt-text-2, rgba(15, 15, 15, 0.54)); }
 	.ag-compact-row--tentative::before {
 		background: repeating-linear-gradient(180deg, var(--ev-color) 0 4px, transparent 4px 7px);
 	}