import {
  Meta,
  ColorPalette,
  ColorItem,
  Story,
  Canvas,
  Source,
} from '@storybook/addon-docs'
import { html } from 'lit-html'
import dedent from 'ts-dedent'

import {
  colorPalette,
  neutral1,
  neutral2,
  neutral3,
} from '../shared/tools/color-palette'

<Meta title="Design System/Colors" />

<h1 id="typography">Colors</h1>

We use colors that has fixed `hue` and `saturation` and operate over `lightness` values.
For instance in `neutral-20` the lightness value is `20`.

### **Example Usage**

Apply color class like any other Tailwind color, for example:

```html
<span class="bg-neutral-20 text-honey-72">Text</span>
```

### **Color Palette**

<br />

<ColorPalette>
  #### **Neutral Colors**
  <br />
  <br />
  <ColorItem title="neutral" colors={neutral1} />
  <ColorItem colors={neutral2} />
  <ColorItem colors={neutral3} />
  ### **Accent Colors**
  <br />
  <br />
  <ColorItem title="honey" colors={colorPalette.honey} />
  <ColorItem title="coral" colors={colorPalette.coral} />
  <ColorItem title="warm" colors={colorPalette.warm} />
  <ColorItem title="sea salt" colors={colorPalette['sea-salt']} />
  <ColorItem title="cloud" colors={colorPalette.cloud} />
  <ColorItem title="ocean" colors={colorPalette.ocean} />
  <ColorItem title="sky" colors={colorPalette.sky} />
  <ColorItem title="lukso" colors={colorPalette.lukso} />
  ### **Utility Colors**
  <br />
  <br />
  <ColorItem title="yellow" colors={colorPalette.yellow} />
  <ColorItem title="green" colors={colorPalette.green} />
  <ColorItem title="blue" colors={colorPalette.blue} />
  <ColorItem title="red" colors={colorPalette.red} />
  ### **Purples**
  <br />
  <br />
  <ColorItem title="purple" colors={colorPalette.purple} />
  ### **Pinks**
  <br />
  <br />
  <ColorItem title="pink" colors={colorPalette.pink} />
  ### **Gradients**
  <br />
  <br />
  <ColorItem title="gradient-1" colors={colorPalette['gradient-1']} />
  <ColorItem title="gradient-2" colors={colorPalette['gradient-2']} />
  <ColorItem title="gradient-3" colors={colorPalette['gradient-3']} />
</ColorPalette>