Asger Geel Weirsøe
495acc9155
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
62 lines
1.9 KiB
CSS
62 lines
1.9 KiB
CSS
/* ============================================================================
|
|
weirsoe-theme — Tailwind v4 adapter.
|
|
@import AFTER "tailwindcss" so Tailwind generates colour utilities
|
|
(bg-surface, text-muted, border-border, text-accent…) from the shared tokens
|
|
— the SSOT for Tailwind-based sites (e.g. asger.weirsøe.dk). Dark is the
|
|
@theme default; light/terminal are runtime [data-theme] overrides.
|
|
|
|
@import "tailwindcss";
|
|
@import ".../adapters/tailwind.css"; // tokens
|
|
@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.
|
|
========================================================================== */
|
|
|
|
@theme {
|
|
--color-bg: #0b0f17;
|
|
--color-surface: #121a27;
|
|
--color-surface-2: #182232;
|
|
--color-surface-3: #1d293b;
|
|
--color-border: #243044;
|
|
--color-text: #e6e9ef;
|
|
--color-muted: #97a3b6;
|
|
--color-accent: #38bdf8;
|
|
--color-accent-2: #818cf8;
|
|
--color-accent-ink: #06121c;
|
|
--color-good: #7dffa8;
|
|
--color-bad: #ff8ba0;
|
|
--color-warn: #fbbf24;
|
|
}
|
|
|
|
html[data-theme="light"] {
|
|
color-scheme: light;
|
|
--color-bg: #f6f8fb;
|
|
--color-surface: #ffffff;
|
|
--color-surface-2: #eef2f8;
|
|
--color-surface-3: #e6ecf5;
|
|
--color-border: #dde4ee;
|
|
--color-text: #0f1729;
|
|
--color-muted: #54617a;
|
|
--color-accent: #0284c7;
|
|
--color-accent-2: #4f46e5;
|
|
--color-accent-ink: #ffffff;
|
|
}
|
|
|
|
html[data-theme="terminal"] {
|
|
color-scheme: dark;
|
|
--color-bg: #050a06;
|
|
--color-surface: #0a140c;
|
|
--color-surface-2: #102012;
|
|
--color-surface-3: #16331c;
|
|
--color-border: #1d3a22;
|
|
--color-text: #4bff7e;
|
|
--color-muted: #2fae57;
|
|
--color-accent: #7dffa8;
|
|
--color-accent-2: #33cc77;
|
|
--color-accent-ink: #04130a;
|
|
}
|