import { Meta, Story, Canvas, Title, Subtitle, Source, ArgsTable, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
import getColour from '@lendi-ui/commons/colours';
import styled, {css} from 'styled-components';
import Text from '@lendi-ui/typography';
import ChangeLog from '../../../CHANGELOG.md';
import * as stories from './all.stories.tsx';

<Meta title="Foundations/Colours/Usage"/>

<Title>Developer Guidelines</Title>

<Subtitle>Installation</Subtitle>
All colours are shipped as part of `@lendi-ui/commons` package.

```ts
yarn add @lendi-ui/commons
```

<Subtitle>Import</Subtitle>
Import the `getColour` function from the `colours` entrypoint.

```ts
import getColour from '@lendi-ui/commons/colours';
```
**Note:** You may still use the american english spelling `getColor`, simply change the spelling in your default import statement.

<Subtitle>Usage</Subtitle>

### For Semantic Colours

The `getColour` function accepts two parameters: Category and Scale, and returns a colour string.

```ts
const colour = getColour('interaction', 'main');
```

It only returns the hex which is assigned to the given semantic. For unmatched semantic, it'll return `undefined`.

### For Palette Colours

**Note:** Palette Colours is only available for `lendi` and `domain` themes.

The `getColour()` function accepts two parameters: Category and Transparency, and returns a colour string.

```ts
const colour = getColour('primary', '500');
```

It only returns the hex which is assigned to the given semantic. For unmatched semantic, it'll return `undefined`.

### Usage with React

<Canvas withSource="open">
  <Story name="Usage with React" language='tsx' dark={true} withSource="open" story={stories.UsageWithReact} />
</Canvas>

### Usage with Styled Component

<Canvas withSource="open">
  <Story name="Usage with Styled Component" language='tsx' dark={true} withSource="open" story={stories.UsageWithStyledComponent} />
</Canvas>

**Note**: Sometimes you might have issues where theme colour doesn't update when expected, try passing it as an arrow function in SC. This sometimes fixes the problem.

Eg. `color: ${() => getColour('interaction', 'main')};`

### Usage with Icon

<Canvas withSource="open">
  <Story name="Usage with Icon" language='tsx' dark={true} withSource="open" story={stories.UsageWithIcon} />
</Canvas>


```ts
const buttonColor = getColour('interaction', 'main');
const borderColor = getColour('border', 'interaction', { state: 'hover' });
```

## Changelog

<Description markdown={ChangeLog} />