From adb4aeef467c0828d1ec240a41ce5364cfb4db49 Mon Sep 17 00:00:00 2001 From: patrick Date: Mon, 7 Sep 2026 14:22:49 +0200 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20kritischer=20Bug=20-=20zirkul?= =?UTF-8?q?=C3=A4re=20CSS-Variablen=20brachen=20Farben=20app-weit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @theme-Mapping in tailwind.css hatte Einträge wie "--color-primary: var(--color-primary)" - gleicher Name wie in global.css, also Selbstreferenz auf dieselbe Custom Property. Laut CSS-Spec wird eine zirkuläre var()-Referenz zur "guaranteed-invalid value" - die Property bricht dadurch komplett weg, nicht nur für neue Tailwind-Utilities, sondern für JEDE Regel im ganzen Projekt, die dieselbe Property liest (z.B. .btn-primary in global.css, .badge-danger, etc.). Betraf: primary, primary-hover, primary-soft, danger, danger-bg, warning, warning-bg, success, success-bg, surface, surface-sunken, border, border-strong - praktisch die gesamte Farbpalette der App, nicht auf Dashboard beschränkt. Sichtbar u.a. als unsichtbarer weißer Text auf weißem "Trotzdem übernehmen"-Button (Kontrolle-Seite bei gesperrtem Objekt). Fix: Zwischen-Variablen mit eigenem Namen (--mabea-*) in tailwind.css, keine Namenskollision mehr. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV --- DEVLOG.md | 26 +++++++++++++ frontend/src/styles/tailwind.css | 63 +++++++++++++++++++++++--------- 2 files changed, 72 insertions(+), 17 deletions(-) diff --git a/DEVLOG.md b/DEVLOG.md index 02b6a82..226e000 100644 --- a/DEVLOG.md +++ b/DEVLOG.md @@ -6672,3 +6672,29 @@ Keine Commits in dieser Session. - frontend/src/pages/dashboard/TileFrame.tsx | 13 ++++++++++--- --- +## 2026-09-07 14:13 – 14:15 (2m) +**Beschreibung:** Claude Code Session +**Projekt:** asb-material + +### Commits +- e3616c1 fix(auth): Startseite/AdminRoute redirecten bei Reload fälschlich auf Objekte + +### Geänderte Dateien +- DEVLOG.md | 14 ++++++++++++++ +- frontend/src/App.tsx | 13 +++++++++++-- +- frontend/src/auth/AuthContext.tsx | 15 +++++++++++++-- + +--- +## 2026-09-07 14:18 – 14:19 (0m) +**Beschreibung:** Claude Code Session +**Projekt:** asb-material + +### Commits +Keine Commits in dieser Session. + +### Geänderte Dateien +- DEVLOG.md | 14 ++++++++++++++ +- frontend/src/App.tsx | 13 +++++++++++-- +- frontend/src/auth/AuthContext.tsx | 15 +++++++++++++-- + +--- diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css index bb4d899..14a6c15 100644 --- a/frontend/src/styles/tailwind.css +++ b/frontend/src/styles/tailwind.css @@ -10,21 +10,50 @@ @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); -@theme { - --color-background: var(--color-bg); - --color-surface: var(--color-surface); - --color-surface-sunken: var(--color-surface-sunken); - --color-border: var(--color-border); - --color-border-strong: var(--color-border-strong); - --color-foreground: var(--color-text); - --color-muted-foreground: var(--color-text-muted); - --color-primary: var(--color-primary); - --color-primary-hover: var(--color-primary-hover); - --color-primary-soft: var(--color-primary-soft); - --color-danger: var(--color-danger); - --color-danger-bg: var(--color-danger-bg); - --color-warning: var(--color-warning); - --color-warning-bg: var(--color-warning-bg); - --color-success: var(--color-success); - --color-success-bg: var(--color-success-bg); +/* Zwischen-Variablen mit eigenem Namen: @theme unten braucht dieselben Namen + wie Tailwinds Farb-Namespace (--color-primary etc.), das sind aber EXAKT + dieselben Namen wie in global.css. "--color-primary: var(--color-primary)" + ist eine zirkuläre Referenz auf sich selbst (gleiche Custom Property, + gleiches Element) - laut CSS-Spec wird das zur "guaranteed-invalid value", + die Property bricht dadurch überall weg, nicht nur für Tailwind-Utilities, + sondern auch für jede alte global.css-Regel wie .btn-primary, die dieselbe + Property liest. Über diesen Umweg mit eigenem Namen keine Kollision mehr. */ +@layer global-css { + :root { + --mabea-bg: var(--color-bg); + --mabea-surface: var(--color-surface); + --mabea-surface-sunken: var(--color-surface-sunken); + --mabea-border: var(--color-border); + --mabea-border-strong: var(--color-border-strong); + --mabea-text: var(--color-text); + --mabea-text-muted: var(--color-text-muted); + --mabea-primary: var(--color-primary); + --mabea-primary-hover: var(--color-primary-hover); + --mabea-primary-soft: var(--color-primary-soft); + --mabea-danger: var(--color-danger); + --mabea-danger-bg: var(--color-danger-bg); + --mabea-warning: var(--color-warning); + --mabea-warning-bg: var(--color-warning-bg); + --mabea-success: var(--color-success); + --mabea-success-bg: var(--color-success-bg); + } +} + +@theme { + --color-background: var(--mabea-bg); + --color-surface: var(--mabea-surface); + --color-surface-sunken: var(--mabea-surface-sunken); + --color-border: var(--mabea-border); + --color-border-strong: var(--mabea-border-strong); + --color-foreground: var(--mabea-text); + --color-muted-foreground: var(--mabea-text-muted); + --color-primary: var(--mabea-primary); + --color-primary-hover: var(--mabea-primary-hover); + --color-primary-soft: var(--mabea-primary-soft); + --color-danger: var(--mabea-danger); + --color-danger-bg: var(--mabea-danger-bg); + --color-warning: var(--mabea-warning); + --color-warning-bg: var(--mabea-warning-bg); + --color-success: var(--mabea-success); + --color-success-bg: var(--mabea-success-bg); }