import { Meta } from "@storybook/addon-docs";
import { Figma } from "storybook-addon-designs/blocks";
import { useDarkMode } from "storybook-dark-mode";
import { colorPaletteList, getColorPaletteList } from "../ColorPalette.js";
import InlineComponent from "./InlineComponent";

import ColorGraphic from "../../assets/images/color-graphic.png";

<Meta
  title="Foundation/Helpers/Color"
  parameters={{
    viewMode: "docs",
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

<style>
  {`
  .story-demo-table {
    table-layout: fixed;
  }
  .story-demo-table tr {
    background: transparent !important;
  }
  `}
</style>

# Colors
Colors play a crucial role in creating visually appealing and consistent user interfaces.
This guide provides a comprehensive overview of the colors in the neetoUI design system.

<br />

<img src={ColorGraphic}  width={800} className="border-2 border-solid neeto-ui-rounded-lg p-1"/>

<br/><br/>

<h2 id="color-palette">
  Color palette
</h2>

The neetoUI color palette is carefully curated to provide a harmonious and visually appealing experience. It consists of primary, gray, status and pastel colors.

<br />

<InlineComponent>
  {() => {
    const isDarkMode = useDarkMode();
    const theme = isDarkMode ? "dark" : "light";
    return (
      <table className="story-demo-table">
        <thead>
        <tr>
          <td style={{ width: "75px" }}></td>
          <td>RGB code</td>
          <td>CSS Variable name</td>
          <td>Text color class</td>
          <td>Background color class</td>
        </tr>
        </thead>
        <tbody>
        {colorPaletteList(theme).map((color) => {
          return (
            <tr key={color.name}>
              <td>
                <div
                  className={`w-12 h-12 cursor-pointer rounded-full shadow-xl ${color.name.replace(
                    "--neeto-ui",
                    "neeto-ui-bg"
                  )}`}
                ></div>
              </td>
              <td>
                <code>{color.value}</code>
              </td>
              <td>
                <code>{`${color.name}`}</code>
              </td>
              <td>
                <div className="flex justify-between">
                  <code>{`${color.name.replace(
                    "--neeto-ui",
                    "neeto-ui-text"
                  )}`}</code>
                  <b
                    className={`ml-2 ${color.name.replace(
                      "--neeto-ui",
                      "neeto-ui-text"
                    )}`}
                  >
                    Aa
                  </b>
                </div>
              </td>
              <td className={`${color.name.replace("--neeto-ui", "neeto-ui-bg")}`}>
                <code>{`${color.name.replace("--neeto-ui", "neeto-ui-bg")}`}</code>
              </td>
            </tr>
          );
        })}
        </tbody>
      </table>
    );
  }}
</InlineComponent>

<br/>
<br/>

## Color roles
Colors have assigned roles, which hold a specific meaning based on how they function within the interface.

<br/>

### Primary
The primary color is the most dominant color in our brand identity.

<InlineComponent>
  {() => {
    const isDarkMode = useDarkMode();
    const theme = isDarkMode ? "dark" : "light";
    return (
      <table className="story-demo-table">
        <thead>
        <tr>
          <td style={{ width: "75px" }}></td>
          <td>Color</td>
          <td>Usage</td>
        </tr>
        </thead>
        <tbody>
        {getColorPaletteList(["PRIMARY"], theme)
        .filter((color) => color.usage !== undefined)
        .map((color) => {
          return (
            <tr key={color.name}>
              <td>
                <div
                  className={`w-12 h-12 cursor-pointer rounded-full shadow-xl ${color.name.replace(
                    "--neeto-ui",
                    "neeto-ui-bg"
                  )}`}
                ></div>
              </td>
              <td>
                <code>{`${color.name}`}</code>
              </td>
              <td>
                {`${color.usage}`}
              </td>
            </tr>
          );
        })}
        </tbody>
      </table>
    );
  }}
</InlineComponent>

<br/>

### Gray

<InlineComponent>
  {() => {
    const isDarkMode = useDarkMode();
    const theme = isDarkMode ? "dark" : "light";
    return (
      <table className="story-demo-table">
        <thead>
        <tr>
          <td style={{ width: "75px" }}></td>
          <td>Color</td>
          <td>Usage</td>
        </tr>
        </thead>
        <tbody>
        {getColorPaletteList(["BASE", "GRAY"], theme)
        .filter((color) => color.usage !== undefined)
        .map((color) => {
          return (
            <tr key={color.name}>
              <td>
                <div
                  className={`w-12 h-12 cursor-pointer rounded-full shadow-xl ${color.name.replace(
                    "--neeto-ui",
                    "neeto-ui-bg"
                  )}`}
                ></div>
              </td>
              <td>
                <code>{`${color.name}`}</code>
              </td>
              <td>
                {`${color.usage}`}
              </td>
            </tr>
          );
        })}
        </tbody>
      </table>
    );
  }}
</InlineComponent>

<br/>

### Semantic colors
These are the colors that communicate purpose. They help users convey messages.

<InlineComponent>
  {() => {
    const isDarkMode = useDarkMode();
    const theme = isDarkMode ? "dark" : "light";
    return (
      <table className="story-demo-table">
        <thead>
        <tr>
          <td style={{ width: "75px" }}></td>
          <td>Color</td>
          <td>Usage</td>
        </tr>
        </thead>
        <tbody>
        {getColorPaletteList(["SUCCESS", "ERROR", "WARNING", "INFO"], theme)
        .filter((color) => color.usage !== undefined)
        .map((color) => {
          return (
            <tr key={color.name}>
              <td>
                <div
                  className={`w-12 h-12 cursor-pointer rounded-full shadow-xl ${color.name.replace(
                    "--neeto-ui",
                    "neeto-ui-bg"
                  )}`}
                ></div>
              </td>
              <td>
                <code>{`${color.name}`}</code>
              </td>
              <td>
                {`${color.usage}`}
              </td>
            </tr>
          );
        })}
        </tbody>
      </table>
    );
  }}
</InlineComponent>

<br/>

## Design

<Figma url="https://www.figma.com/file/t2CLe7RVJYwUq9E8Or1mQA/01-Fundamentals?node-id=20%3A2" />


<br/>

<h2 id="how-to-use-colors">
  How to use colors for product UI?
</h2>

We can utilize the colors in two formats:

- As CSS variables
- As classnames

<br/>

### As CSS variables

An example would be <code>--neeto-ui-white</code>, which translates to RGB code <code>255, 255, 255</code>. We can use this variable in our CSS using the var() function.

```
a {
   color: rgb(var(--neeto-ui-white));
}
```

** Adding transparency in color **

```
a {
  color: rgba(var(--neeto-ui-primary-600), 0.5);
}
```

### As Classnames

- Use <a href="#color-palette">color utility classes </a> to apply color to the background of elements, text, and borders.
- Use <a href="#color-palette">background utility classes</a> to set the background color of an element.
- Use <a href="/docs/foundation-helpers-border-color--page"> border utilities </a> to set the border color of an element.
