components.ts

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