fix(web): error text uses error-fg on every surface, not only on tints (#3150)
release / govulncheck (push) Successful in 17s
release / web (push) Successful in 1m6s
release / go (push) Successful in 1m29s
release / integration (push) Successful in 4m30s
release / android (push) Successful in 5m18s
release / Build signed APK (releases and dev) (push) Successful in 5m32s
release / Attach APK to the Release (tag releases only) (push) Skipped
release / Build + push container image (push) Successful in 25s
release / Verify release artifacts (tag releases only) (push) Skipped
release / govulncheck (push) Successful in 17s
release / web (push) Successful in 1m6s
release / go (push) Successful in 1m29s
release / integration (push) Successful in 4m30s
release / android (push) Successful in 5m18s
release / Build signed APK (releases and dev) (push) Successful in 5m32s
release / Attach APK to the Release (tag releases only) (push) Skipped
release / Build + push container image (push) Successful in 25s
release / Verify release artifacts (tag releases only) (push) Skipped
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>
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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. -->
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user