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