marcel/familienarchiv
1
0
Fork 0
Code Issues 120 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(#240): make Mission Control Strip dark-mode compatible

Browse Source 
Replace all hardcoded Tailwind colours with semantic tokens:
- bg-white → bg-surface (outer strip container)
- text-gray-400 → text-ink-3 (dates, meta text, empty-state copy)
- text-green-800 / text-green-700 → text-ink / text-ink-2 (headings, pulse, reviewed %)
- bg-green-50 / border-green-200 → bg-accent-bg / border-line (skill pill, weekly pulse badge)
- bg-ink text-white → bg-primary text-primary-fg (CTA buttons; dark: mint bg + navy text)
- hover:text-white → hover:text-primary-fg (ghost CTA hover text)
- focus-visible:ring-brand-navy → focus-visible:ring-focus-ring (all doc links)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-16 10:31:20 +02:00
parent 48152517aa
commit 86a216918f
4 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/TranscriptionColumn.svelte
View File

@@ -56,7 +56,7 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
<li>
<a
href="/documents/{doc.id}"
class="hover:bg-brand-sand flex min-h-[44px] flex-col justify-center rounded px-1 py-2 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
>
<div class="flex flex-wrap items-center gap-1.5">
<span class="font-serif text-sm text-ink">{doc.title}</span>
@@ -65,11 +65,11 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
{/if}
</div>
{#if doc.documentDate}
<span class="mt-0.5 text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
<span class="mt-0.5 text-xs text-ink-3">{formatDate(doc.documentDate)}</span>
{/if}
{#if doc.textedBlockCount > 0}
<div class="mt-1.5 flex items-center gap-2">
<span class="shrink-0 text-xs text-gray-400">
<span class="shrink-0 text-xs text-ink-3">
{m.mission_control_blocks_progress({
texted: doc.textedBlockCount,
total: doc.annotationCount
@@ -83,7 +83,7 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
</div>
</div>
{:else}
<span class="mt-0.5 text-xs text-gray-400 italic">—</span>
<span class="mt-0.5 text-xs text-ink-3 italic">—</span>
{/if}
</a>
</li>
@@ -91,7 +91,7 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
</ul>
<a
href="/enrich?filter=NEEDS_TRANSCRIPTION&next=1"
class="mt-auto block w-full rounded-sm bg-ink py-2 text-center text-xs font-semibold text-white transition-colors hover:bg-ink-2 focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-1 focus-visible:outline-none"
class="mt-auto block w-full rounded-sm bg-primary py-2 text-center text-xs font-semibold text-primary-fg transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-1 focus-visible:outline-none"
>
{m.mission_control_transcription_cta()}
</a>