Skip to content

Add color vision deficiency theme variants#46

Open
necolas wants to merge 6 commits into
mainfrom
colorblind-theme-plan-v2
Open

Add color vision deficiency theme variants#46
necolas wants to merge 6 commits into
mainfrom
colorblind-theme-plan-v2

Conversation

@necolas

@necolas necolas commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

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.

  • Add Protanopia & Deuteranopia and Tritanopia variants for both Pierre Light and Pierre Dark.
  • Rework palette/theme generation around role-based palettes and shared color utilities.
  • Add accessibility documentation, preview generation, and node:test coverage for generated themes and CVD contrast/distinguishability gates.

Previews of the themes as they stand today:

image image image image

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

necolas added 5 commits June 15, 2026 14:06
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
@socket-security

socket-security Bot commented Jun 15, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​types/​culori@​4.0.11001007780100
Addedculori@​4.0.2891008283100

View full report

@socket-security

socket-security Bot commented Jun 15, 2026

Copy link
Copy Markdown

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.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm culori is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: package-lock.jsonnpm/culori@4.0.2

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/culori@4.0.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

@necolas necolas requested a review from mdo June 15, 2026 21:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant