From cda70b6a810f81a273923ce60100383ea66c7041 Mon Sep 17 00:00:00 2001 From: Till JS Date: Wed, 15 Apr 2026 21:57:29 +0200 Subject: [PATCH] fix(css): alias bare --muted/--primary etc. to --color-* tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit GlobalSettingsSection (and a few other shared-ui/auth-ui components) reference shadcn-style bare CSS variables like --muted and --primary, but this app standardized on --color-muted/--color-primary. The mismatch meant classes like bg-[hsl(var(--muted))] resolved to an invalid color → buttons in the Allgemein settings tab rendered without a background. Add one-way aliases in :root so the bare names resolve to the color-prefixed ones. No changes to shared-ui required. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/mana/apps/web/src/app.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/apps/mana/apps/web/src/app.css b/apps/mana/apps/web/src/app.css index 34e7b134f..308553d45 100644 --- a/apps/mana/apps/web/src/app.css +++ b/apps/mana/apps/web/src/app.css @@ -13,6 +13,26 @@ @layer base { :root { color-scheme: light dark; + + /* shadcn-compat aliases — some shared-ui components (GlobalSettingsSection, + a few auth-ui pieces) use bare `--muted`, `--primary`, etc. instead of + the `--color-*` tokens this app standardized on. Bridge them here so + `bg-[hsl(var(--muted))]` and friends resolve to a real color. */ + --primary: var(--color-primary); + --primary-foreground: var(--color-primary-foreground); + --secondary: var(--color-secondary); + --secondary-foreground: var(--color-secondary-foreground); + --background: var(--color-background); + --foreground: var(--color-foreground); + --muted: var(--color-muted); + --muted-foreground: var(--color-muted-foreground); + --border: var(--color-border); + --card: var(--color-card); + --card-foreground: var(--color-card-foreground); + --accent: var(--color-accent); + --accent-foreground: var(--color-accent-foreground); + --input: var(--color-input); + --ring: var(--color-ring); } h1 {