feat(theme): adopt shared weirsoe-theme via submodule + Tailwind token adapter — dedupe tokens/toggle/prose/glow, keep Tailwind layer
Build & Deploy / deploy (push) Successful in 1m52s

This commit is contained in:
Asger Geel Weirsøe
2026-06-15 13:44:34 +02:00
parent da43c1bdc0
commit 72ac103d63
3 changed files with 15 additions and 92 deletions
+12 -92
View File
@@ -1,102 +1,22 @@
@import "tailwindcss";
@import "@fontsource-variable/inter";
/* Shared design system (SSOT: agw/Weircon-wind, vendored as a submodule).
adapters/tailwind.css feeds the colour tokens into Tailwind's @theme so the
bg-surface / text-muted / border-border / text-accent utilities are generated
from the shared palette; weirsoe-theme.css adds the base glow, the sun⇄moon
toggle, .prose and the .wt-* components. Replaces the tokens/toggle/prose/glow
that used to live here by hand. */
@import "../../vendor/weirsoe-theme/adapters/tailwind.css";
@import "../../vendor/weirsoe-theme/weirsoe-theme.css";
/* asger keeps Inter as its UI font (the theme defaults to a system stack). */
@theme {
--color-bg: #0b0f17;
--color-surface: #121a27;
--color-surface-2: #182232;
--color-border: #243044;
--color-text: #e6e9ef;
--color-muted: #97a3b6;
--color-accent: #38bdf8;
--color-accent-2: #818cf8;
--font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* ---------- light theme ---------- */
html { color-scheme: dark; }
html[data-theme="light"] {
color-scheme: light;
--color-bg: #f6f8fb;
--color-surface: #ffffff;
--color-surface-2: #eef2f8;
--color-border: #dde4ee;
--color-text: #0f1729;
--color-muted: #54617a;
--color-accent: #0284c7;
--color-accent-2: #4f46e5;
}
/* ---------- terminal theme (vælges i ⌘K-paletten eller via konami-koden) ---------- */
html[data-theme="terminal"] {
color-scheme: dark;
--color-bg: #050a06;
--color-surface: #0a140c;
--color-surface-2: #102012;
--color-border: #1d3a22;
--color-text: #4bff7e;
--color-muted: #2fae57;
--color-accent: #7dffa8;
--color-accent-2: #33cc77;
--font-sans: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}
html { scroll-behavior: smooth; }
body { background-color: var(--color-bg); color: var(--color-text); }
/* smooth cross-fade when toggling theme (no flash on load: theme is set pre-paint) */
body, header, a, span, div, p, h1, h2, h3, li, ul, input, button, svg, section, article {
transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }
/* make the theme's body font follow asger's --font-sans (Inter / mono) */
:root { --wt-font-sans: var(--font-sans); }
a { color: inherit; }
/* subtle top-glow background */
body::before {
content: "";
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(60rem 30rem at 70% -10%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%),
radial-gradient(50rem 30rem at 10% 0%, color-mix(in srgb, var(--color-accent-2) 10%, transparent), transparent 70%);
}
/* ---------- animated theme toggle (sun ⇄ moon) ---------- */
.theme-toggle {
display: inline-grid; place-items: center;
width: 2.25rem; height: 2.25rem; border-radius: 0.75rem;
color: var(--color-muted); background: transparent; cursor: pointer;
border: 1px solid transparent;
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sun-and-moon > :is(.moon, .sun, .sun-beams) { transform-origin: center; }
.sun-and-moon > :is(.moon, .sun) { fill: currentColor; }
.sun-and-moon > .sun-beams { stroke: currentColor; stroke-width: 2px; }
.sun-and-moon > .sun { transition: transform .5s cubic-bezier(.5, 1.25, .75, 1.25); }
.sun-and-moon > .sun-beams { transition: transform .5s cubic-bezier(.5, 1.5, .75, 1.25), opacity .5s cubic-bezier(.25, 0, .3, 1); }
.sun-and-moon .moon > circle { transition: transform .25s cubic-bezier(0, 0, 0, 1); }
@supports (cx: 1) { .sun-and-moon .moon > circle { transition: cx .25s cubic-bezier(0, 0, 0, 1); } }
[data-theme="dark"] .sun-and-moon > .sun { transform: scale(1.75); transition-timing-function: cubic-bezier(.25, 0, .3, 1); transition-duration: .25s; }
[data-theme="dark"] .sun-and-moon > .sun-beams { opacity: 0; transform: rotateZ(-25deg); transition-duration: .15s; }
[data-theme="dark"] .sun-and-moon > .moon > circle { transform: translateX(-7px); transition-delay: .25s; transition-duration: .5s; }
@supports (cx: 1) { [data-theme="dark"] .sun-and-moon > .moon > circle { cx: 17; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .sun-and-moon * { transition: none !important; } }
/* ---------- markdown prose ---------- */
.prose { color: var(--color-text); line-height: 1.75; font-size: 1.05rem; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.6rem; font-weight: 700; margin-top: 2em; letter-spacing: -0.01em; }
.prose h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.6em; }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose code { background: var(--color-surface-2); padding: 0.15em 0.4em; border-radius: 0.35rem; font-size: 0.9em; }
.prose pre { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1rem 1.1rem; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-left: 3px solid var(--color-accent); padding-left: 1rem; color: var(--color-muted); font-style: italic; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose img { border-radius: 0.75rem; border: 1px solid var(--color-border); }
.prose hr { border-color: var(--color-border); }
.prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--color-border); padding: 0.5rem 0.7rem; text-align: left; }