1import chroma from "chroma-js";
 2import core, { Color } from "./core";
 3import Theme, { BackgroundColor, Weight } from "./theme";
 4
 5export function text(
 6  theme: Theme,
 7  fontFamily: keyof typeof core.fontFamily,
 8  color: keyof Theme["textColor"],
 9  properties?: { size?: keyof typeof core["fontSize"]; weight?: Weight }
10) {
11  const sizeKey = properties.size || fontFamily === "sans" ? "sm" : "md";
12  const size = core.fontSize[sizeKey].value;
13
14  return {
15    family: core.fontFamily[fontFamily],
16    color: theme.textColor[color].value,
17    ...properties,
18    size,
19  };
20}
21
22export function border(theme: Theme, color: keyof Theme["borderColor"]) {
23  return {
24    color: theme.borderColor[color].value,
25    width: 1,
26  };
27}
28
29export interface Player {
30  selection: {
31    cursor: Color;
32    selection: Color;
33  };
34}
35
36export function player(
37  theme: Theme,
38  playerNumber: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
39): Player {
40  return {
41    selection: {
42      cursor: theme.player[playerNumber].cursorColor.value,
43      selection: theme.player[playerNumber].selectionColor.value,
44    },
45  };
46}
47
48export function backgroundColor(
49  theme: Theme,
50  name: keyof Theme["backgroundColor"],
51  state?: keyof BackgroundColor
52): Color {
53  return theme.backgroundColor[name][state || "base"].value;
54}
55
56export function shadow(theme) {
57  return {
58    blur: 16,
59    color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
60    offset: [0, 2],
61  };
62}