@atmo-dev/kit 0.9.0 → 0.10.0

package/dist/{events → components}/DatePicker.svelte

@@ -3,7 +3,7 @@
 	import { DatePicker } from 'bits-ui';
 	import { CalendarDate, type DateValue } from '@internationalized/date';
 	import { untrack } from 'svelte';
-	import { Icon } from '../index.js';
+	import Icon from './Icon.svelte';
 	import { ChevronLeft, ChevronRight } from '@sketchyicons/svelte';
 
 	let {
@@ -124,7 +124,7 @@
 >
 	<DatePicker.Trigger
 		aria-label={`${label}: ${displayText || 'Select date'}`}
-		class="flex h-11 min-w-0 flex-1 cursor-pointer items-center rounded-ui border border-line bg-recess px-2 text-xs text-ink shadow-(--ui-recess-shadow) transition-colors hover:border-control-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus min-[360px]:px-3 min-[360px]:text-sm"
+		class="flex h-11 min-w-0 flex-1 cursor-pointer items-center rounded-ui border border-base-300 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] px-2 text-xs text-base-950 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)] transition-colors hover:border-base-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-700 min-[360px]:px-3 min-[360px]:text-sm dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-950 dark:text-base-50 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002] dark:hover:border-base-700 dark:focus-visible:outline-accent-300"
 	>
 		<span class="truncate select-none">
 			{#if displayText}
@@ -138,7 +138,7 @@
 
 	<DatePicker.Content
 		sideOffset={8}
-		class="z-50 max-w-[calc(100vw-2rem)] rounded-panel border border-line bg-page p-3 text-ink"
+		class="z-50 max-w-[calc(100vw-2rem)] rounded-panel border border-base-300 bg-base-50 p-3 text-base-950 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-900 dark:text-base-50"
 	>
 		<DatePicker.Calendar>
 			{#snippet children({ months, weekdays })}

package/dist/components/ExternalEmbed.svelte

@@ -62,7 +62,9 @@
 </script>
 
 {#if match && failed !== match}
-	<div class="relative overflow-hidden rounded-ui border border-line">
+	<div
+		class="relative overflow-hidden rounded-ui border border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
+	>
 		{#if active || (autoplay && match.player.type === 'video' && paused === match)}
 			{#if match.player.type === 'iframe'}
 				<iframe
@@ -105,7 +107,7 @@
 			{/if}
 		{:else if autoplay}
 			<div
-				class="relative max-h-[32rem] w-full bg-surface"
+				class="relative max-h-[32rem] w-full bg-base-50 dark:bg-base-900"
 				style:aspect-ratio={match.player.aspectRatio ?? 16 / 9}
 			>
 				{#if safeWebUrl(embed.image)}<img
@@ -121,7 +123,7 @@
 				type="button"
 				aria-label={`Play ${label} on ${match.provider.label}`}
 				onclick={play}
-				class={`relative flex max-h-[32rem] w-full items-center justify-center overflow-hidden bg-surface text-ink ${focus}`}
+				class={`relative flex max-h-[32rem] w-full items-center justify-center overflow-hidden bg-base-50 text-base-950 dark:bg-base-900 dark:text-base-50 ${focus}`}
 				style:aspect-ratio={match.player.aspectRatio ?? 16 / 9}
 			>
 				{#if safeWebUrl(embed.image)}<img
@@ -131,7 +133,7 @@
 						class="absolute inset-0 size-full object-cover"
 					/>{/if}
 				<span
-					class="relative inline-flex items-center gap-2 rounded-full border border-line bg-surface px-4 py-2 text-sm font-medium"
+					class="relative inline-flex items-center gap-2 rounded-full border border-base-300 bg-base-50 px-4 py-2 text-sm font-medium dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-900"
 				>
 					<Icon img={Play} size={18} />Play · {match.provider.label}
 				</span>
@@ -154,7 +156,7 @@
 					href={safeWebUrl(embed.uri)}
 					target="_blank"
 					rel="noopener noreferrer"
-					class={`min-w-0 truncate rounded-ui text-muted hover:text-action ${focus}`}
+					class={`min-w-0 truncate rounded-ui text-base-600 hover:text-accent-700 dark:text-base-400 dark:hover:text-accent-300 ${focus}`}
 					>{embed.title || `Open on ${match.provider.label}`}</a
 				>
 				{#if active}<button
@@ -162,7 +164,8 @@
 						bind:this={stopButton}
 						onclick={stop}
 						aria-label={`Stop ${match.provider.label} embed`}
-						class={`shrink-0 rounded-ui text-muted hover:text-action ${focus}`}>Stop</button
+						class={`shrink-0 rounded-ui text-base-600 hover:text-accent-700 dark:text-base-400 dark:hover:text-accent-300 ${focus}`}
+						>Stop</button
 					>{/if}
 			</div>{/if}
 	</div>

package/dist/components/GrainAlbumPicker.svelte

@@ -162,10 +162,12 @@
 				/>{/if}
 			<div class="min-w-0 flex-1">
 				<p class="truncate font-medium">{preview.title}</p>
-				<p class="text-sm break-words text-muted">
+				<p class="text-sm break-words text-base-600 dark:text-base-400">
 					@{preview.creator.handle} · {preview.photoCount} photos
 				</p>
-				{#if preview.contentWarning}<p class="text-xs text-muted">Content warning</p>{/if}
+				{#if preview.contentWarning}<p class="text-xs text-base-600 dark:text-base-400">
+						Content warning
+					</p>{/if}
 			</div>
 			<Button disabled={busy || added(preview)} onclick={() => preview && choose(preview)}
 				>{added(preview) ? 'Added' : 'Add album'}</Button
@@ -178,7 +180,7 @@
 			{#each albums as album (album.uri)}
 				<button
 					type="button"
-					class="flex w-full items-center gap-3 rounded-lg p-2 text-left hover:bg-recess disabled:opacity-50"
+					class="flex w-full items-center gap-3 rounded-lg p-2 text-left hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] disabled:opacity-50 dark:hover:bg-base-950"
 					disabled={busy || added(album)}
 					onclick={() => choose(album)}
 					aria-label={`${added(album) ? 'Added' : 'Add'} ${album.title}`}
@@ -189,24 +191,31 @@
 							loading="lazy"
 							class="size-14 shrink-0 rounded-md object-cover"
 						/>{:else}<span
-							class="flex size-14 shrink-0 items-center justify-center rounded-md bg-recess"
+							class="flex size-14 shrink-0 items-center justify-center rounded-md bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:bg-base-950"
 							><Icon img={Camera} size={20} /></span
 						>{/if}
 					<span class="min-w-0 flex-1"
 						><span class="block truncate font-medium">{album.title}</span><span
-							class="text-sm text-muted"
+							class="text-sm text-base-600 dark:text-base-400"
 							>{album.photoCount} photos{album.contentWarning ? ' · Content warning' : ''}</span
 						></span
 					>
-					{#if added(album)}<span class="text-xs text-muted">Added</span>{/if}
+					{#if added(album)}<span class="text-xs text-base-600 dark:text-base-400">Added</span>{/if}
 				</button>
 			{/each}
 		</div>
-		{#if listing}<p class="mt-3 text-sm text-muted" role="status">
+		{#if listing}<p class="mt-3 text-sm text-base-600 dark:text-base-400" role="status">
 				Loading albums…
-			</p>{:else if listError}<p class="mt-3 text-sm text-muted" role="status">{listError}</p>
+			</p>{:else if listError}<p
+				class="mt-3 text-sm text-base-600 dark:text-base-400"
+				role="status"
+			>
+				{listError}
+			</p>
 			<Button variant="ghost" size="sm" onclick={() => loadPage(!!cursor)}>Try again</Button
-			>{:else if !albums.length}<p class="text-sm text-muted">No albums yet.</p>{/if}
+			>{:else if !albums.length}<p class="text-sm text-base-600 dark:text-base-400">
+				No albums yet.
+			</p>{/if}
 		{#if cursor && !listError}<Button
 				variant="ghost"
 				class="mt-3"

package/dist/components/GrainAlbumView.svelte

@@ -67,7 +67,7 @@
 					href={`https://grain.social/profile/${encodeURIComponent(gallery.creator.did)}`}
 					target="_blank"
 					rel="noopener noreferrer"
-					class="text-sm break-all text-muted hover:text-action"
+					class="text-sm break-all text-base-600 hover:text-accent-700 dark:text-base-400 dark:hover:text-accent-300"
 					>{gallery.creator.displayName || gallery.creator.handle} · @{gallery.creator.handle}</a
 				>{/if}
 		</div>
@@ -75,20 +75,29 @@
 				href={gallery?.url || ref?.url}
 				target="_blank"
 				rel="noopener noreferrer"
-				class="text-sm text-action hover:underline">Open on Grain</a
+				class="text-sm text-accent-700 hover:underline dark:text-accent-300">Open on Grain</a
 			>{/if}
 	</div>
-	{#if loading}<p class="py-6 text-sm text-muted" role="status">Loading photos…</p>
-	{:else if failed || !loadAlbum}<p class="mb-2 text-sm text-muted" role="status">
+	{#if loading}<p class="py-6 text-sm text-base-600 dark:text-base-400" role="status">
+			Loading photos…
+		</p>
+	{:else if failed || !loadAlbum}<p
+			class="mb-2 text-sm text-base-600 dark:text-base-400"
+			role="status"
+		>
 			Photos are unavailable. You can still open the album on Grain.
 		</p>
 		{#if loadAlbum}<Button variant="ghost" size="sm" onclick={() => retry++}>Try again</Button>{/if}
 	{:else if gallery}
-		{#if gallery.contentWarning && !revealed}<div class="rounded-lg border border-line p-4">
+		{#if gallery.contentWarning && !revealed}<div
+				class="rounded-lg border border-base-300 p-4 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
+			>
 				<p class="mb-3 text-sm">This album has a content warning.</p>
 				<Button variant="secondary" size="sm" onclick={() => (revealed = true)}>Show photos</Button>
 			</div>
-		{:else if !photos.length}<p class="py-4 text-sm text-muted">No photos in this album yet.</p>
+		{:else if !photos.length}<p class="py-4 text-sm text-base-600 dark:text-base-400">
+				No photos in this album yet.
+			</p>
 		{:else}<PhotoGrid {photos} label={gallery.title} />{/if}
 	{/if}
 </section>

package/dist/components/Heading.svelte

@@ -18,7 +18,7 @@
 	{...rest}
 	bind:this={ref}
 	class={cn(
-		'm-0 text-[clamp(2rem,4vw,2.75rem)] leading-[1.15] font-medium tracking-[-.035em] text-ink',
+		'm-0 text-[clamp(2rem,4vw,2.75rem)] leading-[1.15] font-medium tracking-[-.035em] text-base-950 dark:text-base-50',
 		className
 	)}>{@render children?.()}</svelte:element
 >

package/dist/components/IconRail.svelte

@@ -87,15 +87,17 @@
 						class={cn(
 							'min-h-11 w-full justify-start gap-3 px-3 py-3 text-sm',
 							(!item.variant || item.variant === 'ghost') &&
-								'aria-[current=page]:bg-recess aria-[current=page]:text-action',
+								'aria-[current=page]:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] aria-[current=page]:text-accent-700 dark:aria-[current=page]:bg-base-950 dark:aria-[current=page]:text-accent-300',
 							item.primary && 'mt-3',
-							item.primary && (!item.variant || item.variant === 'ghost') && 'text-action'
+							item.primary &&
+								(!item.variant || item.variant === 'ghost') &&
+								'text-accent-700 dark:text-accent-300'
 						)}
 					>
 						<Icon img={item.icon} size={22} />
 						<span class="min-w-0 flex-1 text-left">{item.label}</span>
 						{#if item.badge}
-							<span class="text-xs text-action">
+							<span class="text-xs text-accent-700 dark:text-accent-300">
 								{#if typeof item.badge === 'number'}{item.badge}<span class="sr-only"> unread</span>
 								{:else}<span class="sr-only">Unread</span><span aria-hidden="true">•</span>{/if}
 							</span>
@@ -115,7 +117,7 @@
 			data-slot="icon-rail"
 			data-backed={backed}
 			class={cn(
-				'fixed top-[var(--atmo-nav-top,0px)] bottom-0 left-0 z-40 flex w-18 flex-col items-center bg-transparent pt-6 pb-5 max-sm:top-auto max-sm:right-0 max-sm:h-[calc(62px+env(safe-area-inset-bottom))] max-sm:w-full max-sm:flex-row max-sm:justify-around max-sm:bg-page max-sm:px-2 max-sm:pt-1.5 max-sm:pb-[calc(6px+env(safe-area-inset-bottom))]',
+				'fixed top-[var(--atmo-nav-top,0px)] bottom-0 left-0 z-40 flex w-18 flex-col items-center bg-transparent pt-6 pb-5 max-sm:top-auto max-sm:right-0 max-sm:h-[calc(62px+env(safe-area-inset-bottom))] max-sm:w-full max-sm:flex-row max-sm:justify-around max-sm:bg-base-50 max-sm:px-2 max-sm:pt-1.5 max-sm:pb-[calc(6px+env(safe-area-inset-bottom))] dark:max-sm:bg-base-925',
 				mobile === 'drawer' && 'max-sm:hidden',
 				className
 			)}
@@ -139,18 +141,18 @@
 									class={cn(
 										'relative size-11 rounded-(--atmo-radius-button) max-sm:size-10',
 										(!item.variant || item.variant === 'ghost') &&
-											'text-muted hover:bg-recess/55 aria-[current=page]:text-action',
+											'text-base-600 hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))]/55 aria-[current=page]:text-accent-700 dark:text-base-400 dark:hover:bg-base-950/55 dark:aria-[current=page]:text-accent-300',
 										item.primary && 'mt-2 max-sm:mt-0',
 										item.primary &&
 											(!item.variant || item.variant === 'ghost') &&
-											'text-action hover:text-action',
+											'text-accent-700 hover:text-accent-700 dark:text-accent-300 dark:hover:text-accent-300',
 										backed &&
 											(!item.variant || item.variant === 'ghost') &&
-											'bg-recess/45 hover:bg-recess/75'
+											'bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))]/45 hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))]/75 dark:bg-base-950/45 dark:hover:bg-base-950/75'
 									)}
 								>
 									<Icon img={item.icon} size={22} />{#if item.badge}<span
-											class="absolute top-2 right-1.5 size-1.5 rounded-full bg-action"
+											class="absolute top-2 right-1.5 size-1.5 rounded-full bg-accent-700 dark:bg-accent-300"
 											aria-hidden="true"
 										></span>{/if}
 								</Button>
@@ -160,7 +162,7 @@
 							side="right"
 							sideOffset={10}
 							collisionPadding={12}
-							class="z-60 max-w-[calc(100vw-2rem)] rounded-lg border border-line bg-field px-2.5 py-1.5 font-sans text-xs text-ink"
+							class="z-60 max-w-[calc(100vw-2rem)] rounded-lg border border-base-300 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] px-2.5 py-1.5 font-sans text-xs text-base-950 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-975 dark:text-base-50"
 							>{item.label}</Tooltip.Content
 						></Tooltip.Root
 					>

package/dist/components/InlineEditor.svelte

@@ -49,7 +49,7 @@
 				...(searchActors
 					? [
 							Mention.configure({
-								HTMLAttributes: { class: 'text-action' },
+								HTMLAttributes: { class: 'text-accent-700 dark:text-accent-300' },
 								suggestion: mentionSuggestions(searchActors, () => host)
 							})
 						]
@@ -66,7 +66,7 @@
 						? { 'aria-autocomplete': 'list', 'aria-expanded': 'false', 'aria-haspopup': 'listbox' }
 						: { 'aria-multiline': String(!singleLine) }),
 					class:
-						'min-h-[1.5em] outline-none whitespace-pre-wrap break-words [&_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&_p.is-editor-empty:first-child]:before:text-muted [&_p.is-editor-empty:first-child]:before:float-left [&_p.is-editor-empty:first-child]:before:pointer-events-none [&_p.is-editor-empty:first-child]:before:h-0'
+						'min-h-[1.5em] outline-none whitespace-pre-wrap break-words [&_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)] [&_p.is-editor-empty:first-child]:before:text-base-600 dark:[&_p.is-editor-empty:first-child]:before:text-base-400 [&_p.is-editor-empty:first-child]:before:float-left [&_p.is-editor-empty:first-child]:before:pointer-events-none [&_p.is-editor-empty:first-child]:before:h-0'
 				},
 				handleKeyDown: (view, event) =>
 					singleLine &&
@@ -111,7 +111,7 @@
 <div
 	bind:this={host}
 	class={cn(
-		'relative min-w-0 rounded-sm focus-within:outline-2 focus-within:outline-offset-4 focus-within:outline-focus',
+		'relative min-w-0 rounded-sm focus-within:outline-2 focus-within:outline-offset-4 focus-within:outline-accent-700 dark:focus-within:outline-accent-300',
 		className
 	)}
 	data-slot="inline-editor"

package/dist/components/InsetImage.svelte

@@ -18,7 +18,7 @@
 
 <figure
 	class={cn(
-		'relative m-0 aspect-(--ak-image-ratio) overflow-hidden rounded-ui border border-line after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_2px_7px_#0005]',
+		'relative m-0 aspect-(--ak-image-ratio) overflow-hidden rounded-ui border border-base-300 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_2px_7px_#0005] dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]',
 		className
 	)}
 	{style}

package/dist/components/Label.svelte

@@ -13,7 +13,7 @@
 	{...rest}
 	bind:this={ref}
 	class={cn(
-		'inline-flex items-center gap-2.5 text-[.8125rem] leading-normal font-medium text-ink',
+		'inline-flex items-center gap-2.5 text-[.8125rem] leading-normal font-medium text-base-950 dark:text-base-50',
 		className
 	)}>{@render children?.()}</label
 >

package/dist/components/LinkCard.svelte

@@ -20,7 +20,7 @@
 	target="_blank"
 	rel="noopener noreferrer"
 	class={cn(
-		'block overflow-hidden rounded-ui border border-line bg-surface text-ink no-underline hover:border-control-line',
+		'block overflow-hidden rounded-ui border border-base-300 bg-base-50 text-base-950 no-underline hover:border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-900 dark:text-base-50 dark:hover:border-base-800',
 		focus,
 		className
 	)}
@@ -32,15 +32,17 @@
 				class="aspect-[1.91/1] w-full object-cover"
 				loading="lazy"
 			/><span
-				class="pointer-events-none absolute inset-0 [box-shadow:inset_0_0_0_1px_var(--ui-shadow),inset_0_2px_5px_var(--ui-shadow)]"
+				class="pointer-events-none absolute inset-0 shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_2px_5px_color-mix(in_srgb,var(--base-950)_8%,transparent)] dark:shadow-[inset_0_0_0_1px_#0006,inset_0_2px_5px_#0006]"
 			></span>
 		</div>{/if}
 	<div class="p-3">
 		<strong class="block text-sm font-medium">{meta.title || href}</strong>
-		{#if meta.description}<p class="mt-1 line-clamp-2 text-xs leading-relaxed text-muted">
+		{#if meta.description}<p
+				class="mt-1 line-clamp-2 text-xs leading-relaxed text-base-600 dark:text-base-400"
+			>
 				{meta.description}
 			</p>{/if}
-		<span class="mt-1 block truncate text-[.6875rem] text-muted"
+		<span class="mt-1 block truncate text-[.6875rem] text-base-600 dark:text-base-400"
 			>{href.replace(/^https?:\/\//, '')}</span
 		>
 	</div>

package/dist/components/Modal.svelte

@@ -49,7 +49,7 @@
 				escapeKeydownBehavior={dismissible ? 'close' : 'ignore'}
 				style={[inherited, style].filter(Boolean).join(';')}
 				class={cn(
-					'fixed top-1/2 left-1/2 z-50 max-h-[calc(100dvh-3rem)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-panel border border-line bg-page p-6 font-sans text-ink outline-none sm:p-7',
+					'fixed top-1/2 left-1/2 z-50 max-h-[calc(100dvh-3rem)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-panel border border-base-300 bg-base-50 p-6 font-sans text-base-950 outline-none sm:p-7 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-925 dark:text-base-50',
 					className
 				)}
 				onOpenAutoFocus={(event) => {
@@ -74,7 +74,7 @@
 									{title}
 								</h2>{/snippet}
 						</Primitive.Title>{#if description}<Primitive.Description
-								class="mt-2.5 text-[.8125rem] leading-relaxed text-muted"
+								class="mt-2.5 text-[.8125rem] leading-relaxed text-base-600 dark:text-base-400"
 								>{description}</Primitive.Description
 							>{/if}
 					</div>
@@ -82,7 +82,7 @@
 						disabled={!dismissible}
 						aria-label="Close dialog"
 						class={cn(
-							'-mt-1 -mr-2 inline-grid size-9 shrink-0 cursor-pointer place-items-center rounded-ui text-muted hover:bg-recess hover:text-ink disabled:pointer-events-none disabled:opacity-40',
+							'-mt-1 -mr-2 inline-grid size-9 shrink-0 cursor-pointer place-items-center rounded-ui text-base-600 hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] hover:text-base-950 disabled:pointer-events-none disabled:opacity-40 dark:text-base-400 dark:hover:bg-base-950 dark:hover:text-base-50',
 							focus
 						)}><Icon img={X} size={19} /></Primitive.Close
 					>

package/dist/components/NestedComments.svelte

@@ -39,11 +39,12 @@
 							{href}
 							target="_blank"
 							rel="noopener noreferrer"
-							class="font-medium text-ink hover:underline">{comment.author.name}</a
-						><span class="truncate text-muted">@{comment.author.handle}</span
+							class="font-medium text-base-950 hover:underline dark:text-base-50"
+							>{comment.author.name}</a
+						><span class="truncate text-base-600 dark:text-base-400">@{comment.author.handle}</span
 						>{#if comment.createdAt && !Number.isNaN(Date.parse(comment.createdAt))}<time
 								datetime={comment.createdAt}
-								class="text-[.6875rem] text-muted"
+								class="text-[.6875rem] text-base-600 dark:text-base-400"
 								>{new Date(comment.createdAt).toLocaleDateString(undefined, {
 									month: 'short',
 									day: 'numeric'
@@ -51,21 +52,23 @@
 							>{/if}
 					</div>
 					<PostContent post={comment} {socialClient} {embedProviders} />
-					<div class="mt-1 flex items-center gap-5 text-xs text-muted">
+					<div class="mt-1 flex items-center gap-5 text-xs text-base-600 dark:text-base-400">
 						{#each [{ icon: MessageCircle, count: comment.replyCount ?? 0, singular: 'reply', plural: 'replies' }, { icon: Repeat2, count: comment.repostCount ?? 0, singular: 'repost', plural: 'reposts' }, { icon: Heart, count: comment.likeCount ?? 0, singular: 'like', plural: 'likes' }] as action (action.singular)}
 							<a
 								{href}
 								target="_blank"
 								rel="noopener noreferrer"
 								aria-label={`${action.count} ${action.count === 1 ? action.singular : action.plural}`}
-								class={`inline-flex min-h-8 items-center gap-1.5 rounded-ui tabular-nums transition-colors hover:text-action ${focus}`}
+								class={`inline-flex min-h-8 items-center gap-1.5 rounded-ui tabular-nums transition-colors hover:text-accent-700 dark:hover:text-accent-300 ${focus}`}
 								><Icon img={action.icon} size={16} /><span>{action.count}</span></a
 							>
 						{/each}
 					</div>
 				</div>
 			</div>
-			{#if comment.replies?.length}<div class="mt-4 border-l border-line pl-3 sm:ml-4 sm:pl-6">
+			{#if comment.replies?.length}<div
+					class="mt-4 border-l border-base-300 pl-3 sm:ml-4 sm:pl-6 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
+				>
 					<NestedComments comments={comment.replies} {socialClient} {embedProviders} />
 				</div>{/if}
 		</article>

package/dist/components/PhotoGrid.svelte

@@ -21,7 +21,7 @@
 		{#if photo.contentWarning && !revealed.has(i)}
 			<button
 				type="button"
-				class="mb-2 block w-full break-inside-avoid-column rounded-lg border border-line p-3 text-sm text-muted"
+				class="mb-2 block w-full break-inside-avoid-column rounded-lg border border-base-300 p-3 text-sm text-base-600 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:text-base-400"
 				style:aspect-ratio={photo.width && photo.height ? `${photo.width} / ${photo.height}` : '1'}
 				onclick={() => (revealed = new Set([...revealed, i]))}
 				>Content warning · Show photo {i + 1}</button

package/dist/components/Popover.svelte

@@ -39,7 +39,7 @@
 			{sideOffset}
 			style={[inherited, style].filter(Boolean).join(';')}
 			class={cn(
-				'z-50 max-w-[calc(100vw-2rem)] rounded-panel border border-line bg-page p-4 font-sans text-ink outline-none',
+				'z-50 max-w-[calc(100vw-2rem)] rounded-panel border border-base-300 bg-base-50 p-4 font-sans text-base-950 outline-none dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-900 dark:text-base-50',
 				className
 			)}
 		>

package/dist/components/PostComposer.svelte

@@ -33,8 +33,8 @@
 />
 <p
 	class={length > maxLength
-		? 'red mt-2 text-right text-xs text-action'
-		: 'mt-2 text-right text-xs text-muted'}
+		? 'red mt-2 text-right text-xs text-accent-700 dark:text-accent-300'
+		: 'mt-2 text-right text-xs text-base-600 dark:text-base-400'}
 	aria-live="polite"
 >
 	{length} / {maxLength}

package/dist/components/PostContent.svelte

@@ -34,7 +34,7 @@
 	<div class="mt-3">
 		{#if embed.type === 'external'}<ExternalEmbed {embed} providers={embedProviders} />
 		{:else if embed.type === 'images'}<div
-				class="grid gap-1 overflow-hidden rounded-ui border border-line"
+				class="grid gap-1 overflow-hidden rounded-ui border border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
 				class:grid-cols-2={embed.images.length > 1}
 			>
 				{#each embed.images as image, imageIndex (imageIndex)}<a
@@ -64,7 +64,7 @@
 				href={safeWebUrl(embed.href)}
 				target="_blank"
 				rel="noopener noreferrer"
-				class={`flex items-start gap-3 rounded-ui border border-line p-3 text-ink no-underline hover:border-control-line ${focus}`}
+				class={`flex items-start gap-3 rounded-ui border border-base-300 p-3 text-base-950 no-underline hover:border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:text-base-50 dark:hover:border-base-800 ${focus}`}
 			>
 				{#if safeWebUrl(embed.image)}<img
 						src={safeWebUrl(embed.image)}
@@ -72,30 +72,32 @@
 						loading="lazy"
 						class="size-10 shrink-0 rounded-ui object-cover"
 					/>{:else}<span
-						class="flex size-10 shrink-0 items-center justify-center rounded-ui bg-surface text-muted"
+						class="flex size-10 shrink-0 items-center justify-center rounded-ui bg-base-50 text-base-600 dark:bg-base-900 dark:text-base-400"
 						><Icon img={kind.icon} size={22} /></span
 					>{/if}
 				<div class="min-w-0">
-					<p class="truncate text-xs text-muted">
+					<p class="truncate text-xs text-base-600 dark:text-base-400">
 						{kind.label}{embed.handle ? ` · @${embed.handle}` : ''}
 					</p>
 					<p class="mt-0.5 text-sm font-medium break-words">{embed.title}</p>
 					{#if embed.description}<p
-							class="mt-1 line-clamp-3 text-xs leading-relaxed break-words text-muted"
+							class="mt-1 line-clamp-3 text-xs leading-relaxed break-words text-base-600 dark:text-base-400"
 						>
 							{embed.description}
 						</p>{/if}
 				</div>
 			</a>
-		{:else if embed.type === 'quote'}<div class="rounded-ui border border-line p-3">
+		{:else if embed.type === 'quote'}<div
+				class="rounded-ui border border-base-300 p-3 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
+			>
 				{#if embed.post}<a
 						href={socialPostUrl(embed.post.uri, socialClient) ?? safeWebUrl(embed.post.href)}
 						target="_blank"
 						rel="noopener noreferrer"
-						class="mb-2 block text-xs font-medium text-muted"
+						class="mb-2 block text-xs font-medium text-base-600 dark:text-base-400"
 						>{embed.post.author.name} · @{embed.post.author.handle}</a
 					><PostContent post={embed.post} {socialClient} {embedProviders} />{:else}<p
-						class="text-xs text-muted"
+						class="text-xs text-base-600 dark:text-base-400"
 					>
 						{embed.reason === 'blocked'
 							? 'Post blocked'
@@ -105,7 +107,7 @@
 					</p>{/if}
 			</div>
 		{:else if embed.type === 'unsupported'}<p
-				class="rounded-ui border border-line p-3 text-xs text-muted"
+				class="rounded-ui border border-base-300 p-3 text-xs text-base-600 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:text-base-400"
 			>
 				Embed unavailable
 			</p>{/if}

package/dist/components/PostVideo.svelte

@@ -69,6 +69,6 @@
 	href={safeWebUrl(href)}
 	target="_blank"
 	rel="noopener noreferrer"
-	class="mt-1 inline-flex items-center gap-1 text-xs text-action hover:underline"
+	class="mt-1 inline-flex items-center gap-1 text-xs text-accent-700 hover:underline dark:text-accent-300"
 	>Watch on Bluesky <Icon img={ArrowUpRight} size={14} /></a
 >

package/dist/components/RichText.svelte

@@ -61,8 +61,9 @@
 	}
 
 	const linkClass =
-		'text-action underline decoration-action/40 underline-offset-2 hover:decoration-action';
-	const codeClass = 'rounded bg-recess px-1 py-0.5 font-mono text-[0.875em]';
+		'text-accent-700 dark:text-accent-300 underline decoration-accent-700/40 dark:decoration-accent-300/40 underline-offset-2 hover:decoration-accent-700 dark:hover:decoration-accent-300';
+	const codeClass =
+		'rounded bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:bg-base-950 px-1 py-0.5 font-mono text-[0.875em]';
 </script>
 
 {#snippet inlines(children: unknown, inLink: boolean, depth: number)}
@@ -108,7 +109,9 @@
 						: 'text-base'} leading-snug font-semibold"
 				>{@render inlines(node.children, false, depth + 1)}</svelte:element
 			>
-		{:else if node.type === 'blockquote'}<blockquote class="space-y-3 border-l-2 border-line pl-4">
+		{:else if node.type === 'blockquote'}<blockquote
+				class="space-y-3 border-l-2 border-base-300 pl-4 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
+			>
 				{@render blocks(node.children, depth + 1)}
 			</blockquote>
 		{:else if node.type === 'list'}<svelte:element
@@ -123,20 +126,29 @@
 				{/each}
 			</svelte:element>
 		{:else if node.type === 'codeBlock'}<pre
-				class="overflow-x-auto rounded-md bg-recess p-3 font-mono text-[0.875em]"><code
+				class="overflow-x-auto rounded-md bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] p-3 font-mono text-[0.875em] dark:bg-base-950"><code
 					>{string(node.value)}</code
 				></pre>
-		{:else if node.type === 'thematicBreak'}<hr class="border-line" />
+		{:else if node.type === 'thematicBreak'}<hr
+				class="border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
+			/>
 		{:else}<p>{inlineText(node, depth)}</p>{/if}
 	{/each}
 {/snippet}
 
 {#if doc.markdown}
-	<div class={cn('space-y-3 leading-relaxed wrap-anywhere text-ink', className)}>
+	<div
+		class={cn('space-y-3 leading-relaxed wrap-anywhere text-base-950 dark:text-base-50', className)}
+	>
 		{@render blocks(doc.children, 0)}
 	</div>
 {:else}
-	<p class={cn('leading-relaxed wrap-anywhere whitespace-pre-wrap text-ink', className)}>
+	<p
+		class={cn(
+			'leading-relaxed wrap-anywhere whitespace-pre-wrap text-base-950 dark:text-base-50',
+			className
+		)}
+	>
 		{#each nodes(doc.children) as block, index (index)}{@render inlines(
 				block.children,
 				false,

package/dist/components/Select.svelte

@@ -6,6 +6,7 @@
 	import { ChevronDown } from '@sketchyicons/svelte';
 	let {
 		class: className,
+		wrapperClass,
 		value = $bindable<string | undefined>(),
 		ref = $bindable(null),
 		children,
@@ -13,11 +14,13 @@
 	}: Omit<HTMLSelectAttributes, 'value' | 'multiple'> & {
 		value?: string;
 		multiple?: never;
+		/** Layout/width classes for the field and its arrow; class styles the native select. */
+		wrapperClass?: string;
 		ref?: HTMLSelectElement | null;
 	} = $props();
 </script>
 
-<span class="relative block">
+<span data-slot="select-wrapper" class={cn('relative block', wrapperClass)}>
 	<select
 		{...rest}
 		bind:value
@@ -29,6 +32,6 @@
 	<Icon
 		img={ChevronDown}
 		size={17}
-		class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-muted"
+		class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-base-600 dark:text-base-400"
 	/>
 </span>

package/dist/components/Select.svelte.d.ts

@@ -2,6 +2,8 @@ import type { HTMLSelectAttributes } from 'svelte/elements';
 type $$ComponentProps = Omit<HTMLSelectAttributes, 'value' | 'multiple'> & {
     value?: string;
     multiple?: never;
+    /** Layout/width classes for the field and its arrow; class styles the native select. */
+    wrapperClass?: string;
     ref?: HTMLSelectElement | null;
 };
 declare const Select: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;

package/dist/components/SocialClientPicker.svelte

@@ -42,7 +42,7 @@
 				placeholder="https://your-client.example"
 				aria-describedby={`${id}-hint`}
 			/>
-			<p id={`${id}-hint`} class="text-sm text-muted">
+			<p id={`${id}-hint`} class="text-sm text-base-600 dark:text-base-400">
 				Use a web client with Bluesky-style profile links.
 			</p>
 		</div>