import { Meta, Story } from "@storybook/addon-docs";

import Colors from "./colors.component";

<Meta title="Abstracts/Colors" component={Colors} />

export const Template = (args) => ({ props: args });

# Colors

Pepperi design system has its pair share of color set with semantic naming (not by color name)

You can see them all here

## Example

### Text colors

You can use a functions to use the `color-text` like so `↓`

```css
// Make sure you call the `functions.scss` at the top of the file
@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/functions";

color: functions.get-pep-color(color-text, color-main);
```
In the function, the 1st argument is `color-text`, and for the 2nd argument use one of the following:

- `color-main`
- `color-dimmed`
- `color-disabled`
- `color-invert`
- `color-link`
- `color-link`
- `color-link`
- `color-success`
- `color-caution`

<Story name="Text colors" args={{
        storyIndex: 1,
    }}>
    {Template.bind({})}
</Story>

### System colors

Like the example above you can use a functions to use the `color-system-primary` like so `↓`

```css
// Make sure you call the `functions.scss` at the top of the file
@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/functions";

color: functions.get-pep-color(color-system-primary, color-base);
```
In the function, the 1st argument is `color-system-primary`, and for the 2nd argument use one of the following:

- `color-tran-00`
- `color-tran-10`
- `color-tran-20`
- `color-tran-30`
- `color-tran-40`
- `color-tran-50`
- `color-tran-60`
- `color-tran-70`
- `color-tran-80`
- `color-tran-90`
- `color-flat-l-20`
- `color-flat-l-10`
- `color-base`
- `color-flat-r-20`
- `color-flat-r-30`
- `color-flat-r-40`

<Story name="System colors" args={{
        storyIndex: 2,
    }}>
    {Template.bind({})}
</Story>

### Inverted system colors

You can use them like the system color above but with `color-system-primary-invert` as the 1st argument

<Story name="Inverted system colors" args={{
        storyIndex: 3,
    }}>
    {Template.bind({})}
</Story>

### Success colors

You can use them like the system color above but with `color-system-success` as the 1st argument

<Story name="Success colors" args={{
        storyIndex: 4,
    }}>
    {Template.bind({})}
</Story>

### Caution colors

You can use them like the system color above but with `color-system-caution` as the 1st argument

<Story name="Caution colors" args={{
        storyIndex: 5,
    }}>
    {Template.bind({})}
</Story>

### Primary user colors

You can use them like the system color above but with `color-user-primary` as the 1st argument

<Story name="Primary user colors" args={{
        storyIndex: 6,
    }}>
    {Template.bind({})}
</Story>

### Secondary user colors

You can use them like the system color above but with `color-user-secondary` as the 1st argument

<Story name="Secondary user colors" args={{
        storyIndex: 7,
    }}>
    {Template.bind({})}
</Story>