refactor(components): replace all hardcoded colors with semantic tokens
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:
@@ -32,9 +32,9 @@ let {
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="absolute inset-0 bg-[#2A2A2A]">
|
||||
<div class="absolute inset-0 bg-pdf-bg">
|
||||
{#if isLoading}
|
||||
<div class="flex h-full flex-col items-center justify-center text-brand-mint">
|
||||
<div class="flex h-full flex-col items-center justify-center text-accent">
|
||||
<svg
|
||||
class="mb-4 h-8 w-8 animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -52,7 +52,7 @@ let {
|
||||
<span class="font-sans text-sm tracking-wide">{m.doc_loading()}</span>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="flex h-full flex-col items-center justify-center px-4 text-center text-gray-400">
|
||||
<div class="flex h-full flex-col items-center justify-center px-4 text-center text-ink-3">
|
||||
<p class="mb-2 font-serif">{error}</p>
|
||||
{#if doc.filePath}
|
||||
<a
|
||||
@@ -65,8 +65,8 @@ let {
|
||||
{/if}
|
||||
</div>
|
||||
{:else if !doc.filePath}
|
||||
<div class="flex h-full flex-col items-center justify-center text-gray-400">
|
||||
<div class="mb-6 rounded-full bg-white/5 p-8">
|
||||
<div class="flex h-full flex-col items-center justify-center text-ink-3">
|
||||
<div class="mb-6 rounded-full bg-surface/5 p-8">
|
||||
<img
|
||||
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
|
||||
alt=""
|
||||
|
||||
Reference in New Issue
Block a user