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:
@@ -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} }`;
|
||||
|
||||
Reference in New Issue
Block a user