feat(theme): Light/Dark/System, reduced motion, and one radius scale
CI / verify (pull_request) Successful in 1m10s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 52s
CI / migration-smoke (pull_request) Successful in 2m20s
CI / image-build (pull_request) Successful in 1m5s
CI / deploy-smoke (same-origin) (pull_request) Successful in 50s
CI / package-publication (pull_request) Successful in 58s
CI / deploy-smoke (split) (pull_request) Successful in 2m38s
CI / verify (pull_request) Successful in 1m10s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 52s
CI / migration-smoke (pull_request) Successful in 2m20s
CI / image-build (pull_request) Successful in 1m5s
CI / deploy-smoke (same-origin) (pull_request) Successful in 50s
CI / package-publication (pull_request) Successful in 58s
CI / deploy-smoke (split) (pull_request) Successful in 2m38s
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]>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
e3e2a901a7
commit
d42b64a093
@@ -895,6 +895,28 @@ The host installs the default token values at its own root, and CSS custom prope
|
||||
through an isolated artifact's boundary — so the tokens are simply there, with nothing to import at
|
||||
run time and nothing for the host to hand you.
|
||||
|
||||
**Light, Dark, and System come with the tokens**
|
||||
([ADR 0060](../architecture/decisions/0060-light-dark-system-theme-and-motion.md)). The host decides
|
||||
the appearance, and the token values change under you — live when the person's system switches —
|
||||
inside your isolated root too. Your UI is themed for free as long as every colour it uses is a token:
|
||||
never assume a white background, black text, or one brand colour, and never set the appearance
|
||||
yourself. `color-scheme` follows as well, so native inputs and scrollbars match. Colours that
|
||||
represent *content* rather than interface — a preview of what a physical screen shows, an uploaded
|
||||
image — are yours to keep literal.
|
||||
|
||||
**Animate for a motion token, not a literal duration.** `motion.duration-short` (transitions) and
|
||||
`motion.duration-ambient` (a gentle, continuous indication) are zero when motion is reduced — by the
|
||||
system or by the person's preference — so an animation that uses them needs no
|
||||
`prefers-reduced-motion` rule of its own, and honours an explicit "allow motion" that such a rule
|
||||
would ignore:
|
||||
|
||||
```css
|
||||
.calendar-panel { transition: opacity var(--ekklesia-motion-duration-short) ease; }
|
||||
```
|
||||
|
||||
**Round corners with `radius.sm`, `radius.md`, or `radius.lg`.** They scale together from one
|
||||
`radius.scale` value, so a church's chosen roundness reaches your UI without you changing anything.
|
||||
|
||||
Every other shared package stays rejected inside a module: `@ekklesia/api-client`,
|
||||
`@ekklesia/auth-client`, `@ekklesia/surface-sdk`, and `@ekklesia/module-ui-host` are not yours to
|
||||
import, and `pnpm boundaries` says so.
|
||||
|
||||
Reference in New Issue
Block a user