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

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:
2026-10-07 23:00:28 -04:00
co-authored by Claude Opus 5.5
parent fdee77eaec
commit 743b6f5eac
12 changed files with 56 additions and 21 deletions
+22 -1
View File
@@ -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}`);
}
}