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

<br />

### Common Colors

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

<br />

### Custom Colors

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