marcel/familienarchiv
1
0
Fork 0
Code Issues 114 Pull Requests 3 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/SegmentationColumn.svelte
View File

@@ -36,12 +36,12 @@ function formatDate(dateStr: string): string {
{m.mission_control_segmentation_heading()}
</h3>
<span
class="inline-flex items-center gap-1 rounded-full border border-green-200 bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-800"
class="inline-flex items-center gap-1 rounded-full border border-line bg-accent-bg px-2 py-0.5 text-xs font-semibold text-ink"
>
{m.mission_control_seg_skill_pill()}
</span>
{#if weeklyCount > 0}
<p class="mt-1 text-xs font-semibold text-green-700">
<p class="mt-1 text-xs font-semibold text-ink-2">
{m.mission_control_weekly_pulse({ count: weeklyCount })}
</p>
{/if}
@@ -51,7 +51,7 @@ function formatDate(dateStr: string): string {
<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>
@@ -60,7 +60,7 @@ function formatDate(dateStr: string): string {
{/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}
</a>
</li>
@@ -68,7 +68,7 @@ function formatDate(dateStr: string): string {
</ul>
<a
href="/enrich?filter=NEEDS_SEGMENTATION&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_segmentation_cta()}
</a>