1import * as chroma from "chroma-js";
  2import { ColorFamily, generateColorSet } from "../algorithm";
  3
  4// Colors should use the LCH color space.
  5// https://www.w3.org/TR/css-color-4/#lch-colors
  6
  7export const black = chroma.lch(0, 0, 0);
  8
  9export const white = chroma.lch(150, 0, 0);
 10
 11// Gray ======================================== //
 12
 13const gray: ColorFamily = generateColorSet({
 14  name: "gray",
 15  color: {
 16    start: "#F0F0F0",
 17    middle: "#787878",
 18    end: "#0F0F0F",
 19  },
 20});
 21
 22export const grayLight = chroma.scale(gray.colors).mode("lch");
 23export const grayDark = chroma.scale(gray.invertedColors).mode("lch");
 24
 25// Rose ======================================== //
 26
 27const rose: ColorFamily = generateColorSet({
 28  name: "rose",
 29  color: {
 30    start: "#FFF1F2",
 31    middle: "#F43F5E",
 32    end: "#881337",
 33  },
 34});
 35
 36export const roseLight = chroma.scale(rose.colors).mode("lch");
 37export const roseDark = chroma.scale(rose.invertedColors).mode("lch");
 38
 39// Red ======================================== //
 40
 41const red: ColorFamily = generateColorSet({
 42  name: "red",
 43  color: {
 44    start: "#FEF2F2",
 45    middle: "#EF4444",
 46    end: "#7F1D1D",
 47  },
 48});
 49
 50export const redLight = chroma.scale(red.colors).mode("lch");
 51export const redDark = chroma.scale(red.invertedColors).mode("lch");
 52
 53// Orange ======================================== //
 54
 55const orange: ColorFamily = generateColorSet({
 56  name: "orange",
 57  color: {
 58    start: "#FFF7ED",
 59    middle: "#F97316",
 60    end: "#7C2D12",
 61  },
 62});
 63
 64export const orangeLight = chroma.scale(orange.colors).mode("lch");
 65export const orangeDark = chroma.scale(orange.invertedColors).mode("lch");
 66
 67// Amber ======================================== //
 68
 69const amber: ColorFamily = generateColorSet({
 70  name: "amber",
 71  color: {
 72    start: "#FFFBEB",
 73    middle: "#F59E0B",
 74    end: "#78350F",
 75  },
 76});
 77
 78export const amberLight = chroma.scale(amber.colors).mode("lch");
 79export const amberDark = chroma.scale(amber.invertedColors).mode("lch");
 80
 81// TODO: Add the rest of the colors.
 82// Source: https://www.figma.com/file/YEZ9jsC1uc9o6hgbv4kfxq/Core-color-library?node-id=48%3A816&t=Ae6tY1cVb2fm5xaM-1
 83
 84// Teal ======================================== //
 85
 86const teal: ColorFamily = generateColorSet({
 87  name: "teal",
 88  color: {
 89    start: "#E6FFFA",
 90    middle: "#14B8A6",
 91    end: "#134E4A",
 92  },
 93});
 94
 95export const tealLight = chroma.scale(teal.colors).mode("lch");
 96export const tealDark = chroma.scale(teal.invertedColors).mode("lch");
 97
 98const cyan = generateColorSet({
 99  name: "cyan",
100  color: {
101    start: "#F0FDFA",
102    middle: "#06BBD4",
103    end: "#164E63",
104  },
105});
106
107export const cyanLight = chroma.scale(cyan.colors).mode("lch");
108export const cyanDark = chroma.scale(cyan.colors).mode("lch");
109
110console.log(JSON.stringify(teal, null, 2));