crewli/dev-docs/superpowers/plans/2026-05-17-gui-redesign-tier1-primitives-DRAGGABLEBLOCK-CONTRACT.md

Plan 3 — DraggableBlock contract & reconciliation gates

Theme alignment

The parity harness spans two PrimeVue installations that configure dark-mode differently. The divergence and its resolution are recorded here as spec-of-record.

crewli-starter: darkModeSelector: '[data-theme="dark"]', dark primary hardcoded #1eafb1, bespoke surface block. apps/app: darkModeSelector: '.dark' (RFC-WS-FRONTEND-PRIMEVUE AD-2, matches Vuexy), dark primary {primary.400} Aura ramp, RFC Appendix B surface tokens. Decision (option b — normalise at the harness): v2 components NEVER hardcode a dark selector or a semantic hex; they consume var(--p-*) Aura tokens only, which resolve correctly under apps/app's .dark. The parity harness renders the crewli-starter reference under [data-theme="dark"] and the v2 component under .dark; the human parity-check compares rendered pixels, not selector strings. The #1eafb1 vs {primary.400} ramp delta is accepted (same teal family; RFC AD-2 owns the apps/app ramp) and explicitly recorded so a dark-mode parity diff is read as theme-by-design, not a component bug.