1import chroma from "chroma-js";
 2import Theme, { BackgroundColor } from "../themes/theme";
 3import { fontFamilies, fontSizes, FontWeight } from "../tokens";
 4import { Color } from "../utils/color";
 5
 6export type TextColor = keyof Theme["textColor"];
 7
 8export function text(
 9  theme: Theme,
10  fontFamily: keyof typeof fontFamilies,
11  color: TextColor,
12  properties?: {
13    size?: keyof typeof fontSizes;
14    weight?: FontWeight;
15    underline?: boolean;
16  }
17) {
18  const sizeKey = properties?.size || fontFamily === "sans" ? "sm" : "md";
19  const size = fontSizes[sizeKey].value;
20
21  return {
22    family: fontFamilies[fontFamily].value,
23    color: theme.textColor[color].value,
24    ...properties,
25    size,
26  };
27}
28
29export interface BorderOptions {
30  width?: number;
31  top?: boolean;
32  bottom?: boolean;
33  left?: boolean;
34  right?: boolean;
35  overlay?: boolean;
36}
37
38export function border(
39  theme: Theme,
40  color: keyof Theme["borderColor"],
41  options?: BorderOptions
42) {
43  return {
44    color: borderColor(theme, color),
45    width: 1,
46    ...options,
47  };
48}
49
50export function borderColor(theme: Theme, color: keyof Theme["borderColor"]) {
51  return theme.borderColor[color].value;
52}
53
54export function iconColor(theme: Theme, color: keyof Theme["iconColor"]) {
55  return theme.iconColor[color].value;
56}
57
58export interface Player {
59  selection: {
60    cursor: Color;
61    selection: Color;
62  };
63}
64
65export function player(
66  theme: Theme,
67  playerNumber: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
68): Player {
69  return {
70    selection: {
71      cursor: theme.player[playerNumber].cursorColor.value,
72      selection: theme.player[playerNumber].selectionColor.value,
73    },
74  };
75}
76
77export function backgroundColor(
78  theme: Theme,
79  name: keyof Theme["backgroundColor"],
80  state?: keyof BackgroundColor
81): Color {
82  return theme.backgroundColor[name][state || "base"].value;
83}
84
85export function shadow(theme: Theme) {
86  return {
87    blur: 16,
88    color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
89    offset: [0, 2],
90  };
91}