feat(ui): Design-Tokens, Schriften und Datumsformate (#002)

Die Farben des Tresor-Designs stehen als CSS-Variablen in :root und werden per @theme inline an Tailwind gereicht, damit Inline-SVGs und Utility-Klassen dieselbe Quelle nutzen. Schriften kommen selbst gehostet aus @fontsource, nur in den benutzten Gewichten und im Latin-Ausschnitt. src/lib/format.ts rechnet fest in Europe/Berlin: der Server laeuft im Container auf UTC, die Anzeige soll aber ueberall dieselbe Ortszeit zeigen. relativ() nimmt den Bezugspunkt als Parameter, damit statische Seiten und Tests deterministisch bleiben. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 09:20:22 +02:00
parent a11ae7eef3
commit 88b5697cc9
4 changed files with 301 additions and 1 deletions
@@ -1 +1,104 @@
@import "tailwindcss";
+
+/*
+ * Design „Tresor“ (#002): Graphit-Flächen, eine Markenfarbe (Messing), Monospace für alles
+ * Technische. Die Werte stehen als CSS-Variablen in :root, damit auch Inline-SVGs und
+ * Stile ausserhalb von Tailwind dieselben Tokens nutzen; @theme reicht sie an Tailwind
+ * weiter (bg-surface, text-muted, border-strong …).
+ *
+ * Es gibt bewusst nur den dunklen Modus. Ein heller folgt in einer eigenen Phase (PLAN §5).
+ */
+:root {
+  --bg: #0d1013;
+  --sidebar: #11151a;
+  --surface: #151a1f;
+  --raised: #1d232a;
+  --border: #222930;
+  --border-strong: #2a323b;
+  --text: #e8ecef;
+  --text-muted: #8b96a3;
+  --accent: #f0b43c;
+  --accent-soft: #3a2e14;
+  --ok: #3cc9a7;
+  --danger: #f2714b;
+  --danger-soft: #2a1814;
+  --danger-border: #6b3324;
+  --info: #6aa8ff;
+
+  --schrift-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --schrift-text: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+  --schrift-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
+
+  --seitenleiste-breite: 248px;
+
+  color-scheme: dark;
+}
+
+/* inline: Tailwind-Klassen verweisen auf die Variablen statt die Werte zu kopieren. */
+@theme inline {
+  --color-bg: var(--bg);
+  --color-sidebar: var(--sidebar);
+  --color-surface: var(--surface);
+  --color-raised: var(--raised);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-text: var(--text);
+  --color-muted: var(--text-muted);
+  --color-accent: var(--accent);
+  --color-accent-soft: var(--accent-soft);
+  --color-ok: var(--ok);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-danger-border: var(--danger-border);
+  --color-info: var(--info);
+
+  --font-display: var(--schrift-display);
+  --font-sans: var(--schrift-text);
+  --font-mono: var(--schrift-mono);
+
+  --radius-karte: 16px;
+  --radius-box: 12px;
+  --radius-feld: 10px;
+}
+
+@layer base {
+  html {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--schrift-text);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    min-height: 100dvh;
+    background: var(--bg);
+    font-size: 15px;
+    line-height: 1.5;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-family: var(--schrift-display);
+    letter-spacing: -0.01em;
+  }
+
+  /* Fokus immer sichtbar und in Messing – auch auf Elementen ohne eigenen Fokusstil. */
+  :focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 6px;
+  }
+
+  ::selection {
+    background: var(--accent-soft);
+    color: var(--text);
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}