@atmo-dev/kit 0.9.0 → 0.10.0

package/dist/events/EventEditor.svelte

@@ -4,8 +4,8 @@
 	import { Avatar, Button, ToggleGroup, ToggleGroupItem } from '../index.js';
 	import { onMount, untrack } from 'svelte';
 	import { InlineEditor, type Editor } from '../index.js';
-	import DateTimePicker from './DateTimePicker.svelte';
-	import TimezonePicker from './TimezonePicker.svelte';
+	import DateTimePicker from '../components/DateTimePicker.svelte';
+	import TimezonePicker from '../components/TimezonePicker.svelte';
 	import { parseDateTime } from '@internationalized/date';
 	import { isoToDatetimeLocalInTz } from './date-format.js';
 	import type { FlatEventRecord } from './contrail.js';
@@ -386,7 +386,7 @@
 								<ToggleGroupItem value="public">Public</ToggleGroupItem>
 								<ToggleGroupItem value="unlisted">Unlisted</ToggleGroupItem>
 							</ToggleGroup>
-							<div class="mt-1.5 text-xs text-muted">
+							<div class="mt-1.5 text-xs text-base-600 dark:text-base-400">
 								{#if visibility === 'public'}
 									Anyone can view and it appears in discovery.
 								{:else}
@@ -398,11 +398,11 @@
 						<!-- Date row -->
 						<div class="mb-5 grid min-w-0 gap-2">
 							<div class="flex min-w-0 items-center gap-2">
-								<span class="w-9 shrink-0 text-sm text-muted">Start</span>
+								<span class="w-9 shrink-0 text-sm text-base-600 dark:text-base-400">Start</span>
 								<DateTimePicker bind:value={startsAt} label="Start" required />
 							</div>
 							<div class="flex min-w-0 items-center gap-2">
-								<span class="w-9 shrink-0 text-sm text-muted">End</span>
+								<span class="w-9 shrink-0 text-sm text-base-600 dark:text-base-400">End</span>
 								<DateTimePicker
 									bind:value={endsAt}
 									label="End"
@@ -419,7 +419,11 @@
 
 						<!-- About Event -->
 						<div class="mt-8 mb-8">
-							<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">About</p>
+							<p
+								class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+							>
+								About
+							</p>
 							<textarea
 								aria-label="Event description"
 								bind:value={description}
@@ -427,11 +431,14 @@
 								placeholder="What's this event about? @mentions, #hashtags and links will be detected automatically."
 								class="w-full resize-none border-0 bg-transparent px-0 leading-relaxed text-base-700 placeholder:text-base-500 focus:border-0 focus:ring-0 focus:outline-none dark:text-base-300 dark:placeholder:text-base-500"
 								style="field-sizing: content;"></textarea>
-							<p class="mt-2 text-xs text-muted">
+							<p class="mt-2 text-xs text-base-600 dark:text-base-400">
 								Add a hashtag like <span class="font-medium">#webdev</span> or
 								<span class="font-medium">#music</span>
 								to have this event appear under a
-								<a href="/topics" class="text-action underline underline-offset-2">topic</a>.
+								<a
+									href="/topics"
+									class="text-accent-700 underline underline-offset-2 dark:text-accent-300">topic</a
+								>.
 							</p>
 						</div>
 
@@ -462,7 +469,11 @@
 
 					<!-- Hosted By -->
 					<div class="order-3 md:order-0 md:col-start-1">
-						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Hosted By</p>
+						<p
+							class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>
+							Hosted By
+						</p>
 						<div class="flex items-center gap-2.5">
 							<Avatar src={viewer.avatar} name={hostName} class="size-8 shrink-0" />
 							<span class="truncate text-sm font-medium text-base-900 dark:text-base-100">

package/dist/events/EventRsvp.svelte

@@ -98,7 +98,7 @@
 
 {#if rsvpExpected !== false || (viewer.isLoggedIn && rsvpStatus)}
 	<div
-		class="mt-7 mb-2 flex min-h-25 flex-col justify-center rounded-panel bg-recess p-4 [box-shadow:var(--ui-recess-shadow)]"
+		class="mt-7 mb-2 flex min-h-25 flex-col justify-center rounded-panel bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] p-4 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:bg-base-950 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]"
 	>
 		{#if !viewer.isLoggedIn}
 			<div class="flex items-center justify-between gap-4">
@@ -114,8 +114,10 @@
 		{:else if rsvpStatus === 'going'}
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<div class="flex size-8 items-center justify-center rounded-full bg-accent-soft">
-						<Icon img={Check} size={16} class="text-action" />
+					<div
+						class="flex size-8 items-center justify-center rounded-full bg-accent-50 dark:bg-[color-mix(in_srgb,var(--accent-950)_65%,var(--base-950))]"
+					>
+						<Icon img={Check} size={16} class="text-accent-700 dark:text-accent-300" />
 					</div>
 					<p class="font-semibold text-base-900 dark:text-base-50">You're Going</p>
 				</div>
@@ -124,8 +126,10 @@
 		{:else if rsvpStatus === 'interested'}
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<div class="flex size-8 items-center justify-center rounded-full bg-accent-soft">
-						<Icon img={Star} size={16} class="text-action" />
+					<div
+						class="flex size-8 items-center justify-center rounded-full bg-accent-50 dark:bg-[color-mix(in_srgb,var(--accent-950)_65%,var(--base-950))]"
+					>
+						<Icon img={Star} size={16} class="text-accent-700 dark:text-accent-300" />
 					</div>
 					<p class="font-semibold text-base-900 dark:text-base-50">You're Interested</p>
 				</div>
@@ -146,7 +150,7 @@
 		{:else}
 			{#if viewer.isLoggedIn}
 				<div class="mb-4 flex items-center gap-2">
-					<span class="text-sm text-muted">Attend as</span>
+					<span class="text-sm text-base-600 dark:text-base-400">Attend as</span>
 					<Avatar
 						src={viewer.avatar}
 						name={viewer.displayName || viewer.handle || viewer.did || 'Account'}

package/dist/events/EventView.svelte

@@ -260,7 +260,7 @@
 				src={displayImage.url}
 				alt={displayImage.alt}
 				loading="eager"
-				class="mb-8 block w-full rounded-panel border border-line object-cover"
+				class="mb-8 block w-full rounded-panel border border-base-300 object-cover dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
 				style:aspect-ratio={frameAspectRatio}
 			/>
 		{/if}
@@ -277,12 +277,12 @@
 							src={displayImage.url}
 							alt={displayImage.alt}
 							loading="eager"
-							class="block w-full rounded-panel border border-line object-cover"
+							class="block w-full rounded-panel border border-base-300 object-cover dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
 							style:aspect-ratio={frameAspectRatio}
 						/>
 					{:else if !showBanner}
 						<div
-							class="aspect-square w-full overflow-hidden rounded-panel border border-line [&>svg]:h-full [&>svg]:w-full"
+							class="aspect-square w-full overflow-hidden rounded-panel border border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] [&>svg]:h-full [&>svg]:w-full"
 						>
 							<Avatar
 								size={256}
@@ -328,7 +328,11 @@
 					<div
 						class="mt-8 mb-2 justify-center rounded-2xl border border-base-200 bg-base-100 p-4 dark:border-base-800 dark:bg-base-950/50"
 					>
-						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Part of</p>
+						<p
+							class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>
+							Part of
+						</p>
 						<EventCard event={data.parentEvent} actor={parentActor} />
 						<Button
 							href={data.parentScheduleUrl ?? `/p/${parentActor}/e/${data.parentEvent.rkey}`}
@@ -361,7 +365,11 @@
 				<!-- Live stream -->
 				{#if isOngoing && streamPlaceHandle}
 					<div class="mt-8 mb-8">
-						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Live now</p>
+						<p
+							class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>
+							Live now
+						</p>
 						<StreamPlacePlayer handle={streamPlaceHandle} title={eventData.name} />
 					</div>
 				{/if}
@@ -387,7 +395,9 @@
 									>{/each}
 							</ToggleGroup>
 						{:else}
-							<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">
+							<p
+								class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+							>
 								{contentTabs[0].label}
 							</p>
 						{/if}
@@ -423,7 +433,11 @@
 				<!-- Recording -->
 				{#if data.vod}
 					<div class="mt-8 mb-8">
-						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Recording</p>
+						<p
+							class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>
+							Recording
+						</p>
 						<VodPlayer
 							playlistUrl={data.vod.playlistUrl}
 							title={eventData.name}

package/dist/events/StarterPackButton.svelte

@@ -46,13 +46,13 @@
 </script>
 
 <div class="mt-4">
-	<p class="mb-1 text-xs text-muted">Follow attendees on {clientLabel}.</p>
+	<p class="mb-1 text-xs text-base-600 dark:text-base-400">Follow attendees on {clientLabel}.</p>
 	{#if packUrl}
 		<a
 			href={packUrl}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="rounded text-sm text-action underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus"
+			class="rounded text-sm text-accent-700 underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-700 dark:text-accent-300 dark:focus-visible:outline-accent-300"
 			>Starter pack ↗</a
 		>
 	{:else}
@@ -67,6 +67,6 @@
 		</Button>
 	{/if}
 	{#if message}
-		<p role="alert" class="mt-2 text-sm text-muted">{message}</p>
+		<p role="alert" class="mt-2 text-sm text-base-600 dark:text-base-400">{message}</p>
 	{/if}
 </div>

package/dist/events/ThemePicker.svelte

@@ -45,7 +45,7 @@
 <div class="flex flex-col gap-6">
 	<!-- Theme background -->
 	<div>
-		<p class="mb-2 text-xs font-medium text-muted">Background style</p>
+		<p class="mb-2 text-xs font-medium text-base-600 dark:text-base-400">Background style</p>
 		<div class="flex flex-wrap gap-2">
 			{#each bgKeys as key (key)}
 				<button
@@ -66,7 +66,7 @@
 
 	<!-- Accent color -->
 	<div>
-		<p class="mb-2 text-xs font-medium text-muted">Accent color</p>
+		<p class="mb-2 text-xs font-medium text-base-600 dark:text-base-400">Accent color</p>
 		<div class="flex flex-wrap gap-2">
 			{#each accentColors as color (color.label)}
 				<button
@@ -75,8 +75,8 @@
 					aria-pressed={theme.accentColor === color.label}
 					class="size-7 cursor-pointer rounded-full border-2 transition-all {color.cls}
 						{theme.accentColor === color.label
-						? 'border-white ring-2 ring-control-line'
-						: 'border-transparent hover:border-control-line'}"
+						? 'border-white ring-2 ring-base-300 dark:ring-base-800'
+						: 'border-transparent hover:border-base-300 dark:hover:border-base-800'}"
 					onclick={() => (theme = { ...theme, accentColor: color.label })}
 				></button>
 			{/each}
@@ -85,7 +85,7 @@
 
 	<!-- Base color -->
 	<div>
-		<p class="mb-2 text-xs font-medium text-muted">Base color</p>
+		<p class="mb-2 text-xs font-medium text-base-600 dark:text-base-400">Base color</p>
 		<div class="flex flex-wrap gap-2">
 			{#each baseColors as color (color.label)}
 				<button
@@ -94,8 +94,8 @@
 					aria-pressed={theme.baseColor === color.label}
 					class="size-7 cursor-pointer rounded-full border-2 transition-all {color.cls}
 						{theme.baseColor === color.label
-						? 'border-white ring-2 ring-control-line'
-						: 'border-transparent hover:border-control-line'}"
+						? 'border-white ring-2 ring-base-300 dark:ring-base-800'
+						: 'border-transparent hover:border-base-300 dark:hover:border-base-800'}"
 					onclick={() => (theme = { ...theme, baseColor: color.label })}
 				></button>
 			{/each}

package/dist/events/ThumbnailPresets.svelte

@@ -49,7 +49,7 @@
 </script>
 
 <div class="flex flex-col gap-3">
-	<p class="text-xs font-medium text-muted">Preset thumbnails</p>
+	<p class="text-xs font-medium text-base-600 dark:text-base-400">Preset thumbnails</p>
 	<div class="grid grid-cols-3 gap-2" bind:this={containerEl}>
 		{#each presetKeys as key (key)}
 			<button

package/dist/events/VodPlayer.svelte

@@ -136,7 +136,7 @@
 	<div
 		class="flex aspect-video w-full items-center justify-center rounded-xl border border-base-200 bg-base-100 dark:border-base-800 dark:bg-base-900"
 	>
-		<p class="text-sm text-muted">Failed to load video</p>
+		<p class="text-sm text-base-600 dark:text-base-400">Failed to load video</p>
 	</div>
 {:else}
 	<div

package/dist/events/editor/LinksSection.svelte

@@ -65,7 +65,7 @@
 		<Icon
 			img={provider === 'grain' ? Camera : provider === 'stream' ? Video : LinkIcon}
 			size={16}
-			class="shrink-0 text-muted"
+			class="shrink-0 text-base-600 dark:text-base-400"
 		/>
 		<div class="min-w-0 flex-1">
 			<p class="truncate text-sm">
@@ -89,13 +89,17 @@
 
 <div>
 	{#if ordinary.length}
-		<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Links</p>
+		<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+			Links
+		</p>
 		<div class="mb-4 space-y-3">
 			{#each ordinary as link, i (i)}{@render row(link)}{/each}
 		</div>
 	{/if}
 	{#if linked.length}
-		<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Linked records</p>
+		<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+			Linked records
+		</p>
 		<div class="mb-4 space-y-3">
 			{#each linked as link, i (i)}{@render row(
 					link,

package/dist/events/editor/LocationSection.svelte

@@ -136,7 +136,7 @@
 					<p class="font-medium text-base-900 dark:text-base-50">
 						{getLocationDisplayString(result.location)}
 					</p>
-					<p class="mt-0.5 truncate text-xs text-muted">
+					<p class="mt-0.5 truncate text-xs text-base-600 dark:text-base-400">
 						{result.displayName}
 					</p>
 				</div>

package/dist/events/editor/RecurringModal.svelte

@@ -219,7 +219,9 @@
 </script>
 
 <Modal bind:open title="Recurring events" dismissible={!creating}>
-	<p class="mt-1 text-sm text-muted">Create multiple copies of this event at regular intervals.</p>
+	<p class="mt-1 text-sm text-base-600 dark:text-base-400">
+		Create multiple copies of this event at regular intervals.
+	</p>
 
 	<div class="mt-4 space-y-4">
 		<div>
@@ -276,7 +278,7 @@
 				<Checkbox bind:checked={numberInTitle} disabled={creating} aria-label="Number in title" />
 				<span class="text-sm font-medium text-base-700 dark:text-base-300">Number in title</span>
 			</div>
-			<p class="mt-1 text-xs text-muted">
+			<p class="mt-1 text-xs text-base-600 dark:text-base-400">
 				{#if numberInTitle && detectedStartNumber !== null}
 					Titles will count up from #{detectedStartNumber + 1}
 				{:else if numberInTitle}
@@ -293,13 +295,13 @@
 	{/if}
 
 	{#if creating && created > 0}
-		<p class="mt-4 text-sm text-muted">
+		<p class="mt-4 text-sm text-base-600 dark:text-base-400">
 			Created {created} of {count} events...
 		</p>
 	{/if}
 
 	{#if created > 0 && !creating}
-		<p class="mt-4 text-sm text-action">
+		<p class="mt-4 text-sm text-accent-700 dark:text-accent-300">
 			Successfully created {created} recurring events!
 		</p>
 	{/if}

package/dist/events/editor/ThemeSection.svelte

@@ -10,7 +10,9 @@
 </script>
 
 <div>
-	<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Theme</p>
+	<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+		Theme
+	</p>
 	<Button variant="secondary" size="sm" onclick={() => (showModal = true)}>
 		<Icon img={Palette} size={16} />
 		{themeBackgrounds[theme.name] || theme.name}

package/dist/events/event-view/EventDateBlock.svelte

@@ -14,9 +14,9 @@
 
 <div class="mb-4 flex items-center gap-4">
 	<div
-		class="flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-ui bg-recess [box-shadow:var(--ui-recess-shadow)]"
+		class="flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-ui bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:bg-base-950 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]"
 	>
-		<span class="text-[9px] leading-none font-semibold text-muted">
+		<span class="text-[9px] leading-none font-semibold text-base-600 dark:text-base-400">
 			{formatMonth(startDate)}
 		</span>
 		<span class="text-lg leading-tight font-bold text-base-900 dark:text-base-50">
@@ -30,7 +30,7 @@
 				- {formatWeekday(endDate)}, {formatFullDate(endDate)}
 			{/if}
 		</p>
-		<p class="flex flex-wrap items-center gap-2 text-sm text-muted">
+		<p class="flex flex-wrap items-center gap-2 text-sm text-base-600 dark:text-base-400">
 			<span>
 				{formatTime(startDate)}
 				{#if endDate && isSameDay}

package/dist/events/event-view/EventHostedBy.svelte

@@ -18,7 +18,9 @@
 </script>
 
 <div>
-	<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Hosted By</p>
+	<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+		Hosted By
+	</p>
 	<a
 		href={hostUrl}
 		class="flex items-center gap-2.5 font-medium text-base-900 transition-opacity hover:opacity-80 dark:text-base-100"
@@ -36,7 +38,9 @@
 
 {#if speakers.length > 0}
 	<div>
-		<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Speakers</p>
+		<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+			Speakers
+		</p>
 		<div class="space-y-2">
 			{#each speakers as speaker, i (speaker.id || i)}
 				{#if speaker.handle}

package/dist/events/event-view/EventLinksList.svelte

@@ -13,7 +13,7 @@
 
 {#if links.length}
 	<div>
-		<p class="mb-3 text-xs font-medium text-muted">Links</p>
+		<p class="mb-3 text-xs font-medium text-base-600 dark:text-base-400">Links</p>
 		<div class="space-y-3">
 			<!-- These rows are stateless; equivalent URLs and exact duplicate entries are valid. -->
 			<!-- eslint-disable-next-line svelte/require-each-key -->
@@ -22,7 +22,7 @@
 					href={link.uri}
 					target="_blank"
 					rel="noopener noreferrer"
-					class="flex items-center gap-2 rounded-sm text-sm text-muted transition-colors hover:text-action"
+					class="flex items-center gap-2 rounded-sm text-sm text-base-600 transition-colors hover:text-accent-700 dark:text-base-400 dark:hover:text-accent-300"
 					><Icon img={Link} size={15} /><span class="truncate"
 						>{link.name || link.uri.replace(/^https?:\/\//, '')}</span
 					></a

package/dist/events/event-view/EventLocationBlock.svelte

@@ -13,13 +13,17 @@
 		{#if physicalLines.length}
 			<li class="flex min-w-0 items-center gap-4">
 				<div
-					class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-recess text-muted [box-shadow:var(--ui-recess-shadow)]"
+					class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] text-base-600 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:bg-base-950 dark:text-base-400 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]"
 				>
 					<Icon img={MapPin} size={22} />
 				</div>
 				<div class="min-w-0 [overflow-wrap:anywhere]">
 					{#each physicalLines as line, i (i)}
-						<p class={line.muted ? 'text-sm text-muted' : 'font-semibold text-ink'}>
+						<p
+							class={line.muted
+								? 'text-sm text-base-600 dark:text-base-400'
+								: 'font-semibold text-base-950 dark:text-base-50'}
+						>
 							<svelte:element
 								this={line.href ? 'a' : 'span'}
 								href={line.href}
@@ -45,14 +49,14 @@
 						: ''}"
 				>
 					<div
-						class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-recess text-muted [box-shadow:var(--ui-recess-shadow)]"
+						class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] text-base-600 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:bg-base-950 dark:text-base-400 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]"
 					>
 						<Icon img={Link} size={22} />
 					</div>
 					<div class="min-w-0 [overflow-wrap:anywhere]">
-						<p class="font-semibold text-ink">{location.label}</p>
+						<p class="font-semibold text-base-950 dark:text-base-50">{location.label}</p>
 						{#if location.detail}
-							<p class="text-sm text-muted">{location.detail}</p>
+							<p class="text-sm text-base-600 dark:text-base-400">{location.detail}</p>
 						{/if}
 					</div>
 				</svelte:element>

package/dist/events/event-view/EventLocationMap.svelte

@@ -23,7 +23,9 @@
 {#if geoLocation}
 	<div class="mt-8 mb-8">
 		<div class="mb-3 flex items-baseline gap-2">
-			<p class="text-xs font-semibold tracking-wider text-muted uppercase">Location:</p>
+			<p class="text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+				Location:
+			</p>
 			<button
 				type="button"
 				onclick={copyCoords}
@@ -42,7 +44,7 @@
 		<p class="mt-3 text-sm [overflow-wrap:anywhere] text-base-700 dark:text-base-200">
 			{geoLocation.label}
 		</p>
-		<p class="mt-1 text-xs text-muted">
+		<p class="mt-1 text-xs text-base-600 dark:text-base-400">
 			Open in
 			<a
 				href={geoLocation.googleMapsUrl}

package/dist/events/schedule/ConferenceTimetable.svelte

@@ -205,7 +205,7 @@
 		{/if}
 	</div>
 
-	<p class="mb-4 text-sm text-muted">All times shown in {tzLabel}.</p>
+	<p class="mb-4 text-sm text-base-600 dark:text-base-400">All times shown in {tzLabel}.</p>
 
 	{#if upNextAll.length > 0}
 		<div class="mb-8">
@@ -235,7 +235,7 @@
 										{ev.title}
 									</p>
 									{#if subtitle(ev)}
-										<p class="mt-0.5 truncate text-xs text-muted">
+										<p class="mt-0.5 truncate text-xs text-base-600 dark:text-base-400">
 											{subtitle(ev)}
 										</p>
 									{/if}
@@ -243,12 +243,12 @@
 								<span
 									class="flex shrink-0 items-center gap-1.5 text-xs whitespace-nowrap {w.soon
 										? 'font-semibold text-accent-600 dark:text-accent-400'
-										: 'text-muted'}"
+										: 'text-base-600 dark:text-base-400'}"
 								>
 									{#if rsvpStatuses[ev.uri] === 'going'}
-										<Icon img={Check} size={14} class="text-action" />
+										<Icon img={Check} size={14} class="text-accent-700 dark:text-accent-300" />
 									{:else}
-										<Icon img={Star} size={14} class="text-action" />
+										<Icon img={Star} size={14} class="text-accent-700 dark:text-accent-300" />
 									{/if}
 									{w.text}
 								</span>
@@ -273,7 +273,7 @@
 		<div class="mb-6 space-y-3">
 			{#if dayGroups.length > 1}
 				<div class="flex items-center gap-3">
-					<span class="w-14 text-xs text-muted">Days</span>
+					<span class="w-14 text-xs text-base-600 dark:text-base-400">Days</span>
 					<ToggleGroup
 						type="single"
 						bind:value={
@@ -293,7 +293,7 @@
 			{/if}
 			{#if loggedIn}
 				<div class="flex items-center gap-3">
-					<span class="w-14 text-xs text-muted">Events</span>
+					<span class="w-14 text-xs text-base-600 dark:text-base-400">Events</span>
 					<ToggleGroup
 						type="single"
 						bind:value={

package/dist/events/schedule/DaySchedule.svelte

@@ -97,7 +97,7 @@
 				onclick={() => (roomMenuOpen = false)}
 			></button>
 			<ul
-				class="absolute inset-x-0 top-full z-[10000] max-h-64 overflow-auto border-b border-line bg-page"
+				class="absolute inset-x-0 top-full z-[10000] max-h-64 overflow-auto border-b border-base-300 bg-base-50 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-925"
 			>
 				{#each rooms as room, i (room)}
 					<li>
@@ -209,7 +209,7 @@
 				>
 					{#each rooms as room (room)}
 						<div
-							class="px-2 py-2.5 text-center text-xs font-semibold tracking-wide text-muted uppercase"
+							class="px-2 py-2.5 text-center text-xs font-semibold tracking-wide text-base-600 uppercase dark:text-base-400"
 						>
 							{room}
 						</div>

package/dist/events/schedule/ScheduleEventCell.svelte

@@ -89,7 +89,7 @@
 	<Modal bind:open={modalOpen} title={event.title}>
 		<div class="overflow-hidden">
 			{#if event.start}
-				<p class="mt-1 text-sm text-muted">
+				<p class="mt-1 text-sm text-base-600 dark:text-base-400">
 					{formatTime(event.start, tz)}{event.end ? ` – ${formatTime(event.end, tz)}` : ''}
 				</p>
 			{/if}
@@ -107,7 +107,7 @@
 			{/if}
 
 			{#if event.description}
-				<p class="mt-3 line-clamp-3 text-sm break-words text-muted">
+				<p class="mt-3 line-clamp-3 text-sm break-words text-base-600 dark:text-base-400">
 					{event.description}
 				</p>
 			{/if}

package/dist/events/themes/Matrix.svelte

@@ -37,23 +37,28 @@
 		);
 
 		const accentColor = getComputedStyle(document.documentElement)
-			.getPropertyValue('--color-accent-500')
+			.getPropertyValue('--accent-500')
 			.trim();
 
+		const root = document.documentElement;
+		const systemScheme = window.matchMedia('(prefers-color-scheme: dark)');
 		let bgColor = '';
 		function readBgColor() {
-			const isDark = document.documentElement.classList.contains('dark');
-			bgColor = getComputedStyle(document.documentElement)
-				.getPropertyValue(isDark ? '--color-base-900' : '--color-base-50')
+			const isDark =
+				root.matches('.dark, [data-theme="dark"]') ||
+				(!root.matches('.light, [data-theme="light"]') && systemScheme.matches);
+			bgColor = getComputedStyle(root)
+				.getPropertyValue(isDark ? '--base-900' : '--base-50')
 				.trim();
 		}
 		readBgColor();
 
 		const themeObserver = new MutationObserver(readBgColor);
-		themeObserver.observe(document.documentElement, {
+		themeObserver.observe(root, {
 			attributes: true,
-			attributeFilter: ['class']
+			attributeFilter: ['class', 'data-theme', 'style']
 		});
+		systemScheme.addEventListener('change', readBgColor);
 
 		let lastResize = canvas.width;
 		let lastTime = performance.now();
@@ -144,6 +149,7 @@
 			cancelAnimationFrame(animId);
 			window.removeEventListener('resize', resize);
 			themeObserver.disconnect();
+			systemScheme.removeEventListener('change', readBgColor);
 		};
 	});
 </script>

package/dist/events.d.ts

@@ -12,8 +12,8 @@ export { default as VodPlayer } from './events/VodPlayer.svelte';
 export type { VodPlayerApi } from './events/VodPlayer.svelte';
 export { default as VodTranscript } from './events/VodTranscript.svelte';
 export { default as ConferenceTimetable } from './events/schedule/ConferenceTimetable.svelte';
-export { default as DatePicker } from './events/DatePicker.svelte';
-export { default as TimePicker } from './events/TimePicker.svelte';
-export { default as DateTimePicker } from './events/DateTimePicker.svelte';
-export { default as TimezonePicker } from './events/TimezonePicker.svelte';
-export { default as ImageDropper } from './events/ImageDropper.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as TimePicker } from './components/TimePicker.svelte';
+export { default as DateTimePicker } from './components/DateTimePicker.svelte';
+export { default as TimezonePicker } from './components/TimezonePicker.svelte';
+export { default as ImageDropper } from './components/ImageDropper.svelte';