Почему моя встроенная тема не применяется в CVA? ⇐ CSS

[Anonymous]

Я хочу изменить эту вариацию боковой панели пользовательского интерфейса Shadcn, используя пользовательскую встроенную тему. Я использую PostCSS для конфигурации Tailwind. Вариация компонента пользовательского интерфейса: < /p>
const sidebarMenuButtonVariants = cva(
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-debug outline-hidden transition-[width,height,padding] hover:text-sidebar-accent-foreground active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
{
variants: {
variant: {
default: "hover:text-sidebar-accent-foreground",
outline:
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-accent))] hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
},
size: {
default: "h-8 text-xl-size font-title",
sm: "h-7 text-xs",
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
< /code>
Встроенная тема: < /p>
@theme inline {
--text-xl-size: var(--xl-font-size);

--font-title: var(--title-font);

--color-text: var(--black);
--color-text-secondary: var(--dark-blue);
--color-text-tertiary: var(--white);
--color-text-placeholder: var(--dark-grey);

--color-sidebar: var(--dark-blue);
--color-sidebar-foreground: var(--light-blue);
--color-sidebar-accent: var(--dark-blue);
--color-sidebar-accent-foreground: var(--red);
}
< /code>
Работает цвет, это размер текста и шрифт, которые не применяются, как и ожидалось. Почему это происходит и как я могу это решить? Использование произвольных значений тоже не работает. Встроенная тема, однако, работает просто отлично в HTML -тегах.


Подробнее здесь: https://stackoverflow.com/questions/797 ... ied-in-cva