fix(css): alias bare --muted/--primary etc. to --color-* tokens

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) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-15 21:57:29 +02:00
parent 51e6a20daf
commit cda70b6a81

View file

@ -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 {