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?: {
13    size?: keyof typeof core["fontSize"];
14    weight?: Weight;
15    underline?: boolean;
16  }
17) {
18  const sizeKey = properties.size || fontFamily === "sans" ? "sm" : "md";
19  const size = core.fontSize[sizeKey].value;
20
21  return {
22    family: core.fontFamily[fontFamily],
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: theme.borderColor[color].value,
45    width: 1,
46    ...options,
47  };
48}
49
50export function iconColor(theme: Theme, color: keyof Theme["iconColor"]) {
51  return theme.iconColor[color].value;
52}
53
54export interface Player {
55  selection: {
56    cursor: Color;
57    selection: Color;
58  };
59}
60
61export function player(
62  theme: Theme,
63  playerNumber: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
64): Player {
65  return {
66    selection: {
67      cursor: theme.player[playerNumber].cursorColor.value,
68      selection: theme.player[playerNumber].selectionColor.value,
69    },
70  };
71}
72
73export function backgroundColor(
74  theme: Theme,
75  name: keyof Theme["backgroundColor"],
76  state?: keyof BackgroundColor
77): Color {
78  return theme.backgroundColor[name][state || "base"].value;
79}
80
81export function shadow(theme: Theme) {
82  return {
83    blur: 16,
84    color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
85    offset: [0, 2],
86  };
87}