ekklesiaandClaude Opus 5.5
d42b64a093
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]>
34 lines
1.6 KiB
HTML
34 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en" style="min-width: 0; scrollbar-gutter: stable">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
|
<!-- The API's origin (ADR 0045). The API serving this page fills it in at startup; empty means
|
|
this page's own origin, the same-origin topology. Never an inline script, so a strict
|
|
script-src needs no exception for it. -->
|
|
<meta content="" name="ekklesia-api-origin" />
|
|
<!-- Light and dark are both supported (ADR 0060). The browser paints its own canvas in the
|
|
system's scheme before any script runs, so a dark system never flashes white first. -->
|
|
<meta content="light dark" name="color-scheme" />
|
|
<title>Ekklesia</title>
|
|
</head>
|
|
<body
|
|
style="
|
|
margin: 0;
|
|
min-width: 0;
|
|
background: var(--ekklesia-background-page);
|
|
color: var(--ekklesia-text-primary);
|
|
"
|
|
>
|
|
<!-- The shell's root. A module UI never receives this element: it is given a container the
|
|
shell creates inside its own layout. -->
|
|
<div id="ekklesia-host"></div>
|
|
<!-- A real module script, from the same origin, with no inline script anywhere on the page:
|
|
a deployment can therefore apply a strict script-src without exceptions, and the runtime
|
|
`import()` of a published module artifact stays same-origin under it. The path is absolute
|
|
and fixed, exactly like the display host's, so it names one host-owned route rather than a
|
|
file relative to whatever URL served the page. -->
|
|
<script src="/assets/ekklesia-dashboard/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|