From 11507bcb998da2e4fa9adb4cceaf995280ad8615 Mon Sep 17 00:00:00 2001
From: juprodh <juprodh@proton.me>
Date: Thu, 30 Apr 2026 16:49:44 +0800
Subject: [PATCH] Rewrite theme constants

---
 src/views/bookmark.ts       |  2 +-
 src/views/explore.ts        |  2 +-
 src/views/home.ts           |  2 +-
 src/views/layout.ts         | 28 +++++++++---------
 src/views/login.ts          |  2 +-
 src/views/new-note.ts       |  4 +--
 src/views/new-wiki.ts       |  2 +-
 src/views/profile.ts        |  8 +++---
 src/views/search-results.ts |  4 +--
 src/views/settings.ts       | 22 +++++++-------
 src/views/theme.ts          | 57 +++++++++++--------------------------
 src/views/wiki-card.ts      |  2 +-
 src/views/wiki-list.ts      |  8 +++---
 13 files changed, 59 insertions(+), 84 deletions(-)

diff --git a/src/views/bookmark.ts b/src/views/bookmark.ts
index 8bf51e9..e1e83a6 100644
--- a/src/views/bookmark.ts
+++ b/src/views/bookmark.ts
@@ -29,7 +29,7 @@ export function bookmarkButton(
     <input type="hidden" name="wikiAtUri" value="${escapeHtml(wikiAtUri)}">
     <input type="hidden" name="action" value="${action}">
     <button type="submit"
-      class="inline-flex items-center gap-1.5 px-2 py-1 text-sm ${THEME.textMuted} ${THEME.accentLightHoverBg} rounded"
+      class="inline-flex items-center gap-1.5 px-2 py-1 text-sm ${THEME.textMuted} ${THEME.accentSoft} rounded"
       title="${escapeHtml(label)}">
       <svg class="w-4 h-4 ${fillClass}" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" />
diff --git a/src/views/explore.ts b/src/views/explore.ts
index 3dd0902..d31e519 100644
--- a/src/views/explore.ts
+++ b/src/views/explore.ts
@@ -34,7 +34,7 @@ export function explorePage(
 		msg.home.explorePublicWikis,
 		`
     <div class="max-w-6xl mx-auto px-6 py-10">
-      <h1 class="text-2xl font-bold ${THEME.textPrimary} mb-6">${msg.home.explorePublicWikis}</h1>
+      <h1 class="text-2xl font-bold ${THEME.text} mb-6">${msg.home.explorePublicWikis}</h1>
       ${toolbar}
       <div id="wiki-grid">
         ${gridHtml}
diff --git a/src/views/home.ts b/src/views/home.ts
index d1b29de..ffaef85 100644
--- a/src/views/home.ts
+++ b/src/views/home.ts
@@ -26,7 +26,7 @@ export function homePage(
 		"Lichen",
 		`
     <section class="text-center py-8 px-6">
-      <p class="text-xl font-semibold ${THEME.textPrimary} mb-2">${msg.home.tagline}</p>
+      <p class="text-xl font-semibold ${THEME.text} mb-2">${msg.home.tagline}</p>
       <p class="text-sm ${THEME.textMuted} max-w-2xl mx-auto mb-6">${msg.home.heroDescription}</p>
       <div class="flex flex-col items-center gap-1 mb-6 text-sm ${THEME.textSecondary}">
         <span><span class="font-semibold ${THEME.accentText}">1.</span> <a href="/login" class="hover:underline">${msg.home.step1}</a></span>
diff --git a/src/views/layout.ts b/src/views/layout.ts
index e24c756..7243471 100644
--- a/src/views/layout.ts
+++ b/src/views/layout.ts
@@ -54,7 +54,7 @@ function renderWithSidebar(body: string, options: LayoutOptions): string {
 	const noteLinks = notes
 		.map((n) => {
 			const isCurrent = n.slug === options.currentNoteSlug;
-			return `<li><a href="/wiki/${options.wikiSlug}/${n.slug}" class="${isCurrent ? `font-bold ${THEME.accentDarkText}` : `${THEME.textSecondary} ${THEME.accentHoverText}`} block truncate text-sm">${escapeHtml(n.title)}</a></li>`;
+			return `<li><a href="/wiki/${options.wikiSlug}/${n.slug}" class="${isCurrent ? `font-bold text-teal-800` : `${THEME.textSecondary} hover:text-teal-700`} block truncate text-sm">${escapeHtml(n.title)}</a></li>`;
 		})
 		.join("\n");
 
@@ -69,7 +69,7 @@ function renderWithSidebar(body: string, options: LayoutOptions): string {
 		? `<a href="/wiki/${options.wikiSlug}/new" class="block mb-2 ${outlineSmallButtonClass} text-center">${msg.wiki.newNote}</a>`
 		: "";
 
-	const dropdownItemClass = `block px-3 py-1.5 text-sm ${THEME.textSecondary} ${THEME.accentLightHoverBg} rounded`;
+	const dropdownItemClass = `block px-3 py-1.5 text-sm ${THEME.textSecondary} ${THEME.accentSoft} rounded`;
 	const noteExportItem = options.currentNoteSlug
 		? `<a href="${exportNoteUrl(options.wikiSlug ?? "", options.currentNoteSlug)}" class="${dropdownItemClass}">${msg.wiki.exportNote}</a>`
 		: "";
@@ -80,7 +80,7 @@ function renderWithSidebar(body: string, options: LayoutOptions): string {
           ${ICONS.download}
           ${msg.wiki.export}
         </button>
-        <div id="export-menu" class="hidden absolute left-0 bottom-full mb-1 ${THEME.bgSurface} border ${THEME.borderDefault} rounded-lg shadow-lg py-1.5 z-20 w-max">
+        <div id="export-menu" class="hidden absolute left-0 bottom-full mb-1 ${THEME.bgSurface} border ${THEME.border} rounded-lg shadow-lg py-1.5 z-20 w-max">
           ${noteExportItem}
           ${wikiExportItem}
         </div>
@@ -136,13 +136,13 @@ export function layout(
 
 	const session = options?.session;
 
-	const navBtnClass = `flex items-center justify-center gap-2 h-9 px-2.5 border ${THEME.borderDefault} rounded-lg ${THEME.bgSurface} ${THEME.textSecondary} ${THEME.textSecondaryHover} ${THEME.accentLightHoverBg} cursor-pointer text-sm`;
-	const dropdownClass = `hidden absolute right-0 mt-1 ${THEME.bgSurface} border ${THEME.borderDefault} rounded-lg shadow-lg py-1.5 z-20 w-max`;
-	const dropdownItemClass = `flex items-center gap-2.5 px-4 py-2 text-sm ${THEME.textSecondary} ${THEME.accentLightHoverBg} rounded`;
+	const navBtnClass = `flex items-center justify-center gap-2 h-9 px-2.5 border ${THEME.border} rounded-lg ${THEME.bgSurface} ${THEME.textSecondary} hover:text-stone-700 ${THEME.accentSoft} cursor-pointer text-sm`;
+	const dropdownClass = `hidden absolute right-0 mt-1 ${THEME.bgSurface} border ${THEME.border} rounded-lg shadow-lg py-1.5 z-20 w-max`;
+	const dropdownItemClass = `flex items-center gap-2.5 px-4 py-2 text-sm ${THEME.textSecondary} ${THEME.accentSoft} rounded`;
 
 	const localeItems = SUPPORTED_LOCALES.map(
 		(l) =>
-			`<a href="#" class="block px-3 py-2 text-sm ${l === locale ? `font-semibold ${THEME.accentText}` : THEME.textSecondary} ${THEME.accentLightHoverBg} rounded" onclick="event.preventDefault();fetch('/set-locale',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'locale=${l}'}).then(()=>location.reload())">${LOCALE_LABELS[l] ?? l.toUpperCase()}</a>`,
+			`<a href="#" class="block px-3 py-2 text-sm ${l === locale ? `font-semibold ${THEME.accentText}` : THEME.textSecondary} ${THEME.accentSoft} rounded" onclick="event.preventDefault();fetch('/set-locale',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'locale=${l}'}).then(()=>location.reload())">${LOCALE_LABELS[l] ?? l.toUpperCase()}</a>`,
 	).join("\n");
 	const localePicker = `<div class="relative" id="locale-picker">
       <button type="button" onclick="document.getElementById('locale-menu').classList.toggle('hidden')" class="${navBtnClass}" aria-label="Change language">
@@ -196,8 +196,8 @@ ${extraStyles}
   <script src="/public/htmx.min.js" defer></script>
 ${extraScripts}
 </head>
-<body class="${THEME.bgPage} ${THEME.textPrimary} min-h-screen flex flex-col">
-  <nav class="shrink-0 sticky top-0 z-20 ${THEME.bgSurface} border-b ${THEME.borderDefault}">
+<body class="${THEME.bg} ${THEME.text} min-h-screen flex flex-col">
+  <nav class="shrink-0 sticky top-0 z-20 ${THEME.bgSurface} border-b ${THEME.border}">
     <div class="max-w-6xl mx-auto px-6 py-3 flex items-center justify-between gap-4">
       <div class="flex items-center gap-2 min-w-0">
         <a href="/" class="flex items-center gap-2 shrink-0">
@@ -212,7 +212,7 @@ ${extraScripts}
           />
           <span class="text-lg font-semibold ${THEME.accentText}">Lichen</span>
         </a>
-        ${options?.wikiName ? `<span class="${THEME.textMuted}">/</span><a href="/wiki/${options.wikiSlug}" class="text-lg font-medium ${THEME.textSecondary} ${THEME.accentHoverText} truncate">${escapeHtml(options.wikiName)}</a>` : ""}
+        ${options?.wikiName ? `<span class="${THEME.textMuted}">/</span><a href="/wiki/${options.wikiSlug}" class="text-lg font-medium ${THEME.textSecondary} hover:text-teal-700 truncate">${escapeHtml(options.wikiName)}</a>` : ""}
       </div>
       <div class="flex items-center gap-2 shrink-0">
         ${profileOrLogin}
@@ -226,7 +226,7 @@ ${extraScripts}
       <div class="relative">
         <input id="search-input" type="text" placeholder="${msg.search.searchNotes}" autocomplete="off"
           aria-label="${msg.search.searchNotes}"
-          class="w-full px-3 py-2 pr-10 text-sm border ${THEME.borderInput} rounded-lg outline-none ${THEME.accentFocusBorder} focus:ring-2 ${THEME.accentSubtleRing}"
+          class="w-full px-3 py-2 pr-10 text-sm border ${THEME.borderInput} rounded-lg outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-200"
           hx-get="/search${options?.wikiSlug ? `?wiki=${options.wikiSlug}` : ""}"
           hx-trigger="input changed delay:150ms"
           hx-target="#search-results"
@@ -276,13 +276,13 @@ ${extraScripts}
   ${
 		options?.sidebarNotes
 			? renderWithSidebar(
-					`${options?.pageTitle ? `<div class="text-center pb-6 mb-6 border-b ${THEME.borderSubtle}"><h1 class="text-3xl font-bold ${THEME.textPrimary}">${escapeHtml(options.pageTitle)}</h1></div>` : ""}${body}`,
+					`${options?.pageTitle ? `<div class="text-center pb-6 mb-6 border-b ${THEME.borderSubtle}"><h1 class="text-3xl font-bold ${THEME.text}">${escapeHtml(options.pageTitle)}</h1></div>` : ""}${body}`,
 					options,
 				)
-			: `<main class="w-full max-w-6xl mx-auto px-6 py-8">${options?.pageTitle ? `<div class="text-center pb-6 mb-6 border-b ${THEME.borderSubtle}"><h1 class="text-3xl font-bold ${THEME.textPrimary}">${escapeHtml(options.pageTitle)}</h1></div>` : ""}${body}</main>`
+			: `<main class="w-full max-w-6xl mx-auto px-6 py-8">${options?.pageTitle ? `<div class="text-center pb-6 mb-6 border-b ${THEME.borderSubtle}"><h1 class="text-3xl font-bold ${THEME.text}">${escapeHtml(options.pageTitle)}</h1></div>` : ""}${body}</main>`
 	}
   </div>
-  <footer class="shrink-0 sticky bottom-0 z-10 ${THEME.bgPage} border-t ${THEME.borderSubtle} py-4 text-center text-xs ${THEME.textMuted}">
+  <footer class="shrink-0 sticky bottom-0 z-10 ${THEME.bg} border-t ${THEME.borderSubtle} py-4 text-center text-xs ${THEME.textMuted}">
     <a href="https://atproto.com" target="_blank" rel="noopener noreferrer" class="hover:underline">${msg.home.builtOnAtproto}</a>
     <span class="mx-2">&middot;</span>
     <a href="https://tangled.org/juprodh.bsky.social/lichen.wiki" target="_blank" rel="noopener noreferrer" class="hover:underline">${msg.home.sourceCode}</a>
diff --git a/src/views/login.ts b/src/views/login.ts
index 40df20a..3bc1c16 100644
--- a/src/views/login.ts
+++ b/src/views/login.ts
@@ -18,7 +18,7 @@ export function loginPage(options?: LoginOptions): string {
 		msg.login.heading,
 		`
     <div class="max-w-sm mx-auto mt-12">
-      <h1 class="text-2xl font-bold ${THEME.textPrimary} mb-2">${msg.login.heading}</h1>
+      <h1 class="text-2xl font-bold ${THEME.text} mb-2">${msg.login.heading}</h1>
       <p class="text-sm ${THEME.textMuted} mb-6">${msg.login.description}</p>
       ${errorHtml}
       <form method="POST" action="/login" class="space-y-4">
diff --git a/src/views/new-note.ts b/src/views/new-note.ts
index cb84dc8..f62a14d 100644
--- a/src/views/new-note.ts
+++ b/src/views/new-note.ts
@@ -53,9 +53,9 @@ export function newNotePage(
 		`${msg.wiki.newNote} — ${wikiName}`,
 		scrollFixStyle +
 			`
-    <h1 class="text-3xl font-bold ${THEME.textPrimary} mb-6">${msg.wiki.newNote}</h1>
+    <h1 class="text-3xl font-bold ${THEME.text} mb-6">${msg.wiki.newNote}</h1>
     ${errorHtml}
-    <div class="mb-6 pb-4 border-b ${THEME.borderDefault}">
+    <div class="mb-6 pb-4 border-b ${THEME.border}">
       <label class="block text-sm font-medium ${THEME.textSecondary} mb-1">${msg.editor.importFile}</label>
       <input
         type="file"
diff --git a/src/views/new-wiki.ts b/src/views/new-wiki.ts
index 3d26553..bee5129 100644
--- a/src/views/new-wiki.ts
+++ b/src/views/new-wiki.ts
@@ -38,7 +38,7 @@ export function newWikiPage(options?: NewWikiOptions): string {
 		msg.createWiki.heading,
 		`
     <div class="max-w-lg mx-auto">
-    <h1 class="text-3xl font-bold ${THEME.textPrimary} mb-6">${msg.createWiki.heading}</h1>
+    <h1 class="text-3xl font-bold ${THEME.text} mb-6">${msg.createWiki.heading}</h1>
     ${errorHtml}
     <form method="POST" action="/wiki/new" enctype="multipart/form-data" class="space-y-4">
       <div>
diff --git a/src/views/profile.ts b/src/views/profile.ts
index d56c20e..c838d49 100644
--- a/src/views/profile.ts
+++ b/src/views/profile.ts
@@ -36,7 +36,7 @@ export function profilePage(
 	</div>`;
 
 	const nameHtml = displayName
-		? `<h1 class="text-2xl font-bold ${THEME.textPrimary}">${displayName}</h1>`
+		? `<h1 class="text-2xl font-bold ${THEME.text}">${displayName}</h1>`
 		: "";
 
 	const handleHtml = handle
@@ -71,17 +71,17 @@ export function profilePage(
 			</div>
 
 			<section class="mb-10">
-				<h2 class="text-lg font-semibold ${THEME.textPrimary} mb-4">${msg.profile.myWikis}</h2>
+				<h2 class="text-lg font-semibold ${THEME.text} mb-4">${msg.profile.myWikis}</h2>
 				${ownedSection}
 			</section>
 
 			<section class="mb-10">
-				<h2 class="text-lg font-semibold ${THEME.textPrimary} mb-4">${msg.profile.collaborating}</h2>
+				<h2 class="text-lg font-semibold ${THEME.text} mb-4">${msg.profile.collaborating}</h2>
 				${collaboratingSection}
 			</section>
 
 			<section class="mb-10">
-				<h2 class="text-lg font-semibold ${THEME.textPrimary} mb-4">${msg.profile.bookmarks}</h2>
+				<h2 class="text-lg font-semibold ${THEME.text} mb-4">${msg.profile.bookmarks}</h2>
 				${bookmarkSection}
 			</section>
 		</div>
diff --git a/src/views/search-results.ts b/src/views/search-results.ts
index 60729d8..3115b49 100644
--- a/src/views/search-results.ts
+++ b/src/views/search-results.ts
@@ -33,8 +33,8 @@ export function renderNoteResults(
 			const snippetHtml = r.snippet
 				? `<div class="text-xs ${THEME.textMuted} mt-0.5 line-clamp-2">${highlightMatch(r.snippet, query)}</div>`
 				: "";
-			return `<a href="/wiki/${r.wiki_slug}/${r.slug}" class="search-result block px-4 py-2.5 ${THEME.accentLightHoverBg} ${THEME.accentLightFocusBg} outline-none" data-search-result>
-			<div class="text-sm font-medium ${THEME.textPrimary}">${highlightMatch(r.title, query)}</div>
+			return `<a href="/wiki/${r.wiki_slug}/${r.slug}" class="search-result block px-4 py-2.5 ${THEME.accentSoft} focus:bg-teal-50 outline-none" data-search-result>
+			<div class="text-sm font-medium ${THEME.text}">${highlightMatch(r.title, query)}</div>
 			${snippetHtml}
 		</a>`;
 		})
diff --git a/src/views/settings.ts b/src/views/settings.ts
index 37c61ed..9ef2952 100644
--- a/src/views/settings.ts
+++ b/src/views/settings.ts
@@ -80,10 +80,10 @@ function renderMemberRow(
 	const roleCell = isOwner
 		? `<span class="text-sm">${roleLabel("owner")}</span>`
 		: `<form method="POST" action="/wiki/${wikiSlug}/-/members/${encodeURIComponent(m.did)}/change-role" class="inline-flex items-center gap-1">
-			<select name="role" aria-label="${msg.access.role}" data-original="${m.role}" onchange="this.nextElementSibling.classList.toggle('hidden', this.value === this.dataset.original)" class="text-xs border ${THEME.borderDefault} rounded px-1 py-0.5">
+			<select name="role" aria-label="${msg.access.role}" data-original="${m.role}" onchange="this.nextElementSibling.classList.toggle('hidden', this.value === this.dataset.original)" class="text-xs border ${THEME.border} rounded px-1 py-0.5">
 				${renderRoleOptions(m.role, roleLabel)}
 			</select>
-			<button type="submit" class="hidden p-1 ${THEME.accentBg} text-white rounded ${THEME.accentDarkHoverBg} cursor-pointer" title="${msg.access.saveRole}">${ICONS.check}</button>
+			<button type="submit" class="hidden p-1 bg-teal-700 text-white rounded hover:bg-teal-800 cursor-pointer" title="${msg.access.saveRole}">${ICONS.check}</button>
 		</form>`;
 	const removeButton = isOwner
 		? ""
@@ -110,7 +110,7 @@ function renderRequestRow(
 		<td class="py-2 pr-4 text-sm ${THEME.textMuted}">${escapeHtml(r.created_at)}</td>
 		<td class="py-2 text-sm">
 			<form method="POST" action="/wiki/${wikiSlug}/-/members/${encodeURIComponent(r.did)}/approve" class="inline-flex items-center gap-2">
-				<select name="role" aria-label="${msg.access.role}" class="text-xs border ${THEME.borderDefault} rounded px-1 py-0.5">
+				<select name="role" aria-label="${msg.access.role}" class="text-xs border ${THEME.border} rounded px-1 py-0.5">
 					<option value="contributor">${roleLabel("contributor")}</option>
 					<option value="admin">${roleLabel("admin")}</option>
 					<option value="viewer">${roleLabel("viewer")}</option>
@@ -132,11 +132,11 @@ function renderAddMemberForm(
 				<label class="text-xs font-medium ${THEME.textMuted}">${msg.access.addMemberLabel}</label>
 				<input type="text" name="did" required autocomplete="off"
 					placeholder="${msg.access.addMemberPlaceholder}"
-					class="px-3 py-1.5 text-sm border ${THEME.borderInput} rounded focus:outline-none ${THEME.accentInputFocusBorder} w-72" />
+					class="px-3 py-1.5 text-sm border ${THEME.borderInput} rounded focus:outline-none focus:border-teal-500 w-72" />
 			</div>
 			<div class="flex flex-col gap-1">
 				<label class="text-xs font-medium ${THEME.textMuted}">${msg.access.role}</label>
-				<select name="role" class="text-sm border ${THEME.borderInput} rounded px-2 py-1.5 focus:outline-none ${THEME.accentInputFocusBorder}">
+				<select name="role" class="text-sm border ${THEME.borderInput} rounded px-2 py-1.5 focus:outline-none focus:border-teal-500">
 					<option value="contributor">${roleLabel("contributor")}</option>
 					<option value="admin">${roleLabel("admin")}</option>
 					<option value="viewer">${roleLabel("viewer")}</option>
@@ -183,7 +183,7 @@ function renderMembersSection(
 			<div class="overflow-x-auto">
 			<table class="w-full mb-6">
 				<thead>
-					<tr class="border-b ${THEME.borderDefault} text-left text-xs font-semibold ${THEME.textMuted} uppercase tracking-wide">
+					<tr class="border-b ${THEME.border} text-left text-xs font-semibold ${THEME.textMuted} uppercase tracking-wide">
 						<th class="pb-2 pr-4">${msg.access.member}</th>
 						<th class="pb-2 pr-4">${msg.access.role}</th>
 						<th class="pb-2 pr-4">${msg.access.joined}</th>
@@ -202,7 +202,7 @@ function renderMembersSection(
 				<div class="overflow-x-auto">
 				<table class="w-full mb-6">
 					<thead>
-						<tr class="border-b ${THEME.borderDefault} text-left text-xs font-semibold ${THEME.textMuted} uppercase tracking-wide">
+						<tr class="border-b ${THEME.border} text-left text-xs font-semibold ${THEME.textMuted} uppercase tracking-wide">
 							<th class="pb-2 pr-4">${msg.access.member}</th>
 							<th class="pb-2 pr-4">${msg.access.requested}</th>
 							<th class="pb-2"></th>
@@ -227,7 +227,7 @@ function renderDangerZone(
 	const msg = t(locale as "en" | "fr");
 
 	if (!isOwner) {
-		return `<section class="mt-10 border ${THEME.borderDefault} rounded-lg p-6">
+		return `<section class="mt-10 border ${THEME.border} rounded-lg p-6">
 			<h2 class="text-lg font-semibold ${THEME.textMuted} mb-2">${msg.settings.dangerZone}</h2>
 			<p class="text-sm ${THEME.textMuted}">${msg.settings.deleteWikiOwnerOnly}</p>
 		</section>`;
@@ -244,7 +244,7 @@ function renderDangerZone(
 				${fmt(msg.settings.typeToConfirm, { name: `<strong>${escapeHtml(wikiName)}</strong>` })}
 			</label>
 			<input type="text" name="confirm" autocomplete="off"
-				class="block w-full max-w-sm px-3 py-1.5 text-sm border ${THEME.borderInput} rounded mb-3 focus:outline-none ${THEME.accentInputFocusBorder}"
+				class="block w-full max-w-sm px-3 py-1.5 text-sm border ${THEME.borderInput} rounded mb-3 focus:outline-none focus:border-teal-500"
 				placeholder="${escapeHtml(wikiName)}" />
 			<button type="submit" class="${dangerButtonClass}">${msg.settings.deleteWiki}</button>
 		</form>
@@ -270,12 +270,12 @@ function renderDetailsSection(
 			<div class="flex flex-col gap-1">
 				<label class="text-xs font-medium ${THEME.textMuted}">${msg.settings.nameLabel}</label>
 				<input type="text" name="name" required autocomplete="off" value="${escapeHtml(wikiName)}"
-					class="px-3 py-1.5 text-sm border ${THEME.borderInput} rounded focus:outline-none ${THEME.accentInputFocusBorder}" />
+					class="px-3 py-1.5 text-sm border ${THEME.borderInput} rounded focus:outline-none focus:border-teal-500" />
 			</div>
 			<div class="flex flex-col gap-1">
 				<label class="text-xs font-medium ${THEME.textMuted}">${msg.settings.descriptionLabel}</label>
 				<textarea name="description" rows="3"
-					class="px-3 py-1.5 text-sm border ${THEME.borderInput} rounded focus:outline-none ${THEME.accentInputFocusBorder}">${escapeHtml(wikiDescription)}</textarea>
+					class="px-3 py-1.5 text-sm border ${THEME.borderInput} rounded focus:outline-none focus:border-teal-500">${escapeHtml(wikiDescription)}</textarea>
 			</div>
 			<div>
 				<button type="submit" class="${primarySmallButtonClass}">${msg.settings.save}</button>
diff --git a/src/views/theme.ts b/src/views/theme.ts
index 64069c8..33c32af 100644
--- a/src/views/theme.ts
+++ b/src/views/theme.ts
@@ -1,74 +1,49 @@
 import { escapeHtml } from "../lib/html.ts";
 
 export const THEME = {
-	// Accent
-	accentBg: "bg-teal-700",
-	accentText: "text-teal-700",
-	accentBorder: "border-teal-700",
-	accentHoverText: "hover:text-teal-700",
-	accentDarkHoverBg: "hover:bg-teal-800",
-	accentDarkText: "text-teal-800",
-	accentLightHoverBg: "hover:bg-teal-50",
-	accentLightFocusBg: "focus:bg-teal-50",
-	accentFocusRing: "focus:ring-teal-600",
-	accentFocusBorder: "focus:border-teal-600",
-	accentInputFocusBorder: "focus:border-teal-500",
-	accentSubtleRing: "focus:ring-teal-200",
-
 	// Text
-	textPrimary: "text-stone-900",
+	text: "text-stone-900",
 	textSecondary: "text-stone-700",
 	textMuted: "text-stone-500",
-	textSecondaryHover: "hover:text-stone-700",
 
 	// Backgrounds
-	bgPage: "bg-stone-50",
+	bg: "bg-stone-50",
 	bgSurface: "bg-white",
 	bgPlaceholder: "bg-stone-200",
 
 	// Borders
-	borderDefault: "border-stone-200",
-	borderInput: "border-stone-300",
+	border: "border-stone-200",
 	borderSubtle: "border-stone-100",
+	borderInput: "border-stone-300",
 
-	// Status
-	statusPublicBg: "bg-green-100",
-	statusPublicText: "text-green-700",
-	statusPrivateBg: "bg-yellow-100",
-	statusPrivateText: "text-yellow-700",
+	// Accent
+	accentText: "text-teal-700",
+	accentSoft: "hover:bg-teal-50",
 
 	// Error
 	errorBg: "bg-red-50",
 	errorBorder: "border-red-200",
 	errorText: "text-red-700",
-	errorActionBg: "bg-red-700",
-	errorActionDarkHoverBg: "hover:bg-red-800",
-
-	// Success (banner/flash confirmations — uses the accent family on purpose)
-	successBg: "bg-teal-50",
-	successBorder: "border-teal-200",
-	successText: "text-teal-800",
 
 	// Fonts
 	fontMono: "font-mono",
-	fontSans: "",
 } as const;
 
-export const inputClass = `w-full border ${THEME.borderInput} rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 ${THEME.accentFocusRing}`;
+export const inputClass = `w-full border ${THEME.borderInput} rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-600`;
 
-export const primaryButtonClass = `px-4 py-2 ${THEME.accentBg} text-white text-sm font-medium rounded ${THEME.accentDarkHoverBg}`;
+export const primaryButtonClass = `px-4 py-2 bg-teal-700 text-white text-sm font-medium rounded hover:bg-teal-800`;
 
-export const primarySmallButtonClass = `px-3 py-1.5 ${THEME.accentBg} text-white text-sm font-medium rounded ${THEME.accentDarkHoverBg}`;
+export const primarySmallButtonClass = `px-3 py-1.5 bg-teal-700 text-white text-sm font-medium rounded hover:bg-teal-800`;
 
-export const outlineSmallButtonClass = `px-3 py-1.5 border ${THEME.accentBorder} ${THEME.accentText} text-sm font-medium rounded ${THEME.accentLightHoverBg}`;
+export const outlineSmallButtonClass = `px-3 py-1.5 border border-teal-700 ${THEME.accentText} text-sm font-medium rounded ${THEME.accentSoft}`;
 
-export const dangerButtonClass = `px-4 py-2 ${THEME.errorActionBg} text-white text-sm font-medium rounded ${THEME.errorActionDarkHoverBg}`;
+export const dangerButtonClass = `px-4 py-2 bg-red-700 text-white text-sm font-medium rounded hover:bg-red-800`;
 
-export const dangerSmallButtonClass = `px-2.5 py-1 ${THEME.errorActionBg} text-white text-xs font-medium rounded ${THEME.errorActionDarkHoverBg}`;
+export const dangerSmallButtonClass = `px-2.5 py-1 bg-red-700 text-white text-xs font-medium rounded hover:bg-red-800`;
 
-export const sidebarButtonClass = `w-full flex items-center gap-2 px-3 py-1.5 text-sm border ${THEME.borderDefault} rounded-lg ${THEME.bgSurface} ${THEME.textMuted} ${THEME.accentLightHoverBg} cursor-pointer`;
+export const sidebarButtonClass = `w-full flex items-center gap-2 px-3 py-1.5 text-sm border ${THEME.border} rounded-lg ${THEME.bgSurface} ${THEME.textMuted} ${THEME.accentSoft} cursor-pointer`;
 
-export const sidebarLinkClass = `flex items-center gap-2 px-3 py-1.5 text-sm ${THEME.textSecondary} ${THEME.accentLightHoverBg} rounded-lg`;
+export const sidebarLinkClass = `flex items-center gap-2 px-3 py-1.5 text-sm ${THEME.textSecondary} ${THEME.accentSoft} rounded-lg`;
 
 export const kbdClass = `text-xs ${THEME.bgPlaceholder} px-1.5 py-0.5 rounded ${THEME.textMuted}`;
 
@@ -79,7 +54,7 @@ export function errorBanner(message: string | undefined): string {
 
 export function successBanner(message: string | undefined): string {
 	if (!message) return "";
-	return `<div class="mb-4 p-3 ${THEME.successBg} border ${THEME.successBorder} ${THEME.successText} text-sm rounded">${escapeHtml(message)}</div>`;
+	return `<div class="mb-4 p-3 bg-teal-50 border border-teal-200 text-teal-800 text-sm rounded">${escapeHtml(message)}</div>`;
 }
 
 export const THEME_HEX = {
diff --git a/src/views/wiki-card.ts b/src/views/wiki-card.ts
index 287e4fb..a5c9545 100644
--- a/src/views/wiki-card.ts
+++ b/src/views/wiki-card.ts
@@ -33,7 +33,7 @@ export function wikiCard(wiki: WikiWithNoteCount, locale: Locale): string {
 			? `<div class="flex items-center gap-1.5 min-w-0 max-w-[50%] justify-end">${ownerHandle}${ownerAvatar}</div>`
 			: "";
 
-	return `<a href="/wiki/${wiki.slug}" class="flex flex-col h-full ${THEME.bgSurface} border ${THEME.borderDefault} rounded-lg p-4 hover:shadow-md transition-shadow">
+	return `<a href="/wiki/${wiki.slug}" class="flex flex-col h-full ${THEME.bgSurface} border ${THEME.border} rounded-lg p-4 hover:shadow-md transition-shadow">
 		<div class="flex items-start justify-between gap-2">
 			<h3 class="font-semibold ${THEME.accentText} truncate">${escapeHtml(wiki.name)}</h3>
 			${languageBadge}
diff --git a/src/views/wiki-list.ts b/src/views/wiki-list.ts
index 92f941f..7288ad2 100644
--- a/src/views/wiki-list.ts
+++ b/src/views/wiki-list.ts
@@ -22,7 +22,7 @@ export function wikiToolbar(
 	const { sort, gridTargetId, limit } = options;
 
 	const sortDropdown = `<select id="sort-select" name="sort"
-		class="px-2 py-1.5 text-sm border ${THEME.borderDefault} rounded-lg outline-none ${THEME.accentInputFocusBorder} focus:ring-1 ${THEME.accentSubtleRing} ${THEME.bgSurface} shrink-0"
+		class="px-2 py-1.5 text-sm border ${THEME.border} rounded-lg outline-none focus:border-teal-500 focus:ring-1 focus:ring-teal-200 ${THEME.bgSurface} shrink-0"
 		onchange="htmx.trigger(document.getElementById('wiki-search'), 'filterChange')">
 		<option value="updated"${sort === "updated" ? " selected" : ""}>${msg.home.recentlyUpdated}</option>
 		<option value="created"${sort === "created" ? " selected" : ""}>${msg.home.recentlyCreated}</option>
@@ -31,7 +31,7 @@ export function wikiToolbar(
 	const searchInput = `<div class="relative flex-1 min-w-0">
 		<input id="wiki-search" type="text" placeholder="${msg.search.searchWikis}" autocomplete="off"
 		aria-label="${msg.search.searchWikis}"
-		class="w-full px-3 py-1.5 pr-8 text-sm border ${THEME.borderDefault} rounded-lg outline-none ${THEME.accentInputFocusBorder} focus:ring-1 ${THEME.accentSubtleRing} ${THEME.bgSurface}"
+		class="w-full px-3 py-1.5 pr-8 text-sm border ${THEME.border} rounded-lg outline-none focus:border-teal-500 focus:ring-1 focus:ring-teal-200 ${THEME.bgSurface}"
 		hx-get="/search" hx-trigger="input changed delay:150ms, filterChange" hx-target="#${gridTargetId}" name="q"
 		hx-include="#lang-select, #sort-select, #limit-input"
 		hx-indicator="#wiki-search-spinner">
@@ -64,7 +64,7 @@ function languageDropdown(languages: string[], locale: Locale): string {
 		.join("\n");
 
 	return `<select id="lang-select" name="lang"
-		class="px-2 py-1.5 text-sm border ${THEME.borderDefault} rounded-lg outline-none ${THEME.accentInputFocusBorder} focus:ring-1 ${THEME.accentSubtleRing} ${THEME.bgSurface} shrink-0"
+		class="px-2 py-1.5 text-sm border ${THEME.border} rounded-lg outline-none focus:border-teal-500 focus:ring-1 focus:ring-teal-200 ${THEME.bgSurface} shrink-0"
 		onchange="htmx.trigger(document.getElementById('wiki-search'), 'filterChange')">
 		<option value="">${msg.home.allLanguages}</option>
 		${options}
@@ -118,7 +118,7 @@ function paginationControls(
 	const hasNext = page < totalPages;
 
 	const btnBase = `px-3 py-1.5 text-sm font-medium rounded-lg border`;
-	const btnEnabled = `${btnBase} ${THEME.borderDefault} ${THEME.textSecondary} ${THEME.accentLightHoverBg} cursor-pointer`;
+	const btnEnabled = `${btnBase} ${THEME.border} ${THEME.textSecondary} ${THEME.accentSoft} cursor-pointer`;
 	const btnDisabled = `${btnBase} ${THEME.borderSubtle} ${THEME.textMuted} opacity-50 cursor-not-allowed`;
 
 	const prevBtn = hasPrev
-- 
2.51.2