agw
9ac6a69d8a
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
59 lines
1.8 KiB
CSS
59 lines
1.8 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"; // base/glow, toggle, prose, .wt-*
|
|
|
|
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;
|
|
}
|