A guide for extended styling options with our color system.
audio/ui adds semantic color tokens to the shadcn/ui theme, for states such as alerts and badges.
Standard shadcn/ui themes work too. The custom tokens keep contrast consistent across these states.
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.