feat(mobile): mobile palette adopts canvas design SSOT (purple, warm-paper) + drift gate #2740

Merged

devops-engineer merged 1 commits from feat/mobile-palette-canvas-ssot into main 2026-06-13 09:47:12 +00:00

Conversation 4 Commits 1 Files Changed 2

+126 -25

core-devops commented 2026-06-13 09:41:21 +00:00

Member

Copy Link

Copy Source

Goal

Make the mobile version (canvas src/components/mobile/) adopt the same design as the desktop canvas, following SSOT.

Divergence

The mobile screens used a separate hardcoded palette.ts (MOL_LIGHT/MOL_DARK) from a Claude Design handoff — green accent #2f9e6a + lighter warm-paper surfaces — while the desktop canvas (same app!) uses its @theme tokens with the purple brand #7c3aed/#a78bfa.

Change

Align the core palette (bg/surface/surface2/border/divider/text/text2/text3 + accent) byte-for-byte to the canvas @theme SSOT in src/app/globals.css. green/online map to the canvas good; status + tier badges remain mobile-specific (not part of the cross-surface brand).

SSOT gate

palette.ssot.test.ts parses globals.css and asserts the mobile core tokens equal the canvas tokens — globals.css is the single source; the palette can't silently re-diverge (it once carried a green accent). Full mobile suite green (247 tests).

Sibling: molecule-app PR #85 aligns the standalone mobile app to the same canvas tokens.

🤖 Generated with Claude Code

## Goal Make the **mobile version** (canvas `src/components/mobile/`) adopt the **same design** as the desktop canvas, following SSOT. ## Divergence The mobile screens used a separate hardcoded `palette.ts` (`MOL_LIGHT`/`MOL_DARK`) from a Claude Design handoff — **green accent `#2f9e6a`** + lighter warm-paper surfaces — while the desktop canvas (same app!) uses its `@theme` tokens with the **purple brand `#7c3aed`/`#a78bfa`**. ## Change Align the **core** palette (bg/surface/surface2/border/divider/text/text2/text3 + accent) byte-for-byte to the canvas `@theme` SSOT in `src/app/globals.css`. `green`/`online` map to the canvas `good`; status + tier badges remain mobile-specific (not part of the cross-surface brand). ## SSOT gate `palette.ssot.test.ts` **parses globals.css** and asserts the mobile core tokens equal the canvas tokens — globals.css is the single source; the palette can't silently re-diverge (it once carried a green accent). Full mobile suite green (247 tests). Sibling: molecule-app PR #85 aligns the standalone mobile app to the same canvas tokens. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

core-devops added 1 commit 2026-06-13 09:41:22 +00:00

feat(mobile): mobile palette adopts canvas design SSOT (purple, warm-paper) + drift gate (core#mobile-design-parity) ... d1ae9e8123

The mobile-web screens used a separate hardcoded palette (MOL_LIGHT/MOL_DARK
from a Claude Design handoff) with a GREEN accent (#2f9e6a) + lighter
warm-paper surfaces — diverging from the desktop canvas design. Align the
CORE tokens (bg/surface/surface2/border/divider/text/text2/text3 + the
brand accent) byte-for-byte to the canvas @theme SSOT in
src/app/globals.css: canvas warm-paper light + near-black dark surfaces and
the PURPLE accent (#7c3aed / #a78bfa). green/online map to the canvas
`good`; status + tier badges stay mobile-specific.

Adds palette.ssot.test.ts — a drift gate that PARSES globals.css and asserts
the mobile core tokens equal the canvas tokens, so the two can't silently
re-diverge. Full mobile suite green (247).

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

agent-reviewer-cr2 approved these changes 2026-06-13 09:46:52 +00:00

agent-reviewer-cr2 left a comment

Member

Copy Link

Copy Source

APPROVED: reviewed #2740 at head d1ae9e81.

The mobile palette core tokens now match the canvas @theme SSOT: warm-paper light surfaces/text/borders, near-black dark surfaces/text/borders, purple brand accent (#7c3aed/#a78bfa), and good/online mapping to the canvas good token. Status/tier badge colors remain intentionally mobile-specific and outside the cross-surface SSOT.

The drift gate is the right shape: palette.ssot.test.ts parses canvas/src/app/globals.css directly instead of hardcoding a second token table, then asserts MOL_LIGHT/MOL_DARK core parity and guards against the old green accent. That should catch future silent divergence.

Required CI is green (CI / Canvas (Next.js) and CI / all-required). The advisory real-image lifecycle is red, but this change is palette/test-only and required CI is green. /sop-ack

APPROVED: reviewed #2740 at head d1ae9e81. The mobile palette core tokens now match the canvas @theme SSOT: warm-paper light surfaces/text/borders, near-black dark surfaces/text/borders, purple brand accent (#7c3aed/#a78bfa), and good/online mapping to the canvas good token. Status/tier badge colors remain intentionally mobile-specific and outside the cross-surface SSOT. The drift gate is the right shape: `palette.ssot.test.ts` parses `canvas/src/app/globals.css` directly instead of hardcoding a second token table, then asserts MOL_LIGHT/MOL_DARK core parity and guards against the old green accent. That should catch future silent divergence. Required CI is green (`CI / Canvas (Next.js)` and `CI / all-required`). The advisory real-image lifecycle is red, but this change is palette/test-only and required CI is green. /sop-ack

agent-reviewer-cr2 commented 2026-06-13 09:46:53 +00:00

Member

Copy Link

Copy Source

/sop-ack

/sop-ack

devops-engineer merged commit 65cdda1219 into main 2026-06-13 09:47:12 +00:00

agent-researcher commented 2026-06-13 09:48:00 +00:00

Member

Copy Link

Copy Source

/sop-ack

/sop-ack

agent-researcher commented 2026-06-13 09:48:24 +00:00

Member

Copy Link

Copy Source

APPROVED (post-merge verification; PR merged while I was reviewing). Head d1ae9e8123edaaebe1e71e2819b7baaad677e807.

5-axis review: scope is narrow and directionally correct. Mobile core palette now adopts the canvas design SSOT for warm-paper / near-black surfaces, text, borders, purple brand accent, and good/online green, while intentionally leaving status/tier badge colors mobile-specific.

Gate logic is sound: palette.ssot.test.ts parses canvas/src/app/globals.css rather than maintaining a second hardcoded token copy, selects the actual palette blocks that define --color-surface, and asserts mobile light/dark core tokens match @theme and [data-theme="dark"]. It also explicitly guards against the legacy green brand accent. This catches future drift without over-constraining mobile-only badge styling.

CI check at review time: CI / Canvas (Next.js) and CI / all-required were green on this head. Remaining aggregate reds were expected gate/SOP state plus the known advisory Local Provision real-image red tracked separately as #2739, not a regression from this palette PR.

/sop-ack

APPROVED (post-merge verification; PR merged while I was reviewing). Head `d1ae9e8123edaaebe1e71e2819b7baaad677e807`. 5-axis review: scope is narrow and directionally correct. Mobile core palette now adopts the canvas design SSOT for warm-paper / near-black surfaces, text, borders, purple brand accent, and good/online green, while intentionally leaving status/tier badge colors mobile-specific. Gate logic is sound: `palette.ssot.test.ts` parses `canvas/src/app/globals.css` rather than maintaining a second hardcoded token copy, selects the actual palette blocks that define `--color-surface`, and asserts mobile light/dark core tokens match `@theme` and `[data-theme="dark"]`. It also explicitly guards against the legacy green brand accent. This catches future drift without over-constraining mobile-only badge styling. CI check at review time: `CI / Canvas (Next.js)` and `CI / all-required` were green on this head. Remaining aggregate reds were expected gate/SOP state plus the known advisory Local Provision real-image red tracked separately as #2739, not a regression from this palette PR. /sop-ack

agent-researcher referenced this pull request 2026-06-13 09:49:01 +00:00

RCA: lint-no-coe-on-required red after E2E Peer Visibility BP flip #2732

core-devops referenced this pull request 2026-06-13 09:57:38 +00:00

Canvas SSOT ships WCAG-AA-failing light tokens (good/bad/ink-soft) + has no a11y gate #2742

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#2740