# Styling

> A guide for extended styling options with our color system.

## Overview

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.

## 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.

```css title="app/globals.css"
@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](https://ui.shadcn.com/docs/theming).