import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";

<Meta title="Colors" />

# Colors

This page outlines the core color palette used across the design system, including primary, secondary, and utility colors.

## Base Colors

<ColorPalette>
  <ColorItem
    title="Base Colors"
    subtitle="Primary background and text colors"
    colors={{
      'Black': 'var(--hg-color-black)',
      'White': 'var(--hg-color-white)',
    }}
  />
</ColorPalette>

## Gray Scale

For subtle backgrounds, borders, and accents.

<ColorPalette>
  <ColorItem
    title="Gray Scale"
    subtitle="Neutral colors for UI elements"
    colors={{
      'Gray Darkest': 'var(--hg-color-gray-darkest)',
      'Gray Dark': 'var(--hg-color-gray-dark)',
      'Gray': 'var(--hg-color-gray)',
      'Gray Light': 'var(--hg-color-gray-light)',
      'Gray Lightest': 'var(--hg-color-gray-lightest)',
    }}
  />
</ColorPalette>

## Branding Colors
Defined per project, used for primary visual identity.

<ColorPalette>
  <ColorItem
    title="Brand Colors"
    subtitle="Primary brand identity colors"
    colors={{
      'Brand Darkest': 'var(--hg-color-brand-darkest)',
      'Brand Dark': 'var(--hg-color-brand-dark)',
      'Brand': 'var(--hg-color-brand)',
      'Brand Light': 'var(--hg-color-brand-light)',
      'Brand Lightest': 'var(--hg-color-brand-lightest)',
    }}
  />

  <ColorItem
    title="Accent Colors"
    subtitle="Accent/secondary brand identity colors"
    colors={{
      'Accent Darkest': 'var(--hg-color-accent-darkest)',
      'Accent Dark': 'var(--hg-color-accent-dark)',
      'Accent': 'var(--hg-color-accent)',
      'Accent Light': 'var(--hg-color-accent-light)',
      'Accent Lightest': 'var(--hg-color-accent-lightest)',
    }}
  />
</ColorPalette>

## Feedback Colors
For specific UI feedback: informative, positive, warning, and negative.

<ColorPalette>
  <ColorItem
    title="Feedback Colors"
    subtitle="Used for UI feedback elements"
    colors={{
      'Informative': 'var(--hg-color-info)',
      'Positive': 'var(--hg-color-positive)',
      'Warning': 'var(--hg-color-warning)',
      'Negative': 'var(--hg-color-negative)',
    }}
  />
</ColorPalette>

## Utilizing colors within Tailwind

```css
.base-example {
    @apply
        bg-white
        text-black
        data-[state=checked]:bg-black
        data-[state=checked]:text-white;
}
```
