@nomideusz/svelte-calendar 1.2.0 → 1.4.0

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 {
     /**

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/theme/presets.d.ts

@@ -35,11 +35,11 @@ export declare const auto = "";
  */
 export declare const neutral = "\n\t--dt-stage-bg: #efebe9;\n\t--dt-bg: #efebe9;\n\t--dt-surface: #f4f1ee;\n\t--dt-border: rgba(15, 15, 15, 0.3);\n\t--dt-border-day: rgba(15, 15, 15, 0.6);\n\t--dt-text: #0f0f0f;\n\t--dt-text-2: rgba(15, 15, 15, 0.66);\n\t--dt-text-3: rgba(15, 15, 15, 0.54);\n\t--dt-accent: var(--asini-accent, #1d4fd7);\n\t--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);\n\t--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(15, 15, 15, 0.18);\n\t--dt-weekend-bg: rgba(15, 15, 15, 0.035);\n\t--dt-hover: rgba(15, 15, 15, 0.05);\n\t--dt-event: var(--dt-text);\n\t--dt-paper: none;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 /** Midnight Industrial — dark charcoal + red accent, tech monitoring */
-export declare const midnight = "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-event: var(--dt-text);\n\t--dt-paper: none;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
+export declare const midnight = "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.75);\n\t--dt-text-3: rgba(148, 163, 184, 0.65);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-event: var(--dt-text);\n\t--dt-paper: none;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 /** All available presets keyed by name */
 export declare const presets: {
     readonly auto: "";
     readonly neutral: "\n\t--dt-stage-bg: #efebe9;\n\t--dt-bg: #efebe9;\n\t--dt-surface: #f4f1ee;\n\t--dt-border: rgba(15, 15, 15, 0.3);\n\t--dt-border-day: rgba(15, 15, 15, 0.6);\n\t--dt-text: #0f0f0f;\n\t--dt-text-2: rgba(15, 15, 15, 0.66);\n\t--dt-text-3: rgba(15, 15, 15, 0.54);\n\t--dt-accent: var(--asini-accent, #1d4fd7);\n\t--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);\n\t--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(15, 15, 15, 0.18);\n\t--dt-weekend-bg: rgba(15, 15, 15, 0.035);\n\t--dt-hover: rgba(15, 15, 15, 0.05);\n\t--dt-event: var(--dt-text);\n\t--dt-paper: none;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
-    readonly midnight: "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-event: var(--dt-text);\n\t--dt-paper: none;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
+    readonly midnight: "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.75);\n\t--dt-text-3: rgba(148, 163, 184, 0.65);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-event: var(--dt-text);\n\t--dt-paper: none;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 };
 export type PresetName = keyof typeof presets;

package/dist/theme/presets.js

@@ -62,8 +62,8 @@ export const midnight = `
 	--dt-border: rgba(148, 163, 184, 0.07);
 	--dt-border-day: rgba(148, 163, 184, 0.14);
 	--dt-text: rgba(226, 232, 240, 0.85);
-	--dt-text-2: rgba(148, 163, 184, 0.55);
-	--dt-text-3: rgba(100, 116, 139, 0.55);
+	--dt-text-2: rgba(148, 163, 184, 0.75);
+	--dt-text-3: rgba(148, 163, 184, 0.65);
 	--dt-accent: #ef4444;
 	--dt-accent-dim: rgba(239, 68, 68, 0.18);
 	--dt-glow: rgba(239, 68, 68, 0.35);