bvandeusenandClaude Opus 5.5
fdee77eaec
release / web (push) Successful in 1m22s
release / govulncheck (push) Successful in 38s
release / go (push) Successful in 1m48s
release / integration (push) Successful in 5m1s
release / android (push) Successful in 5m41s
release / Build signed APK (releases and dev) (push) Successful in 5m11s
release / Attach APK to the Release (tag releases only) (push) Skipped
release / Build + push container image (push) Successful in 1m17s
release / Verify release artifacts (tag releases only) (push) Skipped
A hue painted as text on a color-mix tint of itself sits close to the surface under it. On Minstrel's surfaces the raw accent on its 15% tint measures 1.97:1 at worst (dark mode, hover surface), against AA's 4.5. - tokens.json gains colors.fg: the five FabledSword -fg formulas (accent 45%, success 45%, warning, error and info 50%), each mixed toward parchment so one declaration serves both modes. Success is Minstrel's moss. tokens-to-css emits them in :root. - Tailwind exposes them as text-accent-fg, text-warning-fg, text-error-fg and text-info-fg. - 23 sites swapped: 14 Tailwind class strings (PlayerBar and the admin count pills) and 9 CSS rules (StatusPill's four tones and five accent chips). Worst case after: accent-fg 5.03, error-fg 4.75, warning-fg 4.92, success-fg 4.85. - scripts/check-tint-contrast.js finds the pair in either spelling. Its test scans src in the web Vitest lane and fails on any new site, with fixture cases showing it can fail. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
62 lines
2.5 KiB
JavaScript
62 lines
2.5 KiB
JavaScript
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';
|
|
|
|
const web = resolve(dirname(fileURLToPath(import.meta.url)), '..');
|
|
|
|
describe('hue-on-own-tint check (#3150)', () => {
|
|
test('no source paints a hue as text on a tint of itself', () => {
|
|
expect(scan(resolve(web, 'src'), web)).toEqual([]);
|
|
});
|
|
|
|
describe('Tailwind', () => {
|
|
test('finds text-X on bg-X-tint and bg-X/NN in one class string', () => {
|
|
expect(findTailwind(`class="rounded bg-accent-tint px-2 text-accent"`)).toHaveLength(1);
|
|
expect(findTailwind(`'bg-error/15 text-error'`)).toHaveLength(1);
|
|
expect(findTailwind("`bg-moss/10 text-moss`")[0].fix).toBe('text-success-fg');
|
|
});
|
|
|
|
test('a class string spanning lines is one string', () => {
|
|
expect(findTailwind(`class="bg-accent-tint\n text-accent"`)).toHaveLength(1);
|
|
});
|
|
|
|
test('an apostrophe earlier in the file does not hide a pair', () => {
|
|
expect(
|
|
findTailwind(`<p>Couldn't add</p>\n<span class={on ? 'bg-accent-tint text-accent' : ''}>`)
|
|
).toHaveLength(1);
|
|
});
|
|
|
|
test('passes the -fg partner, another hue, and a tint with no hue text', () => {
|
|
expect(findTailwind(`"bg-accent-tint text-accent-fg"`)).toEqual([]);
|
|
expect(findTailwind(`"bg-accent-tint text-error"`)).toEqual([]);
|
|
expect(findTailwind(`"bg-accent-tint text-text-primary"`)).toEqual([]);
|
|
expect(findTailwind(`"text-accent"`)).toEqual([]);
|
|
});
|
|
});
|
|
|
|
describe('CSS', () => {
|
|
const tinted = (color) =>
|
|
`.pill { background: color-mix(in srgb, var(--fs-warning) 15%, transparent); ${color} }`;
|
|
|
|
test('finds color: var(--fs-X) on a color-mix tint of X', () => {
|
|
expect(findCss(tinted('color: var(--fs-warning);'))).toHaveLength(1);
|
|
expect(findCss(tinted('color: var(--fs-warning);'))[0].fix).toBe('var(--fs-warning-fg)');
|
|
});
|
|
|
|
test('passes the -fg partner and border or outline colours', () => {
|
|
expect(findCss(tinted('color: var(--fs-warning-fg);'))).toEqual([]);
|
|
expect(findCss(tinted('border-color: var(--fs-warning);'))).toEqual([]);
|
|
expect(findCss(tinted('outline-color: var(--fs-warning);'))).toEqual([]);
|
|
});
|
|
|
|
test('a tint and a colour in different rules are not a pair', () => {
|
|
expect(
|
|
findCss(
|
|
`.a { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); }\n.b { color: var(--fs-accent); }`
|
|
)
|
|
).toEqual([]);
|
|
});
|
|
});
|
|
});
|