import { Meta } from '@storybook/addon-docs';
import { Color } from './color/color';

<Meta title="Foundations/Color" />

## Overview

Below you can see the color palette of the application and the className to use
for each color.

<br />

### Primary Colors

<div className="grid grid-cols-4 gap-4 h-auto w-full bg-gray-200 p-8">
  <div className="flex space-x-2 items-center">
    <div className="bg-primary-dark w-16 h-16" />
    <span>primary-dark</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-primary-light w-16 h-16" />
    <span>primary-light</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-primary-main w-16 h-16" />
    <span>primary-main</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-primary-active w-16 h-16" />
    <span>primary-active</span>
  </div>
</div>

<br />

#### Usage

Therefore you can use the className to style the color of a component (using
`bg-${color-class}`) or text (using `text-${color-class}`).

```tsx
<div className="bg-primary-main text-primary-light">OHIF UI Components</div>
```

to render

<div className="bg-primary-main text-primary-light">OHIF UI Components</div>

<br />
<br />

### Secondary Colors

<div className="grid grid-cols-4 gap-4 h-auto w-full bg-gray-200 p-8">
  <div className="flex space-x-2 items-center">
    <div className="bg-secondary-dark w-16 h-16" />
    <span>secondary-dark</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-secondary-light w-16 h-16" />
    <span>secondary-light</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-secondary-main w-16 h-16" />
    <span>secondary-main</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-secondary-active w-16 h-16" />
    <span>secondary-active</span>
  </div>
</div>

<br />

### Common Colors

<div className="grid grid-cols-4 gap-4 h-auto w-full bg-gray-200 p-8">
  <div className="flex space-x-2 items-center">
    <div className="bg-common-bright w-16 h-16" />
    <span>common-bright</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-common-light w-16 h-16" />
    <span>common-light</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-common-main w-16 h-16" />
    <span>common-main</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-common-dark w-16 h-16" />
    <span>common-dark</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-common-active w-16 h-16" />
    <span>common-active</span>
  </div>
</div>

<br />

### Custom Colors

<div className="grid grid-cols-4 gap-4 h-auto w-full bg-gray-200 p-8">
  <div className="flex space-x-2 items-center">
    <div className="bg-customgreen-100 w-16 h-16" />
    <span>customgreen-100</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-customblue-100 w-16 h-16" />
    <span>customblue-100</span>
  </div>
  <div className="flex space-x-2 items-center">
    <div className="bg-customblue-200 w-16 h-16" />
    <span>customblue-200</span>
  </div>
</div>
