1import chroma from "chroma-js";
 2
 3export type Color = string;
 4
 5function getColorRamp(colorName, baseColor, steps = 10) {
 6  let hsl = chroma(baseColor).hsl();
 7  let h = Math.round(hsl[0]);
 8  let lightColor = chroma.hsl(h, 0.88, 0.96).hex();
 9  let darkColor = chroma.hsl(h, 0.68, 0.32).hex();
10
11  let ramp = chroma
12    .scale([lightColor, baseColor, darkColor])
13    .domain([0, 0.5, 1])
14    .mode("hsl")
15    .gamma(1)
16    .correctLightness(true)
17    .padding([0, 0.15])
18    .colors(steps);
19
20  let tokens = {};
21  let token = {};
22  let colorNumber = 0;
23
24  for (let i = 0; i < steps; i++) {
25    if (i !== 0) {
26      colorNumber = i * 100;
27    }
28
29    token = {
30      [`${colorName}_${colorNumber}`]: {
31        value: ramp[i].value,
32        rootValue: baseColor,
33        step: i,
34        type: "color",
35      },
36    };
37
38    Object.assign(token, tokens);
39  }
40
41  return tokens;
42}
43
44export default {
45  color: {
46    rose: getColorRamp("rose", "#F43F5E", 10),
47  },
48
49  fontFamily: {
50    sans: "Zed Sans",
51    mono: "Zed Mono",
52  },
53  fontSize: {
54    "3xs": {
55      value: "8",
56      type: "fontSizes",
57    },
58    "2xs": {
59      value: "10",
60      type: "fontSizes",
61    },
62    xs: {
63      value: "12",
64      type: "fontSizes",
65    },
66    sm: {
67      value: "14",
68      type: "fontSizes",
69    },
70    md: {
71      value: "16",
72      type: "fontSizes",
73    },
74    lg: {
75      value: "18",
76      type: "fontSizes",
77    },
78    xl: {
79      value: "20",
80      type: "fontSizes",
81    },
82  },
83};