ekklesiaandClaude Opus 5.5
d42b64a093
CI / verify (pull_request) Successful in 1m10s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 52s
CI / migration-smoke (pull_request) Successful in 2m20s
CI / image-build (pull_request) Successful in 1m5s
CI / deploy-smoke (same-origin) (pull_request) Successful in 50s
CI / package-publication (pull_request) Successful in 58s
CI / deploy-smoke (split) (pull_request) Successful in 2m38s
The theme foundation DESIGN.md requires (ADR 0060): - A design token may carry a `dark` value and a `reduced` value. The token stylesheet selects them in CSS alone: dark under prefers-color-scheme unless the host chose light, or when it chose dark; motion durations zero under prefers-reduced-motion unless it allowed motion, or when it chose reduce. `color-scheme` travels with the tokens. System is live, an explicit choice wins, and every module root follows through custom-property inheritance, with no module contract change. - @ekklesia/design-tokens adds a small appearance API: system/light/dark and system/reduce/allow, parsers for untrusted stored values, resolvers, and a controller that applies the attributes immediately. The shell applies it before React renders. That is the hook the account preferences work will feed; nothing is persisted. The Dashboard page declares `color-scheme: light dark` so a dark system never flashes white. Displays stay light. - A designed dark theme: teal-tinted charcoal, never pure black or white, the same teal accent. - WCAG AA contrast is tested for 41 element pairings in both schemes. Two light pairings failed and are fixed visibly: text.muted darkens, and form controls get a new border.control (3:1). background.placeholder keeps skeletons visible in dark. - Motion tokens (duration-short, duration-ambient) replace literal durations and every per-element reduced-motion rule. radius.scale multiplies sm/md/lg, unchanged at its default of 1. - The sign-in card and module loading/error text move from literal colours to tokens. Guards keep raw colours and literal radii out of Dashboard product source and @ekklesia/ui. - Fixes ConfirmationDialog's phrase input, which used a class that does not exist (`ek-input`) and so was unstyled. Co-Authored-By: Claude Opus 5.5 <[email protected]>
91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import { readdir, readFile } from "node:fs/promises";
|
|
import path from "node:path";
|
|
import { fileURLToPath } from "node:url";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
/**
|
|
* Every colour and corner in the Dashboard's own product UI comes from a design token (ADR 0039,
|
|
* ADR 0060), so Light, Dark, and System — and later a church's theme — reach all of it.
|
|
*
|
|
* The scan covers the shell's Dashboard source and `@ekklesia/ui`. It looks for what a design token
|
|
* would replace: a hex, `rgb()`, or `hsl()` colour, and a literal corner radius. Comments are ignored,
|
|
* and so is `@ekklesia/design-tokens` itself, which is where those values are meant to live.
|
|
*/
|
|
|
|
const repositoryRoot = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
|
|
|
|
const PRODUCT_SOURCE = [
|
|
path.join("surfaces", "shell", "src", "browser"),
|
|
path.join("packages", "ui", "src"),
|
|
];
|
|
|
|
/**
|
|
* Deliberate, named exceptions. The display host (`surfaces/shell/src/display`) is not scanned at
|
|
* all: it is pinned to the light scheme and its pairing and offline screens keep their Stage 0 look
|
|
* until displays move to Settings → Displays.
|
|
*/
|
|
const RAW_COLOUR = /#[0-9a-fA-F]{3,8}\b|\b(?:rgba?|hsla?)\(/u;
|
|
const RAW_RADIUS = /\bborder-?[Rr]adius["']?\s*:\s*["'`]?\s*(?!var\(|\$\{)\d/u;
|
|
|
|
function withoutComments(source: string): string {
|
|
return source.replace(/\/\*[\s\S]*?\*\//gu, "").replace(/(^|[^:])\/\/.*$/gmu, "$1");
|
|
}
|
|
|
|
async function files(directory: string): Promise<string[]> {
|
|
const found: string[] = [];
|
|
for (const entry of await readdir(directory, { withFileTypes: true })) {
|
|
const full = path.join(directory, entry.name);
|
|
if (entry.isDirectory()) {
|
|
found.push(...(await files(full)));
|
|
} else if (/\.tsx?$/u.test(entry.name)) {
|
|
found.push(full);
|
|
}
|
|
}
|
|
return found;
|
|
}
|
|
|
|
async function offenders(pattern: RegExp): Promise<string[]> {
|
|
const found: string[] = [];
|
|
for (const root of PRODUCT_SOURCE) {
|
|
for (const file of await files(path.join(repositoryRoot, root))) {
|
|
withoutComments(await readFile(file, "utf8"))
|
|
.split("\n")
|
|
.forEach((line, index) => {
|
|
if (pattern.test(line)) {
|
|
found.push(`${path.relative(repositoryRoot, file)}:${index + 1}: ${line.trim()}`);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
return found;
|
|
}
|
|
|
|
describe("the Dashboard's product UI is built from tokens", () => {
|
|
it("has no raw colour outside the token package", async () => {
|
|
expect(await offenders(RAW_COLOUR)).toEqual([]);
|
|
});
|
|
|
|
it("has no literal corner radius", async () => {
|
|
expect(await offenders(RAW_RADIUS)).toEqual([]);
|
|
});
|
|
|
|
it("would notice one", () => {
|
|
for (const line of [
|
|
'color: "#9f1239",',
|
|
"background: rgb(28 25 23 / 0.08);",
|
|
'borderRadius: "0.375rem",',
|
|
"border-radius: 4px;",
|
|
]) {
|
|
expect(RAW_COLOUR.test(line) || RAW_RADIUS.test(line), line).toBe(true);
|
|
}
|
|
for (const line of [
|
|
'borderRadius: designToken("radius.md"),',
|
|
`border-radius: \${designToken("radius.md")};`,
|
|
'querySelector("#ekklesia-host")',
|
|
'id="ekklesia-sidebar-navigation"',
|
|
]) {
|
|
expect(RAW_COLOUR.test(line) || RAW_RADIUS.test(line), line).toBe(false);
|
|
}
|
|
});
|
|
});
|