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

fix(#147): replace text-ink/60 with text-ink-2 and add accent token guard
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (pull_request) Successful in 3m15s
Details
CI / Backend Unit Tests (pull_request) Successful in 2m31s
Details
CI / E2E Tests (pull_request) Failing after 14m47s
Details

Browse Source 
text-ink/60 produces an opacity-blended colour whose contrast is
background-dependent: it passes on white (4.8:1) but fails on the sandy
canvas #f0efe9 (3.97:1, below WCAG AA 4.5:1). Replace every occurrence
with text-ink-2 (#4b5563, 6.6:1 on canvas — WCAG AA ✓).

Also adds a warning comment above --c-accent in layout.css to prevent
the text-accent misuse from recurring.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-28 18:24:45 +01:00
parent b5580b0b24
commit e28cd03953
5 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/routes/DocumentList.svelte
View File

@@ -28,7 +28,7 @@ let {
{#if canWrite} {#if canWrite}
<a <a
href="/documents/new" href="/documents/new"
class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink" class="inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
> >
<img <img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg" src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"

2
frontend/src/routes/conversations/+page.svelte
View File

@@ -50,7 +50,7 @@ function swapPersons() {
<!-- Page Header --> <!-- Page Header -->
<div class="mb-8 border-b border-ink/10 pb-4"> <div class="mb-8 border-b border-ink/10 pb-4">
<h1 class="font-serif text-3xl font-medium text-ink">{m.conv_heading()}</h1> <h1 class="font-serif text-3xl font-medium text-ink">{m.conv_heading()}</h1>
<p class="mt-2 font-sans text-sm text-ink/60"> <p class="mt-2 font-sans text-sm text-ink-2">
{m.conv_subtitle()} {m.conv_subtitle()}
</p> </p>
</div> </div>

2
frontend/src/routes/conversations/ConversationTimeline.svelte
View File

@@ -57,7 +57,7 @@ const enrichedDocuments = $derived(
<a <a
data-testid="conv-new-doc-link" data-testid="conv-new-doc-link"
href="/documents/new?senderId={senderId}&receiverId={receiverId}" href="/documents/new?senderId={senderId}&receiverId={receiverId}"
class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink" class="inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
> >
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"

5
frontend/src/routes/layout.css
View File

@@ -73,8 +73,11 @@
--c-ink: #012851; --c-ink: #012851;
--c-ink-2: #4b5563; /* gray-600 — 7.6:1 on white, 6.6:1 on canvas — WCAG AA ✓ */ --c-ink-2: #4b5563; /* gray-600 — 7.6:1 on white, 6.6:1 on canvas — WCAG AA ✓ */
--c-ink-3: #6b7280; /* gray-500 — 4.8:1 on white — WCAG AA ✓; use only on surface, not canvas */ --c-ink-3: #6b7280; /* gray-500 — 4.8:1 on white, ~4.6:1 on canvas — WCAG AA ✓ */
/* ⚠ accent — decorative use only (borders, icon tints, bg fills)
Light mode: #a1dcd8 on white = 1.52:1 — WCAG FAIL. Never use as text colour.
For interactive text labels use text-primary or text-ink instead. */
--c-accent: #a1dcd8; --c-accent: #a1dcd8;
--c-accent-bg: rgba(161, 220, 216, 0.15); --c-accent-bg: rgba(161, 220, 216, 0.15);

4
frontend/src/routes/persons/+page.svelte
View File

@@ -30,13 +30,13 @@ function handleSearch() {
> >
<div> <div>
<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1> <h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1>
<p class="mt-2 max-w-xl font-sans text-sm text-ink/60"> <p class="mt-2 max-w-xl font-sans text-sm text-ink-2">
{m.persons_subtitle()} {m.persons_subtitle()}
</p> </p>
{#if data.canWrite} {#if data.canWrite}
<a <a
href="/persons/new" href="/persons/new"
class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink" class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink-2 transition-colors hover:text-ink"
> >
<img <img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg" src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"