@atmo-dev/kit 0.9.0 → 0.10.0

package/dist/components/StreamplacePicker.svelte

@@ -87,7 +87,7 @@
 			>{replacing ? 'Replace stream' : 'Add stream'}</Button
 		>
 	</div>
-	{#if replacing}<p class="mt-3 text-sm text-muted">
+	{#if replacing}<p class="mt-3 text-sm text-base-600 dark:text-base-400">
 			This replaces the current Streamplace link.
 		</p>{/if}
 	{#if error}<p class="mt-3 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>{/if}

package/dist/components/Subheading.svelte

@@ -17,6 +17,8 @@
 	this={`h${level}`}
 	{...rest}
 	bind:this={ref}
-	class={cn('m-0 text-lg leading-snug font-medium tracking-tight text-ink', className)}
-	>{@render children?.()}</svelte:element
+	class={cn(
+		'm-0 text-lg leading-snug font-medium tracking-tight text-base-950 dark:text-base-50',
+		className
+	)}>{@render children?.()}</svelte:element
 >

package/dist/components/Surface.svelte

@@ -28,8 +28,9 @@
 	bind:this={ref}
 	data-slot="surface"
 	class={cn(
-		'rounded-panel p-6 text-ink',
-		variant === 'recessed' && 'border border-line bg-recess shadow-(--ui-recess-shadow)',
+		'rounded-panel p-6 text-base-950 dark:text-base-50',
+		variant === 'recessed' &&
+			'border border-base-300 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:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-950 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]',
 		as === 'button' &&
 			cn(
 				'cursor-pointer touch-manipulation disabled:pointer-events-none disabled:opacity-45',

package/dist/components/Tabs.svelte

@@ -29,13 +29,13 @@
 <Primitive.Root {...rest} bind:value class={cn('min-w-0', className)}>
 	<Primitive.List
 		aria-label={label}
-		class="flex w-fit max-w-full flex-wrap items-center gap-1 rounded-[12px_14px_11px_13px] border border-line bg-recess p-1 shadow-[inset_0_2px_4px_var(--ui-shadow)]"
+		class="flex w-fit max-w-full flex-wrap items-center gap-1 rounded-[12px_14px_11px_13px] border border-base-300 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] p-1 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent)] dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-950 dark:shadow-[inset_0_2px_4px_#0006]"
 	>
 		{#each items as item (item.value)}<Primitive.Trigger
 				value={item.value}
 				disabled={item.disabled}
 				class={cn(
-					'cursor-pointer rounded-[8px_10px_7px_9px] px-3.5 py-1.75 text-[.8125rem] leading-normal text-muted hover:text-ink disabled:cursor-default disabled:opacity-45 data-[state=active]:bg-surface data-[state=active]:text-ink',
+					'cursor-pointer rounded-[8px_10px_7px_9px] px-3.5 py-1.75 text-[.8125rem] leading-normal text-base-600 hover:text-base-950 disabled:cursor-default disabled:opacity-45 data-[state=active]:bg-base-50 data-[state=active]:text-base-950 dark:text-base-400 dark:hover:text-base-50 dark:data-[state=active]:bg-base-900 dark:data-[state=active]:text-base-50',
 					focus
 				)}>{item.label}</Primitive.Trigger
 			>{/each}

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

@@ -2,7 +2,9 @@
 	import { TimeField } from 'bits-ui';
 	import { Time } from '@internationalized/date';
 	import { untrack } from 'svelte';
-	import { Icon, IconButton, Popover } from '../index.js';
+	import Icon from './Icon.svelte';
+	import IconButton from './IconButton.svelte';
+	import Popover from './Popover.svelte';
 	import { Clock } from '@sketchyicons/svelte';
 
 	let {
@@ -59,7 +61,7 @@
 </script>
 
 <div
-	class="flex h-11 items-center gap-1 rounded-ui border border-line bg-recess px-2 text-sm text-ink shadow-(--ui-recess-shadow) focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-focus hover:border-control-hover"
+	class="flex h-11 items-center gap-1 rounded-ui border border-base-300 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] px-2 text-sm 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)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-accent-700 hover:border-base-400 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:focus-within:outline-accent-300 dark:hover:border-base-700"
 >
 	<TimeField.Root
 		bind:value={internalValue}
@@ -71,10 +73,11 @@
 		<TimeField.Label class="sr-only">{label}</TimeField.Label>
 		<TimeField.Input class="whitespace-nowrap">
 			{#snippet children({ segments })}{#each segments as segment, i (segment.part + i)}
-					{#if segment.part === 'literal'}<span class="text-muted">{segment.value}</span
+					{#if segment.part === 'literal'}<span class="text-base-600 dark:text-base-400"
+							>{segment.value}</span
 						>{:else}<TimeField.Segment
 							part={segment.part}
-							class="rounded px-0.5 hover:bg-recess focus:bg-accent-soft focus:outline-none"
+							class="rounded px-0.5 hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] focus:bg-accent-50 focus:outline-none dark:hover:bg-base-950 dark:focus:bg-[color-mix(in_srgb,var(--accent-950)_65%,var(--base-950))]"
 							>{segment.value}</TimeField.Segment
 						>{/if}
 				{/each}{/snippet}
@@ -101,15 +104,15 @@
 		<div bind:this={listEl}>
 			{#each slots as slot (slot.key)}<button
 					type="button"
-					class="flex w-full items-center justify-between gap-4 rounded-ui px-3 py-1.5 text-left text-sm text-ink hover:bg-recess aria-pressed:bg-accent-soft aria-pressed:text-action"
+					class="flex w-full items-center justify-between gap-4 rounded-ui px-3 py-1.5 text-left text-sm text-base-950 hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] aria-pressed:bg-accent-50 aria-pressed:text-accent-700 dark:text-base-50 dark:hover:bg-base-950 dark:aria-pressed:bg-[color-mix(in_srgb,var(--accent-950)_65%,var(--base-950))] dark:aria-pressed:text-accent-300"
 					aria-pressed={value === slot.key}
 					data-selected={value === slot.key ? '' : undefined}
 					onclick={() => {
 						value = slot.key;
 						isOpen = false;
 					}}
-					>{slot.label}{#if durationLabel(slot.key)}<span class="text-xs text-muted"
-							>{durationLabel(slot.key)}</span
+					>{slot.label}{#if durationLabel(slot.key)}<span
+							class="text-xs text-base-600 dark:text-base-400">{durationLabel(slot.key)}</span
 						>{/if}</button
 				>{/each}
 		</div>

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

@@ -1,5 +1,8 @@
 <script lang="ts">
-	import { Button, Icon, Input, Popover } from '../index.js';
+	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
+	import Input from './Input.svelte';
+	import Popover from './Popover.svelte';
 	import { Globe } from '@sketchyicons/svelte';
 	let { value = $bindable('') }: { value: string } = $props();
 	let isOpen = $state(false);
@@ -38,12 +41,12 @@
 	{#snippet trigger({ props })}<Button
 			{...props}
 			variant="secondary"
-			class="min-h-11 w-full justify-start gap-2.5 border-line bg-recess px-3 text-xs shadow-(--ui-recess-shadow) hover:border-control-hover"
+			class="min-h-11 w-full justify-start gap-2.5 border-base-300 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] px-3 text-xs 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)] hover:border-base-400 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-950 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002] dark:hover:border-base-700"
 			aria-label={`Timezone: ${value}`}
 		>
-			<Icon img={Globe} size={17} class="text-muted" />
+			<Icon img={Globe} size={17} class="text-base-600 dark:text-base-400" />
 			<span class="min-w-0 flex-1 truncate text-left">{getCityName(value)}</span>
-			<span class="shrink-0 text-muted">{getOffset(value)}</span>
+			<span class="shrink-0 text-base-600 dark:text-base-400">{getOffset(value)}</span>
 		</Button>{/snippet}
 	<Input
 		type="search"
@@ -55,14 +58,19 @@
 	<div class="max-h-60 overflow-y-auto">
 		{#each filtered as tz (tz)}<button
 				type="button"
-				class="flex w-full items-center justify-between gap-3 rounded-ui px-3 py-2 text-left text-xs text-ink hover:bg-recess aria-pressed:bg-accent-soft aria-pressed:text-action"
+				class="flex w-full items-center justify-between gap-3 rounded-ui px-3 py-2 text-left text-xs text-base-950 hover:bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] aria-pressed:bg-accent-50 aria-pressed:text-accent-700 dark:text-base-50 dark:hover:bg-base-950 dark:aria-pressed:bg-[color-mix(in_srgb,var(--accent-950)_65%,var(--base-950))] dark:aria-pressed:text-accent-300"
 				aria-pressed={value === tz}
 				onclick={() => {
 					value = tz;
 					isOpen = false;
 					search = '';
-				}}><span>{getCityName(tz)}</span><span class="text-muted">{getOffset(tz)}</span></button
+				}}
+				><span>{getCityName(tz)}</span><span class="text-base-600 dark:text-base-400"
+					>{getOffset(tz)}</span
+				></button
 			>{/each}
-		{#if !filtered.length}<p class="p-3 text-xs text-muted">No results</p>{/if}
+		{#if !filtered.length}<p class="p-3 text-xs text-base-600 dark:text-base-400">
+				No results
+			</p>{/if}
 	</div>
 </Popover>

package/dist/components/ToggleGroup.svelte

@@ -24,7 +24,7 @@
 	bind:value
 	data-size={size}
 	class={cn(
-		'inline-flex flex-wrap gap-1 rounded-ui bg-recess p-1 [box-shadow:var(--ui-recess-shadow)]',
+		'inline-flex flex-wrap gap-1 rounded-ui bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] p-1 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]',
 		className
 	)}
 >

package/dist/components/ToggleGroupItem.svelte

@@ -16,7 +16,7 @@
 <ToggleGroup.Item
 	{...rest}
 	class={cn(
-		'cursor-pointer rounded-ui px-3 py-1.5 text-xs font-medium text-muted transition-colors duration-(--atmo-duration) hover:text-ink disabled:pointer-events-none disabled:opacity-45 data-[state=on]:bg-surface data-[state=on]:text-action motion-reduce:transition-none',
+		'cursor-pointer rounded-ui px-3 py-1.5 text-xs font-medium text-base-600 transition-colors duration-(--atmo-duration) hover:text-base-950 disabled:pointer-events-none disabled:opacity-45 data-[state=on]:bg-base-50 data-[state=on]:text-accent-700 motion-reduce:transition-none dark:text-base-400 dark:hover:text-base-50 dark:data-[state=on]:bg-base-900 dark:data-[state=on]:text-accent-300',
 		focus,
 		size === 'xs' && 'px-2 py-1 text-[.6875rem]',
 		className

package/dist/components/UserProfile.svelte

@@ -50,11 +50,11 @@
 	let pronouns = $derived(profile.pronouns?.trim().toLowerCase());
 </script>
 
-<section class={cn('min-w-0 text-ink', className)} aria-label="Profile">
+<section class={cn('min-w-0 text-base-950 dark:text-base-50', className)} aria-label="Profile">
 	{#if banner}
 		<div
 			data-slot="profile-banner"
-			class="relative aspect-3/1 w-full overflow-hidden rounded-panel bg-recess"
+			class="relative aspect-3/1 w-full overflow-hidden rounded-panel bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:bg-base-950"
 		>
 			<img
 				src={banner}
@@ -75,7 +75,10 @@
 			{name}
 			src={safeProfileUrl(profile.avatar)}
 			size={96}
-			class={cn('relative size-20 sm:size-24', banner && '-mt-10 ring-4 ring-page sm:-mt-12')}
+			class={cn(
+				'relative size-20 sm:size-24',
+				banner && '-mt-10 ring-4 ring-base-50 sm:-mt-12 dark:ring-base-925'
+			)}
 		/>
 		<div class={cn('flex flex-wrap items-center gap-2', banner && 'pt-3')}>
 			<Button {href} target="_blank" rel="noopener noreferrer" variant="secondary" size="sm">
@@ -88,7 +91,9 @@
 		<h1 class="text-2xl font-semibold tracking-tight wrap-anywhere sm:text-3xl">
 			<bdi>{name}</bdi>
 		</h1>
-		<div class="mt-1 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-muted">
+		<div
+			class="mt-1 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-base-600 dark:text-base-400"
+		>
 			{#if profile.handle}<a
 					{href}
 					target="_blank"
@@ -103,7 +108,7 @@
 			{#each displayedMetrics as metric (metric.label)}
 				{#if metric.value !== undefined}<div class="flex gap-1">
 						<dd class="font-semibold">{metric.value.toLocaleString('en')}</dd>
-						<dt class="text-muted">{metric.label}</dt>
+						<dt class="text-base-600 dark:text-base-400">{metric.label}</dt>
 					</div>{/if}
 			{/each}
 		</dl>
@@ -114,7 +119,7 @@
 						href={segment.href}
 						target={segment.href.startsWith('/') ? undefined : '_blank'}
 						rel={segment.href.startsWith('/') ? undefined : 'noopener noreferrer nofollow ugc'}
-						class="text-action underline decoration-action/40 underline-offset-2 hover:decoration-action"
+						class="text-accent-700 underline decoration-accent-700/40 underline-offset-2 hover:decoration-accent-700 dark:text-accent-300 dark:decoration-accent-300/40 dark:hover:decoration-accent-300"
 						>{segment.text}</a
 					>{:else}{segment.text}{/if}{/each}
 		</p>
@@ -123,11 +128,13 @@
 		<ul aria-label="Profile links" class="mt-4 flex flex-wrap gap-2">
 			{#each links as link (link.url)}
 				<li class="max-w-full min-w-0">
-					<a
+					<Button
 						href={link.url}
 						target="_blank"
 						rel="noopener noreferrer nofollow ugc"
-						class="inline-flex max-w-full items-center gap-2 rounded-ui border border-line px-3 py-1.5 text-sm hover:bg-recess"
+						variant="secondary"
+						size="sm"
+						class="max-w-full"
 					>
 						{#if link.icon && failedLinkIcons[link.url] !== link.icon}
 							<img
@@ -143,7 +150,7 @@
 							/>
 						{/if}
 						<span class="min-w-0 wrap-anywhere">{link.title || new URL(link.url).hostname}</span>
-					</a>
+					</Button>
 				</li>
 			{/each}
 		</ul>

package/dist/components/WorkspaceSidebar.svelte

@@ -71,7 +71,7 @@
 		style={style ?? undefined}
 		data-slot="workspace-sidebar"
 		class={cn(
-			'top-[calc(var(--atmo-nav-top,0px)+12px)] bottom-3 left-3 flex h-auto max-h-none w-[min(280px,calc(100%-24px))] max-w-none translate-x-0 translate-y-0 flex-col overflow-hidden rounded-[21px_18px_23px_19px] bg-recess p-3 shadow-(--ui-recess-shadow) sm:p-3 [&>header]:mb-3 [&>header]:px-2 [&>header]:pt-2 [&>header_h2]:text-sm',
+			'top-[calc(var(--atmo-nav-top,0px)+12px)] bottom-3 left-3 flex h-auto max-h-none w-[min(280px,calc(100%-24px))] max-w-none translate-x-0 translate-y-0 flex-col overflow-hidden rounded-[21px_18px_23px_19px] bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] p-3 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)] sm:p-3 dark:bg-base-950 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002] [&>header]:mb-3 [&>header]:px-2 [&>header]:pt-2 [&>header_h2]:text-sm',
 			className
 		)}
 	>

package/dist/components/legal/LegalDocument.svelte

@@ -13,11 +13,17 @@
 	const uid = $props.id();
 </script>
 
-<article {...rest} class={cn('mx-auto max-w-3xl px-6 py-10 text-sm leading-7 text-ink', className)}>
+<article
+	{...rest}
+	class={cn(
+		'mx-auto max-w-3xl px-6 py-10 text-sm leading-7 text-base-950 dark:text-base-50',
+		className
+	)}
+>
 	<header class="mb-8">
 		<h1 class="m-0 text-3xl font-semibold tracking-tight">{document.title}</h1>
 		{#if document.updated}
-			<p class="mt-3 text-muted">
+			<p class="mt-3 text-base-600 dark:text-base-400">
 				Last updated: <time datetime={document.updated}>{document.updated}</time>
 			</p>
 		{/if}
@@ -44,7 +50,7 @@
 								<li>
 									{#if safeLegalHref(link.href, true)}<a
 											href={safeLegalHref(link.href, true)}
-											class="rounded underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus"
+											class="rounded underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300"
 											>{link.label}</a
 										>{:else}{link.label}{/if}
 								</li>

package/dist/components/legal/LegalFooter.svelte

@@ -17,11 +17,11 @@
 	const showReportAction = $derived(links.report !== false && !!reportAction);
 	const items = $derived(legalFooterItems(showReportAction ? { ...links, report: false } : links));
 	const linkClass =
-		'rounded text-inherit underline-offset-4 hover:text-ink hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus';
+		'rounded text-inherit underline-offset-4 hover:text-base-950 dark:hover:text-base-50 hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-300';
 </script>
 
 {#if items.length || showReportAction}
-	<footer {...rest} class={cn('py-8 text-xs text-muted', className)}>
+	<footer {...rest} class={cn('py-8 text-xs text-base-600 dark:text-base-400', className)}>
 		<nav aria-label="Legal and contact">
 			<ul class="m-0 flex list-none flex-wrap items-center justify-center gap-x-5 gap-y-3 p-0">
 				{#each items as item, index (index)}

package/dist/components/login/ActorSearchField.svelte

@@ -145,7 +145,7 @@
 	<Icon
 		img={AtSign}
 		size={18}
-		class="pointer-events-none absolute top-[13px] left-3 z-1 text-muted"
+		class="pointer-events-none absolute top-[13px] left-3 z-1 text-base-600 dark:text-base-400"
 	/>
 	{#if searchActors}
 		<Combobox.Root
@@ -190,12 +190,12 @@
 						sideOffset={6}
 						collisionPadding={12}
 						style={inherited}
-						class="z-70 max-h-[min(20rem,var(--bits-combobox-content-available-height))] w-(--bits-combobox-anchor-width) min-w-52 overflow-y-auto overscroll-contain rounded-ui border border-line bg-field p-1.5 font-sans text-ink outline-none"
+						class="z-70 max-h-[min(20rem,var(--bits-combobox-content-available-height))] w-(--bits-combobox-anchor-width) min-w-52 overflow-y-auto overscroll-contain rounded-ui border border-base-300 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] p-1.5 font-sans text-base-950 outline-none dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-975 dark:text-base-50"
 					>
 						{#each results as actor (actor.did)}<Combobox.Item
 								value={actor.handle}
 								label={actor.handle}
-								class="flex min-h-14 cursor-pointer items-center gap-3 rounded-ui px-2.5 py-2 outline-none data-highlighted:bg-accent-soft data-highlighted:text-action"
+								class="flex min-h-14 cursor-pointer items-center gap-3 rounded-ui px-2.5 py-2 outline-none data-highlighted:bg-accent-50 data-highlighted:text-accent-700 dark:data-highlighted:bg-[color-mix(in_srgb,var(--accent-950)_65%,var(--base-950))] dark:data-highlighted:text-accent-300"
 								><Avatar
 									name={actorName(actor)}
 									src={actor.avatar}
@@ -203,7 +203,8 @@
 									aria-hidden="true"
 								/><span class="grid min-w-0 gap-0.5"
 									><strong class="truncate text-[.8125rem] font-medium">{actorName(actor)}</strong
-									>{#if actor.displayName}<span class="truncate text-xs text-muted"
+									>{#if actor.displayName}<span
+											class="truncate text-xs text-base-600 dark:text-base-400"
 											>@{actor.handle}</span
 										>{/if}</span
 								></Combobox.Item
@@ -214,7 +215,7 @@
 		{#if status === 'loading'}<Icon
 				img={LoaderCircle}
 				size={16}
-				class="pointer-events-none absolute top-3.5 right-3 text-muted motion-safe:animate-spin"
+				class="pointer-events-none absolute top-3.5 right-3 text-base-600 motion-safe:animate-spin dark:text-base-400"
 			/>{/if}
 	{:else}<Input
 			{id}
@@ -232,7 +233,10 @@
 			data-autofocus
 			class="pl-10"
 		/>{/if}
-	{#if message}<p id={`${uid}-status`} class="mt-2 text-xs leading-relaxed text-muted">
+	{#if message}<p
+			id={`${uid}-status`}
+			class="mt-2 text-xs leading-relaxed text-base-600 dark:text-base-400"
+		>
 			{message}
 		</p>{/if}
 	<span class="sr-only" role="status">{announcement}</span>

package/dist/components/login/AtmosphereApps.svelte

@@ -13,7 +13,7 @@
 <!-- Existing brand marks, not replacement UI icons. Static: no endless decorative motion. -->
 <div class="flex items-center justify-between gap-2 py-2" aria-hidden="true">
 	{#each apps as src (src)}<span
-			class="size-5 shrink-0 bg-muted [mask-size:contain] [mask-position:center] [mask-repeat:no-repeat] opacity-70 sm:size-6"
+			class="size-5 shrink-0 bg-base-600 [mask-size:contain] [mask-position:center] [mask-repeat:no-repeat] opacity-70 sm:size-6 dark:bg-base-400"
 			class:scale-125={src === muSocial}
 			style:mask-image={`url("${src}")`}
 		></span>{/each}

package/dist/components/login/LoginForm.svelte

@@ -250,7 +250,7 @@
 	bind:this={ref}
 	aria-label={rest['aria-label'] ?? headingText}
 	aria-busy={busy}
-	class={cn('grid w-full min-w-0 gap-4 text-ink', className)}
+	class={cn('grid w-full min-w-0 gap-4 text-base-950 dark:text-base-50', className)}
 	data-slot="login-form"
 	novalidate
 	onsubmit={(event) => {
@@ -266,7 +266,9 @@
 				tabindex={step === 'login' ? undefined : -1}
 				class="text-[1.375rem] leading-snug tracking-tight outline-none">{headingText}</Heading
 			>
-			{#if descriptionText}<p class="text-[.8125rem] leading-relaxed text-muted">
+			{#if descriptionText}<p
+					class="text-[.8125rem] leading-relaxed text-base-600 dark:text-base-400"
+				>
 					{descriptionText}
 				</p>{/if}
 		</header>{/if}
@@ -290,7 +292,7 @@
 			>
 		{:else}
 			{#if selected}<div
-					class="flex min-h-15 items-center gap-3 rounded-ui border border-line bg-field py-2 pr-2 pl-3"
+					class="flex min-h-15 items-center gap-3 rounded-ui border border-base-300 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] py-2 pr-2 pl-3 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-975"
 					data-slot="selected-account"
 				>
 					<Avatar
@@ -300,8 +302,8 @@
 						aria-hidden="true"
 					/><span class="grid min-w-0 flex-1 gap-0.5"
 						><strong class="truncate text-[.8125rem] font-medium">{actorName(selected)}</strong
-						>{#if selected.displayName}<span class="truncate text-xs text-muted"
-								>@{selected.handle}</span
+						>{#if selected.displayName}<span
+								class="truncate text-xs text-base-600 dark:text-base-400">@{selected.handle}</span
 							>{/if}</span
 					><IconButton
 						label={`Clear @${selected.handle}`}
@@ -336,8 +338,10 @@
 					/>{/if}</Button
 			>
 		{/if}
-		{#if signup}<div class="grid gap-3 border-t border-line pt-4">
-				<p class="text-[.8125rem] text-muted">Don't have an account?</p>
+		{#if signup}<div
+				class="grid gap-3 border-t border-base-300 pt-4 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
+			>
+				<p class="text-[.8125rem] text-base-600 dark:text-base-400">Don't have an account?</p>
 				<Button
 					variant="secondary"
 					disabled={busy}
@@ -346,7 +350,9 @@
 				>
 			</div>{/if}
 	{:else if step === 'permissions'}
-		{#if pending}<p class="flex min-w-0 items-center gap-2 text-xs text-muted">
+		{#if pending}<p
+				class="flex min-w-0 items-center gap-2 text-xs text-base-600 dark:text-base-400"
+			>
 				<span class="shrink-0">Logging in as</span>
 				{#if pending.actor}<Avatar
 						name={actorName(pending.actor)}
@@ -371,7 +377,7 @@
 	{#if error}<p
 			id={`${uid}-error`}
 			role="alert"
-			class="red flex items-start gap-2 text-xs leading-relaxed text-action"
+			class="red flex items-start gap-2 text-xs leading-relaxed text-accent-700 dark:text-accent-300"
 		>
 			<Icon img={TriangleAlert} size={16} class="mt-0.5 shrink-0" />{error}
 		</p>{/if}

package/dist/components/login/PermissionFields.svelte

@@ -23,7 +23,11 @@
 	<legend class="sr-only">Requested permissions</legend>
 	{#each permissions as permission, index (permission.id)}
 		<div class="flex items-start gap-3">
-			<Icon img={permission.icon ?? ShieldCheck} size={20} class="mt-1 shrink-0 text-muted" />
+			<Icon
+				img={permission.icon ?? ShieldCheck}
+				size={20}
+				class="mt-1 shrink-0 text-base-600 dark:text-base-400"
+			/>
 			<div class="min-w-0 flex-1 space-y-1.5">
 				<Label
 					id={`${uid}-${index}-label`}
@@ -32,7 +36,10 @@
 				>
 					{permission.label}{permission.required ? ' (required)' : ''}
 				</Label>
-				<p id={`${uid}-${index}-description`} class="text-xs leading-relaxed text-muted">
+				<p
+					id={`${uid}-${index}-description`}
+					class="text-xs leading-relaxed text-base-600 dark:text-base-400"
+				>
 					{permission.description}
 				</p>
 			</div>

package/dist/components/login/RecentAccounts.svelte

@@ -29,7 +29,7 @@
 
 <div class="grid gap-2" bind:this={root} aria-label="Recent accounts">
 	{#each accounts as actor, index (actor.did)}<div
-			class="flex min-w-0 items-center gap-1 rounded-ui border border-line bg-field"
+			class="flex min-w-0 items-center gap-1 rounded-ui border border-base-300 bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] dark:bg-base-975"
 		>
 			<Button
 				data-account
@@ -41,8 +41,10 @@
 			>
 				<Avatar name={actorName(actor)} src={actor.avatar} size={34} aria-hidden="true" />
 				<span class="grid min-w-0 flex-1 gap-0.5"
-					><strong class="truncate text-[.8125rem] font-medium text-ink">{actorName(actor)}</strong
-					>{#if actor.displayName}<span class="truncate text-xs text-muted">@{actor.handle}</span
+					><strong class="truncate text-[.8125rem] font-medium text-base-950 dark:text-base-50"
+						>{actorName(actor)}</strong
+					>{#if actor.displayName}<span class="truncate text-xs text-base-600 dark:text-base-400"
+							>@{actor.handle}</span
 						>{/if}</span
 				><Icon img={ArrowRight} size={16} />
 			</Button>

package/dist/events/EventAttendees.svelte

@@ -102,7 +102,10 @@
 			>
 				<p class="mb-2 text-sm text-base-900 dark:text-base-50">
 					<span class="font-bold">{goingCount}</span>
-					<span class="text-xs font-semibold tracking-wider text-muted uppercase">Going</span>
+					<span
+						class="text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>Going</span
+					>
 				</p>
 				<div class="flex items-center">
 					<div class="flex flex-wrap -space-y-2 -space-x-4 pr-4">
@@ -139,7 +142,10 @@
 			>
 				<p class="mb-2 text-sm text-base-900 dark:text-base-50">
 					<span class="font-bold">{interestedCount}</span>
-					<span class="text-xs font-semibold tracking-wider text-muted uppercase">Interested</span>
+					<span
+						class="text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>Interested</span
+					>
 				</p>
 				<div class="flex items-center">
 					<div class="flex flex-wrap -space-y-2 -space-x-4 pr-4">
@@ -188,7 +194,7 @@
 						{person.name}
 					</p>
 					{#if person.handle}
-						<p class="truncate text-xs text-muted">
+						<p class="truncate text-xs text-base-600 dark:text-base-400">
 							@{person.handle}
 						</p>
 					{/if}

package/dist/events/EventCard.svelte

@@ -86,7 +86,7 @@
 
 <a
 	href={eventUrl(event, actor)}
-	class="group grid grid-cols-[5rem_minmax(0,1fr)] gap-3 rounded-ui outline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-focus sm:grid-cols-[6rem_minmax(0,1fr)] sm:gap-3.5"
+	class="group grid grid-cols-[5rem_minmax(0,1fr)] gap-3 rounded-ui outline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-accent-700 sm:grid-cols-[6rem_minmax(0,1fr)] sm:gap-3.5 dark:focus-visible:outline-accent-300"
 >
 	<div class="w-full">
 		{#if thumbnail}
@@ -94,11 +94,11 @@
 				src={thumbnail.url}
 				alt={thumbnail.alt}
 				loading="lazy"
-				class="block aspect-square w-full rounded-[14px_12px_15px_13px] border border-line object-cover"
+				class="block aspect-square w-full rounded-[14px_12px_15px_13px] border border-base-300 object-cover dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
 			/>
 		{:else}
 			<div
-				class="aspect-square w-full overflow-hidden rounded-[14px_12px_15px_13px] border border-line [&>svg]:h-full [&>svg]:w-full"
+				class="aspect-square w-full overflow-hidden rounded-[14px_12px_15px_13px] 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={96}
@@ -112,7 +112,7 @@
 	</div>
 
 	<div class="min-w-0 self-center">
-		<p class="flex items-center gap-1.5 text-xs font-medium text-muted">
+		<p class="flex items-center gap-1.5 text-xs font-medium text-base-600 dark:text-base-400">
 			<Icon img={CalendarDays} size={14} class="shrink-0" />
 			{#if isOngoing && event.endsAt}
 				Ends {formatEndsAt(event.endsAt)}
@@ -132,7 +132,9 @@
 			<span class="line-clamp-2">{event.name}</span>
 		</h3>
 		{#if location || mode}
-			<p class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+			<p
+				class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-base-600 dark:text-base-400"
+			>
 				{#if location}
 					<span class="inline-flex max-w-full min-w-0 items-center gap-1.5" title={location}>
 						<Icon img={MapPin} size={14} class="shrink-0" />

package/dist/events/EventComments.svelte

@@ -80,11 +80,11 @@
 	{/if}
 
 	{#if loading}
-		<p class="text-sm text-muted">Loading comments…</p>
+		<p class="text-sm text-base-600 dark:text-base-400">Loading comments…</p>
 	{:else if errorMessage}
-		<p class="text-sm text-muted">{errorMessage}</p>
+		<p class="text-sm text-base-600 dark:text-base-400">{errorMessage}</p>
 	{:else if comments.length === 0}
-		<p class="text-sm text-muted">No comments yet.</p>
+		<p class="text-sm text-base-600 dark:text-base-400">No comments yet.</p>
 	{:else}
 		<div class="not-prose comments-no-divider">
 			<NestedComments {comments} {socialClient} />