@nomideusz/svelte-calendar 1.3.0 → 1.4.1

package/dist/views/agenda/AgendaWeek.svelte

@@ -9,8 +9,8 @@
 * Answers: "What's coming up and when do I need to be ready?"
 */
 import { createClock } from "../../core/clock.svelte.js";
-import { sod, addDaysMs, startOfWeek, dayNum, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
-import { weekdayLong, monthLong } from "../../core/locale.js";
+import { sod, addDaysMs, startOfWeek, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
+import { weekdayLong, monthLong, fmtDayNum } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from "../shared/format.js";
@@ -165,9 +165,10 @@ const weekDays = $derived.by(() => {
 			ms,
 			dayName: weekdayLong(ms, locale),
 			month: monthLong(ms, locale),
-			num: dayNum(ms),
+			num: fmtDayNum(ms, locale),
 			tier,
-			isToday: ms === todayMs,
+			// A dateless weekly template (showDates=false) has no today to mark.
+			isToday: showDates && ms === todayMs,
 			events: dayEvts,
 			allDayEvents: allDayEvts,
 			timedEvents: timedEvts,
@@ -199,7 +200,7 @@ const weekDays = $derived.by(() => {
 		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)}"
 		class:ag-card--drag={dragId === String(ev.id)}
 		draggable={canDrag(ev)}
@@ -256,7 +257,7 @@ const weekDays = $derived.by(() => {
 		class:ag-compact--tentative={ev.status === 'tentative'}
 		class:ag-compact--full={ev.status === 'full'}
 		class:ag-compact--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)}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
 		onclick={() => handleClick(ev)}
 		onpointerenter={() => oneventhover?.(ev)}
@@ -387,7 +388,7 @@ const weekDays = $derived.by(() => {
 						{#if showDates}<span class="ag-wday-num">{day.num}</span>{/if}
 						{#if day.isToday}
 							<span class="ag-wday-badge">{L.today}</span>
-						{:else if day.tier === 'tomorrow'}
+						{:else if showDates && day.tier === 'tomorrow'}
 							<span class="ag-wday-badge ag-wday-badge--muted">{L.tomorrow}</span>
 						{/if}
 						<span class="ag-wday-name">{day.dayName}</span>
@@ -529,7 +530,7 @@ const weekDays = $derived.by(() => {
 		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);
 	}
 	.ag--auto {
@@ -606,7 +607,7 @@ const weekDays = $derived.by(() => {
 	}
 	.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);
@@ -639,7 +640,7 @@ const weekDays = $derived.by(() => {
 		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;
@@ -655,18 +656,18 @@ const weekDays = $derived.by(() => {
 	}
 	.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 {
@@ -675,7 +676,7 @@ const weekDays = $derived.by(() => {
 	.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 {
@@ -694,7 +695,7 @@ const weekDays = $derived.by(() => {
 	}
 	.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;
 		flex: 1;
 		min-width: 0;
@@ -712,7 +713,7 @@ const weekDays = $derived.by(() => {
 		row-gap: 2px;
 		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,
@@ -720,7 +721,7 @@ const weekDays = $derived.by(() => {
 	.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-tags {
 		display: flex;
@@ -733,7 +734,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-card-progress {
 		height: 3px;
-		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;
 		margin-top: 2px;
@@ -754,17 +755,17 @@ const weekDays = $derived.by(() => {
 
 	/* ═══ Week day groups ═══ */
 	.ag-wday {
-		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-wday:last-child {
 		border-bottom: none;
 	}
 	.ag-wday--today {
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 2%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #1d4fd7) 2%, transparent);
 	}
 	/* Past days: quieter ink from the text tokens, no subtree opacity */
 	.ag-wday--past .ag-wday-num {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag-wday--past .ag-wday-head {
 		padding: 8px 20px 2px;
@@ -780,8 +781,8 @@ const weekDays = $derived.by(() => {
 			135deg,
 			transparent,
 			transparent 4px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent) 4px,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent) 8px
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 8%, transparent) 4px,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 8%, transparent) 8px
 		);
 		pointer-events: none;
 	}
@@ -795,9 +796,9 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-wday-head--click:focus-visible,
 	.ag-wday-empty--click:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
+		outline: 2px solid var(--dt-text, #0f0f0f);
 		outline-offset: -2px;
-		border-radius: 4px;
+		border-radius: 0;
 	}
 	.ag-wday-head {
 		display: flex;
@@ -806,7 +807,7 @@ const weekDays = $derived.by(() => {
 		padding: 8px 20px;
 		position: sticky;
 		top: 0;
-		background: var(--dt-bg, #fff);
+		background: var(--dt-bg, #efebe9);
 		z-index: 1;
 		/* Own compositor layer: without it, fast (async) scrolling repaints
 		   the pinned header a frame late and a gap flashes above it. */
@@ -825,7 +826,7 @@ const weekDays = $derived.by(() => {
 		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-wday-badge,
@@ -833,25 +834,25 @@ const weekDays = $derived.by(() => {
 		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-wday--today .ag-wday-num,
 	.ag-wday--today .ag-wday-name,
 	.ag-wday-badge {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 	.ag-wday .ag-wday-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-wday-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-wday-empty {
 		padding: 2px 20px 8px;
 		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));
 	}
 
 	/* Expanded day */
@@ -871,7 +872,7 @@ const weekDays = $derived.by(() => {
 		font: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 	.ag-wslot-cards {
 		display: flex;
@@ -885,7 +886,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-wday-past-line {
 		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));
 		padding: 6px 0 0;
 	}
 	.ag-wday-past-line--summary {
@@ -903,12 +904,12 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-past-toggle:hover,
 	.ag-past-toggle:active {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.ag-past-toggle:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
-		border-radius: 4px;
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
+		border-radius: 0;
 	}
 	.ag-past-chevron {
 		transition: transform 120ms;
@@ -923,7 +924,7 @@ const weekDays = $derived.by(() => {
 	   is kept for cancelled only, so "done" and "called off" never read alike. */
 	.ag-compact--done .ag-compact-title,
 	.ag-compact--done .ag-compact-time {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 	.ag-compact--done::before {
 		opacity: 0.45;
@@ -940,7 +941,7 @@ const weekDays = $derived.by(() => {
 		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%;
@@ -963,16 +964,16 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-compact:hover,
 	.ag-compact:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-compact: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-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.4em;
 		flex-shrink: 0;
 		white-space: nowrap;
@@ -1007,7 +1008,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-compact-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). */
@@ -1022,7 +1023,7 @@ const weekDays = $derived.by(() => {
 	.ag-compact-loc,
 	.ag-compact-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-dur {
@@ -1045,7 +1046,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-compact--cancelled .ag-compact-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--cancelled::before,
 	.ag-compact--full::before {
@@ -1054,7 +1055,7 @@ const weekDays = $derived.by(() => {
 	.ag-compact--tentative .ag-compact-title,
 	.ag-compact--limited .ag-compact-title,
 	.ag-compact--full .ag-compact-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.ag-compact--tentative::before,
 	.ag-compact--limited::before {
@@ -1069,18 +1070,18 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-compact-more {
 		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));
 		padding: 4px 0 0 11px;
 		cursor: pointer;
 		display: block;
 	}
 	.ag-compact-more:hover,
 	.ag-compact-more:active {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	.ag-compact-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 		border-radius: 0;
 	}
 
@@ -1089,8 +1090,8 @@ const weekDays = $derived.by(() => {
 		opacity: 0.4;
 	}
 	.ag-wday--drop {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
-		box-shadow: inset 0 0 0 1px var(--dt-accent, #2563eb);
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		box-shadow: inset 0 0 0 1px var(--dt-accent, #1d4fd7);
 	}
 
 	/* ═══ Timetable columns (desktop) ═══ */
@@ -1101,7 +1102,7 @@ const weekDays = $derived.by(() => {
 	/* Columns stretch to the tallest day, so the separator runs full height */
 	.ag--cols .ag-wday {
 		border-bottom: none;
-		border-inline-start: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-inline-start: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		min-width: 0;
 	}
 	.ag--cols .ag-wday:first-child {

package/dist/views/mobile/MobileDay.svelte

@@ -581,7 +581,7 @@ $effect(() => {
 						style:height="{p.height}px"
 						style:left={p.left}
 						style:width={p.width}
-						style:--ev-color={p.ev.color ?? 'var(--dt-accent)'}
+						style:--ev-color={p.ev.color ?? 'var(--dt-event, var(--dt-accent))'}
 						onclick={(e) => { e.stopPropagation(); if (suppressEventClick) { suppressEventClick = false; return; } oneventclick?.(p.ev); }}
 						onpointerenter={() => oneventhover?.(p.ev)}
 						aria-label="{p.ev.title}{statusText(p.ev)}, {fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}{p.isCurrent ? `, ${L.inProgress}` : ''}{p.isNext ? `, ${L.upNext}` : ''}"
@@ -671,7 +671,7 @@ $effect(() => {
 		user-select: none;
 		font-variant-numeric: tabular-nums;
 		overflow: hidden;
-		background: var(--dt-bg, #fff);
+		background: var(--dt-bg, #efebe9);
 		-webkit-tap-highlight-color: transparent;
 		touch-action: pan-y pinch-zoom;
 	}
@@ -699,7 +699,7 @@ $effect(() => {
 		padding: 4px 8px;
 		overflow-x: auto;
 		scrollbar-width: none;
-		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));
 		flex-shrink: 0;
 		align-items: center;
 	}
@@ -745,7 +745,7 @@ $effect(() => {
 	}
 	.mb-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);
 	}
 
 	/* The band is the colour; no dot. */
@@ -771,7 +771,7 @@ $effect(() => {
 
 	.mb-allday-more {
 		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		white-space: nowrap;
 		flex-shrink: 0;
 		padding: 0 6px;
@@ -793,7 +793,7 @@ $effect(() => {
 	}
 	.mb-allday-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	/* ─── Grid ───────────────────────────────────────── */
@@ -804,14 +804,14 @@ $effect(() => {
 		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;
 		position: relative;
 		padding-top: 8px;
 	}
 	.mb--auto .mb-grid { overflow-y: visible; }
 	.mb-grid:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: inset 0 0 0 2px var(--dt-text, #0f0f0f);
 	}
 
 	.mb-grid-inner {
@@ -831,7 +831,7 @@ $effect(() => {
 	}
 	.mb-empty-text {
 		font: 500 13px/1.4 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 
 	/* ─── Hour row ───────────────────────────────────── */
@@ -852,7 +852,7 @@ $effect(() => {
 		vertical-align: top;
 		margin-left: 1px;
 		letter-spacing: 0;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mb-hour-label {
 		width: 40px;
@@ -864,7 +864,7 @@ $effect(() => {
 		font-stretch: 90%;
 		font-variant-numeric: tabular-nums;
 		letter-spacing: -0.02em;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		text-align: right;
 		padding-right: 8px;
 		padding-top: 0;
@@ -875,14 +875,14 @@ $effect(() => {
 	.mb-hour-line {
 		flex: 1;
 		height: 1px;
-		background: var(--dt-border, rgba(0, 0, 0, 0.08));
+		background: var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 
 	.mb-hour--blocked {
 		background: repeating-linear-gradient(
 			-45deg,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent),
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent) 4px,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 3%, transparent) 4px,
 			transparent 4px,
 			transparent 8px
 		);
@@ -894,7 +894,7 @@ $effect(() => {
 		top: 50%;
 		transform: translateY(-50%);
 		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 	}
@@ -932,13 +932,13 @@ $effect(() => {
 		height: 8px;
 		margin-top: -4px;
 		border-radius: 50%;
-		background: var(--dt-accent, #2563eb);
+		background: var(--dt-accent, #1d4fd7);
 	}
 	.mb-now-label span {
 		display: inline-block;
 		padding: 2px 3px;
 		border-radius: 0;
-		background: var(--dt-accent, #2563eb);
+		background: var(--dt-accent, #1d4fd7);
 		font: 500 11px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: var(--dt-btn-text, #ffffff);
@@ -947,7 +947,7 @@ $effect(() => {
 	.mb-now-line {
 		flex: 1;
 		height: 0;
-		border-top: 2px solid var(--dt-accent, #2563eb);
+		border-top: 2px solid var(--dt-accent, #1d4fd7);
 		box-shadow: none;
 		position: relative;
 		z-index: 4;
@@ -961,7 +961,7 @@ $effect(() => {
 		cursor: pointer;
 		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));
 		box-sizing: border-box;
 		display: flex;
 		align-items: stretch;
@@ -974,7 +974,7 @@ $effect(() => {
 	}
 	.mb-event:hover,
 	.mb-event:active {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	/* Short blocks keep their duration-proportional height, but get a 44px
 	   transparent hit-slop so taps still land. */
@@ -1001,29 +1001,29 @@ $effect(() => {
 	   laid over the paper, opaque, so the line runs beneath its text. */
 	.mb-event.mb-event--current {
 		background:
-			linear-gradient(var(--dt-accent-dim, rgba(37, 99, 235, 0.12)), var(--dt-accent-dim, rgba(37, 99, 235, 0.12))),
+			linear-gradient(var(--dt-accent-dim, rgba(29, 79, 215, 0.12)), var(--dt-accent-dim, rgba(29, 79, 215, 0.12))),
 			var(--dt-paper, none),
-			var(--dt-bg, #ffffff);
+			var(--dt-bg, #efebe9);
 	}
 	.mb-event.mb-event--current:hover,
 	.mb-event.mb-event--current:active {
 		background:
-			linear-gradient(var(--dt-hover, rgba(0, 0, 0, 0.04)), var(--dt-hover, rgba(0, 0, 0, 0.04))),
+			linear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),
 			var(--dt-paper, none),
-			var(--dt-bg, #ffffff);
+			var(--dt-bg, #efebe9);
 	}
 	/* Printed states: a cancelled class is struck through; a tentative or
 	   limited one is set in grey with a dashed bar — never a bare opacity. */
 	.mb-event--cancelled .mb-ev-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));
 	}
 	.mb-event--cancelled .mb-ev-stripe {
 		opacity: 0.45; /* decorative bar only */
 	}
 	.mb-event--tentative .mb-ev-title,
 	.mb-event--full .mb-ev-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.mb-event--tentative .mb-ev-stripe,
 	.mb-event--limited .mb-ev-stripe {
@@ -1103,8 +1103,8 @@ $effect(() => {
 		right: 4px;
 		z-index: 40;
 		border-radius: 0;
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent);
-		border: 1px dashed color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent);
+		border: 1px dashed color-mix(in srgb, var(--dt-accent, #1d4fd7) 55%, transparent);
 		display: flex;
 		align-items: flex-start;
 		overflow: hidden;
@@ -1113,7 +1113,7 @@ $effect(() => {
 	.mb-create-ghost-time {
 		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 		padding: 4px 8px;
 		white-space: nowrap;
 	}
@@ -1137,7 +1137,7 @@ $effect(() => {
 
 	.mb-ev-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));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1146,12 +1146,12 @@ $effect(() => {
 	.mb-ev-time {
 		font: 400 14px/1 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));
 	}
 
 	.mb-ev-sub {
 		font: 400 12.5px/1.1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1159,7 +1159,7 @@ $effect(() => {
 
 	.mb-ev-loc {
 		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1213,6 +1213,6 @@ $effect(() => {
 	/* ─── Focus ──────────────────────────────────────── */
 	.mb-event:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 </style>