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 <noreply@anthropic.com>
2026-04-08 18:35:05 +02:00
parent 5106d277f1
commit a1b21d6989
2 changed files with 95 additions and 36 deletions
--- 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;
+	}
+});
 </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'}
 	>
-		<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				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"
-	>
-		<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				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"
-	>
-		<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				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.icon === 'building'}
+			<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					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>
+		{: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"
+					stroke-linejoin="round"
+					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>
+		{:else}
+			<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					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>
+		{/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>
--- 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 <img> ──── */