agw/Weircon-wind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Status tags, output box and layout helpers

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+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`) |
adapters/tailwind.css
+1
View File
@@ -26,6 +26,7 @@
--color-accent-ink: #06121c;
--color-good: #7dffa8;
--color-bad: #ff8ba0;
--color-warn: #fbbf24;
}
html[data-theme="light"] {
weirsoe-theme.css
+20
View File
@@ -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 {