import { Meta, Story, Canvas, Title, Subtitle, Source, ArgsTable, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
import { color, bg, fg } from '@lendi-ui/color';
import * as stories from './legacy.stories.tsx';

<Meta title="Foundations/Colours/Legacy Functions" />

<Title>Legacy Color Functions</Title>


## Installation

<Alert variant="info" heading="These functions have restricted theming">
  These functions are deprecated and only access old palette colours. They <strong>cannot be used for Aussie</strong> theming.
  <br />Available palette colours: 25 - 950 | primary, secondary, tertiary, shade, error, info, warn, success
</Alert>

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

## Available Imports

```ts
  import { color, bg, fg } from '@lendi-ui/color';
```

## Usage of color function

<Subtitle>Return a color value</Subtitle>

<Canvas withSource="open">
  <Story name="Return a color value" language='tsx' dark={true} withSource="open" story={stories.LegacyColorFunction} />
</Canvas>

## Usage of bg function

<Subtitle>Background with different color at breakpoints</Subtitle>

<Canvas withSource="open">
  <Story name="Background with single color" language='tsx' dark={true} withSource="open" story={stories.LegacyBGFunctionSingleColor} />
</Canvas>

<Subtitle>Background with different color at breakpoints</Subtitle>

<Canvas withSource="open">
  <Story name="Background with different value at each breakpoint" language='tsx' dark={true} withSource="open" story={stories.LegacyBGFunctionBreakpointColor} />
</Canvas>

## Usage of fg function

<Subtitle>Foreground with different color at breakpoints</Subtitle>

<Canvas withSource="open">
  <Story name="Foreground with single color" language='tsx' dark={true} withSource="open" story={stories.LegacyFGFunctionSingleColor} />
</Canvas>

<Subtitle>Foreground with different color at breakpoints</Subtitle>

<Canvas withSource="open">
  <Story name="Foreground with different value at each breakpoint" language='tsx' dark={true} withSource="open" story={stories.LegacyFGFunctionBreakpointColor} />
</Canvas>

## Note

The **color, bg, fg** functions accept two parameters. The first one is LUI color. The second one is transparency value. It should be one of the value below and **default value is 1**:

```ts
0 | 0.05 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 0.95 | 1
```