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]>
Modules have owned their own UI since ADR 0021, but the platform has never
said what that UI should look like. Every screen here — the Dashboard shell,
the display host, the module template — invented its own hex colours, font
stack, spacing, and radii, and they already disagreed. A module author had no
vocabulary for "the ordinary panel background", so the only available answer
was to invent one, and two modules would invent two.
Add `@ekklesia/design-tokens`: one validated, enumerable registry of semantic
tokens. A token declares a name, label, description, and default value; its
category and `--ekklesia-*` identifier are derived from the name, so it can
never claim one category while being named for another. Construction rejects
duplicates, malformed names, unknown categories, empty or overlong text, and
any value that is not a bounded literal — no declaration terminator, rule
block, comment, at-rule, `url(`, `!important`, escape, control character, or
markup. A registry that constructs can therefore be emitted as CSS without
escaping, because nothing needing escaping can be in it. That validation is
also what makes a future theme editor implementable rather than aspirational.
Add `@ekklesia/ui`: button, icon button, text input, select, checkbox, field
wrapper, panel, dialog, tabs, table and list primitives, badge, toast, and
empty/error/loading states — every value a token reference, with real
`:focus-visible` treatment and status that never depends on colour alone.
Deliberately small: an element earns its place when two consumers need it.
The stylesheet is a string rather than a `.css` file so the identical bytes
install into a document or an isolated artifact root, and so hover, disabled,
and focus-visible are real CSS rather than JavaScript approximations of them.
`pnpm boundaries` opens exactly two shared roles to modules, by name — every
other role stays rejected — and pins both design packages to the bottom of the
presentation stack. Both are browser-safe by construction, proven by a real
compile of module-shaped source in which `process.env` must fail to typecheck.
The shell installs the defaults at its document root for the Dashboard and the
display; custom properties inherit into module artifacts, so a module reads
`var(--ekklesia-…)` with nothing to import at run time and nothing for a host
to forget to pass.
Co-Authored-By: Claude Opus 5 <[email protected]>
