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

refactor(components): replace all hardcoded colors with semantic tokens

Browse Source 
Replaces bg-white, text-brand-navy, border-brand-sand, text-gray-*, bg-[#2A2A2A],
bg-brand-purple/15, hover:bg-brand-sand, etc. across all 35 .svelte files with
semantic token utilities (bg-surface, text-ink, border-line, bg-pdf-bg, bg-nav-active,
bg-muted, text-accent, bg-primary, ...).

Also adds CSS filter: invert(1) in layout.css for De Gruyter <img> icons in dark mode,
excluding icons that carry .invert already (to prevent double-inversion).

Closes #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 12:22:50 +01:00
parent caba89dacc
commit e4539ed0f0
32 changed files with 569 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/lib/components/AnnotationCommentPanel.svelte
View File

@@ -25,16 +25,16 @@ let {
<!-- Desktop / tablet panel (≥ sm): absolute overlay on the right side -->
<div
class="border-brand-sand absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l bg-white shadow-2xl sm:flex"
class="absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l border-line bg-surface shadow-2xl sm:flex"
>
<div class="border-brand-sand flex shrink-0 items-center justify-between border-b px-4 py-3">
<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
{m.comment_panel_title()}
</h3>
<button
onclick={onClose}
aria-label={m.comment_panel_close()}
class="hover:bg-brand-sand/50 rounded p-1 text-gray-400 transition-colors hover:text-brand-navy"
class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -60,15 +60,15 @@ let {
<div class="flex-1 bg-black/40" onclick={onClose} role="presentation"></div>
<!-- Slide-up panel -->
<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-white shadow-2xl">
<div class="border-brand-sand flex shrink-0 items-center justify-between border-b px-4 py-3">
<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-surface shadow-2xl">
<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
{m.comment_panel_title()}
</h3>
<button
onclick={onClose}
aria-label={m.comment_panel_close()}
class="hover:bg-brand-sand/50 rounded p-1 text-gray-400 transition-colors hover:text-brand-navy"
class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />