components.ts

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