Overview
audio/ui extends the official shadcn/ui theming system with additional semantic tokens that enable precise, context-aware UI states.
While you can use standard shadcn/ui themes, we recommend adopting these custom color tokens to ensure consistent contrast across component states such as alerts and badges.
Extended Tokens
To support advanced state communication, we extend the base palette with additional semantic tokens:
--destructive-foreground: Foreground color specifically for destructive actions.--info&--info-foreground: Background and text colors for informational states.--success&--success-foreground: Background and text colors for success/positive outcomes.--warning&--warning-foreground: Background and text colors for cautionary states.--invert&--invert-foreground: Background and text colors for invert states.
@theme inline {
--color-destructive-foreground: var(--destructive-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-invert: var(--invert);
--color-invert-foreground: var(--invert-foreground);
}
:root {
--destructive-foreground: var(--color-red-800);
--info: var(--color-violet-500);
--info-foreground: var(--color-violet-900);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-900);
--warning: var(--color-yellow-500);
--warning-foreground: var(--color-yellow-900);
--invert: var(--color-zinc-900);
--invert-foreground: var(--color-zinc-50);
}
.dark {
--destructive-foreground: var(--color-red-600);
--info: var(--color-violet-500);
--info-foreground: var(--color-violet-600);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-600);
--warning: var(--color-yellow-500);
--warning-foreground: var(--color-yellow-600);
--invert: var(--color-zinc-700);
--invert-foreground: var(--color-zinc-50);
}For general customization guidelines such as adding your own custom colors or switching between utility classes and variables, please refer to the official shadcn/ui documentation.