feat(theme): adopt shared weirsoe-theme via submodule + Tailwind token adapter — dedupe tokens/toggle/prose/glow, keep Tailwind layer

.gitea/workflows/deploy.yml

@@ -10,6 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          submodules: recursive
 
       - name: Setup Node
         uses: actions/setup-node@v4

.gitmodules

@@ -1,3 +1,4 @@
 [submodule "vendor/weirsoe-theme"]
 	path = vendor/weirsoe-theme
 	url = ssh://gitea@gitea.weircon.dk:2222/agw/Weircon-wind.git
+	branch = main

src/styles/global.css

@@ -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;
 }
-
+/* make the theme's body font follow asger's --font-sans (Inter / mono) */
-html { scroll-behavior: smooth; }
+:root { --wt-font-sans: var(--font-sans); }
-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); }
-
 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; }