import { Meta } from "@storybook/addon-docs";
import { ComponentName, Frame, RelatedComponents } from "../../components";
import { COLORS, TYPOGRAPHY, SHADOW, SPACING } from "../../components/related-components/component-description-map";
import { SemanticColors } from "./semantic-colors/semantic-colors";
import { BackgroundColors } from "./background-colors/background-colors";
import { TextColors } from "../../components/text-colors/text-colors";
import { ContentColorsMain } from "../../components/content-colors-main/content-colors-main";
import { BorderColors } from "./border-colors/border-colors";
import { cardColorsExample, menuColorsExample } from "./assets";
import classes from "./colors.stories.module.scss";

<Meta title="Foundations/Colors" />

<!--- Component documentation -->

<ComponentName withFoundationBackground>Colors</ComponentName>

- [Overview](#overview)
- [Color keys](#color-keys)
- [Usage and examples](#usage-and-examples)
- [Up next](#up-next)
- [Feedback](#feedback)

## Overview

l3vels.xyz tool is very visual and our color system helps users identify status, see actions, locate help, and to indicate next steps.
The consistent use of color in our product keeps cognitive loads low, and makes for a unified and engaging user experience.
The colors are designed to be clear and accessible. They come in three color themes.

## Color keys

### Foundation colors

<SemanticColors />

### Core Background colors

<BackgroundColors />

### Content Colors

<ContentColorsMain />

### Border colors

<BorderColors />

## Usage and examples

### Menu

<Frame className={classes["colors-example-frame"]}>
  <img className={classes["menu-colors-example-img"]} src={menuColorsExample} alt="" />
</Frame>

### Card

<Frame className={classes["colors-example-frame"]}>
  <img className={classes["card-colors-example-img"]} src={cardColorsExample} alt="" />
</Frame>

## Up next

<RelatedComponents componentsNames={[TYPOGRAPHY, SHADOW, SPACING]} />
