| 71 |
71 |
|
|
| 72 |
72 |
|
| Primitive | Canonical class | Variants | Notes |
|
| 73 |
73 |
|
|---|---|---|---|
|
| 74 |
|
- |
| Container | `.container` | `--narrow` (600px), `--medium` (800px), `--wide` (900px) | Default `max-width: 1200px` |
|
|
74 |
+ |
| Container | `.container` | width set by the page's body class, one rule per tier in `style.css` | Default `max-width: 1200px` |
|
| 75 |
75 |
|
| Toolbar / header bar | `.stack-row` | `--bordered`, `--tight`, `--top` | Title-left + actions-right |
|
| 76 |
76 |
|
| Inline form row | `.field-row` | child `.form-group.is-grow` / `.is-grow-2` | Input(s) + button bottom-aligned |
|
| 77 |
77 |
|
| Vertical list row | `.list-row` | parts: `-title`, `-meta` | Flex with bottom border |
|
| 91 |
91 |
|
| Section lead | `.section-lead` | with `.mb-section` / `.text-sm` / `.dimmed` utilities | — |
|
| 92 |
92 |
|
| Section divider | `.section-divider` | — | — |
|
| 93 |
93 |
|
| Section grouping label | `.section-group-label` | — | — |
|
| 94 |
|
- |
| Badge | `.badge` | `.badge-success`, `.badge-warning`, `.badge-danger`, `.free` | `.is-selected`, `.is-faded`, `.active` (= completion, not selection) |
|
|
94 |
+ |
| Badge | `.badge` | `.badge-success`, `.free`, plus state classes `.pending` / `.draft` / `.failed` | `.is-selected`, `.is-faded`, `.active` (= completion, not selection) |
|
| 95 |
95 |
|
| Tag | `.tag` (inside `.tag-input` for editing) | — | — |
|
| 96 |
96 |
|
| Callout (solid-tint inline) | `.callout` | `--danger`, `--warning`, `--solid-warning` | — |
|
| 97 |
97 |
|
| Alert (left-border inline) | `.alert` | `-note`, `-tip`, `-important`, `-warning`, `-caution` | — |
|
| 100 |
100 |
|
| Confirm dialog | `_ui.html` macro `confirm_dialog` | — | — |
|
| 101 |
101 |
|
| Toast | `partials/toast.html` → `.toast` | `--success`, `--error`, `--warning` | — |
|
| 102 |
102 |
|
| Empty state | `.empty-state` (or `_ui.html` macro) | `--compact`, `--chart`, `--lg` | — |
|
| 103 |
|
- |
| Loading skeleton | `partials/loading_skeleton.html` | row, card, list | — |
|
| 104 |
103 |
|
| Progress bar | `.progress-bar-container` + `.progress-bar` | `--slim` (6px), `--rounded`, `.progress-bar--highlight` (purple, default green) | — |
|
| 105 |
104 |
|
| Upload status block | `.upload-status` + `-row` | `-msg.is-success`, `-msg.is-error` | — |
|
| 106 |
105 |
|
| Status pill | `.field-status` / `.save-status` | `.success`, `.error`, `.saving` | — |
|
| 109 |
108 |
|
| Breadcrumb | `.breadcrumb` | — | — |
|
| 110 |
109 |
|
| Pagination | `_ui.html` macro `pagination` → `.pagination` | — | `.active` |
|
| 111 |
110 |
|
|
| 112 |
|
- |
Tokens, the four parameterized macros (`empty_state`, `loading_skeleton`, `form_field`, `confirm_dialog`, `pagination`), and the consolidation pass have all shipped. Tokens live in `static/style.css` `:root`. Macros are in `templates/partials/_ui.html`.
|
|
111 |
+ |
Tokens, the four parameterized macros (`empty_state`, `form_field`, `confirm_dialog`, `pagination`), and the consolidation pass have all shipped. Tokens live in `static/style.css` `:root`. Macros are in `templates/partials/_ui.html`.
|
| 113 |
112 |
|
|
| 114 |
113 |
|
### Composition guide for new features
|
| 115 |
114 |
|
|
| 154 |
153 |
|
- **Focus**: `:focus-visible` shows the `--focus-ring` violet outline. Custom interactive containers (`.type-card`, `.pricing-card`, sort headers) must opt in by adding `:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }`.
|
| 155 |
154 |
|
- **Selected / active**: `.is-selected` modifier applies `background: var(--highlight-faint)` plus the focus-ring border. Migrate `.tab.active`, `.filter-item.active`, `.view-btn.active`, `.badge.active`, and the `:checked + .type-card-inner` recipe onto this single class.
|
| 156 |
155 |
|
- **Disabled**: `:disabled` and `[aria-disabled="true"]` show `opacity: 0.5` and `cursor: not-allowed`.
|
| 157 |
|
- |
- **Busy / loading**: HTMX-driven via `.htmx-request` on the trigger, plus a `partials/loading_skeleton.html` for content placeholders.
|
|
156 |
+ |
- **Busy / loading**: HTMX-driven via `.htmx-request` on the trigger. There is no skeleton primitive: one was documented here for months and never built, so it was removed rather than left as a promise.
|
| 158 |
157 |
|
|
| 159 |
158 |
|
## Page-level layouts
|
| 160 |
159 |
|
|
| 161 |
160 |
|
- `.padded-page`: standard content padding (`1.5rem`).
|
| 162 |
161 |
|
- `.centered-page`: landing / login / signup vertical-center layout.
|
| 163 |
|
- |
- `.container` + `--narrow` / `--medium` / `--wide` modifiers.
|
|
162 |
+ |
- `.container`, whose width comes from the page's body class. One rule per width tier in `style.css`; a new page adds its body class there rather than a new modifier.
|
| 164 |
163 |
|
- Wizard layout in `static/wizard.css` (`.wizard-layout` + `.wizard-sidebar` + `.wizard-content`).
|
| 165 |
164 |
|
- Media layout in `static/media-player.css` (`.media-container`).
|
| 166 |
165 |
|
|