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

refactor(components): replace all hardcoded colors with semantic tokens

Browse Source 
Replaces bg-white, text-brand-navy, border-brand-sand, text-gray-*, bg-[#2A2A2A],
bg-brand-purple/15, hover:bg-brand-sand, etc. across all 35 .svelte files with
semantic token utilities (bg-surface, text-ink, border-line, bg-pdf-bg, bg-nav-active,
bg-muted, text-accent, bg-primary, ...).

Also adds CSS filter: invert(1) in layout.css for De Gruyter <img> icons in dark mode,
excluding icons that carry .invert already (to prevent double-inversion).

Closes #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 12:22:50 +01:00
parent caba89dacc
commit e4539ed0f0
32 changed files with 569 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/routes/persons/+page.svelte
View File

@@ -26,17 +26,17 @@ function handleSearch() {
<div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
<!-- Header Area -->
<div
class="mb-10 flex flex-col justify-between gap-6 border-b border-brand-navy/10 pb-6 md:flex-row md:items-end"
class="mb-10 flex flex-col justify-between gap-6 border-b border-ink/10 pb-6 md:flex-row md:items-end"
>
<div>
<h1 class="font-serif text-3xl font-medium text-brand-navy">{m.persons_heading()}</h1>
<p class="mt-2 max-w-xl font-sans text-sm text-brand-navy/60">
<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1>
<p class="mt-2 max-w-xl font-sans text-sm text-ink/60">
{m.persons_subtitle()}
</p>
{#if data.canWrite}
<a
href="/persons/new"
class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
@@ -61,10 +61,10 @@ function handleSearch() {
oninput={handleSearch}
onfocus={() => (qFocused = true)}
onblur={() => (qFocused = false)}
class="block w-full rounded-sm border border-gray-300 bg-white py-2.5 pr-10 pl-4 font-sans text-sm text-brand-navy placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
class="block w-full rounded-sm border border-gray-300 bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-gray-400 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400"
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
@@ -79,11 +79,9 @@ function handleSearch() {
{#if data.persons.length === 0}
<div
class="border-brand-sand flex flex-col items-center justify-center rounded-lg border border-dashed bg-white py-16 text-center"
class="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface py-16 text-center"
>
<div
class="bg-brand-sand/30 mb-3 flex h-12 w-12 items-center justify-center rounded-full text-brand-navy"
>
<div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-ink">
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
alt=""
@@ -91,25 +89,25 @@ function handleSearch() {
class="h-6 w-6"
/>
</div>
<p class="font-serif text-lg text-brand-navy">{m.persons_empty_heading()}</p>
<p class="mt-1 font-sans text-sm text-gray-500">{m.persons_empty_text()}</p>
<p class="font-serif text-lg text-ink">{m.persons_empty_heading()}</p>
<p class="mt-1 font-sans text-sm text-ink-2">{m.persons_empty_text()}</p>
</div>
{:else}
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{#each data.persons as person (person.id)}
<a href="/persons/{person.id}" class="group block h-full">
<div
class="border-brand-sand relative flex h-full items-center gap-4 overflow-hidden rounded border bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-line bg-surface p-6 shadow-sm transition-all duration-200 hover:border-primary hover:shadow-md"
>
<!-- Decorative Accent on Hover -->
<div
class="absolute top-0 bottom-0 left-0 w-1 bg-brand-navy opacity-0 transition-opacity group-hover:opacity-100"
class="absolute top-0 bottom-0 left-0 w-1 bg-primary opacity-0 transition-opacity group-hover:opacity-100"
></div>
<!-- Avatar -->
<div class="flex-shrink-0">
<div
class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-navy font-serif text-lg text-white transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-white transition-colors group-hover:bg-accent group-hover:text-ink"
>
{person.firstName[0]}{person.lastName[0]}
</div>
@@ -118,13 +116,13 @@ function handleSearch() {
<!-- Info -->
<div class="min-w-0 flex-1">
<p
class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
>
{person.firstName}
{person.lastName}
</p>
{#if person.alias}
<p class="mt-0.5 truncate font-sans text-xs text-gray-500">"{person.alias}"</p>
<p class="mt-0.5 truncate font-sans text-xs text-ink-2">"{person.alias}"</p>
{/if}
</div>
</div>

132
frontend/src/routes/persons/[id]/+page.svelte
View File

@@ -98,7 +98,7 @@ $effect(() => {
<div class="mb-6">
<a
href="/persons"
class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
class="group inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
@@ -111,15 +111,15 @@ $effect(() => {
</div>
<!-- Header / Metadata Card -->
<div class="border-brand-sand mb-10 overflow-hidden rounded-sm border bg-white shadow-sm">
<div class="h-2 w-full bg-brand-navy"></div>
<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
<div class="h-2 w-full bg-primary"></div>
<div class="p-8 md:p-10">
{#if editMode && data.canWrite}
<!-- Edit Form -->
<form method="POST" action="?/update" use:enhance>
<div class="flex flex-col gap-6">
<h2 class="border-b border-gray-100 pb-3 font-serif text-xl text-brand-navy">
<h2 class="border-b border-line-2 pb-3 font-serif text-xl text-ink">
{m.person_edit_heading()}
</h2>
@@ -133,7 +133,7 @@ $effect(() => {
<div>
<label
for="firstName"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.form_label_first_name()} *</label
>
<input
@@ -142,13 +142,13 @@ $effect(() => {
type="text"
required
value={person.firstName}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div>
<label
for="lastName"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.form_label_last_name()} *</label
>
<input
@@ -157,13 +157,13 @@ $effect(() => {
type="text"
required
value={person.lastName}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div class="md:col-span-2">
<label
for="alias"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.form_label_alias()}</label
>
<input
@@ -171,13 +171,13 @@ $effect(() => {
name="alias"
type="text"
value={person.alias ?? ''}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div>
<label
for="birthYear"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.person_label_birth_year()}</label
>
<input
@@ -188,13 +188,13 @@ $effect(() => {
max="2100"
placeholder={m.person_placeholder_year()}
value={person.birthYear ?? ''}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div>
<label
for="deathYear"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.person_label_death_year()}</label
>
<input
@@ -205,13 +205,13 @@ $effect(() => {
max="2100"
placeholder={m.person_placeholder_year()}
value={person.deathYear ?? ''}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div class="md:col-span-2">
<label
for="notes"
class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.person_label_notes()}</label
>
<textarea
@@ -219,7 +219,7 @@ $effect(() => {
name="notes"
rows="4"
placeholder={m.person_placeholder_notes()}
class="block w-full resize-y rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
class="block w-full resize-y rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
>{person.notes ?? ''}</textarea
>
</div>
@@ -228,14 +228,14 @@ $effect(() => {
<div class="flex gap-3">
<button
type="submit"
class="rounded bg-brand-navy px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
>
{m.btn_save()}
</button>
<button
type="button"
onclick={() => (editMode = false)}
class="rounded border border-gray-300 px-5 py-2 text-sm font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
class="rounded border border-gray-300 px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-gray-50"
>
{m.btn_cancel()}
</button>
@@ -247,15 +247,15 @@ $effect(() => {
<div class="flex flex-col items-start gap-8 md:flex-row">
<div class="flex-shrink-0">
<div
class="border-brand-sand bg-brand-sand/30 flex h-24 w-24 items-center justify-center rounded-full border text-brand-navy"
class="flex h-24 w-24 items-center justify-center rounded-full border border-line bg-muted text-ink"
>
<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
</div>
</div>
<div class="w-full flex-1">
<div class="mb-8 flex items-start justify-between border-b border-gray-100 pb-4">
<h1 class="font-serif text-4xl text-brand-navy">
<div class="mb-8 flex items-start justify-between border-b border-line-2 pb-4">
<h1 class="font-serif text-4xl text-ink">
{person.firstName}
{person.lastName}
</h1>
@@ -263,7 +263,7 @@ $effect(() => {
{#if data.canWrite}
<button
onclick={() => (editMode = true)}
class="inline-flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:border-brand-navy hover:text-brand-navy"
class="inline-flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
>
<img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
@@ -280,10 +280,10 @@ $effect(() => {
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div>
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.person_label_full_name()}</span
>
<span class="block font-serif text-lg text-brand-navy"
<span class="block font-serif text-lg text-ink"
>{person.firstName} {person.lastName}</span
>
</div>
@@ -291,23 +291,21 @@ $effect(() => {
{#if person.alias}
<div>
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.form_label_alias()}</span
>
<span class="block font-serif text-lg text-brand-navy italic"
>"{person.alias}"</span
>
<span class="block font-serif text-lg text-ink italic">"{person.alias}"</span>
</div>
{/if}
{#if person.birthYear || person.deathYear}
<div>
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>
{#if person.birthYear && person.deathYear}{m.person_label_birth_year()} / {m.person_label_death_year()}{:else if person.birthYear}{m.person_label_birth_year()}{:else}{m.person_label_death_year()}{/if}
</span>
<span class="block font-serif text-lg text-brand-navy">
<span class="block font-serif text-lg text-ink">
{#if person.birthYear}* {person.birthYear}{/if}{#if person.birthYear && person.deathYear}
&nbsp;{/if}{#if person.deathYear}† {person.deathYear}{/if}
</span>
@@ -317,10 +315,10 @@ $effect(() => {
{#if person.notes}
<div class="md:col-span-2">
<span
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
>{m.person_label_notes()}</span
>
<p class="font-serif text-base whitespace-pre-wrap text-brand-navy">
<p class="font-serif text-base whitespace-pre-wrap text-ink">
{person.notes}
</p>
</div>
@@ -335,10 +333,10 @@ $effect(() => {
<!-- Merge Section -->
{#if data.canWrite}
{#key person.id}
<div class="border-brand-sand mb-10 overflow-hidden rounded-sm border bg-white shadow-sm">
<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
<div class="p-6 md:p-8">
<h2 class="mb-1 font-serif text-lg text-brand-navy">{m.person_merge_heading()}</h2>
<p class="mb-5 font-sans text-sm text-gray-500">
<h2 class="mb-1 font-serif text-lg text-ink">{m.person_merge_heading()}</h2>
<p class="mb-5 font-sans text-sm text-ink-2">
{m.person_merge_description()}
</p>
@@ -381,7 +379,7 @@ $effect(() => {
<button
type="button"
onclick={() => (showMergeConfirm = false)}
class="rounded border border-gray-300 px-4 py-2 text-sm font-bold tracking-widest text-gray-500 uppercase transition-colors hover:bg-gray-50"
class="rounded border border-gray-300 px-4 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-gray-50"
>
{m.btn_cancel()}
</button>
@@ -406,17 +404,17 @@ $effect(() => {
<!-- Co-Correspondents Section -->
{#if coCorrespondents.length > 0}
<div class="mb-6">
<h3 class="mb-3 text-xs font-bold tracking-widest text-gray-400 uppercase">
<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.person_co_correspondents_heading()}
</h3>
<div class="flex flex-wrap gap-2">
{#each coCorrespondents as c (c.id)}
<a
href="/conversations?senderId={person.id}&receiverId={c.id}"
class="border-brand-sand inline-flex items-center gap-1.5 rounded-full border px-3 py-1 font-serif text-sm text-brand-navy transition-colors hover:border-brand-navy"
class="inline-flex items-center gap-1.5 rounded-full border border-line px-3 py-1 font-serif text-sm text-ink transition-colors hover:border-primary"
>
{c.name}
<span class="font-sans text-xs text-gray-400">({c.count})</span>
<span class="font-sans text-xs text-ink-3">({c.count})</span>
</a>
{/each}
</div>
@@ -425,18 +423,18 @@ $effect(() => {
<!-- Sent Documents Section -->
<div class="mb-10">
<div class="mb-6 flex items-center gap-3 border-b border-brand-navy/10 pb-2">
<h2 class="font-serif text-xl text-brand-navy">{m.person_docs_heading()}</h2>
<span class="rounded-full bg-brand-navy px-2 py-1 text-xs font-bold text-white">
<div class="mb-6 flex items-center gap-3 border-b border-ink/10 pb-2">
<h2 class="font-serif text-xl text-ink">{m.person_docs_heading()}</h2>
<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-white">
{sentDocuments.length}
</span>
{#if sentYearRange}
<span class="font-sans text-xs text-gray-400">{sentYearRange}</span>
<span class="font-sans text-xs text-ink-3">{sentYearRange}</span>
{/if}
{#if sentDocuments.length > 1}
<button
onclick={() => (sortDirSent = sortDirSent === 'DESC' ? 'ASC' : 'DESC')}
class="ml-auto text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
class="ml-auto text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
>
{sortDirSent === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
</button>
@@ -444,8 +442,8 @@ $effect(() => {
</div>
{#if sentDocuments.length === 0}
<div class="border-brand-sand rounded-sm border border-dashed bg-white p-12 text-center">
<p class="font-sans text-gray-500">{m.person_no_docs()}</p>
<div class="rounded-sm border border-dashed border-line bg-surface p-12 text-center">
<p class="font-sans text-ink-2">{m.person_no_docs()}</p>
</div>
{:else}
<ul class="space-y-3">
@@ -453,12 +451,12 @@ $effect(() => {
<li class="group">
<a
href="/documents/{doc.id}"
class="border-brand-sand block border bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="block border border-line bg-surface p-4 transition-all duration-200 hover:border-primary hover:shadow-md"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div
class="bg-brand-sand/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-muted text-ink transition-colors group-hover:bg-accent group-hover:text-ink"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -469,16 +467,16 @@ $effect(() => {
</div>
<div class="min-w-0">
<div
class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
>
{doc.title || doc.originalFilename}
</div>
<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-gray-500">
<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-ink-2">
<span
>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span
>
{#if doc.location}
<span class="text-brand-mint">•</span>
<span class="text-accent">•</span>
<span>{doc.location}</span>
{/if}
</div>
@@ -488,7 +486,7 @@ $effect(() => {
<span
class="hidden items-center rounded-full border px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase sm:inline-flex
{doc.status === 'UPLOADED'
? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
? 'border-accent/50 bg-accent/20 text-ink'
: 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
>
{doc.status}
@@ -508,7 +506,7 @@ $effect(() => {
{#if sentDocuments.length > DOCS_PREVIEW_LIMIT && !showAllSent}
<button
onclick={() => (showAllSent = true)}
class="mt-3 text-xs font-bold tracking-widest text-brand-navy/50 uppercase transition-colors hover:text-brand-navy"
class="mt-3 text-xs font-bold tracking-widest text-ink/50 uppercase transition-colors hover:text-ink"
>
{m.person_show_more({ count: sentDocuments.length - DOCS_PREVIEW_LIMIT })}
</button>
@@ -518,18 +516,18 @@ $effect(() => {
<!-- Received Documents Section -->
<div>
<div class="mb-6 flex items-center gap-3 border-b border-brand-navy/10 pb-2">
<h2 class="font-serif text-xl text-brand-navy">{m.person_received_docs_heading()}</h2>
<span class="rounded-full bg-brand-navy px-2 py-1 text-xs font-bold text-white">
<div class="mb-6 flex items-center gap-3 border-b border-ink/10 pb-2">
<h2 class="font-serif text-xl text-ink">{m.person_received_docs_heading()}</h2>
<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-white">
{receivedDocuments.length}
</span>
{#if receivedYearRange}
<span class="font-sans text-xs text-gray-400">{receivedYearRange}</span>
<span class="font-sans text-xs text-ink-3">{receivedYearRange}</span>
{/if}
{#if receivedDocuments.length > 1}
<button
onclick={() => (sortDirReceived = sortDirReceived === 'DESC' ? 'ASC' : 'DESC')}
class="ml-auto text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
class="ml-auto text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
>
{sortDirReceived === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
</button>
@@ -537,8 +535,8 @@ $effect(() => {
</div>
{#if receivedDocuments.length === 0}
<div class="border-brand-sand rounded-sm border border-dashed bg-white p-12 text-center">
<p class="font-sans text-gray-500">{m.person_no_received_docs()}</p>
<div class="rounded-sm border border-dashed border-line bg-surface p-12 text-center">
<p class="font-sans text-ink-2">{m.person_no_received_docs()}</p>
</div>
{:else}
<ul class="space-y-3">
@@ -546,12 +544,12 @@ $effect(() => {
<li class="group">
<a
href="/documents/{doc.id}"
class="border-brand-sand block border bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
class="block border border-line bg-surface p-4 transition-all duration-200 hover:border-primary hover:shadow-md"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 overflow-hidden">
<div
class="bg-brand-sand/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-muted text-ink transition-colors group-hover:bg-accent group-hover:text-ink"
>
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -562,16 +560,16 @@ $effect(() => {
</div>
<div class="min-w-0">
<div
class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
>
{doc.title || doc.originalFilename}
</div>
<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-gray-500">
<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-ink-2">
<span
>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span
>
{#if doc.location}
<span class="text-brand-mint">•</span>
<span class="text-accent">•</span>
<span>{doc.location}</span>
{/if}
</div>
@@ -581,7 +579,7 @@ $effect(() => {
<span
class="hidden items-center rounded-full border px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase sm:inline-flex
{doc.status === 'UPLOADED'
? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
? 'border-accent/50 bg-accent/20 text-ink'
: 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
>
{doc.status}
@@ -601,7 +599,7 @@ $effect(() => {
{#if receivedDocuments.length > DOCS_PREVIEW_LIMIT && !showAllReceived}
<button
onclick={() => (showAllReceived = true)}
class="mt-3 text-xs font-bold tracking-widest text-brand-navy/50 uppercase transition-colors hover:text-brand-navy"
class="mt-3 text-xs font-bold tracking-widest text-ink/50 uppercase transition-colors hover:text-ink"
>
{m.person_show_more({ count: receivedDocuments.length - DOCS_PREVIEW_LIMIT })}
</button>

23
frontend/src/routes/persons/new/+page.svelte
View File

@@ -8,7 +8,7 @@ let { form } = $props();
<div class="mb-6">
<a
href="/persons"
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
>
<svg
class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -25,7 +25,7 @@ let { form } = $props();
</svg>
{m.btn_back_to_overview()}
</a>
<h1 class="font-serif text-3xl text-brand-navy">{m.persons_new_heading()}</h1>
<h1 class="font-serif text-3xl text-ink">{m.persons_new_heading()}</h1>
</div>
{#if form?.error}
@@ -33,8 +33,8 @@ let { form } = $props();
{/if}
<form method="POST">
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.persons_section_details()}
</h2>
@@ -48,7 +48,7 @@ let { form } = $props();
name="firstName"
type="text"
required
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
@@ -61,7 +61,7 @@ let { form } = $props();
name="lastName"
type="text"
required
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
@@ -74,7 +74,7 @@ let { form } = $props();
name="alias"
type="text"
placeholder={m.form_placeholder_alias()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
</div>
@@ -82,17 +82,14 @@ let { form } = $props();
<!-- Save Bar -->
<div
class="border-brand-sand mt-4 flex items-center justify-between rounded-sm border bg-white px-6 py-4 shadow-sm"
class="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
>
<a
href="/persons"
class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
>
<a href="/persons" class="text-sm font-medium text-ink-2 transition-colors hover:text-ink">
{m.btn_cancel()}
</a>
<button
type="submit"
class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
>
{m.btn_create()}
</button>