feat(web): Pressing Plant design tokens + self-hosted Fraunces

globals.css defines the manila/spruce palette as CSS custom properties for both themes (prefers-color-scheme + explicit data-theme override), paper grain, base reset, focus-visible, reduced-motion. Fraunces vendored as woff2 and wired via next/font/local with a Palatino/Georgia fallback. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-12 14:09:30 +02:00
parent 5f0dcda2ab
commit e1d96aa603
3 changed files with 88 additions and 0 deletions
@@ -0,0 +1,11 @@
+import localFont from "next/font/local";
+
+// Fraunces — a warm, optical variable serif (Fontsource, latin wght axis).
+// Self-hosted so the container build needs no network and the CSP never bites.
+export const fraunces = localFont({
+  src: "../fonts/Fraunces.woff2",
+  variable: "--font-fraunces",
+  weight: "100 900",
+  display: "swap",
+  fallback: ["Palatino Linotype", "Palatino", "Book Antiqua", "Georgia", "serif"],
+});
@@ -0,0 +1,77 @@
+/* Lyra — "Pressing Plant" design tokens + base.
+   Two-color print: manila/kraft paper + warm ink + one deep spruce accent.
+   Tokens live on :root; both themes get equal care. Style components through
+   tokens only — never inside a media query. */
+
+:root {
+  /* Day pressing (light) */
+  --paper:      #E7DFCC;
+  --paper-2:    #DED5BE;
+  --ink:        #1B1A17;
+  --graphite:   #726D5F;
+  --rule:       rgba(27, 26, 23, 0.16);
+  --rule-2:     rgba(27, 26, 23, 0.30);
+  --accent:     #1F5138;
+  --accent-ink: #F3EEDF;
+  --live:       #9A6B1E; /* semantic: work in progress */
+  --alert:      #99392B; /* semantic: needs attention */
+
+  --serif: var(--font-fraunces), "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
+  --mono:  ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
+
+  --shell: 900px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Night pressing (dark) — vinyl-black ground */
+    --paper:      #14130F;
+    --paper-2:    #1D1B16;
+    --ink:        #E9E1CD;
+    --graphite:   #938C7B;
+    --rule:       rgba(233, 225, 205, 0.16);
+    --rule-2:     rgba(233, 225, 205, 0.28);
+    --accent:     #5BB487;
+    --accent-ink: #10120F;
+    --live:       #D2A24E;
+    --alert:      #D8695A;
+  }
+}
+
+/* Explicit in-app toggle wins over the OS preference, in both directions. */
+:root[data-theme="light"] {
+  --paper: #E7DFCC; --paper-2: #DED5BE; --ink: #1B1A17; --graphite: #726D5F;
+  --rule: rgba(27,26,23,.16); --rule-2: rgba(27,26,23,.30);
+  --accent: #1F5138; --accent-ink: #F3EEDF; --live: #9A6B1E; --alert: #99392B;
+}
+:root[data-theme="dark"] {
+  --paper: #14130F; --paper-2: #1D1B16; --ink: #E9E1CD; --graphite: #938C7B;
+  --rule: rgba(233,225,205,.16); --rule-2: rgba(233,225,205,.28);
+  --accent: #5BB487; --accent-ink: #10120F; --live: #D2A24E; --alert: #D8695A;
+}
+
+* { box-sizing: border-box; }
+
+html { color-scheme: light dark; }
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--serif);
+  /* faint paper grain */
+  background-image: radial-gradient(rgba(27, 26, 23, 0.025) 1px, transparent 1px);
+  background-size: 3px 3px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 28px 72px; }
+
+a { color: var(--accent); text-underline-offset: 3px; }
+
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+
+@media (prefers-reduced-motion: reduce) {
+  * { animation: none !important; transition: none !important; }
+}