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;
+  }
+}
@@ -1,10 +1,27 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import type { ReactNode } from "react";
+
+// Schriften selbst gehostet (#002): keine CDNs, nur die Gewichte, die das Design nutzt,
+// und nur der Latin-Ausschnitt (enthält die deutschen Umlaute und ß).
+import "@fontsource/space-grotesk/latin-500.css";
+import "@fontsource/space-grotesk/latin-600.css";
+import "@fontsource/space-grotesk/latin-700.css";
+import "@fontsource/ibm-plex-sans/latin-400.css";
+import "@fontsource/ibm-plex-sans/latin-500.css";
+import "@fontsource/ibm-plex-sans/latin-600.css";
+import "@fontsource/jetbrains-mono/latin-400.css";
+import "@fontsource/jetbrains-mono/latin-500.css";
 import "./globals.css";

 export const metadata: Metadata = {
  title: { default: "SSHKeyVault", template: "%s · SSHKeyVault" },
  description: "Zentrale Verwaltung von SSH-Schlüsseln",
+  applicationName: "SSHKeyVault",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#0D1013",
+  colorScheme: "dark",
 };

 export default function RootLayout({ children }: { children: ReactNode }) {
@@ -0,0 +1,89 @@
+/**
+ * Datums- und Zeitformate der Oberfläche (#002): TT.MM.JJJJ, 24-h-Zeit, deutsch.
+ *
+ * Die Zeitzone ist fest Europe/Berlin und nicht die des Prozesses: Server (UTC im
+ * Container) und Browser sollen dieselbe Zeit anzeigen, sonst springen Zeitstempel
+ * zwischen Server- und Client-Rendering um Stunden.
+ */
+
+export const ZEITZONE = "Europe/Berlin";
+
+type Eingabe = Date | string | number;
+
+const DATUM = new Intl.DateTimeFormat("de-DE", {
+  timeZone: ZEITZONE,
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric",
+});
+
+const UHRZEIT = new Intl.DateTimeFormat("de-DE", {
+  timeZone: ZEITZONE,
+  hour: "2-digit",
+  minute: "2-digit",
+  hourCycle: "h23",
+});
+
+function alsDatum(wert: Eingabe): Date {
+  const d = wert instanceof Date ? wert : new Date(wert);
+  if (Number.isNaN(d.getTime())) throw new RangeError(`Ungültiges Datum: ${String(wert)}`);
+  return d;
+}
+
+/** „12.10.2026“ */
+export function datum(wert: Eingabe): string {
+  return DATUM.format(alsDatum(wert));
+}
+
+/** „08:42“ */
+export function uhrzeit(wert: Eingabe): string {
+  return UHRZEIT.format(alsDatum(wert));
+}
+
+/** „12.10.2026, 08:42“ */
+export function datumZeit(wert: Eingabe): string {
+  const d = alsDatum(wert);
+  return `${DATUM.format(d)}, ${UHRZEIT.format(d)}`;
+}
+
+const MINUTE = 60_000;
+const STUNDE = 60 * MINUTE;
+const TAG = 24 * STUNDE;
+
+/**
+ * Grobe Relativangabe für Listen: „gerade eben“, „vor 5 Min.“, „vor 3 Std.“,
+ * „vor 2 Tagen“, „in 12 Tagen“. Ab 30 Tagen Abstand wird das Datum gezeigt, weil
+ * „vor 47 Tagen“ schlechter einzuordnen ist als ein Datum.
+ *
+ * `jetzt` ist ein Parameter, damit Tests und statisch gerenderte Seiten einen
+ * festen Bezugspunkt haben.
+ */
+export function relativ(wert: Eingabe, jetzt: Eingabe = new Date()): string {
+  const abstand = alsDatum(wert).getTime() - alsDatum(jetzt).getTime();
+  const betrag = Math.abs(abstand);
+  const zukunft = abstand > 0;
+
+  if (betrag < MINUTE) return "gerade eben";
+  if (betrag >= 30 * TAG) return `am ${datum(wert)}`;
+
+  let text: string;
+  if (betrag < STUNDE) {
+    text = `${Math.floor(betrag / MINUTE)} Min.`;
+  } else if (betrag < TAG) {
+    text = `${Math.floor(betrag / STUNDE)} Std.`;
+  } else {
+    const tage = Math.floor(betrag / TAG);
+    // „vor“ und „in“ verlangen beide den Dativ: „vor 1 Tag“, „in 2 Tagen“.
+    text = tage === 1 ? "1 Tag" : `${tage} Tagen`;
+  }
+  return zukunft ? `in ${text}` : `vor ${text}`;
+}
+
+/** Ganze Kalendertage bis `wert` (negativ, wenn vorbei) – Grundlage für Ablaufhinweise. */
+export function tageBis(wert: Eingabe, jetzt: Eingabe = new Date()): number {
+  const tagesnummer = (d: Date) => {
+    const [t, m, j] = DATUM.format(d).split(".").map(Number);
+    return Date.UTC(j ?? 0, (m ?? 1) - 1, t ?? 1) / TAG;
+  };
+  return Math.round(tagesnummer(alsDatum(wert)) - tagesnummer(alsDatum(jetzt)));
+}