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

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

Browse source 
First file in the P5 visual-track consolidation. Replaces hand-rolled
#374151/#9ca3af/#e5e7eb palette + paired :global(.dark) duplications
with var(--color-foreground), var(--color-muted-foreground),
var(--color-border), var(--color-surface-hover) etc. — the same
theme tokens already used by shared-ui Card / PageHeader / FormModal.

Net: 260 → 245 LOC (-15), 7 hand-rolled rules eliminated, all
:global(.dark) selectors gone (theme system handles light/dark via
.dark class on <html>).

Brand colors that should NOT track the theme primary stay hardcoded:
the violet category badge (#8b5cf6) keeps its literal value, the
favorite-active red gets var(--color-error, #ef4444) with fallback.

This is the smallest of the 8 files identified by the P5 audit:
zitare DetailView (7 rules) → cycles → calendar → contacts → todo →
finance → notes → dreams (31 rules). Migration runs file-by-file
with one commit each so visual diffs are easy to review.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 00:29:39 +02:00
parent 7901a5df2f
commit 74140e1154
1 changed files with 20 additions and 35 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,6 +126,9 @@
</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;
@ -138,7 +141,7 @@
padding: 2rem 0;
text-align: center;
font-size: 0.8125rem;
color: #9ca3af;
color: var(--color-muted-foreground);
}
.quote-text {
@ -146,10 +149,7 @@
font-weight: 300;
font-style: italic;
line-height: 1.7;
color: #374151;
}
:global(.dark) .quote-text {
color: #e5e7eb;
color: var(--color-foreground);
}
.author-row {
@ -159,12 +159,12 @@
}
.author-name {
font-size: 0.875rem;
color: #9ca3af;
color: var(--color-muted-foreground);
}
.bio-btn {
border: none;
background: none;
color: #9ca3af;
color: var(--color-muted-foreground);
cursor: pointer;
padding: 0.125rem;
border-radius: 0.25rem;
@ -172,13 +172,13 @@
transition: color 0.15s;
}
.bio-btn:hover {
color: #6b7280;
color: var(--color-foreground);
}
.author-bio {
font-size: 0.8125rem;
font-style: italic;
color: #9ca3af;
color: var(--color-muted-foreground);
line-height: 1.5;
}
@ -188,6 +188,8 @@
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;
@ -195,25 +197,19 @@
letter-spacing: 0.04em;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
background: rgba(139, 92, 246, 0.1);
background: color-mix(in srgb, #8b5cf6 12%, transparent);
color: #8b5cf6;
}
:global(.dark) .category-badge {
background: rgba(139, 92, 246, 0.15);
}
.source-text {
font-size: 0.75rem;
color: #9ca3af;
color: var(--color-muted-foreground);
}
.actions {
display: flex;
gap: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
:global(.dark) .actions {
border-color: rgba(255, 255, 255, 0.06);
border-top: 1px solid var(--color-border);
}
.action-btn {
display: flex;
@ -221,31 +217,20 @@
gap: 0.375rem;
padding: 0.375rem 0.625rem;
border-radius: 0.375rem;
border: 1px solid rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-border);
background: transparent;
font-size: 0.75rem;
color: #9ca3af;
color: var(--color-muted-foreground);
cursor: pointer;
transition: all 0.15s;
}
.action-btn:hover {
background: rgba(0, 0, 0, 0.04);
color: #6b7280;
background: var(--color-surface-hover);
color: var(--color-foreground);
}
.action-btn.fav-active {
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);
color: var(--color-error, #ef4444);
border-color: color-mix(in srgb, var(--color-error, #ef4444) 25%, transparent);
}
@media (max-width: 640px) {