Button sizes, ghost and toggle state, compact/flush/alt cards, drop zone, kbd

Everything asger.weirsøe.dk still wrote by hand: call-to-action buttons,
filter buttons with aria-pressed, the big input next to them, compact and
table-wrapping cards, the chat's second voice, the file drop area and the
shortcut key. Additive only.

Claude-Session: https://claude.ai/code/session_012LCTmU2ewo8tnM1dByYAoG
This commit is contained in:
Asger Geel Weirsøe
2026-10-29 18:40:00 +01:00
parent b4cad8fef3
commit 495acc9155
4 changed files with 50 additions and 3 deletions
+5 -2
View File
@@ -71,9 +71,12 @@ Semantic classes so a site can drop hand-written CSS entirely:
| `.wt-nav-links` / `.wt-nav-link` (`.is-active` / `[aria-current=page]`) | nav link row |
| `.wt-main` | centred content column (= `.wt-container` + vertical padding) |
| `.wt-footer` / `.wt-footer-inner` | footer with border + responsive row |
| `.wt-card` (`--hover` `--raised` `--link`) + `.wt-card-date/-title/-desc` | post/list card |
| `.wt-card` (`--hover` `--raised` `--link` `--compact` `--flush` `--alt`) + `.wt-card-date/-title/-desc` | post/list card; compact = small item, flush = table inside, alt = second voice (chat) |
| `.wt-dropzone` (`.is-over`) | dashed file drop area |
| `.wt-chip` | pill tag-link |
| `.wt-btn` (`--primary`) / `.wt-input` / `.wt-tag` / `.wt-muted` | controls |
| `.wt-btn` (`--primary` `--ghost` `--sm` `--lg`) / `.wt-input` (`--lg`) / `.wt-tag` / `.wt-muted` | controls |
| `.wt-btn[aria-pressed=true]` / `.wt-btn.is-active` | toggle state for filter and segment buttons |
| `.wt-kbd` | keyboard key |
| `.wt-tag--good` / `--warn` / `--bad` / `--accent` | status tags (tinted, readable in every palette) |
| `.wt-pre` | monospace output box for logs / terminal captures |
| `.wt-row` (`--between`) / `.wt-stack` | wrapping flex row / vertical grid stack with the theme gap |