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

fix(components): replace remaining unthemed gray classes with semantic tokens

Browse Source 
Replace text-gray-*, bg-gray-*, border-gray-*, divide-gray-*, placeholder-gray-*,
focus:border-blue-*, focus:ring-blue-*, hover:bg-blue-*, and ring-brand-mint with
their semantic-token equivalents (text-ink, bg-muted, border-line, etc.) across
all pages and shared components so dark mode renders correctly everywhere.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 12:37:46 +01:00
parent e4539ed0f0
commit 162c58e8c5
19 changed files with 98 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/CommentThread.svelte
View File

@@ -230,7 +230,7 @@ onMount(() => {
</span>
{/if}
</div>
<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{thread.content}</p>
<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{thread.content}</p>
</div>
{#if canModify(thread)}
<div class="flex shrink-0 items-center gap-2">
@@ -302,7 +302,7 @@ onMount(() => {
</span>
{/if}
</div>
<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{reply.content}</p>
<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{reply.content}</p>
</div>
{#if canModify(reply)}
<div class="flex shrink-0 items-center gap-2">

2
frontend/src/lib/components/DocumentBottomPanel.svelte
View File

@@ -137,7 +137,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
onpointerup={onDragEnd}
onpointercancel={onDragEnd}
>
<div class="h-1 w-12 rounded-full bg-gray-200"></div>
<div class="h-1 w-12 rounded-full bg-line"></div>
</div>
<!-- Tab bar -->

2
frontend/src/lib/components/PanelMetadata.svelte
View File

@@ -165,7 +165,7 @@ let { doc }: { doc: Doc } = $props();
>
<a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3">
<div
class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 font-serif text-xs text-ink-2"
class="flex h-6 w-6 items-center justify-center rounded-full bg-muted font-serif text-xs text-ink-2"
>
{receiver.firstName[0]}{receiver.lastName[0]}
</div>

4
frontend/src/lib/components/PersonMultiSelect.svelte
View File

@@ -80,7 +80,7 @@ function clickOutside(node: HTMLElement) {
<div class="relative" use:clickOutside>
<div
class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
>
{#each selectedPersons as person (person.id)}
<span
@@ -128,7 +128,7 @@ function clickOutside(node: HTMLElement) {
{:else}
{#each results as person (person.id)}
<div
class="cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-muted"
class="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
onclick={() => selectPerson(person)}
onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
role="button"

6
frontend/src/lib/components/PersonTypeahead.svelte
View File

@@ -111,7 +111,7 @@ function clickOutside(node: HTMLElement) {
</script>
<div class="relative" use:clickOutside>
<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
<label for={name} class="block text-sm font-medium text-ink-2">{label}</label>
<input type="hidden" name={name} bind:value={value} />
@@ -123,7 +123,7 @@ function clickOutside(node: HTMLElement) {
oninput={handleInput}
onfocus={handleFocus}
placeholder={m.comp_typeahead_placeholder()}
class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-blue-500 focus:ring-blue-500"
class="mt-1 block w-full rounded-md border border-line p-2 shadow-sm focus:border-accent focus:ring-accent"
/>
{#if showDropdown && (results.length > 0 || loading)}
@@ -135,7 +135,7 @@ function clickOutside(node: HTMLElement) {
{:else}
{#each results as person (person.id)}
<div
class="relative cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-blue-100"
class="relative cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-accent-bg"
onclick={() => selectPerson(person)}
onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
role="button"

4
frontend/src/lib/components/TagInput.svelte
View File

@@ -85,7 +85,7 @@ function clickOutside(node: HTMLElement) {
<div class="w-full" use:clickOutside>
<!-- Tag Container -->
<div
class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
>
<!-- Render Selected Tags -->
{#each tags as tag, i (i)}
@@ -137,7 +137,7 @@ function clickOutside(node: HTMLElement) {
tabindex="0"
class="cursor-pointer px-3 py-2 text-sm hover:bg-muted {i === activeIndex
? 'bg-muted font-bold text-ink'
: 'text-gray-700'}"
: 'text-ink-2'}"
onclick={() => addTag(suggestion)}
onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)}
>

18
frontend/src/routes/+page.svelte
View File

@@ -90,7 +90,7 @@ $effect(() => {
onfocus={() => (qFocused = true)}
onblur={() => (qFocused = false)}
placeholder={m.docs_search_placeholder()}
class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-ink focus:ring-ink"
class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
/>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<img
@@ -105,7 +105,7 @@ $effect(() => {
<!-- Toggle Advanced Button -->
<button
onclick={() => (showAdvanced = !showAdvanced)}
class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-gray-100 hover:text-ink"
class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
>
<img
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
@@ -148,7 +148,7 @@ $effect(() => {
<!-- Sender -->
<div class="md:col-span-3">
<div
class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="senderId"
@@ -163,7 +163,7 @@ $effect(() => {
<!-- Receiver -->
<div class="md:col-span-3">
<div
class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="receiverId"
@@ -188,7 +188,7 @@ $effect(() => {
id="from"
bind:value={from}
onchange={triggerSearch}
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
class="block w-full border-line py-2.5 text-sm shadow-sm"
/>
</div>
<div>
@@ -202,7 +202,7 @@ $effect(() => {
id="to"
bind:value={to}
onchange={triggerSearch}
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
class="block w-full border-line py-2.5 text-sm shadow-sm"
/>
</div>
</div>
@@ -284,9 +284,7 @@ $effect(() => {
>{m.docs_list_from()}</span
>
{#if doc.sender}
<span class="text-gray-900"
>{doc.sender.firstName} {doc.sender.lastName}</span
>
<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
{:else}
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
{/if}
@@ -297,7 +295,7 @@ $effect(() => {
>{m.docs_list_to()}</span
>
{#if doc.receivers && doc.receivers.length > 0}
<span class="text-gray-900">
<span class="text-ink">
{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
</span>
{:else}

44
frontend/src/routes/admin/+page.svelte
View File

@@ -109,7 +109,7 @@ async function backfillFileHashes() {
{#if activeTab === 'users'}
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
<div class="flex items-center justify-between border-b border-line-2 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_users()}</h2>
<h2 class="text-lg font-bold text-ink-2">{m.admin_section_users()}</h2>
<a
href="/admin/users/new"
class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
@@ -126,8 +126,8 @@ async function backfillFileHashes() {
</a>
</div>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<table class="min-w-full divide-y divide-line">
<thead class="bg-muted">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
>{m.admin_col_login()}</th
@@ -143,10 +143,10 @@ async function backfillFileHashes() {
>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-surface">
<tbody class="divide-y divide-line bg-surface">
{#each data.users as user (user.id)}
<tr class="group/row hover:bg-gray-50">
<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900">
<tr class="group/row hover:bg-muted">
<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
{user.username}
</td>
<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
@@ -218,15 +218,15 @@ async function backfillFileHashes() {
{:else if activeTab === 'tags'}
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
<div class="border-b border-line-2 bg-yellow-50/50 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_tags()}</h2>
<h2 class="text-lg font-bold text-ink-2">{m.admin_section_tags()}</h2>
<p class="mt-1 text-xs text-yellow-800">
{m.admin_tags_warning()}
</p>
</div>
<ul class="max-h-[600px] divide-y divide-gray-100 overflow-y-auto">
<ul class="max-h-[600px] divide-y divide-line-2 overflow-y-auto">
{#each data.tags as tag (tag.id)}
<li class="group flex items-center justify-between px-6 py-3 hover:bg-gray-50">
<li class="group flex items-center justify-between px-6 py-3 hover:bg-muted">
{#if editingTagId === tag.id}
<form
method="POST"
@@ -243,7 +243,7 @@ async function backfillFileHashes() {
type="text"
name="name"
bind:value={editingTagName}
class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-brand-mint"
class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-accent"
/>
<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@@ -330,11 +330,11 @@ async function backfillFileHashes() {
{:else if activeTab === 'groups'}
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
<div class="flex items-center justify-between border-b border-line-2 p-6">
<h2 class="text-lg font-bold text-gray-700">{m.admin_section_groups()}</h2>
<h2 class="text-lg font-bold text-ink-2">{m.admin_section_groups()}</h2>
</div>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<table class="min-w-full divide-y divide-line">
<thead class="bg-muted">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
>{m.admin_col_name()}</th
@@ -347,9 +347,9 @@ async function backfillFileHashes() {
>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-surface">
<tbody class="divide-y divide-line bg-surface">
{#each data.groups as group (group.id)}
<tr class="group/row hover:bg-gray-50">
<tr class="group/row hover:bg-muted">
{#if editingGroupId === group.id}
<!-- EDIT MODE -->
<td colspan="3" class="px-6 py-4">
@@ -385,7 +385,7 @@ async function backfillFileHashes() {
name="permissions"
value={perm}
checked={group.permissions.includes(perm)}
class="mr-2 rounded border-gray-300 text-ink focus:ring-accent"
class="mr-2 rounded border-line text-ink focus:ring-accent"
/>
{perm.replace('_', ' ')}
</label>
@@ -437,7 +437,7 @@ async function backfillFileHashes() {
class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
{perm === 'ADMIN'
? 'border-red-100 bg-red-50 text-red-700'
: 'border-line bg-gray-100 text-ink-2'}"
: 'border-line bg-muted text-ink-2'}"
>
{perm}
</span>
@@ -489,7 +489,7 @@ async function backfillFileHashes() {
</table>
<!-- CREATE GROUP FORM -->
<div class="border-t border-line bg-gray-50 p-6">
<div class="border-t border-line bg-muted p-6">
<h3 class="mb-4 text-xs font-bold tracking-wide text-ink-2 uppercase">
{m.admin_section_new_group()}
</h3>
@@ -505,7 +505,7 @@ async function backfillFileHashes() {
name="name"
placeholder={m.admin_group_name_placeholder()}
required
class="w-full rounded border-gray-300 text-sm"
class="w-full rounded border-line text-sm"
/>
</div>
@@ -516,7 +516,7 @@ async function backfillFileHashes() {
type="checkbox"
name="permissions"
value={perm}
class="mr-2 rounded border-gray-300 text-ink focus:ring-accent"
class="mr-2 rounded border-line text-ink focus:ring-accent"
/>
{perm.replace('_', ' ')}
</label>
@@ -534,7 +534,7 @@ async function backfillFileHashes() {
</div>
{:else if activeTab === 'system'}
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
<h2 class="mb-1 text-lg font-bold text-gray-700">{m.admin_system_backfill_heading()}</h2>
<h2 class="mb-1 text-lg font-bold text-ink-2">{m.admin_system_backfill_heading()}</h2>
<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
<button
onclick={backfillVersions}
@@ -551,7 +551,7 @@ async function backfillFileHashes() {
</div>
<div class="mt-4 rounded-sm border border-line bg-surface p-6 shadow-sm">
<h2 class="mb-1 text-lg font-bold text-gray-700">
<h2 class="mb-1 text-lg font-bold text-ink-2">
{m.admin_system_backfill_hashes_heading()}
</h2>
<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>

4
frontend/src/routes/admin/users/[id]/+page.svelte
View File

@@ -157,13 +157,13 @@ function handleBirthDateInput(e: Event) {
<div class="flex flex-wrap gap-3">
{#each data.groups as group (group.id)}
<label class="inline-flex items-center gap-2 text-sm text-gray-700">
<label class="inline-flex items-center gap-2 text-sm text-ink-2">
<input
type="checkbox"
name="groupIds"
value={group.id}
checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
class="rounded border-gray-300 text-ink focus:ring-accent"
class="rounded border-line text-ink focus:ring-accent"
/>
{group.name}
</label>

4
frontend/src/routes/admin/users/new/+page.svelte
View File

@@ -156,12 +156,12 @@ function handleBirthDateInput(e: Event) {
<div class="flex flex-wrap gap-3">
{#each data.groups as group (group.id)}
<label class="inline-flex items-center gap-2 text-sm text-gray-700">
<label class="inline-flex items-center gap-2 text-sm text-ink-2">
<input
type="checkbox"
name="groupIds"
value={group.id}
class="rounded border-gray-300 text-ink focus:ring-accent"
class="rounded border-line text-ink focus:ring-accent"
/>
{group.name}
</label>

8
frontend/src/routes/conversations/+page.svelte
View File

@@ -79,7 +79,7 @@ const enrichedDocuments = $derived(
<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
<!-- Sender -->
<div
class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="senderId"
@@ -123,7 +123,7 @@ const enrichedDocuments = $derived(
<!-- Receiver -->
<div
class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="receiverId"
@@ -149,7 +149,7 @@ const enrichedDocuments = $derived(
type="date"
bind:value={fromDate}
onchange={() => applyFilters()}
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
@@ -165,7 +165,7 @@ const enrichedDocuments = $derived(
type="date"
bind:value={toDate}
onchange={() => applyFilters()}
class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>

28
frontend/src/routes/documents/[id]/edit/+page.svelte
View File

@@ -73,7 +73,7 @@ function handleDateInput(e: Event) {
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Datum -->
<div>
<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_date()}</label
>
<input
@@ -84,7 +84,7 @@ function handleDateInput(e: Event) {
oninput={handleDateInput}
placeholder={m.form_placeholder_date()}
maxlength="10"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
class="block w-full rounded border border-line p-2 text-sm shadow-sm
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
aria-describedby={dateInvalid ? 'date-error' : undefined}
/>
@@ -96,7 +96,7 @@ function handleDateInput(e: Event) {
<!-- Ort -->
<div>
<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_location()}</label
>
<input
@@ -105,7 +105,7 @@ function handleDateInput(e: Event) {
name="location"
value={doc.location || ''}
placeholder={m.form_placeholder_location()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
@@ -121,7 +121,7 @@ function handleDateInput(e: Event) {
<!-- Empfänger -->
<div>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
</div>
</div>
@@ -136,7 +136,7 @@ function handleDateInput(e: Event) {
<div class="space-y-5">
<!-- Titel -->
<div>
<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_title()} *</label
>
<input
@@ -145,13 +145,13 @@ function handleDateInput(e: Event) {
name="title"
value={doc.title || ''}
required
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
<!-- Aufbewahrungsort -->
<div>
<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_archive_location()}</label
>
<input
@@ -160,21 +160,21 @@ function handleDateInput(e: Event) {
name="documentLocation"
value={doc.documentLocation || ''}
placeholder={m.form_placeholder_archive_location()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
</div>
<!-- Schlagworte -->
<div>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
<TagInput bind:tags={tags} />
<input type="hidden" name="tags" value={tags.join(',')} />
</div>
<!-- Inhalt -->
<div>
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_content()}</label
>
<textarea
@@ -182,7 +182,7 @@ function handleDateInput(e: Event) {
name="summary"
rows="5"
placeholder={m.form_placeholder_content()}
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
>{doc.summary || ''}</textarea
>
</div>
@@ -199,7 +199,7 @@ function handleDateInput(e: Event) {
name="transcription"
rows="12"
placeholder={m.form_placeholder_transcription()}
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
>{doc.transcription || ''}</textarea
>
</div>
@@ -223,7 +223,7 @@ function handleDateInput(e: Event) {
>
</div>
<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
{m.doc_file_replace_label()}
<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
</label>

28
frontend/src/routes/documents/new/+page.svelte
View File

@@ -84,7 +84,7 @@ function handleDateInput(e: Event) {
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Datum -->
<div>
<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_date()}</label
>
<input
@@ -95,7 +95,7 @@ function handleDateInput(e: Event) {
oninput={handleDateInput}
placeholder={m.form_placeholder_date()}
maxlength="10"
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
class="block w-full rounded border border-line p-2 text-sm shadow-sm
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
aria-describedby={dateInvalid ? 'date-error' : undefined}
/>
@@ -109,7 +109,7 @@ function handleDateInput(e: Event) {
<!-- Ort -->
<div>
<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_location()}</label
>
<input
@@ -117,7 +117,7 @@ function handleDateInput(e: Event) {
type="text"
name="location"
placeholder={m.form_placeholder_location()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
@@ -133,7 +133,7 @@ function handleDateInput(e: Event) {
<!-- Empfänger -->
<div>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
</div>
</div>
@@ -148,7 +148,7 @@ function handleDateInput(e: Event) {
<div class="space-y-5">
<!-- Titel -->
<div>
<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_title()} *</label
>
<input
@@ -156,13 +156,13 @@ function handleDateInput(e: Event) {
type="text"
name="title"
required
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
<!-- Aufbewahrungsort -->
<div>
<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_archive_location()}</label
>
<input
@@ -170,21 +170,21 @@ function handleDateInput(e: Event) {
type="text"
name="documentLocation"
placeholder={m.form_placeholder_archive_location()}
class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
</div>
<!-- Schlagworte -->
<div>
<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
<TagInput bind:tags={tags} />
<input type="hidden" name="tags" value={tags.join(',')} />
</div>
<!-- Inhalt -->
<div>
<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_content()}</label
>
<textarea
@@ -192,7 +192,7 @@ function handleDateInput(e: Event) {
name="summary"
rows="5"
placeholder={m.form_placeholder_content()}
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
></textarea>
</div>
</div>
@@ -208,7 +208,7 @@ function handleDateInput(e: Event) {
name="transcription"
rows="12"
placeholder={m.form_placeholder_transcription()}
class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
></textarea>
</div>
@@ -218,7 +218,7 @@ function handleDateInput(e: Event) {
{m.doc_section_file()}
</h2>
<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
{m.doc_file_upload_label()}
<span class="font-normal text-ink-3">({m.doc_file_upload_note()})</span>
</label>

2
frontend/src/routes/forgot-password/+page.svelte
View File

@@ -47,7 +47,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
id="email"
required
autocomplete="email"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/>
</div>

4
frontend/src/routes/login/+page.svelte
View File

@@ -59,7 +59,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
id="username"
required
autocomplete="username"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/>
</div>
@@ -75,7 +75,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
id="password"
required
autocomplete="current-password"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/>
</div>

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

@@ -61,7 +61,7 @@ function handleSearch() {
oninput={handleSearch}
onfocus={() => (qFocused = true)}
onblur={() => (qFocused = false)}
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"
class="block w-full rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 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-ink-3"

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

@@ -142,7 +142,7 @@ $effect(() => {
type="text"
required
value={person.firstName}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div>
@@ -157,7 +157,7 @@ $effect(() => {
type="text"
required
value={person.lastName}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div class="md:col-span-2">
@@ -171,7 +171,7 @@ $effect(() => {
name="alias"
type="text"
value={person.alias ?? ''}
class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div>
@@ -188,7 +188,7 @@ $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-ink focus:border-ink focus:outline-none"
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div>
@@ -205,7 +205,7 @@ $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-ink focus:border-ink focus:outline-none"
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
/>
</div>
<div class="md:col-span-2">
@@ -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-ink focus:border-ink focus:outline-none"
class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
>{person.notes ?? ''}</textarea
>
</div>
@@ -235,7 +235,7 @@ $effect(() => {
<button
type="button"
onclick={() => (editMode = false)}
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"
class="rounded border border-line px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
>
{m.btn_cancel()}
</button>
@@ -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-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
class="inline-flex items-center gap-1.5 rounded border border-line 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"
@@ -379,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-ink-2 uppercase transition-colors hover:bg-gray-50"
class="rounded border border-line px-4 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
>
{m.btn_cancel()}
</button>

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

@@ -40,7 +40,7 @@ let { form } = $props();
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<div>
<label for="firstName" class="mb-1 block text-sm font-medium text-gray-700"
<label for="firstName" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_first_name()} *</label
>
<input
@@ -48,12 +48,12 @@ 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-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
<div>
<label for="lastName" class="mb-1 block text-sm font-medium text-gray-700"
<label for="lastName" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_last_name()} *</label
>
<input
@@ -61,12 +61,12 @@ 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-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
<div class="md:col-span-2">
<label for="alias" class="mb-1 block text-sm font-medium text-gray-700"
<label for="alias" class="mb-1 block text-sm font-medium text-ink-2"
>{m.form_label_alias()}</label
>
<input
@@ -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-ink focus:ring-ink"
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
/>
</div>
</div>

4
frontend/src/routes/reset-password/+page.svelte
View File

@@ -56,7 +56,7 @@ let {
id="newPassword"
required
autocomplete="new-password"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/>
</div>
@@ -72,7 +72,7 @@ let {
id="confirmPassword"
required
autocomplete="new-password"
class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
/>
</div>