# weirsoe-theme

A tiny, framework-agnostic dark/light **design system** — the look from
[asger.weirsøe.dk](https://asger.weirsøe.dk), extracted so it can be reused
across sites.

- **Card-based**, deep-navy surfaces with a subtle blue/indigo glow.
- **Three palettes**: `dark` (default), `light`, `terminal` (green CRT).
- **Pure CSS**, **system fonts** by default → great TTFB, **no external
  requests, no trackers, no build step**.
- Use the **CSS variables** directly, the **`.wt-*` components**, or the
  **Bulma adapter** to theme an existing Bulma site without touching markup.

## Files

| File | What |
|---|---|
| `weirsoe-theme.css` | Tokens (`--color-*`) + base (glow, selection, transitions) + `.wt-card/.wt-btn/.wt-input/.wt-tag` + `.prose` + theme-toggle styles |
| `weirsoe-theme.js` | Persisted dark⇄light toggle + a no-flash snippet |
| `weirsoe-ui.js` | Drag-and-drop sortable lists (`[data-wt-sortable]` + `data-order-url`, clean drag image) + copy-to-clipboard (`[data-copy-link]`) |
| `adapters/bulma.css` | Maps Bulma classes → tokens (for Bulma sites) |
| `examples/demo.html` | Standalone preview |

## Quick start (vanilla)

```html
<head>
  <!-- no-flash: set the theme before the stylesheet paints -->
  <script>try{document.documentElement.dataset.theme=localStorage.getItem('wt-theme')||'dark'}catch(e){document.documentElement.dataset.theme='dark'}</script>
  <link rel="stylesheet" href="/weirsoe-theme.css">
  <script defer src="/weirsoe-theme.js"></script>
</head>
<body>
  <div class="wt-card wt-card--hover">
    <h2>Et kort</h2>
    <p class="wt-muted">Med weirsoe-theme.</p>
    <button class="wt-btn wt-btn--primary">Knap</button>
  </div>
</body>
```

## Theming an existing Bulma site

Load the adapter **after** Bulma and **after** `weirsoe-theme.css`:

```html
<link rel="stylesheet" href="/bulma.min.css">
<link rel="stylesheet" href="/weirsoe-theme.css">       <!-- tokens + base -->
<link rel="stylesheet" href="/adapters/bulma.css">      <!-- maps Bulma → tokens -->
```

Your existing `.box`, `.button`, `.input`, `.tag`, `.navbar`… are now dark and
card-styled. `wish.weircon.dk` (Christmas-Community fork) consumes it this way.

## Tokens

`--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 --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.

## Components

Semantic classes so a site can drop hand-written CSS entirely:

| Class | What |
|---|---|
| `.wt-header` / `.wt-nav` / `.wt-brand` `.wt-brand-dot` | sticky blurred header + centred nav bar + wordmark |
| `.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` `--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` `--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 |
| `.prose` | long-form markdown |
| `.theme-toggle` + `.sun-and-moon` | the sun⇄moon toggle (wire with `weirsoe-theme.js`) |

These mirror, 1:1, the chrome of `agw/pw` (asger.weirsøe.dk) — the goal is for
that site to delete `src/styles/global.css` + its inline utility soup and
`@import` this framework instead. Also set the browser UI colour in `<head>`:

```html
<meta name="theme-color" content="#0b0f17" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#f6f8fb" media="(prefers-color-scheme: light)">
```

## Theme switching

Set `data-theme` on `<html>`: `dark` (default), `light`, or `terminal`.
`weirsoe-theme.js` wires any `[data-theme-toggle]` button to cycle dark⇄light and
persists the choice in `localStorage` (`wt-theme`). For a 3-way picker call
`weirsoeTheme.set('terminal')`.

## Notes

- Want pixel-exact Inter (like asger.weirsøe.dk)? Self-host
  `@fontsource-variable/inter` and set `--wt-font-sans: "Inter Variable", …`.
  The default system stack is used to keep TTFB optimal and avoid font requests.
- Source: the design originated in `agw/asger-web` (`src/styles/global.css`).