peter
ff80cc96fd
- F16: --rating (theme-scoped gold, 4.5:1 on the page and its chip), --rating-media, --live/--live-fg, --media-chrome replace 14 palette literals; a lint rule refuses palette classes; the theme contract measures them. - The Plex player's notices drew over its open settings/tracks popovers: notices z-base, popovers z-menu. - The player's info overlay rendered theme tokens on its always-dark panel: on a light theme the score (2.6:1), collection years (3.2:1) and cast initials (1.05:1) were unreadable; onDark variants now. - The lint-rule contract tests share one ESLint with a one-off warm-up (a cold first lint took 8 s, past vitest's 5 s).
64 lines
2.7 KiB
TypeScript
64 lines
2.7 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
|
|
import { eslint } from "./lintProbe.testkit";
|
|
|
|
// `local/surface-role` (eslint.config.js): a glass surface is a role from ui/surfaces.ts, which brings
|
|
// its radius (docs/DESIGN.md B5; E28 S3d). ~140 sites paired three tiers with five radii; this pins
|
|
// that the rule keeping a new one out fires, and where it stands down.
|
|
const RULE = "local/surface-role";
|
|
|
|
async function hits(source: string, filePath = "src/components/__probe.tsx"): Promise<number> {
|
|
const [result] = await eslint.lintText(source, { filePath });
|
|
return (result?.messages ?? []).filter((m) => m.ruleId === RULE).length;
|
|
}
|
|
|
|
describe("a bare glass tier", () => {
|
|
it("is refused in a class string, a template fragment and a ui/ composite", async () => {
|
|
expect(await hits('export const A = () => <div className="glass rounded-2xl p-4" />;\n')).toBe(
|
|
1,
|
|
);
|
|
expect(await hits('export const B = "glass-menu w-60 rounded-xl p-2";\n')).toBe(1);
|
|
expect(await hits("export const C = (x: string) => `glass-card ${x}`;\n")).toBe(1);
|
|
expect(
|
|
await hits(
|
|
'export const D = () => <div className="glass p-3" />;\n',
|
|
"src/components/ui/Toaster.tsx",
|
|
),
|
|
).toBe(1);
|
|
});
|
|
|
|
it("passes as a lone value, through a role, and in the role table itself", async () => {
|
|
expect(await hits('export const E = { variant: "glass" };\n')).toBe(0);
|
|
expect(
|
|
await hits(
|
|
'import { SURFACE } from "./ui/surfaces";\nexport const F = () => <div className={`${SURFACE.card} p-3`} />;\n',
|
|
),
|
|
).toBe(0);
|
|
expect(
|
|
await hits('export const G = "glass rounded-2xl";\n', "src/components/ui/surfaces.ts"),
|
|
).toBe(0);
|
|
});
|
|
});
|
|
|
|
// A role brings its own shadow, whose inset top highlight a `shadow-*` size would replace wholesale.
|
|
describe("a shadow size beside a role", () => {
|
|
const SUR = 'import clsx from "clsx";\nimport { SURFACE } from "./ui/surfaces";\n';
|
|
const tpl = (cls: string) =>
|
|
`${SUR}export const A = () => <div className={\`\${SURFACE.floating} ${cls}\`} />;\n`;
|
|
const call = (role: string, cls: string) =>
|
|
`${SUR}export const B = () => <div className={clsx(SURFACE.${role}, "${cls}")} />;\n`;
|
|
|
|
it("is refused in a template and in clsx, variants included", async () => {
|
|
expect(await hits(tpl("h-12 shadow-lg"))).toBe(1);
|
|
expect(await hits(call("menu", "hover:shadow-2xl"))).toBe(1);
|
|
});
|
|
|
|
it("passes a shadow colour, shadow-float, and a shadow with no role beside it", async () => {
|
|
expect(await hits(tpl("shadow-black/20"))).toBe(0);
|
|
expect(await hits(call("popover", "shadow-float"))).toBe(0);
|
|
expect(await hits('export const E = () => <div className="rounded-lg shadow-lg" />;\n')).toBe(
|
|
0,
|
|
);
|
|
});
|
|
});
|