color.ts

 1import * as chroma from "chroma-js";
 2
 3// Colors should use the LCH color space.
 4// https://www.w3.org/TR/css-color-4/#lch-colors
 5
 6const base = {
 7  black: chroma.lch(0, 0, 0),
 8  white: chroma.lch(150, 0, 0),
 9  gray: {
10    light: chroma.lch(96, 0, 0),
11    mid: chroma.lch(55, 0, 0),
12    dark: chroma.lch(10, 0, 0),
13  },
14  rose: {
15    light: chroma.lch(96, 5, 14),
16    mid: chroma.lch(56, 74, 21),
17    dark: chroma.lch(10, 24, 21),
18  },
19  red: {
20    light: chroma.lch(96, 4, 31),
21    mid: chroma.lch(55, 77, 31),
22    dark: chroma.lch(10, 24, 31),
23  },
24};
25
26export const black = base.black;
27export const white = base.white;
28
29export const gray = chroma.scale([
30  base.gray.light,
31  base.gray.mid,
32  base.gray.dark,
33]);
34export const rose = chroma.scale([
35  base.rose.light,
36  base.rose.mid,
37  base.rose.dark,
38]);
39export const red = chroma.scale([base.red.light, base.red.mid, base.red.dark]);