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

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>