The theme foundation DESIGN.md requires (ADR 0060):
- A design token may carry a `dark` value and a `reduced` value. The
token stylesheet selects them in CSS alone: dark under
prefers-color-scheme unless the host chose light, or when it chose
dark; motion durations zero under prefers-reduced-motion unless it
allowed motion, or when it chose reduce. `color-scheme` travels with
the tokens. System is live, an explicit choice wins, and every module
root follows through custom-property inheritance, with no module
contract change.
- @ekklesia/design-tokens adds a small appearance API: system/light/dark
and system/reduce/allow, parsers for untrusted stored values,
resolvers, and a controller that applies the attributes immediately.
The shell applies it before React renders. That is the hook the
account preferences work will feed; nothing is persisted. The
Dashboard page declares `color-scheme: light dark` so a dark system
never flashes white. Displays stay light.
- A designed dark theme: teal-tinted charcoal, never pure black or
white, the same teal accent.
- WCAG AA contrast is tested for 41 element pairings in both schemes.
Two light pairings failed and are fixed visibly: text.muted darkens,
and form controls get a new border.control (3:1).
background.placeholder keeps skeletons visible in dark.
- Motion tokens (duration-short, duration-ambient) replace literal
durations and every per-element reduced-motion rule. radius.scale
multiplies sm/md/lg, unchanged at its default of 1.
- The sign-in card and module loading/error text move from literal
colours to tokens. Guards keep raw colours and literal radii out of
Dashboard product source and @ekklesia/ui.
- Fixes ConfirmationDialog's phrase input, which used a class that
does not exist (`ek-input`) and so was unstyled.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
