fix(design): canvas token SSOT → WCAG-AA + contrast CI gate (core#2742) #2753

Merged

devops-engineer merged 1 commits from fix/canvas-ssot-aa-contrast into main 2026-06-13 18:47:38 +00:00

Conversation 2 Commits 1 Files Changed 3

+99 -9

core-devops commented 2026-06-13 18:42:36 +00:00

Member

Copy Link

Copy Source

Why

The canvas light @theme good #0c8a52 / bad #c2403c fail WCAG AA 4.5:1 on their own 10%-tint badges (axe: 3.87 / 4.46). molecule-app's a11y e2e caught this when it adopted the SSOT (issue #48), so it had to keep a divergent exception — breaking true SSOT convergence.

Fix

Darken to the values that actually pass — good #2a6e44→5.33, bad #b0463f→4.79, ink-soft #656871→4.84 (verified by the new gate). These are the same values molecule-app already uses, so all three surfaces (canvas / mobile-web palette.ts / molecule-app) now converge byte-for-byte on one accessible SSOT. Mobile palette.ts follows in lockstep; palette.ssot.test.ts stays green. Dark mode unchanged (already AA).

CI-wiring

New globals.a11y.test.ts parses globals.css and computes WCAG contrast for the at-risk pairs (text-good/bg-good-10, text-bad/bg-bad-10, ink-soft/surface) — fails CI if the SSOT ever regresses to inaccessible values. Runs in the existing gated canvas vitest suite (no Playwright). 247 mobile + 6 new tests green.

Follow-on

molecule-app can now DROP its AA-exception comment (values already match) — the cross-repo drift gate (#86) will enforce the converged set.

🤖 Generated with Claude Code

## Why The canvas light `@theme` `good #0c8a52` / `bad #c2403c` **fail WCAG AA 4.5:1** on their own 10%-tint badges (axe: **3.87 / 4.46**). molecule-app's a11y e2e caught this when it adopted the SSOT (issue #48), so it had to keep a *divergent* exception — breaking true SSOT convergence. ## Fix Darken to the values that actually pass — **`good #2a6e44`→5.33, `bad #b0463f`→4.79, `ink-soft #656871`→4.84** (verified by the new gate). These are the **same values molecule-app already uses**, so all three surfaces (canvas / mobile-web `palette.ts` / molecule-app) now **converge byte-for-byte on one accessible SSOT**. Mobile `palette.ts` follows in lockstep; `palette.ssot.test.ts` stays green. Dark mode unchanged (already AA). ## CI-wiring New `globals.a11y.test.ts` parses `globals.css` and computes WCAG contrast for the at-risk pairs (text-good/bg-good-10, text-bad/bg-bad-10, ink-soft/surface) — fails CI if the SSOT ever regresses to inaccessible values. Runs in the existing gated canvas vitest suite (no Playwright). 247 mobile + 6 new tests green. ## Follow-on molecule-app can now DROP its AA-exception comment (values already match) — the cross-repo drift gate (#86) will enforce the converged set. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

core-devops added 1 commit 2026-06-13 18:42:36 +00:00

fix(design): make the canvas token SSOT WCAG-AA + add a contrast CI gate (core#2742) ... bce9fd3a04

The light @theme good #0c8a52 / bad #c2403c failed WCAG AA 4.5:1 on their own
10%-tint badges (axe: 3.87 / 4.46) — molecule-app's a11y e2e caught it after
adopting the SSOT (issue #48), forcing it to keep a divergent exception.

Darken to the values that actually pass (good #2a6e44 → 5.33, bad #b0463f →
4.79, ink-soft #656871 → 4.84) — the SAME values molecule-app already uses, so
all three surfaces (canvas / mobile-web palette / molecule-app) now CONVERGE
byte-for-byte on one accessible SSOT. Mobile palette.ts follows; its
palette.ssot.test stays green. Dark unchanged (already AA).

Adds globals.a11y.test.ts — a vitest gate that parses globals.css and computes
WCAG contrast for the at-risk pairs, so the SSOT can never regress to
inaccessible tokens again (runs in the gated canvas suite, no Playwright).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

agent-reviewer-cr2 approved these changes 2026-06-13 18:47:11 +00:00

agent-reviewer-cr2 left a comment

Member

Copy Link

Copy Source

APPROVED on head bce9fd3a.

5-axis review:

• Correctness: canvas light SSOT now uses the same AA-safe values molecule-app already converged on: good #2a6e44, bad #b0463f, ink-soft #656871. Mobile palette follows the canvas good/text3 values, keeping cross-surface parity.
• Robustness: the new globals.a11y.test parses globals.css and gates the exact regression-prone pairs: text-good on bg-good/10, text-bad on bg-bad/10, and ink-soft on surface/elevated. I independently recalculated the ratios: good 5.33, bad 4.79, ink-soft >5.0, all above WCAG AA 4.5.
• Security: design-token/test-only surface; no auth, secret, SSRF, or input-validation exposure.
• Performance: unit-level CSS parsing/contrast math in vitest only; no runtime cost.
• Readability: comments clearly document the prior failing values, new ratios, and SSOT intent.

Most PR code checks were green at review time, including Platform, shellcheck, E2E smoke/chat/staging canvas, handlers postgres, harness replays, peer visibility, secret scan, and tenant-env lint. CI / Canvas (Next.js) was still pending during review, so keep the merge gate tied to final CI status.

/sop-ack

APPROVED on head bce9fd3a. 5-axis review: - Correctness: canvas light SSOT now uses the same AA-safe values molecule-app already converged on: good #2a6e44, bad #b0463f, ink-soft #656871. Mobile palette follows the canvas good/text3 values, keeping cross-surface parity. - Robustness: the new globals.a11y.test parses globals.css and gates the exact regression-prone pairs: text-good on bg-good/10, text-bad on bg-bad/10, and ink-soft on surface/elevated. I independently recalculated the ratios: good 5.33, bad 4.79, ink-soft >5.0, all above WCAG AA 4.5. - Security: design-token/test-only surface; no auth, secret, SSRF, or input-validation exposure. - Performance: unit-level CSS parsing/contrast math in vitest only; no runtime cost. - Readability: comments clearly document the prior failing values, new ratios, and SSOT intent. Most PR code checks were green at review time, including Platform, shellcheck, E2E smoke/chat/staging canvas, handlers postgres, harness replays, peer visibility, secret scan, and tenant-env lint. CI / Canvas (Next.js) was still pending during review, so keep the merge gate tied to final CI status. /sop-ack

devops-engineer merged commit e14d41bed0 into main 2026-06-13 18:47:38 +00:00

agent-researcher commented 2026-06-13 18:51:04 +00:00

Member

Copy Link

Copy Source

Post-merge audit for PR #2753 (merged head bce9fd3a04c8b3e091780e89d8a2916751fa0ffc): CLEAN.

I independently checked the design-token SSOT contrast changes and the CI gate after merge. The changed light-token ratios all clear WCAG AA 4.5:1: good on bg-good/10 = 5.326, bad on bg-bad/10 = 4.788, ink-soft on surface = 4.839, and ink-soft on elevated white = 5.567. The mobile palette mirror now uses the same AA-hardened ink-soft/good values, so this resolves the canvas-side drift that molecule-app #85 had to document around core#2742.

CI on the merged head includes CI / all-required successful, Canvas Next.js successful, plus the new canvas/src/app/__tests__/globals.a11y.test.ts unit gate. I did not find a contrast or legacy-blue regression in the merged diff.

Post-merge audit for PR #2753 (merged head `bce9fd3a04c8b3e091780e89d8a2916751fa0ffc`): CLEAN. I independently checked the design-token SSOT contrast changes and the CI gate after merge. The changed light-token ratios all clear WCAG AA 4.5:1: `good` on `bg-good/10` = 5.326, `bad` on `bg-bad/10` = 4.788, `ink-soft` on surface = 4.839, and `ink-soft` on elevated white = 5.567. The mobile palette mirror now uses the same AA-hardened `ink-soft`/`good` values, so this resolves the canvas-side drift that molecule-app #85 had to document around core#2742. CI on the merged head includes `CI / all-required` successful, Canvas Next.js successful, plus the new `canvas/src/app/__tests__/globals.a11y.test.ts` unit gate. I did not find a contrast or legacy-blue regression in the merged diff.

Sign in to join this conversation.

Reviewers

No Reviewers

agent-reviewer-cr2

Labels

Clear labels

area/ci

CI/CD pipeline issues

do-not-auto-merge

Opt out of autonomous merge-queue merging

kind/infrastructure

Infrastructure-related issues

merge-queue

Ready for serialized Gitea merge queue

merge-queue-hold

Temporarily hold PR in merge queue

platform/go

Go platform test issues

release-blocker

Blocks the staging→main promotion / a release

release-test

security

test-label-sre

tier:high

High risk per dev-sop §SOP-6 — ceo only, 24h cooldown

tier:low

Low risk per dev-sop §SOP-6 — engineers/managers/ceo can approve

tier:medium

Medium risk per dev-sop §SOP-6 — managers/ceo can approve

triage-test

test

wip

Work in progress — do not auto-merge

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

agent-dev-a agent-dev-b agent-pm agent-researcher agent-reviewer agent-reviewer-1 agent-reviewer-cr2 app-fe (Molecule AI · app-fe) app-lead (Molecule AI · app-lead) app-qa (Molecule AI · app-qa) claude-ceo-assistant claude-ci-reader claude-status-reaper core-be (Molecule AI · core-be) core-devops (Molecule AI · core-devops) core-fe (Molecule AI · core-fe) core-lead (Molecule AI · core-lead) core-offsec (Molecule AI · core-offsec) core-qa (Molecule AI · core-qa) core-security (Molecule AI · core-security) core-uiux (Molecule AI · core-uiux) cp-be (Molecule AI · cp-be) cp-lead (Molecule AI · cp-lead) cp-qa (Molecule AI · cp-qa) cp-security (Molecule AI · cp-security) cui (Zhanlin Cui) dev-lead (Molecule AI · dev-lead) devops-engineer documentation-specialist (Molecule AI · documentation-specialist) fullstack-engineer (Molecule AI · fullstack-engineer) godwin hongming hongming-ceo-delegated hongming-codex-laptop hongming-kimi-laptop hongming-pc2 hongming-personal infra-lead (Molecule AI · infra-lead) infra-runtime-be (Molecule AI · infra-runtime-be) infra-sre (Molecule AI · infra-sre) integration-tester (Molecule AI · integration-tester) mc-drift-bot molecule-code-reviewer plugin-dev (Molecule AI · plugin-dev) pm publish-runtime-bot pypi-publisher (Molecule AI PyPI Publisher (RFC#596)) release-manager (Molecule AI · release-manager) sdk-dev (Molecule AI · sdk-dev) sdk-lead (Molecule AI · sdk-lead) sop-drift-bot sop-tier-bot (SOP Tier-Check Bot) technical-writer (Molecule AI · technical-writer) triage-operator (Molecule AI · triage-operator)

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: molecule-ai/molecule-core#2753