rainer/test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 11

Design-System: Tokens, Buttons, Karten, Mono-Labels (MAIN-9) #3

Merged
rainer merged 4 commits from agent/full-stack-web-engineer/5f28348cf2ed into test/access-check-main-1 2026-11-03 18:28:12 +00:00
Conversation 1 Commits 4 Files changed 31 +2232 -17
rainer commented 2026-11-03 17:54:41 +00:00
Owner
Copy link

Was

Design-System für die neue Webseite (MAIN-9), umgesetzt nach dem freigegebenen Style-Guide v1 (MAIN-6, «Terminal trifft Papier»).

  • Tokens: Farben, Typo-Skala, Radius, Offset-Schatten und Transition als CSS-Variablen in assets/css/main.css, mit Dunkelmodus über prefers-color-scheme. tailwind.config.ts macht sie als Klassen verfügbar (bg-paper, text-teal, shadow-offset, font-mono …). Werte stehen nur an einer Stelle.
  • Schriften: Inter und JetBrains Mono (Variable Fonts) sind über @fontsource-variable/* lokal gebündelt. Es gibt keine Anfrage an Google (nDSG/DSGVO, Vorgabe aus dem Style-Guide). Das sind die einzigen neuen Abhängigkeiten.
  • Komponenten in components/ui/, automatisch importiert:
    • UiButton: primary und ghost, als NuxtLink, <a> oder <button>, mit Hover-, Active-, Fokus- und Disabled-Zustand. Mindesthöhe 44 px.
    • UiMonoLabel: Eyebrow mit dekorativem > -Prompt, der für Screenreader verborgen ist.
    • UiTag: Pille.
    • UiCard: Leistungskarte mit Slots für Icon, Label und Footer.
    • UiWindow: Fenster-Karte mit Titelleiste.
    • UiField: Label, Hinweis und Fehler mit automatischem aria-describedby/aria-invalid.
  • Demo-Seite /design-system mit allen Komponenten und Varianten. Sie ist nicht verlinkt, hat noindex und ist in nitro.prerender.routes eingetragen.
  • Doku: docs/design-system.md beschreibt die Tokens, die Props und Slots jeder Komponente, Beispiele und Regeln. Das README verweist darauf.

Basis

Dieser PR baut auf #1 (MAIN-8, Nuxt-Setup) auf und zielt auf dessen Branch. Nach dem Merge von #1 bitte die Basis auf den Ziel-Branch umstellen. Forgejo macht das beim Mergen von #1 meist automatisch.

Testen

npm ci
npm run lint && npm run typecheck && npm run generate
npm run dev   # http://localhost:3000/design-system

Dunkelmodus: In den Browser-DevTools prefers-color-scheme: dark emulieren.

Geprüft

  • Lokal sind Lint, Typecheck und Generate grün. /design-system wird vorgerendert.
  • Im generierten HTML und CSS habe ich geprüft: Alle Token- und Varianten-Klassen werden erzeugt. Es gibt keine externen URLs, die 12 WOFF2-Dateien liegen unter _nuxt/. Labels sind mit Feldern verknüpft, noindex ist gesetzt.

Grenzen

  • Nicht visuell geprüft: Auf der Build-Maschine gibt es keinen Browser, deshalb gibt es auch keine Screenshots. Bitte die Demo-Seite bei 360, 768 und 1280 px sowie im Dunkelmodus ansehen.
  • Es gibt kein Test-Framework im Projekt, deshalb keine Komponententests. Vitest und @nuxt/test-utils würde ich bei Bedarf in einem eigenen PR ergänzen.
  • Opacity-Modifier wie bg-teal/50 funktionieren mit den Hex-Variablen nicht. Bisher braucht sie niemand.
  • Die Platzhalter-Startseite aus #1 ist unverändert. Die eigentlichen Seiten folgen in eigenen Issues.

Keine Migrationen und keine Konfigurationsänderungen ausser nitro.prerender.routes.

🤖 Generated with Claude Code

## Was Design-System für die neue Webseite (MAIN-9), umgesetzt nach dem freigegebenen Style-Guide v1 (MAIN-6, «Terminal trifft Papier»). - **Tokens:** Farben, Typo-Skala, Radius, Offset-Schatten und Transition als CSS-Variablen in `assets/css/main.css`, mit Dunkelmodus über `prefers-color-scheme`. `tailwind.config.ts` macht sie als Klassen verfügbar (`bg-paper`, `text-teal`, `shadow-offset`, `font-mono` …). Werte stehen nur an einer Stelle. - **Schriften:** Inter und JetBrains Mono (Variable Fonts) sind über `@fontsource-variable/*` lokal gebündelt. Es gibt keine Anfrage an Google (nDSG/DSGVO, Vorgabe aus dem Style-Guide). Das sind die einzigen neuen Abhängigkeiten. - **Komponenten** in `components/ui/`, automatisch importiert: - `UiButton`: primary und ghost, als `NuxtLink`, `<a>` oder `<button>`, mit Hover-, Active-, Fokus- und Disabled-Zustand. Mindesthöhe 44 px. - `UiMonoLabel`: Eyebrow mit dekorativem `> `-Prompt, der für Screenreader verborgen ist. - `UiTag`: Pille. - `UiCard`: Leistungskarte mit Slots für Icon, Label und Footer. - `UiWindow`: Fenster-Karte mit Titelleiste. - `UiField`: Label, Hinweis und Fehler mit automatischem `aria-describedby`/`aria-invalid`. - **Demo-Seite** `/design-system` mit allen Komponenten und Varianten. Sie ist nicht verlinkt, hat `noindex` und ist in `nitro.prerender.routes` eingetragen. - **Doku:** `docs/design-system.md` beschreibt die Tokens, die Props und Slots jeder Komponente, Beispiele und Regeln. Das README verweist darauf. ## Basis Dieser PR baut auf **#1** (MAIN-8, Nuxt-Setup) auf und zielt auf dessen Branch. Nach dem Merge von #1 bitte die Basis auf den Ziel-Branch umstellen. Forgejo macht das beim Mergen von #1 meist automatisch. ## Testen ```bash npm ci npm run lint && npm run typecheck && npm run generate npm run dev # http://localhost:3000/design-system ``` Dunkelmodus: In den Browser-DevTools `prefers-color-scheme: dark` emulieren. ## Geprüft - Lokal sind Lint, Typecheck und Generate grün. `/design-system` wird vorgerendert. - Im generierten HTML und CSS habe ich geprüft: Alle Token- und Varianten-Klassen werden erzeugt. Es gibt keine externen URLs, die 12 WOFF2-Dateien liegen unter `_nuxt/`. Labels sind mit Feldern verknüpft, `noindex` ist gesetzt. ## Grenzen - **Nicht visuell geprüft:** Auf der Build-Maschine gibt es keinen Browser, deshalb gibt es auch keine Screenshots. Bitte die Demo-Seite bei 360, 768 und 1280 px sowie im Dunkelmodus ansehen. - Es gibt kein Test-Framework im Projekt, deshalb keine Komponententests. Vitest und `@nuxt/test-utils` würde ich bei Bedarf in einem eigenen PR ergänzen. - Opacity-Modifier wie `bg-teal/50` funktionieren mit den Hex-Variablen nicht. Bisher braucht sie niemand. - Die Platzhalter-Startseite aus #1 ist unverändert. Die eigentlichen Seiten folgen in eigenen Issues. Keine Migrationen und keine Konfigurationsänderungen ausser `nitro.prerender.routes`. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
feat: Design-System mit Tokens, Komponenten und Demo-Seite (MAIN-9)
Some checks failed
CI / build (push) Has been cancelled
Details
CI / build (pull_request) Has been cancelled
Details
4e7e212c02 
- Tokens aus Style-Guide v1 als CSS-Variablen inkl. Dunkelmodus, in Tailwind gemappt
- Schriften Inter und JetBrains Mono lokal gebündelt (@fontsource-variable)
- Komponenten UiButton, UiMonoLabel, UiTag, UiCard, UiWindow, UiField
- Demo-Seite /design-system (noindex) und docs/design-system.md

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
feat: Kontaktseite mit Formular ohne Tracking (MAIN-15)
Some checks are pending
CI / build (push) Waiting to run
Details
CI / build (pull_request) Waiting to run
Details
51b0b059fe 
- /kontakt (vorgerendert) mit Formular aus dem Design-System
- POST /api/contact: serverseitige Validierung, Versand per SMTP (nodemailer)
- Spam-Schutz: Honeypot, signierte Zeitprüfung, Rate-Limit pro IP
- Verständliche Fehlermeldungen auf Deutsch, am Feld und als Zusammenfassung
- Vitest: Unit-/Integrationstests und E2E gegen den Build
- CI: Tests und nuxt build statt nuxt generate

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
Reviewed-on: #6
Lists every text, image and link of the old site with target page and
decision, archives page texts as snapshots and copies all images.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
Reviewed-on: #1
Reviewed-on: #2
Merge test/access-check-main-1 into MAIN-9 design system (Nuxt 4 + Tailwind 4)
Some checks are pending
CI / build (push) Waiting to run
Details
CI / build (pull_request) Waiting to run
Details
c1e4f9ecff 
Resolves conflicts from the Nuxt 4 / Tailwind 4 upgrade (ac6d36d):
- pages/, components/ moved to app/ (Nuxt 4 srcDir); server/, tests/ stay at root
- tailwind.config.ts removed; tokens ported to an @theme block in
  app/assets/css/main.css, dark mode still overrides the same CSS variables
- kontakt.vue imports server/lib via ~~/ (rootDir) instead of ~/
- nuxt.config.ts: keep the base's css + Tailwind Vite plugin and the
  contact runtimeConfig/prerender routes from the PR
- package.json: Nuxt 4 / Tailwind 4 / ESLint 10 from base plus the PR's
  fonts, nodemailer, vitest; package-lock.json regenerated with npm install
- README and docs/design-system.md updated to the new paths

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
rainer changed target branch from agent/full-stack-web-engineer/03d5b7286518 to test/access-check-main-1 2026-11-03 18:28:04 +00:00
rainer merged commit cc5d0cd6dc into test/access-check-main-1 2026-11-03 18:28:12 +00:00
rainer commented 2026-11-03 18:31:17 +00:00
Author
Owner
Copy link

Summary

PR #3 ist in test/access-check-main-1 gemergt (cc5d0cd). Er enthält auch PR #6 (MAIN-15, Kontaktseite).

Conflicts resolved

Ursache: Auf dem Default-Branch kam nachträglich das Upgrade auf Nuxt 4 und Tailwind 4 (ac6d36d).

  • tailwind.config.ts → gelöscht (TW4). Tokens in einen @theme-Block in app/assets/css/main.css portiert. Klassen wie bg-paper, text-teal, shadow-offset(-lg/-sm), text-fluid-1..3, rounded, max-w-wrap werden weiter erzeugt, der Dunkelmodus überschreibt dieselben Variablen.
  • pages/, components/ → nach app/ (Nuxt-4-srcDir). server/ und tests/ bleiben im Root.
  • app/pages/kontakt.vue → Imports von ~/server/... auf ~~/server/... umgestellt (~ ist jetzt app/).
  • nuxt.config.ts → css und Tailwind-Vite-Plugin vom Base-Branch, runtimeConfig.contact und Prerender-Routen aus dem PR.
  • package.json → Nuxt 4 / TW 4 / ESLint 10 vom Base-Branch plus Fonts, nodemailer und vitest aus dem PR. Lockfile mit npm install neu erzeugt.
  • README.md, docs/design-system.md → Pfade aktualisiert.

Verification (lokal, nach jeder Auflösung): npm run lint, npm run typecheck, npm test (23/23), npm run build, npm run test:e2e (5/5): alles grün. Forgejo-CI steht seit Tagen auf pending (auch auf dem Default-Branch), es läuft offenbar kein Runner.

## Summary PR #3 ist in `test/access-check-main-1` gemergt (`cc5d0cd`). Er enthält auch PR #6 (MAIN-15, Kontaktseite). ## Conflicts resolved Ursache: Auf dem Default-Branch kam nachträglich das Upgrade auf Nuxt 4 und Tailwind 4 (`ac6d36d`). - `tailwind.config.ts` → gelöscht (TW4). Tokens in einen `@theme`-Block in `app/assets/css/main.css` portiert. Klassen wie `bg-paper`, `text-teal`, `shadow-offset(-lg/-sm)`, `text-fluid-1..3`, `rounded`, `max-w-wrap` werden weiter erzeugt, der Dunkelmodus überschreibt dieselben Variablen. - `pages/`, `components/` → nach `app/` (Nuxt-4-srcDir). `server/` und `tests/` bleiben im Root. - `app/pages/kontakt.vue` → Imports von `~/server/...` auf `~~/server/...` umgestellt (`~` ist jetzt `app/`). - `nuxt.config.ts` → `css` und Tailwind-Vite-Plugin vom Base-Branch, `runtimeConfig.contact` und Prerender-Routen aus dem PR. - `package.json` → Nuxt 4 / TW 4 / ESLint 10 vom Base-Branch plus Fonts, nodemailer und vitest aus dem PR. Lockfile mit `npm install` neu erzeugt. - `README.md`, `docs/design-system.md` → Pfade aktualisiert. **Verification** (lokal, nach jeder Auflösung): `npm run lint`, `npm run typecheck`, `npm test` (23/23), `npm run build`, `npm run test:e2e` (5/5): alles grün. Forgejo-CI steht seit Tagen auf *pending* (auch auf dem Default-Branch), es läuft offenbar kein Runner.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
rainer/test!3
No description provided.