fix(styles): generate shadcn color utilities via inline theme tokens
The palette lives in plain CSS (:root/ThemeVars/admin remap), so Tailwind never generated bg-primary, bg-destructive, text-foreground and similar utilities. Destructive buttons rendered as invisible white text on light surfaces (e.g. the Nitro cleanup delete button). Re-declare the color tokens as @theme inline so utilities resolve through var() and runtime theme overrides keep working.
This commit is contained in:
1 parent
8a66db4ed7
commit
6d4e3486e1
1 file changed
+35
@@ -20,6 +20,41 @@
|
||||
0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* The palette lives in plain CSS (`:root` / ThemeVars / the admin remap), so
|
||||
Tailwind does not know these are theme colors and would otherwise skip the
|
||||
`bg-primary`, `bg-destructive`, `text-foreground`, … utilities. Re-declare
|
||||
them as inline theme tokens so shadcn components get their intended colors
|
||||
while value overrides from the runtime theme still apply via the variable. */
|
||||
@theme inline {
|
||||
--color-primary: var(--color-primary);
|
||||
--color-primary-hover: var(--color-primary-hover);
|
||||
--color-primary-foreground: var(--color-primary-foreground);
|
||||
--color-background: var(--color-background);
|
||||
--color-foreground: var(--color-foreground);
|
||||
--color-card: var(--color-card);
|
||||
--color-card-foreground: var(--color-card-foreground);
|
||||
--color-popover: var(--color-popover);
|
||||
--color-popover-foreground: var(--color-popover-foreground);
|
||||
--color-secondary: var(--color-secondary);
|
||||
--color-secondary-foreground: var(--color-secondary-foreground);
|
||||
--color-muted: var(--color-muted);
|
||||
--color-muted-foreground: var(--color-muted-foreground);
|
||||
--color-accent: var(--color-accent);
|
||||
--color-accent-foreground: var(--color-accent-foreground);
|
||||
--color-destructive: var(--color-destructive);
|
||||
--color-destructive-foreground: var(--color-destructive-foreground);
|
||||
--color-border: var(--color-border);
|
||||
--color-input: var(--color-input);
|
||||
--color-ring: var(--color-ring);
|
||||
--color-surface: var(--color-surface);
|
||||
--color-text: var(--color-text);
|
||||
--color-text-muted: var(--color-text-muted);
|
||||
--color-success: var(--color-success);
|
||||
--color-warning: var(--color-warning);
|
||||
--color-error: var(--color-error);
|
||||
--color-info: var(--color-info);
|
||||
}
|
||||
|
||||
/* Default theme variables. ThemeVars may override these at runtime. */
|
||||
:root {
|
||||
--color-primary: #eeb425;
|
||||
|
||||
Reference in new issue
Block a user