feat: reusable app-shell primitives (tile/grid/stat/field/flash/table/segment/select-card/palette)

This commit is contained in:
agw
2026-06-15 11:53:47 +02:00
parent 4388f02f18
commit ec84e68161
2 changed files with 159 additions and 0 deletions
+17
View File
@@ -77,6 +77,23 @@ Semantic classes so a site can drop hand-written CSS entirely:
| `.prose` | long-form markdown |
| `.theme-toggle` + `.sun-and-moon` | the sun⇄moon toggle (wire with `weirsoe-theme.js`) |
### App-shell primitives
Reusable building blocks for dashboard/admin UIs (used by `weircon.dk`):
| Class | What |
|---|---|
| `.wt-grid` (`--tight`) | auto-fill responsive card grid |
| `.wt-tile` (`--hover`) + `.wt-tile-head/-ico/-name/-sub/-go` | icon launch card (app launcher) |
| `.wt-stat` + `.wt-stat-n/-label` | big-number stat card |
| `.wt-lead` | muted lead paragraph |
| `.wt-field` + `.wt-field-ico` (wraps `.wt-input`) | search input with leading icon |
| `.wt-flash` (`--error`) | notice / flash banner |
| `.wt-table` | bordered data table |
| `.wt-toolbar` / `.wt-segment` (`button.is-on`) | toolbar + segmented toggle |
| `.wt-select-card` + `-ini/-body/-name/-sub/-chk` | selectable (checkbox) card |
| `.wt-palette` + `-box/-input/-list/-item/-badge/-hint` | ⌘K command palette |
These mirror, 1:1, the chrome of `agw/pw` (asger.weirsøe.dk) — the goal is for
that site to delete `src/styles/global.css` + its inline utility soup and
`@import` this framework instead. Also set the browser UI colour in `<head>`: