From a1b21d698999906088c67d42ee911a2db99c2de5 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 8 Apr 2026 18:35:05 +0200 Subject: [PATCH] refactor(ui): use CSS custom properties for PersonTypeBadge colors 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 --- .../src/lib/components/PersonTypeBadge.svelte | 98 ++++++++++++------- frontend/src/routes/layout.css | 33 +++++++ 2 files changed, 95 insertions(+), 36 deletions(-) diff --git a/frontend/src/lib/components/PersonTypeBadge.svelte b/frontend/src/lib/components/PersonTypeBadge.svelte index 2bfd1a39..1c48b199 100644 --- a/frontend/src/lib/components/PersonTypeBadge.svelte +++ b/frontend/src/lib/components/PersonTypeBadge.svelte @@ -6,45 +6,71 @@ 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; + } +}); -{#if personType === 'INSTITUTION'} +{#if config} - - - - {m.person_type_INSTITUTION()} - -{:else if personType === 'GROUP'} - - - - - {m.person_type_GROUP()} - -{:else if personType === 'UNKNOWN'} - - - - - {m.person_type_UNKNOWN()} + {#if config.icon === 'building'} + + + + {:else if config.icon === 'people'} + + + + {:else} + + + + {/if} + {config.label} {/if} + + diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css index 197aef4e..c7c1bb46 100644 --- a/frontend/src/routes/layout.css +++ b/frontend/src/routes/layout.css @@ -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 ──── */