@nomideusz/svelte-calendar 1.3.0 → 1.4.0

package/dist/adapters/mapped.js

@@ -139,15 +139,18 @@ function collectData(raw, mappedKeys, include) {
  * ```
  */
 export function createMappedAdapter(sourceData, options = {}) {
-    const { fields, mapEvent: customMapper, includeData = '*', autoColor = true, palette = VIVID_PALETTE, readOnly = true, } = options;
+    const { fields, mapEvent: customMapper, includeData = '*', autoColor = false, palette = autoColor ? VIVID_PALETTE : undefined, readOnly = true, } = options;
     // Build the internal event list
     const events = [];
     const colorAssignments = new Map();
     let colorIndex = 0;
     function resolveColor(ev) {
-        // When autoColor is on, always assign from palette (ignore source color)
+        // autoColor: always assign from the palette (ignore source color).
+        // Otherwise keep the source color; fill only when a palette is given.
         if (!autoColor && ev.color)
             return ev.color;
+        if (!palette?.length)
+            return ev.color;
         const key = ev.category ?? ev.title;
         if (!colorAssignments.has(key)) {
             colorAssignments.set(key, palette[colorIndex % palette.length]);

package/dist/adapters/memory.d.ts

@@ -2,21 +2,22 @@
  * In-memory adapter — the default for demos and testing.
  *
  * Events are stored in a plain array. No persistence across page loads.
- * Events without a `color` are auto-assigned one from a palette,
- * grouped by `category` or `title` so related events share a color.
+ * Events without a `color` stay uncoloured and draw in `--dt-event` (ink).
+ * Pass `palette` to auto-assign colours instead, grouped by `category` or
+ * `title` so related events share one.
  *
  * Usage:
  *   import { createMemoryAdapter } from './';
  *   const adapter = createMemoryAdapter(initialEvents);
- *   const adapter = createMemoryAdapter(initialEvents, { palette: myColors });
+ *   const adapter = createMemoryAdapter(initialEvents, { palette: VIVID_PALETTE });
  */
 import type { TimelineEvent } from '../core/types.js';
 import type { CalendarAdapter } from './types.js';
 export interface MemoryAdapterOptions {
     /**
-     * Custom color palette for auto-coloring events.
-     * Defaults to VIVID_PALETTE. Pass `generatePalette(accent)` to
-     * make event colors adapt to your theme.
+     * Colour palette for auto-colouring events that have no `color`.
+     * Off by default (events draw in `--dt-event`). Pass `VIVID_PALETTE`
+     * for the pre-1.4 look, or `generatePalette(accent)` for theme-harmonious colours.
      */
     palette?: readonly string[];
 }

package/dist/adapters/memory.js

@@ -1,4 +1,3 @@
-import { VIVID_PALETTE } from '../core/palette.js';
 import { overlapsRange } from '../core/time.js';
 import { EventNotFoundError } from './errors.js';
 let counter = 0;
@@ -7,12 +6,12 @@ function uid() {
 }
 export function createMemoryAdapter(initial = [], options) {
     const events = [...initial];
-    const palette = options?.palette ?? VIVID_PALETTE;
-    // Auto-color: assign from vivid palette by category/title
+    const palette = options?.palette;
+    // Opt-in auto-color: assign from the palette by category/title
     const colorAssignments = new Map();
     let colorIndex = 0;
     function resolveColor(ev) {
-        if (ev.color)
+        if (ev.color || !palette?.length)
             return ev.color;
         const key = ev.category ?? ev.title;
         if (!colorAssignments.has(key)) {

package/dist/adapters/recurring.d.ts

@@ -74,10 +74,10 @@ export interface RecurringAdapterOptions {
     /** Start weeks on Monday (default: true) */
     mondayStart?: boolean;
     /**
-     * Custom color palette for auto-coloring events.
-     * Pass `generatePalette('#yourAccent')` to get theme-harmonious colors,
-     * or provide your own array of hex strings.
-     * Defaults to the built-in vivid palette.
+     * Colour palette for auto-colouring events that have no `color`.
+     * Off by default (events draw in `--dt-event`). Pass `VIVID_PALETTE`
+     * for the pre-1.4 look, `generatePalette('#yourAccent')` for
+     * theme-harmonious colours, or your own array of colours.
      */
     palette?: readonly string[];
     /**
@@ -95,8 +95,8 @@ export interface RecurringAdapterOptions {
  * Create a CalendarAdapter that projects recurring events onto concrete
  * dates for whatever range the calendar requests.
  *
- * Events without a `color` are auto-assigned one from a vivid palette,
- * grouped by `category` or `title` so related events share a color.
+ * Events without a `color` draw in `--dt-event` (ink) unless `palette` is
+ * given; then they are auto-assigned one, grouped by `category` or `title`.
  *
  * Read-only by default — create/update/delete throw.
  */

package/dist/adapters/recurring.js

@@ -1,5 +1,4 @@
 import { startOfWeek, addDaysMs, diffDays, DAY_MS, overlapsRange } from '../core/time.js';
-import { VIVID_PALETTE } from '../core/palette.js';
 import { CalendarReadOnlyError, EventNotFoundError } from './errors.js';
 // ── Helpers ─────────────────────────────────────────────
 /** Parse "HH:MM" into [hours, minutes] */
@@ -234,32 +233,31 @@ function projectMonthly(rec, range, startDate, effectiveUntil, out) {
     }
 }
 // ── Adapter factory ─────────────────────────────────────
-/** Default palette for auto-coloring */
-const PALETTE = VIVID_PALETTE;
 /**
  * Create a CalendarAdapter that projects recurring events onto concrete
  * dates for whatever range the calendar requests.
  *
- * Events without a `color` are auto-assigned one from a vivid palette,
- * grouped by `category` or `title` so related events share a color.
+ * Events without a `color` draw in `--dt-event` (ink) unless `palette` is
+ * given; then they are auto-assigned one, grouped by `category` or `title`.
  *
  * Read-only by default — create/update/delete throw.
  */
 export function createRecurringAdapter(schedule, options = {}) {
     const { mondayStart = true, palette, movable = false } = options;
-    const colors = palette?.length ? palette : PALETTE;
+    const colors = palette?.length ? palette : undefined;
     // Auto-color: assign from palette by category/title
     const colorAssignments = new Map();
     let colorIndex = 0;
-    for (const rec of schedule) {
-        if (rec.color)
-            continue;
-        const key = rec.category ?? rec.title;
-        if (!colorAssignments.has(key)) {
-            colorAssignments.set(key, colors[colorIndex % colors.length]);
-            colorIndex++;
+    if (colors)
+        for (const rec of schedule) {
+            if (rec.color)
+                continue;
+            const key = rec.category ?? rec.title;
+            if (!colorAssignments.has(key)) {
+                colorAssignments.set(key, colors[colorIndex % colors.length]);
+                colorIndex++;
+            }
         }
-    }
     function resolveColor(rec) {
         if (rec.color)
             return rec.color;

package/dist/calendar/Calendar.svelte

@@ -376,6 +376,7 @@ setContext("calendar", {
 	get labels() {
 		return mergedLabels;
 	},
+	announce,
 	// Load range (read/write)
 	get loadRange() {
 		return viewLoadRange;
@@ -479,6 +480,17 @@ const dateLabel = $derived.by(() => {
 		year: "numeric"
 	});
 });
+// ── Polite announcements (views say why an action did nothing) ──
+// Shares the header's status line; a note lasts until the range changes.
+let note = $state(null);
+function announce(text) {
+	// A repeated message must change the text node to be read again.
+	note = {
+		text: note?.text === text ? `${text}\u00a0` : text,
+		label: dateLabel
+	};
+}
+const noteText = $derived(note && note.label === dateLabel ? note.text : "");
 // ── Period title (the built-in header's big line) ──
 // Names the month the user is looking at: "October 2026"; a week across two
 // months reads "Oct – Nov 2026"; a day gives its date. `dateLabel` keeps the
@@ -656,7 +668,7 @@ const navCtx = $derived({
 		<div class="cal-hd" class:cal-hd--mobile={useMobile} class:cal-hd--stack={stackHeader}>
 			<!-- The visible title names the month; the status line announces the exact range -->
 			<span class="cal-hd-title" aria-hidden="true">{periodTitle}</span>
-			<span class="cal-sr" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			<span class="cal-sr" role="status" aria-live="polite" aria-atomic="true">{noteText || dateLabel}</span>
 			{#if showModePills && !useMobile && labelsForMode.length > 1}
 				<!-- View-type switcher (e.g. Planner ↔ Agenda) for the current mode -->
 				<div class="cal-pills cal-pills--labels" role="radiogroup" aria-label={L.viewMode}>
@@ -715,6 +727,10 @@ const navCtx = $derived({
 		</div>
 	{/if}
 
+	{#if headerSnippet || !(showNavigation || (showModePills && modes.length > 1) || dateLabel)}
+		<span class="cal-sr" role="status" aria-live="polite" aria-atomic="true">{noteText}</span>
+	{/if}
+
 	<div class="cal-body">
 		{#if activeView}
 			{@const Comp = activeView.component}
@@ -755,7 +771,7 @@ const navCtx = $derived({
 		overflow: clip;
 		display: flex;
 		flex-direction: column;
-		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		box-sizing: border-box;
 	}
 	.cal--auto {
@@ -775,11 +791,11 @@ const navCtx = $derived({
 		align-items: center;
 		gap: 10px 24px;
 		padding: 14px 16px 12px;
-		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;
 		box-sizing: border-box;
 		font-family: 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));
 	}
 
 	.cal-hd-title {
@@ -819,10 +835,10 @@ const navCtx = $derived({
 	.cal-hd-btn {
 		box-sizing: border-box;
 		height: var(--cal-ctl-h);
-		border: 2px solid var(--dt-text, rgba(0, 0, 0, 0.87));
+		border: 2px solid var(--dt-text, rgba(15, 15, 15, 0.87));
 		border-radius: var(--cal-ctl-r);
 		background: transparent;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		cursor: pointer;
 		transition: background-color 120ms, opacity 120ms;
 		-webkit-tap-highlight-color: transparent;
@@ -848,7 +864,7 @@ const navCtx = $derived({
 	}
 	.cal-hd-today:active:not(:disabled),
 	.cal-hd-btn:active {
-		background: color-mix(in srgb, var(--dt-text, #000) 12%, transparent);
+		background: color-mix(in srgb, var(--dt-text, #0f0f0f) 12%, transparent);
 	}
 	/* Today is already in view: the frame stays, quietly */
 	.cal-hd-today:disabled {
@@ -859,7 +875,7 @@ const navCtx = $derived({
 	.cal-hd-today:focus-visible,
 	.cal-hd-btn:focus-visible,
 	.cal-pill:focus-visible {
-		outline: 2px solid var(--dt-text, rgba(0, 0, 0, 0.87));
+		outline: 2px solid var(--dt-text, rgba(15, 15, 15, 0.87));
 		outline-offset: 2px;
 	}
 
@@ -875,12 +891,12 @@ const navCtx = $derived({
 		align-self: stretch;
 		align-items: center;
 		padding-inline-start: 24px;
-		border-inline-start: 1px solid var(--dt-border, rgba(0, 0, 0, 0.12));
+		border-inline-start: 1px solid var(--dt-border, rgba(15, 15, 15, 0.12));
 	}
 	.cal-pill {
 		border: none;
 		background: transparent;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		cursor: pointer;
 		font: 400 15px/1 var(--dt-sans, system-ui, sans-serif);
 		min-height: var(--cal-ctl-h);
@@ -896,11 +912,11 @@ const navCtx = $derived({
 	}
 	/* :not(--active) — iOS keeps :hover stuck after a tap */
 	.cal-pill:hover:not(.cal-pill--active) {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
-		text-decoration-color: var(--dt-border-day, var(--dt-border, rgba(0, 0, 0, 0.3)));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
+		text-decoration-color: var(--dt-border-day, var(--dt-border, rgba(15, 15, 15, 0.3)));
 	}
 	.cal-pill--active {
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		text-decoration-color: currentColor;
 	}
 
@@ -962,7 +978,7 @@ const navCtx = $derived({
 		justify-content: center;
 		height: 100%;
 		font: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 	}
 
 	.cal-loading {
@@ -974,7 +990,7 @@ const navCtx = $derived({
 		background: linear-gradient(
 			90deg,
 			transparent 0%,
-			var(--dt-accent, #2563eb) 50%,
+			var(--dt-accent, #1d4fd7) 50%,
 			transparent 100%
 		);
 		animation: cal-slide 1.2s ease-in-out infinite;
@@ -988,7 +1004,7 @@ const navCtx = $derived({
 	@media (prefers-reduced-motion: reduce) {
 		.cal-loading {
 			animation: none;
-			background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+			background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 		}
 	}
 

package/dist/calendar/Calendar.svelte.d.ts

@@ -69,7 +69,7 @@ export interface CalendarProps {
     mondayStart?: boolean;
     /** Total height. Use `'auto'` to let content determine height (ideal for Agenda views). */
     height?: number | 'auto';
-    /** Border radius in px (default: 12). Set to 0 for no rounding. */
+    /** Border radius in px (default: 0, square-cut). */
     borderRadius?: number;
     /** Text direction: 'ltr' (default), 'rtl', or 'auto' */
     dir?: 'ltr' | 'rtl' | 'auto';

package/dist/primitives/DayHeader.svelte

@@ -43,18 +43,18 @@ const dayNum = $derived(new Date(dayMs).getDate());
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.dh-name-long {
 		font-size: 12px;
 		text-transform: none;
 		letter-spacing: 0.01em;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 
 	.dh-num {
 		font: 600 14px / 1 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));
 		width: 28px;
 		height: 28px;
 		display: flex;
@@ -63,20 +63,20 @@ const dayNum = $derived(new Date(dayMs).getDate());
 		border-radius: 50%;
 	}
 	.dh-num-today {
-		background: var(--dt-accent, #2563eb);
+		background: var(--dt-accent, #1d4fd7);
 		color: var(--dt-btn-text, #fff);
 	}
 
 	.dh-date {
 		font: 400 10px / 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));
 	}
 
 	.dh-rel {
 		font: 500 12px / 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));
 	}
 	.dh-today .dh-rel {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 </style>

package/dist/primitives/EmptySlot.svelte

@@ -49,13 +49,13 @@ function handleKeydown(e) {
 		min-height: 24px;
 	}
 	.es:hover {
-		border-color: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		border-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 	.es:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
+		outline: 2px solid var(--dt-accent, #1d4fd7);
 		outline-offset: 2px;
-		border-color: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		border-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 
 	.es-hint {
@@ -74,12 +74,12 @@ function handleKeydown(e) {
 
 	.es-plus {
 		font: 500 14px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 	.es-range {
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 
 	.es-v {

package/dist/primitives/EventBlock.svelte

@@ -14,7 +14,7 @@ import { getContext } from "svelte";
 const calendarCtx = getContext("calendar");
 const L = $derived(calendarCtx?.labels ?? getLabels());
 let { event, variant = "chip", active = false, past = false, showTime = false, showDuration = false, editable = false, onclick, children } = $props();
-const accentColor = $derived(event.color || "var(--dt-accent, #2563eb)");
+const accentColor = $derived(event.color || "var(--dt-event, var(--dt-accent))");
 const isCancelled = $derived(event.status === "cancelled");
 const isTentative = $derived(event.status === "tentative");
 const isFull = $derived(event.status === "full");
@@ -145,7 +145,7 @@ function handleKeydown(e) {
 
 <style>
 	.eb {
-		--_color: var(--eb-color, var(--dt-accent, #2563eb));
+		--_color: var(--eb-color, var(--dt-accent, #1d4fd7));
 		cursor: default;
 		transition: opacity 120ms, transform 80ms;
 	}
@@ -156,7 +156,7 @@ function handleKeydown(e) {
 		transform: translateY(-1px);
 	}
 	.eb:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
+		outline: 2px solid var(--dt-accent, #1d4fd7);
 		outline-offset: 2px;
 		border-radius: 4px;
 	}
@@ -195,7 +195,7 @@ function handleKeydown(e) {
 		align-items: center;
 		gap: 5px;
 		font: 400 11px / 1 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;
@@ -221,8 +221,8 @@ function handleKeydown(e) {
 	.eb-card {
 		display: flex;
 		border-radius: 8px;
-		background: var(--dt-surface, var(--dt-bg, #ffffff));
-		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		background: var(--dt-surface, var(--dt-bg, #efebe9));
+		border: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		overflow: hidden;
 	}
 	.eb-card .eb-stripe {
@@ -239,7 +239,7 @@ function handleKeydown(e) {
 	}
 	.eb-card .eb-title {
 		font: 500 12px / 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));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -247,11 +247,11 @@ function handleKeydown(e) {
 	.eb-card .eb-time {
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.eb-card .eb-dur {
 		font: 300 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 	}
 
 	/* ── Row ── */
@@ -260,7 +260,7 @@ function handleKeydown(e) {
 		align-items: center;
 		gap: 10px;
 		padding: 6px 12px;
-		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));
 	}
 	.eb-row .eb-stripe {
 		width: 3px;
@@ -273,13 +273,13 @@ function handleKeydown(e) {
 	.eb-row .eb-time {
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		flex-shrink: 0;
 		width: 90px;
 	}
 	.eb-row .eb-title {
 		font: 400 12px / 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: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -287,14 +287,14 @@ function handleKeydown(e) {
 	}
 	.eb-row .eb-dur {
 		font: 300 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 		flex-shrink: 0;
 	}
 
 	/* ── Shared ── */
 	.eb-subtitle {
 		font: 400 10px / 1.2 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));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -316,7 +316,7 @@ function handleKeydown(e) {
 	}
 	.eb-location {
 		font: 400 9px / 1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -332,16 +332,16 @@ function handleKeydown(e) {
 		width: fit-content;
 	}
 	.eb-cancelled-badge {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		background: color-mix(in srgb, var(--dt-text-2, rgba(0, 0, 0, 0.54)) 15%, transparent);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
+		background: color-mix(in srgb, var(--dt-text-2, rgba(15, 15, 15, 0.54)) 15%, transparent);
 	}
 	.eb-tentative-badge {
 		color: var(--_color);
 		background: color-mix(in srgb, var(--_color) 12%, transparent);
 	}
 	.eb-full-badge {
-		color: var(--dt-accent, #2563eb);
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 15%, transparent);
+		color: var(--dt-accent, #1d4fd7);
+		background: color-mix(in srgb, var(--dt-accent, #1d4fd7) 15%, transparent);
 	}
 	.eb-limited-badge {
 		color: var(--_color);

package/dist/primitives/FloatingPanel.svelte

@@ -211,8 +211,8 @@ function onKeydown(e) {
 		max-height: calc(100vh - 16px);
 		display: flex;
 		flex-direction: column;
-		background: var(--dt-surface, #fff);
-		color: var(--dt-text, #111);
+		background: var(--dt-surface, #f4f1ee);
+		color: var(--dt-text, #0f0f0f);
 		border: 1px solid var(--dt-border, #e2e2e2);
 		border-radius: var(--dt-radius, 8px);
 		box-shadow: var(--dt-shadow, 0 16px 48px rgba(0, 0, 0, 0.18));
@@ -252,8 +252,8 @@ function onKeydown(e) {
 		cursor: pointer;
 	}
 	.fp-close:hover {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.06));
-		color: var(--dt-text, #111);
+		background: var(--dt-hover, rgba(15, 15, 15, 0.06));
+		color: var(--dt-text, #0f0f0f);
 	}
 	.fp-body {
 		/* A flex child defaults to min-height:auto and never shrinks below its

package/dist/primitives/NowIndicator.svelte

@@ -74,7 +74,7 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 		height: 0;
 	}
 	.ni-line-bar {
-		background: var(--ni-color, var(--dt-accent, #2563eb));
+		background: var(--ni-color, var(--dt-accent, #1d4fd7));
 	}
 	.ni-line.vertical .ni-line-bar {
 		width: 2px;
@@ -92,8 +92,8 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 		width: 10px;
 		height: 10px;
 		border-radius: 50%;
-		background: var(--ni-color, var(--dt-accent, #2563eb));
-		box-shadow: 0 0 6px var(--ni-color, var(--dt-glow, rgba(37, 99, 235, 0.25)));
+		background: var(--ni-color, var(--dt-accent, #1d4fd7));
+		box-shadow: 0 0 6px var(--ni-color, var(--dt-glow, rgba(29, 79, 215, 0.25)));
 	}
 	.ni-dot.vertical .ni-dot-circle {
 		margin-left: -5px;
@@ -109,7 +109,7 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 		font: 600 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: var(--dt-btn-text, #fff);
-		background: var(--ni-color, var(--dt-accent, #2563eb));
+		background: var(--ni-color, var(--dt-accent, #1d4fd7));
 		padding: 3px 6px;
 		border-radius: 4px;
 	}
@@ -136,7 +136,7 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
 		color: var(--dt-btn-text, #fff);
-		background: var(--ni-color, var(--dt-accent, #2563eb));
+		background: var(--ni-color, var(--dt-accent, #1d4fd7));
 		padding: 2px 7px;
 		border-radius: 3px;
 		animation: ni-pulse 2s ease-in-out infinite;

package/dist/primitives/TimeGutter.svelte

@@ -51,7 +51,7 @@ const firstHour = $derived(hours[0] ?? 0);
 		top: 0;
 		bottom: 0;
 		width: 0;
-		border-left: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 	.tg-tick-half {
 		border-left-style: dashed;
@@ -63,7 +63,7 @@ const firstHour = $derived(hours[0] ?? 0);
 		left: 6px;
 		font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 		white-space: nowrap;
 	}
 
@@ -81,11 +81,11 @@ const firstHour = $derived(hours[0] ?? 0);
 		align-items: flex-start;
 		justify-content: flex-end;
 		padding: 2px 8px 0 0;
-		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));
 	}
 	.tg-v .tg-label {
 		font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-3, rgba(15, 15, 15, 0.38));
 	}
 </style>

package/dist/theme/auto.d.ts

@@ -14,6 +14,11 @@
  *
  * The Calendar component calls this automatically when theme is `auto` (empty string).
  */
+/**
+ * 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 declare function accentTextFor(accent: [number, number, number]): '#ffffff' | '#0f0f0f';
 /** Options for fine-tuning auto-detection behavior. */
 export interface AutoThemeOptions {
     /**