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

refactor(ui): use CSS custom properties for PersonTypeBadge colors

Browse Source 
Replace hardcoded Tailwind utility colors with project CSS variables
(--c-badge-institution-*, --c-badge-group-*, --c-badge-unknown-*).
Dark mode variants defined in both @media and manual toggle blocks.
Extract shared badge classes and use $derived config object.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-08 18:35:05 +02:00
parent 5106d277f1
commit a1b21d6989
2 changed files with 95 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/lib/components/PersonTypeBadge.svelte
View File

@@ -6,12 +6,29 @@ interface Props {
}
let { personType }: Props = $props();
const config = $derived.by(() => {
switch (personType) {
case 'INSTITUTION':
return { label: m.person_type_INSTITUTION(), icon: 'building' as const };
case 'GROUP':
return { label: m.person_type_GROUP(), icon: 'people' as const };
case 'UNKNOWN':
return { label: m.person_type_UNKNOWN(), icon: 'question' as const };
default:
return null;
}
});
</script>
{#if personType === 'INSTITUTION'}
{#if config}
<span
class="inline-flex items-center gap-1 rounded-full border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700"
class="badge inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium"
class:badge-institution={personType === 'INSTITUTION'}
class:badge-group={personType === 'GROUP'}
class:badge-unknown={personType === 'UNKNOWN'}
>
{#if config.icon === 'building'}
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path
stroke-linecap="round"
@@ -19,12 +36,7 @@ let { personType }: Props = $props();
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-2 0v-2M5 21H3m2 0v-2m4-12h2m-2 4h2m4-4h2m-2 4h2"
/>
</svg>
{m.person_type_INSTITUTION()}
</span>
{:else if personType === 'GROUP'}
<span
class="inline-flex items-center gap-1 rounded-full border border-purple-200 bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700"
>
{:else if config.icon === 'people'}
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path
stroke-linecap="round"
@@ -32,12 +44,7 @@ let { personType }: Props = $props();
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
{m.person_type_GROUP()}
</span>
{:else if personType === 'UNKNOWN'}
<span
class="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700"
>
{:else}
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path
stroke-linecap="round"
@@ -45,6 +52,25 @@ let { personType }: Props = $props();
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01"
/>
</svg>
{m.person_type_UNKNOWN()}
{/if}
{config.label}
</span>
{/if}
<style>
.badge-institution {
background-color: var(--c-badge-institution-bg);
color: var(--c-badge-institution-text);
border-color: var(--c-badge-institution-border);
}
.badge-group {
background-color: var(--c-badge-group-bg);
color: var(--c-badge-group-text);
border-color: var(--c-badge-group-border);
}
.badge-unknown {
background-color: var(--c-badge-unknown-bg);
color: var(--c-badge-unknown-text);
border-color: var(--c-badge-unknown-border);
}
</style>

33
frontend/src/routes/layout.css
View File

@@ -106,6 +106,19 @@
--c-pdf-bg: #ebebeb;
--c-pdf-ctrl: #d8d8d8;
--c-pdf-text: #333333;
/* PersonType badge — institution (navy-tinted blue) */
--c-badge-institution-bg: #e8eff7;
--c-badge-institution-text: #1a4971;
--c-badge-institution-border: #c4d5e8;
/* PersonType badge — group (muted purple) */
--c-badge-group-bg: #f0e8f5;
--c-badge-group-text: #5a2d6f;
--c-badge-group-border: #d8c5e3;
/* PersonType badge — unknown (amber warning) */
--c-badge-unknown-bg: #fdf4e3;
--c-badge-unknown-text: #7a5a0a;
--c-badge-unknown-border: #f0ddb3;
}
/* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
@@ -148,6 +161,16 @@
--c-pdf-bg: #010e1e;
--c-pdf-ctrl: #011526;
--c-pdf-text: #f0efe9;
--c-badge-institution-bg: rgba(30, 80, 140, 0.25);
--c-badge-institution-text: #8bb8e0;
--c-badge-institution-border: rgba(30, 80, 140, 0.4);
--c-badge-group-bg: rgba(90, 45, 111, 0.25);
--c-badge-group-text: #c9a0dc;
--c-badge-group-border: rgba(90, 45, 111, 0.4);
--c-badge-unknown-bg: rgba(122, 90, 10, 0.25);
--c-badge-unknown-text: #e0c060;
--c-badge-unknown-border: rgba(122, 90, 10, 0.4);
}
}
@@ -186,6 +209,16 @@
--c-pdf-bg: #010e1e;
--c-pdf-ctrl: #011526;
--c-pdf-text: #f0efe9;
--c-badge-institution-bg: rgba(30, 80, 140, 0.25);
--c-badge-institution-text: #8bb8e0;
--c-badge-institution-border: rgba(30, 80, 140, 0.4);
--c-badge-group-bg: rgba(90, 45, 111, 0.25);
--c-badge-group-text: #c9a0dc;
--c-badge-group-border: rgba(90, 45, 111, 0.4);
--c-badge-unknown-bg: rgba(122, 90, 10, 0.25);
--c-badge-unknown-text: #e0c060;
--c-badge-unknown-border: rgba(122, 90, 10, 0.4);
}
/* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */