build(frontend): Design-Tokens aus /shared/design-tokens/tokens.css einbinden #87

New issue

Closed

opened 2026-06-22 17:12:01 +00:00 by niboer · 0 comments

niboer commented

2026-06-22 17:12:01 +00:00

Owner

Beschreibung

Das shared Verzeichnis shared/design-tokens/tokens.css definiert projektweite CSS Custom Properties (Farbpalette, Schriftarten, Abstaende, Logo). Das Frontend importiert diese Datei jedoch nicht. Aktuell werden nur die shadcn-eigenen CSS-Variablen in pp.css verwendet.

Motivation

rontend/AGENTS.md schreibt vor: "Design-Tokens: Referenzieren /shared/design-tokens/tokens.css". Der tatsaechliche Code weicht davon ab. Das fuehrt zu:

Doppelter Token-Pflege (shadcn-Variablen in pp.css + shared-Tokens in okens.css)
Keine Farbsynchronisation zwischen Frontend und Keycloak-Theme (das Keycloak-Theme soll dieselben Tokens via Volume-Mount beziehen)
Die Abstraktionsschicht /shared/design-tokens/ ist faktisch totes Gepaeck

Vorgeschlagene Umsetzung

okens.css in rontend/src/app.css importieren: @import '../../shared/design-tokens/tokens.css'
Pruefen, ob Tokens aus okens.css mit shadcn-Variablen kollidieren (z. B. --primary). Falls ja: shadcn-Variablen auf Tokens mappen statt eigenstaendige Werte zu definieren.
rontend/src/app.css aufraeumen: Dopplungen entfernen, Tokens konsolidieren.
rontend/AGENTS.md ggf. aktualisieren, falls der Import-Pfad dokumentiert werden muss.

Betroffene Dateien

/shared/design-tokens/tokens.css
rontend/src/app.css
rontend/AGENTS.md

Alternativen

Die Anforderung in rontend/AGENTS.md streichen und das Konzept der shared Design-Tokens aufgeben (nur shadcn-Variablen verwenden). Das Keycloak-Theme muesste dann ebenfalls shadcn-Variablen manuell duplizieren.

### Beschreibung Das shared Verzeichnis shared/design-tokens/tokens.css definiert projektweite CSS Custom Properties (Farbpalette, Schriftarten, Abstaende, Logo). Das Frontend importiert diese Datei jedoch nicht. Aktuell werden nur die shadcn-eigenen CSS-Variablen in pp.css verwendet. ### Motivation rontend/AGENTS.md schreibt vor: "Design-Tokens: Referenzieren /shared/design-tokens/tokens.css". Der tatsaechliche Code weicht davon ab. Das fuehrt zu: - Doppelter Token-Pflege (shadcn-Variablen in pp.css + shared-Tokens in okens.css) - Keine Farbsynchronisation zwischen Frontend und Keycloak-Theme (das Keycloak-Theme soll dieselben Tokens via Volume-Mount beziehen) - Die Abstraktionsschicht /shared/design-tokens/ ist faktisch totes Gepaeck ### Vorgeschlagene Umsetzung 1. okens.css in rontend/src/app.css importieren: @import '../../shared/design-tokens/tokens.css' 2. Pruefen, ob Tokens aus okens.css mit shadcn-Variablen kollidieren (z. B. --primary). Falls ja: shadcn-Variablen auf Tokens mappen statt eigenstaendige Werte zu definieren. 3. rontend/src/app.css aufraeumen: Dopplungen entfernen, Tokens konsolidieren. 4. rontend/AGENTS.md ggf. aktualisieren, falls der Import-Pfad dokumentiert werden muss. ### Betroffene Dateien - /shared/design-tokens/tokens.css - rontend/src/app.css - rontend/AGENTS.md ### Alternativen Die Anforderung in rontend/AGENTS.md streichen und das Konzept der shared Design-Tokens aufgeben (nur shadcn-Variablen verwenden). Das Keycloak-Theme muesste dann ebenfalls shadcn-Variablen manuell duplizieren.

niboer added this to the MS10: Vollständige UI milestone

2026-06-22 17:12:01 +00:00

niboer added the

component/frontend

prio/medium

type/chore

labels

2026-06-22 17:12:01 +00:00

niboer referenced this issue from a commit

2026-06-22 17:37:02 +00:00

feat(frontend): fehlende Design-Token-Mappings (Spacing, Shadow, Transition) in app.css ergaenzt

niboer referenced this issue from a commit