From 743b6f5eac758425db868d26ebabb5dabfbefcd7 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 7 Oct 2026 23:00:28 -0400
Subject: [PATCH] fix(web): error text uses error-fg on every surface, not only
 on tints (#3150)

Raw error red fails AA as text even with no tint behind it: in dark mode
it measures 3.63:1 on obsidian, 3.23 on iron and 2.64 on slate, against
4.5. error-fg (the house formula, 50% toward parchment) measures 5.30 at
worst across both modes.

- All 19 text-error uses become text-error-fg: the "Couldn't load"
  messages on the admin pages, the integrations form errors, the flag
  popover, and the error toast's text. The toast keeps its error border,
  since a border is a graphic with a 3:1 floor.
- check-tint-contrast flags raw error text anywhere (text-error,
  class:text-error, color: var(--fs-error)) and leaves borders and
  outlines alone. Run against the files before the swap, it finds all 19.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/scripts/check-tint-contrast.js            | 23 ++++++++++++++++++-
 web/scripts/check-tint-contrast.test.js       | 16 ++++++++++++-
 web/src/lib/components/FlagPopover.svelte     |  2 +-
 web/src/lib/components/ToastHost.svelte       |  2 +-
 web/src/routes/admin/diagnostics/+page.svelte |  2 +-
 web/src/routes/admin/duplicates/+page.svelte  |  2 +-
 .../routes/admin/integrations/+page.svelte    | 16 ++++++-------
 .../routes/admin/missing-files/+page.svelte   |  2 +-
 .../routes/admin/playback-errors/+page.svelte |  2 +-
 web/src/routes/admin/quarantine/+page.svelte  |  4 ++--
 web/src/routes/admin/requests/+page.svelte    |  2 +-
 web/src/routes/admin/users/+page.svelte       |  4 ++--
 12 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/web/scripts/check-tint-contrast.js b/web/scripts/check-tint-contrast.js
index 10ac4e73..a86abafc 100644
--- a/web/scripts/check-tint-contrast.js
+++ b/web/scripts/check-tint-contrast.js
@@ -64,6 +64,27 @@ export function findCss(source) {
   return found;
 }
 
+// Hues that fail AA as text even on a plain surface, so the raw hue is never
+// text at all: error measures 2.64:1 on slate and 3.23 on iron in dark mode,
+// against 4.5; error-fg measures 5.30 at worst. A border or outline in the
+// hue is a graphic with a 3:1 floor and stays allowed.
+export const TEXT_NEVER_RAW = ['error'];
+
+/** Raw text-X classes and color: var(--fs-X) for the hues above. */
+export function findRawText(source) {
+  const found = [];
+  for (const hue of TEXT_NEVER_RAW) {
+    const patterns = [
+      [new RegExp(`(?<=^|[\\s'"\`:])text-${hue}(?=$|[\\s'"\`=])`, 'g'), `text-${hue}-fg`],
+      [new RegExp(`(?<![-\\w])color\\s*:\\s*var\\(--fs-${hue}\\)`, 'g'), `var(--fs-${HUES[hue]})`]
+    ];
+    for (const [re, fix] of patterns) {
+      for (const m of source.matchAll(re)) found.push({ hue, index: m.index, fix });
+    }
+  }
+  return found;
+}
+
 function lineOf(source, index) {
   return source.slice(0, index).split('\n').length;
 }
@@ -81,7 +102,7 @@ export function scan(root, base = root) {
   const out = [];
   for (const path of walk(root)) {
     const source = readFileSync(path, 'utf8');
-    for (const f of [...findTailwind(source), ...findCss(source)]) {
+    for (const f of [...findTailwind(source), ...findCss(source), ...findRawText(source)]) {
       out.push(`${relative(base, path)}:${lineOf(source, f.index)} ${f.hue} → ${f.fix}`);
     }
   }
diff --git a/web/scripts/check-tint-contrast.test.js b/web/scripts/check-tint-contrast.test.js
index aedae840..8d1e02f2 100644
--- a/web/scripts/check-tint-contrast.test.js
+++ b/web/scripts/check-tint-contrast.test.js
@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'vitest';
 import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
-import { findCss, findTailwind, scan } from './check-tint-contrast.js';
+import { findCss, findRawText, findTailwind, scan } from './check-tint-contrast.js';
 
 const web = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 
@@ -35,6 +35,20 @@ describe('hue-on-own-tint check (#3150)', () => {
     });
   });
 
+  describe('raw error text, on any surface', () => {
+    test('finds text-error, class:text-error and color: var(--fs-error)', () => {
+      expect(findRawText(`<p class="text-sm text-error">x</p>`)).toHaveLength(1);
+      expect(findRawText(`<div class:text-error={bad}>`)).toHaveLength(1);
+      expect(findRawText(`.msg { color: var(--fs-error); }`)[0].fix).toBe('var(--fs-error-fg)');
+    });
+
+    test('passes error-fg, and error as a border or outline', () => {
+      expect(findRawText(`<p class="text-error-fg">x</p>`)).toEqual([]);
+      expect(findRawText(`<div class="border-error" class:border-error={bad}>`)).toEqual([]);
+      expect(findRawText(`.a { border-color: var(--fs-error); outline-color: var(--fs-error); }`)).toEqual([]);
+    });
+  });
+
   describe('CSS', () => {
     const tinted = (color) =>
       `.pill { background: color-mix(in srgb, var(--fs-warning) 15%, transparent); ${color} }`;
diff --git a/web/src/lib/components/FlagPopover.svelte b/web/src/lib/components/FlagPopover.svelte
index a3a75db6..ebccc63a 100644
--- a/web/src/lib/components/FlagPopover.svelte
+++ b/web/src/lib/components/FlagPopover.svelte
@@ -79,7 +79,7 @@
     ></textarea>
   </label>
   {#if error}
-    <p class="mt-2 text-xs text-error">Couldn't save flag — {error}</p>
+    <p class="mt-2 text-xs text-error-fg">Couldn't save flag — {error}</p>
   {/if}
   <div class="mt-3 flex justify-end gap-2">
     <button
diff --git a/web/src/lib/components/ToastHost.svelte b/web/src/lib/components/ToastHost.svelte
index 3144510c..51067568 100644
--- a/web/src/lib/components/ToastHost.svelte
+++ b/web/src/lib/components/ToastHost.svelte
@@ -15,7 +15,7 @@
       class:border-border={toast.value.variant === 'info'}
       class:text-text-primary={toast.value.variant === 'info'}
       class:border-error={toast.value.variant === 'error'}
-      class:text-error={toast.value.variant === 'error'}
+      class:text-error-fg={toast.value.variant === 'error'}
     >
       {toast.value.message}
     </div>
diff --git a/web/src/routes/admin/diagnostics/+page.svelte b/web/src/routes/admin/diagnostics/+page.svelte
index 7224421b..bd7c487f 100644
--- a/web/src/routes/admin/diagnostics/+page.svelte
+++ b/web/src/routes/admin/diagnostics/+page.svelte
@@ -325,7 +325,7 @@
 
   <!-- Timeline -->
   {#if diagQuery.isError}
-    <p class="text-error">Couldn't load: {errMessage(diagQuery.error)}</p>
+    <p class="text-error-fg">Couldn't load: {errMessage(diagQuery.error)}</p>
   {:else if diagQuery.isPending}
     <p class="text-text-secondary">Loading…</p>
   {:else if rows.length === 0}
diff --git a/web/src/routes/admin/duplicates/+page.svelte b/web/src/routes/admin/duplicates/+page.svelte
index b401b1ba..5cf7a768 100644
--- a/web/src/routes/admin/duplicates/+page.svelte
+++ b/web/src/routes/admin/duplicates/+page.svelte
@@ -188,7 +188,7 @@
   {#if query.isPending}
     <p class="text-text-secondary">Loading duplicates…</p>
   {:else if query.isError}
-    <p class="text-error">Couldn't load the duplicates report.</p>
+    <p class="text-error-fg">Couldn't load the duplicates report.</p>
   {:else if groups.length === 0}
     <!-- Three states all show zero groups and mean different things. Telling
          them apart is what stops an empty page reading as a broken feature. -->
diff --git a/web/src/routes/admin/integrations/+page.svelte b/web/src/routes/admin/integrations/+page.svelte
index 9d6bae2d..f98096b1 100644
--- a/web/src/routes/admin/integrations/+page.svelte
+++ b/web/src/routes/admin/integrations/+page.svelte
@@ -463,7 +463,7 @@
         {/each}
       </select>
       {#if testListErrors.quality_profiles}
-        <p class="mt-1 text-xs text-error">
+        <p class="mt-1 text-xs text-error-fg">
           Couldn't fetch quality profiles — {testListErrors.quality_profiles}
         </p>
       {/if}
@@ -481,7 +481,7 @@
         {/each}
       </select>
       {#if testListErrors.metadata_profiles}
-        <p class="mt-1 text-xs text-error">
+        <p class="mt-1 text-xs text-error-fg">
           Couldn't fetch metadata profiles — {testListErrors.metadata_profiles}
         </p>
       {/if}
@@ -501,7 +501,7 @@
         {/each}
       </select>
       {#if testListErrors.root_folders}
-        <p class="mt-1 text-xs text-error">
+        <p class="mt-1 text-xs text-error-fg">
           Couldn't fetch root folders — {testListErrors.root_folders}
         </p>
       {/if}
@@ -513,11 +513,11 @@
           Connected — Lidarr {testResult.version}
         </p>
       {:else}
-        <p class="text-sm text-error">Connection failed — {testResult.error}</p>
+        <p class="text-sm text-error-fg">Connection failed — {testResult.error}</p>
       {/if}
     {/if}
     {#if saveError}
-      <p class="text-sm text-error">Save failed — {saveError}</p>
+      <p class="text-sm text-error-fg">Save failed — {saveError}</p>
     {/if}
 
     <div class="flex items-center gap-2 pt-2">
@@ -625,7 +625,7 @@
                     OK{coverTestResults[provider.id].duration_ms ? ` (${coverTestResults[provider.id].duration_ms}ms)` : ''}
                   </p>
                 {:else}
-                  <p class="text-sm text-error">
+                  <p class="text-sm text-error-fg">
                     Failed — {coverTestResults[provider.id].error}
                   </p>
                 {/if}
@@ -722,7 +722,7 @@
                     OK{tagTestResults[provider.id].duration_ms ? ` (${tagTestResults[provider.id].duration_ms}ms)` : ''}
                   </p>
                 {:else}
-                  <p class="text-sm text-error">
+                  <p class="text-sm text-error-fg">
                     Failed — {tagTestResults[provider.id].error}
                   </p>
                 {/if}
@@ -837,7 +837,7 @@
     class="mt-3 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent"
   />
   {#if disconnectError}
-    <p class="mt-2 text-sm text-error">Disconnect failed — {disconnectError}</p>
+    <p class="mt-2 text-sm text-error-fg">Disconnect failed — {disconnectError}</p>
   {/if}
   <div class="mt-5 flex justify-end gap-2">
     <button
diff --git a/web/src/routes/admin/missing-files/+page.svelte b/web/src/routes/admin/missing-files/+page.svelte
index cad77789..a6ab71bc 100644
--- a/web/src/routes/admin/missing-files/+page.svelte
+++ b/web/src/routes/admin/missing-files/+page.svelte
@@ -74,7 +74,7 @@
   {#if query.isPending}
     <p class="text-text-secondary">Checking what's missing…</p>
   {:else if query.isError}
-    <p class="text-error">Couldn't load the missing-files list.</p>
+    <p class="text-error-fg">Couldn't load the missing-files list.</p>
   {:else if groups.length === 0}
     <!-- Empty state explains the feature, not just the emptiness: an operator
          who has never seen this page shouldn't have to guess what would put a
diff --git a/web/src/routes/admin/playback-errors/+page.svelte b/web/src/routes/admin/playback-errors/+page.svelte
index 23d8309f..b6a87d24 100644
--- a/web/src/routes/admin/playback-errors/+page.svelte
+++ b/web/src/routes/admin/playback-errors/+page.svelte
@@ -197,7 +197,7 @@
   </div>
 
   {#if query.isError}
-    <p class="text-error">Couldn't load: {errMessage(query.error)}</p>
+    <p class="text-error-fg">Couldn't load: {errMessage(query.error)}</p>
   {:else if query.isPending}
     <p class="text-text-secondary">Loading…</p>
   {:else if rows.length === 0}
diff --git a/web/src/routes/admin/quarantine/+page.svelte b/web/src/routes/admin/quarantine/+page.svelte
index dc4b316c..52b4e3ce 100644
--- a/web/src/routes/admin/quarantine/+page.svelte
+++ b/web/src/routes/admin/quarantine/+page.svelte
@@ -163,7 +163,7 @@
   {#if query.isPending}
     <p class="text-text-secondary">Reading the queue…</p>
   {:else if query.isError}
-    <p class="text-error">Couldn't load the quarantine queue.</p>
+    <p class="text-error-fg">Couldn't load the quarantine queue.</p>
   {:else if rows.length === 0}
     <p class="text-text-secondary">Nothing to triage right now.</p>
   {:else}
@@ -356,7 +356,7 @@
       />
     </label>
     {#if deleteLidarrError}
-      <p class="mt-3 text-sm text-error" data-testid="delete-lidarr-error">
+      <p class="mt-3 text-sm text-error-fg" data-testid="delete-lidarr-error">
         {deleteLidarrError}
       </p>
     {/if}
diff --git a/web/src/routes/admin/requests/+page.svelte b/web/src/routes/admin/requests/+page.svelte
index 363e70f4..99949afe 100644
--- a/web/src/routes/admin/requests/+page.svelte
+++ b/web/src/routes/admin/requests/+page.svelte
@@ -198,7 +198,7 @@
   {#if query.isPending}
     <p class="text-text-secondary">Reading the queue…</p>
   {:else if query.isError}
-    <p class="text-error">Couldn't load requests.</p>
+    <p class="text-error-fg">Couldn't load requests.</p>
   {:else if rows.length === 0}
     <p class="text-text-secondary">Nothing here.</p>
   {:else}
diff --git a/web/src/routes/admin/users/+page.svelte b/web/src/routes/admin/users/+page.svelte
index efca14e8..6562a31d 100644
--- a/web/src/routes/admin/users/+page.svelte
+++ b/web/src/routes/admin/users/+page.svelte
@@ -229,7 +229,7 @@
     {#if usersQuery.isPending}
       <p class="text-text-secondary">Reading users…</p>
     {:else if usersQuery.isError}
-      <p class="text-error">Couldn't load users.</p>
+      <p class="text-error-fg">Couldn't load users.</p>
     {:else if users.length === 0}
       <p class="text-text-secondary">No users yet.</p>
     {:else}
@@ -318,7 +318,7 @@
     {#if invitesQuery.isPending}
       <p class="text-text-secondary">Reading invites…</p>
     {:else if invitesQuery.isError}
-      <p class="text-error">Couldn't load invites.</p>
+      <p class="text-error-fg">Couldn't load invites.</p>
     {:else if invites.length === 0}
       <p class="text-sm text-text-secondary">No active invites.</p>
     {:else}