From e6eda26eb2042d8244a0feee00efd6f76b374298 Mon Sep 17 00:00:00 2001 From: patrick Date: Mon, 7 Sep 2026 14:35:48 +0200 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20zirkul=C3=A4re=20CSS-Variablen?= =?UTF-8?q?=20endg=C3=BCltig=20behoben=20-=20kein=20@theme-Namespace=20meh?= =?UTF-8?q?r?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Vorheriger Fix (--mabea-* Zwischen-Variablen) hat den Zirkel nur eine Ebene verschoben statt aufgelöst: da @theme weiterhin --color-primary selbst neu definierte (höherer Layer als global.css), zeigte --mabea-primary auf --color-primary, welches wiederum auf --mabea-primary zeigte - derselbe Zirkel, nur indirekt. Coming from CSS-Spec: eine zirkuläre var()-Kette macht die Property zur "guaranteed-invalid value", unabhängig davon über wie viele Zwischenschritte sie läuft. Echter Fix: kein @theme-Mapping auf --color-* mehr, damit keine Namenskollision mit global.css überhaupt erst entstehen kann. Alle betroffenen Tailwind-Klassen (bg-primary, text-danger, border-l-warning, bg-surface-sunken, text-muted-foreground, ring-primary, etc.) auf Arbitrary-Value-Syntax umgestellt (z.B. bg-[var(--color-primary)]) - referenziert global.css-Variablen direkt, ohne je einen neuen Property-Namen im Theme-Layer zu belegen. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV --- DEVLOG.md | 60 +++++++++++++++++++ .../src/components/status/ReadinessBadge.tsx | 8 +-- frontend/src/components/ui/badge.tsx | 10 ++-- frontend/src/components/ui/button.tsx | 11 ++-- frontend/src/components/ui/card.tsx | 7 ++- .../src/pages/dashboard/DashboardPage.tsx | 10 ++-- frontend/src/pages/dashboard/TileFrame.tsx | 6 +- .../pages/dashboard/tiles/AblaufdatenTile.tsx | 8 +-- .../tiles/EinsatzbereitschaftTile.tsx | 14 ++--- .../pages/dashboard/tiles/KennzahlenTile.tsx | 2 +- .../src/pages/dashboard/tiles/MaengelTile.tsx | 6 +- .../dashboard/tiles/PrueftermineTile.tsx | 8 +-- .../dashboard/tiles/QualifikationTile.tsx | 8 +-- frontend/src/styles/tailwind.css | 58 ++++-------------- 14 files changed, 122 insertions(+), 94 deletions(-) diff --git a/DEVLOG.md b/DEVLOG.md index 226e000..48e5808 100644 --- a/DEVLOG.md +++ b/DEVLOG.md @@ -6698,3 +6698,63 @@ Keine Commits in dieser Session. - frontend/src/auth/AuthContext.tsx | 15 +++++++++++++-- --- +## 2026-09-07 14:19 – 14:23 (3m) +**Beschreibung:** Claude Code Session +**Projekt:** asb-material + +### Commits +- adb4aee fix(frontend): kritischer Bug - zirkuläre CSS-Variablen brachen Farben app-weit + +### Geänderte Dateien +- DEVLOG.md | 26 ++++++++++++++++++++++++++ +- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++---------------- + +--- +## 2026-09-07 14:24 – 14:24 (0m) +**Beschreibung:** Claude Code Session +**Projekt:** asb-material + +### Commits +Keine Commits in dieser Session. + +### Geänderte Dateien +- DEVLOG.md | 26 ++++++++++++++++++++++++++ +- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++---------------- + +--- +## 2026-09-07 14:25 – 14:25 (0m) +**Beschreibung:** Claude Code Session +**Projekt:** asb-material + +### Commits +Keine Commits in dieser Session. + +### Geänderte Dateien +- DEVLOG.md | 26 ++++++++++++++++++++++++++ +- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++---------------- + +--- +## 2026-09-07 14:29 – 14:29 (0m) +**Beschreibung:** Claude Code Session +**Projekt:** asb-material + +### Commits +Keine Commits in dieser Session. + +### Geänderte Dateien +- DEVLOG.md | 26 ++++++++++++++++++++++++++ +- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++---------------- + +--- +## 2026-09-07 14:29 – 14:30 (0m) +**Beschreibung:** Claude Code Session +**Projekt:** asb-material + +### Commits +Keine Commits in dieser Session. + +### Geänderte Dateien +- DEVLOG.md | 26 ++++++++++++++++++++++++++ +- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++---------------- + +--- diff --git a/frontend/src/components/status/ReadinessBadge.tsx b/frontend/src/components/status/ReadinessBadge.tsx index 3d1bd92..982acfe 100644 --- a/frontend/src/components/status/ReadinessBadge.tsx +++ b/frontend/src/components/status/ReadinessBadge.tsx @@ -17,10 +17,10 @@ const VARIANT: Record = }; const PUNKT_FARBE: Record = { - ready: "bg-success", - limited: "bg-warning", - "not-ready": "bg-danger", - unknown: "bg-muted-foreground", + ready: "bg-[var(--color-success)]", + limited: "bg-[var(--color-warning)]", + "not-ready": "bg-[var(--color-danger)]", + unknown: "bg-[var(--color-text-muted)]", }; interface Props { diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx index ecf8c16..4f951b5 100644 --- a/frontend/src/components/ui/badge.tsx +++ b/frontend/src/components/ui/badge.tsx @@ -6,11 +6,11 @@ import { cn } from "../../lib/utils"; const badgeVariants = cva("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", { variants: { variant: { - neutral: "bg-surface-sunken text-muted-foreground", - success: "bg-success-bg text-success", - warning: "bg-warning-bg text-warning", - danger: "bg-danger-bg text-danger", - primary: "bg-primary-soft text-primary", + neutral: "bg-[var(--color-surface-sunken)] text-[var(--color-text-muted)]", + success: "bg-[var(--color-success-bg)] text-[var(--color-success)]", + warning: "bg-[var(--color-warning-bg)] text-[var(--color-warning)]", + danger: "bg-[var(--color-danger-bg)] text-[var(--color-danger)]", + primary: "bg-[var(--color-primary-soft)] text-[var(--color-primary)]", }, }, defaultVariants: { diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx index 06a1e9d..6c637b4 100644 --- a/frontend/src/components/ui/button.tsx +++ b/frontend/src/components/ui/button.tsx @@ -5,14 +5,15 @@ import { forwardRef, type ButtonHTMLAttributes } from "react"; import { cn } from "../../lib/utils"; const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { - default: "bg-primary text-white hover:bg-primary-hover", - secondary: "bg-surface-sunken text-foreground border border-border hover:bg-border/40", - ghost: "hover:bg-surface-sunken text-foreground", - danger: "bg-danger text-white hover:opacity-90", + default: "bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)]", + secondary: + "bg-[var(--color-surface-sunken)] text-[var(--color-text)] border border-[var(--color-border)] hover:bg-[var(--color-border)]/40", + ghost: "hover:bg-[var(--color-surface-sunken)] text-[var(--color-text)]", + danger: "bg-[var(--color-danger)] text-white hover:opacity-90", }, size: { default: "h-9 px-4 py-2", diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx index c2bd735..a4080f2 100644 --- a/frontend/src/components/ui/card.tsx +++ b/frontend/src/components/ui/card.tsx @@ -6,7 +6,7 @@ export const Card = forwardRef>((
(

) diff --git a/frontend/src/pages/dashboard/DashboardPage.tsx b/frontend/src/pages/dashboard/DashboardPage.tsx index 34f4b0d..fc6c513 100644 --- a/frontend/src/pages/dashboard/DashboardPage.tsx +++ b/frontend/src/pages/dashboard/DashboardPage.tsx @@ -216,7 +216,7 @@ export function DashboardPage() {

Dashboard

{zuletztAktualisiert && ( -

+

Aktualisiert um {zuletztAktualisiert.toLocaleTimeString("de-DE")}

)} @@ -252,17 +252,17 @@ export function DashboardPage() { {laedt && (
{Array.from({ length: 6 }).map((_, i) => ( -
+
))}
)} {bearbeitenModus && layout.ausgeblendet.length > 0 && ( -
+
Ausgeblendet:{" "} {layout.ausgeblendet.map((id, i) => ( {i > 0 && ", "} - @@ -270,7 +270,7 @@ export function DashboardPage() {
)} {bearbeitenModus && ( -

+

Kachel ziehen zum Verschieben, an der unteren rechten Ecke ziehen zum Vergrößern/Verkleinern.

)} diff --git a/frontend/src/pages/dashboard/TileFrame.tsx b/frontend/src/pages/dashboard/TileFrame.tsx index 84d03df..1ecafb9 100644 --- a/frontend/src/pages/dashboard/TileFrame.tsx +++ b/frontend/src/pages/dashboard/TileFrame.tsx @@ -7,9 +7,9 @@ import { cn } from "../../lib/utils"; export type TileAkzent = "neutral" | "warning" | "danger"; const AKZENT_KLASSE: Record = { - neutral: "border-l-border", - warning: "border-l-warning", - danger: "border-l-danger", + neutral: "border-l-[var(--color-border)]", + warning: "border-l-[var(--color-warning)]", + danger: "border-l-[var(--color-danger)]", }; interface Props extends HTMLAttributes { diff --git a/frontend/src/pages/dashboard/tiles/AblaufdatenTile.tsx b/frontend/src/pages/dashboard/tiles/AblaufdatenTile.tsx index 71eb2c4..2caeb7f 100644 --- a/frontend/src/pages/dashboard/tiles/AblaufdatenTile.tsx +++ b/frontend/src/pages/dashboard/tiles/AblaufdatenTile.tsx @@ -14,7 +14,7 @@ function AblaufdatenTileKomponente({ ablaufdaten }: Props) { const [alleAnzeigen, setAlleAnzeigen] = useState(false); if (ablaufdaten.length === 0) { - return

Keine bald ablaufenden Chargen.

; + return

Keine bald ablaufenden Chargen.

; } const sichtbare = alleAnzeigen ? ablaufdaten : ablaufdaten.slice(0, ANZAHL_OHNE_AUFKLAPPEN); @@ -25,14 +25,14 @@ function AblaufdatenTileKomponente({ ablaufdaten }: Props) { {sichtbare.map((a) => (
  • {a.objekt_name} – {a.material_name} - {a.ablaufdatum} + {a.ablaufdatum}
    {a.verbleibende_tage} Tage
    • @@ -40,7 +40,7 @@ function AblaufdatenTileKomponente({ ablaufdaten }: Props) { {ablaufdaten.length > ANZAHL_OHNE_AUFKLAPPEN && (