@treeseed/core 0.8.8 → 0.8.9

package/dist/components/content/ContentStatusLegend.astro

@@ -2,15 +2,15 @@
 import { CONTENT_STATUSES, CONTENT_STATUS_META } from '../../utils/content-status';
 ---
 
-<section class="border-t border-[color:var(--site-border-strong)] pt-8">
-	<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[color:var(--site-accent-strong)]">Content status legend</p>
+<section class="border-t border-[color:var(--ts-color-border-strong)] pt-8">
+	<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[color:var(--ts-color-accent-strong)]">Content status legend</p>
 	<div class="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-5">
 		{CONTENT_STATUSES.map((status) => {
 			const meta = CONTENT_STATUS_META[status];
 			return (
-				<div class:list={['border-l-4 bg-[color:var(--site-bg-soft)] px-4 py-4', meta.tone]}>
+				<div class:list={['border-l-4 bg-[color:var(--ts-color-canvas-subtle)] px-4 py-4', meta.tone]}>
 					<p class="font-semibold">{meta.label}</p>
-					<p class="mt-2 text-sm leading-7 text-[color:var(--site-text-muted)]">{meta.description}</p>
+					<p class="mt-2 text-sm leading-7 text-[color:var(--ts-color-text-muted)]">{meta.description}</p>
 				</div>
 			);
 		})}

package/dist/components/docs/BookFontControls.astro

@@ -113,9 +113,9 @@ const isBookPage = Boolean(getBookForPath(Astro.url.pathname));
 	.book-font-controls__buttons {
 		display: inline-flex;
 		align-items: center;
-		border: 1px solid var(--site-border-strong);
+		border: 1px solid var(--ts-color-border-strong);
 		border-radius: 999px;
-		background: color-mix(in srgb, var(--site-bg-elevated) 78%, white 22%);
+		background: color-mix(in srgb, var(--ts-color-canvas-subtle) 78%, white 22%);
 	}
 
 	.book-font-controls__button {
@@ -126,7 +126,7 @@ const isBookPage = Boolean(getBookForPath(Astro.url.pathname));
 		height: 2rem;
 		border: 0;
 		background: transparent;
-		color: var(--site-text);
+		color: var(--ts-color-text);
 		font-size: 1rem;
 		font-weight: 700;
 		line-height: 1;
@@ -135,13 +135,13 @@ const isBookPage = Boolean(getBookForPath(Astro.url.pathname));
 	}
 
 	.book-font-controls__button + .book-font-controls__button {
-		border-inline-start: 1px solid var(--site-border-strong);
+		border-inline-start: 1px solid var(--ts-color-border-strong);
 	}
 
 	.book-font-controls__button:hover,
 	.book-font-controls__button:focus-visible {
-		background: color-mix(in srgb, var(--site-blue-soft) 66%, white 34%);
-		color: var(--site-blue-strong);
+		background: color-mix(in srgb, var(--ts-color-info-soft) 66%, white 34%);
+		color: var(--ts-color-info-text);
 	}
 
 	.book-font-controls__button::after {
@@ -151,10 +151,10 @@ const isBookPage = Boolean(getBookForPath(Astro.url.pathname));
 		inset-block-start: calc(100% + 0.45rem);
 		transform: translateX(-50%) translateY(-0.2rem);
 		padding: 0.3rem 0.5rem;
-		border: 1px solid var(--site-border-strong);
+		border: 1px solid var(--ts-color-border-strong);
 		border-radius: 0.45rem;
-		background: color-mix(in srgb, var(--site-bg-elevated) 88%, white 12%);
-		color: var(--site-text);
+		background: color-mix(in srgb, var(--ts-color-canvas-subtle) 88%, white 12%);
+		color: var(--ts-color-text);
 		font-size: 0.76rem;
 		font-weight: 700;
 		letter-spacing: 0.04em;

package/dist/components/docs/DesktopSidebarToggle.astro

@@ -43,8 +43,8 @@ const iconPath =
 				border: 1px solid var(--sl-color-hairline);
 				border-radius: 999px;
 				padding: 0.45rem 0.8rem;
-				background: color-mix(in srgb, var(--site-bg-soft) 84%, white 16%);
-				color: var(--site-text-muted);
+				background: color-mix(in srgb, var(--ts-color-canvas-subtle) 84%, white 16%);
+				color: var(--ts-color-text-muted);
 				font-size: 0.85rem;
 				line-height: 1;
 				transition:
@@ -55,15 +55,15 @@ const iconPath =
 
 			.desktop-sidebar-toggle:hover,
 			.desktop-sidebar-toggle:focus-visible {
-				background: color-mix(in srgb, var(--site-blue-soft) 52%, white 48%);
-				border-color: var(--site-blue);
-				color: var(--site-text);
+				background: color-mix(in srgb, var(--ts-color-info-soft) 52%, white 48%);
+				border-color: var(--ts-color-info);
+				color: var(--ts-color-text);
 			}
 
 			.desktop-sidebar-toggle[aria-expanded='true'] {
-				background: color-mix(in srgb, var(--site-blue-soft) 68%, white 32%);
-				border-color: var(--site-blue);
-				color: var(--site-text);
+				background: color-mix(in srgb, var(--ts-color-info-soft) 68%, white 32%);
+				border-color: var(--ts-color-info);
+				color: var(--ts-color-text);
 			}
 
 			.desktop-sidebar-toggle__icon {

package/dist/components/docs/Footer.astro

@@ -66,7 +66,7 @@ import { SITE_FOOTER_MENU } from '../../utils/site-config';
 
 		.docs-footer-page-inner,
 		.docs-site-footer-inner {
-			width: min(100%, var(--site-max));
+			width: min(100%, var(--ts-content-width));
 			margin-inline: auto;
 			padding-inline: 1rem;
 		}
@@ -121,7 +121,7 @@ import { SITE_FOOTER_MENU } from '../../utils/site-config';
 
 		.docs-site-footer {
 			margin-top: 0;
-			border-top: 2px solid var(--site-border-strong);
+			border-top: 2px solid var(--ts-color-border-strong);
 			padding-top: 2rem;
 		}
 
@@ -146,14 +146,14 @@ import { SITE_FOOTER_MENU } from '../../utils/site-config';
 			font-weight: 600;
 			letter-spacing: 0.16em;
 			text-transform: uppercase;
-			color: var(--site-blue-strong);
+			color: var(--ts-color-info-text);
 		}
 
 		.docs-footer-title,
 		.docs-footer-column-title {
 			font-size: 1.25rem;
 			font-weight: 700;
-			color: var(--site-text);
+			color: var(--ts-color-text);
 		}
 
 		.docs-footer-copy,
@@ -161,7 +161,7 @@ import { SITE_FOOTER_MENU } from '../../utils/site-config';
 			margin-top: 0.75rem;
 			font-size: 1rem;
 			line-height: 2;
-			color: var(--site-text-muted);
+			color: var(--ts-color-text-muted);
 		}
 
 		.docs-footer-links {
@@ -176,7 +176,7 @@ import { SITE_FOOTER_MENU } from '../../utils/site-config';
 
 		.docs-footer-links a:hover,
 		.docs-footer-links a:focus-visible {
-			color: var(--site-text);
+			color: var(--ts-color-text);
 		}
 
 		@media (min-width: 40rem) {

package/dist/components/docs/PageTitle.astro

@@ -24,7 +24,7 @@ const PAGE_TITLE_ID = '_top';
 			font-size: clamp(1rem, 1.1vw, 1.4rem);
 			line-height: 1.18;
 			font-weight: 800;
-			color: var(--site-accent-strong);
+			color: var(--ts-color-accent-strong);
 			text-wrap: pretty;
 		}
 

package/dist/components/docs/ThemeSelect.astro

@@ -1,3 +1,5 @@
 ---
-// Intentionally empty to remove Starlight's theme/color selector from the docs UI.
+import ThemeScript from '../ui/theme/ThemeScript.astro';
 ---
+
+<ThemeScript includeCss={false} />

package/dist/components/forms/ContactForm.astro

@@ -33,8 +33,8 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 		<div class:list={[
 			'rounded-lg border px-4 py-3 text-sm font-medium',
 			status === 'success'
-				? 'border-[color:var(--site-blue)] bg-[color:var(--site-blue-soft)] text-[color:var(--site-text)]'
-				: 'border-[color:var(--site-warm)] bg-[color:rgba(194,139,91,0.14)] text-[color:var(--site-text)]',
+				? 'border-[color:var(--ts-color-info)] bg-[color:var(--ts-color-info-soft)] text-[color:var(--ts-color-text)]'
+				: 'border-[color:var(--ts-color-warning)] bg-[color:var(--ts-color-warning-soft)] text-[color:var(--ts-color-text)]',
 		]}>
 			{statusMessage}
 		</div>
@@ -47,8 +47,8 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 		data-form-type="contact"
 		data-turnstile-action="contact_submit"
 	>
-		<p class="text-sm text-[color:var(--site-text-soft)]">
-			Fields marked <span class="font-semibold text-[color:var(--site-warm)]">*</span> are required.
+		<p class="text-sm text-[color:var(--ts-color-text-subtle)]">
+			Fields marked <span class="font-semibold text-[color:var(--ts-color-warning)]">*</span> are required.
 		</p>
 		<input type="hidden" name="formType" value="contact" />
 		<input type="hidden" name="formToken" value="" />
@@ -63,9 +63,9 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 
 		<div class="grid gap-5 md:grid-cols-2">
 			<label class="grid gap-2">
-				<span class="text-sm font-semibold text-[color:var(--site-text)]">Name <span aria-hidden="true" class="text-[color:var(--site-warm)]">*</span></span>
+				<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Name <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
 				<input
-					class="min-h-12 rounded-md border border-[color:var(--site-border-strong)] bg-white/70 px-4 py-3"
+					class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
 					type="text"
 					name="name"
 					autocomplete="name"
@@ -74,9 +74,9 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 				/>
 			</label>
 			<label class="grid gap-2">
-				<span class="text-sm font-semibold text-[color:var(--site-text)]">Email <span aria-hidden="true" class="text-[color:var(--site-warm)]">*</span></span>
+				<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Email <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
 				<input
-					class="min-h-12 rounded-md border border-[color:var(--site-border-strong)] bg-white/70 px-4 py-3"
+					class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
 					type="email"
 					name="email"
 					autocomplete="email"
@@ -88,18 +88,18 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 
 		<div class="grid gap-5 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
 			<label class="grid gap-2">
-				<span class="text-sm font-semibold text-[color:var(--site-text)]">Organization</span>
+				<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Organization</span>
 				<input
-					class="min-h-12 rounded-md border border-[color:var(--site-border-strong)] bg-white/70 px-4 py-3"
+					class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
 					type="text"
 					name="organization"
 					autocomplete="organization"
 				/>
 			</label>
 			<label class="grid gap-2">
-				<span class="text-sm font-semibold text-[color:var(--site-text)]">Topic <span aria-hidden="true" class="text-[color:var(--site-warm)]">*</span></span>
+				<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Topic <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
 				<select
-					class="min-h-12 rounded-md border border-[color:var(--site-border-strong)] bg-white/70 px-4 py-3"
+					class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
 					name="contactType"
 					required
 					aria-required="true"
@@ -112,9 +112,9 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 		</div>
 
 		<label class="grid gap-2">
-			<span class="text-sm font-semibold text-[color:var(--site-text)]">Subject <span aria-hidden="true" class="text-[color:var(--site-warm)]">*</span></span>
+			<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Subject <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
 			<input
-				class="min-h-12 rounded-md border border-[color:var(--site-border-strong)] bg-white/70 px-4 py-3"
+				class="min-h-12 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
 				type="text"
 				name="subject"
 				required
@@ -123,9 +123,9 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 		</label>
 
 		<label class="grid gap-2">
-			<span class="text-sm font-semibold text-[color:var(--site-text)]">Message <span aria-hidden="true" class="text-[color:var(--site-warm)]">*</span></span>
+			<span class="text-sm font-semibold text-[color:var(--ts-color-text)]">Message <span aria-hidden="true" class="text-[color:var(--ts-color-warning)]">*</span></span>
 			<textarea
-				class="min-h-48 rounded-md border border-[color:var(--site-border-strong)] bg-white/70 px-4 py-3"
+				class="min-h-48 rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/70 px-4 py-3"
 				name="message"
 				required
 				aria-required="true"
@@ -133,24 +133,24 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 		</label>
 
 		{TREESEED_PUBLIC_TURNSTILE_SITE_KEY && !shouldBypassTurnstile ? (
-			<div class="js-turnstile rounded-md border border-dashed border-[color:var(--site-border-strong)] p-3"></div>
+			<div class="js-turnstile rounded-md border border-dashed border-[color:var(--ts-color-border-strong)] p-3"></div>
 		) : shouldBypassTurnstile ? (
-			<p class="rounded-md border border-[color:var(--site-blue)] bg-[color:var(--site-blue-soft)] px-4 py-3 text-sm text-[color:var(--site-text)]">
+			<p class="rounded-md border border-[color:var(--ts-color-info)] bg-[color:var(--ts-color-info-soft)] px-4 py-3 text-sm text-[color:var(--ts-color-text)]">
 				Local development mode is bypassing Turnstile so you can test the form workflow without Cloudflare captcha.
 			</p>
 		) : (
-			<p class="rounded-md border border-[color:var(--site-warm)] bg-[color:rgba(194,139,91,0.14)] px-4 py-3 text-sm text-[color:var(--site-text)]">
+			<p class="rounded-md border border-[color:var(--ts-color-warning)] bg-[color:var(--ts-color-warning-soft)] px-4 py-3 text-sm text-[color:var(--ts-color-text)]">
 				Turnstile is not configured yet. Add `TREESEED_PUBLIC_TURNSTILE_SITE_KEY` before deploying forms.
 			</p>
 		)}
 
 		<div class="flex flex-wrap items-center justify-between gap-4">
-			<p class="text-sm leading-7 text-[color:var(--site-text-soft)]">
+			<p class="text-sm leading-7 text-[color:var(--ts-color-text-subtle)]">
 				By sending this message, you agree that we may reply by email about this inquiry.
 			</p>
 			<button
 				type="submit"
-				class="js-submit inline-flex min-h-12 items-center justify-center border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-6 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)] disabled:cursor-not-allowed disabled:opacity-60"
+				class="js-submit inline-flex min-h-12 items-center justify-center border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-6 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)] disabled:cursor-not-allowed disabled:opacity-60"
 				disabled
 			>
 				Send message

package/dist/components/forms/FooterSubscribeForm.astro

@@ -11,11 +11,11 @@ const shouldBypassTurnstile = import.meta.env.DEV;
 const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 ---
 
-<section id={SUBSCRIBE_ANCHOR_ID} class="mt-6 border-t border-[color:var(--site-border)] pt-4">
+<section id={SUBSCRIBE_ANCHOR_ID} class="mt-6 border-t border-[color:var(--ts-color-border)] pt-4">
 	<div class="flex flex-col items-center gap-3 text-center">
 		<div class="flex flex-col gap-1">
-			<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-blue-strong)]">Subscribe for updates</p>
-			<p class="text-sm text-[color:var(--site-text-muted)]">
+			<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-info-text)]">Subscribe for updates</p>
+			<p class="text-sm text-[color:var(--ts-color-text-muted)]">
 				Get occasional notes when new writing or project updates are published.
 			</p>
 		</div>
@@ -40,7 +40,7 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 			<input type="hidden" name="name" value="" />
 			<div class="flex w-full flex-col items-center justify-center gap-3 md:flex-row md:flex-wrap">
 				<input
-					class="min-h-11 w-full rounded-md border border-[color:var(--site-border-strong)] bg-white/80 px-4 py-2 md:w-auto md:min-w-[16rem] md:max-w-[18rem]"
+					class="min-h-11 w-full rounded-md border border-[color:var(--ts-color-border-strong)] bg-white/80 px-4 py-2 md:w-auto md:min-w-[16rem] md:max-w-[18rem]"
 					type="email"
 					name="email"
 					placeholder="Email address"
@@ -50,13 +50,13 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 				{TREESEED_PUBLIC_TURNSTILE_SITE_KEY && !shouldBypassTurnstile ? (
 					<div class="js-turnstile min-h-0"></div>
 				) : shouldBypassTurnstile ? (
-					<p class="text-xs text-[color:var(--site-text-soft)]">Captcha bypassed locally.</p>
+					<p class="text-xs text-[color:var(--ts-color-text-subtle)]">Captcha bypassed locally.</p>
 				) : (
-					<p class="text-xs text-[color:var(--site-text-soft)]">Turnstile not configured.</p>
+					<p class="text-xs text-[color:var(--ts-color-text-subtle)]">Turnstile not configured.</p>
 				)}
 				<button
 					type="submit"
-					class="js-submit inline-flex min-h-11 items-center justify-center whitespace-nowrap border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)] disabled:cursor-not-allowed disabled:opacity-60"
+					class="js-submit inline-flex min-h-11 items-center justify-center whitespace-nowrap border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)] disabled:cursor-not-allowed disabled:opacity-60"
 					disabled
 				>
 					Subscribe
@@ -106,9 +106,9 @@ const formsApiBaseUrl = SITE_FORMS?.apiBaseUrl ?? '/api/form/submit';
 		statusNode.textContent = subscribeMessages[code] ?? (status === 'success' ? 'Subscription complete.' : 'We could not complete the signup.');
 		statusNode.classList.remove('hidden');
 		if (status === 'success') {
-			statusNode.className = 'js-subscribe-status rounded-md border border-[color:var(--site-blue)] bg-[color:var(--site-blue-soft)] px-4 py-2 text-sm font-medium text-[color:var(--site-text)]';
+			statusNode.className = 'js-subscribe-status rounded-md border border-[color:var(--ts-color-info)] bg-[color:var(--ts-color-info-soft)] px-4 py-2 text-sm font-medium text-[color:var(--ts-color-text)]';
 		} else {
-			statusNode.className = 'js-subscribe-status rounded-md border border-[color:var(--site-warm)] bg-[color:rgba(194,139,91,0.14)] px-4 py-2 text-sm font-medium text-[color:var(--site-text)]';
+			statusNode.className = 'js-subscribe-status rounded-md border border-[color:var(--ts-color-warning)] bg-[color:var(--ts-color-warning-soft)] px-4 py-2 text-sm font-medium text-[color:var(--ts-color-text)]';
 		}
 	};
 

package/dist/components/site/BookList.astro

@@ -13,14 +13,14 @@ const { items } = Astro.props as { items: BookItem[] };
 
 <div class="grid gap-6 md:grid-cols-2">
 	{items.map((item) => (
-		<div class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6">
-			<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">{item.meta}</p>
-			<h3 class="mt-4 text-2xl font-bold text-[color:var(--site-text)]">{item.title}</h3>
-			<p class="mt-3 text-base leading-8 text-[color:var(--site-text-muted)]">{item.summary}</p>
+		<div class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6">
+			<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">{item.meta}</p>
+			<h3 class="mt-4 text-2xl font-bold text-[color:var(--ts-color-text)]">{item.title}</h3>
+			<p class="mt-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">{item.summary}</p>
 			<div class="mt-5 flex flex-wrap gap-3">
-				<a href={item.href} class="border border-[color:var(--site-border-strong)] px-4 py-2 text-sm font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">Book page</a>
-				<a href={item.landingPath} class="border border-[color:var(--site-border-strong)] px-4 py-2 text-sm font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">Open knowledge</a>
-				<a href={item.downloadHref} class="border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">Download</a>
+				<a href={item.href} class="border border-[color:var(--ts-color-border-strong)] px-4 py-2 text-sm font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">Book page</a>
+				<a href={item.landingPath} class="border border-[color:var(--ts-color-border-strong)] px-4 py-2 text-sm font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">Open knowledge</a>
+				<a href={item.downloadHref} class="border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-4 py-2 text-sm font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">Download</a>
 			</div>
 		</div>
 	))}

package/dist/components/site/CTASection.astro

@@ -2,19 +2,19 @@
 const { title, body, primaryHref, primaryLabel, secondaryHref, secondaryLabel } = Astro.props;
 ---
 
-<section class="site-footer-cta px-0 py-0 text-[color:var(--site-text)]">
+<section class="site-footer-cta px-0 py-0 text-[color:var(--ts-color-text)]">
 	<div class="site-footer-cta__inner">
 		<div class="mx-auto flex max-w-4xl flex-col items-center gap-6">
 			<div class="max-w-3xl">
 				<h2 class="font-serif text-3xl font-bold md:text-4xl">{title}</h2>
-				<p class="mt-4 text-lg leading-9 text-[color:var(--site-text-muted)]">{body}</p>
+				<p class="mt-4 text-lg leading-9 text-[color:var(--ts-color-text-muted)]">{body}</p>
 			</div>
 			<div class="flex flex-wrap justify-center gap-3">
-				<a href={primaryHref} class="border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">{
+				<a href={primaryHref} class="border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">{
 					primaryLabel
 				}</a>
 				{secondaryHref && secondaryLabel && (
-					<a href={secondaryHref} class="border border-[color:var(--site-border-strong)] bg-[color:rgba(248,243,233,0.72)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">
+					<a href={secondaryHref} class="border border-[color:var(--ts-color-border-strong)] bg-[color:var(--ts-color-surface-muted)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">
 						{secondaryLabel}
 					</a>
 				)}

package/dist/components/site/ChronicleList.astro

@@ -17,16 +17,16 @@ const { items } = Astro.props as { items: ChronicleItem[] };
 
 <div class="grid gap-1">
 	{items.map((item) => (
-		<a href={item.href} class="block border-t border-[color:var(--site-border)] py-7 transition hover:border-[color:var(--site-border-strong)]">
+		<a href={item.href} class="block border-t border-[color:var(--ts-color-border)] py-7 transition hover:border-[color:var(--ts-color-border-strong)]">
 			<div class="flex flex-wrap items-center gap-4">
 				<StatusBadge status={item.status} />
-				<p class="text-sm font-medium text-[color:var(--site-text-soft)]">{item.date.toISOString().slice(0, 10)}</p>
-				{item.meta && <p class="text-sm text-[color:var(--site-text-soft)]">{item.meta}</p>}
+				<p class="text-sm font-medium text-[color:var(--ts-color-text-subtle)]">{item.date.toISOString().slice(0, 10)}</p>
+				{item.meta && <p class="text-sm text-[color:var(--ts-color-text-subtle)]">{item.meta}</p>}
 			</div>
-			<h3 class="mt-4 max-w-3xl text-2xl font-bold text-[color:var(--site-text)] md:text-3xl">{item.title}</h3>
-			<p class="mt-3 max-w-3xl text-lg leading-9 text-[color:var(--site-text-muted)]">{item.summary}</p>
+			<h3 class="mt-4 max-w-3xl text-2xl font-bold text-[color:var(--ts-color-text)] md:text-3xl">{item.title}</h3>
+			<p class="mt-3 max-w-3xl text-lg leading-9 text-[color:var(--ts-color-text-muted)]">{item.summary}</p>
 			{item.tags && item.tags.length > 0 && (
-				<p class="mt-4 text-sm uppercase tracking-[0.14em] text-[color:var(--site-accent-strong)]">{item.tags.join(' / ')}</p>
+				<p class="mt-4 text-sm uppercase tracking-[0.14em] text-[color:var(--ts-color-accent-strong)]">{item.tags.join(' / ')}</p>
 			)}
 		</a>
 	))}

package/dist/components/site/Hero.astro

@@ -1,5 +1,5 @@
-<section class="relative overflow-hidden border-y border-[color:var(--site-border-strong)] py-12 md:py-18">
-	<div class="absolute inset-y-0 left-[68%] hidden w-px bg-[linear-gradient(180deg,transparent,var(--site-border-strong),transparent)] lg:block"></div>
+<section class="relative overflow-hidden border-y border-[color:var(--ts-color-border-strong)] py-12 md:py-18">
+	<div class="absolute inset-y-0 left-[68%] hidden w-px bg-[linear-gradient(180deg,transparent,var(--ts-color-border-strong),transparent)] lg:block"></div>
 	<div class="grid gap-10 lg:grid-cols-[1.45fr_0.7fr] lg:items-start">
 		<div class="space-y-7 pr-0 lg:pr-10">
 			<slot name="eyebrow" />
@@ -11,7 +11,7 @@
 				<slot name="actions" />
 			</div>
 		</div>
-		<div class="border-l border-[color:var(--site-border)] pl-0 lg:pl-8">
+		<div class="border-l border-[color:var(--ts-color-border)] pl-0 lg:pl-8">
 			<slot name="aside" />
 		</div>
 	</div>

package/dist/components/site/PathCard.astro

@@ -2,15 +2,15 @@
 const { href, title, description, meta } = Astro.props;
 ---
 
-<a href={href} class="group block border-t border-[color:var(--site-border)] py-6 transition hover:border-[color:var(--site-border-strong)]">
+<a href={href} class="group block border-t border-[color:var(--ts-color-border)] py-6 transition hover:border-[color:var(--ts-color-border-strong)]">
 	<div class="grid gap-3 md:grid-cols-[0.42fr_1fr_auto] md:items-start md:gap-6">
 		<div>
-			{meta && <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-accent-strong)]">{meta}</p>}
+			{meta && <p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-accent-strong)]">{meta}</p>}
 		</div>
 		<div>
-			<h3 class="text-2xl font-bold text-[color:var(--site-text)]">{title}</h3>
-			<p class="mt-3 max-w-2xl text-base leading-8 text-[color:var(--site-text-muted)]">{description}</p>
+			<h3 class="text-2xl font-bold text-[color:var(--ts-color-text)]">{title}</h3>
+			<p class="mt-3 max-w-2xl text-base leading-8 text-[color:var(--ts-color-text-muted)]">{description}</p>
 		</div>
-		<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)] group-hover:text-[color:var(--site-accent-strong)]">Open path</p>
+		<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)] group-hover:text-[color:var(--ts-color-accent-strong)]">Open path</p>
 	</div>
 </a>

package/dist/components/site/ProfileList.astro

@@ -15,15 +15,15 @@ const { items } = Astro.props as { items: ProfileItem[] };
 
 <div class="grid gap-6 md:grid-cols-2">
 	{items.map((item) => (
-		<a href={item.href} class="border border-[color:var(--site-border)] bg-[color:var(--site-surface)] p-6 transition hover:border-[color:var(--site-border-strong)]">
+		<a href={item.href} class="border border-[color:var(--ts-color-border)] bg-[color:var(--ts-color-surface)] p-6 transition hover:border-[color:var(--ts-color-border-strong)]">
 			<div class="flex flex-wrap items-center gap-3">
 				{item.status && <StatusBadge status={item.status} />}
-				<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-blue-strong)]">{item.meta}</p>
+				<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-info-text)]">{item.meta}</p>
 			</div>
-			<h3 class="mt-4 text-2xl font-bold text-[color:var(--site-text)]">{item.name}</h3>
-			<p class="mt-3 text-base leading-8 text-[color:var(--site-text-muted)]">{item.summary}</p>
+			<h3 class="mt-4 text-2xl font-bold text-[color:var(--ts-color-text)]">{item.name}</h3>
+			<p class="mt-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">{item.summary}</p>
 			{item.tags && item.tags.length > 0 && (
-				<p class="mt-4 text-sm uppercase tracking-[0.14em] text-[color:var(--site-accent-strong)]">{item.tags.join(' / ')}</p>
+				<p class="mt-4 text-sm uppercase tracking-[0.14em] text-[color:var(--ts-color-accent-strong)]">{item.tags.join(' / ')}</p>
 			)}
 		</a>
 	))}

package/dist/components/site/RouteNotFound.astro

@@ -10,14 +10,14 @@ const {
 
 <MainLayout title={title} description={description} currentPath={currentPath}>
 	<section class="mx-auto max-w-3xl space-y-6 py-20">
-		<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-accent-strong)]">404</p>
-		<h1 class="font-serif text-5xl text-[color:var(--site-text)]">{title}</h1>
-		<p class="text-lg leading-9 text-[color:var(--site-text-muted)]">{description}</p>
+		<p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-accent-strong)]">404</p>
+		<h1 class="font-serif text-5xl text-[color:var(--ts-color-text)]">{title}</h1>
+		<p class="text-lg leading-9 text-[color:var(--ts-color-text-muted)]">{description}</p>
 		<div class="flex flex-wrap gap-4">
-			<a href="/" class="border border-[color:var(--site-accent)] bg-[color:var(--site-accent)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">
+			<a href="/" class="border border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">
 				Go home
 			</a>
-			<a href="/knowledge/" class="border border-[color:var(--site-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--site-text)] transition hover:border-[color:var(--site-blue)] hover:bg-[color:var(--site-blue-soft)]">
+			<a href="/knowledge/" class="border border-[color:var(--ts-color-border-strong)] px-5 py-3 text-base font-semibold text-[color:var(--ts-color-text)] transition hover:border-[color:var(--ts-color-info)] hover:bg-[color:var(--ts-color-info-soft)]">
 				Open knowledge
 			</a>
 		</div>

package/dist/components/site/SectionIntro.astro

@@ -3,7 +3,7 @@ const { eyebrow, title, description } = Astro.props;
 ---
 
 <header class="max-w-4xl space-y-4">
-	{eyebrow && <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--site-accent-strong)]">{eyebrow}</p>}
-	<h2 class="max-w-4xl font-serif text-4xl font-bold tracking-tight text-[color:var(--site-text)] md:text-5xl">{title}</h2>
-	<p class="max-w-3xl text-lg leading-9 text-[color:var(--site-text-muted)] md:text-xl">{description}</p>
+	{eyebrow && <p class="text-sm font-semibold uppercase tracking-[0.16em] text-[color:var(--ts-color-accent-strong)]">{eyebrow}</p>}
+	<h2 class="max-w-4xl font-serif text-4xl font-bold tracking-tight text-[color:var(--ts-color-text)] md:text-5xl">{title}</h2>
+	<p class="max-w-3xl text-lg leading-9 text-[color:var(--ts-color-text-muted)] md:text-xl">{description}</p>
 </header>

package/dist/components/site/StageBanner.astro

@@ -2,7 +2,7 @@
 import { PROJECT_STAGE } from '../../utils/content-status';
 ---
 
-<div class="inline-flex max-w-full flex-wrap items-center gap-x-3 gap-y-1 border-l-4 border-[color:var(--site-accent)] bg-[color:var(--site-accent-soft)] px-4 py-3 text-[color:var(--site-text)]">
+<div class="inline-flex max-w-full flex-wrap items-center gap-x-3 gap-y-1 border-l-4 border-[color:var(--ts-color-accent)] bg-[color:var(--ts-color-accent-soft)] px-4 py-3 text-[color:var(--ts-color-text)]">
 	<span class="font-bold uppercase tracking-[0.16em] text-xs">{PROJECT_STAGE.label}</span>
-	<span class="text-[color:var(--site-text-muted)]">{PROJECT_STAGE.description}</span>
+	<span class="text-[color:var(--ts-color-text-muted)]">{PROJECT_STAGE.description}</span>
 </div>

package/dist/components/site/TrustCallout.astro

@@ -2,8 +2,8 @@
 const { title, body } = Astro.props;
 ---
 
-<aside class="border-l-4 border-[color:var(--site-warm)] bg-[color:rgba(215,176,123,0.12)] px-5 py-5 text-[color:var(--site-text)]">
-	<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--site-warm-strong)]">Trust note</p>
+<aside class="border-l-4 border-[color:var(--ts-color-warning)] bg-[color:var(--ts-color-warning-soft)] px-5 py-5 text-[color:var(--ts-color-text)]">
+	<p class="text-sm font-semibold uppercase tracking-[0.14em] text-[color:var(--ts-color-warning-text)]">Trust note</p>
 	<h3 class="mt-2 text-2xl font-bold">{title}</h3>
-	<p class="mt-3 text-base leading-8 text-[color:var(--site-text-muted)]">{body}</p>
+	<p class="mt-3 text-base leading-8 text-[color:var(--ts-color-text-muted)]">{body}</p>
 </aside>

package/dist/components/ui/data/ActionList.astro

@@ -0,0 +1,51 @@
+---
+import Badge from './Badge.astro';
+import type { Tone } from '../types.js';
+
+interface ActionListItem {
+	title: string;
+	description?: string;
+	href?: string;
+	meta?: string;
+	tone?: Tone;
+	actionLabel?: string;
+}
+
+interface Props {
+	items?: ActionListItem[];
+	class?: string;
+}
+
+const {
+	items = [],
+	class: className,
+} = Astro.props as Props;
+---
+
+<div class:list={['ts-action-list', className]}>
+	{items.length > 0 ? (
+		<ul class="ts-action-list__items">
+			{items.map((item) => {
+				const Inner = (
+					<>
+						<span class="ts-action-list__content">
+							<span class="ts-action-list__title">{item.title}</span>
+							{item.description ? <span class="ts-action-list__description">{item.description}</span> : null}
+						</span>
+						<span class="ts-action-list__meta">
+							{item.meta ? <Badge tone={item.tone ?? 'muted'} size="sm">{item.meta}</Badge> : null}
+							{item.actionLabel ? <span class="ts-action-list__action">{item.actionLabel}</span> : null}
+						</span>
+					</>
+				);
+				return (
+					<li class="ts-action-list__item" data-tone={item.tone ?? 'default'}>
+						{item.href ? <a href={item.href} class="ts-action-list__link">{Inner}</a> : <div class="ts-action-list__row">{Inner}</div>}
+					</li>
+				);
+			})}
+		</ul>
+	) : (
+		<slot />
+	)}
+</div>