> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mantle.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors

> Semantic color tokens with dark mode support

A consistent palette for building interfaces. All colors work seamlessly in both light and dark modes.

## Color Palettes

### Primary Colors

Main brand colors used for primary actions and emphasis.

| Token              | CSS Variable           | Usage                                             |
| ------------------ | ---------------------- | ------------------------------------------------- |
| Primary            | `--primary`            | Primary buttons, Links, Focus states, Key actions |
| Primary Foreground | `--primary-foreground` | Button text, Text on primary surfaces             |

### Secondary Colors

Secondary colors for supporting elements and subtle actions.

| Token                | CSS Variable             | Usage                                               |
| -------------------- | ------------------------ | --------------------------------------------------- |
| Secondary            | `--secondary`            | Secondary buttons, Subtle backgrounds, Hover states |
| Secondary Foreground | `--secondary-foreground` | Text on secondary surfaces, Secondary button text   |

### Neutral Colors

Base colors for text, backgrounds, and UI elements.

| Token              | CSS Variable           | Description                       | Usage                                                     |
| ------------------ | ---------------------- | --------------------------------- | --------------------------------------------------------- |
| Background         | `--background`         | Main background color             | Page backgrounds, Main content areas                      |
| Foreground         | `--foreground`         | Primary text color                | Body text, Headings, Primary content                      |
| Card               | `--card`               | Card background color             | Card backgrounds, Elevated surfaces                       |
| Card Foreground    | `--card-foreground`    | Text color on card backgrounds    | Text on cards, Card content                               |
| Popover            | `--popover`            | Popover background color          | Dropdown backgrounds, Tooltip backgrounds, Modal overlays |
| Popover Foreground | `--popover-foreground` | Text color on popover backgrounds | Dropdown text, Tooltip text, Modal content                |
| Muted              | `--muted`              | Muted background color            | Disabled states, Subtle backgrounds, Code blocks          |
| Muted Foreground   | `--muted-foreground`   | Muted text color                  | Secondary text, Captions, Placeholder text                |

### Accent Colors

Accent colors for highlights and special states.

| Token             | CSS Variable          | Usage                                     |
| ----------------- | --------------------- | ----------------------------------------- |
| Accent            | `--accent`            | Hover states, Active states, Highlights   |
| Accent Foreground | `--accent-foreground` | Text on accent surfaces, Active link text |

### Semantic Colors

Colors that convey meaning and state.

| Token                  | CSS Variable               | Usage                                                |
| ---------------------- | -------------------------- | ---------------------------------------------------- |
| Destructive            | `--destructive`            | Error states, Delete buttons, Warning messages       |
| Destructive Foreground | `--destructive-foreground` | Error button text, Text on error backgrounds         |
| Border                 | `--border`                 | Input borders, Card borders, Dividers                |
| Input                  | `--input`                  | Form inputs, Text areas, Select borders              |
| Ring                   | `--ring`                   | Focus indicators, Keyboard navigation, Accessibility |

### Brand & Status Colors

Brand identity and status indication colors.

| Token              | CSS Variable           | Usage                                     |
| ------------------ | ---------------------- | ----------------------------------------- |
| Brand              | `--brand`              | Brand accents, Highlights, Badges         |
| Brand Foreground   | `--brand-foreground`   | Text on brand surfaces, Brand buttons     |
| Success            | `--success`            | Success alerts, Positive states, Badges   |
| Success Foreground | `--success-foreground` | Text on success surfaces                  |
| Warning            | `--warning`            | Warning alerts, Cautionary states, Badges |
| Warning Foreground | `--warning-foreground` | Text on warning surfaces                  |

## Light vs Dark Mode Values

Core surface and text colors with their specific values in both light and dark themes.

<Tabs>
  <Tab title="Light Mode">
    \| Token | HSL Value | |-------|-----------| | Background | `hsl(0 0% 96%)` | | Foreground | `hsl(0 0% 11%)` | | Card
    \| `hsl(0 0% 99%)` | | Card Foreground | `hsl(236.05 1.67% 18.72%)` | | Popover | `hsl(0 0% 100%)` | | Popover
    Foreground | `hsl(236.05 1.66% 18.88%)` |
  </Tab>

  <Tab title="Dark Mode">
    \| Token | HSL Value | |-------|-----------| | Background | `hsl(240 14% 10%)` | | Foreground | `hsl(0 0% 100%)` | |
    Card | `hsl(234 17% 12%)` | | Card Foreground | `hsl(236.05 20.05% 91.2%)` | | Popover | `hsl(235 16% 15%)` | |
    Popover Foreground | `hsl(236.03 23.75% 91.7%)` |
  </Tab>
</Tabs>

## Accessibility

All color pairings meet WCAG accessibility standards:

* **Primary on Background**: AA+ rating
* **Muted Text**: AA rating (sufficient contrast for secondary information)

### Color Pairings

Always pair colors with their designated foreground colors:

* Primary + Primary Foreground
* Secondary + Secondary Foreground
* Brand + Brand Foreground
* Muted + Muted Foreground

## Best Practices

<CardGroup cols={2}>
  <Card title="Do" icon="check">
    * Use CSS variables for all color references
    * Test colors in both light and dark modes
    * Maintain sufficient contrast for accessibility (WCAG AA: 4.5:1)
    * Use semantic color names (primary, secondary, etc.)
    * Follow the established color hierarchy
    * Pair colors with their designated foreground colors
  </Card>

  <Card title="Don't" icon="xmark">
    * Hard-code color values in components
    * Use colors that don't exist in the system
    * Override theme colors without considering accessibility
    * Mix light and dark mode color values
    * Create custom colors without design approval
    * Use insufficient contrast ratios (\< 4.5:1)
  </Card>
</CardGroup>

## Implementation

### Using CSS Variables

```css theme={null}
.my-component {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--border));
}
```

### Using Tailwind Classes

```html theme={null}
<div class="bg-primary text-primary-foreground border border-border">Content</div>
```