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}