[OpenSpec] authoring-token-value-types

[github-actions]

⚠️ OpenSpec-managed issue — this content is automatically synced
from the openspec/ directory. Manual edits will be overwritten on next sync.

Artifacts

• ✅ Metadata
• ✅ Proposal
• ✅ Specs
• ✅ Design
• ✅ Tasks
• 🔲 Plan
• 🔲 Review

Specs

• 📄 dark-mode
• 📄 theming-sync
• 📄 token-editor-ui
• 📄 token-set-contrast-audit

Tasks

• 1.1 Add lib/Service/TokenValueValidator.php with the grammar per type (design decision 1).
• 1.2 Mirror the grammar in js/lib/tokenTransforms.js and add splitAlpha(). Verify:
• 1.3 Add the types duration and easing to TokenRegistry, replace the two motion rows with
• 2.1 OverridesController::setOverrides(): 400 for a wrong value or an unknown name, naming
• 2.2 Accept and return darkOverrides. CustomOverridesService writes the two dark scopes
• 2.3 Add DarkPaletteService::deriveDarkValue() and store the derived value for every colour
• 2.4 Write both motion names for a motion override. Verify: PHPUnit
• 2.5 Add lib/Repair/MigrateOverrideValueTypes.php and register it in appinfo/info.xml.
• 2.6 Add the 400 cases and a darkOverrides round trip to
• 3.1 ContrastService: read #rgba, #rrggbbaa and the alpha of rgba()/hsla(), add
• 3.2 DarkPaletteService::deriveColorToken() keeps alpha, bump the generator version,
• 3.3 CustomTokenSetService::deriveTheming() blends a translucent primary or background into
• 4.1 Opacity control, checkerboard swatch and alpha-keeping picker in buildTokenRow() and
• 4.2 The "Dark" line per colour row with the derived placeholder. Verify: Playwright scenarios
• 4.3 Duration and easing inputs and the motion preview. Verify: Playwright scenarios "An
• 4.4 defaults.css declares --nldesign-animation-easing: ease, and every ease in
• 5.1 Localisation: labels for the opacity control, the dark line, the motion inputs, the
• 5.2 Documentation: docs/features/token-editor.md gains transparency, dark values and motion,
• 5.3 WCAG AA contrast: the editor's contrast hint uses the blended colour. Verify: Playwright
• 5.4 Dark mode: both dark paths render the same override. Verify: Playwright scenario "Both
• 5.5 Incomplete token sets: a set without --nldesign-animation-easing falls back to
• 5.6 Accessibility: the opacity range and number field have labels, the dark line is announced
• 5.7 Security: values pass the existing injection filter after the type check, and the error
• 6.1 Run COMPOSER_PROCESS_TIMEOUT=0 composer check:strict once, then npm run lint,
• 6.2 On a running instance, set a translucent colour, a dark value and a slower animation,

Design

See design.md for technical design details.

---

Synced from openspec/changes/authoring-token-value-types by OpenSpec workflow
App: thematiq