From 761851847f48d3f9d9a1543d6c2d6430f8043278 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 9 Apr 2026 00:36:43 +0200
Subject: [PATCH] Revert "refactor(mana/web): migrate zitare DetailView to
 theme tokens (P5 phase 1 sample)"

This reverts commit 74140e115407ebbde71b8c5e5b11e30525427a49.
---
 .../modules/zitare/views/DetailView.svelte    | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/modules/zitare/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/zitare/views/DetailView.svelte
index ae86e641e..6a52be447 100644
--- a/apps/mana/apps/web/src/lib/modules/zitare/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/zitare/views/DetailView.svelte
@@ -126,9 +126,6 @@
 </div>
 
 <style>
-	/* P5: theme-token migration. All `:global(.dark)` paired rules and
-	   hand-rolled #374151/#9ca3af palette removed — `var(--color-*)` from
-	   @mana/shared-tailwind/themes.css handles light + dark automatically. */
 	.detail-view {
 		display: flex;
 		flex-direction: column;
@@ -141,7 +138,7 @@
 		padding: 2rem 0;
 		text-align: center;
 		font-size: 0.8125rem;
-		color: var(--color-muted-foreground);
+		color: #9ca3af;
 	}
 
 	.quote-text {
@@ -149,7 +146,10 @@
 		font-weight: 300;
 		font-style: italic;
 		line-height: 1.7;
-		color: var(--color-foreground);
+		color: #374151;
+	}
+	:global(.dark) .quote-text {
+		color: #e5e7eb;
 	}
 
 	.author-row {
@@ -159,12 +159,12 @@
 	}
 	.author-name {
 		font-size: 0.875rem;
-		color: var(--color-muted-foreground);
+		color: #9ca3af;
 	}
 	.bio-btn {
 		border: none;
 		background: none;
-		color: var(--color-muted-foreground);
+		color: #9ca3af;
 		cursor: pointer;
 		padding: 0.125rem;
 		border-radius: 0.25rem;
@@ -172,13 +172,13 @@
 		transition: color 0.15s;
 	}
 	.bio-btn:hover {
-		color: var(--color-foreground);
+		color: #6b7280;
 	}
 
 	.author-bio {
 		font-size: 0.8125rem;
 		font-style: italic;
-		color: var(--color-muted-foreground);
+		color: #9ca3af;
 		line-height: 1.5;
 	}
 
@@ -188,8 +188,6 @@
 		gap: 0.5rem;
 		flex-wrap: wrap;
 	}
-	/* Category badge keeps its brand color (violet-500) since it's a deliberate
-	   accent that should not adopt the theme primary on accident. */
 	.category-badge {
 		font-size: 0.6875rem;
 		font-weight: 600;
@@ -197,19 +195,25 @@
 		letter-spacing: 0.04em;
 		padding: 0.125rem 0.5rem;
 		border-radius: 9999px;
-		background: color-mix(in srgb, #8b5cf6 12%, transparent);
+		background: rgba(139, 92, 246, 0.1);
 		color: #8b5cf6;
 	}
+	:global(.dark) .category-badge {
+		background: rgba(139, 92, 246, 0.15);
+	}
 	.source-text {
 		font-size: 0.75rem;
-		color: var(--color-muted-foreground);
+		color: #9ca3af;
 	}
 
 	.actions {
 		display: flex;
 		gap: 0.5rem;
 		padding-top: 0.5rem;
-		border-top: 1px solid var(--color-border);
+		border-top: 1px solid rgba(0, 0, 0, 0.06);
+	}
+	:global(.dark) .actions {
+		border-color: rgba(255, 255, 255, 0.06);
 	}
 	.action-btn {
 		display: flex;
@@ -217,20 +221,31 @@
 		gap: 0.375rem;
 		padding: 0.375rem 0.625rem;
 		border-radius: 0.375rem;
-		border: 1px solid var(--color-border);
+		border: 1px solid rgba(0, 0, 0, 0.08);
 		background: transparent;
 		font-size: 0.75rem;
-		color: var(--color-muted-foreground);
+		color: #9ca3af;
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.action-btn:hover {
-		background: var(--color-surface-hover);
-		color: var(--color-foreground);
+		background: rgba(0, 0, 0, 0.04);
+		color: #6b7280;
 	}
 	.action-btn.fav-active {
-		color: var(--color-error, #ef4444);
-		border-color: color-mix(in srgb, var(--color-error, #ef4444) 25%, transparent);
+		color: #ef4444;
+		border-color: rgba(239, 68, 68, 0.2);
+	}
+	:global(.dark) .action-btn {
+		border-color: rgba(255, 255, 255, 0.08);
+	}
+	:global(.dark) .action-btn:hover {
+		background: rgba(255, 255, 255, 0.06);
+		color: #e5e7eb;
+	}
+	:global(.dark) .action-btn.fav-active {
+		color: #ef4444;
+		border-color: rgba(239, 68, 68, 0.2);
 	}
 
 	@media (max-width: 640px) {