@treeseed/core 0.8.8 → 0.8.10

package/dist/components/SiteTitle.astro

@@ -23,8 +23,8 @@ const { siteTitleHref } = Astro.locals.starlightRoute;
 		}
 
 		.site-header-logo {
-			width: 2.5rem;
-			height: 2.5rem;
+			width: 3.75rem;
+			height: 3.75rem;
 			object-fit: contain;
 			flex: 0 0 auto;
 		}

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

@@ -3,11 +3,8 @@ import EditLink from '../../vendor/starlight/components/EditLink.astro';
 import LastUpdated from '../../vendor/starlight/components/LastUpdated.astro';
 import Pagination from '../../vendor/starlight/components/Pagination.astro';
 import config from 'virtual:starlight/user-config';
-import FooterSubscribeForm from '../forms/FooterSubscribeForm.astro';
+import PublicFooter from '../ui/shell/PublicFooter.astro';
 import DevWatchReload from '../DevWatchReload.astro';
-import { PROJECT_STAGE } from '../../utils/content-status';
-import { SITE } from '../../utils/seo';
-import { SITE_FOOTER_MENU } from '../../utils/site-config';
 ---
 
 <div class="docs-footer-shell">
@@ -28,32 +25,7 @@ import { SITE_FOOTER_MENU } from '../../utils/site-config';
 		</div>
 	</div>
 
-	<footer class="docs-site-footer">
-		<div class="docs-site-footer-inner">
-			<div class="docs-footer-grid">
-				<div class="docs-footer-column">
-					<p class="docs-footer-title">{SITE.name}</p>
-					<p class="docs-footer-copy">{SITE.summary}</p>
-				</div>
-				<div class="docs-footer-column">
-					<p class="docs-footer-heading">Project stage</p>
-					<p class="docs-footer-column-title">{PROJECT_STAGE.label}</p>
-					<p class="docs-footer-copy">{PROJECT_STAGE.description}</p>
-				</div>
-				{SITE_FOOTER_MENU.map((group) => (
-					<div class="docs-footer-column">
-						<p class="docs-footer-heading">{group.label}</p>
-						<div class="docs-footer-links">
-							{group.items.map((item) => (
-								<a href={item.href}>{item.label}</a>
-							))}
-						</div>
-					</div>
-				))}
-			</div>
-			<FooterSubscribeForm currentPath={Astro.url.pathname} />
-		</div>
-	</footer>
+	<PublicFooter currentPath={Astro.url.pathname} />
 	<DevWatchReload />
 </div>
 
@@ -65,8 +37,8 @@ import { SITE_FOOTER_MENU } from '../../utils/site-config';
 		}
 
 		.docs-footer-page-inner,
-		.docs-site-footer-inner {
-			width: min(100%, var(--site-max));
+		.docs-footer-shell :global(.ts-public-footer__inner) {
+			width: min(100%, var(--ts-content-width));
 			margin-inline: auto;
 			padding-inline: 1rem;
 		}
@@ -119,76 +91,20 @@ import { SITE_FOOTER_MENU } from '../../utils/site-config';
 			color: var(--sl-color-white);
 		}
 
-		.docs-site-footer {
+		.docs-footer-shell :global(.ts-public-footer) {
 			margin-top: 0;
-			border-top: 2px solid var(--site-border-strong);
-			padding-top: 2rem;
-		}
-
-		.docs-site-footer-inner {
-			padding-bottom: 3.75rem;
-		}
-
-		.docs-footer-grid {
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: center;
-			gap: 2rem;
-			padding-bottom: 2rem;
-		}
-
-		.docs-footer-column {
-			width: 16rem;
-		}
-
-		.docs-footer-heading {
-			font-size: var(--sl-text-sm);
-			font-weight: 600;
-			letter-spacing: 0.16em;
-			text-transform: uppercase;
-			color: var(--site-blue-strong);
-		}
-
-		.docs-footer-title,
-		.docs-footer-column-title {
-			font-size: 1.25rem;
-			font-weight: 700;
-			color: var(--site-text);
-		}
-
-		.docs-footer-copy,
-		.docs-footer-links {
-			margin-top: 0.75rem;
-			font-size: 1rem;
-			line-height: 2;
-			color: var(--site-text-muted);
-		}
-
-		.docs-footer-links {
-			display: flex;
-			flex-direction: column;
-			gap: 0.5rem;
-		}
-
-		.docs-footer-links a {
-			text-decoration: none;
-		}
-
-		.docs-footer-links a:hover,
-		.docs-footer-links a:focus-visible {
-			color: var(--site-text);
 		}
 
 		@media (min-width: 40rem) {
 			.docs-footer-page-inner,
-			.docs-site-footer-inner {
+			.docs-footer-shell :global(.ts-public-footer__inner) {
 				padding-inline: 1.5rem;
 			}
 		}
 
 		@media (min-width: 64rem) {
 			.docs-footer-page-inner,
-			.docs-site-footer-inner {
+			.docs-footer-shell :global(.ts-public-footer__inner) {
 				padding-inline: 2rem;
 			}
 		}

package/dist/components/docs/Header.astro

@@ -3,7 +3,6 @@ import config from 'virtual:starlight/user-config';
 
 import LanguageSelect from '../../vendor/starlight/components/LanguageSelect.astro';
 import Search from '../../vendor/starlight/components/Search.astro';
-import SiteTitle from '../../vendor/starlight/components/SiteTitle.astro';
 import SocialIcons from '../../vendor/starlight/components/SocialIcons.astro';
 import DesktopSidebarToggle from './DesktopSidebarToggle.astro';
 import BookFontControls from './BookFontControls.astro';
@@ -18,7 +17,15 @@ const hasToc = Boolean(toc);
 
 <div class="header">
 	<div class="title-wrapper sl-flex">
-		<SiteTitle />
+		<a class="ts-shell-brand" href="/">
+			<span class="ts-shell-brand__mark">
+				<img src={SITE.logo.src} alt={SITE.logo.alt} width="60" height="60" loading="eager" />
+			</span>
+			<span class="ts-shell-brand__text">
+				<span class="ts-shell-brand__name">{SITE.name}</span>
+				<span class="ts-shell-brand__tag">{SITE.statement}</span>
+			</span>
+		</a>
 	</div>
 	<div class="sl-hidden md:sl-flex print:hidden right-group">
 		<div class="desktop-sidebar-toggles" aria-label="Reading controls">

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>
 	))}