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

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

Browse source 
First file in the visual track consolidation, retried after the theme
system was rewritten in 919fcca4b. The earlier attempt failed because
themes.css was inconsistent (--color-X resolved to wrapped string from
@theme inline, then to raw channels after runtime store ran, with raw
channels being invalid as a CSS color). With the new single-layer
themes.css all hsl(var(--color-X)) usages resolve correctly in light
and dark mode regardless of hydration state.

Substitution applied (the canonical pattern):
  color: #374151 + :global(.dark) #e5e7eb  →  color: hsl(var(--color-foreground))
  color: #9ca3af                           →  color: hsl(var(--color-muted-foreground))
  border: 1px rgba(0,0,0,0.08) + dark dup  →  border: 1px solid hsl(var(--color-border))
  background: rgba(0,0,0,0.04) + dark dup  →  background: hsl(var(--color-surface-hover))

Net: 260 → 245 LOC, 7 hand-rolled palette rules eliminated, all 6
:global(.dark) selectors removed (theme system handles both modes via
.dark class on <html>).

Brand colors that should NOT track the theme primary stay literal:
  - violet category badge (#8b5cf6) — kept hardcoded with color-mix for
    the 12% alpha background, since this is a deliberate accent
    indicating quote category, not a theme color
  - favorite-active red — switched from literal to var(--color-error)
    so it follows the theme's error color (consistent with other
    delete/danger affordances in the app)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 01:52:15 +02:00
parent 3b5d58ecbe
commit c06e685754
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,10 @@
</div>
<style>
/* P5: theme-token migration. All :global(.dark) paired rules and the
hand-rolled #374151/#9ca3af palette removed — hsl(var(--color-X))
from @mana/shared-tailwind/themes.css handles light + dark + variants
automatically. */
.detail-view {
display: flex;
flex-direction: column;
@ -138,7 +142,7 @@
padding: 2rem 0;
text-align: center;
font-size: 0.8125rem;
color: #9ca3af;
color: hsl(var(--color-muted-foreground));
}
.quote-text {
@ -146,10 +150,7 @@
font-weight: 300;
font-style: italic;
line-height: 1.7;
color: #374151;
}
:global(.dark) .quote-text {
color: #e5e7eb;
color: hsl(var(--color-foreground));
}
.author-row {
@ -159,12 +160,12 @@
}
.author-name {
font-size: 0.875rem;
color: #9ca3af;
color: hsl(var(--color-muted-foreground));
}
.bio-btn {
border: none;
background: none;
color: #9ca3af;
color: hsl(var(--color-muted-foreground));
cursor: pointer;
padding: 0.125rem;
border-radius: 0.25rem;
@ -172,13 +173,13 @@
transition: color 0.15s;
}
.bio-btn:hover {
color: #6b7280;
color: hsl(var(--color-foreground));
}
.author-bio {
font-size: 0.8125rem;
font-style: italic;
color: #9ca3af;
color: hsl(var(--color-muted-foreground));
line-height: 1.5;
}
@ -188,6 +189,7 @@
gap: 0.5rem;
flex-wrap: wrap;
}
/* Category badge uses brand violet (deliberate accent, not theme primary) */
.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: hsl(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 hsl(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 hsl(var(--color-border));
background: transparent;
font-size: 0.75rem;
color: #9ca3af;
color: hsl(var(--color-muted-foreground));
cursor: pointer;
transition: all 0.15s;
}
.action-btn:hover {
background: rgba(0, 0, 0, 0.04);
color: #6b7280;
background: hsl(var(--color-surface-hover));
color: hsl(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: hsl(var(--color-error));
border-color: hsl(var(--color-error) / 0.25);
}
@media (max-width: 640px) {