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

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> ──── */