Diagrams
Pele × Actual CSS
A small <pele-diagram> web component hands Mermaid
text to pele, loaded from CDN, which draws SVG themed with
Actual CSS tokens. Switch themes and watch the diagrams follow without a
re-render.
Event history — HTML, no library
A list of what happened, with links and actions in it, is content:
.timeline keeps it in the DOM, selectable and
accessible without JavaScript.
- Ada Morgan confirmed the pilot schedule.
- Booking flow merged.
- Patient portal estimate raised by a week.
Chronology — a timeline diagram
Periods and milestones laid out graphically: a drawing, not a list
to interact with. Sections take a palette turned from
--primary.
Planning — a Gantt chart
Critical tasks take --danger through
--pele-critical; the rest follows the surface tokens.
Process — a flowchart
Nodes fill with --surface-subtle, edges take
--text-muted, corners follow --radius.
Which one?
- Events a reader scans, follows links from or acts on:
.timeline. - A chronology, a schedule or a process to look at: a Pele diagram on the token bridge.
- Progress through the steps of a flow:
.steps.