till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 19:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Revert "refactor(mana/web): migrate zitare DetailView to theme tokens (P5 phase 1 sample)"

Browse source 
This reverts commit 74140e1154.
This commit is contained in:
Till JS 2026-04-09 00:36:43 +02:00
parent 6fd4655273
commit 761851847f
1 changed files with 35 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

55
apps/mana/apps/web/src/lib/modules/zitare/views/DetailView.svelte
View file

@ -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) {