Status tags, output box and layout helpers

Adds --color-warn, .wt-tag--good/--warn/--bad/--accent (tinted surface,
theme text, readable in every palette), .wt-pre for logs and terminal
captures, and .wt-row/.wt-stack so small apps need no own CSS.

Claude-Session: https://claude.ai/code/session_01QhLkBGEip8wQdaZ54z4AqJ
This commit is contained in:
agw
2026-10-20 17:35:25 +02:00
parent 86086de662
commit 9ac6a69d8a
3 changed files with 25 additions and 1 deletions
+4 -1
View File
@@ -56,7 +56,7 @@ card-styled. `wish.weircon.dk` (Christmas-Community fork) consumes it this way.
`--color-bg --color-surface --color-surface-2 --color-surface-3 --color-border
--color-text --color-muted --color-accent --color-accent-2 --color-accent-ink
--color-good --color-bad`, plus `--wt-radius --wt-radius-sm --wt-shadow
--color-good --color-bad --color-warn`, plus `--wt-radius --wt-radius-sm --wt-shadow
--wt-shadow-hover --wt-font-sans --wt-font-mono`.
Override any of them in your own `:root` to re-skin without forking.
@@ -74,6 +74,9 @@ Semantic classes so a site can drop hand-written CSS entirely:
| `.wt-card` (`--hover` `--raised` `--link`) + `.wt-card-date/-title/-desc` | post/list card |
| `.wt-chip` | pill tag-link |
| `.wt-btn` (`--primary`) / `.wt-input` / `.wt-tag` / `.wt-muted` | controls |
| `.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 |
| `.prose` | long-form markdown |
| `.theme-toggle` + `.sun-and-moon` | the sun⇄moon toggle (wire with `weirsoe-theme.js`) |