Add color vision deficiency theme variants#46
Conversation
Give each directory a single role: src/ for published package source, scripts/ for build tooling, and test/ for the test harness. - Split color-p3.ts into a src/color/ module (srgb, p3, and a barrel). - Split palette.ts into src/palettes.ts and per-variant src/roles/. - Rename theme.ts/zed-theme.ts (and their makeTheme/makeZedThemeFamily exports) to createTheme.ts/createZedTheme.ts. - Move the preview builder to src/previews/ and add a scripts/ createPreviews.ts generator that renders previews to disk. - Move build.ts to scripts/, and the VSIX packager to scripts/ buildVsCodePackage.ts with its marketplace README colocated. - Move the test harness to test/. Update package.json script paths, broaden the tsconfig include to src+scripts+test (dropping rootDir), and fix the publish workflow's README path. Behavior-preserving: the six themes regenerate identically.
Add four CVD-tuned themes — Protanopia & Deuteranopia, and Tritanopia, in light and dark. They reuse Pierre's chrome verbatim and re-map only the chromatic signals onto each deficiency's distinguishable hue axis. - src/color/: the supporting color science as discrete modules — cvd (Machado-2009 simulation), contrast (WCAG) and deltaE (CIEDE2000), with invariant self-checks. - src/roles/: the four CVD role sets, derived from the base roles. - test/cvd-test.ts: an objective gate wired into npm test. It simulates every chromatic role for protanopia, deuteranopia and tritanopia under both the linear-RGB and gamma-sRGB conventions, and fails the build if any must-distinguish pair loses separability (CIEDE2000) or legibility (WCAG contrast) under the worst case. Its math is cross-validated against culori, a dev-only dependency. - src/previews/cvd.ts: a normal-vs-simulated proof sheet, with the left column labelled "Colors as defined". Role values are tuned to clear the gate with margin on the tightest pairs. VS Code (package.json) and Zed registrations, the CI theme checks, and ACCESSIBILITY.md (tier rationale, contrast policy) complete the feature.
Rename the watch script from start to dev, widen its watch to scripts/ as well as src/, and have it rebuild both the themes and the previews on change (build && preview) rather than just the themes.
README: list the CVD theme entry points and point contributors at CONTRIBUTING and ACCESSIBILITY. CONTRIBUTING: update the source-layout pointers to src/createTheme.ts and src/roles, refresh the scripts table (dev, preview), and add a Testing section covering how to run and read the CVD accessibility gate — the operational counterpart to the design rationale in ACCESSIBILITY.
Replace the manual test runner (console.log + error accumulation + process.exit) with the built-in node:test runner using describe/test blocks and node:assert/strict, preserving every existing assertion. - test/theme.test.ts: palette-role and theme-generation structural checks - test/build.test.ts: generated theme-file (build-output) checks - test/cvd.test.ts: CVD accessibility gate as describe/test; advisory Tier-3 pairs and report-only contrast surfaced via test diagnostics - test/helpers/cvd.ts: shared color-science utilities (CVD simulation, contrast, deltaE, culori cross-check) - run via `node --require ts-node/register --test`; non-zero exit on failure
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
Summary
This includes a more significant rework of the repo to upgrade the test infra and scale the way preview HTML is generated. If this eventually ends up in the monorepo, we can adopt that test infra and maybe do vercel preview deploys.
Previews of the themes as they stand today:
We can use different colors from the palette if needed, as long as they pass the objective CVD tests to ensure sufficient contrast and distinguishability.
Testing
npm test