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

README.md

@@ -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 |

adapters/tailwind.css

@@ -7,7 +7,10 @@
 
      @import "tailwindcss";
      @import ".../adapters/tailwind.css";   // tokens
-     @import ".../weirsoe-theme.css";        // base/glow, toggle, prose, .wt-*
+     @import ".../weirsoe-theme.css" layer(components);  // base/glow, toggle, prose, .wt-*
+
+   layer(components) puts the .wt-* classes below Tailwind's utilities, so a
+   utility on the same element (pl-9, font-mono, p-0) still wins.
 
    Font is intentionally NOT set here (consumer-specific). Token VALUES mirror
    weirsoe-theme.css — keep the two in sync.

examples/demo.html

@@ -37,6 +37,17 @@
       <button class="wt-btn" onclick="weirsoeTheme.set('terminal')">terminal-tema</button>
     </div>
 
+    <div class="row" style="margin-bottom:1.5rem">
+      <button class="wt-btn wt-btn--primary wt-btn--lg">Stor primær</button>
+      <input class="wt-input wt-input--lg" placeholder="Samme højde">
+      <button class="wt-btn wt-btn--ghost wt-btn--sm" aria-pressed="true">Alle</button>
+      <button class="wt-btn wt-btn--ghost wt-btn--sm" aria-pressed="false">Filter</button>
+      <span class="wt-tag wt-tag--accent">fremhævet</span>
+      <span>Søg: <kbd class="wt-kbd">Ctrl K</kbd></span>
+    </div>
+
+    <div class="wt-dropzone" style="margin-bottom:1.5rem">Slip en fil her</div>
+
     <div class="grid">
       <div class="wt-card wt-card--hover"><h2>Ønske</h2><p class="wt-muted">Et kort med hover-løft.</p></div>
       <div class="wt-card wt-card--hover"><h2>Liste</h2><p class="wt-muted">Kort-baseret layout.</p></div>

weirsoe-theme.css

@@ -168,6 +168,18 @@ body::before {
 .wt-card-title { margin-top: 0.25rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
 .wt-card--link:hover .wt-card-title, a.wt-card--hover:hover .wt-card-title { color: var(--color-accent); }
 .wt-card-desc { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-muted); }
+.wt-card--compact { padding: 0.5rem 0.75rem; border-radius: var(--wt-radius-sm); }
+/* flush: content touches the edge (a table or list inside the card) */
+.wt-card--flush { padding: 0; overflow: hidden; }
+/* alt: the second voice next to plain cards, e.g. the user's side of a chat */
+.wt-card--alt { background: var(--color-surface-2); }
+/* file drop area; add .is-over while a file is dragged over it */
+.wt-dropzone {
+  border: 1px dashed var(--color-border); border-radius: 1rem; padding: 2rem; text-align: center;
+  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
+  transition: border-color 0.2s, background-color 0.2s;
+}
+.wt-dropzone.is-over { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
 
 /* Drag-and-drop sortable lists (paired with weirsoe-ui.js). Mark the container
    with [data-wt-sortable] + data-order-url; children need [data-item-id]; add a
@@ -212,6 +224,18 @@ body::before {
 .wt-btn:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); }
 .wt-btn--primary { background: var(--color-accent); border-color: transparent; color: var(--color-accent-ink); font-weight: 650; }
 .wt-btn--primary:hover { filter: brightness(1.08); }
+.wt-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
+/* sizes: --sm for filter rows and toolbars, --lg for calls to action (same height as .wt-input--lg) */
+.wt-btn--sm { padding: 0.35rem 0.8rem; font-size: 0.85rem; gap: 0.35rem; }
+.wt-btn--lg { padding: 0.625rem 1.25rem; border-radius: var(--wt-radius); }
+/* ghost: no fill and muted text until hovered (secondary actions, filter rows) */
+.wt-btn--ghost { background: transparent; color: var(--color-muted); }
+.wt-btn--ghost:hover { color: var(--color-text); }
+/* toggle state for filter and segment buttons: aria-pressed="true" (or .is-active) */
+.wt-btn[aria-pressed="true"], .wt-btn.is-active {
+  background: var(--color-surface-2); color: var(--color-text);
+  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
+}
 .wt-input {
   background: var(--color-surface-2);
   border: 1px solid var(--color-border);
@@ -221,6 +245,7 @@ body::before {
 }
 .wt-input::placeholder { color: color-mix(in srgb, var(--color-muted) 80%, transparent); }
 .wt-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent); }
+.wt-input--lg { padding: 0.625rem 1rem; border-radius: var(--wt-radius); }
 .wt-tag {
   display: inline-flex; align-items: center;
   padding: 0.15rem 0.6rem; border-radius: 999px;
@@ -228,6 +253,11 @@ body::before {
   color: var(--color-text); font-size: 0.8rem;
 }
 .wt-muted { color: var(--color-muted); }
+/* keyboard key, e.g. a shortcut hint */
+.wt-kbd {
+  display: inline-block; padding: 0.05rem 0.4rem; border: 1px solid var(--color-border); border-radius: 0.3rem;
+  background: var(--color-surface-2); color: var(--color-text); font: 0.7rem/1.4 var(--wt-font-mono);
+}
 /* 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);