From 72ac103d635af80e6f0abb95e850fe7ed5b17571 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Asger=20Geel=20Weirs=C3=B8e?= Date: Mon, 15 Jun 2026 13:44:34 +0200 Subject: [PATCH] =?UTF-8?q?feat(theme):=20adopt=20shared=20weirsoe-theme?= =?UTF-8?q?=20via=20submodule=20+=20Tailwind=20token=20adapter=20=E2=80=94?= =?UTF-8?q?=20dedupe=20tokens/toggle/prose/glow,=20keep=20Tailwind=20layer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitea/workflows/deploy.yml | 2 + .gitmodules | 1 + src/styles/global.css | 104 +++++------------------------------- 3 files changed, 15 insertions(+), 92 deletions(-) diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml index 8412536..f671ec4 100644 --- a/.gitea/workflows/deploy.yml +++ b/.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 diff --git a/.gitmodules b/.gitmodules index 311ed3e..27bb0be 100644 --- a/.gitmodules +++ b/.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 diff --git a/src/styles/global.css b/src/styles/global.css index 38bb8e9..50bf612 100644 --- a/src/styles/global.css +++ b/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; } - -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; }