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

fix(geschichte): use brand-mint token for journey annotation border

Browse Source 
border-mint is not a generated utility (the token is --color-brand-mint),
so the border-l-2 fell back to currentColor and rendered navy instead of
the mint accent specified in LR-2.

Closes #798
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-10 22:21:53 +02:00
parent f2ebaacfb1
commit cbf4432d01
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/geschichte/JourneyItemCard.svelte
View File

@@ -58,7 +58,7 @@ const hasNote = $derived(item.note != null && item.note.trim().length > 0);
</a> </a>
{#if hasNote} {#if hasNote}
<!-- plaintext — do NOT use {@html} here --> <!-- plaintext — do NOT use {@html} here -->
<div class="border-mint mt-3 rounded-r-sm border-l-2 bg-surface py-1.5 pr-2 pl-3"> <div class="mt-3 rounded-r-sm border-l-2 border-brand-mint bg-surface py-1.5 pr-2 pl-3">
<p class="text-xs leading-relaxed text-ink-2 italic">{item.note}</p> <p class="text-xs leading-relaxed text-ink-2 italic">{item.note}</p>
</div> </div>
{/if} {/if}

8
frontend/src/lib/geschichte/JourneyItemCard.svelte.spec.ts
View File

@@ -110,6 +110,14 @@ describe('JourneyItemCard', () => {
await expect.element(page.getByText('Ein wichtiger Brief')).toBeVisible(); await expect.element(page.getByText('Ein wichtiger Brief')).toBeVisible();
}); });
it('annotation block uses the brand mint accent border (#798)', async () => {
render(JourneyItemCard, { props: { item: baseItem({ note: 'Ein wichtiger Brief' }) } });
const note = document.querySelector('[class*="border-l-2"]');
expect(note).not.toBeNull();
expect(note!.className).toContain('border-brand-mint');
});
it('omits annotation block when note is blank or whitespace', async () => { it('omits annotation block when note is blank or whitespace', async () => {
render(JourneyItemCard, { props: { item: baseItem({ note: ' ' }) } }); render(JourneyItemCard, { props: { item: baseItem({ note: ' ' }) } });