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