import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
import { CustomColorPalette } from "../storybook-components/CustomColorPalette";
import { colors } from "../tokens";

<Meta title="Tokens/Colors" />

export const palette = (color, range = [200, 600]) => {
  const offset = (range[0] - 100) / 100;
  const difference = range[1] - range[0];
  const size = difference / 100 + 1;
  const array = Array.from(Array(size), (_, i) => i + 1 + offset);
  const object = {};
  array.forEach((n) => {
    Object.assign(object, {
      [n * 100]: colors[color][n * 100],
    });
  });
  return object;
};

export const bw = {
  black: colors.black,
  white: colors.white,
};

export const grays = palette("gray", [100, 900]);
export const brandGreen = palette("brandGreen");
export const blue = palette("blue", [0, 600]);
export const green = palette("green", [100, 600]);
export const gold = palette("gold", [100, 600]);
export const red = palette("red", [100, 600]);
export const orange = palette("orange");
export const pink = palette("pink");
export const cyan = palette("cyan");
export const purple = palette("purple");

export const lighten = {
  100: colors.lighten["100"],
  200: colors.lighten["200"],
  300: colors.lighten["300"],
};

export const functional = {
  border: {
    border: colors.border,
  },
  link: {
    link: colors.link,
  },
  success: {
    success: colors.success,
  },
  failure: {
    failure: colors.failure,
  },
  caution: {
    caution: colors.caution,
  },
};

# Colors

## Palette

<ColorPalette>
  <ColorItem title="Black &amp; White" colors={bw} />
  <ColorItem title="Gray" colors={grays} />
  <ColorItem title="Brand Green" colors={brandGreen} />
  <ColorItem title="Green" colors={green} />
  <ColorItem title="Gold" colors={gold} />
  <ColorItem title="Orange" colors={orange} />
  <ColorItem title="Red" colors={red} />
  <ColorItem title="Pink" colors={pink} />
  <ColorItem title="Purple" colors={purple} />
  <ColorItem title="Blue" colors={blue} />
  <ColorItem title="Cyan" colors={cyan} />
</ColorPalette>

## Lighten

The following shades of `white` are used to create depth and dimention on
Aptible.com and in rare instances of dark mode UI in the product. They are
primarily to be used on top of `gray-900`.

<CustomColorPalette
  title="Lighten"
  colors={lighten}
  background={grays["900"]}
/>

## Functional

Functional colors provide a keyword that maps to a specific color on the scale.

<ColorPalette>
  <ColorItem title="Border" colors={functional.border} />
  <ColorItem title="Link" colors={functional.link} />
  <ColorItem title="Success" colors={functional.success} />
  <ColorItem title="Failure" colors={functional.failure} />
  <ColorItem title="Caution" colors={functional.caution} />
</ColorPalette>