From 9ac6a69d8a438c629d030b8ce9d4f7cc758a5da4 Mon Sep 17 00:00:00 2001
From: Asger Geel Weirsoee <asger@weircon.dk>
Date: Tue, 20 Oct 2026 17:35:25 +0200
Subject: [PATCH] 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
---
 README.md             |  5 ++++-
 adapters/tailwind.css |  1 +
 weirsoe-theme.css     | 20 ++++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c6543bf..7432210 100644
--- a/README.md
+++ b/README.md
@@ -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`) |
 
diff --git a/adapters/tailwind.css b/adapters/tailwind.css
index 95043f7..0f3d851 100644
--- a/adapters/tailwind.css
+++ b/adapters/tailwind.css
@@ -26,6 +26,7 @@
   --color-accent-ink: #06121c;
   --color-good: #7dffa8;
   --color-bad: #ff8ba0;
+  --color-warn: #fbbf24;
 }
 
 html[data-theme="light"] {
diff --git a/weirsoe-theme.css b/weirsoe-theme.css
index 9135ace..8d83aa9 100644
--- a/weirsoe-theme.css
+++ b/weirsoe-theme.css
@@ -24,6 +24,7 @@
   --color-accent-ink: #06121c;
   --color-good: #7dffa8;
   --color-bad: #ff8ba0;
+  --color-warn: #fbbf24;
 
   --wt-radius: 0.85rem;
   --wt-radius-sm: 0.55rem;
@@ -225,6 +226,25 @@ body::before {
   color: var(--color-text); font-size: 0.8rem;
 }
 .wt-muted { color: var(--color-muted); }
+/* status tags: tinted surface + coloured edge, text stays theme text so it reads in every palette */
+.wt-tag--good, .wt-tag--warn, .wt-tag--bad, .wt-tag--accent {
+  --wt-tag-tone: var(--color-accent);
+  background: color-mix(in srgb, var(--wt-tag-tone) 16%, var(--color-surface));
+  border-color: color-mix(in srgb, var(--wt-tag-tone) 55%, var(--color-border));
+}
+.wt-tag--good { --wt-tag-tone: var(--color-good); }
+.wt-tag--warn { --wt-tag-tone: var(--color-warn); }
+.wt-tag--bad { --wt-tag-tone: var(--color-bad); }
+/* layout helpers: a wrapping row and a vertical stack with the theme gap */
+.wt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.wt-row--between { justify-content: space-between; }
+.wt-stack { display: grid; gap: 0.75rem; }
+/* monospace output box (logs, terminal captures); keeps columns, scrolls sideways */
+.wt-pre {
+  margin: 0; padding: 0.75rem 0.9rem; overflow-x: auto; white-space: pre;
+  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--wt-radius-sm);
+  font: 0.75rem/1.35 var(--wt-font-mono); color: var(--color-text);
+}
 
 /* ---------- theme toggle (sun ⇄ moon), used by weirsoe-theme.js ---------- */
 .theme-toggle {